feat: enable to specify any id for headings (#3)

Author: tomoam

apps/svelte.dev/src/routes/content.json/+server.ts

@@ -44,6 +44,8 @@ async function content() {
 			rank
 		});
 
+		const headingRegex = /(.*?)(?:\s(<!--(.*?)-->))?$/;
+
 		for (const section of sections) {
 			const lines = section.split('\n');
 			const h2 = lines.shift();
@@ -52,13 +54,17 @@ async function content() {
 				continue;
 			}
 
+			const h2match = headingRegex.exec(h2);
+			const h2text = h2match && h2match[1] || h2;
+			const h2slug = h2match && h2match[3] || slugify(h2);
+
 			const content = lines.join('\n');
 			const subsections = content.trim().split('## ');
 			const intro = subsections?.shift()?.trim();
 			if (intro) {
 				blocks.push({
-					breadcrumbs: [...breadcrumbs, clean(metadata.title), clean(h2)],
-					href: get_href([slug, slugify(h2)]),
+					breadcrumbs: [...breadcrumbs, clean(metadata.title), clean(h2text)],
+					href: get_href([slug, slugify(h2slug)]),
 					content: await plaintext(intro),
 					rank
 				});
@@ -72,9 +78,13 @@ async function content() {
 					continue;
 				}
 
+				const h3match = headingRegex.exec(h3);
+				const h3text = h3match && h3match[1] || h3;
+				const h3slug = h3match && h3match[3] || slugify(h3);
+
 				blocks.push({
-					breadcrumbs: [...breadcrumbs, clean(metadata.title), clean(h2), clean(h3)],
-					href: get_href([slug, slugify(h2) + '-' + slugify(h3)]),
+					breadcrumbs: [...breadcrumbs, clean(metadata.title), clean(h2text), clean(h3text)],
+					href: get_href([slug, slugify(h2slug) + '-' + slugify(h3slug)]),
 					content: await plaintext(lines.join('\n').trim()),
 					rank
 				});

packages/site-kit/src/lib/markdown/renderer.ts

@@ -315,9 +315,14 @@ export async function render_content_markdown(
 		},
 		heading({ tokens, depth }) {
 			const text = this.parser!.parseInline(tokens);
-			const html = text.replace(/<\/?code>/g, '');
 
-			headings[depth - 1] = slugify(text);
+			const match = text.match(/(.*?)(?:\s(<!--(.*?)-->))?$/);
+
+			const title = (match && match[2]) ? match[1] : text;
+
+			const html = title.replace(/<\/?code>/g, '');
+
+			headings[depth - 1] = (match && match[2]) ? match[3] : slugify(html);
 			headings.length = depth;
 			const slug = headings.filter(Boolean).join('-');
 

packages/site-kit/src/lib/server/content/index.ts

@@ -31,14 +31,14 @@ export async function create_index(
 				'<code>$1</code>'
 			);
 
-		const sections = Array.from(body.matchAll(/^##\s+(.*)$/gm)).map((match) => {
+		const sections = Array.from(body.matchAll(/^##\s+(.*?)(?:\s(<!--(.*?)-->))?$/gm)).map((match) => {
 			const title = smart_quotes(match[1])
 				// replace < and > inside code spans
 				.replace(/`(.+?)`/, (_, contents) => contents.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
 				// turn e.g. `class:_name_` into `class:<em>name</em>`
 				.replace(/_(.+)_/g, (_, contents) => `<em>${contents}</em>`);
 
-			const slug = slugify(title);
+			const slug = match[3] || slugify(title);
 
 			return { slug, title };
 		});