@janga/norna 0.7.18 → 0.7.23

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 }>;
 	};
@@ -23,10 +33,15 @@ type ResolvedPagePresentation = {
 };
 type VisualTheme = {
 	images: {
+		presentation: 'prose-aligned' | 'centered-fit';
 		maxAvailableWidthPercent: {
 			desktop: number;
 			mobile: number;
 		};
+		maxAvailableHeightPercent?: {
+			desktop: number;
+			mobile: number;
+		};
 	};
 };
 
@@ -45,128 +60,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 +92,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 +119,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 +143,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 +159,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 +198,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 +211,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 +223,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,34 +1,34 @@
 ---
 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}
 				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

@@ -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;
+	}>;
+	appearance: {
+		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 };
@@ -32,12 +52,13 @@ 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 };
-	shape: {
+	corners: {
 		radiusSmall: string;
 		radiusMedium: string;
 		radiusLarge: string;
@@ -55,6 +76,7 @@ interface Props {
 		copyrightMessage?: string;
 		buildInfo?: boolean;
 	};
+	contentsNavigation?: boolean;
 }
 
 const {
@@ -65,6 +87,7 @@ const {
 	frameColors,
 	pathname = '/',
 	footer,
+	contentsNavigation = false,
 } = Astro.props;
 
 const documentTitle = title;
@@ -78,11 +101,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}`,
@@ -100,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;
@@ -117,16 +146,33 @@ 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-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={contentsNavigation ? '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/readerPreferencesScript.mjs

@@ -0,0 +1,141 @@
+const preferenceDefinitions = Object.freeze({
+	appearance: Object.freeze({
+		allowed: Object.freeze(['system', 'light', 'dark']),
+		cookieName: 'norna-appearance',
+	}),
+	readingWidth: Object.freeze({
+		allowed: Object.freeze(['narrow', 'standard', 'wide']),
+		cookieName: 'norna-reading-width',
+	}),
+	focusReading: Object.freeze({
+		allowed: Object.freeze(['off', 'on']),
+		cookieName: 'norna-focus-reading',
+	}),
+});
+
+export const getReaderPreferencesScript = ({ controls, defaults, cookiePath }) => `(() => {
+	const root = document.documentElement;
+	const controls = ${JSON.stringify(controls)};
+	const defaults = ${JSON.stringify(defaults)};
+	const cookiePath = ${JSON.stringify(cookiePath)};
+	const definitions = ${JSON.stringify(preferenceDefinitions)};
+	const values = { ...defaults };
+	const readCookie = (name) => {
+		const prefix = encodeURIComponent(name) + '=';
+		const cookie = document.cookie.split('; ').find((part) => part.startsWith(prefix));
+		return cookie ? decodeURIComponent(cookie.slice(prefix.length)) : null;
+	};
+	const writeCookie = (name, value, maxAge = 31536000) => {
+		try {
+			const secure = location.protocol === 'https:' ? '; Secure' : '';
+			document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value)
+				+ '; Path=' + cookiePath + '; Max-Age=' + maxAge + '; SameSite=Lax' + secure;
+		} catch {}
+	};
+	const isAllowed = (name, value) => definitions[name].allowed.includes(value);
+	const captureReadingPosition = () => {
+		if (window.scrollY <= 1) return null;
+		const contentTop = document.querySelector('.site-top')?.getBoundingClientRect().bottom ?? 0;
+		const candidates = document.querySelectorAll([
+			'#main-content .section-header',
+			'#main-content .section-markdown > *',
+			'#main-content .image-stack',
+			'#main-content .image-carousel',
+			'#main-content .card-list',
+		].join(', '));
+		const element = Array.from(candidates).find((candidate) => {
+			const rectangle = candidate.getBoundingClientRect();
+			return rectangle.height > 0 && rectangle.bottom > contentTop + 1;
+		});
+		return element ? { element, top: element.getBoundingClientRect().top } : null;
+	};
+	const restoreReadingPosition = (position) => {
+		if (!position) return;
+		requestAnimationFrame(() => {
+			const delta = position.element.getBoundingClientRect().top - position.top;
+			if (Math.abs(delta) < 0.5) return;
+			const scrollBehavior = root.style.scrollBehavior;
+			root.style.scrollBehavior = 'auto';
+			window.scrollBy(0, delta);
+			root.style.scrollBehavior = scrollBehavior;
+		});
+	};
+	const preserveReadingPosition = (change) => {
+		const position = captureReadingPosition();
+		change();
+		restoreReadingPosition(position);
+	};
+	const updateThemeColor = () => requestAnimationFrame(() => {
+		const themeColor = getComputedStyle(root).getPropertyValue('--color-page').trim();
+		if (themeColor) document.querySelectorAll('meta[name="theme-color"]').forEach((meta) => meta.content = themeColor);
+	});
+	const apply = (name, value, persist = false) => {
+		const nextValue = isAllowed(name, value) ? value : defaults[name];
+		values[name] = 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);
+		if (name === 'appearance') updateThemeColor();
+	};
+	for (const name of Object.keys(definitions)) {
+		const saved = controls[name] ? readCookie(definitions[name].cookieName) : null;
+		apply(name, saved && isAllowed(name, saved) ? saved : defaults[name]);
+	}
+	root.dataset.readerPreferencesReady = 'true';
+	const syncControls = () => {
+		document.querySelectorAll('[data-reader-appearance]').forEach((input) => {
+			input.checked = input.value === values.appearance;
+		});
+		document.querySelectorAll('[data-reader-width]').forEach((input) => {
+			input.checked = input.value === values.readingWidth;
+		});
+		document.querySelectorAll('[data-reader-focus]').forEach((input) => {
+			input.checked = values.focusReading === 'on';
+		});
+	};
+	document.addEventListener('DOMContentLoaded', () => {
+		syncControls();
+		document.querySelectorAll('[data-reader-appearance]').forEach((input) => {
+			input.addEventListener('change', () => {
+				if (input.checked) apply('appearance', input.value, true);
+			});
+		});
+		document.querySelectorAll('[data-reader-width]').forEach((input) => {
+			input.addEventListener('change', () => {
+				if (input.checked) preserveReadingPosition(() => apply('readingWidth', input.value, true));
+			});
+		});
+		document.querySelectorAll('[data-reader-focus]').forEach((input) => {
+			input.addEventListener('change', () => preserveReadingPosition(() => {
+				apply('focusReading', input.checked ? 'on' : 'off', true);
+			}));
+		});
+		document.querySelectorAll('[data-reader-reset]').forEach((button) => {
+			button.addEventListener('click', () => {
+				preserveReadingPosition(() => {
+					for (const name of Object.keys(definitions)) {
+						writeCookie(definitions[name].cookieName, '', 0);
+						apply(name, defaults[name]);
+					}
+					syncControls();
+				});
+			});
+		});
+		document.querySelectorAll('[data-display-settings]').forEach((settings) => {
+			settings.addEventListener('keydown', (event) => {
+				if (event.key !== 'Escape') return;
+				settings.removeAttribute('open');
+				settings.querySelector('summary')?.focus();
+			});
+		});
+	});
+	document.addEventListener('click', (event) => {
+		document.querySelectorAll('[data-display-settings][open]').forEach((settings) => {
+			if (!settings.contains(event.target)) settings.removeAttribute('open');
+		});
+	});
+	matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+		if (values.appearance === 'system') updateThemeColor();
+	});
+})();`;