Add a TOC

pelicanconf.py

@@ -27,6 +27,7 @@ FIREFOX_BOOKMARKS_PATH = (
 )
 PIWIK_SITE_ID = 3
 PLUGIN_PATHS = ["."]
-PLUGINS = [
-    "simplereader",
-]
+PLUGINS = ["simplereader", ]
+
+CACHE_OUTPUT_DIRECTORY = "cache"
+CACHE_DOMAIN = "/cache/"

simplereader.py

@@ -16,6 +16,10 @@ class SimpleReader(MarkdownReader):
 
     def read(self, filename):
         content, metadata = super(SimpleReader, self).read(filename)
+        # Add the TOC to the metadata.
+        if len(self._md.toc) > 300:
+            metadata["table_of_contents"] = self._md.toc
+
         # Get the title from the first h1
         if "title" not in metadata and len(self._md.toc_tokens):
             first_title = self._md.toc_tokens[0]

theme/static/css/styles.css

@@ -38,7 +38,6 @@ td img {
 
 ul.articles_list  {
   margin: auto;
-  padding-left: 10rem;
 }
 
 ul.articles_list h2 {
@@ -62,6 +61,15 @@ ul.articles_list li {
   font-weight: lighter;
 }
 
+@media screen and (max-width: 600px) {
+  .articles_list .category {
+    display: none;
+  }
+  .articles_list .metadata {
+    min-width: 120px;
+  }
+}
+
 .articles_list .date {
   font-weight: bold;
   text-align: right;
@@ -84,4 +92,24 @@ ul.articles_list li {
 
 a.no-color {
   color: inherit;
+}
+
+#toc_container {
+  background: #f9f9f9 none repeat scroll 0 0;
+  border: 1px solid #aaa;
+  display: table;
+  font-size: 95%;
+  margin-bottom: 1em;
+  padding: 20px;
+  width: auto;
+  margin: auto;
+}
+
+#toc_container > ul {
+  font-weight: 700;
+  text-align: center;
+}
+
+#toc_container li, #toc_container ul, #toc_container ul li{
+  list-style: outside none none !important;
 }

theme/templates/article.html

@@ -65,6 +65,11 @@ h1 {
     {% if article.headline %}
     <h2 class="post-headline">{{ article.headline }}</h2>
     {% endif %}
+    {% if article.table_of_contents %}
+    <div id="toc_container">
+      {{ article.table_of_contents }}
+      </div>
+    {% endif %}
     <h1>🌟</h1>
     {{ article.content }}
     {% if article.image and article.image_link and article.image_author and article.image_license %}