feat: "On this page" navigation sub-sections

apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte

@@ -9,7 +9,7 @@
 
 	afterNavigate(() => {
 		current = location.hash.slice(1);
-		headings = content.querySelectorAll('h2');
+		headings = content.querySelectorAll('h2, h3');
 		update(); // Ensure active link is set correctly on navigation
 	});
 
@@ -58,8 +58,24 @@
 
 			{#each document.sections as section}
 				<li>
-					<a href="#{section.slug}" class:active={current === section.slug}>{@html section.title}</a
-					>
+					<a href="#{section.slug}" class:active={current === section.slug}>
+						{@html section.title}
+					</a>
+
+					{#if section.subsections.length > 0}
+						<ul
+							data-active={current === section.slug ||
+								section.subsections.some((subsection) => subsection.slug === current)}
+						>
+							{#each section.subsections as subsection}
+								<li>
+									<a href="#{subsection.slug}" class:active={current === subsection.slug}>
+										{@html subsection.title}
+									</a>
+								</li>
+							{/each}
+						</ul>
+					{/if}
 				</li>
 			{/each}
 		</ul>
@@ -76,6 +92,10 @@
 				font: var(--sk-font-body-small);
 			}
 
+			li ul {
+				margin: 0 0 0 1.6rem;
+			}
+
 			/* Only show the title link if it's in the sidebar */
 			li:first-child {
 				display: none;
@@ -228,6 +248,14 @@
 					display: list-item;
 				}
 
+				li ul {
+					display: none;
+				}
+
+				li ul[data-active='true'] {
+					display: block;
+				}
+
 				a.active {
 					color: var(--sk-fg-1);
 					text-decoration: underline;

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

@@ -1,5 +1,5 @@
 import { extract_frontmatter, is_in_code_block, slugify, smart_quotes } from '../../markdown/utils';
-import type { Document } from '../../types';
+import type { Document, Section } from '../../types';
 
 export async function create_index(
 	documents: Record<string, string>,
@@ -32,24 +32,27 @@ export async function create_index(
 				'<code>$1</code>'
 			);
 
-		const sections = Array.from(body.matchAll(/^##\s+(.*)$/gm)).reduce(
-			(arr, match) => {
-				if (is_in_code_block(body, match.index || 0)) return arr;
-				const title = smart_quotes(match[1])
-					// replace < and > inside code spans
-					.replace(/`(.+?)`/g, (_, 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);
-
-				arr.push({ slug, title });
-				return arr;
-			},
-			[] as Array<{ slug: string; title: string }>
-		);
+		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 = smart_quotes(match[1])
+				// replace < and > inside code spans
+				.replace(/`(.+?)`/g, (_, 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);
+
+			if (match[0].startsWith('###')) {
+				const section = arr.at(-1);
+				if (section) {
+					section.subsections.push({ slug: `${section.slug}-${slug}`, title });
+				}
+			} else {
+				arr.push({ slug, title, subsections: [] });
+			}
+
+			return arr;
+		}, [] as Array<Section>);
 
 		content[slug] = {
 			slug,

packages/site-kit/src/lib/types.d.ts

@@ -44,6 +44,7 @@ export interface DocumentSummary {
 export interface Section {
 	slug: string;
 	title: string;
+	subsections: Omit<Section, 'subsections'>[];
 }
 
 export interface BannerData {