@janga/norna 0.7.8 → 0.7.10

package/scripts/test-content-check.mjs

@@ -45,8 +45,8 @@ const makePngHeader = ({ width, height }) => {
 const defaultTheme = `---
 typography:
   preset: quiet-gallery
-frame:
-  colors: presentation
+presentation:
+  palette: dark
 ---
 `;
 
@@ -173,14 +173,6 @@ test('content:check warns when carousel images use different aspect ratios', asy
 	});
 });
 
-const inlineStyleTheme = `---
-presentation:
-  inlineStyles:
-    highlight:
-      color: "#ffd84d"
----
-`;
-
 const inlineStyleSite = `---
 title: Inline Style
 ---
@@ -188,10 +180,9 @@ title: Inline Style
 This has [known text]{.highlight} and [unknown text]{.missing}.
 `;
 
-test('content:check fails when Markdown uses undefined inline styles', async () => {
+test('content:check fails when Markdown uses removed inline color styles', async () => {
 	await withTempProject({
 		site: inlineStyleSite,
-		theme: inlineStyleTheme,
 		files: [],
 	}, async (root) => {
 		const result = runContentScript(root, ['--check']);
@@ -199,8 +190,79 @@ test('content:check fails when Markdown uses undefined inline styles', async ()
 
 		assert.equal(result.status, 1, output);
 		assert.match(output, /^Content check failed\./m);
-		assert.match(output, /Inline style "\.missing" is used in site\/content\.md but is not defined in site\/theme\.md presentation\.inlineStyles\./);
-		assert.doesNotMatch(output, /"\.highlight" is used in Markdown/);
+		assert.match(output, /Inline color style "\.highlight" is no longer supported in site\/content\.md\./);
+		assert.match(output, /Inline color style "\.missing" is no longer supported in site\/content\.md\./);
+	});
+});
+
+test('content:check suggests semantic Markdown instead of inline color styles', async () => {
+	await withTempProject({
+		site: `---
+title: Invalid Inline Color
+---
+## Intro {#intro}
+This has [yellow text]{.yellow}.
+`,
+		files: [],
+	}, async (root) => {
+		const result = runContentScript(root, ['--check']);
+		const output = getOutput(result);
+
+		assert.equal(result.status, 1, output);
+		assert.match(output, /^Content check failed\./m);
+		assert.match(output, /Use standard Markdown emphasis, a blockquote, or a semantic Norna block instead of color syntax\./);
+	});
+});
+
+const inlineNoteSite = `---
+title: Inline notes
+description: Fixture
+---
+## Intro {#intro}
+This paragraph has a note reference.{note-ref}
+
+{note: Additional context.}
+
+\`\`\`text
+{note-ref}
+{note: This is code, not a note.
+\`\`\`
+`;
+
+test('content:check accepts valid inline notes and ignores note syntax in code fences', async () => {
+	await withTempProject({ site: inlineNoteSite, files: [] }, async (root) => {
+		const result = runContentScript(root, ['--check']);
+		const output = getOutput(result);
+
+		assert.equal(result.status, 0, output);
+		assert.match(output, /Content check passed\./);
+	});
+});
+
+test('content:check rejects unpaired and repeated inline notes', async () => {
+	await withTempProject({
+		site: `---
+title: Invalid inline notes
+description: Fixture
+---
+## Orphan {#orphan}
+{note: This note has no reference.}
+
+## Missing {#missing}
+This reference has no note.{note-ref}
+
+## Repeated {#repeated}
+This paragraph has {note-ref} two references {note-ref}.
+`,
+		files: [],
+	}, async (root) => {
+		const result = runContentScript(root, ['--check']);
+		const output = getOutput(result);
+
+		assert.equal(result.status, 1, output);
+		assert.match(output, /A "\{note: \.\.\.\}" requires a preceding paragraph containing "\{note-ref\}"\./);
+		assert.match(output, /contains "\{note-ref\}" but has no following "\{note: \.\.\.\}"/);
+		assert.match(output, /A paragraph may contain only one "\{note-ref\}"\./);
 	});
 });
 

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,29 +185,38 @@ 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
 description: Site used by package checks.
 sections:
   intro: {}
+  warning: {}
   work: {}
 ---
 
 ## 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** {#warning}
+
+This section verifies styled section headings.
+
 ## Work {#work}
 
 This section keeps the package check independent from user-facing starter copy.
@@ -257,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',
@@ -283,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'),
@@ -293,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',
@@ -313,21 +339,37 @@ 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'),
+		'data-section-title="Warning"',
+	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'class="inline-style inline-style-highlight" style="--inline-style-color: #ffd84d"',
+		'href="/site/#warning">Warning</a>',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'--section-background-color: #000000',
 	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'--section-background-color: #171717',
+	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'--section-background-color: #252525',
+	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'--site-top-background-color: #000000',
 	);
 	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'),
@@ -335,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 });
@@ -365,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(
@@ -405,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,
@@ -418,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,
@@ -431,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 = [