diff --git a/bun.lockb b/bun.lockb index c3d70508..2bb70954 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/eleventy.config.js b/eleventy.config.js index 73bbddc5..98380b3c 100644 --- a/eleventy.config.js +++ b/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: "", + 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" diff --git a/package.json b/package.json index 315d580a..e098de34 100644 --- a/package.json +++ b/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" } } \ No newline at end of file