@janga/norna 0.7.22 → 0.7.23

package/src/components/NavigationPageTree.astro

@@ -30,6 +30,11 @@ const hasPageSections = (node: SiteNavigationNode) => (
 	node.node.kind === 'page' && node.headings.some((heading) => heading.depth === 2)
 );
 const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPageSections(node);
+const usesPageDisclosure = (node: SiteNavigationNode) => (
+	variant === 'sidebar'
+		? hasBranch(node)
+		: integratePageSections && hasPageDisclosure(node)
+);
 ---
 
 <ul class:list={['navigation-page-tree', `navigation-page-tree-${variant}`]}>
@@ -69,62 +74,52 @@ const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPa
 						/>
 					</div>
 				</details>
-			) : variant !== 'submenu' && integratePageSections ? (
-				hasPageDisclosure(node) ? (
-					<details
-						class:list={['navigation-page-branch', 'navigation-page-disclosure', `navigation-page-disclosure-${variant}`]}
-						data-page-path={node.node.pagePath || '/'}
-						data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
-						data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
-						data-has-sections={hasPageSections(node) ? 'true' : undefined}
-						open={isCurrentBranch(node.node)}
+			) : variant !== 'submenu' && usesPageDisclosure(node) ? (
+				<details
+					class:list={['navigation-page-branch', 'navigation-page-disclosure', `navigation-page-disclosure-${variant}`]}
+					data-page-path={node.node.pagePath || '/'}
+					data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
+					data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
+					data-has-sections={hasPageSections(node) ? 'true' : undefined}
+					open={isCurrentBranch(node.node)}
+				>
+					<summary
+						class="navigation-page-summary"
+						aria-controls={getBranchId(node.node)}
 					>
-						<summary
-							class="navigation-page-summary"
-							aria-controls={getBranchId(node.node)}
-						>
-							<span class="navigation-page-summary-title">{node.node.title}</span>
-							<span class="navigation-page-chevron" aria-hidden="true"></span>
-						</summary>
-						<a
-							class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
-							href={pageHref(node.node)}
-							aria-current={isCurrentPage(node.node) ? 'page' : undefined}
-						>
-							{node.node.title}
-						</a>
-						<div id={getBranchId(node.node)} class="navigation-page-branch-content">
-							{hasPageSections(node) && (
-								<nav
-									class="navigation-page-sections"
-									aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
-								>
-									<PageContentsLinks
-										headings={node.headings}
-										variant={variant === 'mobile' ? 'mobile' : 'desktop'}
-										pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
-									/>
-								</nav>
-							)}
-							{hasBranch(node) && (
-								<Astro.self
-									nodes={node.children}
-									currentPage={currentPage}
-									variant={variant}
-									integratePageSections={integratePageSections}
-								/>
-							)}
-						</div>
-					</details>
-				) : (
+						<span class="navigation-page-summary-title">{node.node.title}</span>
+						<span class="navigation-page-chevron" aria-hidden="true"></span>
+					</summary>
 					<a
-						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+						class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
 						href={pageHref(node.node)}
 						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
 					>
 						{node.node.title}
 					</a>
-				)
+					<div id={getBranchId(node.node)} class="navigation-page-branch-content">
+						{integratePageSections && hasPageSections(node) && (
+							<nav
+								class="navigation-page-sections"
+								aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
+							>
+								<PageContentsLinks
+									headings={node.headings}
+									variant={variant === 'mobile' ? 'mobile' : 'desktop'}
+									pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
+								/>
+							</nav>
+						)}
+						{hasBranch(node) && (
+							<Astro.self
+								nodes={node.children}
+								currentPage={currentPage}
+								variant={variant}
+								integratePageSections={integratePageSections}
+							/>
+						)}
+					</div>
+				</details>
 			) : variant !== 'submenu' ? (
 				<>
 					<a
@@ -134,17 +129,6 @@ const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPa
 					>
 						{node.node.title}
 					</a>
-					{variant === 'sidebar' && isCurrentPage(node.node) && hasPageSections(node) && (
-						<nav
-							class="navigation-page-sections"
-							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
-						>
-							<PageContentsLinks
-								headings={node.headings}
-								variant="desktop"
-							/>
-						</nav>
-					)}
 					{hasBranch(node) && (
 						<details
 							class="navigation-page-branch"

package/src/components/PageAliasRedirect.astro

@@ -0,0 +1,49 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { getAbsolutePageUrl } from '../../scripts/lib/site-page-urls.mjs';
+import { withBasePath } from '../lib/basePath';
+
+interface Props {
+	targetPathname: string;
+	targetTitle: string;
+}
+
+const { targetPathname, targetTitle } = Astro.props;
+const { labels, lang } = projectConfig.locale;
+const targetHref = withBasePath(projectConfig.site.basePath, targetPathname);
+const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
+---
+
+<!doctype html>
+<html lang={lang}>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="robots" content="noindex, follow" />
+		<meta http-equiv="refresh" content={`0; url=${targetHref}`} />
+		<link rel="canonical" href={canonicalUrl} />
+		<title>{labels.pageMoved}: {targetTitle}</title>
+		<style is:inline>
+			:root {
+				color-scheme: light dark;
+				font-family: system-ui, sans-serif;
+			}
+
+			body {
+				margin: 0;
+				padding: 2rem;
+			}
+
+			main {
+				max-width: 42rem;
+				margin-inline: auto;
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<h1>{labels.pageMoved}</h1>
+			<p>{labels.pageMovedText} <a href={targetHref}>{targetTitle}</a>.</p>
+		</main>
+	</body>
+</html>

package/src/components/PageContentsNavigation.astro

@@ -0,0 +1,21 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import type { HeadingNavigation } from '../lib/sectionContent';
+import PageContentsLinks from './PageContentsLinks.astro';
+
+interface Props {
+	headings: HeadingNavigation[];
+	pageTitle: string;
+	variant: 'inline' | 'rail';
+}
+
+const { headings, pageTitle, variant } = Astro.props;
+const label = `${projectConfig.locale.labels.pageNavigation}: ${pageTitle}`;
+---
+
+<aside class={`page-contents-navigation page-contents-navigation-${variant}`}>
+	<nav aria-label={label}>
+		<p class="page-contents-navigation-label">{projectConfig.locale.labels.pageNavigation}</p>
+		<PageContentsLinks headings={headings} variant="desktop" />
+	</nav>
+</aside>

package/src/components/SectionNavigationScript.astro

@@ -23,6 +23,36 @@
 			.filter((heading) => trackedHeadingIds.has(heading.id))
 		: [];
 	let sectionTrackingFrame: number | undefined;
+	let sectionTrackingPaused = false;
+	let sectionTrackingResumeTimer: number | undefined;
+
+	const resumeSectionTracking = () => {
+		window.clearTimeout(sectionTrackingResumeTimer);
+		window.removeEventListener('scrollend', resumeSectionTracking);
+		sectionTrackingPaused = false;
+		sectionTrackingResumeTimer = undefined;
+	};
+
+	const pauseSectionTrackingForAnchorNavigation = () => {
+		if (!sectionTrackingEnabled) return;
+
+		sectionTrackingPaused = true;
+		if (sectionTrackingFrame !== undefined) {
+			window.cancelAnimationFrame(sectionTrackingFrame);
+			sectionTrackingFrame = undefined;
+		}
+		window.clearTimeout(sectionTrackingResumeTimer);
+		window.removeEventListener('scrollend', resumeSectionTracking);
+		if ('onscrollend' in document.documentElement) {
+			window.addEventListener('scrollend', resumeSectionTracking, { once: true });
+		}
+
+		const scrollBehavior = getComputedStyle(document.documentElement).scrollBehavior;
+		sectionTrackingResumeTimer = window.setTimeout(
+			resumeSectionTracking,
+			scrollBehavior === 'smooth' ? 2000 : 120,
+		);
+	};
 
 	const setAnchorOffset = () => {
 		if (!siteTop) return;
@@ -73,12 +103,35 @@
 
 	const updateReadingPosition = () => {
 		sectionTrackingFrame = undefined;
-		const readingLine = Math.ceil(siteTop?.getBoundingClientRect().bottom ?? 0) + 8;
-		let currentHeadingId: string | undefined;
+		if (trackedHeadings.length === 0) return;
+
+		let currentHeadingId: string | undefined = trackedHeadings[0]?.id;
+
+		if (window.scrollY > 1) {
+			const viewportHeight = window.innerHeight;
+			const documentHeight = Math.max(
+				document.body.scrollHeight,
+				document.body.offsetHeight,
+				document.documentElement.clientHeight,
+				document.documentElement.scrollHeight,
+				document.documentElement.offsetHeight,
+			);
+			const maximumScroll = Math.max(0, documentHeight - viewportHeight);
+			const remainingScroll = Math.max(0, maximumScroll - window.scrollY);
+			const normalReadingLine = Math.max(
+				Math.ceil(siteTop?.getBoundingClientRect().bottom ?? 0) + 8,
+				Math.round(viewportHeight / 2),
+			);
+			const terminalReadingLine = viewportHeight - remainingScroll;
+			const readingLine = Math.min(
+				viewportHeight,
+				Math.max(normalReadingLine, terminalReadingLine),
+			);
 
-		for (const heading of trackedHeadings) {
-			if (heading.getBoundingClientRect().top > readingLine) break;
-			currentHeadingId = heading.id;
+			for (const heading of trackedHeadings) {
+				if (heading.getBoundingClientRect().top > readingLine) break;
+				currentHeadingId = heading.id;
+			}
 		}
 
 		sectionLinks.forEach((link) => {
@@ -94,7 +147,7 @@
 	};
 
 	const scheduleReadingPositionUpdate = () => {
-		if (!sectionTrackingEnabled || sectionTrackingFrame !== undefined) return;
+		if (!sectionTrackingEnabled || sectionTrackingPaused || sectionTrackingFrame !== undefined) return;
 		sectionTrackingFrame = window.requestAnimationFrame(updateReadingPosition);
 	};
 
@@ -154,6 +207,7 @@
 			const target = getSamePageTarget(link);
 			if (!target) return;
 
+			pauseSectionTrackingForAnchorNavigation();
 			if (mobileMenu) mobileMenu.open = false;
 			link.closest<HTMLElement>('.site-nav-item')?.setAttribute('data-submenu-dismissed', 'true');
 
@@ -172,9 +226,11 @@
 	});
 
 	window.addEventListener('hashchange', () => {
+		pauseSectionTrackingForAnchorNavigation();
 		updateCurrentSection();
 		scheduleReadingPositionUpdate();
 	});
+	if (window.location.hash) pauseSectionTrackingForAnchorNavigation();
 	updateCurrentSection();
 	if (sectionTrackingEnabled) {
 		window.addEventListener('scroll', scheduleReadingPositionUpdate, { passive: true });

package/src/components/SiteNavigation.astro

@@ -27,6 +27,8 @@ interface Props {
 	currentPage: SitePage;
 	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
+	showTopNavigationSubmenus: boolean;
+	hasNavigationRailFrame: boolean;
 	frameColors: FrameColors;
 	readerPreferences: {
 		controls: {
@@ -42,7 +44,16 @@ interface Props {
 	};
 }
 
-const { logo, currentPage, navigationEntries, navigationMode, frameColors, readerPreferences } = Astro.props;
+const {
+	logo,
+	currentPage,
+	navigationEntries,
+	navigationMode,
+	showTopNavigationSubmenus,
+	hasNavigationRailFrame,
+	frameColors,
+	readerPreferences,
+} = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
 	: frameColors.backgroundColor;
@@ -94,6 +105,7 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 	class:list={['site-top', {
 		'site-top-has-site-nav': showSiteNavigation,
 		'site-top-has-navigation-row': showDesktopNavigationRow,
+		'site-top-has-navigation-rail-frame': hasNavigationRailFrame,
 	}]}
 	data-navigation-mode={navigationMode}
 	style={navigationStyle}
@@ -118,13 +130,13 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 						const nodeIsCurrentPage = navigationNode.node.kind === 'page' && isCurrentPage(navigationNode.node);
 						return (
 							<li class:list={['site-nav-item', {
-								'site-nav-item-has-submenu': navigationMode !== 'tree' && navigationNode.children.length > 0,
+								'site-nav-item-has-submenu': showTopNavigationSubmenus && navigationNode.children.length > 0,
 								'site-nav-item-current-branch': !nodeIsCurrentPage && isCurrentBranch(navigationNode.node),
 							}]}>
 								<a href={pageHref(destination)} aria-current={nodeIsCurrentPage ? 'page' : undefined}>
 									{navigationNode.node.title}
 								</a>
-								{navigationMode !== 'tree' && navigationNode.children.length > 0 && (
+								{showTopNavigationSubmenus && navigationNode.children.length > 0 && (
 									<div class="site-nav-submenu">
 										<nav aria-label={`${navigationNode.node.title} ${projectConfig.locale.labels.siteNavigation}`}>
 											<NavigationPageTree nodes={[navigationNode]} currentPage={currentPage} variant="submenu" />

package/src/components/SitePage.astro

@@ -1,9 +1,11 @@
 ---
 import { getCollection, type CollectionEntry } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import CodeBlockCopyScript from './CodeBlockCopyScript.astro';
 import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
+import PageContentsNavigation from './PageContentsNavigation.astro';
 import SiteSection from './SiteSection.astro';
 import SiteTreeNavigation from './SiteTreeNavigation.astro';
 import TreeNavigationScript from './TreeNavigationScript.astro';
@@ -55,6 +57,9 @@ const logo = logoAsset
 	: undefined;
 const siteHtml = entry.rendered?.html ?? '';
 const resolvedSections = await getSectionsContent(siteHtml, currentPage);
+const hasCodeBlocks = resolvedSections.some((section) => section.contentBlocks.some((block) => (
+	block.type === 'html' && /<pre\b[^>]*>[\s\S]*?<code\b/i.test(block.html)
+)));
 const today = getToday();
 const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
 const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
@@ -96,7 +101,12 @@ const navigationModel = resolveNavigationModel({
 		isHome: node.isHome,
 		kind: node.kind,
 		listed: node.navigation.listed,
+		pagePath: node.pagePath,
 	})),
+	currentPage: {
+		isHome: currentPage.isHome,
+		pagePath: currentPage.pagePath,
+	},
 });
 const pagePresentation = resolvePagePresentation(themeData, themeLabel, {
 	navigationMode: navigationModel.mode,
@@ -104,6 +114,16 @@ const pagePresentation = resolvePagePresentation(themeData, themeLabel, {
 const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
 const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
 const hasTreeNavigation = navigationModel.mode === 'tree';
+const currentPageNavigation = siteNavigation.find(({ node }) => (
+	node.kind === 'page' && node.pathname === currentPage.pathname
+));
+const pageContentsHeadings = currentPageNavigation?.headings.filter(({ depth }) => depth === 2 || depth === 3) ?? [];
+const hasContentsNavigation = hasTreeNavigation && pageContentsHeadings.length > 1;
+const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
+	|| (
+		navigationModel.requestedMode === 'automatic'
+		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
+	);
 const showBreadcrumbs = !currentPage.isHome && currentPage.parentPagePath !== null;
 const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 
@@ -117,19 +137,24 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
 	footer={sitewideData.footer}
-	treeNavigation={hasTreeNavigation}
+	contentsNavigation={hasContentsNavigation}
 >
 	<SiteNavigation
 		logo={logo}
 		currentPage={currentPage}
 		navigationEntries={siteNavigation}
 		navigationMode={navigationModel.mode}
+		showTopNavigationSubmenus={navigationModel.requestedMode !== 'automatic' && navigationModel.mode !== 'tree'}
+		hasNavigationRailFrame={hasNavigationRailFrame}
 		frameColors={frameColors}
 		readerPreferences={pagePresentation.readerPreferences}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
-	<div class:list={['site-page-layout', { 'site-page-layout-tree': hasTreeNavigation }]}>
+	<div class:list={['site-page-layout', {
+		'site-page-layout-tree': hasTreeNavigation,
+		'site-page-layout-contents': hasContentsNavigation,
+	}]}>
 		{hasTreeNavigation && (
 			<SiteTreeNavigation currentPage={currentPage} navigationEntries={siteNavigation} />
 		)}
@@ -141,6 +166,13 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 			{showBreadcrumbs
 				? <SiteBreadcrumbs currentPage={currentPage} nodes={siteNodes} />
 				: reserveBreadcrumbSpace && <div class="site-breadcrumbs" aria-hidden="true"></div>}
+			{hasContentsNavigation && (
+				<PageContentsNavigation
+					headings={pageContentsHeadings}
+					pageTitle={currentPage.title}
+					variant="inline"
+				/>
+			)}
 			{renderedSections.map(({ section, sectionIndex, prioritizeFirstImage }) => (
 				<SiteSection
 					section={section}
@@ -151,6 +183,14 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 				/>
 			))}
 		</main>
+		{hasContentsNavigation && (
+			<PageContentsNavigation
+				headings={pageContentsHeadings}
+				pageTitle={currentPage.title}
+				variant="rail"
+			/>
+		)}
 	</div>
 	{hasTreeNavigation && <TreeNavigationScript />}
+	{hasCodeBlocks && <CodeBlockCopyScript />}
 </BaseLayout>

package/src/components/SiteSection.astro

@@ -33,10 +33,15 @@ type ResolvedPagePresentation = {
 };
 type VisualTheme = {
 	images: {
+		presentation: 'prose-aligned' | 'centered-fit';
 		maxAvailableWidthPercent: {
 			desktop: number;
 			mobile: number;
 		};
+		maxAvailableHeightPercent?: {
+			desktop: number;
+			mobile: number;
+		};
 	};
 };
 

package/src/components/SiteTreeNavigation.astro

@@ -29,7 +29,6 @@ const navigationRoot = activeRoot?.node.pagePath ? `/${activeRoot.node.pagePath}
 				nodes={[activeRoot]}
 				currentPage={currentPage}
 				variant="sidebar"
-				integratePageSections
 			/>
 		</nav>
 	</aside>

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

@@ -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,7 @@ interface Props {
 		copyrightMessage?: string;
 		buildInfo?: boolean;
 	};
-	treeNavigation?: boolean;
+	contentsNavigation?: boolean;
 }
 
 const {
@@ -86,7 +87,7 @@ const {
 	frameColors,
 	pathname = '/',
 	footer,
-	treeNavigation = false,
+	contentsNavigation = false,
 } = Astro.props;
 
 const documentTitle = title;
@@ -124,8 +125,12 @@ 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 { buildInfo, copyrightMessage } = footer ?? {};
 const showBuildInfo = buildInfo === true;
@@ -154,10 +159,11 @@ 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}
 	style={documentStyle}
 >
 	<head>

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/sitePages.ts

@@ -10,6 +10,7 @@ import { sitePagesDir, sitePagesLabel } from '../../scripts/lib/site-paths.mjs';
 type SiteEntry = CollectionEntry<'site'>;
 
 type SiteNodeBase = {
+	aliases: string[];
 	kind: 'category' | 'page';
 	isHome: boolean;
 	navigation: {
@@ -106,6 +107,7 @@ const createSitePage = async (entry: SiteEntry): Promise<SitePage> => {
 	const navigation = entry.data.navigation ?? {};
 
 	return {
+		aliases: entry.data.page?.aliases ?? [],
 		kind: 'page',
 		entry,
 		isHome,
@@ -131,6 +133,7 @@ const createSitePage = async (entry: SiteEntry): Promise<SitePage> => {
 };
 
 const createSiteCategory = (category: Awaited<ReturnType<typeof getSiteStructure>>['categories'][number]): SiteCategory => ({
+	aliases: [],
 	kind: 'category',
 	isHome: false,
 	depth: category.depth,
@@ -226,5 +229,3 @@ export const getSiteModel = async (entries: SiteEntry[]) => {
 		warnings: structure.warnings,
 	};
 };
-
-export const getSitePages = async (entries: SiteEntry[]) => (await getSiteModel(entries)).pages;