feat: support heading IDs for jump links (#264)

* chore: install markdown-it-attrs

* chore: support ID attributes in markdown

* chore: install markdown-it-anchor

* feat: support permalinks to headings within pages

* feat: tweak styles

* chore: remove unused attrs plugin

* chore: update dependencies

* chore: resolve breaking eslint changes

* feat: show permalinks when hovering isn't viable

.eleventy.js

@@ -1,38 +1,52 @@
 const hljs = require('highlight.js');
-const md = require('markdown-it');
+const markdownIt = require('markdown-it');
+const markdownItAnchor = require('markdown-it-anchor');
 
 module.exports = function (eleventyConfig) {
-  eleventyConfig.addPassthroughCopy({ 'src/public': '/' });
+	eleventyConfig.addPassthroughCopy({ 'src/public': '/' });
 
-  const markdownOptions = {
-    html: true,
-    highlight: function (str, lang) {
-      if (lang && hljs.getLanguage(lang)) {
-        try {
-          return `<pre tabindex="0" role="region" aria-label="Code sample"><code class="language-${lang}">${
+	const markdownOptions = {
+		html: true,
+		highlight: function (str, lang) {
+			if (lang && hljs.getLanguage(lang)) {
+				try {
+					return `<pre tabindex="0" role="region" aria-label="Code sample"><code class="language-${lang}">${
 						hljs.highlight(str, {
 							language: lang,
 							ignoreIllegals: true,
 						}).value
 					}</code></pre>`;
-        } catch {
-          // swallow error, fall through to default case
-        }
-      }
+				} catch {
+					// swallow error, fall through to default case
+				}
+			}
 
-      return `<pre tabindex="0" role="region" aria-label="Code sample"><code>${md.utils.escapeHtml(str)}</code></pre>`;
-    },
-  };
+			return `<pre tabindex="0" role="region" aria-label="Code sample"><code>${markdownIt.utils.escapeHtml(str)}</code></pre>`;
+		},
+	};
 
-  eleventyConfig.setLibrary('md', md(markdownOptions));
-  eleventyConfig.addLayoutAlias('default', 'partials/layout.njk');
+	const md = markdownIt(markdownOptions)
+		.use(markdownItAnchor, {
+			level: 2,
+			permalink: markdownItAnchor.permalink.linkAfterHeader({
+				class: 'cmp-permalink__link',
+				style: 'visually-hidden',
+				assistiveText: (title) => `Permalink: ${title}`,
+				visuallyHiddenClass: 'util-visually-hidden',
+				placement: 'before',
+				wrapper: ['<div class="cmp-permalink__wrapper">', '</div>'],
+			}),
+		});
 
-  return {
-    dir: {
-      input: 'pages',
-      output: 'dist',
-      includes: '../src',
-    },
-    markdownTemplateEngine: 'njk',
-  };
+	eleventyConfig.setLibrary('md', md);
+	eleventyConfig.addLayoutAlias('default', 'partials/layout.njk');
+
+	return {
+		dir: {
+			input: 'pages',
+			output: 'dist',
+			includes: '../src',
+		},
+		markdownTemplateEngine: 'njk',
+	};
 };

eslint.config.js

@@ -0,0 +1,22 @@
+const globals = require('globals');
+const js = require('@eslint/js');
+const prettier = require('eslint-config-prettier');
+
+module.exports = [
+	js.configs.recommended,
+	prettier,
+	{
+		languageOptions: {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			globals: {
+				...globals.browser,
+				...globals.node,
+				...globals.es2021,
+			},
+		},
+	},
+	{
+		ignores: ['node_modules', 'dist'],
+	},
+];