Fix: fix duplicate slugs rendered for markdown components

Author: sanketssc

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

@@ -329,6 +329,7 @@ export async function render_content_markdown(
 	twoslashBanner?: TwoslashBanner
 ) {
 	const headings: string[] = [];
+	const seen_slugs = new Map<string, number>();
 	const { check = true, references } = options ?? {};
 
 	interface CodeBlockFile {
@@ -600,7 +601,11 @@ export async function render_content_markdown(
 
 			headings[depth - 1] = slugify(text);
 			headings.length = depth;
-			const slug = headings.filter(Boolean).join('-');
+			let slug = headings.filter(Boolean).join('-');
+
+			const count = seen_slugs.get(slug) ?? 0;
+			seen_slugs.set(slug, count + 1);
+			if (count > 0) slug = `${slug}-${count}`;
 
 			return `<h${depth} id="${slug}"><span>${html}</span><a href="#${slug}" class="permalink" aria-label="permalink"></a></h${depth}>`;
 		},

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

@@ -30,6 +30,13 @@ export async function create_index(
 				'<code>$1</code>'
 			);
 
+		const seen_slugs = new Map<string, number>();
+		const dedupe = (slug: string) => {
+			const count = seen_slugs.get(slug) ?? 0;
+			seen_slugs.set(slug, count + 1);
+			return count > 0 ? `${slug}-${count}` : slug;
+		};
+
 		const sections = Array.from(body.matchAll(/^#{2,3}\s+(.*)$/gm)).reduce((arr, match) => {
 			if (is_in_code_block(body, match.index || 0)) return arr;
 			const title = match[1];
@@ -43,10 +50,13 @@ export async function create_index(
 			if (match[0].startsWith('###')) {
 				const section = arr.at(-1);
 				if (section) {
-					section.subsections.push({ slug: `${section.slug}-${slug}`, title: displayed_title });
+					section.subsections.push({
+						slug: dedupe(`${section.slug}-${slug}`),
+						title: displayed_title
+					});
 				}
 			} else {
-				arr.push({ slug, title: displayed_title, subsections: [] });
+				arr.push({ slug: dedupe(slug), title: displayed_title, subsections: [] });
 			}
 
 			return arr;