@janga/norna 0.7.7 → 0.7.9

package/scripts/test-content-check.mjs

@@ -129,7 +129,7 @@ test('content:check groups section issues, global issues, and unreferenced image
 		assert.match(output, /^Content check failed\./m);
 		assert.match(output, /Content Issues\n\n\[site\/content\.md \[min-konst\]\]\n  Errors:/);
 		assert.match(output, /Image "vav\.jpeg" is used here but is located in site\/images\/mitt-hem\/vav\.jpeg\./);
-		assert.match(output, /Image "missing\.jpeg" does not exist at site\/images\/min-konst\/missing\.jpeg or anywhere under site\/images\/\./);
+		assert.match(output, /Image "missing\.jpeg" does not exist at site\/images\/min-konst\/missing\.jpeg or anywhere under any page or route image root\./);
 		assert.match(output, /Unreferenced Images\nThese files are kept under page or route image roots but are not referenced by Norna-managed image references:/);
 		assert.match(output, /site\/images\/karin-walde\/unreferenced\.jpg/);
 	});
@@ -204,6 +204,36 @@ test('content:check fails when Markdown uses undefined inline styles', async ()
 	});
 });
 
+const invalidInlineStyleColorTheme = `---
+presentation:
+  inlineStyles:
+    yellow:
+      color: "#ffd844d"
+---
+`;
+
+test('content:check explains invalid inline style colors', async () => {
+	await withTempProject({
+		site: `---
+title: Invalid Inline Color
+---
+## Intro {#intro}
+This has [yellow text]{.yellow}.
+`,
+		theme: invalidInlineStyleColorTheme,
+		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, /site\/theme\.md line 5 defines presentation\.inlineStyles\.yellow\.color with invalid color value "#ffd844d"\./);
+		assert.match(output, /Use a quoted hex color in #rgb, #rrggbb, or #rrggbbaa form, for example color: "#ffd84d"\./);
+		assert.doesNotMatch(output, /Inline style "\.yellow" is used in site\/content\.md but is not defined/);
+	});
+});
+
 const badWhitespaceSite = `---
 presentation:
   typography:

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

@@ -73,6 +73,26 @@ typography:
 
 const fileExists = async (filePath) => access(filePath).then(() => true, () => false);
 
+const runGit = async (cwd, args) => execFileAsync('git', args, {
+	cwd,
+	env: {
+		...process.env,
+		GIT_AUTHOR_NAME: 'Norna Test',
+		GIT_AUTHOR_EMAIL: 'norna@example.test',
+		GIT_COMMITTER_NAME: 'Norna Test',
+		GIT_COMMITTER_EMAIL: 'norna@example.test',
+	},
+	maxBuffer: 1024 * 1024,
+});
+
+const initCleanGitWorktree = async (root) => {
+	await runGit(root, ['init']);
+	await runGit(root, ['config', 'user.email', 'norna@example.test']);
+	await runGit(root, ['config', 'user.name', 'Norna Test']);
+	await runGit(root, ['add', '.']);
+	await runGit(root, ['commit', '-m', 'initial']);
+};
+
 const createTempFixtureCopy = async () => {
 	const tempParent = path.join(repoRoot, 'node_modules', '.cache');
 	await mkdir(tempParent, { recursive: true });
@@ -310,7 +330,7 @@ description: Fixture
 		await assert.rejects(
 			() => runContentScript(siteDir, ['--check']),
 			(error) => {
-				assert.match(error.output, /Image "missing\.svg" does not exist at .*site\/images\/help\/missing\.svg or anywhere under .*site\/images\//);
+				assert.match(error.output, /Image "missing\.svg" does not exist at .*site\/images\/help\/missing\.svg or anywhere under any page or route image root\./);
 				return true;
 			},
 		);
@@ -493,6 +513,218 @@ description: Fixture
 	}
 });
 
+test('content:sync moves Norna-managed images across route image roots when git is clean', async () => {
+	const { root, siteDir } = await createTempSite();
+	try {
+		const sourceRouteDir = path.join(siteDir, 'routes', '010-source');
+		const targetRouteDir = path.join(siteDir, 'routes', '020-target');
+		await mkdir(path.join(sourceRouteDir, 'images', 'old'), { recursive: true });
+		await mkdir(targetRouteDir, { recursive: true });
+		await writeFile(path.join(siteDir, 'content.md'), `---
+title: Cross Route Sync
+description: Fixture
+---
+
+## Home {#home}
+
+Text.
+`);
+		await writeFile(path.join(sourceRouteDir, 'route-content.md'), `---
+title: Source
+description: Fixture
+---
+
+## Old {#old}
+
+Text.
+`);
+		await writeFile(path.join(targetRouteDir, 'route-content.md'), `---
+title: Target
+description: Fixture
+---
+
+## Work {#work}
+
+\`\`\`norna-image-stack
+- image: moved.jpg
+\`\`\`
+`);
+		await writeFile(path.join(sourceRouteDir, 'images', 'old', 'moved.jpg'), 'route image');
+		await initCleanGitWorktree(root);
+
+		await runContentScript(siteDir, ['--write', '--yes']);
+
+		assert.equal(await fileExists(path.join(targetRouteDir, 'images', 'work', 'moved.jpg')), true);
+		assert.equal(await fileExists(path.join(sourceRouteDir, 'images', 'old', 'moved.jpg')), false);
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
+
+test('content:sync refuses cross-route image moves when git status is dirty', async () => {
+	const { root, siteDir } = await createTempSite();
+	try {
+		const sourceRouteDir = path.join(siteDir, 'routes', '010-source');
+		const targetRouteDir = path.join(siteDir, 'routes', '020-target');
+		await mkdir(path.join(sourceRouteDir, 'images', 'old'), { recursive: true });
+		await mkdir(targetRouteDir, { recursive: true });
+		await writeFile(path.join(siteDir, 'content.md'), `---
+title: Dirty Cross Route Sync
+description: Fixture
+---
+
+## Home {#home}
+
+Text.
+`);
+		await writeFile(path.join(sourceRouteDir, 'route-content.md'), `---
+title: Source
+description: Fixture
+---
+
+## Old {#old}
+
+Text.
+`);
+		await writeFile(path.join(targetRouteDir, 'route-content.md'), `---
+title: Target
+description: Fixture
+---
+
+## Work {#work}
+
+\`\`\`norna-image-stack
+- image: moved.jpg
+\`\`\`
+`);
+		await writeFile(path.join(sourceRouteDir, 'images', 'old', 'moved.jpg'), 'route image');
+		await initCleanGitWorktree(root);
+		await writeFile(path.join(root, 'dirty.txt'), 'dirty');
+
+		await assert.rejects(
+			() => runContentScript(siteDir, ['--write', '--yes']),
+			(error) => {
+				assert.match(error.output, /Cross-route content sync requires a clean git working tree before moving files between page or route image roots\./);
+				assert.match(error.output, /dirty\.txt/);
+				return true;
+			},
+		);
+
+		assert.equal(await fileExists(path.join(targetRouteDir, 'images', 'work', 'moved.jpg')), false);
+		assert.equal(await fileExists(path.join(sourceRouteDir, 'images', 'old', 'moved.jpg')), true);
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
+
+test('content:check reports cross-route image moves without requiring clean git status', async () => {
+	const { root, siteDir } = await createTempSite();
+	try {
+		const sourceRouteDir = path.join(siteDir, 'routes', '010-source');
+		const targetRouteDir = path.join(siteDir, 'routes', '020-target');
+		await mkdir(path.join(sourceRouteDir, 'images', 'old'), { recursive: true });
+		await mkdir(targetRouteDir, { recursive: true });
+		await writeFile(path.join(siteDir, 'content.md'), `---
+title: Cross Route Check
+description: Fixture
+---
+
+## Home {#home}
+
+Text.
+`);
+		await writeFile(path.join(sourceRouteDir, 'route-content.md'), `---
+title: Source
+description: Fixture
+---
+
+## Old {#old}
+
+Text.
+`);
+		await writeFile(path.join(targetRouteDir, 'route-content.md'), `---
+title: Target
+description: Fixture
+---
+
+## Work {#work}
+
+\`\`\`norna-image-stack
+- image: moved.jpg
+\`\`\`
+`);
+		await writeFile(path.join(sourceRouteDir, 'images', 'old', 'moved.jpg'), 'route image');
+		await writeFile(path.join(root, 'dirty.txt'), 'dirty');
+
+		await assert.rejects(
+			() => runContentScript(siteDir, ['--check']),
+			(error) => {
+				assert.match(error.output, /Image "moved\.jpg" is used here but is located in .*site\/routes\/010-source\/images\/old\/moved\.jpg\./);
+				assert.match(error.output, /Run norna content:sync to move it from .*site\/routes\/010-source to .*site\/routes\/020-target\./);
+				assert.doesNotMatch(error.output, /requires a clean git working tree before moving files/);
+				return true;
+			},
+		);
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
+
+test('content:sync refuses to move a cross-route image still referenced by its current section', async () => {
+	const { root, siteDir } = await createTempSite();
+	try {
+		const sourceRouteDir = path.join(siteDir, 'routes', '010-source');
+		const targetRouteDir = path.join(siteDir, 'routes', '020-target');
+		await mkdir(path.join(sourceRouteDir, 'images', 'old'), { recursive: true });
+		await mkdir(targetRouteDir, { recursive: true });
+		await writeFile(path.join(siteDir, 'content.md'), `---
+title: Cross Route Copy
+description: Fixture
+---
+
+## Home {#home}
+
+Text.
+`);
+		await writeFile(path.join(sourceRouteDir, 'route-content.md'), `---
+title: Source
+description: Fixture
+---
+
+## Old {#old}
+
+\`\`\`norna-image-stack
+- image: shared.jpg
+\`\`\`
+`);
+		await writeFile(path.join(targetRouteDir, 'route-content.md'), `---
+title: Target
+description: Fixture
+---
+
+## Work {#work}
+
+\`\`\`norna-image-stack
+- image: shared.jpg
+\`\`\`
+`);
+		await writeFile(path.join(sourceRouteDir, 'images', 'old', 'shared.jpg'), 'route image');
+
+		await assert.rejects(
+			() => runContentScript(siteDir, ['--write', '--yes']),
+			(error) => {
+				assert.match(error.output, /Cannot relocate "shared\.jpg" from .*site\/routes\/010-source\/images\/old\/shared\.jpg because it is still referenced from .*site\/routes\/010-source\/route-content\.md \[old\]\./);
+				return true;
+			},
+		);
+
+		assert.equal(await fileExists(path.join(targetRouteDir, 'images', 'work', 'shared.jpg')), false);
+		assert.equal(await fileExists(path.join(sourceRouteDir, 'images', 'old', 'shared.jpg')), true);
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
+
 test('CLI content:sync refreshes generated images after moving a carousel image', async () => {
 	const { root, siteDir } = await createTempSite();
 	try {
@@ -773,8 +1005,8 @@ image broken.jpg
 			() => runContentScript(siteDir, ['--check']),
 			(error) => {
 				assert.match(error.output, /Invalid norna-image-stack entry "image broken\.jpg"\. Start each image with "- image: filename\.jpg"\./);
-				assert.match(error.output, /Image "missing-intro\.jpg" does not exist at .*site\/images\/intro\/missing-intro\.jpg or anywhere under .*site\/images\//);
-				assert.match(error.output, /Image "missing-more\.jpg" does not exist at .*site\/images\/more\/missing-more\.jpg or anywhere under .*site\/images\//);
+				assert.match(error.output, /Image "missing-intro\.jpg" does not exist at .*site\/images\/intro\/missing-intro\.jpg or anywhere under any page or route image root\./);
+				assert.match(error.output, /Image "missing-more\.jpg" does not exist at .*site\/images\/more\/missing-more\.jpg or anywhere under any page or route image root\./);
 				return true;
 			},
 		);
@@ -826,7 +1058,7 @@ description: Fixture
 			() => runContentScript(siteDir, ['--check']),
 			(error) => {
 				assert.match(error.output, /norna-image-carousel on line \d+ contains 1 image\. A carousel needs at least two images\./);
-				assert.match(error.output, /Image "foo\.jpg" does not exist at .*site\/images\/plain\/foo\.jpg or anywhere under .*site\/images\//);
+				assert.match(error.output, /Image "foo\.jpg" does not exist at .*site\/images\/plain\/foo\.jpg or anywhere under any page or route image root\./);
 				return true;
 			},
 		);
@@ -854,7 +1086,7 @@ description: Fixture
 		await assert.rejects(
 			() => runContentScript(siteDir, ['--check']),
 			(error) => {
-				assert.match(error.output, /Image "missing\.jpg" does not exist at .*site\/images\/intro\/missing\.jpg or anywhere under .*site\/images\//);
+				assert.match(error.output, /Image "missing\.jpg" does not exist at .*site\/images\/intro\/missing\.jpg or anywhere under any page or route image root\./);
 				return true;
 			},
 		);
@@ -919,7 +1151,7 @@ Text.
 	}
 });
 
-test('content:sync refuses ambiguous page-local image relocation', async () => {
+test('content:sync refuses ambiguous image relocation', async () => {
 	const { root, siteDir } = await createTempSite();
 	try {
 		await writeFile(path.join(siteDir, 'content.md'), `---

package/scripts/test-package-check.mjs

@@ -195,6 +195,7 @@ title: Package Check Site
 description: Site used by package checks.
 sections:
   intro: {}
+  warning: {}
   work: {}
 ---
 
@@ -207,6 +208,10 @@ image: package-check.svg
 source: package check fixture
 -->
 
+## [**Warning**]{.highlight} {#warning}
+
+This section verifies styled section headings.
+
 ## Work {#work}
 
 This section keeps the package check independent from user-facing starter copy.
@@ -317,6 +322,18 @@ This route verifies that packaged norna sites can build route pages.
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'class="inline-style inline-style-highlight" style="--inline-style-color: #ffd84d"',
 	);
+	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>',
+	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'data-section-title="Warning"',
+	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'href="#warning">Warning</a>',
+	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'--section-background-color: #000000',

package/src/components/SiteSection.astro

@@ -256,7 +256,7 @@ const sectionStyle = [
 >
 	<div class="section-card">
 		<header class="section-header">
-			<HeadingTag>{section.title}</HeadingTag>
+			<HeadingTag set:html={section.titleHtml} />
 		</header>
 
 		<div class:list={['section-body', { 'section-body-has-gallery': hasMedia, 'section-body-text-only': !hasMedia }]}>

package/src/lib/sectionContent.ts

@@ -38,12 +38,13 @@ type SectionContentBlock =
 export type ResolvedSection = SiteSectionMetadata & {
 	id: string;
 	title: string;
+	titleHtml: string;
 	contentBlocks: SectionContentBlock[];
 };
 
 const headingRegex = /<h2\b([^>]*)>([\s\S]*?)<\/h2>/gi;
 const explicitHeadingIdRegex = /\s*\{#([a-z0-9-]+)\}\s*$/;
-const inlineStyleReferenceRegex = /\[([^\]<]+)\]\{\.([a-z][a-z0-9-]*)\}/g;
+const inlineStyleReferenceRegex = /\[([\s\S]*?)\]\{\.([a-z][a-z0-9-]*)\}/g;
 const markdownH2Regex = /^##\s+.*$/gm;
 const imageProvenanceCommentRegex = /<!--\s*norna-image-provenance:[\s\S]*?-->/gi;
 
@@ -81,8 +82,14 @@ const getHeadingId = (attributes: string, headingHtml: string) => {
 const getExplicitHeadingId = (headingHtml: string) =>
 	decodeHtmlEntities(stripTags(headingHtml)).trim().match(explicitHeadingIdRegex)?.[1];
 
+const stripInlineStyleMarkers = (value: string) =>
+	value.replace(inlineStyleReferenceRegex, '$1');
+
 const getHeadingTitle = (headingHtml: string) =>
-	decodeHtmlEntities(stripTags(headingHtml)).replace(explicitHeadingIdRegex, '').trim();
+	stripInlineStyleMarkers(decodeHtmlEntities(stripTags(headingHtml)).replace(explicitHeadingIdRegex, '').trim());
+
+const getHeadingTitleHtml = (headingHtml: string, inlineStyles: InlineStyles | undefined) =>
+	prepareContentHtml(headingHtml.replace(explicitHeadingIdRegex, '').trim(), inlineStyles);
 
 const applyInlineStyles = (html: string, inlineStyles: InlineStyles | undefined) =>
 	html.replace(inlineStyleReferenceRegex, (_match, text: string, styleName: string) => {
@@ -209,6 +216,7 @@ export const getSectionsContent = (
 			...(sectionMetadata[id] ?? {}),
 			id,
 			title,
+			titleHtml: getHeadingTitleHtml(headingHtml, inlineStyles),
 			contentBlocks: resolveContentBlocks(content, rawSections.get(id) ?? '', page, id, inlineStyles),
 		});
 	}

package/src/styles/global.css

@@ -396,7 +396,7 @@ ul {
 	font: inherit;
 }
 
-.section-markdown .inline-style {
+.inline-style {
 	color: var(--inline-style-color);
 }
 

package/starters/basic/README.md

@@ -17,8 +17,10 @@ npm run dev -- --kill
 
 Edit site-wide visual defaults in `site/theme.md`, homepage content and section
 overrides in `site/content.md`, technical settings such as URL and locale
-labels in `site/config.mjs`, source images under
-`site/images/<section-id>/`, and static public files under `site/public/`.
+labels in `site/config.mjs`, source images under `site/images/<section-id>/`,
+and static public files under `site/public/`. The image folder name should
+match the section id in Markdown, for example `## Work {#work}` uses
+`site/images/work/`.
 
 Use `site.basePath: '/'` for a custom domain or root-hosted site. For a GitHub
 Pages project site without a custom domain, set both values:

package/starters/basic/site/content.md

@@ -1,12 +1,6 @@
 ---
 title: Example Site
 description: Minimal norna starter site.
-sections:
-  intro:
-    presentation:
-      typography:
-        preset: statement
-
 ---
 
 ## Intro {#intro}
@@ -15,8 +9,8 @@ routes defined, the navigation menu will be a sticky bar with anchor links for
 ease of use on phones etc. [Highlighted inline text]{.highlight} when a short
 phrase needs emphasis
 ## Work {#work}
-Add Norna image blocks in Markdown and matching source images under
-`images/work/`.
+Add Norna managed media blocks in Markdown where the media should appear. Put
+matching source images under `images/work/`.
 
 ````
 ```norna-image-stack

package/starters/project/README.md

@@ -23,7 +23,8 @@ npm run dev -- --kill
 - `site/theme.md`: site-wide visual settings such as brand text, layout
   density, typography rhythm, colors, frame colors, and inline text styles.
 - `site/content.md`: homepage title, sections, placeholders, project summary,
-  links, install command, example usage, benefits, next steps, and license.
+  links, install command, example usage, benefits, next steps, managed media
+  blocks, and license.
 - `site/routes/010-guide/route-content.md`: short secondary page with realistic
   project guide content.
 - `site/public/robots.txt`: static public file copied into the built site.
@@ -40,15 +41,18 @@ GitHub Pages workflow uses `npm ci`.
    delete the route if the homepage is enough.
 3. Edit `site/theme.md` for brand name, layout density, typography rhythm,
    colors, frame colors, and inline text styles.
-4. Edit `site/config.mjs` for public URL, GitHub repository, footer text, and
+4. Put any local source images in the image folder for the Markdown section
+   that references them, for example `site/images/intro/`.
+5. Edit `site/config.mjs` for public URL, GitHub repository, footer text, and
    deploy workflow name.
-5. Update `package.json` with the site's package name and keep
+6. Update `package.json` with the site's package name and keep
    `package-lock.json` committed.
 
 ## Common Commands
 
 ```sh
 npm run norna:check
+npm run norna:sync
 npm run norna:typography:show
 npm run build
 ```