@janga/norna 0.7.18 → 0.7.22

package/src/components/SitePage.astro

@@ -1,22 +1,19 @@
 ---
 import { getCollection, type CollectionEntry } from 'astro:content';
-import path from 'node:path';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
-import SiteNotesScript from './SiteNotesScript.astro';
 import SiteSection from './SiteSection.astro';
 import SiteTreeNavigation from './SiteTreeNavigation.astro';
 import TreeNavigationScript from './TreeNavigationScript.astro';
-import { getHeadingNavigation, getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
+import { getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
 import { getPageTheme } from '../lib/pageThemes';
-import { getSitePage, getSitePages, type SitePage } from '../lib/sitePages';
+import { getSiteModel, type SitePage } from '../lib/sitePages';
+import { flattenSiteNavigationTree, getListedSiteNavigationTree } from '../lib/siteNavigation';
 import { getToday, isVisibleToday } from '../lib/visibility';
 import { getLogoAsset } from '../lib/sitePublicAssets';
-import { readSiteFile } from '../../scripts/lib/site-content.mjs';
 import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
-import { sitePagesDir } from '../../scripts/lib/site-paths.mjs';
 import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
 import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
@@ -29,15 +26,10 @@ interface Props {
 
 const { entry } = Astro.props;
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
-const sitePages = getSitePages(await getCollection('site'));
-const currentPage = getSitePage(entry);
-const getPageContentFile = (page: SitePage) => ({
-		label: `${siteDirectory || 'site'}/pages/${page.pageDirectory}/content.md`,
-		path: path.join(sitePagesDir, page.pageDirectory, 'content.md'),
-	});
-const pageContentFile = getPageContentFile(currentPage);
-const siteContentLabel = pageContentFile.label;
-const rawMarkdown = (await readSiteFile(pageContentFile.path, pageContentFile.label)).body;
+const siteModel = await getSiteModel(await getCollection('site'));
+const { nodes: siteNodes, pages: sitePages } = siteModel;
+const currentPage = sitePages.find((page) => page.entry.id === entry.id);
+if (!currentPage) throw new Error(`Page entry "${entry.id}" is missing from the site page model.`);
 const [siteTheme] = await getCollection('theme');
 if (!siteTheme) {
 	throw new Error('site/theme.yaml is required. Add a root theme before building the site.');
@@ -61,14 +53,10 @@ const logo = logoAsset
 		height: logoSettings?.height,
 	}
 	: undefined;
-const pagePresentation = resolvePagePresentation(themeData, themeLabel);
-const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
-const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
 const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, currentPage, siteContentLabel);
+const resolvedSections = await getSectionsContent(siteHtml, currentPage);
 const today = getToday();
 const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
-const hasMarginNotes = resolvedSections.some((section) => section.contentBlocks.some((block) => block.type === 'note'));
 const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
@@ -81,33 +69,40 @@ const renderedSections = resolvedSections.map((section, index) => ({
 	prioritizeFirstImage: index === firstImageSectionIndex,
 }));
 
-const getPageContent = async (page: SitePage) => {
-	const contentFile = getPageContentFile(page);
-	const pageMarkdown = page.pathname === currentPage.pathname
-		? rawMarkdown
-		: (await readSiteFile(contentFile.path, contentFile.label)).body;
-	return getHeadingNavigation(pageMarkdown, contentFile.label);
-};
+const getPageContent = (page: SitePage) =>
+	page.markdownDocument.navigationHeadings.map(({ depth, id, parentId, title }) => ({
+		depth,
+		id,
+		parentId,
+		title,
+	}));
 
-const pageNavigation = await Promise.all(sitePages.map(async (page) => {
-	const headings = await getPageContent(page);
+const siteNavigation = siteNodes.map((node) => {
+	const headings = node.kind === 'page' ? getPageContent(node) : [];
 	return {
-		page,
+		node,
 		headings,
 		sections: headings
 			.filter((heading) => heading.depth === 2)
 			.map(({ id, title }) => ({ id, title })),
 	};
-}));
+});
+const renderedNavigationEntries = flattenSiteNavigationTree(getListedSiteNavigationTree(siteNavigation));
 const navigationModel = resolveNavigationModel({
 	mode: projectConfig.navigation.mode,
-	pages: pageNavigation.map(({ page, headings }) => ({
-		depth: Math.max(1, page.depth),
+	nodes: renderedNavigationEntries.map(({ node, headings }) => ({
+		depth: Math.max(1, node.depth),
 		headings,
-		isHome: page.isHome,
-		listed: page.navigation.listed,
+		isHome: node.isHome,
+		kind: node.kind,
+		listed: node.navigation.listed,
 	})),
 });
+const pagePresentation = resolvePagePresentation(themeData, themeLabel, {
+	navigationMode: navigationModel.mode,
+});
+const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
+const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
 const hasTreeNavigation = navigationModel.mode === 'tree';
 const showBreadcrumbs = !currentPage.isHome && currentPage.parentPagePath !== null;
 const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
@@ -122,19 +117,21 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
 	footer={sitewideData.footer}
+	treeNavigation={hasTreeNavigation}
 >
 	<SiteNavigation
 		logo={logo}
 		currentPage={currentPage}
-		pageNavigation={pageNavigation}
+		navigationEntries={siteNavigation}
 		navigationMode={navigationModel.mode}
 		frameColors={frameColors}
+		readerPreferences={pagePresentation.readerPreferences}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
 	<div class:list={['site-page-layout', { 'site-page-layout-tree': hasTreeNavigation }]}>
 		{hasTreeNavigation && (
-			<SiteTreeNavigation currentPage={currentPage} pageNavigation={pageNavigation} />
+			<SiteTreeNavigation currentPage={currentPage} navigationEntries={siteNavigation} />
 		)}
 		<main
 			class:list={['site-content', { 'site-content-has-breadcrumbs': reserveBreadcrumbSpace }]}
@@ -142,7 +139,7 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 			style={`--page-text-width: ${pageTextWidth}`}
 		>
 			{showBreadcrumbs
-				? <SiteBreadcrumbs currentPage={currentPage} pages={sitePages} />
+				? <SiteBreadcrumbs currentPage={currentPage} nodes={siteNodes} />
 				: reserveBreadcrumbSpace && <div class="site-breadcrumbs" aria-hidden="true"></div>}
 			{renderedSections.map(({ section, sectionIndex, prioritizeFirstImage }) => (
 				<SiteSection
@@ -156,5 +153,4 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 		</main>
 	</div>
 	{hasTreeNavigation && <TreeNavigationScript />}
-	{hasMarginNotes && <SiteNotesScript />}
 </BaseLayout>

package/src/components/SiteSection.astro

@@ -1,6 +1,11 @@
 ---
-import projectConfig from '../../scripts/lib/project-config.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,128 +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]
-);
+	&& 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 {
@@ -192,9 +87,9 @@ 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',
@@ -219,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' }> }
@@ -251,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}`,
@@ -267,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}`,
@@ -305,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}
@@ -319,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;
@@ -383,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

@@ -1,29 +1,30 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
-import { withBasePath } from '../lib/basePath';
-import { getListedPageNavigationTree, type PageNavigationEntry } from '../lib/siteNavigation';
+import { getListedSiteNavigationTree, type SiteNavigationEntry } from '../lib/siteNavigation';
 import type { SitePage } from '../lib/sitePages';
 import NavigationPageTree from './NavigationPageTree.astro';
 
 interface Props {
 	currentPage: SitePage;
-	pageNavigation: PageNavigationEntry[];
+	navigationEntries: SiteNavigationEntry[];
 }
 
-const { currentPage, pageNavigation } = Astro.props;
-const roots = getListedPageNavigationTree(pageNavigation);
+const { currentPage, navigationEntries } = Astro.props;
+const roots = getListedSiteNavigationTree(navigationEntries);
 const activeRoot = roots.find((node) => (
-	currentPage.pageDirectory === node.page.pageDirectory
-	|| currentPage.pageDirectory.startsWith(`${node.page.pageDirectory}/pages/`)
+	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={withBasePath(projectConfig.site.basePath, activeRoot.page.pathname)}
+		data-navigation-root={navigationRoot}
 	>
-		<nav aria-label={`${activeRoot.page.title}: ${projectConfig.locale.labels.siteNavigation}`}>
+		<nav aria-label={`${activeRoot.node.title}: ${projectConfig.locale.labels.siteNavigation}`}>
 			<NavigationPageTree
 				nodes={[activeRoot]}
 				currentPage={currentPage}

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,14 +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 };
@@ -37,7 +57,7 @@ type VisualTheme = {
 		maxAvailableHeightPercent: { desktop: number; mobile: number };
 	};
 	typography: { fontFamily: string };
-	shape: {
+	corners: {
 		radiusSmall: string;
 		radiusMedium: string;
 		radiusLarge: string;
@@ -55,6 +75,7 @@ interface Props {
 		copyrightMessage?: string;
 		buildInfo?: boolean;
 	};
+	treeNavigation?: boolean;
 }
 
 const {
@@ -65,6 +86,7 @@ const {
 	frameColors,
 	pathname = '/',
 	footer,
+	treeNavigation = false,
 } = Astro.props;
 
 const documentTitle = title;
@@ -78,11 +100,13 @@ 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}`,
+	`--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}`,
@@ -117,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);