Give ids to headers in the readmes

Auroratide · Feb 11, 2024 · 42d55c9 · 42d55c9
1 parent ccfe9cc
commit 42d55c9
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
@@ -8,6 +8,18 @@ const unleashTheDemos = (str: string) => str
 	.replaceAll("<!--DEMO", "")
 	.replaceAll("/DEMO-->", "")
 
+
+const kebabify = (text: string) => text
+	.toLocaleLowerCase()
+	.replaceAll(/[^a-z0-9]+/g, "-")
+	.replaceAll(/--/g, "-")
+	.replaceAll(/^-|-$/g, "")
+
+const idHeaders = (html: string) => html
+	.replaceAll(/<h(\d)>(.*?)<\/h\d>/g, (_, level, text) =>
+		`<h${level} id="${kebabify(text)}">${text}</h${level}>`
+	)
+
 const parseMarkdown = new MarkdownIt({
 	html: true,
 	highlight: (str, lang) => {
@@ -29,6 +41,6 @@ export default defineConfig({
 	},
 	plugins: [ mdPlugin({
 		mode: [Mode.HTML],
-		markdown: (str) => parseMarkdown.render(unleashTheDemos(str)),
+		markdown: (str) => idHeaders(parseMarkdown.render(unleashTheDemos(str))),
 	}), sveltekit() ],
 })