@janga/norna 0.7.8 → 0.7.9

package/examples/typography-presets/site/content.md

@@ -0,0 +1,134 @@
+---
+title: Typography Presets
+description: A Norna example page showing every built-in typography preset.
+navigation:
+  label: Presets
+sections:
+  quiet-gallery:
+    presentation:
+      typography:
+        preset: quiet-gallery
+  compact-gallery:
+    presentation:
+      typography:
+        preset: compact-gallery
+  text-forward:
+    presentation:
+      typography:
+        preset: text-forward
+  statement:
+    presentation:
+      typography:
+        preset: statement
+---
+
+## Quiet Gallery {#quiet-gallery}
+
+This section uses the `quiet-gallery` preset. Its purpose is to keep text
+restrained so images can carry much of the page without the typography
+competing for attention.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis
+interdum. Donec ullamcorper nulla non metus auctor fringilla.
+
+### Reading rhythm
+
+Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel
+scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod
+semper.
+
+```norna-image-stack
+- image: puppy-portrait.jpg
+  alt: A puppy sitting outdoors and looking toward the camera.
+  caption: Puppy portrait. Photo by Bicanski, CC0, via Pixnio.
+- image: shepherd-portrait.jpg
+  alt: A shepherd dog standing outdoors and looking toward the camera.
+  caption: Shepherd dog portrait. Photo by Bicanski, CC0, via Pixnio.
+- image: white-puppy.jpg
+  alt: A white puppy outdoors in winter.
+  caption: White puppy outdoors. Photo by Bicanski, CC0, via Pixnio.
+```
+
+## Compact Gallery {#compact-gallery}
+
+This section uses the `compact-gallery` preset. Its purpose is to make denser
+image-led pages easier to scan when a site contains many sections, many images
+or short information blocks.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia
+bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.
+
+### Dense sections
+
+Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac
+cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
+amet risus.
+
+```norna-image-stack
+- image: schnauzer-portrait.jpg
+  alt: A schnauzer-type dog sitting outdoors.
+  caption: Schnauzer portrait. Photo by Bicanski, CC0, via Pixnio.
+- image: black-schnauzer.jpg
+  alt: A black schnauzer-type dog standing on grass.
+  caption: Black hunting dog portrait. Photo by Bicanski, CC0, via Pixnio.
+- image: retriever-portrait.jpg
+  alt: A retriever-type dog sitting outdoors.
+  caption: Retriever portrait. Photo by Bicanski, CC0, via Pixnio.
+```
+
+## Text Forward {#text-forward}
+
+This section uses the `text-forward` preset. Its purpose is to give longer
+explanatory text more presence while still supporting image captions and
+image-led sections.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere
+consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
+Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+### Longer explanations
+
+Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
+dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
+lacinia odio sem nec elit.
+
+```norna-image-stack
+- image: grass-puppy.jpg
+  alt: A puppy standing in green grass.
+  caption: Puppy in grass. Photo by Bicanski, CC0, via Pixnio.
+- image: grey-street-dog.jpg
+  alt: A grey dog standing on a paved street.
+  caption: Grey dog on pavement. Photo by Bicanski, CC0, via Pixnio.
+- image: boxer-portrait.jpg
+  alt: A brown boxer-type dog looking at the camera.
+  caption: Brown dog portrait. Photo by Bicanski, CC0, via Pixnio.
+```
+
+## Statement {#statement}
+
+This section uses the `statement` preset. Its purpose is to make short,
+declarative sections feel more direct and programmatic. It is intentionally
+stronger than the other presets and should usually be used sparingly.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi
+porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus
+posuere velit aliquet.
+
+### Short emphasis
+
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean
+lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius
+blandit sit amet non magna.
+
+```norna-image-stack
+- image: sheepdog-grass.jpg
+  alt: A sheepdog puppy sitting in green grass.
+  caption: Sheepdog puppy in grass. Photo by Bicanski, CC0, via Pixnio.
+- image: sheepdog-wide.jpg
+  alt: A sheepdog puppy lying outdoors.
+  caption: Sheepdog puppy outdoors. Photo by Bicanski, CC0, via Pixnio.
+- image: black-pedigree.jpg
+  alt: A black dog standing in grass.
+  caption: Black pedigree dog portrait. Photo by Bicanski, CC0, via Pixnio.
+```

package/examples/typography-presets/site/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/examples/typography-presets/site/theme.md

@@ -0,0 +1,43 @@
+---
+navigation:
+  brand: Typography Presets
+layout:
+  density: normal
+  pageWidth: 1320px
+  gutter:
+    desktop: clamp(1.25rem, 4vw, 3rem)
+    mobile: 1rem
+  spacing:
+    firstSectionTop:
+      desktop: clamp(1.5rem, 3vw, 2.5rem)
+      mobile: 1rem
+    sectionGap:
+      desktop: clamp(2rem, 4vw, 3.5rem)
+      mobile: 2rem
+    finalSectionBottom:
+      desktop: clamp(2rem, 4vw, 3.5rem)
+      mobile: 2rem
+    bodyToImages:
+      desktop: 1.25rem
+      mobile: 1rem
+    imageGap:
+      desktop: clamp(1.25rem, 3vw, 2.25rem)
+      mobile: 1.5rem
+gallery:
+  width: 70vw
+  maxAvailableWidthPercent:
+    desktop: 100
+    mobile: 100
+  maxAvailableHeightPercent:
+    desktop: 72
+    mobile: 68
+typography:
+  fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
+  preset: quiet-gallery
+  rhythm: normal
+presentation:
+  backgroundColor: "#f8f5ee"
+  textColor: "#17201d"
+frame:
+  colors: presentation
+---

package/package.json

@@ -2,7 +2,7 @@
   "name": "@janga/norna",
   "description": "A command-line publishing workflow for simple static sites.",
   "type": "module",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",

package/scripts/lib/site-content.mjs

@@ -22,6 +22,9 @@ const inlineStyleReferenceRegex = /\[[^\]\n]+\]\{\.([a-z][a-z0-9-]*)\}/g;
 const frontmatterDelimiterRegex = /^---\s*$/;
 const knownContentTopLevelFrontmatterKeys = new Set(['title', 'description', 'navigation', 'presentation', 'frame', 'sections']);
 const knownThemeTopLevelFrontmatterKeys = new Set(['navigation', 'layout', 'gallery', 'typography', 'presentation', 'frame']);
+const frontmatterColorKeys = new Set(['backgroundColor', 'textColor', 'color']);
+const quotedHexColorRegex = /^["']#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})["']$/;
+const unquotedHexColorRegex = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
 const knownNestedFrontmatterKeys = new Set([
 	'align',
 	'alt',
@@ -261,6 +264,79 @@ export const validateFrontmatterStructure = (frontmatter, addIssue, {
 	}
 };
 
+const stripInlineYamlComment = (value) => {
+	let quote = null;
+
+	for (let index = 0; index < value.length; index += 1) {
+		const character = value[index];
+		const previous = value[index - 1];
+
+		if ((character === '"' || character === "'") && previous !== '\\') {
+			quote = quote === character ? null : quote ?? character;
+			continue;
+		}
+
+		if (character === '#' && quote === null && /\s/.test(previous ?? '')) {
+			return value.slice(0, index).trimEnd();
+		}
+	}
+
+	return value.trim();
+};
+
+export const validateFrontmatterColorValues = (frontmatter, addIssue, label = 'Frontmatter') => {
+	const lines = frontmatter.split(/\r?\n/);
+	const pathStack = [];
+
+	for (const [index, line] of lines.entries()) {
+		const lineNumber = index + 1;
+		const trimmed = line.trim();
+
+		if (!trimmed || trimmed.startsWith('#') || frontmatterDelimiterRegex.test(line)) {
+			continue;
+		}
+
+		const match = line.match(/^(\s*)([A-Za-z][A-Za-z0-9-]*):\s*(.*?)\s*$/);
+		if (!match) continue;
+
+		const indent = match[1].length;
+		const key = match[2];
+		const rawValue = match[3].trim();
+
+		while (pathStack.length > 0 && pathStack[pathStack.length - 1].indent >= indent) {
+			pathStack.pop();
+		}
+
+		const pathLabel = [...pathStack.map((entry) => entry.key), key].join('.');
+
+		if (!frontmatterColorKeys.has(key)) {
+			if (!rawValue) {
+				pathStack.push({ indent, key });
+			}
+			continue;
+		}
+
+		const value = stripInlineYamlComment(rawValue);
+
+		if (quotedHexColorRegex.test(value)) continue;
+
+		if (unquotedHexColorRegex.test(rawValue)) {
+			addIssue({
+				severity: 'error',
+				message: `${label} line ${lineNumber} defines ${pathLabel} as an unquoted hex color. YAML treats "#" as the start of a comment unless the value is quoted.`,
+				fix: `Write it as ${key}: "#ffd84d" or another quoted hex color.`,
+			});
+			continue;
+		}
+
+		addIssue({
+			severity: 'error',
+			message: `${label} line ${lineNumber} defines ${pathLabel} with invalid color value ${rawValue || '(empty)'}.`,
+			fix: `Use a quoted hex color in #rgb, #rrggbb, or #rrggbbaa form, for example ${key}: "#ffd84d".`,
+		});
+	}
+};
+
 export const validateContentFrontmatterStructure = (frontmatter, addIssue) =>
 	validateFrontmatterStructure(frontmatter, addIssue, {
 		knownTopLevelFrontmatterKeys: knownContentTopLevelFrontmatterKeys,

package/scripts/lib/theme-config.mjs

@@ -2,6 +2,7 @@ import { readFile } from 'node:fs/promises';
 import { parseYamlMapping } from './frontmatter-yaml.mjs';
 import {
 	splitSiteFile,
+	validateFrontmatterColorValues,
 	validateFrontmatterIndentation,
 	validateThemeFrontmatterStructure,
 } from './site-content.mjs';
@@ -22,6 +23,7 @@ export const readThemeConfig = async () => {
 
 	validateFrontmatterIndentation(frontmatter, (issue) => issues.push(issue));
 	validateThemeFrontmatterStructure(frontmatter, (issue) => issues.push(issue));
+	validateFrontmatterColorValues(frontmatter, (issue) => issues.push(issue), siteThemeLabel);
 
 	if (issues.length > 0) {
 		throw new Error([

package/scripts/sync-content-sections.mjs

@@ -20,6 +20,7 @@ import {
 	readThemeFile,
 	toPosixPath,
 	validateContentFrontmatterStructure,
+	validateFrontmatterColorValues,
 	validateFrontmatterIndentation,
 	validateThemeFrontmatterStructure,
 } from './lib/site-content.mjs';
@@ -394,6 +395,7 @@ try {
 	themeFrontmatter = (await readThemeFile(siteThemePath)).frontmatter;
 	validateFrontmatterIndentation(themeFrontmatter, addIssue);
 	validateThemeFrontmatterStructure(themeFrontmatter, addIssue);
+	validateFrontmatterColorValues(themeFrontmatter, addIssue, siteThemeLabel);
 } catch (error) {
 	if (error?.code !== 'ENOENT') {
 		throw error;
@@ -415,6 +417,7 @@ for (const contentFile of contentFiles) {
 	const bodyLineOffset = frontmatter.split(/\r?\n/).length - 1;
 	validateFrontmatterIndentation(frontmatter, addIssue);
 	validateContentFrontmatterStructure(frontmatter, addIssue);
+	validateFrontmatterColorValues(frontmatter, addIssue, contentFile.contentLabel);
 
 	const frontmatterSections = getFrontmatterSections(frontmatter);
 	const frontmatterIds = new Set(frontmatterSections.map((section) => section.id));

package/scripts/test-content-check.mjs

@@ -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-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);
 }