@janga/norna 0.7.16 → 0.7.18

package/src/components/TreeNavigationScript.astro

@@ -0,0 +1,83 @@
+<script>
+	type NavigationState = {
+		openPaths: string[];
+		sectionPaths: string[];
+		scrollTop: number;
+	};
+
+	const setupNavigationState = (container: HTMLElement, scope: 'desktop' | 'mobile') => {
+		const root = container.dataset.navigationRoot ?? '/';
+		const stateKey = `norna:tree-navigation:${scope}:${root}`;
+		const branches = Array.from(container.querySelectorAll<HTMLDetailsElement>(
+			'.navigation-page-disclosure[data-page-path]',
+		));
+		let storedState: NavigationState = { openPaths: [], sectionPaths: [], scrollTop: 0 };
+
+		try {
+			const parsedState = JSON.parse(sessionStorage.getItem(stateKey) ?? '{}');
+			storedState = {
+				openPaths: Array.isArray(parsedState.openPaths) ? parsedState.openPaths : [],
+				sectionPaths: Array.isArray(parsedState.sectionPaths) ? parsedState.sectionPaths : [],
+				scrollTop: Number.isFinite(Number(parsedState.scrollTop)) ? Number(parsedState.scrollTop) : 0,
+			};
+
+			branches.forEach((branch) => {
+				const pagePath = branch.dataset.pagePath ?? '';
+				branch.open = branch.dataset.currentBranch === 'true'
+					|| storedState.openPaths.includes(pagePath);
+
+				if (storedState.sectionPaths.includes(pagePath)) {
+					branch.dataset.sectionsOpen = 'true';
+				}
+			});
+
+			if (storedState.scrollTop > 0) {
+				requestAnimationFrame(() => {
+					container.scrollTop = storedState.scrollTop;
+				});
+			}
+		} catch {
+			// Navigation remains fully usable when browser storage is unavailable.
+		}
+
+		const saveState = () => {
+			try {
+				const openBranches = branches.filter((branch) => branch.open);
+				const state: NavigationState = {
+					openPaths: openBranches.map((branch) => branch.dataset.pagePath ?? ''),
+					sectionPaths: openBranches
+						.filter((branch) => (
+							branch.dataset.sectionsOpen === 'true'
+							|| branch.dataset.currentPage === 'true'
+						))
+						.map((branch) => branch.dataset.pagePath ?? ''),
+					scrollTop: container.scrollTop,
+				};
+				sessionStorage.setItem(stateKey, JSON.stringify(state));
+			} catch {
+				// Navigation state persistence is an optional enhancement.
+			}
+		};
+
+		requestAnimationFrame(() => {
+			branches.forEach((branch) => branch.addEventListener('toggle', () => {
+				if (branch.open && branch.dataset.hasSections === 'true') {
+					branch.dataset.sectionsOpen = 'true';
+				} else if (!branch.open) {
+					delete branch.dataset.sectionsOpen;
+				}
+				saveState();
+			}));
+		});
+
+		container.addEventListener('scroll', saveState, { passive: true });
+		container.querySelectorAll('a').forEach((link) => link.addEventListener('click', saveState));
+		window.addEventListener('pagehide', saveState);
+	};
+
+	const desktopNavigation = document.querySelector<HTMLElement>('.tree-local-navigation');
+	const mobileNavigation = document.querySelector<HTMLElement>('.mobile-site-nav[data-navigation-root]');
+
+	if (desktopNavigation) setupNavigationState(desktopNavigation, 'desktop');
+	if (mobileNavigation) setupNavigationState(mobileNavigation, 'mobile');
+</script>

package/src/content.config.ts

@@ -8,7 +8,7 @@ import {
 	siteThemePath,
 	sitewideContentPath,
 } from '../scripts/lib/site-paths.mjs';
-import { parseRouteDirectory } from '../scripts/lib/route-model.mjs';
+import { encodePageDirectoryPath, parsePageDirectoryPath } from '../scripts/lib/page-model.mjs';
 import {
 	siteSchema,
 	sitewideSchema,
@@ -23,17 +23,15 @@ const siteThemeSchema = themeVisualSchema;
 
 const site = defineCollection({
 	loader: glob({
-		pattern: ['content.md', 'routes/*/content.md'],
+		pattern: 'pages/**/content.md',
 		base: pathToFileURL(siteDir),
 		generateId: ({ entry }) => {
-			if (entry === 'content.md') {
-				return siteEntryId;
-			}
-
-			const routeDirectory = entry.match(/^routes\/([^/]+)\/content\.md$/)?.[1];
-			return routeDirectory
-				? `${siteEntryId.replace(/-content$/, '')}-route-${parseRouteDirectory(routeDirectory, `route directory routes/${routeDirectory}`).routeDirectory}`
-				: entry.replace(/[^a-zA-Z0-9-]+/g, '-').replace(/^-+|-+$/g, '');
+			const pageEntryDirectory = entry.split('/').slice(1, -1).join('/');
+			const pageDirectory = pageEntryDirectory
+				.split('/')
+				.filter((segment) => segment !== 'pages')
+				.join('/pages/');
+			return `${siteEntryId.replace(/-content$/, '')}-page-${encodePageDirectoryPath(parsePageDirectoryPath(pageDirectory, `page directory pages/${pageEntryDirectory}`).pageDirectory)}`;
 		},
 	}),
 	schema: siteSchema,

package/src/layouts/BaseLayout.astro

@@ -20,6 +20,7 @@ type Presentation = {
 type VisualTheme = {
 	layout: {
 		gutter: { desktop: string; mobile: string };
+		localNavigationGap: string;
 		pageWidth: string;
 		spacing: {
 			firstSectionTop: { desktop: string; mobile: string };
@@ -36,10 +37,15 @@ type VisualTheme = {
 		maxAvailableHeightPercent: { desktop: number; mobile: number };
 	};
 	typography: { fontFamily: string };
+	shape: {
+		radiusSmall: string;
+		radiusMedium: string;
+		radiusLarge: string;
+	};
 };
 
 interface Props {
-	title?: string;
+	title: string;
 	description?: string;
 	presentation: Presentation;
 	visualTheme: VisualTheme;
@@ -47,22 +53,13 @@ interface Props {
 	pathname?: string;
 	footer?: {
 		copyrightMessage?: string;
-		buildInfo?: {
-			enabled: boolean;
-			text: string;
-			dateTimeFormat: {
-				locale: string;
-				timeZone: string;
-				dateStyle: string;
-				timeStyle: string;
-			};
-		};
+		buildInfo?: boolean;
 	};
 }
 
 const {
-	title = 'norna',
-	description = 'A norna site.',
+	title,
+	description,
 	presentation,
 	visualTheme,
 	frameColors,
@@ -81,7 +78,11 @@ const documentStyle = [
 	`scroll-behavior: ${scrollBehavior}`,
 	...Object.entries(getPresentationCssVariables(presentation)).map(([name, value]) => `${name}: ${value}`),
 	`--font-sans: ${visualTheme.typography.fontFamily}`,
+	`--shape-radius-small: ${visualTheme.shape.radiusSmall}`,
+	`--shape-radius-medium: ${visualTheme.shape.radiusMedium}`,
+	`--shape-radius-large: ${visualTheme.shape.radiusLarge}`,
 	`--page-width: ${visualTheme.layout.pageWidth}`,
+	`--local-navigation-gap: ${visualTheme.layout.localNavigationGap}`,
 	`--content-gutter-desktop: ${visualTheme.layout.gutter.desktop}`,
 	`--content-gutter-mobile: ${visualTheme.layout.gutter.mobile}`,
 	`--space-nav-to-first-section-desktop: ${layoutSpacing.firstSectionTop.desktop}`,
@@ -103,12 +104,12 @@ const documentStyle = [
 	`--image-max-height-mobile: ${formatViewportHeightPercent(visualTheme.images.maxAvailableHeightPercent.mobile)}`,
 ].join('; ');
 const { buildInfo, copyrightMessage } = footer ?? {};
-const showBuildInfo = Boolean(buildInfo?.enabled);
+const showBuildInfo = buildInfo === true;
 const buildTime = showBuildInfo
-	? new Intl.DateTimeFormat(buildInfo.dateTimeFormat.locale, {
-		dateStyle: buildInfo.dateTimeFormat.dateStyle,
-		timeStyle: buildInfo.dateTimeFormat.timeStyle,
-		timeZone: buildInfo.dateTimeFormat.timeZone,
+	? new Intl.DateTimeFormat(projectConfig.locale.lang, {
+		dateStyle: 'short',
+		timeStyle: 'short',
+		timeZone: 'UTC',
 	}).format(new Date())
 	: null;
 const showFooter = Boolean(copyrightMessage || showBuildInfo);
@@ -124,7 +125,7 @@ const footerStyle = [
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="format-detection" content="telephone=no" />
-		<meta name="description" content={description} />
+		{description && <meta name="description" content={description} />}
 		<meta name="theme-color" content={presentation.palette.page.backgroundColor} />
 		<link rel="canonical" href={canonicalUrl} />
 		<meta name="generator" content={Astro.generator} />
@@ -144,7 +145,7 @@ const footerStyle = [
 			<footer class="site-footer" style={footerStyle}>
 				<p>
 					{copyrightMessage}
-					{showBuildInfo && <span>{buildInfo.text} {buildTime}</span>}
+					{showBuildInfo && <span>{projectConfig.locale.labels.built} {buildTime}</span>}
 				</p>
 			</footer>
 		)}

package/src/lib/pageThemes.ts

@@ -0,0 +1,44 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import {
+	validatePageThemeYamlStructure,
+} from '../../scripts/lib/site-content.mjs';
+import { pageThemeSchema } from '../../scripts/lib/schema-definitions.mjs';
+import { sitePagesDir, sitePagesLabel } from '../../scripts/lib/site-paths.mjs';
+import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
+import { parseYamlConfig } from '../../scripts/lib/yaml-config.mjs';
+import { getPageDirectoryAncestors } from '../../scripts/lib/page-model.mjs';
+
+type PageTheme = {
+	id: string;
+	data: Record<string, unknown>;
+};
+
+export const getPageTheme = async (pageDirectory: string | null): Promise<PageTheme | null> => {
+	if (!pageDirectory) return null;
+
+	const pageAncestors = getPageDirectoryAncestors(pageDirectory);
+	let inheritedData: Record<string, unknown> = {};
+	const inheritedIds: string[] = [];
+	for (const pageAncestor of pageAncestors) {
+		const themeSegments = pageAncestor.split('/');
+		const themePath = path.join(sitePagesDir, ...themeSegments, 'theme.yaml');
+		const source = await readFile(themePath, 'utf8').catch((error) => {
+			if (error?.code === 'ENOENT') return null;
+			throw error;
+		});
+		if (!source) continue;
+		const themeLabel = `${sitePagesLabel}/${themeSegments.join('/')}/theme.yaml`;
+
+		const data = parseYamlConfig(source, themeLabel, {
+			schema: pageThemeSchema,
+			validateStructure: validatePageThemeYamlStructure,
+		});
+		inheritedData = mergePageThemeConfig(inheritedData, data);
+		inheritedIds.push(`pages/${themeSegments.join('/')}/theme`);
+	}
+
+	return inheritedIds.length > 0
+		? { id: inheritedIds.join(' + '), data: inheritedData }
+		: null;
+};

package/src/lib/sectionContent.ts

@@ -1,6 +1,10 @@
-import type { CollectionEntry } from 'astro:content';
 import { markdownToHtml } from 'satteri';
 import projectConfig from '../../scripts/lib/project-config.mjs';
+import {
+	formatHeadingIdentifierIssue,
+	getHeadingIdentifierIssues,
+} from '../../scripts/lib/heading-ids.mjs';
+import { getBodySections } from '../../scripts/lib/site-content.mjs';
 import {
 	extractInlineNoteDiagnostics,
 	extractNornaMarkdownBlocks,
@@ -10,8 +14,6 @@ import {
 import { applyBasePathToHtml } from './basePath';
 import type { SitePage } from './sitePages';
 
-type SiteSectionMetadataMap = CollectionEntry<'site'>['data']['sections'];
-type SiteSectionMetadata = SiteSectionMetadataMap[string];
 type ManagedImage = {
 	image: string;
 	src: string;
@@ -42,10 +44,11 @@ type SectionContentBlock =
 	| { type: 'image-carousel'; images: ManagedImage[] }
 	| { type: 'card-list'; layout: CardListLayout; flow: CardListFlow; size: CardListSize; width: CardListWidth; cards: CardListItem[] }
 	| { type: 'note'; html: string; number?: number; id?: string; referenceId?: string };
-export type ResolvedSection = SiteSectionMetadata & {
-	id: string;
+export type ResolvedSection = {
+	id: string | null;
 	title: string;
 	titleHtml: string;
+	headingLevel: 1 | 2;
 	contentBlocks: SectionContentBlock[];
 };
 
@@ -54,9 +57,13 @@ export type SectionNavigation = {
 	title: string;
 };
 
-const headingRegex = /<h2\b([^>]*)>([\s\S]*?)<\/h2>/gi;
+export type HeadingNavigation = SectionNavigation & {
+	depth: 2 | 3;
+	parentId: string | null;
+};
+
+const contentHeadingRegex = /<h([12])\b([^>]*)>([\s\S]*?)<\/h\1>/gi;
 const explicitHeadingIdRegex = /\s*\{#([a-z0-9-]+)\}\s*$/;
-const markdownH2Regex = /^##\s+.*$/gm;
 const imageProvenanceCommentRegex = /<!--\s*norna-image-provenance:[\s\S]*?-->/gi;
 
 const stripTags = (html: string) => html.replace(/<[^>]*>/g, '');
@@ -69,69 +76,43 @@ const decodeHtmlEntities = (value: string) =>
 		.replace(/&quot;/g, '"')
 		.replace(/&#39;/g, "'");
 
-const slugify = (value: string) =>
-	decodeHtmlEntities(stripTags(value))
-		.trim()
-		.toLowerCase()
-		.normalize('NFD')
-		.replace(/[\u0300-\u036f]/g, '')
-		.replace(/å/g, 'a')
-		.replace(/ä/g, 'a')
-		.replace(/ö/g, 'o')
-		.replace(/[^a-z0-9]+/g, '-')
-		.replace(/^-+|-+$/g, '');
-
-const getHeadingId = (attributes: string, headingHtml: string) => {
-	const headingText = decodeHtmlEntities(stripTags(headingHtml)).trim();
-	const explicitId = headingText.match(explicitHeadingIdRegex)?.[1];
-	if (explicitId) return explicitId;
-
-	const id = attributes.match(/\sid=(["'])(.*?)\1/i)?.[2];
-	return id ? decodeHtmlEntities(id) : slugify(headingHtml);
-};
-
-const getExplicitHeadingId = (headingHtml: string) =>
-	decodeHtmlEntities(stripTags(headingHtml)).trim().match(explicitHeadingIdRegex)?.[1];
-
 const getHeadingTitle = (headingHtml: string) =>
 	decodeHtmlEntities(stripTags(headingHtml)).replace(explicitHeadingIdRegex, '').trim();
 
 const getHeadingTitleHtml = (headingHtml: string) =>
 	prepareContentHtml(headingHtml.replace(explicitHeadingIdRegex, '').trim());
 
-export const getSectionNavigation = (html: string, sectionMetadata: SiteSectionMetadataMap): SectionNavigation[] => {
-	const matches = Array.from(html.matchAll(headingRegex));
-	const sectionIds = new Set<string>();
-	const sections = matches.map((match) => {
-		const attributes = match[1] ?? '';
-		const headingHtml = match[2] ?? '';
-		const explicitId = getExplicitHeadingId(headingHtml);
-		const id = getHeadingId(attributes, headingHtml);
-		const title = getHeadingTitle(headingHtml);
-
-		if (!explicitId) {
-			throw new Error(`Section heading "${title}" is missing an explicit id. Write it as: ## ${title} {#${id}}`);
-		}
-
-		if (sectionIds.has(id)) {
-			throw new Error(`Duplicate Markdown section heading id: ${id}`);
-		}
-
-		sectionIds.add(id);
-		return { id, title };
+export const getHeadingNavigation = async (
+	markdown: string,
+	sourceLabel = 'Markdown',
+): Promise<HeadingNavigation[]> => {
+	const bodyStructure = await getBodySections(markdown);
+	const issues = getHeadingIdentifierIssues(bodyStructure.headings);
+	if (issues.length > 0) throw new Error(formatHeadingIdentifierIssue(issues[0], sourceLabel));
+
+	let parentId: string | null = null;
+	return bodyStructure.headings.flatMap((heading) => {
+		if (heading.depth === 1 || !heading.id) return [];
+		if (heading.depth === 2) parentId = heading.id;
+
+		return [{
+			depth: heading.depth,
+			id: heading.id,
+			parentId: heading.depth === 3 ? parentId : null,
+			title: heading.title,
+		}];
 	});
-
-	for (const id of Object.keys(sectionMetadata)) {
-		if (!sectionIds.has(id)) {
-			throw new Error(
-				`Section metadata "${id}" does not match any Markdown section. Add "## Heading {#${id}}" or remove sections.${id}.`,
-			);
-		}
-	}
-
-	return sections;
 };
 
+export const getSectionNavigation = async (
+	markdown: string,
+	sourceLabel = 'Markdown',
+): Promise<SectionNavigation[]> => (
+	(await getHeadingNavigation(markdown, sourceLabel))
+		.filter((heading) => heading.depth === 2)
+		.map(({ id, title }) => ({ id, title }))
+);
+
 const stripImageProvenanceComments = (html: string) => html.replace(imageProvenanceCommentRegex, '');
 
 const prepareContentHtml = (html: string) =>
@@ -231,30 +212,41 @@ const applyInlineNoteMarkup = (html: string, notes: InlineNote[]) => {
 	});
 };
 
-const getRawMarkdownSections = (markdown: string) => {
-	const matches = Array.from(markdown.matchAll(markdownH2Regex));
+const getRawMarkdownSections = (bodySections: Awaited<ReturnType<typeof getBodySections>>['sections']) => {
 	const sections = new Map<string, string>();
 
-	for (let index = 0; index < matches.length; index += 1) {
-		const match = matches[index];
-		const heading = match[0] ?? '';
-		const id = heading.match(explicitHeadingIdRegex)?.[1];
+	for (const section of bodySections) {
+		const id = section.isPageTitle ? '__page-title' : section.id;
 		if (!id) continue;
-
-		const start = match.index ?? 0;
-		const next = matches[index + 1];
-		const end = next?.index ?? markdown.length;
-		sections.set(id, markdown.slice(start, end));
+		sections.set(id, section.text);
 	}
 
 	return sections;
 };
 
-const getImageSourceKey = (page: SitePage, sectionId: string, image: string) => (
-	page.routeDirectory
-		? `routes/${page.routeDirectory}/images/${sectionId}/${image}`
-		: `images/${sectionId}/${image}`
-);
+const applyH3HeadingIds = (
+	html: string,
+	headings: Awaited<ReturnType<typeof getBodySections>>['headings'],
+) => {
+	let headingIndex = 0;
+	const result = html.replace(/<h3\b([^>]*)>([\s\S]*?)<\/h3>/gi, (_match, attributes, headingHtml) => {
+		const heading = headings[headingIndex];
+		headingIndex += 1;
+		if (!heading?.id) throw new Error('Rendered Markdown H3 could not be matched to its heading id.');
+
+		const cleanAttributes = String(attributes).replace(/\s+id=(["']).*?\1/gi, '');
+		const cleanHeadingHtml = String(headingHtml).replace(explicitHeadingIdRegex, '').trim();
+		return `<h3${cleanAttributes} id="${heading.id}">${cleanHeadingHtml}</h3>`;
+	});
+
+	if (headingIndex !== headings.length) {
+		throw new Error('Markdown H3 headings could not be matched to the rendered page content.');
+	}
+
+	return result;
+};
+
+const getImageSourceKey = (page: SitePage, image: string) => `pages/${page.pageDirectory}/images/${image}`;
 
 const renderInlineNoteMarkdown = async (markdown: string) => {
 	const result = await markdownToHtml(markdown, {
@@ -275,7 +267,6 @@ const resolveContentBlocks = async (
 	html: string,
 	rawMarkdown: string,
 	page: SitePage,
-	sectionId: string,
 	inlineNotes: InlineNote[] = [],
 ) => {
 	const rawBlocks = extractNornaMarkdownBlocks(rawMarkdown);
@@ -323,7 +314,7 @@ const resolveContentBlocks = async (
 				width: block.width,
 				cards: block.cards.map((card: CardListItem) => ({
 					...card,
-					...(card.image ? { src: getImageSourceKey(page, sectionId, card.image) } : {}),
+					...(card.image ? { src: getImageSourceKey(page, card.image) } : {}),
 				})),
 			});
 			continue;
@@ -333,7 +324,7 @@ const resolveContentBlocks = async (
 			type: block.type,
 			images: block.images.map((image: { image: string; alt?: string; caption?: string }) => ({
 				...image,
-				src: getImageSourceKey(page, sectionId, image.image),
+				src: getImageSourceKey(page, image.image),
 			})),
 		});
 	}
@@ -344,38 +335,54 @@ const resolveContentBlocks = async (
 export const getSectionsContent = async (
 	html: string,
 	rawMarkdown: string,
-	sectionMetadata: SiteSectionMetadataMap,
 	page: SitePage,
+	sourceLabel = 'Markdown',
 ) => {
-	const matches = Array.from(html.matchAll(headingRegex));
-	const rawSections = getRawMarkdownSections(rawMarkdown);
-	const metadataIds = new Set(Object.keys(sectionMetadata));
+	const matches = Array.from(html.matchAll(contentHeadingRegex));
+	const bodyStructure = await getBodySections(rawMarkdown);
+	const headingIdentifierIssues = getHeadingIdentifierIssues(bodyStructure.headings);
+	if (headingIdentifierIssues.length > 0) {
+		throw new Error(formatHeadingIdentifierIssue(headingIdentifierIssues[0], sourceLabel));
+	}
+	const rawSections = getRawMarkdownSections(bodyStructure.sections);
 	const sections: ResolvedSection[] = [];
 	const sectionIds = new Set<string>();
 	let nextNoteNumber = 1;
+	const pageHeadingCount = matches.filter((match) => match[1] === '1').length;
+
+	if (pageHeadingCount !== 1 || matches[0]?.[1] !== '1') {
+		throw new Error('Each Norna page must start with exactly one Markdown H1 page title, for example "# About".');
+	}
 
 	for (let index = 0; index < matches.length; index += 1) {
 		const match = matches[index];
-		const attributes = match[1] ?? '';
-		const headingHtml = match[2] ?? '';
-		const explicitId = getExplicitHeadingId(headingHtml);
-		const id = getHeadingId(attributes, headingHtml);
+		const bodySection = bodyStructure.sections[index];
+		const headingLevel = Number.parseInt(match[1] ?? '', 10) as 1 | 2;
+		const headingHtml = match[3] ?? '';
+		if (!bodySection || bodySection.level !== headingLevel) {
+			throw new Error('Markdown H1/H2 headings could not be matched to the rendered page content.');
+		}
+		const id = bodySection.id;
 		const contentStart = (match.index ?? 0) + match[0].length;
 		const nextMatch = matches[index + 1];
 		const contentEnd = nextMatch?.index ?? html.length;
-		const content = html.slice(contentStart, contentEnd).trim();
+		const nextBodySection = bodyStructure.sections[index + 1];
+		const h3Headings = bodyStructure.headings.filter((heading) => (
+			heading.depth === 3
+			&& heading.index > bodySection.index
+			&& heading.index < (nextBodySection?.index ?? Number.POSITIVE_INFINITY)
+		));
+		const content = applyH3HeadingIds(html.slice(contentStart, contentEnd).trim(), h3Headings);
 		const title = getHeadingTitle(headingHtml);
 
-		if (!explicitId) {
-			throw new Error(`Section heading "${title}" is missing an explicit id. Write it as: ## ${title} {#${id}}`);
-		}
+		if (headingLevel === 2 && !id) throw new Error(`Section heading "${title}" cannot produce an automatic ASCII id.`);
 
-		if (sectionIds.has(id)) {
+		if (id && sectionIds.has(id)) {
 			throw new Error(`Duplicate Markdown section heading id: ${id}`);
 		}
 
-		sectionIds.add(id);
-		const rawSection = rawSections.get(id) ?? '';
+		if (id) sectionIds.add(id);
+		const rawSection = rawSections.get(id ?? '__page-title') ?? '';
 		const inlineNoteDiagnostics = extractInlineNoteDiagnostics(rawSection, {
 			label: 'Markdown section',
 		});
@@ -386,8 +393,8 @@ export const getSectionsContent = async (
 		const inlineNotes = inlineNoteDiagnostics.notes.map((note) => {
 			const number = nextNoteNumber;
 			nextNoteNumber += 1;
-			const pageKey = page.routeId || 'home';
-			const noteKey = `${pageKey}-${id}-${number}`;
+			const pageKey = page.pageId || 'home';
+			const noteKey = `${pageKey}-${id ?? 'page-title'}-${number}`;
 			return {
 				...note,
 				number,
@@ -397,21 +404,13 @@ export const getSectionsContent = async (
 		});
 
 		sections.push({
-			...(sectionMetadata[id] ?? {}),
 			id,
 			title,
 			titleHtml: getHeadingTitleHtml(headingHtml),
-			contentBlocks: await resolveContentBlocks(content, rawSection, page, id, inlineNotes),
+			headingLevel,
+			contentBlocks: await resolveContentBlocks(content, rawSection, page, inlineNotes),
 		});
 	}
 
-	for (const id of metadataIds) {
-		if (!sectionIds.has(id)) {
-			throw new Error(
-				`Section metadata "${id}" does not match any Markdown section. Add "## Heading {#${id}}" or remove sections.${id}.`,
-			);
-		}
-	}
-
 	return sections;
 };

package/src/lib/siteNavigation.ts

@@ -0,0 +1,49 @@
+import type { HeadingNavigation, SectionNavigation } from './sectionContent';
+import type { SitePage } from './sitePages';
+
+export type PageNavigationEntry = {
+	page: SitePage;
+	headings: HeadingNavigation[];
+	sections: SectionNavigation[];
+};
+
+export type PageNavigationNode = PageNavigationEntry & {
+	children: PageNavigationNode[];
+};
+
+export const getPageNavigationTree = (entries: PageNavigationEntry[]) => {
+	const nodes = new Map<string, PageNavigationNode>();
+	const roots: PageNavigationNode[] = [];
+
+	for (const entry of entries) {
+		nodes.set(entry.page.pagePath, { ...entry, children: [] });
+	}
+
+	for (const entry of entries) {
+		const node = nodes.get(entry.page.pagePath);
+		if (!node) continue;
+
+		if (entry.page.isHome || entry.page.parentPagePath === null) {
+			roots.push(node);
+			continue;
+		}
+
+		const parent = nodes.get(entry.page.parentPagePath);
+		if (!parent) {
+			throw new Error(`Page "${entry.page.pathname}" has no parent page "${entry.page.parentPagePath}".`);
+		}
+
+		parent.children.push(node);
+	}
+
+	return roots;
+};
+
+export const getListedPageNavigationTree = (entries: PageNavigationEntry[]) => {
+	const filterListed = (nodes: PageNavigationNode[]): PageNavigationNode[] => nodes.flatMap((node) => {
+		if (!node.page.isHome && !node.page.navigation.listed) return [];
+		return [{ ...node, children: filterListed(node.children) }];
+	});
+
+	return filterListed(getPageNavigationTree(entries));
+};