@janga/norna 0.7.17 → 0.7.18

package/src/components/SiteSection.astro

@@ -1,6 +1,6 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
-import { resolveSectionSurface } from '../../scripts/lib/presentation.mjs';
+import { getTextWidthCssValue, resolveSectionSurface } from '../../scripts/lib/presentation.mjs';
 import CardList from './CardList.astro';
 import ImageCarousel from './ImageCarousel.astro';
 import ImageStack from './ImageStack.astro';
@@ -165,11 +165,6 @@ const getSizeValue = (
 const getHeadingSizeValue = (level: HeadingLevel, size: TextSize) => (
 	headingSizeValues[level][size]
 );
-const textWidthValues: Record<TextWidth, string> = {
-	narrow: 'min(60ch, var(--text-width))',
-	normal: 'min(72ch, var(--text-width))',
-	wide: 'min(72ch, var(--image-layout-width))',
-};
 const surface = isPageTitle
 	? pagePresentation.palette.surfaces.base
 	: resolveSectionSurface(pagePresentation, sectionIndex);
@@ -205,7 +200,7 @@ const justifyByAlign: Record<TextAlign, string> = {
 	center: 'center',
 	right: 'flex-end',
 };
-const bodyWidthValue = textWidthValues[typography.body.width as TextWidth];
+const bodyWidthValue = getTextWidthCssValue(typography.body.width as TextWidth);
 const headingWidth = {
 	desktop: bodyWidthValue,
 	mobile: bodyWidthValue,

package/src/components/SiteTreeNavigation.astro

@@ -0,0 +1,35 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import { getListedPageNavigationTree, type PageNavigationEntry } from '../lib/siteNavigation';
+import type { SitePage } from '../lib/sitePages';
+import NavigationPageTree from './NavigationPageTree.astro';
+
+interface Props {
+	currentPage: SitePage;
+	pageNavigation: PageNavigationEntry[];
+}
+
+const { currentPage, pageNavigation } = Astro.props;
+const roots = getListedPageNavigationTree(pageNavigation);
+const activeRoot = roots.find((node) => (
+	currentPage.pageDirectory === node.page.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${node.page.pageDirectory}/pages/`)
+));
+---
+
+{activeRoot && (
+	<aside
+		class="tree-local-navigation"
+		data-navigation-root={withBasePath(projectConfig.site.basePath, activeRoot.page.pathname)}
+	>
+		<nav aria-label={`${activeRoot.page.title}: ${projectConfig.locale.labels.siteNavigation}`}>
+			<NavigationPageTree
+				nodes={[activeRoot]}
+				currentPage={currentPage}
+				variant="sidebar"
+				integratePageSections
+			/>
+		</nav>
+	</aside>
+)}

package/src/components/TreeNavigationScript.astro

@@ -0,0 +1,83 @@
+<script>
+	type NavigationState = {
+		openPaths: string[];
+		sectionPaths: string[];
+		scrollTop: number;
+	};
+
+	const setupNavigationState = (container: HTMLElement, scope: 'desktop' | 'mobile') => {
+		const root = container.dataset.navigationRoot ?? '/';
+		const stateKey = `norna:tree-navigation:${scope}:${root}`;
+		const branches = Array.from(container.querySelectorAll<HTMLDetailsElement>(
+			'.navigation-page-disclosure[data-page-path]',
+		));
+		let storedState: NavigationState = { openPaths: [], sectionPaths: [], scrollTop: 0 };
+
+		try {
+			const parsedState = JSON.parse(sessionStorage.getItem(stateKey) ?? '{}');
+			storedState = {
+				openPaths: Array.isArray(parsedState.openPaths) ? parsedState.openPaths : [],
+				sectionPaths: Array.isArray(parsedState.sectionPaths) ? parsedState.sectionPaths : [],
+				scrollTop: Number.isFinite(Number(parsedState.scrollTop)) ? Number(parsedState.scrollTop) : 0,
+			};
+
+			branches.forEach((branch) => {
+				const pagePath = branch.dataset.pagePath ?? '';
+				branch.open = branch.dataset.currentBranch === 'true'
+					|| storedState.openPaths.includes(pagePath);
+
+				if (storedState.sectionPaths.includes(pagePath)) {
+					branch.dataset.sectionsOpen = 'true';
+				}
+			});
+
+			if (storedState.scrollTop > 0) {
+				requestAnimationFrame(() => {
+					container.scrollTop = storedState.scrollTop;
+				});
+			}
+		} catch {
+			// Navigation remains fully usable when browser storage is unavailable.
+		}
+
+		const saveState = () => {
+			try {
+				const openBranches = branches.filter((branch) => branch.open);
+				const state: NavigationState = {
+					openPaths: openBranches.map((branch) => branch.dataset.pagePath ?? ''),
+					sectionPaths: openBranches
+						.filter((branch) => (
+							branch.dataset.sectionsOpen === 'true'
+							|| branch.dataset.currentPage === 'true'
+						))
+						.map((branch) => branch.dataset.pagePath ?? ''),
+					scrollTop: container.scrollTop,
+				};
+				sessionStorage.setItem(stateKey, JSON.stringify(state));
+			} catch {
+				// Navigation state persistence is an optional enhancement.
+			}
+		};
+
+		requestAnimationFrame(() => {
+			branches.forEach((branch) => branch.addEventListener('toggle', () => {
+				if (branch.open && branch.dataset.hasSections === 'true') {
+					branch.dataset.sectionsOpen = 'true';
+				} else if (!branch.open) {
+					delete branch.dataset.sectionsOpen;
+				}
+				saveState();
+			}));
+		});
+
+		container.addEventListener('scroll', saveState, { passive: true });
+		container.querySelectorAll('a').forEach((link) => link.addEventListener('click', saveState));
+		window.addEventListener('pagehide', saveState);
+	};
+
+	const desktopNavigation = document.querySelector<HTMLElement>('.tree-local-navigation');
+	const mobileNavigation = document.querySelector<HTMLElement>('.mobile-site-nav[data-navigation-root]');
+
+	if (desktopNavigation) setupNavigationState(desktopNavigation, 'desktop');
+	if (mobileNavigation) setupNavigationState(mobileNavigation, 'mobile');
+</script>

package/src/content.config.ts

@@ -23,21 +23,15 @@ const siteThemeSchema = themeVisualSchema;
 
 const site = defineCollection({
 	loader: glob({
-		pattern: ['content.md', 'pages/**/content.md'],
+		pattern: 'pages/**/content.md',
 		base: pathToFileURL(siteDir),
 		generateId: ({ entry }) => {
-			if (entry === 'content.md') {
-				return siteEntryId;
-			}
-
 			const pageEntryDirectory = entry.split('/').slice(1, -1).join('/');
 			const pageDirectory = pageEntryDirectory
 				.split('/')
 				.filter((segment) => segment !== 'pages')
 				.join('/pages/');
-			return pageDirectory
-				? `${siteEntryId.replace(/-content$/, '')}-page-${encodePageDirectoryPath(parsePageDirectoryPath(pageDirectory, `page directory pages/${pageEntryDirectory}`).pageDirectory)}`
-				: entry.replace(/[^a-zA-Z0-9-]+/g, '-').replace(/^-+|-+$/g, '');
+			return `${siteEntryId.replace(/-content$/, '')}-page-${encodePageDirectoryPath(parsePageDirectoryPath(pageDirectory, `page directory pages/${pageEntryDirectory}`).pageDirectory)}`;
 		},
 	}),
 	schema: siteSchema,

package/src/layouts/BaseLayout.astro

@@ -20,6 +20,7 @@ type Presentation = {
 type VisualTheme = {
 	layout: {
 		gutter: { desktop: string; mobile: string };
+		localNavigationGap: string;
 		pageWidth: string;
 		spacing: {
 			firstSectionTop: { desktop: string; mobile: string };
@@ -36,6 +37,11 @@ type VisualTheme = {
 		maxAvailableHeightPercent: { desktop: number; mobile: number };
 	};
 	typography: { fontFamily: string };
+	shape: {
+		radiusSmall: string;
+		radiusMedium: string;
+		radiusLarge: string;
+	};
 };
 
 interface Props {
@@ -72,7 +78,11 @@ const documentStyle = [
 	`scroll-behavior: ${scrollBehavior}`,
 	...Object.entries(getPresentationCssVariables(presentation)).map(([name, value]) => `${name}: ${value}`),
 	`--font-sans: ${visualTheme.typography.fontFamily}`,
+	`--shape-radius-small: ${visualTheme.shape.radiusSmall}`,
+	`--shape-radius-medium: ${visualTheme.shape.radiusMedium}`,
+	`--shape-radius-large: ${visualTheme.shape.radiusLarge}`,
 	`--page-width: ${visualTheme.layout.pageWidth}`,
+	`--local-navigation-gap: ${visualTheme.layout.localNavigationGap}`,
 	`--content-gutter-desktop: ${visualTheme.layout.gutter.desktop}`,
 	`--content-gutter-mobile: ${visualTheme.layout.gutter.mobile}`,
 	`--space-nav-to-first-section-desktop: ${layoutSpacing.firstSectionTop.desktop}`,

package/src/lib/pageThemes.ts

@@ -3,7 +3,9 @@ import path from 'node:path';
 import {
 	validatePageThemeYamlStructure,
 } from '../../scripts/lib/site-content.mjs';
+import { pageThemeSchema } from '../../scripts/lib/schema-definitions.mjs';
 import { sitePagesDir, sitePagesLabel } from '../../scripts/lib/site-paths.mjs';
+import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
 import { parseYamlConfig } from '../../scripts/lib/yaml-config.mjs';
 import { getPageDirectoryAncestors } from '../../scripts/lib/page-model.mjs';
 
@@ -15,7 +17,9 @@ type PageTheme = {
 export const getPageTheme = async (pageDirectory: string | null): Promise<PageTheme | null> => {
 	if (!pageDirectory) return null;
 
-	const pageAncestors = getPageDirectoryAncestors(pageDirectory).reverse();
+	const pageAncestors = getPageDirectoryAncestors(pageDirectory);
+	let inheritedData: Record<string, unknown> = {};
+	const inheritedIds: string[] = [];
 	for (const pageAncestor of pageAncestors) {
 		const themeSegments = pageAncestor.split('/');
 		const themePath = path.join(sitePagesDir, ...themeSegments, 'theme.yaml');
@@ -27,16 +31,14 @@ export const getPageTheme = async (pageDirectory: string | null): Promise<PageTh
 		const themeLabel = `${sitePagesLabel}/${themeSegments.join('/')}/theme.yaml`;
 
 		const data = parseYamlConfig(source, themeLabel, {
+			schema: pageThemeSchema,
 			validateStructure: validatePageThemeYamlStructure,
 		});
-		if (Object.hasOwn(data, 'navigation')) {
-			throw new Error(`${themeLabel} may not define navigation. Set the site-wide navigation mode in the root theme.yaml.`);
-		}
-		return {
-			id: `pages/${themeSegments.join('/')}/theme`,
-			data,
-		};
+		inheritedData = mergePageThemeConfig(inheritedData, data);
+		inheritedIds.push(`pages/${themeSegments.join('/')}/theme`);
 	}
 
-	return null;
+	return inheritedIds.length > 0
+		? { id: inheritedIds.join(' + '), data: inheritedData }
+		: null;
 };

package/src/lib/sectionContent.ts

@@ -246,11 +246,7 @@ const applyH3HeadingIds = (
 	return result;
 };
 
-const getImageSourceKey = (page: SitePage, image: string) => (
-	page.pageDirectory
-		? `pages/${page.pageDirectory}/images/${image}`
-		: `images/${image}`
-);
+const getImageSourceKey = (page: SitePage, image: string) => `pages/${page.pageDirectory}/images/${image}`;
 
 const renderInlineNoteMarkdown = async (markdown: string) => {
 	const result = await markdownToHtml(markdown, {

package/src/lib/siteNavigation.ts

@@ -1,8 +1,9 @@
-import type { SectionNavigation } from './sectionContent';
+import type { HeadingNavigation, SectionNavigation } from './sectionContent';
 import type { SitePage } from './sitePages';
 
 export type PageNavigationEntry = {
 	page: SitePage;
+	headings: HeadingNavigation[];
 	sections: SectionNavigation[];
 };
 

package/src/lib/sitePages.ts

@@ -1,5 +1,6 @@
 import type { CollectionEntry } from 'astro:content';
 import { decodePageDirectoryPath, parsePageDirectoryPath } from '../../scripts/lib/page-model.mjs';
+import { homePageDirectory } from '../../scripts/lib/site-conventions.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
 
@@ -14,7 +15,7 @@ export type SitePage = {
 	pageDirectories: string[];
 	pathSegment: string;
 	pathname: string;
-	pageDirectory: string | null;
+	pageDirectory: string;
 	pageId: string;
 	pageIds: string[];
 	pageOrders: number[];
@@ -37,13 +38,17 @@ const stripPageIdPrefix = (id: string) => {
 	}
 };
 
-export const isHomePageEntry = (entry: SiteEntry) => stripPageIdPrefix(entry.id) === null;
+export const isHomePageEntry = (entry: SiteEntry) => stripPageIdPrefix(entry.id) === homePageDirectory;
 
-const getPageDirectory = (entry: SiteEntry) => isHomePageEntry(entry) ? null : stripPageIdPrefix(entry.id);
+const getPageDirectory = (entry: SiteEntry) => {
+	const pageDirectory = stripPageIdPrefix(entry.id);
+	if (!pageDirectory) throw new Error(`Page entry "${entry.id}" has no valid page directory.`);
+	return pageDirectory;
+};
 
 const getPageMetadata = (entry: SiteEntry) => {
 	const pageDirectory = getPageDirectory(entry);
-	return pageDirectory ? parsePageDirectoryPath(pageDirectory, `page directory ${pageDirectory}`) : null;
+	return parsePageDirectoryPath(pageDirectory, `page directory ${pageDirectory}`);
 };
 
 const getPagePathname = (pathSegment: string) => pathSegment ? `/${pathSegment}/` : '/';
@@ -78,29 +83,29 @@ const getPageTitle = (entry: SiteEntry) => {
 export const getSitePage = (entry: SiteEntry): SitePage => {
 	const isHome = isHomePageEntry(entry);
 	const pageMetadata = getPageMetadata(entry);
-	const pageDirectory = pageMetadata?.pageDirectory ?? null;
-	const pageId = pageMetadata?.pageId ?? '';
-	const pagePath = pageMetadata?.pagePath ?? '';
+	const pageDirectory = pageMetadata.pageDirectory;
+	const pageId = pageMetadata.pageId;
+	const pagePath = pageMetadata.pagePath;
 	const pathSegment = isHome ? '' : pagePath;
 	const navigation = entry.data.navigation ?? {};
 
 	return {
 		entry,
 		isHome,
-		depth: pageMetadata?.depth ?? 0,
+		depth: pageMetadata.depth,
 		navigation: {
 		listed: navigation.listed ?? true,
-			order: isHome ? 0 : pageMetadata?.pageOrder ?? 100,
+			order: isHome ? 0 : pageMetadata.pageOrder,
 		},
 		pathSegment,
 		pathname: getPagePathname(pathSegment),
 		pageDirectory,
-		pageDirectories: pageMetadata?.pageDirectories ?? [],
+		pageDirectories: pageMetadata.pageDirectories,
 		pageId,
-		pageIds: pageMetadata?.pageIds ?? [],
-		pageOrders: pageMetadata?.pageOrders ?? [],
+		pageIds: pageMetadata.pageIds,
+		pageOrders: pageMetadata.pageOrders,
 		pagePath,
-		parentPagePath: pageMetadata?.parentPagePath ?? null,
+		parentPagePath: isHome ? null : pageMetadata.parentPagePath,
 		title: getPageTitle(entry),
 	};
 };
@@ -112,6 +117,9 @@ export const getSitePages = (entries: SiteEntry[]) => {
 	const siblingPageOrders = new Map<string, SitePage>();
 
 	for (const page of pages) {
+		if (page.isHome && page.navigation.listed === false) {
+			throw new Error(`${homePageDirectory} is the required homepage and cannot set navigation.listed to false.`);
+		}
 		const existing = pathnames.get(page.pathname);
 		if (existing) {
 			throw new Error(`Duplicate page path "${page.pathname}" from "${existing.entry.id}" and "${page.entry.id}".`);
@@ -121,7 +129,7 @@ export const getSitePages = (entries: SiteEntry[]) => {
 
 		if (page.isHome) continue;
 
-		const siblingScope = page.parentPagePath ?? '';
+		const siblingScope = page.pageDirectories.slice(0, -1).join('/pages/');
 		const pageIdKey = `${siblingScope}\0${page.pageId}`;
 		const existingPageId = siblingPageIds.get(pageIdKey);
 		if (existingPageId) {
@@ -138,6 +146,9 @@ export const getSitePages = (entries: SiteEntry[]) => {
 
 		siblingPageOrders.set(pageOrderKey, page);
 	}
+	if (!pages.some(({ isHome }) => isHome)) {
+		throw new Error(`Homepage page entry ${homePageDirectory} is missing.`);
+	}
 
 	return pages.sort((left, right) => (
 		left.isHome ? -1 : right.isHome ? 1 :

package/src/pages/index.astro

@@ -2,9 +2,10 @@
 import { getCollection } from 'astro:content';
 import SitePage from '../components/SitePage.astro';
 import { isHomePageEntry } from '../lib/sitePages';
+import { homePageDirectory } from '../../scripts/lib/site-conventions.mjs';
 
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
-const siteContentLabel = `${siteDirectory || 'site'}/content.md`;
+const siteContentLabel = `${siteDirectory || 'site'}/pages/${homePageDirectory}/content.md`;
 const entries = await getCollection('site');
 const site = entries.find(isHomePageEntry);