Use better heading anchor link plugin

.eleventy.js

@@ -1,6 +1,5 @@
 const project = require('./package.json');
-const replaceLink = require('markdown-it-replace-link');
-const path = require("path")
+const markdownItAnchor = require('markdown-it-anchor');
 
 function byIndex(left, right) {
   const a = left.data.index ? Number.parseInt(left.data.index) : 0;
@@ -26,20 +25,11 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addGlobalData("project", project);
 
-  eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(replaceLink, {
-    replaceLink: function (link) {
-      const isUrl = URL.canParse(link);
-      const file = path.parse(link);
-
-      if (!isUrl && file.ext === '.md') {
-        const anchor = file.name;
-        return `#${anchor}`;
-      } else if (!isUrl && file.ext.startsWith('.md#')) {
-        const anchor = file.ext.split('#').pop();
-        return `#${anchor}`;
-      }
-
-      return link;
-    }
-  }));
+  eleventyConfig.amendLibrary('md', (mdLib) => {
+    mdLib.use(markdownItAnchor, {
+      permalink: markdownItAnchor.permalink.headerLink(),
+      level: [1, 2, 3, 4],
+      slugify: eleventyConfig.getFilter('slugify')
+    });
+  });
 };

assets/styles/_links.css

@@ -16,6 +16,15 @@
   font-style: normal;
 }
 
+.content h1 a,
+.content h2 a,
+.content h3 a,
+.content h4 a {
+  text-decoration: none;
+  background-image: none;
+  background-color: transparent;
+}
+
 .content a:hover {
   background-color: #4b4b4b;
 }

package.json

@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "markdown-it-replace-link": "^1.2.1",
-    "vellum-doc": "^0.6.0"
+    "markdown-it-anchor": "^9.0.1",
+    "vellum-doc": "^0.7.0"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",