Install slugify and markdown-it-anchor plug-ins

This commit is contained in:
Helen Chong 2024-04-13 01:54:48 +08:00
parent 6224c16da7
commit 7a1a50e677
3 changed files with 72 additions and 1 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -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: "<span hidden>#</span>",
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"

View File

@ -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"
}
}