Add markdown-it-anchor for automatic heading id tags

.eleventy.js

@@ -1,49 +1,57 @@
 const { nunjucks } = require("nunjucks");
 
 module.exports = function(eleventyConfig) {
-    const markdownIt = require('markdown-it')
-    const markdownItAttrs = require('markdown-it-attrs')
-    const markdownItOptions = {
-      html: true,
-      breaks: true,
-      linkify: true
-    }
-    eleventyConfig.addTemplateFormats('svg');
-    eleventyConfig.addExtension('svg', {
-      outputFileExtension: 'svg',
-      key: 'html'
-      /*compile: async (inputContent) => {
-        let output = nunjucks.renderString(inputContent)
-        return async () => {
-          return output;
-        };
-      }*/
-    });
-    const markdownLib = markdownIt(markdownItOptions).use(markdownItAttrs)
-
-    eleventyConfig.addPassthroughCopy('halfmoonui');
-    eleventyConfig.addPassthroughCopy('jsonpath-0.8.0.js');
-    eleventyConfig.addPassthroughCopy('custom-variables.css');
-
-    eleventyConfig.addPassthroughCopy('character-sheets/*.pdf');
-
-    eleventyConfig.addPassthroughCopy({'_data/parts.json': 'mechdb/parts.json'});
-    eleventyConfig.addPassthroughCopy({'_data/planets.json': 'lore/planets.json'});
-
-    eleventyConfig.addPassthroughCopy('images/*.svg');
-    eleventyConfig.addPassthroughCopy('images/planets/*.svg');
-
-    eleventyConfig.setNunjucksEnvironmentOptions({
-      throwOnUndefined: true
-    });
-    eleventyConfig.setLibrary('md', markdownLib);
-    eleventyConfig.addShortcode('keyword', function(word, glossary) {
-      return '<b class="keyword" onclick="halfmoon.initStickyAlert({content: \'' + glossary[word] + '\', title: \'' + word + '\', hasDismissButton: true, timeShown: 5000});">' + word + '</b>'
-    });
-    eleventyConfig.addFilter('getObjectsByAttribute', function(objects, attribute, value) {
-      return objects.filter((obj) => obj[attribute] == value);
-    });
-    return {
-      htmlTemplateEngine: 'njk'
-    }
+  // Configure markdown-it plugins
+  const markdownIt = require('markdown-it')
+  const markdownItAnchor = require('markdown-it-anchor')
+  const markdownItAttrs = require('markdown-it-attrs')
+  const markdownItOptions = {
+    html: true,
+    breaks: true,
+    linkify: true
+  }
+  const mdLib = markdownIt(markdownItOptions).use(markdownItAttrs).use(markdownItAnchor)
+  eleventyConfig.setLibrary('md', mdLib);
+
+  // Enable SVG templating
+  eleventyConfig.addTemplateFormats('svg');
+  eleventyConfig.addExtension('svg', {
+    outputFileExtension: 'svg',
+    key: 'html'
+  });
+
+  // Export css and js artifacts
+  eleventyConfig.addPassthroughCopy('halfmoonui');
+  eleventyConfig.addPassthroughCopy('jsonpath-0.8.0.js');
+  eleventyConfig.addPassthroughCopy('custom-variables.css');
+
+  // Export character sheets
+  eleventyConfig.addPassthroughCopy('character-sheets/*.pdf');
+
+  // Export MechDB artifacts
+  eleventyConfig.addPassthroughCopy({'_data/parts.json': 'mechdb/parts.json'});
+  eleventyConfig.addPassthroughCopy({'_data/planets.json': 'lore/planets.json'});
+
+  // Export images
+  eleventyConfig.addPassthroughCopy('images/*.svg');
+  eleventyConfig.addPassthroughCopy('images/planets/*.svg');
+
+  // ???
+  eleventyConfig.setNunjucksEnvironmentOptions({
+    throwOnUndefined: true
+  });
+
+  // Custom shortcodes
+  eleventyConfig.addShortcode('keyword', function(word, glossary) {
+    return '<b class="keyword" onclick="halfmoon.initStickyAlert({content: \'' + glossary[word] + '\', title: \'' + word + '\', hasDismissButton: true, timeShown: 5000});">' + word + '</b>'
+  });
+
+  // Custom filters
+  eleventyConfig.addFilter('getObjectsByAttribute', function(objects, attribute, value) {
+    return objects.filter((obj) => obj[attribute] == value);
+  });
+
+  return {
+    htmlTemplateEngine: 'njk'
+  }
 };

justfile

@@ -2,7 +2,7 @@ default: serve
 
 # Install dependencies
 setup:
-    npm i @11ty/eleventy markdown-it markdown-it-attrs
+    npm i @11ty/eleventy markdown-it markdown-it-attrs markdown-it-anchor
 
 build: clean setup
     #!/usr/bin/env bash

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@11ty/eleventy": "^2.0.1",
     "markdown-it": "^13.0.1",
+    "markdown-it-anchor": "^8.6.7",
     "markdown-it-attrs": "^4.1.6"
   }
 }