@janga/norna 0.7.6 → 0.7.8

package/scripts/test-engine-commands.mjs

@@ -27,7 +27,7 @@ try {
 	const directSiteRoot = path.join(tempRoot, 'current-directory-site');
 	await mkdir(directSiteRoot, { recursive: true });
 	await writeFile(path.join(directSiteRoot, 'config.mjs'), 'export default { site: { url: "https://example.com/" } };\n');
-	await writeFile(path.join(directSiteRoot, 'content.md'), '---\ntitle: Direct Site\nsections: []\n---\n');
+	await writeFile(path.join(directSiteRoot, 'content.md'), '---\ntitle: Direct Site\ndescription: Direct site fixture.\n---\n\n## Intro {#intro}\n\nText.\n');
 	const directSiteProjectRoot = await realpath(tempRoot);
 	const directSiteDoctorResult = runCli(['doctor'], {
 		cwd: directSiteRoot,

package/scripts/test-package-check.mjs

@@ -190,6 +190,27 @@ try {
 		packageCheckThemePath,
 		packageCheckTheme.replace('brand: Example Site', 'brand: Package Check Brand'),
 	);
+	await writeFile(path.join(siteProjectRoot, 'site', 'content.md'), `---
+title: Package Check Site
+description: Site used by package checks.
+sections:
+  intro: {}
+  work: {}
+---
+
+## Intro {#intro}
+
+This page verifies that [packaged norna sites]{.highlight} can build with the current content model.
+
+<!-- norna-image-provenance:
+image: package-check.svg
+source: package check fixture
+-->
+
+## Work {#work}
+
+This section keeps the package check independent from user-facing starter copy.
+`);
 	await mkdir(path.join(siteProjectRoot, 'site', 'routes', '010-about'), { recursive: true });
 	await writeFile(path.join(siteProjectRoot, 'site', 'routes', '010-about', 'route-content.md'), `---
 title: About the site
@@ -197,7 +218,7 @@ description: Route used by package checks.
 navigation:
   label: About
 sections:
-  - id: about
+  about: {}
 ---
 
 ## About {#about}
@@ -272,6 +293,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 assertFileExcludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'norna-image-provenance',
+	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'--section-body-paragraph-spacing: 0.85em',
@@ -372,8 +397,8 @@ This route verifies that packaged norna sites can build route pages.
 	await writeFile(
 		siteContentPath,
 		siteContent.replace(
-			'description: Minimal norna starter site.',
-			'description: Minimal norna starter site.\npresentation:\n  typography:\n    overrides:\n      body:\n        lineHeight: tight',
+			'description: Site used by package checks.',
+			'description: Site used by package checks.\npresentation:\n  typography:\n    overrides:\n      body:\n        lineHeight: tight',
 		),
 	);
 	await runExpectFailure(
@@ -385,25 +410,28 @@ This route verifies that packaged norna sites can build route pages.
 	await writeFile(
 		siteContentPath,
 		siteContent.replace(
-			'      typography:\n        preset: statement',
-			'      typography:\n        overrides:\n          caption:\n            spacingBefore: wide',
+			'  intro: {}',
+			'  intro:\n    presentation:\n      typography:\n        overrides:\n          caption:\n            spacingBefore: wide',
 		),
 	);
 	await runExpectFailure(
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'sections.0.presentation.typography.overrides.caption.spacingBefore',
+		'sections.intro.presentation.typography.overrides.caption.spacingBefore',
 	);
 	await writeFile(
 		siteContentPath,
-		siteContent.replace('        preset: statement', '        preset: dramatic'),
+		siteContent.replace(
+			'  intro: {}',
+			'  intro:\n    presentation:\n      typography:\n        preset: dramatic',
+		),
 	);
 	await runExpectFailure(
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'sections.0.presentation.typography.preset',
+		'sections.intro.presentation.typography.preset',
 	);
 	await writeFile(
 		siteThemePath,

package/scripts/test-temporary-visibility.mjs

@@ -59,17 +59,14 @@ frame:
 title: Temporary Visibility Test
 description: Test site for temporary sections.
 sections:
-  - id: expired
+  expired:
     visible:
       until: "2026-01-01"
-    gallery: []
-  - id: active
+  active:
     visible:
       from: "2026-01-01"
       until: "2026-12-31"
-    gallery: []
-  - id: always
-    gallery: []
+  always: {}
 
 ---
 ## Expired {#expired}

package/src/components/CardList.astro

@@ -0,0 +1,77 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import { getImageAttributes } from '../lib/generatedImages';
+
+type Card = {
+	title: string;
+	text?: string;
+	image?: string;
+	src?: string;
+	link?: string;
+	'badge-text'?: string;
+};
+type CardListLayout = 'image-top' | 'image-left' | 'image-right';
+type CardListFlow = 'grid' | 'stack';
+type CardListSize = 's' | 'm' | 'l' | 'xl';
+type CardListWidth = 'text' | 'narrow' | 'normal' | 'wide';
+
+interface Props {
+	cards: Card[];
+	layout?: CardListLayout;
+	flow?: CardListFlow;
+	size?: CardListSize;
+	width?: CardListWidth;
+}
+
+const { cards, layout = 'image-top', flow = 'grid', size = 'm', width = 'normal' } = Astro.props;
+const cardImageSizes = [
+	'(max-width: 700px) 100vw',
+	`min(20rem, ${projectConfig.gallery.maxAvailableWidthPercent.desktop}vw)`,
+].join(', ');
+const displayLink = (link: string) => withBasePath(projectConfig.site.basePath, link);
+const cardListClasses = [
+	'card-list',
+	`card-list-layout-${layout}`,
+	`card-list-flow-${flow}`,
+	`card-list-size-${size}`,
+	`card-list-width-${width}`,
+];
+---
+
+<div class:list={cardListClasses}>
+	{cards.map((card) => {
+		const content = (
+			<>
+				{card.src && (
+					<div class="card-list-image-frame">
+						<img
+							{...getImageAttributes(card.src, cardImageSizes)}
+							class="card-list-image"
+							alt=""
+							decoding="async"
+							fetchpriority="low"
+							loading="lazy"
+						/>
+					</div>
+				)}
+				<div class="card-list-content">
+					{card['badge-text'] && <p class="card-list-badge">{card['badge-text']}</p>}
+					<h3 class="card-list-title">{card.title}</h3>
+					{card.text && <p>{card.text}</p>}
+				</div>
+			</>
+		);
+
+		return (
+			<article class:list={['card-list-item', {
+				'card-list-item-has-image': Boolean(card.src),
+				'card-list-item-linked': Boolean(card.link),
+			}]}>
+				{card.link
+					? <a class="card-list-link" href={displayLink(card.link)}>{content}</a>
+					: content}
+			</article>
+		);
+	})}
+</div>

package/src/components/GalleryGrid.astro

@@ -1,11 +1,18 @@
 ---
-import type { CollectionEntry } from 'astro:content';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { getGeneratedImage, getImageAttributes } from '../lib/generatedImages';
 
-type SiteSection = CollectionEntry<'site'>['data']['sections'][number];
-type GalleryItem = SiteSection['gallery'][number];
-type GalleryImage = Extract<GalleryItem, { image: string }>;
+type GalleryImage = {
+	image: string;
+	src?: string;
+	alt?: string;
+	caption?: string;
+};
+type GalleryItem = GalleryImage | { carousel: GalleryImage[] };
+type GeneratedImageWithDimensions = NonNullable<ReturnType<typeof getGeneratedImage>> & {
+	width: number;
+	height: number;
+};
 
 interface Props {
 	title: string;
@@ -18,9 +25,12 @@ const galleryImageSizes = [
 	`(max-width: 700px) ${projectConfig.gallery.maxAvailableWidthPercent.mobile}vw`,
 	`${projectConfig.gallery.maxAvailableWidthPercent.desktop}vw`,
 ].join(', ');
+const hasDimensions = (image: ReturnType<typeof getGeneratedImage>): image is GeneratedImageWithDimensions => (
+	Boolean(image) && Number.isFinite(image.width) && Number.isFinite(image.height)
+);
 const getImageClass = (image: GalleryImage) => {
-	const generatedImage = getGeneratedImage(image.image);
-	return generatedImage && generatedImage.width > generatedImage.height
+	const generatedImage = getGeneratedImage(image.src ?? image.image);
+	return hasDimensions(generatedImage) && generatedImage.width > generatedImage.height
 		? 'gallery-image-landscape'
 		: undefined;
 };
@@ -31,8 +41,8 @@ const getImageLoadingProps = (isPriority: boolean) => ({
 });
 const getCarouselAspectRatio = (images: GalleryImage[]) => {
 	const ratios = images
-		.map((image) => getGeneratedImage(image.image))
-		.filter((image): image is NonNullable<typeof image> => Boolean(image))
+		.map((image) => getGeneratedImage(image.src ?? image.image))
+		.filter(hasDimensions)
 		.map((image) => image.width / image.height);
 
 	return ratios.length > 0 ? Math.min(...ratios) : null;
@@ -48,9 +58,9 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 				<figure class="gallery-item">
 					<div class="gallery-image-frame">
 						<img
-							{...getImageAttributes(item.image, galleryImageSizes)}
+							{...getImageAttributes(item.src ?? item.image, galleryImageSizes)}
 							class:list={['gallery-image', getImageClass(item)]}
-							alt={item.alt}
+							alt={item.alt ?? ''}
 							{...getImageLoadingProps(isPriorityItem)}
 						/>
 					</div>
@@ -87,9 +97,9 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 								<figure class="gallery-carousel-slide" data-carousel-slide>
 									<div class="gallery-carousel-image-frame">
 										<img
-											{...getImageAttributes(image.image, galleryImageSizes)}
+											{...getImageAttributes(image.src ?? image.image, galleryImageSizes)}
 											class:list={['gallery-image', getImageClass(image)]}
-											alt={image.alt}
+											alt={image.alt ?? ''}
 											{...getImageLoadingProps(isPriorityItem && imageIndex === 0)}
 										/>
 									</div>

package/src/components/SiteNavigation.astro

@@ -1,11 +1,9 @@
 ---
-import type { CollectionEntry } from 'astro:content';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
+import type { ResolvedSection } from '../lib/sectionContent';
 import type { SitePage } from '../lib/sitePages';
 
-type SiteSection = CollectionEntry<'site'>['data']['sections'][number];
-type ResolvedSection = SiteSection & { title: string };
 type FrameColors = {
 	backgroundColor: string;
 	textColor: string;
@@ -21,8 +19,11 @@ interface Props {
 
 const { brandLabel, currentPage, pages, sections, frameColors } = Astro.props;
 const smoothScrollConfig = projectConfig.navigation.smoothScroll;
+const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
+	? 'var(--color-page)'
+	: frameColors.backgroundColor;
 const navigationStyle = [
-	`--site-top-background-color: ${frameColors.backgroundColor}`,
+	`--site-top-background-color: ${siteTopBackgroundColor}`,
 	`--site-top-text-color: ${frameColors.textColor}`,
 ].join('; ');
 const showSiteNavigation = pages.length > 1;

package/src/components/SitePage.astro

@@ -1,11 +1,14 @@
 ---
 import { getCollection, type CollectionEntry } from 'astro:content';
+import path from 'node:path';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteSection from './SiteSection.astro';
 import { getSectionsContent } from '../lib/sectionContent';
 import { getNavigationPages, getSitePage, getSitePages } from '../lib/sitePages';
 import { getToday, isVisibleToday } from '../lib/visibility';
+import { readSiteFile } from '../../scripts/lib/site-content.mjs';
+import { siteContentPath, siteRoutesDir } from '../../scripts/lib/site-paths.mjs';
 import { resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
@@ -21,6 +24,10 @@ const currentPage = getSitePage(entry);
 const siteContentLabel = entry.id.includes('-route-')
 	? `${siteDirectory || 'site'}/routes/${currentPage.routeDirectory}/route-content.md`
 	: `${siteDirectory || 'site'}/content.md`;
+const pageContentPath = currentPage.routeDirectory
+	? path.join(siteRoutesDir, currentPage.routeDirectory, 'route-content.md')
+	: siteContentPath;
+const rawMarkdown = (await readSiteFile(pageContentPath, siteContentLabel)).body;
 const [theme] = await getCollection('theme');
 const navigationPages = getNavigationPages(sitePages);
 const homePage = sitePages.find((page) => page.isHome) ?? currentPage;
@@ -34,12 +41,12 @@ const frameColors = resolveFrameColors({
 });
 const sections = entry.data.sections;
 const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = getSectionsContent(siteHtml, sections, pagePresentation.inlineStyles);
+const resolvedSections = getSectionsContent(siteHtml, rawMarkdown, sections, currentPage, pagePresentation.inlineStyles);
 const today = getToday();
 const visibleSections = resolvedSections.filter((section) => isVisibleToday(section.visible, today));
 
 if (visibleSections.length === 0) {
-	throw new Error(`No sections are visible for ${today}. Check sections[].visible in ${siteContentLabel}.`);
+	throw new Error(`No sections are visible for ${today}. Check sections.<section-id>.visible in ${siteContentLabel}.`);
 }
 ---
 

package/src/components/SiteSection.astro

@@ -1,10 +1,10 @@
 ---
 import type { CollectionEntry } from 'astro:content';
 import { resolveTypographyOverride } from '../../scripts/lib/typography.mjs';
+import CardList from './CardList.astro';
 import GalleryGrid from './GalleryGrid.astro';
+import type { ResolvedSection } from '../lib/sectionContent';
 
-type SiteSection = CollectionEntry<'site'>['data']['sections'][number];
-type ResolvedSection = SiteSection & { title: string; contentHtml: string };
 type ResponsiveValue<T> = { desktop: T; mobile: T };
 type ResponsiveOverride<T> = { desktop?: T; mobile?: T };
 type TextAlign = 'left' | 'center' | 'right';
@@ -12,7 +12,7 @@ type TextSize = 'small' | 'medium' | 'large' | 'xlarge';
 type SectionPresentationOverride = {
 	backgroundColor?: string;
 	textColor?: string;
-	typography?: NonNullable<SiteSection['presentation']>['typography'];
+	typography?: NonNullable<ResolvedSection['presentation']>['typography'];
 };
 type ResolvedPagePresentation = {
 	backgroundColor: string;
@@ -197,7 +197,11 @@ const getAlignedTextWidth = (
 });
 const headingWidth = getAlignedTextWidth(headingAlign, '760px');
 const bodyWidth = getAlignedTextWidth(bodyAlign, 'var(--text-width)');
-const hasGallery = section.gallery.length > 0;
+const hasMedia = section.contentBlocks.some((block) => (
+	block.type === 'image-stack'
+	|| block.type === 'image-carousel'
+	|| (block.type === 'card-list' && block.cards.some((card) => card.image))
+));
 const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 	const headingConfig = markdownHeadings[level];
 	const fontSize = getHeadingSizeValue(level, headingConfig.size);
@@ -255,16 +259,34 @@ const sectionStyle = [
 			<HeadingTag>{section.title}</HeadingTag>
 		</header>
 
-		<div class:list={['section-body', { 'section-body-has-gallery': hasGallery, 'section-body-text-only': !hasGallery }]}>
-			{section.contentHtml && <div class="section-markdown" set:html={section.contentHtml} />}
+		<div class:list={['section-body', { 'section-body-has-gallery': hasMedia, 'section-body-text-only': !hasMedia }]}>
+			{section.contentBlocks.map((block, blockIndex) => {
+				if (block.type === 'html') {
+					return block.html && <div class="section-markdown" set:html={block.html} />;
+				}
 
-			{hasGallery && (
-				<GalleryGrid
-					title={section.title}
-					items={section.gallery}
-					priorityFirstImage={priorityGalleryImage}
-				/>
-			)}
+				if (block.type === 'image-carousel') {
+					return (
+						<GalleryGrid
+							title={section.title}
+							items={[{ carousel: block.images }]}
+							priorityFirstImage={priorityGalleryImage && blockIndex === 0}
+						/>
+					);
+				}
+
+				if (block.type === 'card-list') {
+					return <CardList cards={block.cards} layout={block.layout} flow={block.flow} size={block.size} width={block.width} />;
+				}
+
+				return (
+					<GalleryGrid
+						title={section.title}
+						items={block.images}
+						priorityFirstImage={priorityGalleryImage && blockIndex === 0}
+					/>
+				);
+			})}
 		</div>
 	</div>
 </section>

package/src/content.config.ts

@@ -10,7 +10,6 @@ const siteEntryId = `${siteDirLabel
 	.replace(/^[./\\]+/, '')
 	.replace(/[^a-zA-Z0-9-]+/g, '-')
 	.replace(/^-+|-+$/g, '') || 'site'}-content`;
-const contentImageName = z.string().regex(/^[a-z0-9][a-z0-9.-]*\.(jpe?g|png)$/i);
 const colorValue = z.string().regex(
 	/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,
 	'Use a hex color such as "#000000".',
@@ -168,15 +167,10 @@ const themeNavigation = z.object({
 	brand: z.string().min(1).optional(),
 }).strict();
 
-const galleryImage = z.object({
-	image: contentImageName,
-	alt: z.string(),
-	caption: z.string().optional(),
+const sectionMetadata = z.object({
+	visible: visibilityWindow.optional(),
+	presentation: sectionPresentationOverride.optional(),
 }).strict();
-const galleryCarousel = z.object({
-	carousel: z.array(galleryImage).min(2, 'A carousel must contain at least two images.'),
-}).strict();
-const galleryItem = z.union([galleryImage, galleryCarousel]);
 
 const siteSchema = z.object({
 	title: z.string(),
@@ -184,14 +178,7 @@ const siteSchema = z.object({
 	navigation: pageNavigation.optional(),
 	presentation: pagePresentation.optional(),
 	frame: frame.optional(),
-	sections: z.array(
-		z.object({
-			id: z.string().regex(/^[a-z0-9-]+$/),
-			visible: visibilityWindow.optional(),
-			presentation: sectionPresentationOverride.optional(),
-			gallery: z.array(galleryItem).optional().default([]),
-		}).strict(),
-	).min(1),
+	sections: z.record(z.string().regex(/^[a-z0-9-]+$/), sectionMetadata).optional().default({}),
 });
 
 const themeSchema = z.object({

package/src/lib/generatedImages.ts

@@ -1,45 +1,65 @@
-import { readFileSync } from 'node:fs';
+import { readFileSync, statSync } from 'node:fs';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { generatedImagesManifestPath } from '../../scripts/lib/site-paths.mjs';
 import { withBasePath } from './basePath';
 
 type GeneratedImage = {
+	kind?: 'static';
 	outputVersion?: number;
 	sourceHash?: string;
-	width: number;
-	height: number;
-	variants: Array<{
+	src?: string;
+	width?: number;
+	height?: number;
+	variants?: Array<{
 		src: string;
 		width: number;
 	}>;
 };
 
+let cachedImagesSignature: string | null = null;
+let cachedImages: Record<string, GeneratedImage | undefined> = {};
+
 const readGeneratedImages = () => {
 	try {
-		return JSON.parse(readFileSync(generatedImagesManifestPath, 'utf8')) as Record<string, GeneratedImage | undefined>;
+		const manifestStats = statSync(generatedImagesManifestPath);
+		const signature = `${manifestStats.mtimeMs}:${manifestStats.size}`;
+
+		if (signature === cachedImagesSignature) {
+			return cachedImages;
+		}
+
+		cachedImages = JSON.parse(readFileSync(generatedImagesManifestPath, 'utf8')) as Record<string, GeneratedImage | undefined>;
+		cachedImagesSignature = signature;
+		return cachedImages;
 	} catch {
+		cachedImagesSignature = null;
+		cachedImages = {};
 		return {};
 	}
 };
 
-const images = readGeneratedImages();
 const maxDisplayImageWidth = 1920;
 const fallbackDisplayImageWidth = 1440;
 
-export const getGeneratedImage = (src: string) => images[src];
+export const getGeneratedImage = (src: string) => readGeneratedImages()[src];
 
 const displaySrc = (src: string) => withBasePath(projectConfig.site.basePath, src);
 
-export const getLinkedImageSrc = (src: string) => displaySrc(getGeneratedImage(src)?.variants.at(-1)?.src ?? src);
+export const getLinkedImageSrc = (src: string) => {
+	const image = getGeneratedImage(src);
+	return displaySrc(image?.kind === 'static'
+		? image.src ?? src
+		: image?.variants?.at(-1)?.src ?? src);
+};
 
-const getDisplayVariants = (variants: GeneratedImage['variants']) => {
+const getDisplayVariants = (variants: NonNullable<GeneratedImage['variants']>) => {
 	const sortedVariants = [...variants].sort((a, b) => a.width - b.width);
 	const displayVariants = sortedVariants.filter((variant) => variant.width <= maxDisplayImageWidth);
 
 	return displayVariants.length > 0 ? displayVariants : sortedVariants;
 };
 
-const getFallbackVariant = (variants: GeneratedImage['variants']) => (
+const getFallbackVariant = (variants: NonNullable<GeneratedImage['variants']>) => (
 	variants.filter((variant) => variant.width <= fallbackDisplayImageWidth).at(-1) ?? variants[0]
 );
 
@@ -53,6 +73,26 @@ export const getImageAttributes = (src: string, sizes: string) => {
 		};
 	}
 
+	if (image.kind === 'static') {
+		return {
+			src: displaySrc(image.src ?? src),
+			...(Number.isFinite(image.width) && Number.isFinite(image.height)
+				? {
+					style: `aspect-ratio: ${image.width} / ${image.height};`,
+					width: image.width,
+					height: image.height,
+				}
+				: {}),
+		};
+	}
+
+	if (!image.variants) {
+		return {
+			src: displaySrc(src),
+			sizes,
+		};
+	}
+
 	const displayVariants = getDisplayVariants(image.variants);
 	const fallbackVariant = getFallbackVariant(displayVariants);