@janga/norna 0.7.9 → 0.7.10

package/scripts/test-content-model-v2.mjs

@@ -129,6 +129,99 @@ test('content model v2 fixture checks and builds', async () => {
 	}
 });
 
+test('route theme replaces visual theme while site identity stays at the root', async () => {
+	const { root, siteDir } = await createTempSite({ underRepoCache: true });
+	try {
+		await writeFile(path.join(siteDir, 'theme.md'), `---
+typography:
+  preset: text-forward
+---
+`);
+		await writeFile(path.join(siteDir, 'sitewide-content.md'), `---
+navigation:
+  brand: Root Brand
+---
+`);
+		await mkdir(path.join(siteDir, 'routes', '010-guide'), { recursive: true });
+		await writeFile(path.join(siteDir, 'content.md'), `---
+title: Root
+description: Root page
+---
+
+## Home {#home}
+
+Root content.
+`);
+		await writeFile(path.join(siteDir, 'routes', '010-guide', 'route-content.md'), `---
+title: Guide
+description: Guide page
+navigation:
+  label: Guide
+---
+
+## Guide {#guide}
+
+Route content.
+`);
+		await writeFile(path.join(siteDir, 'routes', '010-guide', 'theme.md'), `---
+typography:
+  preset: statement
+presentation:
+  palette: light
+---
+`);
+
+		await runNorna(['--site-dir', siteDir, 'build']);
+		const rootHtml = await readFile(path.join(path.dirname(siteDir), 'dist', 'index.html'), 'utf8');
+		const routeHtml = await readFile(path.join(path.dirname(siteDir), 'dist', 'guide', 'index.html'), 'utf8');
+		assert.match(rootHtml, /--color-page: #000000/);
+		assert.match(routeHtml, /--color-page: #ffffff/);
+		assert.match(routeHtml, /<a class="site-brand" href="\/">Root Brand<\/a>/);
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
+
+test('route theme cannot define site identity', async () => {
+	const { root, siteDir } = await createTempSite({ underRepoCache: true });
+	try {
+		await mkdir(path.join(siteDir, 'routes', '010-guide'), { recursive: true });
+		await writeFile(path.join(siteDir, 'content.md'), `---
+title: Root
+description: Root page
+---
+
+## Home {#home}
+
+Root content.
+`);
+		await writeFile(path.join(siteDir, 'routes', '010-guide', 'route-content.md'), `---
+title: Guide
+description: Guide page
+---
+
+## Guide {#guide}
+
+Route content.
+`);
+		await writeFile(path.join(siteDir, 'routes', '010-guide', 'theme.md'), `---
+navigation:
+  brand: Route Brand
+---
+`);
+
+		await assert.rejects(
+			runNorna(['--site-dir', siteDir, 'config:check']),
+			(error) => {
+				assert.match(error.output, /may not define navigation\. Brand and logo belong in site\/sitewide-content\.md/);
+				return true;
+			},
+		);
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
+
 test('content:check warns for local Markdown images but not external Markdown images', async () => {
 	const { root, siteDir } = await createTempSite();
 	try {
@@ -189,6 +282,40 @@ description: Fixture
 	}
 });
 
+test('inline notes render as linked numbered margin notes', async () => {
+	const { root, siteDir } = await createTempSite({ underRepoCache: true });
+	try {
+		await writeFile(path.join(siteDir, 'content.md'), `---
+title: Inline notes
+description: Fixture
+---
+
+## Intro {#intro}
+
+The first paragraph points to an explanation.{note-ref}
+
+{note: This explanation names \`sitewide-content.md\` and stays beside the paragraph on wide screens.}
+
+The second paragraph has its own explanation.{note-ref}
+
+{note: This is the second explanation.}
+`);
+
+		await runNorna(['--site-dir', siteDir, 'build']);
+		const html = await readFile(path.join(path.dirname(siteDir), 'dist', 'index.html'), 'utf8');
+		assert.match(html, /<sup class="section-note-ref"><a id="note-ref-home-intro-1" href="#note-home-intro-1" aria-label="Note 1" aria-describedby="note-home-intro-1" data-note-id="note-home-intro-1">1<\/a><\/sup>/);
+		assert.match(html, /<aside class="section-note section-note-margin" id="note-home-intro-1" aria-label="Note 1" role="note" data-note-id="note-home-intro-1" style="grid-row: 1;">/);
+		assert.match(html, /<a class="section-note-number" href="#note-ref-home-intro-1" aria-label="Note 1">\s*1\s*<\/a>/);
+		assert.match(html, /This explanation names <code>sitewide-content\.md<\/code> and stays beside the paragraph on wide screens\./);
+		assert.match(html, /<sup class="section-note-ref"><a id="note-ref-home-intro-2" href="#note-home-intro-2" aria-label="Note 2" aria-describedby="note-home-intro-2" data-note-id="note-home-intro-2">2<\/a><\/sup>/);
+		assert.match(html, /<aside class="section-note section-note-margin" id="note-home-intro-2" aria-label="Note 2" role="note" data-note-id="note-home-intro-2" style="grid-row: 2;">/);
+		assert.match(html, /This is the second explanation\./);
+		assert.doesNotMatch(html, /\{note:/);
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
+
 test('updated managed SVG images get updated static output', async () => {
 	const { root, siteDir } = await createTempSite();
 	try {
@@ -842,6 +969,33 @@ description: Fixture
 	}
 });
 
+test('content:check rejects the removed norna-note block', async () => {
+	const { root, siteDir } = await createTempSite();
+	try {
+		await writeFile(path.join(siteDir, 'content.md'), `---
+title: Removed note block
+description: Fixture
+---
+
+## Intro {#intro}
+
+\`\`\`norna-note
+This block is no longer supported.
+\`\`\`
+`);
+
+		await assert.rejects(
+			() => runContentScript(siteDir, ['--check']),
+			(error) => {
+				assert.match(error.output, /Unknown Norna block "norna-note"\. Use one of: norna-image-stack, norna-image-carousel, norna-card-list\./);
+				return true;
+			},
+		);
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
+
 test('content:check supports tilde fenced Norna blocks', async () => {
 	const { root, siteDir } = await createTempSite();
 	try {

package/scripts/test-engine-commands.mjs

@@ -57,8 +57,10 @@ try {
 	for (const [presetName, preset] of Object.entries(typographyPresets)) {
 		for (const [level, heading] of Object.entries(preset.headings)) {
 			assert.equal(heading.size, 'medium', `${presetName} ${level} should use medium size`);
+			assert.ok([400, 500, 600, 700].includes(heading.weight), `${presetName} ${level} should use a supported weight`);
 		}
 		assert.equal(preset.body.size, 'medium', `${presetName} body should use medium size`);
+		assert.ok(['narrow', 'normal', 'wide'].includes(preset.body.width), `${presetName} body should use a supported width`);
 		assert.equal(preset.caption.size, 'medium', `${presetName} caption should use medium size`);
 	}
 	for (const [rhythmName, rhythm] of Object.entries(typographyRhythms)) {
@@ -76,7 +78,7 @@ try {
 	assert.match(showResult.stdout, /pages:/);
 	assert.match(showResult.stdout, /\s+\/:/);
 	assert.match(showResult.stdout, /value: quiet-gallery/);
-	assert.match(showResult.stdout, /inherited: true/);
+	assert.match(showResult.stdout, /source: "site\/theme\.md"/);
 	assert.match(showResult.stdout, /intro:/);
 
 	const initAgainResult = runCli(['init', initializedSiteRoot]);

package/scripts/test-package-check.mjs

@@ -160,6 +160,7 @@ try {
 		assertFileExists(path.join(packagedStarterRoot, 'README.md')),
 		assertFileExists(path.join(packagedStarterRoot, 'site', 'config.mjs')),
 		assertFileExists(path.join(packagedStarterRoot, 'site', 'theme.md')),
+		assertFileExists(path.join(packagedStarterRoot, 'site', 'sitewide-content.md')),
 		assertFileExists(path.join(packagedStarterRoot, 'site', 'content.md')),
 		assertFileExists(path.join(packagedStarterRoot, 'site', 'images', 'work', '.gitkeep')),
 		assertFileExists(path.join(packagedStarterRoot, 'site', 'public', 'robots.txt')),
@@ -184,11 +185,15 @@ try {
 			.replace("url: 'https://example.com/'", "url: 'https://example.com/site/'")
 			.replace("basePath: '/'", "basePath: '/site/'"),
 	);
-	const packageCheckThemePath = path.join(siteProjectRoot, 'site', 'theme.md');
-	const packageCheckTheme = await readFile(packageCheckThemePath, 'utf8');
+	const packageCheckSitewidePath = path.join(siteProjectRoot, 'site', 'sitewide-content.md');
+	const packageCheckSitewide = await readFile(packageCheckSitewidePath, 'utf8');
 	await writeFile(
-		packageCheckThemePath,
-		packageCheckTheme.replace('brand: Example Site', 'brand: Package Check Brand'),
+		packageCheckSitewidePath,
+		packageCheckSitewide.replace('brand: Example Site', 'brand: Package Check Brand\n  logo:\n    alt: Package Check Logo\n    height: 2.6rem'),
+	);
+	await writeFile(
+		path.join(siteProjectRoot, 'site', 'public', 'logo.svg'),
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="black"/></svg>\n',
 	);
 	await writeFile(path.join(siteProjectRoot, 'site', 'content.md'), `---
 title: Package Check Site
@@ -201,14 +206,14 @@ sections:
 
 ## Intro {#intro}
 
-This page verifies that [packaged norna sites]{.highlight} can build with the current content model.
+This page verifies that **packaged norna sites** can build with the current content model.
 
 <!-- norna-image-provenance:
 image: package-check.svg
 source: package check fixture
 -->
 
-## [**Warning**]{.highlight} {#warning}
+## **Warning** {#warning}
 
 This section verifies styled section headings.
 
@@ -262,6 +267,10 @@ This route verifies that packaged norna sites can build route pages.
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'--section-heading-font-size-desktop: clamp(1.35rem, 1.1rem + 0.9vw, 2rem)',
 	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'--section-heading-font-weight: 400',
+	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'--section-heading-spacing-after: 0.55em',
@@ -288,7 +297,15 @@ This route verifies that packaged norna sites can build route pages.
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'<a class="site-brand" href="/site/">Package Check Brand</a>',
+		'<a class="site-brand" href="/site/"><img class="site-brand-logo" src="/site/logo.svg" alt="Package Check Logo">',
+	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'<div class="site-nav-submenu">',
+	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'href="/site/#intro">Intro</a>',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -298,6 +315,10 @@ This route verifies that packaged norna sites can build route pages.
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'--section-body-line-height: 1.5',
 	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'--section-body-width-desktop: min(72ch, var(--text-width))',
+	);
 	await assertFileExcludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'norna-image-provenance',
@@ -318,25 +339,29 @@ This route verifies that packaged norna sites can build route pages.
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'--section-caption-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
 	);
+	await assertFileExcludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'class="inline-style',
+	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'class="inline-style inline-style-highlight" style="--inline-style-color: #ffd84d"',
+		'data-section-title="Warning"',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'<h2><span class="inline-style inline-style-highlight" style="--inline-style-color: #ffd84d"><strong>Warning</strong></span></h2>',
+		'href="/site/#warning">Warning</a>',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'data-section-title="Warning"',
+		'--section-background-color: #000000',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'href="#warning">Warning</a>',
+		'--section-background-color: #171717',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'--section-background-color: #000000',
+		'--section-background-color: #252525',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -344,7 +369,7 @@ This route verifies that packaged norna sites can build route pages.
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'--site-top-text-color: #f7f4ee',
+		'--site-top-text-color: #f2eee6',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -352,11 +377,11 @@ This route verifies that packaged norna sites can build route pages.
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'--site-footer-text-color: #f7f4ee',
+		'--site-footer-text-color: #f2eee6',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'--section-text-color: #f7f4ee',
+		'--section-text-color: #f2eee6',
 	);
 	await writeFile(path.join(siteProjectRoot, 'site', 'public', 'favicon.ico'), 'fake icon');
 	await runInherit(npxBin, ['norna', 'build'], { cwd: siteProjectRoot, env: npmEnv });
@@ -382,35 +407,52 @@ This route verifies that packaged norna sites can build route pages.
 	);
 	await writeFile(
 		siteThemePath,
-		siteTheme.replace('backgroundColor: "#000000"', 'backgroundColor: blue'),
+		siteTheme.replace('\n  palette: dark', '\n  palette: neon'),
 	);
 	await runExpectFailure(
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'presentation.backgroundColor',
+		'presentation.palette',
 	);
 	await writeFile(
 		siteThemePath,
-		siteTheme.replace('textColor: "#f7f4ee"', 'textColor: white'),
+		siteTheme.replace('  sectionSurfaces:\n    mode: cycle', '  sectionSurfaces:\n    mode: glowing'),
 	);
 	await runExpectFailure(
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'presentation.textColor',
+		'presentation.sectionSurfaces.mode',
 	);
 	await writeFile(
 		siteThemePath,
-		siteTheme.replace('      color: "#ffd84d"', '      color: yellow'),
+		siteTheme.replace(
+			'  sectionSurfaces:\n    mode: cycle',
+			'  sectionSurfaces:\n    mode: cycle\n    sequence: [base, base]',
+		),
 	);
 	await runExpectFailure(
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'presentation.inlineStyles.highlight.color',
+		'presentation.sectionSurfaces',
 	);
 	await writeFile(siteThemePath, siteTheme);
+	await writeFile(
+		siteContentPath,
+		siteContent.replace(
+			'This page verifies that **packaged norna sites** can build with the current content model.',
+			'This page verifies that [packaged norna sites]{.highlight} can build with the current content model.',
+		),
+	);
+	await runExpectFailure(
+		npxBin,
+		['norna', 'build'],
+		{ cwd: siteProjectRoot, env: npmEnv },
+		'Inline color style ".highlight" is no longer supported',
+	);
+	await writeFile(siteContentPath, siteContent);
 	await writeFile(
 		siteContentPath,
 		siteContent.replace(
@@ -422,7 +464,7 @@ This route verifies that packaged norna sites can build route pages.
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'presentation.typography.overrides.body.lineHeight',
+		'presentation',
 	);
 	await writeFile(
 		siteContentPath,
@@ -435,7 +477,7 @@ This route verifies that packaged norna sites can build route pages.
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'sections.intro.presentation.typography.overrides.caption.spacingBefore',
+		'sections.intro: Unrecognized key: "presentation"',
 	);
 	await writeFile(
 		siteContentPath,
@@ -448,7 +490,7 @@ This route verifies that packaged norna sites can build route pages.
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'sections.intro.presentation.typography.preset',
+		'sections.intro: Unrecognized key: "presentation"',
 	);
 	await writeFile(
 		siteThemePath,

package/scripts/test-temporary-visibility.mjs

@@ -51,8 +51,23 @@ try {
 	await writeFile(path.join(siteDir, 'theme.md'), `---
 typography:
   preset: quiet-gallery
-frame:
-  colors: presentation
+presentation:
+  palette: dark
+---
+`);
+	await writeFile(path.join(siteDir, 'sitewide-content.md'), `---
+banners:
+  - id: expired-banner
+    visible:
+      until: "2026-01-01"
+    title: Expired banner
+    text: Expired banner text.
+  - id: active-banner
+    visible:
+      from: "2026-01-01"
+      until: "2026-12-31"
+    title: Active banner
+    text: Active banner text.
 ---
 `);
 	await writeFile(path.join(siteDir, 'content.md'), `---
@@ -88,6 +103,8 @@ Always visible section text.
 	assert.match(html, /Active section text/);
 	assert.match(html, /Always visible section text/);
 	assert.doesNotMatch(html, /Expired section text/);
+	assert.match(html, /Active banner text/);
+	assert.doesNotMatch(html, /Expired banner text/);
 
 	console.log('Temporary visibility test passed.');
 } finally {

package/src/components/CardList.astro

@@ -18,16 +18,19 @@ type CardListWidth = 'text' | 'narrow' | 'normal' | 'wide';
 
 interface Props {
 	cards: Card[];
+	maxAvailableWidthPercent: {
+		desktop: number;
+	};
 	layout?: CardListLayout;
 	flow?: CardListFlow;
 	size?: CardListSize;
 	width?: CardListWidth;
 }
 
-const { cards, layout = 'image-top', flow = 'grid', size = 'm', width = 'normal' } = Astro.props;
+const { cards, maxAvailableWidthPercent, layout = 'image-top', flow = 'grid', size = 'm', width = 'normal' } = Astro.props;
 const cardImageSizes = [
 	'(max-width: 700px) 100vw',
-	`min(20rem, ${projectConfig.gallery.maxAvailableWidthPercent.desktop}vw)`,
+	`min(20rem, ${maxAvailableWidthPercent.desktop}vw)`,
 ].join(', ');
 const displayLink = (link: string) => withBasePath(projectConfig.site.basePath, link);
 const cardListClasses = [

package/src/components/GalleryGrid.astro

@@ -17,13 +17,25 @@ type GeneratedImageWithDimensions = NonNullable<ReturnType<typeof getGeneratedIm
 interface Props {
 	title: string;
 	items: GalleryItem[];
+	maxAvailableWidthPercent: {
+		desktop: number;
+		mobile: number;
+	};
 	priorityFirstImage?: boolean;
 }
 
-const { title, items, priorityFirstImage = false } = Astro.props;
+const { title, items, maxAvailableWidthPercent, priorityFirstImage = false } = Astro.props;
+const getCaptionId = (image: GalleryImage, itemIndex: number, imageIndex = 0) => {
+	const source = (image.src ?? image.image)
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, '-')
+		.replace(/^-|-$/g, '');
+
+	return `gallery-caption-${source}-${itemIndex}-${imageIndex}`;
+};
 const galleryImageSizes = [
-	`(max-width: 700px) ${projectConfig.gallery.maxAvailableWidthPercent.mobile}vw`,
-	`${projectConfig.gallery.maxAvailableWidthPercent.desktop}vw`,
+	`(max-width: 700px) ${maxAvailableWidthPercent.mobile}vw`,
+	`${maxAvailableWidthPercent.desktop}vw`,
 ].join(', ');
 const hasDimensions = (image: ReturnType<typeof getGeneratedImage>): image is GeneratedImageWithDimensions => (
 	Boolean(image) && Number.isFinite(image.width) && Number.isFinite(image.height)
@@ -54,6 +66,8 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 		const isPriorityItem = priorityFirstImage && itemIndex === 0;
 
 		if ('image' in item) {
+			const captionId = item.caption ? getCaptionId(item, itemIndex) : undefined;
+
 			return (
 				<figure class="gallery-item">
 					<div class="gallery-image-frame">
@@ -61,11 +75,12 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 							{...getImageAttributes(item.src ?? item.image, galleryImageSizes)}
 							class:list={['gallery-image', getImageClass(item)]}
 							alt={item.alt ?? ''}
+							aria-describedby={captionId}
 							{...getImageLoadingProps(isPriorityItem)}
 						/>
 					</div>
 					{item.caption && (
-						<figcaption class="gallery-meta">
+						<figcaption class="gallery-meta" id={captionId}>
 							<div class="gallery-details">
 								<span>{item.caption}</span>
 							</div>
@@ -93,18 +108,23 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 				<div class="gallery-carousel-stage">
 					<div class="gallery-carousel-viewport" data-carousel-viewport>
 						<div class="gallery-carousel-slides">
-							{item.carousel.map((image, imageIndex) => (
-								<figure class="gallery-carousel-slide" data-carousel-slide>
-									<div class="gallery-carousel-image-frame">
-										<img
-											{...getImageAttributes(image.src ?? image.image, galleryImageSizes)}
-											class:list={['gallery-image', getImageClass(image)]}
-											alt={image.alt ?? ''}
-											{...getImageLoadingProps(isPriorityItem && imageIndex === 0)}
-										/>
-									</div>
-								</figure>
-							))}
+							{item.carousel.map((image, imageIndex) => {
+								const captionId = image.caption ? getCaptionId(image, itemIndex, imageIndex) : undefined;
+
+								return (
+									<figure class="gallery-carousel-slide" data-carousel-slide>
+										<div class="gallery-carousel-image-frame">
+											<img
+												{...getImageAttributes(image.src ?? image.image, galleryImageSizes)}
+												class:list={['gallery-image', getImageClass(image)]}
+												alt={image.alt ?? ''}
+												aria-describedby={captionId}
+												{...getImageLoadingProps(isPriorityItem && imageIndex === 0)}
+											/>
+										</div>
+									</figure>
+								);
+							})}
 						</div>
 					</div>
 					<button
@@ -134,6 +154,7 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 						image.caption && (
 							<p
 								class="gallery-meta gallery-carousel-caption"
+								id={getCaptionId(image, itemIndex, imageIndex)}
 								data-carousel-caption
 								data-carousel-caption-index={imageIndex}
 							>

package/src/components/SiteBanners.astro

@@ -0,0 +1,100 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+
+type Banner = {
+	id: string;
+	tone: 'warning';
+	title: string;
+	text: string;
+	visible?: {
+		from?: string;
+		until?: string;
+	};
+};
+
+interface Props {
+	banners: Banner[];
+}
+
+const { banners } = Astro.props;
+const hashBanner = (banner: Banner) => {
+	const value = [
+		banner.id,
+		banner.tone,
+		banner.title,
+		banner.text,
+		banner.visible?.from ?? '',
+		banner.visible?.until ?? '',
+	].join('\u001f');
+	let hash = 0;
+
+	for (const character of value) {
+		hash = ((hash << 5) - hash + character.charCodeAt(0)) | 0;
+	}
+
+	return (hash >>> 0).toString(36);
+};
+const getStorageKey = (banner: Banner) => `norna-banner:${banner.id}:${hashBanner(banner)}`;
+const dismissBannerLabel = projectConfig.locale.labels.dismissBanner;
+const siteBannersLabel = projectConfig.locale.labels.siteBanners;
+---
+
+{banners.length > 0 && (
+	<aside class="site-banners" aria-label={siteBannersLabel}>
+		{banners.map((banner) => {
+			const storageKey = getStorageKey(banner);
+			const dismissLabel = `${dismissBannerLabel}: ${banner.title}`;
+
+			return (
+				<article
+					class:list={['site-banner', `site-banner-${banner.tone}`]}
+					data-norna-banner
+					data-banner-key={storageKey}
+					role="status"
+				>
+					<div class="site-banner-copy">
+						<p class="site-banner-title">{banner.title}</p>
+						<p class="site-banner-text">{banner.text}</p>
+					</div>
+					<button class="site-banner-dismiss" type="button" data-dismiss-banner aria-label={dismissLabel} title={dismissLabel}>
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</article>
+			);
+		})}
+	</aside>
+)}
+
+<script is:inline>
+	(() => {
+		const storagePrefix = 'norna-banner:';
+		const banners = Array.from(document.querySelectorAll('[data-norna-banner]'));
+
+		banners.forEach((banner) => {
+			const storageKey = banner.getAttribute('data-banner-key');
+			const dismissButton = banner.querySelector('[data-dismiss-banner]');
+
+			if (!storageKey || !(dismissButton instanceof HTMLButtonElement)) return;
+
+			try {
+				if (localStorage.getItem(storageKey) === 'dismissed') {
+					banner.hidden = true;
+				}
+			} catch {
+				// Private browsing modes may deny storage; the banner remains usable.
+			}
+
+			dismissButton.addEventListener('click', () => {
+				try {
+					if (storageKey.startsWith(storagePrefix)) {
+						localStorage.setItem(storageKey, 'dismissed');
+					}
+				} catch {
+					// Dismissing still works for the current page when storage is unavailable.
+				}
+
+				banner.hidden = true;
+			});
+		});
+	})();
+</script>