fix slugs (#362)

* fix slugs - closes #345

* fix

Author: Rich-Harris

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.
 

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>

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

@@ -274,16 +274,15 @@ export async function render_content_markdown(
 
 			return smart_quotes(token.text, true);
 		},
-		heading({ tokens, depth, raw }) {
+		heading({ tokens, depth }) {
 			const text = this.parser!.parseInline(tokens);
+			const html = text.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>${html}</span><a href="#${slug}" class="permalink" aria-label="permalink"></a></h${depth}>`;
 		},
 		code({ text }) {
 			return snippets.get(text);

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

@@ -32,12 +32,13 @@ export function clean(markdown: string) {
 
 export const slugify = (str: string) => {
 	return clean(str)
-		.replace(/&.+;/g, '')
-		.replace(/[^a-zA-Z0-9-$(.):]/g, '-')
+		.replace(/&.+?;/g, '')
+		.replace(/<\/?.+?>/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) {

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 };