@janga/norna 0.7.22 → 0.7.24

package/src/components/TreeNavigationScript.astro

@@ -1,7 +1,12 @@
 <script>
 	type NavigationState = {
 		openPaths: string[];
-		sectionPaths: string[];
+		sectionOpenByPath: Record<string, boolean>;
+		scrollTop: number;
+	};
+	type NavigationSnapshot = {
+		branchOpen: boolean[];
+		sectionOpen: boolean[];
 		scrollTop: number;
 	};
 
@@ -11,13 +16,34 @@
 		const branches = Array.from(container.querySelectorAll<HTMLDetailsElement>(
 			'.navigation-page-disclosure[data-page-path]',
 		));
-		let storedState: NavigationState = { openPaths: [], sectionPaths: [], scrollTop: 0 };
+		const sectionBranches = Array.from(container.querySelectorAll<HTMLDetailsElement>(
+			'.navigation-page-sections-disclosure[data-page-path]',
+		));
+		const navigationNodes = Array.from(container.querySelectorAll<HTMLElement>(
+			'.navigation-page-node[data-navigation-title]',
+		));
+		const getScrollContainer = () => {
+			let candidate: HTMLElement | null = container;
+
+			while (candidate) {
+				if (/auto|scroll/.test(getComputedStyle(candidate).overflowY)) return candidate;
+				candidate = candidate.parentElement;
+			}
+
+			return container;
+		};
+		const scrollContainer = getScrollContainer();
+		let filterSnapshot: NavigationSnapshot | null = null;
 
 		try {
 			const parsedState = JSON.parse(sessionStorage.getItem(stateKey) ?? '{}');
-			storedState = {
+			const storedState: NavigationState = {
 				openPaths: Array.isArray(parsedState.openPaths) ? parsedState.openPaths : [],
-				sectionPaths: Array.isArray(parsedState.sectionPaths) ? parsedState.sectionPaths : [],
+				sectionOpenByPath: parsedState.sectionOpenByPath
+					&& typeof parsedState.sectionOpenByPath === 'object'
+					? Object.fromEntries(Object.entries(parsedState.sectionOpenByPath)
+						.filter((entry): entry is [string, boolean] => typeof entry[1] === 'boolean'))
+					: {},
 				scrollTop: Number.isFinite(Number(parsedState.scrollTop)) ? Number(parsedState.scrollTop) : 0,
 			};
 
@@ -25,15 +51,18 @@
 				const pagePath = branch.dataset.pagePath ?? '';
 				branch.open = branch.dataset.currentBranch === 'true'
 					|| storedState.openPaths.includes(pagePath);
-
-				if (storedState.sectionPaths.includes(pagePath)) {
-					branch.dataset.sectionsOpen = 'true';
-				}
+			});
+			sectionBranches.forEach((branch) => {
+				const pagePath = branch.dataset.pagePath ?? '';
+				const storedOpen = storedState.sectionOpenByPath[pagePath];
+				branch.open = typeof storedOpen === 'boolean'
+					? storedOpen
+					: branch.dataset.currentPage === 'true';
 			});
 
 			if (storedState.scrollTop > 0) {
 				requestAnimationFrame(() => {
-					container.scrollTop = storedState.scrollTop;
+					scrollContainer.scrollTop = storedState.scrollTop;
 				});
 			}
 		} catch {
@@ -41,37 +70,189 @@
 		}
 
 		const saveState = () => {
+			if (filterSnapshot) return;
+
 			try {
 				const openBranches = branches.filter((branch) => branch.open);
+				const sectionOpenByPath = Object.fromEntries(sectionBranches.map((branch) => [
+					branch.dataset.pagePath ?? '',
+					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,
+					sectionOpenByPath,
+					scrollTop: scrollContainer.scrollTop,
 				};
 				sessionStorage.setItem(stateKey, JSON.stringify(state));
 			} catch {
 				// Navigation state persistence is an optional enhancement.
 			}
 		};
+		const controls = container.querySelector<HTMLElement>('[data-tree-controls]');
+		const filterInput = controls?.querySelector<HTMLInputElement>('[data-tree-filter]') ?? null;
+		const expandButton = controls?.querySelector<HTMLButtonElement>('[data-tree-expand-all]') ?? null;
+		const collapseButton = controls?.querySelector<HTMLButtonElement>('[data-tree-collapse-all]') ?? null;
+		const locateButton = controls?.querySelector<HTMLButtonElement>('[data-tree-locate-current]') ?? null;
+		const emptyMessage = controls?.querySelector<HTMLElement>('[data-tree-filter-empty]') ?? null;
+		const status = controls?.querySelector<HTMLElement>('[data-tree-status]') ?? null;
+		const currentPageNode = container.querySelector<HTMLElement>(
+			'.navigation-page-node[data-navigation-current-page="true"]',
+		);
+		const labels = {
+			collapsed: controls?.dataset.treeLabelCollapsed ?? '',
+			expanded: controls?.dataset.treeLabelExpanded ?? '',
+			filterMatches: controls?.dataset.treeLabelFilterMatches ?? '{count}',
+			located: controls?.dataset.treeLabelLocated ?? '',
+		};
+		const normalizeTitle = (value: string) => value
+			.normalize('NFKD')
+			.replace(/\p{Mark}+/gu, '')
+			.toLocaleLowerCase(document.documentElement.lang || undefined)
+			.trim();
+		const setStatus = (message: string) => {
+			if (status) status.textContent = message;
+		};
+		const getSnapshot = (): NavigationSnapshot => ({
+			branchOpen: branches.map((branch) => branch.open),
+			sectionOpen: sectionBranches.map((branch) => branch.open),
+			scrollTop: scrollContainer.scrollTop,
+		});
+		const revealNodeAndAncestors = (node: HTMLElement) => {
+			let currentNode: HTMLElement | null = node;
+
+			while (currentNode && container.contains(currentNode)) {
+				currentNode.hidden = false;
+				const parentNode = currentNode.parentElement?.closest<HTMLElement>(
+					'.navigation-page-node[data-navigation-title]',
+				) ?? null;
+				const parentBranch = parentNode?.querySelector<HTMLDetailsElement>(
+					':scope > .navigation-page-disclosure[data-page-path]',
+				);
+				if (parentBranch) parentBranch.open = true;
+				currentNode = parentNode;
+			}
+		};
+		const restoreFilterSnapshot = () => {
+			if (!filterSnapshot) return;
 
-		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;
+			branches.forEach((branch, index) => { branch.open = filterSnapshot?.branchOpen[index] ?? false; });
+			sectionBranches.forEach((branch, index) => { branch.open = filterSnapshot?.sectionOpen[index] ?? false; });
+			scrollContainer.scrollTop = filterSnapshot.scrollTop;
+			filterSnapshot = null;
+			requestAnimationFrame(saveState);
+		};
+		const clearFilter = () => {
+			navigationNodes.forEach((node) => { node.hidden = false; });
+			delete container.dataset.treeFilterActive;
+			if (emptyMessage) emptyMessage.hidden = true;
+			if (expandButton) expandButton.disabled = false;
+			if (collapseButton) collapseButton.disabled = false;
+			restoreFilterSnapshot();
+			setStatus('');
+		};
+		const applyFilter = () => {
+			const query = normalizeTitle(filterInput?.value ?? '');
+
+			if (!query) {
+				clearFilter();
+				return;
+			}
+
+			if (!filterSnapshot) filterSnapshot = getSnapshot();
+			container.dataset.treeFilterActive = 'true';
+			if (expandButton) expandButton.disabled = true;
+			if (collapseButton) collapseButton.disabled = true;
+			navigationNodes.forEach((node) => { node.hidden = true; });
+
+			const matches = navigationNodes.filter((node) => normalizeTitle(
+				node.dataset.navigationTitle ?? '',
+			).includes(query));
+			matches.forEach((node) => {
+				revealNodeAndAncestors(node);
+
+				if (node.dataset.navigationKind === 'category') {
+					node.querySelectorAll<HTMLElement>('.navigation-page-node[data-navigation-title]')
+						.forEach((descendant) => { descendant.hidden = false; });
+					const categoryBranch = node.querySelector<HTMLDetailsElement>(
+						':scope > .navigation-category-disclosure',
+					);
+					if (categoryBranch) categoryBranch.open = true;
 				}
-				saveState();
-			}));
+			});
+
+			if (matches.length === 0 && currentPageNode) revealNodeAndAncestors(currentPageNode);
+			if (emptyMessage) emptyMessage.hidden = matches.length > 0;
+			setStatus(labels.filterMatches.replace('{count}', String(matches.length)));
+		};
+		const setAllOpen = (open: boolean) => {
+			branches.forEach((branch) => { branch.open = open; });
+			sectionBranches.forEach((branch) => { branch.open = open; });
+			saveState();
+			setStatus(open ? labels.expanded : labels.collapsed);
+		};
+		const locateCurrentPage = () => {
+			if (!currentPageNode) return;
+
+			if (filterInput?.value) {
+				filterInput.value = '';
+				clearFilter();
+			}
+			revealNodeAndAncestors(currentPageNode);
+			currentPageNode.querySelectorAll<HTMLDetailsElement>(
+				':scope > .navigation-page-disclosure, :scope > .navigation-page-sections-disclosure',
+			).forEach((branch) => { branch.open = true; });
+			saveState();
+
+			const currentPageLink = currentPageNode.querySelector<HTMLAnchorElement>(
+				':scope > .navigation-page-link, :scope > .navigation-page-open-link',
+			);
+			if (!currentPageLink) return;
+
+			currentPageLink.focus({ preventScroll: true });
+			const scrollBox = scrollContainer.getBoundingClientRect();
+			const linkBox = currentPageLink.getBoundingClientRect();
+			scrollContainer.scrollTop += linkBox.top - scrollBox.top
+				- Math.max(0, (scrollContainer.clientHeight - linkBox.height) / 2);
+			setStatus(labels.located);
+		};
+		const openLinkedPage = (link: HTMLAnchorElement) => {
+			if (filterInput?.value) {
+				filterInput.value = '';
+				clearFilter();
+			}
+			const pageNode = link.closest<HTMLElement>('.navigation-page-node');
+			const pageDisclosure = pageNode?.querySelector<HTMLDetailsElement>(
+				':scope > .navigation-page-disclosure:not(.navigation-category-disclosure)',
+			);
+			const sectionDisclosure = pageNode?.querySelector<HTMLDetailsElement>(
+				':scope > .navigation-page-sections-disclosure[data-page-path]',
+			);
+
+			if (pageDisclosure) pageDisclosure.open = true;
+			if (sectionDisclosure) sectionDisclosure.open = true;
+			saveState();
+		};
+
+		requestAnimationFrame(() => {
+			branches.forEach((branch) => branch.addEventListener('toggle', saveState));
+			sectionBranches.forEach((branch) => branch.addEventListener('toggle', saveState));
 		});
 
-		container.addEventListener('scroll', saveState, { passive: true });
-		container.querySelectorAll('a').forEach((link) => link.addEventListener('click', saveState));
+		if (controls) controls.hidden = false;
+		if (locateButton && !currentPageNode) locateButton.disabled = true;
+		filterInput?.addEventListener('input', applyFilter);
+		filterInput?.addEventListener('keydown', (event) => {
+			if (event.key !== 'Escape' || !filterInput.value) return;
+			event.preventDefault();
+			filterInput.value = '';
+			clearFilter();
+		});
+		expandButton?.addEventListener('click', () => setAllOpen(true));
+		collapseButton?.addEventListener('click', () => setAllOpen(false));
+		locateButton?.addEventListener('click', locateCurrentPage);
+		scrollContainer.addEventListener('scroll', saveState, { passive: true });
+		container.querySelectorAll<HTMLAnchorElement>('.navigation-page-link, .navigation-page-open-link')
+			.forEach((link) => link.addEventListener('click', () => openLinkedPage(link)));
 		window.addEventListener('pagehide', saveState);
 	};
 

package/src/content.config.ts

@@ -1,5 +1,6 @@
 import { defineCollection } from 'astro:content';
 import { glob } from 'astro/loaders';
+import { z } from 'astro/zod';
 import { basename } from 'node:path';
 import { pathToFileURL } from 'node:url';
 import {
@@ -19,7 +20,9 @@ const siteEntryId = `${siteDirLabel
 	.replace(/^[./\\]+/, '')
 	.replace(/[^a-zA-Z0-9-]+/g, '-')
 	.replace(/^-+|-+$/g, '') || 'site'}-content`;
-const siteThemeSchema = themeVisualSchema;
+const emptyYamlMapping = (value: unknown) => value ?? {};
+const siteThemeSchema = z.preprocess(emptyYamlMapping, themeVisualSchema);
+const sitewideContentSchema = z.preprocess(emptyYamlMapping, sitewideSchema);
 
 const site = defineCollection({
 	loader: glob({
@@ -52,7 +55,7 @@ const sitewide = defineCollection({
 		base: pathToFileURL(siteDir),
 		generateId: () => `${siteEntryId.replace(/-content$/, '')}-sitewide`,
 	}),
-	schema: sitewideSchema,
+	schema: sitewideContentSchema,
 });
 
 export const collections = { site, theme, sitewide };

package/src/layouts/BaseLayout.astro

@@ -1,7 +1,7 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { getPresentationCssVariables } from '../../scripts/lib/presentation.mjs';
-import { getIconLinks } from '../lib/sitePublicAssets';
+import { getIconLinks, getSocialImageAsset } from '../lib/sitePublicAssets';
 import { withBasePath } from '../lib/basePath';
 import { getReaderPreferencesScript } from '../lib/readerPreferencesScript.mjs';
 import '../styles/global.css';
@@ -19,7 +19,7 @@ type Presentation = {
 		page: FrameColors;
 		css: Record<string, string>;
 	}>;
-	colorMode: {
+	appearance: {
 		default: 'system' | 'light' | 'dark';
 	};
 	readerPreferences: {
@@ -52,9 +52,10 @@ type VisualTheme = {
 		};
 	};
 	images: {
+		presentation: 'prose-aligned' | 'centered-fit';
 		width: string;
 		maxAvailableWidthPercent: { desktop: number; mobile: number };
-		maxAvailableHeightPercent: { desktop: number; mobile: number };
+		maxAvailableHeightPercent?: { desktop: number; mobile: number };
 	};
 	typography: { fontFamily: string };
 	corners: {
@@ -75,7 +76,9 @@ interface Props {
 		copyrightMessage?: string;
 		buildInfo?: boolean;
 	};
-	treeNavigation?: boolean;
+	contentsNavigation?: boolean;
+	indexable?: boolean;
+	searchable?: boolean;
 }
 
 const {
@@ -86,12 +89,18 @@ const {
 	frameColors,
 	pathname = '/',
 	footer,
-	treeNavigation = false,
+	contentsNavigation = false,
+	indexable = true,
+	searchable = false,
 } = Astro.props;
 
 const documentTitle = title;
 const canonicalUrl = new URL(withBasePath(projectConfig.site.basePath, pathname), projectConfig.site.url).href;
 const iconLinks = getIconLinks();
+const socialImageAsset = getSocialImageAsset();
+const socialImageUrl = socialImageAsset
+	? new URL(withBasePath(projectConfig.site.basePath, socialImageAsset.href), projectConfig.site.url).href
+	: null;
 const scrollBehavior = projectConfig.navigation.scrollBehavior === 'smooth' ? 'smooth' : 'auto';
 const formatPercent = (value: number) => `${value}%`;
 const formatViewportHeightPercent = (value: number) => `${value}svh`;
@@ -124,9 +133,46 @@ const documentStyle = [
 	`--image-width: ${visualTheme.images.width}`,
 	`--image-max-available-width-desktop: ${formatPercent(visualTheme.images.maxAvailableWidthPercent.desktop)}`,
 	`--image-max-available-width-mobile: ${formatPercent(visualTheme.images.maxAvailableWidthPercent.mobile)}`,
-	`--image-max-height-desktop: ${formatViewportHeightPercent(visualTheme.images.maxAvailableHeightPercent.desktop)}`,
-	`--image-max-height-mobile: ${formatViewportHeightPercent(visualTheme.images.maxAvailableHeightPercent.mobile)}`,
+	...(visualTheme.images.maxAvailableHeightPercent
+		? [
+			`--image-max-height-desktop: ${formatViewportHeightPercent(visualTheme.images.maxAvailableHeightPercent.desktop)}`,
+			`--image-max-height-mobile: ${formatViewportHeightPercent(visualTheme.images.maxAvailableHeightPercent.mobile)}`,
+		]
+		: []),
 ].join('; ');
+const marginNoteReadingWidths = [
+	['narrow', 'min(60ch, 680px)'],
+	['standard', 'min(72ch, 680px)'],
+	['wide', `min(80ch, ${visualTheme.images.width})`],
+] as const;
+const vacantContentsTrackWidth = `11rem + ${visualTheme.layout.localNavigationGap}`;
+const marginNoteDeclarations = [
+	'float: right;',
+	'clear: right;',
+	'width: var(--layout-note-width);',
+	'margin: 0 calc(0px - var(--layout-note-width) - var(--layout-note-gap)) 0.75rem var(--layout-note-gap);',
+].join('\n');
+const marginNoteLayoutCss = [
+	'@media (min-width: 1101px) {',
+	...marginNoteReadingWidths.flatMap(([readingWidth, textWidth]) => [
+		[
+			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap})) {`,
+			`:root[data-reading-width="${readingWidth}"] .section-note {`,
+				marginNoteDeclarations,
+			'}',
+		'}',
+		].join('\n'),
+		[
+			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap} - ${vacantContentsTrackWidth})) {`,
+			`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree:not(.site-page-layout-contents) .section-note,`,
+			`:root[data-reading-width="${readingWidth}"][data-focus-reading="on"] .site-page-layout-tree .section-note {`,
+				marginNoteDeclarations,
+			'}',
+		'}',
+		].join('\n'),
+	]),
+	'}',
+].join('\n');
 const { buildInfo, copyrightMessage } = footer ?? {};
 const showBuildInfo = buildInfo === true;
 const buildTime = showBuildInfo
@@ -154,20 +200,34 @@ const readerPreferencesScript = readerPreferencesEnabled
 <!doctype html>
 <html
 	lang={projectConfig.locale.lang}
-	data-color-mode={presentation.readerPreferences.defaults.appearance}
+	data-appearance={presentation.readerPreferences.defaults.appearance}
+	data-image-presentation={visualTheme.images.presentation}
 	data-reading-width={presentation.readerPreferences.defaults.readingWidth}
 	data-focus-reading={presentation.readerPreferences.defaults.focusReading}
-	data-section-tracking={treeNavigation && projectConfig.navigation.sectionTracking ? 'enabled' : undefined}
+	data-section-tracking={contentsNavigation ? 'enabled' : undefined}
+	data-pagefind-ignore={searchable ? undefined : 'all'}
 	style={documentStyle}
 >
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="format-detection" content="telephone=no" />
+		{!indexable && <meta name="robots" content="noindex" />}
 		{description && <meta name="description" content={description} />}
+		{indexable && <meta property="og:type" content="website" />}
+		{indexable && <meta property="og:title" content={documentTitle} />}
+		{indexable && <meta property="og:url" content={canonicalUrl} />}
+		{indexable && description && <meta property="og:description" content={description} />}
+		{indexable && socialImageUrl && <meta property="og:image" content={socialImageUrl} />}
+		{indexable && socialImageAsset && <meta property="og:image:type" content={socialImageAsset.type} />}
+		{indexable && <meta name="twitter:card" content={socialImageUrl ? 'summary_large_image' : 'summary'} />}
+		{indexable && <meta name="twitter:title" content={documentTitle} />}
+		{indexable && description && <meta name="twitter:description" content={description} />}
+		{indexable && socialImageUrl && <meta name="twitter:image" content={socialImageUrl} />}
 		<meta name="theme-color" content={presentation.palette.page.backgroundColor} />
 		{readerPreferencesScript && <script is:inline set:html={readerPreferencesScript} />}
-		<link rel="canonical" href={canonicalUrl} />
+		<style is:inline set:html={marginNoteLayoutCss} />
+		{indexable && <link rel="canonical" href={canonicalUrl} />}
 		<meta name="generator" content={Astro.generator} />
 		{iconLinks.map((iconLink) => (
 			<link
@@ -177,6 +237,7 @@ const readerPreferencesScript = readerPreferencesEnabled
 				href={iconLink.href}
 			/>
 		))}
+		<slot name="head" />
 		<title>{documentTitle}</title>
 	</head>
 	<body>

package/src/lib/readerPreferencesScript.mjs

@@ -1,7 +1,7 @@
 const preferenceDefinitions = Object.freeze({
 	appearance: Object.freeze({
 		allowed: Object.freeze(['system', 'light', 'dark']),
-		cookieName: 'norna-color-mode',
+		cookieName: 'norna-appearance',
 	}),
 	readingWidth: Object.freeze({
 		allowed: Object.freeze(['narrow', 'standard', 'wide']),
@@ -72,7 +72,7 @@ export const getReaderPreferencesScript = ({ controls, defaults, cookiePath }) =
 	const apply = (name, value, persist = false) => {
 		const nextValue = isAllowed(name, value) ? value : defaults[name];
 		values[name] = nextValue;
-		if (name === 'appearance') root.dataset.colorMode = nextValue;
+		if (name === 'appearance') root.dataset.appearance = nextValue;
 		if (name === 'readingWidth') root.dataset.readingWidth = nextValue;
 		if (name === 'focusReading') root.dataset.focusReading = nextValue;
 		if (persist) writeCookie(definitions[name].cookieName, nextValue);

package/src/lib/sectionContent.ts

@@ -36,7 +36,16 @@ type ParsedCardListBlock = {
 	width?: CardListWidth;
 	cards: CardListItem[];
 };
-type ParsedNornaBlock = ParsedImageBlock | ParsedCardListBlock;
+type ParsedPageListBlock = {
+	type: 'page-list';
+	line: number;
+};
+type ParsedNornaBlock = ParsedImageBlock | ParsedCardListBlock | ParsedPageListBlock;
+type PageListItem = {
+	title: string;
+	pathname: string;
+	description?: string;
+};
 type InlineNote = {
 	markdown: string;
 	number: number;
@@ -48,7 +57,8 @@ type SectionContentBlock =
 	| { type: 'html'; html: string }
 	| { type: 'image-stack'; images: ManagedImage[] }
 	| { type: 'image-carousel'; images: ManagedImage[] }
-	| { type: 'card-list'; layout: CardListLayout; flow: CardListFlow; size: CardListSize; width?: CardListWidth; cards: CardListItem[] };
+	| { type: 'card-list'; layout: CardListLayout; flow: CardListFlow; size: CardListSize; width?: CardListWidth; cards: CardListItem[] }
+	| { type: 'page-list'; pages: PageListItem[] };
 export type ResolvedSection = {
 	id: string | null;
 	title: string;
@@ -222,6 +232,7 @@ const resolveContentBlocks = async (
 	html: string,
 	blocks: ParsedNornaBlock[],
 	page: SitePage,
+	childPages: SitePage[],
 	inlineNotes: InlineNote[] = [],
 ) => {
 	const renderedNotes = await Promise.all(inlineNotes.map(async (note) => ({
@@ -252,6 +263,20 @@ const resolveContentBlocks = async (
 			});
 			continue;
 		}
+		if (block.type === 'page-list') {
+			if (childPages.length === 0) {
+				throw new Error(`${page.contentLabel} line ${block.line}: page-list has no listed direct child pages to display. Navigation categories are not pages. Add a listed direct child page or remove the block.`);
+			}
+			resolvedBlocks.push({
+				type: 'page-list',
+				pages: childPages.map((childPage) => ({
+					title: childPage.title,
+					pathname: childPage.pathname,
+					description: childPage.entry.data.page?.description,
+				})),
+			});
+			continue;
+		}
 
 		resolvedBlocks.push({
 			type: block.type,
@@ -268,6 +293,7 @@ const resolveContentBlocks = async (
 export const getSectionsContent = async (
 	html: string,
 	page: SitePage,
+	childPages: SitePage[] = [],
 ) => {
 	const pageDocument = page.markdownDocument;
 	const sourceLabel = page.contentLabel;
@@ -307,6 +333,9 @@ export const getSectionsContent = async (
 		if (bodySection.noteErrors.length > 0) {
 			throw new Error(bodySection.noteErrors[0].message);
 		}
+		if (bodySection.calloutErrors.length > 0) {
+			throw new Error(bodySection.calloutErrors[0].message);
+		}
 
 		const inlineNotes = bodySection.notes.map((note) => {
 			const number = nextNoteNumber;
@@ -326,7 +355,7 @@ export const getSectionsContent = async (
 			title,
 			titleHtml: await renderHeadingTitleHtml(bodySection.heading.source),
 			headingLevel,
-			contentBlocks: await resolveContentBlocks(content, bodySection.blocks, page, inlineNotes),
+			contentBlocks: await resolveContentBlocks(content, bodySection.blocks, page, childPages, inlineNotes),
 		});
 	}
 

package/src/lib/siteNavigation.ts

@@ -1,5 +1,12 @@
 import type { HeadingNavigation, SectionNavigation } from './sectionContent';
 import type { SiteNode, SitePage } from './sitePages';
+import {
+	flattenSiteNavigationTree as flattenSiteNavigationTreeShared,
+	getDirectChildPages as getDirectChildPagesShared,
+	getFirstPageInNavigationNode as getFirstPageInNavigationNodeShared,
+	getListedSiteNavigationTree as getListedSiteNavigationTreeShared,
+	getSequentialPageNavigation as getSequentialPageNavigationShared,
+} from '../../scripts/lib/site-navigation-tree.mjs';
 
 export type SiteNavigationEntry = {
 	node: SiteNode;
@@ -11,57 +18,29 @@ export type SiteNavigationNode = SiteNavigationEntry & {
 	children: SiteNavigationNode[];
 };
 
-export const getSiteNavigationTree = (entries: SiteNavigationEntry[]) => {
-	const nodes = new Map<string, SiteNavigationNode>();
-	const roots: SiteNavigationNode[] = [];
-
-	for (const entry of entries) {
-		nodes.set(entry.node.pagePath, { ...entry, children: [] });
-	}
-
-	for (const entry of entries) {
-		const node = nodes.get(entry.node.pagePath);
-		if (!node) continue;
-
-		if (entry.node.isHome || entry.node.parentPagePath === null) {
-			roots.push(node);
-			continue;
-		}
-
-		const parent = nodes.get(entry.node.parentPagePath);
-		if (!parent) {
-			throw new Error(`Site node "${entry.node.pagePath}" has no parent node "${entry.node.parentPagePath}".`);
-		}
-
-		parent.children.push(node);
-	}
-
-	return roots;
-};
-
-export const getListedSiteNavigationTree = (entries: SiteNavigationEntry[]) => {
-	const filterListed = (nodes: SiteNavigationNode[]): SiteNavigationNode[] => nodes.flatMap((node) => {
-		if (!node.node.isHome && !node.node.navigation.listed) return [];
-		const children = filterListed(node.children);
-		if (node.node.kind === 'category' && children.length === 0) return [];
-		return [{ ...node, children }];
-	});
-
-	return filterListed(getSiteNavigationTree(entries));
-};
-
-export const getFirstPageInNavigationNode = (node: SiteNavigationNode): SitePage | null => {
-	if (node.node.kind === 'page') return node.node;
-
-	for (const child of node.children) {
-		const page = getFirstPageInNavigationNode(child);
-		if (page) return page;
+export const getListedSiteNavigationTree = (entries: SiteNavigationEntry[]) => (
+	getListedSiteNavigationTreeShared(entries) as SiteNavigationNode[]
+);
+
+export const getFirstPageInNavigationNode = (node: SiteNavigationNode): SitePage | null => (
+	getFirstPageInNavigationNodeShared(node) as SitePage | null
+);
+
+export const flattenSiteNavigationTree = (nodes: SiteNavigationNode[]): SiteNavigationNode[] => (
+	flattenSiteNavigationTreeShared(nodes) as SiteNavigationNode[]
+);
+
+export const getSequentialPageNavigation = (
+	nodes: SiteNavigationNode[],
+	currentPagePath: string,
+): { previous: SitePage | null; next: SitePage | null } => (
+	getSequentialPageNavigationShared(nodes, currentPagePath) as {
+		previous: SitePage | null;
+		next: SitePage | null;
 	}
+);
 
-	return null;
-};
-
-export const flattenSiteNavigationTree = (nodes: SiteNavigationNode[]): SiteNavigationNode[] => nodes.flatMap((node) => [
-	node,
-	...flattenSiteNavigationTree(node.children),
-]);
+export const getDirectChildPages = (
+	nodes: SiteNavigationNode[],
+	currentPagePath: string,
+): SitePage[] => getDirectChildPagesShared(nodes, currentPagePath) as SitePage[];