Add TOCs to articles

.eleventy.js

@@ -1,7 +1,12 @@
+const eleventyPluginToc = require("eleventy-plugin-toc")
+const markdownIt = require("markdown-it")
+const markdownItAnchor = require("markdown-it-anchor")
+
+
 module.exports = (eleventyConfig) => {
-    eleventyConfig.addFilter("isoDate", dateObj => {
-        return dateObj.toISOString().substr(0, 10);
-    });
+    eleventyConfig.addFilter("isoDate", it => it.toISOString().substring(0, 10));
+    eleventyConfig.addPlugin(eleventyPluginToc, {tags: ["h2", "h3"], wrapper: "div"});
+    eleventyConfig.setLibrary("md", markdownIt().use(markdownItAnchor));
 
     return {
         pathPrefix: "/blog/",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "blog",
-    "version": "1.3.1",
+    "version": "1.4.0",
     "description": "Florine's personal blog.",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",
@@ -16,7 +16,8 @@
         "deploy": "grunt deploy"
     },
     "devDependencies": {
-        "@11ty/eleventy": "^1.0.1",
+        "@11ty/eleventy": "^1.0.2",
+        "eleventy-plugin-toc": "^1.1.5",
         "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
         "grunt-contrib-clean": "^2.0.1",
@@ -24,6 +25,8 @@
         "grunt-contrib-watch": "^1.1.0",
         "grunt-exec": "^3.0.0",
         "grunt-focus": "^1.0.0",
-        "grunt-text-replace": "^0.4.0"
+        "grunt-text-replace": "^0.4.0",
+        "markdown-it": "^13.0.1",
+        "markdown-it-anchor": "^8.6.5"
     }
 }

src/main/_includes/post.njk

@@ -5,7 +5,10 @@ layout: default
 <div class="row">
     <div class="column">
         <p><a href="{{ '/' | url }}">&larr; home</a></p>
-
+    </div>
+</div>
+<div class="row">
+    <div id="innerBody" class="column{% if content | toc %} column-75{% endif %}">
         <h2 class="inline-header">{{ title }}</h2>
         {% if date %}<u>{{ date | isoDate }}</u>{% endif %}
 
@@ -15,4 +18,12 @@ layout: default
 
         <a href="{{ '/' | url }}">&larr; home</a><br />
     </div>
+    {% if content | toc %}
+    <div class="column column-25">
+        <div id="toc">
+            <h3>Contents</h3>
+            {{ content | toc | safe }}
+        </div>
+    </div>
+    {% endif %}
 </div>

src/main/_posts/2017-03-01-raspi.md

@@ -76,7 +76,7 @@ Example output will be given directly after it in a separate code block.
 
 3. Enjoy!
 
-### Disconnecting
+### 2.1 Disconnecting
 To unmount the Raspi:
 
     $ umount /mnt/raspi

src/main/css/main.css

@@ -1,7 +1,8 @@
-#contents .container {
-    max-width: 80rem;
+#innerBody {
+    max-width: 75rem;
 }
 
+
 p {
     text-align: justify !important;
     text-justify: inter-word !important;
@@ -11,6 +12,16 @@ ol {
     list-style: decimal outside !important;
 }
 
+
+#toc {
+    position: fixed;
+}
+
+#toc ol {
+    list-style-type: none !important;
+}
+
+
 .inline-header {
     display: inline-block;