chore: use github-slugger for markdown anchors (#16067)

* fix: add slugify for markdown anchors * chore: remove slugify and use github-slugger * chore: nit
eslint · Jul 2, 2022 · e884933 · e884933
1 parent 02e9cb0
commit e884933
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
@@ -4,11 +4,11 @@ const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginTOC = require("eleventy-plugin-nesting-toc");
-const slugify = require("slugify");
 const markdownItAnchor = require("markdown-it-anchor");
 const markdownItContainer = require("markdown-it-container");
 const Image = require("@11ty/eleventy-img");
 const path = require("path");
+const { slug } = require("github-slugger");
 const yaml = require("js-yaml");
 
 const {
@@ -60,16 +60,23 @@ module.exports = function(eleventyConfig) {
 
     eleventyConfig.addFilter("jsonify", variable => JSON.stringify(variable));
 
+    /**
+     * Takes in a string and converts to a slug
+     * @param {string} text text to be converted into slug
+     * @returns {string} slug to be used as anchors
+     */
+    function slugify(text) {
+        return slug(text.replace(/[<>()[\]{}]/gu, ""))
+        // eslint-disable-next-line no-control-regex -- used regex from https://github.com/eslint/archive-website/blob/master/_11ty/plugins/markdown-plugins.js#L37
+            .replace(/[^\u{00}-\u{FF}]/gu, "");
+    }
+
     eleventyConfig.addFilter("slugify", str => {
         if (!str) {
             return "";
         }
 
-        return slugify(str, {
-            lower: true,
-            strict: true,
-            remove: /["]/gu
-        });
+        return slugify(str);
     });
 
     eleventyConfig.addFilter("URIencode", str => {
@@ -154,7 +161,9 @@ module.exports = function(eleventyConfig) {
 
     eleventyConfig.setLibrary("md",
         markdownIt({ html: true, linkify: true, typographer: true })
-            .use(markdownItAnchor, {})
+            .use(markdownItAnchor, {
+                slugify
+            })
             .use(markdownItContainer, "correct", {})
             .use(markdownItContainer, "incorrect", {})
             .disable("code"));

diff --git a/docs/package.json b/docs/package.json
@@ -28,6 +28,7 @@
         "eleventy-plugin-nesting-toc": "^1.3.0",
         "eleventy-plugin-page-assets": "^0.3.0",
         "eleventy-plugin-reading-time": "^0.0.1",
+        "github-slugger": "^1.4.0",
         "imagemin": "^8.0.1",
         "imagemin-cli": "^7.0.0",
         "js-yaml": "^3.14.1",
@@ -38,8 +39,7 @@
         "netlify-cli": "^10.3.1",
         "npm-run-all": "^4.1.5",
         "rimraf": "^3.0.2",
-        "sass": "^1.52.1",
-        "slugify": "^1.6.3"
+        "sass": "^1.52.1"
     },
     "engines": {
         "node": ">=14.0.0"