@janga/norna 0.7.17 → 0.7.22

package/src/components/SiteSection.astro

@@ -1,6 +1,11 @@
 ---
-import projectConfig from '../../scripts/lib/project-config.mjs';
-import { resolveSectionSurface } from '../../scripts/lib/presentation.mjs';
+import { getTextWidthCssValue, resolveSectionSurface } from '../../scripts/lib/presentation.mjs';
+import {
+	bodyTypographySizeValues,
+	captionTypographySizeValues,
+	getHeadingTypographySizeValue,
+	getTypographySizeValue,
+} from '../../scripts/lib/typography.mjs';
 import CardList from './CardList.astro';
 import ImageCarousel from './ImageCarousel.astro';
 import ImageStack from './ImageStack.astro';
@@ -12,6 +17,11 @@ type TextAlign = 'left' | 'center' | 'right';
 type TextSize = 'small' | 'medium' | 'large' | 'xlarge';
 type TextWidth = 'narrow' | 'normal' | 'wide';
 type ResolvedPagePresentation = {
+	blocks: {
+		cardList: {
+			width: 'text' | 'narrow' | 'normal' | 'wide';
+		};
+	};
 	palette: {
 		surfaces: Record<'base' | 'soft' | 'emphasis', { backgroundColor: string; textColor: string }>;
 	};
@@ -45,133 +55,13 @@ const sectionHeadingVisualLevel = section.headingLevel === 1 ? 'h1' : 'h2';
 const headingId = section.id ?? 'page-title';
 const firstContentBlock = section.contentBlocks[0];
 const firstContentBlockIsVisual = firstContentBlock !== undefined
-	&& firstContentBlock.type !== 'html'
-	&& firstContentBlock.type !== 'note';
-type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
-const headingSizeValues: Record<HeadingLevel, Record<TextSize, ResponsiveValue<string>>> = {
-	h1: {
-		small: {
-			desktop: 'clamp(1.35rem, 1.2rem + 0.55vw, 1.7rem)',
-			mobile: 'clamp(1.32rem, 1.16rem + 0.8vw, 1.58rem)',
-		},
-		medium: {
-			desktop: 'clamp(1.65rem, 1.35rem + 1.1vw, 2.4rem)',
-			mobile: 'clamp(1.5rem, 1.22rem + 1.4vw, 2rem)',
-		},
-		large: {
-			desktop: 'clamp(1.95rem, 1.48rem + 1.7vw, 3.2rem)',
-			mobile: 'clamp(1.75rem, 1.32rem + 2.15vw, 2.5rem)',
-		},
-		xlarge: {
-			desktop: 'clamp(2.35rem, 1.58rem + 2.75vw, 4.4rem)',
-			mobile: 'clamp(2rem, 1.4rem + 3vw, 3.1rem)',
-		},
-	},
-	h2: {
-		small: {
-			desktop: 'clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem)',
-			mobile: 'clamp(1.12rem, 1rem + 0.85vw, 1.42rem)',
-		},
-		medium: {
-			desktop: 'clamp(1.35rem, 1.1rem + 0.9vw, 2rem)',
-			mobile: 'clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem)',
-		},
-		large: {
-			desktop: 'clamp(1.6rem, 1.22rem + 1.45vw, 2.75rem)',
-			mobile: 'clamp(1.5rem, 1.12rem + 2vw, 2.25rem)',
-		},
-		xlarge: {
-			desktop: 'clamp(2rem, 1.35rem + 2.4vw, 3.75rem)',
-			mobile: 'clamp(1.8rem, 1.25rem + 3vw, 2.85rem)',
-		},
-	},
-	h3: {
-		small: {
-			desktop: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
-			mobile: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
-		},
-		medium: {
-			desktop: 'clamp(1.05rem, 0.98rem + 0.28vw, 1.22rem)',
-			mobile: 'clamp(1.04rem, 0.98rem + 0.45vw, 1.18rem)',
-		},
-		large: {
-			desktop: 'clamp(1.16rem, 1.02rem + 0.5vw, 1.5rem)',
-			mobile: 'clamp(1.12rem, 1rem + 0.75vw, 1.36rem)',
-		},
-		xlarge: {
-			desktop: 'clamp(1.32rem, 1.08rem + 0.85vw, 1.9rem)',
-			mobile: 'clamp(1.24rem, 1.04rem + 1.15vw, 1.65rem)',
-		},
-	},
-	h4: {
-		small: {
-			desktop: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
-			mobile: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
-		},
-		medium: {
-			desktop: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
-			mobile: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
-		},
-		large: {
-			desktop: 'clamp(1.05rem, 1rem + 0.16vw, 1.12rem)',
-			mobile: 'clamp(1.05rem, 1rem + 0.16vw, 1.12rem)',
-		},
-		xlarge: {
-			desktop: 'clamp(1.14rem, 1.06rem + 0.26vw, 1.25rem)',
-			mobile: 'clamp(1.14rem, 1.06rem + 0.26vw, 1.25rem)',
-		},
-	},
-};
-const bodySizeValues: Record<TextSize, ResponsiveValue<string>> = {
-	small: {
-		desktop: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
-		mobile: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
-	},
-	medium: {
-		desktop: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
-		mobile: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
-	},
-	large: {
-		desktop: 'clamp(1.05rem, 1rem + 0.16vw, 1.12rem)',
-		mobile: 'clamp(1.05rem, 1rem + 0.16vw, 1.12rem)',
-	},
-	xlarge: {
-		desktop: 'clamp(1.14rem, 1.06rem + 0.26vw, 1.25rem)',
-		mobile: 'clamp(1.14rem, 1.06rem + 0.26vw, 1.25rem)',
-	},
-};
-const captionSizeValues: Record<TextSize, ResponsiveValue<string>> = {
-	small: {
-		desktop: 'clamp(0.78rem, 0.76rem + 0.08vw, 0.84rem)',
-		mobile: 'clamp(0.78rem, 0.76rem + 0.08vw, 0.84rem)',
-	},
-	medium: {
-		desktop: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
-		mobile: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
-	},
-	large: {
-		desktop: 'clamp(0.96rem, 0.92rem + 0.12vw, 1rem)',
-		mobile: 'clamp(0.96rem, 0.92rem + 0.12vw, 1rem)',
-	},
-	xlarge: {
-		desktop: 'clamp(1.04rem, 0.98rem + 0.18vw, 1.12rem)',
-		mobile: 'clamp(1.04rem, 0.98rem + 0.18vw, 1.12rem)',
-	},
-};
-const getSizeValue = (
-	sizeValues: Record<TextSize, ResponsiveValue<string>>,
-	size: TextSize,
-) => sizeValues[size];
-const getHeadingSizeValue = (level: HeadingLevel, size: TextSize) => (
-	headingSizeValues[level][size]
-);
-const textWidthValues: Record<TextWidth, string> = {
-	narrow: 'min(60ch, var(--text-width))',
-	normal: 'min(72ch, var(--text-width))',
-	wide: 'min(72ch, var(--image-layout-width))',
-};
+	&& firstContentBlock.type !== 'html';
 const surface = isPageTitle
-	? pagePresentation.palette.surfaces.base
+	? {
+		backgroundColor: 'var(--color-surface-base-background)',
+		textColor: 'var(--color-surface-base-text)',
+		secondaryTextColor: 'var(--color-surface-base-secondary-text)',
+	}
 	: resolveSectionSurface(pagePresentation, sectionIndex);
 const typography = pagePresentation.typography.values;
 const heading = typography.headings[sectionHeadingVisualLevel] as {
@@ -197,15 +87,15 @@ const markdownHeadings = Object.fromEntries(markdownHeadingLevels.map((level) =>
 const headingAlign = heading.align;
 const bodyAlign = typography.body.align as ResponsiveValue<TextAlign>;
 const captionAlign = typography.caption.align as ResponsiveValue<TextAlign>;
-const headingFontSize = getHeadingSizeValue(sectionHeadingVisualLevel, heading.size);
-const bodyFontSize = getSizeValue(bodySizeValues, typography.body.size as TextSize);
-const captionFontSize = getSizeValue(captionSizeValues, typography.caption.size as TextSize);
+const headingFontSize = getHeadingTypographySizeValue(sectionHeadingVisualLevel, heading.size);
+const bodyFontSize = getTypographySizeValue(bodyTypographySizeValues, typography.body.size as TextSize);
+const captionFontSize = getTypographySizeValue(captionTypographySizeValues, typography.caption.size as TextSize);
 const justifyByAlign: Record<TextAlign, string> = {
 	left: 'flex-start',
 	center: 'center',
 	right: 'flex-end',
 };
-const bodyWidthValue = textWidthValues[typography.body.width as TextWidth];
+const bodyWidthValue = getTextWidthCssValue(typography.body.width as TextWidth);
 const headingWidth = {
 	desktop: bodyWidthValue,
 	mobile: bodyWidthValue,
@@ -224,14 +114,6 @@ const hasMedia = section.contentBlocks.some((block) => (
 	|| block.type === 'image-carousel'
 	|| (block.type === 'card-list' && block.cards.some((card) => card.image))
 ));
-const hasMarginNotes = section.contentBlocks.some((block) => (
-	block.type === 'note'
-));
-const getNoteGridRow = (blocks: ResolvedSection['contentBlocks'], blockIndex: number) => Math.max(
-	1,
-	blocks.slice(0, blockIndex).filter((block) => block.type === 'html').length,
-);
-const noteLabel = projectConfig.locale.labels.note;
 const contentGroups: Array<
 	| { type: 'reading'; blocks: ResolvedSection['contentBlocks'] }
 	| { type: 'media'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' }> }
@@ -256,7 +138,7 @@ flushReadingBlocks();
 const firstMediaGroupIndex = contentGroups.findIndex((group) => group.type === 'media');
 const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 	const headingConfig = markdownHeadings[level];
-	const fontSize = getHeadingSizeValue(level, headingConfig.size);
+	const fontSize = getHeadingTypographySizeValue(level, headingConfig.size);
 
 	return [
 		`--section-markdown-${level}-align-desktop: ${headingConfig.align.desktop}`,
@@ -272,6 +154,7 @@ const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 const sectionStyle = [
 	`--section-background-color: ${surface.backgroundColor}`,
 	`--section-text-color: ${surface.textColor}`,
+	`--section-secondary-text-color: ${surface.secondaryTextColor}`,
 	`--section-heading-align-desktop: ${headingAlign.desktop}`,
 	`--section-heading-align-mobile: ${headingAlign.mobile}`,
 	`--section-heading-font-size-desktop: ${headingFontSize.desktop}`,
@@ -310,7 +193,6 @@ const sectionStyle = [
 			'site-section-page-title': isPageTitle,
 			'site-section-page-title-empty': isPageTitle && section.contentBlocks.length === 0,
 			'site-section-first-block-is-visual': firstContentBlockIsVisual,
-			'site-section-has-margin-notes': hasMarginNotes,
 		},
 	]}
 	data-section-title={section.title}
@@ -324,61 +206,9 @@ const sectionStyle = [
 		<div class:list={['section-body', { 'section-body-has-media': hasMedia, 'section-body-text-only': !hasMedia }]}>
 			{contentGroups.map((group, groupIndex) => {
 				if (group.type === 'reading') {
-					if (hasMarginNotes && group.blocks.some((block) => block.type === 'note')) {
-						return (
-							<div class="section-reading-layout">
-								{group.blocks.map((block, blockIndex) => {
-									if (block.type === 'html') {
-										return block.html && <div class="section-markdown" set:html={block.html} />;
-									}
-
-									const noteGridRow = getNoteGridRow(group.blocks, blockIndex);
-									return (
-										<aside
-											class="section-note section-note-margin"
-											id={block.id}
-											aria-label={`${noteLabel}${block.number ? ` ${block.number}` : ''}`}
-											role="note"
-											data-note-id={block.id}
-											style={`grid-row: ${noteGridRow};`}
-										>
-											{block.number && block.referenceId && (
-												<a class="section-note-number" href={`#${block.referenceId}`} aria-label={`${noteLabel} ${block.number}`}>
-													{block.number}
-												</a>
-											)}
-											<div class="section-note-content" set:html={block.html} />
-										</aside>
-									);
-								})}
-							</div>
-						);
-					}
-
-					return group.blocks.map((block, blockIndex) => {
-						if (block.type === 'html') {
-							return block.html && <div class="section-markdown" set:html={block.html} />;
-						}
-
-						const noteGridRow = getNoteGridRow(group.blocks, blockIndex);
-						return (
-							<aside
-								class="section-note section-note-margin"
-								id={block.id}
-								aria-label={`${noteLabel}${block.number ? ` ${block.number}` : ''}`}
-								role="note"
-								data-note-id={block.id}
-								style={`grid-row: ${noteGridRow};`}
-							>
-								{block.number && block.referenceId && (
-									<a class="section-note-number" href={`#${block.referenceId}`} aria-label={`${noteLabel} ${block.number}`}>
-										{block.number}
-									</a>
-								)}
-								<div class="section-note-content" set:html={block.html} />
-							</aside>
-						);
-					});
+					return group.blocks.map((block) => block.type === 'html'
+						&& block.html
+						&& <div class="section-markdown" set:html={block.html} />);
 				}
 
 				const block = group.block;
@@ -388,13 +218,22 @@ const sectionStyle = [
 							title={section.title}
 							images={block.images}
 							maxAvailableWidthPercent={visualTheme.images.maxAvailableWidthPercent}
+							maxAvailableHeightPercent={visualTheme.images.maxAvailableHeightPercent}
 							priorityFirstImage={prioritizeFirstImage && groupIndex === firstMediaGroupIndex}
 						/>
 					);
 				}
 
 				if (block.type === 'card-list') {
-					return <CardList cards={block.cards} layout={block.layout} flow={block.flow} size={block.size} width={block.width} />;
+					return (
+						<CardList
+							cards={block.cards}
+							layout={block.layout}
+							flow={block.flow}
+							size={block.size}
+							width={block.width ?? pagePresentation.blocks.cardList.width}
+						/>
+					);
 				}
 
 				return (

package/src/components/SiteTreeNavigation.astro

@@ -0,0 +1,36 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { getListedSiteNavigationTree, type SiteNavigationEntry } from '../lib/siteNavigation';
+import type { SitePage } from '../lib/sitePages';
+import NavigationPageTree from './NavigationPageTree.astro';
+
+interface Props {
+	currentPage: SitePage;
+	navigationEntries: SiteNavigationEntry[];
+}
+
+const { currentPage, navigationEntries } = Astro.props;
+const roots = getListedSiteNavigationTree(navigationEntries);
+const activeRoot = roots.find((node) => (
+	currentPage.pageDirectory === node.node.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${node.node.pageDirectory}/pages/`)
+));
+const navigationRoot = activeRoot?.node.pagePath ? `/${activeRoot.node.pagePath}/` : '/';
+---
+
+{activeRoot && (
+	<aside
+		id="tree-local-navigation"
+		class="tree-local-navigation"
+		data-navigation-root={navigationRoot}
+	>
+		<nav aria-label={`${activeRoot.node.title}: ${projectConfig.locale.labels.siteNavigation}`}>
+			<NavigationPageTree
+				nodes={[activeRoot]}
+				currentPage={currentPage}
+				variant="sidebar"
+				integratePageSections
+			/>
+		</nav>
+	</aside>
+)}

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

@@ -23,21 +23,15 @@ const siteThemeSchema = themeVisualSchema;
 
 const site = defineCollection({
 	loader: glob({
-		pattern: ['content.md', 'pages/**/content.md'],
+		pattern: 'pages/**/content.md',
 		base: pathToFileURL(siteDir),
 		generateId: ({ entry }) => {
-			if (entry === 'content.md') {
-				return siteEntryId;
-			}
-
 			const pageEntryDirectory = entry.split('/').slice(1, -1).join('/');
 			const pageDirectory = pageEntryDirectory
 				.split('/')
 				.filter((segment) => segment !== 'pages')
 				.join('/pages/');
-			return pageDirectory
-				? `${siteEntryId.replace(/-content$/, '')}-page-${encodePageDirectoryPath(parsePageDirectoryPath(pageDirectory, `page directory pages/${pageEntryDirectory}`).pageDirectory)}`
-				: entry.replace(/[^a-zA-Z0-9-]+/g, '-').replace(/^-+|-+$/g, '');
+			return `${siteEntryId.replace(/-content$/, '')}-page-${encodePageDirectoryPath(parsePageDirectoryPath(pageDirectory, `page directory pages/${pageEntryDirectory}`).pageDirectory)}`;
 		},
 	}),
 	schema: siteSchema,

package/src/layouts/BaseLayout.astro

@@ -3,6 +3,7 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import { getPresentationCssVariables } from '../../scripts/lib/presentation.mjs';
 import { getIconLinks } from '../lib/sitePublicAssets';
 import { withBasePath } from '../lib/basePath';
+import { getReaderPreferencesScript } from '../lib/readerPreferencesScript.mjs';
 import '../styles/global.css';
 
 type FrameColors = {
@@ -13,13 +14,33 @@ type FrameColors = {
 type Presentation = {
 	palette: {
 		page: FrameColors;
+	};
+	paletteModes: Record<'light' | 'dark', {
+		page: FrameColors;
 		css: Record<string, string>;
-		colorScheme: string;
+	}>;
+	colorMode: {
+		default: 'system' | 'light' | 'dark';
+	};
+	readerPreferences: {
+		controls: {
+			appearance: boolean;
+			readingWidth: boolean;
+			focusReading: boolean;
+		};
+		defaults: {
+			appearance: 'system' | 'light' | 'dark';
+			readingWidth: 'narrow' | 'standard' | 'wide';
+			focusReading: 'off' | 'on';
+		};
 	};
 };
 type VisualTheme = {
 	layout: {
 		gutter: { desktop: string; mobile: string };
+		localNavigationGap: string;
+		noteWidth: string;
+		noteGap: string;
 		pageWidth: string;
 		spacing: {
 			firstSectionTop: { desktop: string; mobile: string };
@@ -36,6 +57,11 @@ type VisualTheme = {
 		maxAvailableHeightPercent: { desktop: number; mobile: number };
 	};
 	typography: { fontFamily: string };
+	corners: {
+		radiusSmall: string;
+		radiusMedium: string;
+		radiusLarge: string;
+	};
 };
 
 interface Props {
@@ -49,6 +75,7 @@ interface Props {
 		copyrightMessage?: string;
 		buildInfo?: boolean;
 	};
+	treeNavigation?: boolean;
 }
 
 const {
@@ -59,6 +86,7 @@ const {
 	frameColors,
 	pathname = '/',
 	footer,
+	treeNavigation = false,
 } = Astro.props;
 
 const documentTitle = title;
@@ -72,7 +100,13 @@ const documentStyle = [
 	`scroll-behavior: ${scrollBehavior}`,
 	...Object.entries(getPresentationCssVariables(presentation)).map(([name, value]) => `${name}: ${value}`),
 	`--font-sans: ${visualTheme.typography.fontFamily}`,
+	`--corner-radius-small: ${visualTheme.corners.radiusSmall}`,
+	`--corner-radius-medium: ${visualTheme.corners.radiusMedium}`,
+	`--corner-radius-large: ${visualTheme.corners.radiusLarge}`,
 	`--page-width: ${visualTheme.layout.pageWidth}`,
+	`--local-navigation-gap: ${visualTheme.layout.localNavigationGap}`,
+	`--section-note-width: ${visualTheme.layout.noteWidth}`,
+	`--section-note-gap: ${visualTheme.layout.noteGap}`,
 	`--content-gutter-desktop: ${visualTheme.layout.gutter.desktop}`,
 	`--content-gutter-mobile: ${visualTheme.layout.gutter.mobile}`,
 	`--space-nav-to-first-section-desktop: ${layoutSpacing.firstSectionTop.desktop}`,
@@ -107,16 +141,32 @@ const footerStyle = [
 	`--site-footer-background-color: ${frameColors.backgroundColor}`,
 	`--site-footer-text-color: ${frameColors.textColor}`,
 ].join('; ');
+const readerPreferencesEnabled = Object.values(presentation.readerPreferences.controls).some(Boolean);
+const readerPreferencesScript = readerPreferencesEnabled
+	? getReaderPreferencesScript({
+		controls: presentation.readerPreferences.controls,
+		defaults: presentation.readerPreferences.defaults,
+		cookiePath: projectConfig.site.basePath,
+	})
+	: null;
 ---
 
 <!doctype html>
-<html lang={projectConfig.locale.lang} style={documentStyle}>
+<html
+	lang={projectConfig.locale.lang}
+	data-color-mode={presentation.readerPreferences.defaults.appearance}
+	data-reading-width={presentation.readerPreferences.defaults.readingWidth}
+	data-focus-reading={presentation.readerPreferences.defaults.focusReading}
+	data-section-tracking={treeNavigation && projectConfig.navigation.sectionTracking ? 'enabled' : undefined}
+	style={documentStyle}
+>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="format-detection" content="telephone=no" />
 		{description && <meta name="description" content={description} />}
 		<meta name="theme-color" content={presentation.palette.page.backgroundColor} />
+		{readerPreferencesScript && <script is:inline set:html={readerPreferencesScript} />}
 		<link rel="canonical" href={canonicalUrl} />
 		<meta name="generator" content={Astro.generator} />
 		{iconLinks.map((iconLink) => (

package/src/lib/generatedImages.ts

@@ -45,13 +45,6 @@ export const getGeneratedImage = (src: string) => readGeneratedImages()[src];
 
 const displaySrc = (src: string) => withBasePath(projectConfig.site.basePath, src);
 
-export const getLinkedImageSrc = (src: string) => {
-	const image = getGeneratedImage(src);
-	return displaySrc(image?.kind === 'static'
-		? image.src ?? src
-		: image?.variants?.at(-1)?.src ?? src);
-};
-
 const getDisplayVariants = (variants: NonNullable<GeneratedImage['variants']>) => {
 	const sortedVariants = [...variants].sort((a, b) => a.width - b.width);
 	const displayVariants = sortedVariants.filter((variant) => variant.width <= maxDisplayImageWidth);

package/src/lib/pageThemes.ts

@@ -3,7 +3,9 @@ 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';
 
@@ -15,7 +17,9 @@ type PageTheme = {
 export const getPageTheme = async (pageDirectory: string | null): Promise<PageTheme | null> => {
 	if (!pageDirectory) return null;
 
-	const pageAncestors = getPageDirectoryAncestors(pageDirectory).reverse();
+	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');
@@ -27,16 +31,14 @@ export const getPageTheme = async (pageDirectory: string | null): Promise<PageTh
 		const themeLabel = `${sitePagesLabel}/${themeSegments.join('/')}/theme.yaml`;
 
 		const data = parseYamlConfig(source, themeLabel, {
+			schema: pageThemeSchema,
 			validateStructure: validatePageThemeYamlStructure,
 		});
-		if (Object.hasOwn(data, 'navigation')) {
-			throw new Error(`${themeLabel} may not define navigation. Set the site-wide navigation mode in the root theme.yaml.`);
-		}
-		return {
-			id: `pages/${themeSegments.join('/')}/theme`,
-			data,
-		};
+		inheritedData = mergePageThemeConfig(inheritedData, data);
+		inheritedIds.push(`pages/${themeSegments.join('/')}/theme`);
 	}
 
-	return null;
+	return inheritedIds.length > 0
+		? { id: inheritedIds.join(' + '), data: inheritedData }
+		: null;
 };