Install slugify and markdown-it-anchor plug-ins

eleventy.config.js

@@ -5,6 +5,13 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const metagen = require('eleventy-plugin-metagen');
 const pluginTOC = require('eleventy-plugin-nesting-toc');
 
+// Configure slug filter
+const slugify = require("slugify");
+
+// Configure markdown-it plug-ins
+const markdownIt = require("markdown-it");
+const markdownItAnchor = require("markdown-it-anchor");
+
 module.exports = function (eleventyConfig) {
     // Copy files
     eleventyConfig.addPassthroughCopy("./src/assets/");
@@ -20,6 +27,68 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(metagen);
     eleventyConfig.addPlugin(pluginTOC, { tags: ['h2', 'h3', 'h4', 'h5'] });
 
+    // Configure slug filter
+    eleventyConfig.addFilter("slug", (str) => {
+        if (!str) {
+            return;
+        }
+
+        return slugify(str, {
+            lower: true,
+            remove: /["]/g,
+        });
+    });
+
+    // Configure markdown-it plug-ins
+    eleventyConfig.setLibrary(
+        'md',
+        markdownIt().use(markdownItAnchor)
+    )
+    const linkAfterHeader = markdownItAnchor.permalink.linkAfterHeader({
+        class: "heading-anchor",
+        symbol: "<span hidden>#</span>",
+        style: "aria-labelledby",
+    });
+    const markdownItAnchorOptions = {
+        level: [1, 2, 3, 4, 5],
+        slugify: (str) =>
+            slugify(str, {
+                lower: true,
+                strict: true,
+                remove: /["]/g,
+        }),
+        tabIndex: false,
+        permalink(slug, opts, state, idx) {
+            state.tokens.splice(
+                idx,
+                0,
+                Object.assign(new state.Token("div_open", "div", 1), {
+                    // Add class "header-wrapper [h1 or h2 or h3]"
+                    attrs: [["class", `heading-wrapper ${state.tokens[idx].tag}`]],
+                    block: true,
+                })
+            );
+
+            state.tokens.splice(
+                idx + 4,
+                0,
+                Object.assign(new state.Token("div_close", "div", -1), {
+                    block: true,
+                })
+            );
+
+            linkAfterHeader(slug, opts, state, idx + 1);
+        },
+    };
+
+    /* Markdown Overrides */
+    let markdownLibrary = markdownIt({
+        html: true,
+    }).use(markdownItAnchor, markdownItAnchorOptions);
+
+    /* This is the part that tells 11ty to swap to our custom config */
+    eleventyConfig.setLibrary("md", markdownLibrary);
+
     return {
         dir: {
             input: "src"

package.json

@@ -17,6 +17,8 @@
     "@11ty/eleventy-plugin-webc": "^0.11.2",
     "eleventy-plugin-metagen": "^1.8.3",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "install": "^0.13.0"
+    "install": "^0.13.0",
+    "markdown-it-anchor": "^8.6.7",
+    "slugify": "^1.6.6"
   }
 }