@janga/norna 0.7.22 → 0.7.23

package/scripts/sync-content-sections.mjs

@@ -1,12 +1,18 @@
-import { mkdir, rename, stat } from 'node:fs/promises';
 import { createInterface } from 'node:readline/promises';
 import { stdin as input, stdout as output } from 'node:process';
 import path from 'node:path';
+import { applyImageSyncPlan } from './lib/content-sync-apply.mjs';
+import {
+	createImageSyncPlan,
+	getExpectedImageLabel,
+	getImageCandidateLabel,
+} from './lib/content-sync-plan.mjs';
 import {
 	getImageCandidatesByName,
 	getDeprecatedInlineStyleReferences,
 	readSiteFile,
 	readThemeFile,
+	parseContentFrontmatter,
 	toPosixPath,
 	validateContentFrontmatterStructure,
 	validateFrontmatterIndentation,
@@ -14,7 +20,11 @@ import {
 } from './lib/site-content.mjs';
 import { getSiteStructure } from './lib/site-structure.mjs';
 import { readImageDimensions } from './lib/image-dimensions.mjs';
-import { parsePageMarkdown } from './lib/page-markdown.mjs';
+import { parsePageMarkdownSource } from './lib/page-markdown.mjs';
+import {
+	createSiteLinkGraph,
+	getSitePublicFiles,
+} from './lib/site-link-graph.mjs';
 import {
 	siteThemeLabel,
 	siteThemePath,
@@ -25,8 +35,6 @@ const shouldWrite = args.has('--write');
 const shouldCheck = args.has('--check') || !shouldWrite;
 const skipPrompt = args.has('--yes');
 const issues = [];
-const imageMoves = [];
-const referencedImagePaths = new Set();
 
 const addIssue = ({ severity, message, fix, sectionId, sectionLabel }) => {
 	issues.push({ severity, message, fix, sectionId, sectionLabel });
@@ -50,7 +58,7 @@ const addSectionIssue = (contentFile, section, issue) => addIssue({
 
 const getMovePlanLines = (moves) => [
 	'Planned image moves:',
-	...moves.map((move) => `- ${getCandidateLabel({ contentFile: move.sourceContentFile, imagePath: move.from })} -> ${getExpectedImageLabel(move.contentFile, move.imageName)}`),
+	...moves.map((move) => `- ${getImageCandidateLabel({ contentFile: move.sourceContentFile, imagePath: move.from })} -> ${getExpectedImageLabel(move.contentFile, move.imageName)}`),
 ];
 
 const promptForWrite = async (moves) => {
@@ -166,157 +174,6 @@ const getAspectRatioLabel = ({ width, height }) => {
 	return `${width / divisor}:${height / divisor}`;
 };
 
-const getExpectedImagePath = (contentFile, imageName) =>
-	path.join(contentFile.imagesDir, imageName);
-
-const getExpectedImageLabel = (contentFile, imageName) =>
-	`${contentFile.imagesLabel}/${imageName}`;
-
-const getGlobalImageCandidates = (globalImageCandidatesByName, imageName, expectedPath) =>
-	(globalImageCandidatesByName.get(imageName) ?? []).filter(({ imagePath }) => imagePath !== expectedPath);
-
-const getReferenceLabel = (contentFile, section) => `${contentFile.contentLabel} [${section.id ?? 'page title'}]`;
-
-const getRootLabel = (contentFile) => contentFile.imagesLabel.replace(/\/images$/, '');
-
-const getCandidateLabel = ({ contentFile, imagePath }) =>
-	`${contentFile.imagesLabel}/${toPosixPath(path.relative(contentFile.imagesDir, imagePath))}`;
-
-const addExpectedReference = (expectedReferencesByPath, expectedPath, expectedReference) => {
-	if (!expectedReferencesByPath.has(expectedPath)) {
-		expectedReferencesByPath.set(expectedPath, []);
-	}
-
-	expectedReferencesByPath.get(expectedPath).push(expectedReference);
-};
-
-const addGlobalImageCandidate = (globalImageCandidatesByName, imageName, candidate) => {
-	if (!globalImageCandidatesByName.has(imageName)) {
-		globalImageCandidatesByName.set(imageName, []);
-	}
-
-	globalImageCandidatesByName.get(imageName).push(candidate);
-};
-
-const addConflictingMoveIssues = () => {
-	const movesBySource = new Map();
-	const movesByDestination = new Map();
-
-	for (const move of imageMoves) {
-		const sourceKey = move.from;
-		const destinationKey = move.to;
-
-		if (!movesBySource.has(sourceKey)) {
-			movesBySource.set(sourceKey, []);
-		}
-		movesBySource.get(sourceKey).push(move);
-
-		if (!movesByDestination.has(destinationKey)) {
-			movesByDestination.set(destinationKey, []);
-		}
-		movesByDestination.get(destinationKey).push(move);
-	}
-
-	for (const moves of movesBySource.values()) {
-		const destinations = new Set(moves.map((move) => move.to));
-		if (destinations.size <= 1) continue;
-
-		const firstMove = moves[0];
-		addSectionIssue(firstMove.contentFile, firstMove.section, {
-			severity: 'error',
-			message: `Cannot relocate "${firstMove.imageName}" because the same source file is referenced from multiple destinations: ${moves.map((move) => getExpectedImageLabel(move.contentFile, move.imageName)).join(', ')}.`,
-			fix: 'Duplicate the image manually or rename one of the image files so each move has a single destination.',
-		});
-	}
-
-	for (const moves of movesByDestination.values()) {
-		const sources = new Set(moves.map((move) => move.from));
-		if (sources.size <= 1) continue;
-
-		const firstMove = moves[0];
-		addSectionIssue(firstMove.contentFile, firstMove.section, {
-			severity: 'error',
-			message: `Cannot relocate "${firstMove.imageName}" because multiple source files would move to ${getExpectedImageLabel(firstMove.contentFile, firstMove.imageName)}: ${moves.map((move) => getCandidateLabel(move.sourceContentFile ? { contentFile: move.sourceContentFile, imagePath: move.from } : move)).join(', ')}.`,
-			fix: 'Move the intended file manually or rename files so the destination is unambiguous.',
-		});
-	}
-};
-
-const validateImageReference = async (
-	contentFile,
-	section,
-	reference,
-	globalImageCandidatesByName,
-	expectedReferencesByPath,
-) => {
-	const imageName = reference.image;
-	const expectedPath = getExpectedImagePath(contentFile, imageName);
-	const expectedLabel = getExpectedImageLabel(contentFile, imageName);
-	const expectedExists = await stat(expectedPath).then((entry) => entry.isFile()).catch(() => false);
-
-	if (expectedExists) {
-		referencedImagePaths.add(expectedPath);
-		return expectedPath;
-	}
-
-	const candidates = getGlobalImageCandidates(globalImageCandidatesByName, imageName, expectedPath);
-	if (candidates.length === 0) {
-		addSectionIssue(contentFile, section, {
-			severity: 'error',
-			message: `Image "${imageName}" does not exist at ${expectedLabel} or anywhere under any page image root.`,
-			fix: `Add the source image directly to ${contentFile.imagesLabel}/ or remove the Norna-managed image reference.`,
-		});
-		return null;
-	}
-
-	if (candidates.length > 1) {
-		addSectionIssue(contentFile, section, {
-			severity: 'error',
-			message: `Cannot relocate "${imageName}". Multiple files with this filename were found: ${candidates.map(getCandidateLabel).join(', ')}.`,
-			fix: 'Move the intended file manually or rename files so the move is unambiguous.',
-		});
-		return null;
-	}
-
-	const sourceCandidate = candidates[0];
-	const sourcePath = sourceCandidate.imagePath;
-	const referencesAtCurrentLocation = (expectedReferencesByPath.get(sourcePath) ?? [])
-		.filter((expectedReference) => expectedReference.contentFile !== contentFile);
-
-	if (referencesAtCurrentLocation.length > 0) {
-		addSectionIssue(contentFile, section, {
-			severity: 'error',
-			message: `Cannot relocate "${imageName}" from ${getCandidateLabel(sourceCandidate)} because it is still referenced from ${referencesAtCurrentLocation.map((expectedReference) => getReferenceLabel(expectedReference.contentFile, expectedReference.section)).join(', ')}.`,
-			fix: 'Remove the extra reference, duplicate the image file manually, or rename one of the image files so the intended move is unambiguous.',
-		});
-		return null;
-	}
-
-	if (!imageMoves.some((move) => move.from === sourcePath && move.to === expectedPath)) {
-		imageMoves.push({
-			imageName,
-			from: sourcePath,
-			to: expectedPath,
-			contentFile,
-			sourceContentFile: sourceCandidate.contentFile,
-			section,
-		});
-	}
-	referencedImagePaths.add(sourcePath);
-
-	if (!shouldWrite) {
-		addSectionIssue(contentFile, section, {
-			severity: 'error',
-			message: `Image "${imageName}" is used here but is located in ${getCandidateLabel(sourceCandidate)}.`,
-			fix: sourceCandidate.contentFile === contentFile
-				? 'Run norna content:sync to move it directly into the current page image root.'
-				: `Run norna content:sync to move it from ${getRootLabel(sourceCandidate.contentFile)} to ${getRootLabel(contentFile)}.`,
-		});
-	}
-
-	return sourcePath;
-};
-
 const warnAboutCarouselAspectRatios = async (contentFile, section, block, sourcePathsByImage) => {
 	if (block.type !== 'image-carousel') return;
 
@@ -378,19 +235,30 @@ for (const warning of siteStructure.warnings) {
 	});
 }
 const allImageFiles = [];
+const managedImageReferences = [];
 const contentFileContexts = [];
-const globalImageCandidatesByName = new Map();
-const globalExpectedReferencesByPath = new Map();
 
 for (const contentFile of contentFiles) {
-	const { frontmatter, body } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
+	const { frontmatter, frontmatterBody, body, source } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
 	const bodyLineOffset = frontmatter.split(/\r?\n/).length - 1;
+	const issueCountBeforeFrontmatter = issues.length;
 	validateFrontmatterIndentation(frontmatter, addIssue);
 	validateContentFrontmatterStructure(frontmatter, addIssue);
+	let frontmatterData = {};
+	if (!issues.slice(issueCountBeforeFrontmatter).some(({ severity }) => severity === 'error')) {
+		try {
+			frontmatterData = parseContentFrontmatter(frontmatterBody, contentFile.contentLabel);
+		} catch (error) {
+			addContentIssue(contentFile, {
+				severity: 'error',
+				message: error instanceof Error ? error.message : String(error),
+				fix: 'Correct the page frontmatter using the content reference and project-local schema help.',
+			});
+		}
+	}
 
-	const page = await parsePageMarkdown(body, {
+	const page = await parsePageMarkdownSource(source, {
 		label: contentFile.contentLabel,
-		lineOffset: bodyLineOffset,
 	});
 	const {
 		headingIssues: headingIdentifierIssues,
@@ -421,9 +289,7 @@ for (const contentFile of contentFiles) {
 
 	for (const [imageName, candidates] of imageCandidatesByName) {
 		for (const imagePath of candidates) {
-			const candidate = { contentFile, imagePath };
-			allImageFiles.push(candidate);
-			addGlobalImageCandidate(globalImageCandidatesByName, imageName, candidate);
+			allImageFiles.push({ contentFile, imageName, imagePath });
 		}
 	}
 
@@ -498,13 +364,14 @@ for (const contentFile of contentFiles) {
 		}
 
 		for (const reference of section.managedImages) {
-			const expectedPath = getExpectedImagePath(contentFile, reference.image);
-			addExpectedReference(globalExpectedReferencesByPath, expectedPath, { contentFile, section, reference });
+			managedImageReferences.push({ contentFile, section, reference });
 		}
 	}
 
 	contentFileContexts.push({
 		contentFile,
+		frontmatterData,
+		page,
 		sections,
 		validSections,
 		blockResultsBySection,
@@ -512,6 +379,44 @@ for (const contentFile of contentFiles) {
 	});
 }
 
+const siteLinkGraph = createSiteLinkGraph({
+	pageDocuments: contentFileContexts.map(({ contentFile, frontmatterData, page }) => ({
+		contentFile,
+		data: frontmatterData,
+		document: page,
+	})),
+	publicFiles: await getSitePublicFiles(),
+	siteStructure,
+});
+for (const issue of siteLinkGraph.diagnostics) {
+	addContentIssue(issue.reference?.sourceContentFile ?? issue.contentFile, issue);
+}
+
+const imageSyncPlan = createImageSyncPlan({
+	imageCandidates: allImageFiles,
+	references: managedImageReferences,
+	reportMisplaced: !shouldWrite,
+});
+const {
+	moves: imageMoves,
+	referencedImagePaths,
+	resolvedPathByReference,
+} = imageSyncPlan;
+const plannerIssuesByReference = new Map();
+const plannerConflictIssues = [];
+
+for (const plannerIssue of imageSyncPlan.issues) {
+	if (plannerIssue.phase === 'conflict') {
+		plannerConflictIssues.push(plannerIssue);
+		continue;
+	}
+
+	if (!plannerIssuesByReference.has(plannerIssue.reference)) {
+		plannerIssuesByReference.set(plannerIssue.reference, []);
+	}
+	plannerIssuesByReference.get(plannerIssue.reference).push(plannerIssue);
+}
+
 for (const context of contentFileContexts) {
 	const {
 		contentFile,
@@ -560,13 +465,11 @@ for (const context of contentFileContexts) {
 
 		const sourcePathsByImage = new Map();
 		for (const reference of section.managedImages) {
-			const sourcePath = await validateImageReference(
-				contentFile,
-				section,
-				reference,
-				globalImageCandidatesByName,
-				globalExpectedReferencesByPath,
-			);
+			for (const plannerIssue of plannerIssuesByReference.get(reference) ?? []) {
+				addSectionIssue(plannerIssue.contentFile, plannerIssue.section, plannerIssue.issue);
+			}
+
+			const sourcePath = resolvedPathByReference.get(reference);
 			if (sourcePath) {
 				sourcePathsByImage.set(reference.image, sourcePath);
 			}
@@ -578,13 +481,15 @@ for (const context of contentFileContexts) {
 	}
 }
 
+for (const plannerIssue of plannerConflictIssues) {
+	addSectionIssue(plannerIssue.contentFile, plannerIssue.section, plannerIssue.issue);
+}
+
 const unreferencedImages = allImageFiles
 	.filter(({ imagePath }) => !referencedImagePaths.has(imagePath))
 	.map(({ contentFile, imagePath }) => `${contentFile.imagesLabel}/${toPosixPath(path.relative(contentFile.imagesDir, imagePath))}`)
 	.sort((left, right) => left.localeCompare(right, 'sv'));
 
-addConflictingMoveIssues();
-
 if (hasErrors()) {
 	printReport(shouldWrite ? 'Content sync failed.' : 'Content check failed.', unreferencedImages);
 	process.exit(1);
@@ -609,47 +514,45 @@ if (!canWrite) {
 	process.exit(1);
 }
 
-const completedMoves = [];
-for (const [index, move] of imageMoves.entries()) {
-	try {
-		await mkdir(path.dirname(move.to), { recursive: true });
-		await rename(move.from, move.to);
-		completedMoves.push(move);
-		console.log(`Moved image "${move.imageName}" to ${move.contentFile.imagesLabel}/.`);
-	} catch (error) {
-		const sourceLabel = getCandidateLabel({ contentFile: move.sourceContentFile, imagePath: move.from });
-		const destinationLabel = getExpectedImageLabel(move.contentFile, move.imageName);
-		const remainingMoves = imageMoves.slice(index);
-		const lines = [
-			'',
-			`Content sync stopped after ${completedMoves.length} of ${imageMoves.length} image moves.`,
-		];
-
-		if (error?.code === 'EXDEV') {
-			lines.push(
-				`Cannot move "${move.imageName}" because the source and destination are on different filesystems.`,
-				`Move it manually from ${sourceLabel} to ${destinationLabel}.`,
-			);
-		} else {
-			lines.push(
-				`Could not move "${move.imageName}" from ${sourceLabel} to ${destinationLabel}.`,
-				`Filesystem error${error?.code ? ` (${error.code})` : ''}: ${error?.message ?? String(error)}`,
-			);
-		}
-
-		if (completedMoves.length > 0) {
-			lines.push('', 'Completed moves:', ...getMovePlanLines(completedMoves).slice(1));
-		}
+const applyResult = await applyImageSyncPlan(imageMoves);
+for (const move of applyResult.completedMoves) {
+	console.log(`Moved image "${move.imageName}" to ${move.contentFile.imagesLabel}/.`);
+}
 
+if (applyResult.failedMove) {
+	const move = applyResult.failedMove;
+	const error = applyResult.error;
+	const sourceLabel = getImageCandidateLabel({ contentFile: move.sourceContentFile, imagePath: move.from });
+	const destinationLabel = getExpectedImageLabel(move.contentFile, move.imageName);
+	const lines = [
+		'',
+		`Content sync stopped after ${applyResult.completedMoves.length} of ${imageMoves.length} image moves.`,
+	];
+
+	if (error?.code === 'EXDEV') {
 		lines.push(
-			'',
-			'Remaining moves:',
-			...getMovePlanLines(remainingMoves).slice(1),
-			'',
-			'Fix the reported filesystem problem, then run content:sync again. Already completed moves will be kept.',
+			`Cannot move "${move.imageName}" because the source and destination are on different filesystems.`,
+			`Move it manually from ${sourceLabel} to ${destinationLabel}.`,
 		);
+	} else {
+		lines.push(
+			`Could not move "${move.imageName}" from ${sourceLabel} to ${destinationLabel}.`,
+			`Filesystem error${error?.code ? ` (${error.code})` : ''}: ${error?.message ?? String(error)}`,
+		);
+	}
 
-		console.error(lines.join('\n'));
-		process.exit(1);
+	if (applyResult.completedMoves.length > 0) {
+		lines.push('', 'Completed moves:', ...getMovePlanLines(applyResult.completedMoves).slice(1));
 	}
+
+	lines.push(
+		'',
+		'Remaining moves:',
+		...getMovePlanLines(applyResult.remainingMoves).slice(1),
+		'',
+		'Fix the reported filesystem problem, then run content:sync again. Already completed moves will be kept.',
+	);
+
+	console.error(lines.join('\n'));
+	process.exit(1);
 }

package/scripts/sync-site-public.mjs

@@ -1,11 +1,14 @@
-import { cp, mkdir, readdir, rm } from 'node:fs/promises';
+import { cp, mkdir, readdir, rm, writeFile } from 'node:fs/promises';
 import path from 'node:path';
+import projectConfig from './lib/project-config.mjs';
+import { createSitemapXml, sitemapFilename } from './lib/sitemap.mjs';
 import {
 	astroPublicDir,
 	astroPublicLabel,
 	sitePublicDir,
 	sitePublicLabel,
 } from './lib/site-paths.mjs';
+import { getSiteStructure } from './lib/site-structure.mjs';
 
 const keepAstroPublicEntries = new Set(['images']);
 
@@ -21,6 +24,21 @@ const readDirectory = async (directory) => {
 	}
 };
 
+const sourceEntries = await readDirectory(sitePublicDir);
+const sitemapConflict = sourceEntries.find(({ name }) => name.toLowerCase() === sitemapFilename);
+if (sitemapConflict) {
+	throw new Error([
+		`${sitePublicLabel}/${sitemapConflict.name} conflicts with Norna's generated ${sitemapFilename}.`,
+		`Remove that source file. Norna generates ${sitemapFilename} from the public page tree and the URL in site/config.yaml.`,
+	].join('\n'));
+}
+
+const siteStructure = await getSiteStructure();
+const sitemapXml = createSitemapXml({
+	siteStructure,
+	siteUrl: projectConfig.site.url,
+});
+
 await mkdir(astroPublicDir, { recursive: true });
 
 for (const entry of await readDirectory(astroPublicDir)) {
@@ -31,7 +49,7 @@ for (const entry of await readDirectory(astroPublicDir)) {
 	await rm(path.join(astroPublicDir, entry.name), { force: true, recursive: true });
 }
 
-for (const entry of await readDirectory(sitePublicDir)) {
+for (const entry of sourceEntries) {
 	await cp(
 		path.join(sitePublicDir, entry.name),
 		path.join(astroPublicDir, entry.name),
@@ -39,4 +57,7 @@ for (const entry of await readDirectory(sitePublicDir)) {
 	);
 }
 
+await writeFile(path.join(astroPublicDir, sitemapFilename), sitemapXml);
+
 console.log(`Synced ${sitePublicLabel}/ to ${astroPublicLabel}/.`);
+console.log(`Generated ${astroPublicLabel}/${sitemapFilename} for ${siteStructure.contentFiles.length} public page${siteStructure.contentFiles.length === 1 ? '' : 's'}.`);

package/src/components/CodeBlockCopyScript.astro

@@ -0,0 +1,92 @@
+---
+import { Check, Copy, X } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+
+const labels = {
+	copy: projectConfig.locale.labels.copyCode,
+	copied: projectConfig.locale.labels.codeCopied,
+	failed: projectConfig.locale.labels.codeCopyFailed,
+};
+---
+
+<template data-code-copy-template>
+	<button class="code-block-copy" type="button" aria-label={labels.copy} title={labels.copy}>
+		<Copy aria-hidden="true" data-code-copy-icon="copy" size={18} stroke-width={2} />
+		<Check aria-hidden="true" data-code-copy-icon="copied" hidden size={18} stroke-width={2} />
+		<X aria-hidden="true" data-code-copy-icon="failed" hidden size={18} stroke-width={2} />
+		<span class="visually-hidden" aria-live="polite" data-code-copy-status></span>
+	</button>
+</template>
+
+<script is:inline define:vars={{ labels }}>
+	(() => {
+		const template = document.querySelector('[data-code-copy-template]');
+		if (!(template instanceof HTMLTemplateElement)) return;
+
+		const resetTimers = new WeakMap();
+		const copyText = async (text) => {
+			if (navigator.clipboard?.writeText) {
+				try {
+					await navigator.clipboard.writeText(text);
+					return;
+				} catch {}
+			}
+
+			const input = document.createElement('textarea');
+			input.value = text;
+			input.setAttribute('readonly', '');
+			input.style.cssText = 'position:fixed;inset:0 auto auto 0;opacity:0;pointer-events:none';
+			document.body.append(input);
+			input.select();
+			const copied = document.execCommand('copy');
+			input.remove();
+			if (!copied) throw new Error('The browser rejected the copy command.');
+		};
+
+		const showState = (button, state) => {
+			button.querySelectorAll('[data-code-copy-icon]').forEach((icon) => {
+				icon.hidden = icon.getAttribute('data-code-copy-icon') !== state;
+			});
+			const status = button.querySelector('[data-code-copy-status]');
+			if (status) status.textContent = state === 'copied' ? labels.copied : labels.failed;
+			button.dataset.copyState = state;
+
+			clearTimeout(resetTimers.get(button));
+			resetTimers.set(button, setTimeout(() => {
+				button.querySelectorAll('[data-code-copy-icon]').forEach((icon) => {
+					icon.hidden = icon.getAttribute('data-code-copy-icon') !== 'copy';
+				});
+				if (status) status.textContent = '';
+				delete button.dataset.copyState;
+			}, 2000));
+		};
+
+		document.querySelectorAll('#main-content .section-markdown pre > code').forEach((code) => {
+			const pre = code.parentElement;
+			if (!pre || pre.parentElement?.classList.contains('code-block')) return;
+
+			const wrapper = document.createElement('div');
+			wrapper.className = 'code-block';
+			pre.before(wrapper);
+			wrapper.append(pre);
+
+			const button = template.content.firstElementChild?.cloneNode(true);
+			if (!(button instanceof HTMLButtonElement)) return;
+			wrapper.append(button);
+			button.addEventListener('click', async () => {
+				if (button.dataset.copyBusy === 'true') return;
+				button.dataset.copyBusy = 'true';
+				try {
+					await copyText(code.textContent ?? '');
+					showState(button, 'copied');
+				} catch {
+					showState(button, 'failed');
+				} finally {
+					delete button.dataset.copyBusy;
+				}
+			});
+		});
+
+		template.remove();
+	})();
+</script>

package/src/components/DisplaySettings.astro

@@ -20,9 +20,9 @@ interface Props {
 const { controls, defaults } = Astro.props;
 const labels = projectConfig.locale.labels;
 const appearanceOptions = [
-	{ value: 'system', label: labels.colorModeSystem },
-	{ value: 'light', label: labels.colorModeLight },
-	{ value: 'dark', label: labels.colorModeDark },
+	{ value: 'system', label: labels.appearanceSystem },
+	{ value: 'light', label: labels.appearanceLight },
+	{ value: 'dark', label: labels.appearanceDark },
 ] as const;
 const widthOptions = [
 	{ value: 'narrow', label: labels.readingWidthNarrow },
@@ -51,7 +51,7 @@ const widthOptions = [
 
 		{controls.appearance && (
 			<fieldset>
-				<legend>{labels.colorMode}</legend>
+				<legend>{labels.appearance}</legend>
 				<div class="display-settings-segmented">
 					{appearanceOptions.map((option) => (
 						<label>

package/src/components/ImageCarousel.astro

@@ -17,7 +17,7 @@ interface Props {
 		desktop: number;
 		mobile: number;
 	};
-	maxAvailableHeightPercent: {
+	maxAvailableHeightPercent?: {
 		desktop: number;
 		mobile: number;
 	};
@@ -36,8 +36,12 @@ const carouselAspectRatio = getCarouselAspectRatio(images);
 const carouselStyle = carouselAspectRatio
 	? [
 		`--image-carousel-aspect-ratio: ${carouselAspectRatio}`,
-		`--image-carousel-width-from-height-desktop: ${carouselAspectRatio * maxAvailableHeightPercent.desktop}svh`,
-		`--image-carousel-width-from-height-mobile: ${carouselAspectRatio * maxAvailableHeightPercent.mobile}svh`,
+		...(maxAvailableHeightPercent
+			? [
+				`--image-carousel-width-from-height-desktop: ${carouselAspectRatio * maxAvailableHeightPercent.desktop}svh`,
+				`--image-carousel-width-from-height-mobile: ${carouselAspectRatio * maxAvailableHeightPercent.mobile}svh`,
+			]
+			: []),
 	].join('; ')
 	: undefined;
 ---