resolve issue of special characters in header ids

introduce slugify

website/.eleventy.js

@@ -1,35 +1,39 @@
 module.exports = function (eleventyConfig) {
-    // Keeps the same directory structure.
-    eleventyConfig.addPassthroughCopy("src/assets/");
-    eleventyConfig.addPassthroughCopy("src/img");
-    eleventyConfig.addPassthroughCopy("src/css");
-    eleventyConfig.addPassthroughCopy("src/js");
-    eleventyConfig.addPassthroughCopy("src/contact");
-    eleventyConfig.addPassthroughCopy("src/app-demo");
-    eleventyConfig.addPassthroughCopy("src/blog/images");
+  // Keeps the same directory structure.
+  eleventyConfig.addPassthroughCopy("src/assets/");
+  eleventyConfig.addPassthroughCopy("src/img");
+  eleventyConfig.addPassthroughCopy("src/css");
+  eleventyConfig.addPassthroughCopy("src/js");
+  eleventyConfig.addPassthroughCopy("src/contact");
+  eleventyConfig.addPassthroughCopy("src/app-demo");
+  eleventyConfig.addPassthroughCopy("src/blog/images");
 
-    eleventyConfig.addCollection('blogs', function (collection) {
-        return collection.getFilteredByGlob('src/blog/*.md').reverse();
-    });
+  eleventyConfig.addCollection('blogs', function (collection) {
+    return collection.getFilteredByGlob('src/blog/*.md').reverse();
+  });
 
-    eleventyConfig.addWatchTarget("src/css");
-    eleventyConfig.addWatchTarget("markdown/");
-    eleventyConfig.addWatchTarget("components/Card.js");
+  eleventyConfig.addWatchTarget("src/css");
+  eleventyConfig.addWatchTarget("markdown/");
+  eleventyConfig.addWatchTarget("components/Card.js");
 
-    // this works because Eleventy also installs markdown-it 
-    const markdownIt = require("markdown-it");
+  const markdownIt = require("markdown-it");
+  const markdownItAnchor = require("markdown-it-anchor");
+  const slugify = require("slugify");
 
-    // create a new markdown-it instance with the plugin
-    const markdownItAnchor = require("markdown-it-anchor");
+  const markdownLib = markdownIt({
+    html: true,
+    breaks: true,
+    linkify: true
+  }).use(markdownItAnchor, {
+    slugify: (str) =>
+      slugify(str, {
+        lower: true,
+        strict: true,
+      })
+  });
 
-    const markdownLib = markdownIt({
-        html: true,
-        breaks: true,
-        linkify: true
-    }).use(markdownItAnchor);
-
-    // replace the default markdown-it instance
-    eleventyConfig.setLibrary("md", markdownLib);
+  // replace the default markdown-it instance
+  eleventyConfig.setLibrary("md", markdownLib);
 
   return {
     dir: {

website/package.json

@@ -17,6 +17,7 @@
     "@11ty/eleventy": "^1.0.1",
     "common-tags": "^1.8.2",
     "markdown-it-anchor": "^8.6.4",
+    "slugify": "^1.6.5",
     "tailwindcss": "^3.0.24"
   }
 }