fix(blog-content): mismatched anchor slug

packages/blog-content/package.json

@@ -14,6 +14,7 @@
 		"@types/ejs": "^3.1.1",
 		"@types/katex": "^0.14.0",
 		"@types/markdown-it": "^12.2.3",
+		"@types/read-time-estimate": "^0.0.0",
 		"@types/svgo": "^3.0.0",
 		"@types/tinycolor2": "^1.4.3",
 		"canvas": "^2.11.2",
@@ -32,11 +33,9 @@
 		"markdown-toc": "^1.2.0",
 		"read-time-estimate": "^0.0.3",
 		"simple-icons": "^7.21.0",
+		"slugify": "^1.6.6",
 		"svgo": "^3.0.2",
 		"tinycolor2": "^1.4.2",
 		"typescript": "^4.9.4"
-	},
-	"devDependencies": {
-		"@types/read-time-estimate": "^0.0.0"
 	}
 }

packages/blog-content/src/parseMarkdown.ts

@@ -9,6 +9,7 @@ import markdownItFootnote from "markdown-it-footnote" // markdown footnote
 
 import highlightLines from "markdown-it-highlight-lines" // highlighting specific lines in code blocks
 
+import slugify from "slugify"
 import matter from "gray-matter"
 import toc from "markdown-toc" // table of contents generation
 import hljs from "highlight.js" // code block syntax highlighting
@@ -20,6 +21,8 @@ import { JSDOM } from "jsdom" // HTML DOM parsing
 import { nthIndex } from "./util"
 import { MarkdownData, ParseMode } from "./types/types"
 
+const slugifyIt = (s: string) => slugify(s, { lower: true, strict: true })
+
 const md = markdownIt({
 	// https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
 	highlight: (str, lang) => {
@@ -42,7 +45,9 @@ const md = markdownIt({
 		permalink: markdownItAnchor.permalink.ariaHidden({
 			placement: "before",
 			symbol: "#",
+			renderHref: (s) => `#${slugifyIt(s)}`,
 		}),
+		slugify: slugifyIt,
 	})
 	.use(markdownItTaskCheckbox)
 	.use(markDownItMark)
@@ -122,5 +127,7 @@ export default function parseMarkdown(
 }
 
 export function generateToc(markdownRaw: string): string {
-	return md.render(toc(markdownRaw).content)
+	return md.render(toc(markdownRaw).content, {
+		slugify: slugifyIt,
+	})
 }

pnpm-lock.yaml

@@ -334,6 +334,9 @@ importers:
       '@types/markdown-it':
         specifier: ^12.2.3
         version: 12.2.3
+      '@types/read-time-estimate':
+        specifier: ^0.0.0
+        version: 0.0.0
       '@types/svgo':
         specifier: ^3.0.0
         version: 3.0.0
@@ -388,6 +391,9 @@ importers:
       simple-icons:
         specifier: ^7.21.0
         version: 7.21.0
+      slugify:
+        specifier: ^1.6.6
+        version: 1.6.6
       svgo:
         specifier: ^3.0.2
         version: 3.0.2
@@ -397,10 +403,6 @@ importers:
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
-    devDependencies:
-      '@types/read-time-estimate':
-        specifier: ^0.0.0
-        version: 0.0.0
 
   packages/eslint-config:
     devDependencies:
@@ -5304,7 +5306,7 @@ packages:
 
   /@types/read-time-estimate@0.0.0:
     resolution: {integrity: sha512-lmVkVzFLBrnXuLBIio2cgDQBRvDL0/QAKWFtnzRk0URD+0/wUHgzIh2U61dksOj/mW3Z+DkijIfNHgmUiYP7dQ==}
-    dev: true
+    dev: false
 
   /@types/resolve@1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
@@ -14019,6 +14021,11 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /slugify@1.6.6:
+    resolution: {integrity: sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==}
+    engines: {node: '>=8.0.0'}
+    dev: false
+
   /sockjs@0.3.24:
     resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==}
     dependencies: