feat: on this page subsections

Author: tmarnet

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
 	});
 
@@ -57,9 +57,22 @@
 			</li>
 
 			{#each document.sections as section}
-				<li>
+				<li
+					data-has-subsections={section.subsections.length > 0}
+					data-subsections-active={current === section.slug ||
+						section.subsections.some((child) => `${section.slug}-${child.slug}` === current)}
+				>
 					<a href="#{section.slug}" class:active={current === section.slug}>{@html section.title}</a
 					>
+
+					<ul>
+						{#each section.subsections as child}
+							{@const slug = `${section.slug}-${child.slug}`}
+							<li>
+								<a href="#{slug}" class:active={current === slug}>{@html child.title}</a>
+							</li>
+						{/each}
+					</ul>
 				</li>
 			{/each}
 		</ul>
@@ -76,6 +89,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;
@@ -183,6 +200,10 @@
 			nav {
 				display: none;
 				padding: 0 0 0 3rem;
+
+				li[data-has-subsections='true'] ul {
+					display: block;
+				}
 			}
 		}
 
@@ -228,6 +249,14 @@
 					display: list-item;
 				}
 
+				li[data-has-subsections='true'] ul {
+					display: none;
+				}
+
+				li[data-has-subsections='true'][data-subsections-active='true'] ul {
+					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,25 @@ 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, 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 {