fix(blog-content): mismatched anchor slug

This commit is contained in:
Kim, Jimin 2023-06-29 14:04:29 +09:00
parent 4499130d8d
commit 91a376429a
3 changed files with 22 additions and 9 deletions

View file

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

View file

@ -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,
})
}

17
pnpm-lock.yaml generated
View file

@ -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: