From cacf8a7e3623da2c134446cf4d1c065527d253f9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 12 Oct 2024 09:34:19 -0400
Subject: [PATCH 1/2] fix slugs - closes #345

---
 packages/site-kit/src/lib/markdown/renderer.ts | 12 +++++-------
 packages/site-kit/src/lib/markdown/utils.ts    |  7 +++----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 110901d60c..06345eed1d 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -274,16 +274,14 @@ export async function render_content_markdown(
 
 			return smart_quotes(token.text, true);
 		},
-		heading({ tokens, depth, raw }) {
-			const text = this.parser!.parseInline(tokens);
+		heading({ tokens, depth }) {
+			const text = this.parser!.parseInline(tokens).replace(/<\/?code>/g, '');
 
-			headings[depth - 1] = slugify(raw);
+			headings[depth - 1] = slugify(text);
 			headings.length = depth;
 			const slug = headings.filter(Boolean).join('-');
-			return `<h${depth} id="${slug}"><span>${text.replace(
-				/<\/?code>/g,
-				''
-			)}</span><a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${depth}>`;
+
+			return `<h${depth} id="${slug}"><span>${text}</span><a href="#${slug}" class="permalink" aria-label="permalink"></a></h${depth}>`;
 		},
 		code({ text }) {
 			return snippets.get(text);
diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
index 525c2089e1..6bc84f8dc7 100644
--- a/packages/site-kit/src/lib/markdown/utils.ts
+++ b/packages/site-kit/src/lib/markdown/utils.ts
@@ -32,12 +32,11 @@ export function clean(markdown: string) {
 
 export const slugify = (str: string) => {
 	return clean(str)
-		.replace(/&.+;/g, '')
-		.replace(/[^a-zA-Z0-9-$(.):]/g, '-')
+		.replace(/&.+?;/g, '')
+		.replace(/[^a-zA-Z0-9-$(.):']/g, '-')
 		.replace(/-{2,}/g, '-')
 		.replace(/^-/, '')
-		.replace(/-$/, '')
-		.replace(/(<([^>]+)>)/gi, '');
+		.replace(/-$/, '');
 };
 
 export function smart_quotes(str: string, html: boolean = false) {

From e3f294209a3a00ef70ee8ba722db245529cb843f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 12 Oct 2024 10:05:22 -0400
Subject: [PATCH 2/2] fix

---
 .../svelte/02-template-syntax/01-component-fundamentals.md | 6 +++---
 .../svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 3 ++-
 packages/site-kit/src/lib/markdown/renderer.ts             | 5 +++--
 packages/site-kit/src/lib/markdown/utils.ts                | 2 ++
 packages/site-kit/src/lib/server/content/index.ts          | 7 ++++++-
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/02-template-syntax/01-component-fundamentals.md b/apps/svelte.dev/content/docs/svelte/02-template-syntax/01-component-fundamentals.md
index 5db2045436..0e5597c020 100644
--- a/apps/svelte.dev/content/docs/svelte/02-template-syntax/01-component-fundamentals.md
+++ b/apps/svelte.dev/content/docs/svelte/02-template-syntax/01-component-fundamentals.md
@@ -21,7 +21,7 @@ All three sections — script, styles and markup — are optional.
 </style>
 ```
 
-## &lt;script&gt;
+## `<script>`
 
 A `<script>` block contains JavaScript (or TypeScript, when adding the `lang="ts"` attribute) that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup.
 
@@ -161,7 +161,7 @@ If you'd like to react to changes to a prop, use the `$derived` or `$effect` run
 
 For more information on reactivity, read the documentation around runes.
 
-## &lt;script module&gt;
+## `<script module>`
 
 A `<script>` tag with a `module` attribute runs once when the module first evaluates, rather than for each component instance. Values declared in this block are accessible from a regular `<script>` (and the component markup) but not vice versa.
 
@@ -186,7 +186,7 @@ You cannot `export default`, since the default export is the component itself.
 </script>
 ```
 
-## &lt;style&gt;
+## `<style>`
 
 CSS inside a `<style>` block will be scoped to that component.
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index a9f81ed7a5..ac9056ddc2 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -50,7 +50,8 @@
 
 			{#each document.sections as section}
 				<li>
-					<a href="#{section.slug}" class:active={current === section.slug}>{section.title}</a>
+					<a href="#{section.slug}" class:active={current === section.slug}>{@html section.title}</a
+					>
 				</li>
 			{/each}
 		</ul>
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 06345eed1d..ba41b6fc96 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -275,13 +275,14 @@ export async function render_content_markdown(
 			return smart_quotes(token.text, true);
 		},
 		heading({ tokens, depth }) {
-			const text = this.parser!.parseInline(tokens).replace(/<\/?code>/g, '');
+			const text = this.parser!.parseInline(tokens);
+			const html = text.replace(/<\/?code>/g, '');
 
 			headings[depth - 1] = slugify(text);
 			headings.length = depth;
 			const slug = headings.filter(Boolean).join('-');
 
-			return `<h${depth} id="${slug}"><span>${text}</span><a href="#${slug}" class="permalink" aria-label="permalink"></a></h${depth}>`;
+			return `<h${depth} id="${slug}"><span>${html}</span><a href="#${slug}" class="permalink" aria-label="permalink"></a></h${depth}>`;
 		},
 		code({ text }) {
 			return snippets.get(text);
diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
index 6bc84f8dc7..9732284ead 100644
--- a/packages/site-kit/src/lib/markdown/utils.ts
+++ b/packages/site-kit/src/lib/markdown/utils.ts
@@ -33,6 +33,8 @@ export function clean(markdown: string) {
 export const slugify = (str: string) => {
 	return clean(str)
 		.replace(/&.+?;/g, '')
+		.replace(/<\/?.+?>/g, '')
+		.replace(/\.\.\./g, '')
 		.replace(/[^a-zA-Z0-9-$(.):']/g, '-')
 		.replace(/-{2,}/g, '-')
 		.replace(/^-/, '')
diff --git a/packages/site-kit/src/lib/server/content/index.ts b/packages/site-kit/src/lib/server/content/index.ts
index e748fb477a..5b33072d33 100644
--- a/packages/site-kit/src/lib/server/content/index.ts
+++ b/packages/site-kit/src/lib/server/content/index.ts
@@ -32,7 +32,12 @@ export async function create_index(
 			);
 
 		const sections = Array.from(body.matchAll(/^##\s+(.*)$/gm)).map((match) => {
-			const title = match[1].replace(/`/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+			const title = 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);
 
 			return { slug, title };