feat: integrate a "table of content"

eleventy.config.js

@@ -1,5 +1,6 @@
 const { DateTime } = require("luxon");
 const markdownItAnchor = require("markdown-it-anchor");
+const pluginTOC = require('eleventy-plugin-toc')
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
@@ -9,6 +10,7 @@ const htmlmin = require('html-minifier');
 
 let options = {
   // whatever options you have set for the library here
+  html: true,
   typographer: true,
   quotes: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'],
 };
@@ -41,6 +43,11 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(pluginSyntaxHighlight);
   eleventyConfig.addPlugin(pluginNavigation);
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+  eleventyConfig.addPlugin(pluginTOC, {
+    tags: ['h2', 'h3'],
+    wrapperClass: 'table-of-contents',
+    ul: true,
+  });
 
   eleventyConfig.addFilter("env", (key, def="NOT DEFINED") => process.env[key] || def);
 
@@ -109,11 +116,6 @@ module.exports = function(eleventyConfig) {
   // Customize Markdown library and settings:
   eleventyConfig.amendLibrary("md", mdLib => {
     mdLib.use(markdownItAnchor, {
-      permalink: markdownItAnchor.permalink.ariaHidden({
-        placement: "after",
-        class: "direct-link",
-        symbol: "#",
-      }),
       level: [1,2,3,4],
       slugify: eleventyConfig.getFilter("slug")
     });

package.json

@@ -22,24 +22,24 @@
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
-    "markdown-it-anchor": "^8.6.4",
-    "markdown-it-image-figures": "^2.1.0",
-    "luxon": "^3.0.4",
-
     "@babel/core": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.5",
     "core-js": "^3.22.8",
     "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "eleventy-plugin-toc": "^1.1.5",
     "eslint": "^8.17.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.26.0",
     "html-minifier": "^4.0.0",
+    "luxon": "^3.0.4",
+    "markdown-it-anchor": "^8.6.4",
+    "markdown-it-image-figures": "^2.1.0",
     "md5-file": "^5.0.0",
     "mini-css-extract-plugin": "^2.6.0",
     "npm-run-all": "^4.1.5",
-    "css-minimizer-webpack-plugin": "^4.0.0",
     "postcss-loader": "^7.0.0",
     "rimraf": "^3.0.2",
     "sass": "^1.52.2",

src/_layouts/article.njk

@@ -2,6 +2,11 @@
 layout: blog.njk
 templateClass: tmpl-post
 ---
+{%- if toc %}
+<aside class="left-side">
+  {{ content | toc | safe }}
+</aside>
+{%- endif %}
 <div class="main-content">
   <h1>{{ title }}</h1>
 

src/blog_assets/css/index.scss

@@ -55,6 +55,7 @@ body {
   font-family: var(--font-family);
   color: var(--text-color);
   background-color: var(--background-color);
+  scroll-behavior: smooth;
 }
 
 main {
@@ -68,11 +69,52 @@ main {
   width: 1200px;
 }
 
-.right-side {
+.left-side, .right-side {
   position: sticky;
   top: 1rem;
   align-self: flex-start;
   width: 320px;
+}
+.left-side {
+  padding-right: 60px;
+}
+
+.table-of-contents {
+  background: var(--color-gray-20);
+  border-radius: 5px;
+  padding: 15px 5px;
+}
+
+.table-of-contents ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    a {
+      font-weight: bold;
+      font-size: 0.8125rem;
+      margin: 5px;
+      color: var(--text-color);
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.table-of-contents > ul ul li {
+  a {
+    font-weight: normal;
+  }
+}
+
+.right-side {
   padding-left: 60px;
 }
 
@@ -285,12 +327,14 @@ figure figcaption {
 .post-tag a {
   color: var(--text-color);
   font-size: 0.8125rem; /* 13px /16 */
+  font-weight: 700;
   text-decoration: none;
 }
 
 /* Tags list */
 .post-metadata {
   display: flex;
+  flex-direction: column;
   gap: .5em;
   font-size: 0.8125rem; /* 13px /16 */
   color: var(--text-color-sub);
@@ -350,21 +394,6 @@ h1 + .post-metadata {
   }
 }
 
-/* Direct Links / Markdown Headers */
-.direct-link {
-  font-family: sans-serif;
-  text-decoration: none;
-  font-style: normal;
-  margin-left: .1em;
-}
-a[href].direct-link {
-  color: transparent;
-}
-a[href].direct-link:focus,
-:hover > a[href].direct-link {
-  color: var(--color-gray-50);
-}
-
 .main-footer {
   align-items: center;
   background: var(--color-green-1);
@@ -473,9 +502,15 @@ pre[class*="language-diff-"] {
     max-width: 100%;
   }
   .right-side {
+    position: relative;
     width: 100%;
-    padding-left: 0;
+    padding: 5rem 0;
-    padding-top: 5rem;
+  }
+  .left-side {
+    position: relative;
+    order: 2;
+    width: 100%;
+    padding-right: 0;
   }
   h1 + .post-metadata {
     flex-direction: column;