@janga/norna 0.7.27 → 0.7.28

package/src/lib/navigationStateScript.mjs

@@ -0,0 +1,76 @@
+import { createNavigationStateHelpers } from './navigationState.mjs';
+
+// Serialized into a parser-time script. Like the helpers, this entry point must
+// only reference its arguments and browser globals, never module-scope values.
+function restoreEarlyNavigationState(createHelpers) {
+	// Restore branches as the parser adds them, before they can be painted.
+	// pagereveal may precede this tree and is unavailable in some browsers.
+	const script = document.currentScript;
+	const container = script?.parentElement;
+	if (!container?.hasAttribute('data-navigation-root')) return;
+	const scope = script.dataset.navigationStateScope;
+	const { storageKeys, initialState, arrivalPolicy, readEntryState, pageIsOpen, sectionsAreOpen } = createHelpers();
+	const initialized = new WeakSet();
+	const restore = (refresh = false) => {
+		try {
+			// Establish the scroll limit before restoring a position near its end.
+			if (scope === 'desktop' && container.parentElement) {
+				const flowTop = container.parentElement.getBoundingClientRect().top + window.scrollY;
+				const stickyTop = parseFloat(getComputedStyle(container).top) || 0;
+				container.style.setProperty('--navigation-scrollport-top', `${Math.ceil(Math.max(flowTop, stickyTop))}px`);
+			}
+			const { stateKey, sharedStateKey } = storageKeys(scope,
+				container.dataset.navigationRoot, container.dataset.navigationStateRoot);
+			const state = initialState(sessionStorage.getItem(stateKey), sessionStorage.getItem(sharedStateKey),
+				readEntryState(stateKey));
+			const policy = arrivalPolicy(state);
+			for (const branch of container.querySelectorAll('.navigation-page-disclosure[data-page-path]')) {
+				if (!refresh && initialized.has(branch)) continue;
+				branch.open = pageIsOpen(state.disclosure, branch.dataset, policy);
+				initialized.add(branch);
+			}
+			for (const branch of container.querySelectorAll('.navigation-page-sections-disclosure[data-page-path]')) {
+				if (!refresh && initialized.has(branch)) continue;
+				branch.open = sectionsAreOpen(state.disclosure, branch.dataset, policy);
+				initialized.add(branch);
+			}
+			let scrollContainer = container;
+			for (let candidate = container; candidate; candidate = candidate.parentElement) {
+				if (/auto|scroll/.test(getComputedStyle(candidate).overflowY)) {
+					scrollContainer = candidate;
+					break;
+				}
+			}
+			if (state.local.scrollTop > 0 || state.fromEntry) scrollContainer.scrollTop = Math.max(0, state.local.scrollTop);
+			if (scope === 'desktop' && !state.fromEntry && state.local.scrollTop <= 0) {
+				// A direct arrival in a short viewport can put the selected page
+				// below the fold. Reveal its title now, before heading following is
+				// paused. An already visible title or restored position stays put.
+				const node = container.querySelector('[data-navigation-current-page="true"]');
+				const link = node?.querySelector(':scope > .navigation-page-link, :scope > .navigation-page-open-link');
+				if (link && link.getBoundingClientRect().width > 0) {
+					const box = scrollContainer.getBoundingClientRect();
+					const controls = container.querySelector('[data-tree-controls]')?.getBoundingClientRect();
+					const top = Math.max(box.top, controls?.bottom ?? box.top) + 12;
+					const bottom = box.bottom - 16;
+					const row = link.getBoundingClientRect();
+					if (row.top < top) scrollContainer.scrollTop += row.top - top;
+					else if (row.bottom > bottom) scrollContainer.scrollTop += row.bottom - bottom;
+				}
+			}
+		} catch {
+			// Ordinary links and native details remain usable without storage.
+		}
+	};
+	restore();
+	const observer = new MutationObserver(() => restore());
+	observer.observe(container, { childList: true, subtree: true });
+	document.addEventListener('DOMContentLoaded', () => {
+		restore();
+		observer.disconnect();
+	}, { once: true });
+	// Reapply before a transition snapshot, including a cached history entry.
+	window.addEventListener('pagereveal', () => restore(true));
+}
+
+export const getNavigationStateScript = () => `(${restoreEarlyNavigationState.toString()})(${createNavigationStateHelpers.toString()});`;

package/src/lib/navigationVisibility.ts

@@ -0,0 +1,9 @@
+export const isNavigationElementDisplayed = (element: HTMLElement) => {
+	if (!element.getClientRects().length || getComputedStyle(element).visibility === 'hidden') return false;
+	// Closed native details can retain layout rectangles for their hidden links.
+	for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+		if (parent instanceof HTMLDetailsElement && !parent.open
+			&& !parent.querySelector(':scope > summary')?.contains(element)) return false;
+	}
+	return true;
+};

package/src/lib/pageThemes.ts

@@ -1,44 +1,7 @@
-import { readFile } from 'node:fs/promises';
-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';
+import { selectPageTheme } from '../../scripts/lib/theme-packages.mjs';
+import { siteDir } from '../../scripts/lib/site-paths.mjs';
 
-type PageTheme = {
-	id: string;
-	data: Record<string, unknown>;
-};
-
-export const getPageTheme = async (pageDirectory: string | null): Promise<PageTheme | null> => {
-	if (!pageDirectory) return null;
-
-	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');
-		const source = await readFile(themePath, 'utf8').catch((error) => {
-			if (error?.code === 'ENOENT') return null;
-			throw error;
-		});
-		if (!source) continue;
-		const themeLabel = `${sitePagesLabel}/${themeSegments.join('/')}/theme.yaml`;
-
-		const data = parseYamlConfig(source, themeLabel, {
-			schema: pageThemeSchema,
-			validateStructure: validatePageThemeYamlStructure,
-		});
-		inheritedData = mergePageThemeConfig(inheritedData, data);
-		inheritedIds.push(`pages/${themeSegments.join('/')}/theme`);
-	}
-
-	return inheritedIds.length > 0
-		? { id: inheritedIds.join(' + '), data: inheritedData }
-		: null;
+export const getPageTheme = async (pageDirectory: string) => {
+	const { selected } = await selectPageTheme({ siteRoot: siteDir, pageDirectory });
+	return { id: selected.label, data: selected.config };
 };

package/src/lib/sectionContent.ts

@@ -1,3 +1,4 @@
+import { getPageImageSourceKey } from '../../scripts/lib/site-conventions.mjs';
 import { markdownToHtml } from 'satteri';
 import { groupRenderedTabs } from '../../scripts/lib/content-tabs.mjs';
 import projectConfig from '../../scripts/lib/project-config.mjs';
@@ -111,7 +112,7 @@ const applyH3HeadingIds = (
 	return result;
 };
 
-const getImageSourceKey = (page: SitePage, image: string) => `pages/${page.pageDirectory}/images/${image}`;
+const getImageSourceKey = (page: SitePage, image: string) => getPageImageSourceKey(page.pageDirectory, image);
 
 const renderHeadingTitleHtml = async (headingSource: string) => {
 	const headingMarkdown = headingSource
@@ -178,7 +179,7 @@ const resolveContentBlocks = async (
 		}
 		if (block.type === 'page-list') {
 			if (childPages.length === 0) {
-				throw new Error(`${page.contentLabel} line ${block.line}: page-list has no listed direct child pages to display. Navigation categories are not pages. Add a listed direct child page or remove the block.`);
+				throw new Error(`${page.contentLabel} line ${block.line}: page-list has no listed direct child pages to display. Add a listed direct child page or remove the block.`);
 			}
 			resolvedBlocks.push({
 				type: 'page-list',

package/src/lib/siteNavigation.ts

@@ -7,6 +7,12 @@ import {
 	getSequentialPageNavigation as getSequentialPageNavigationShared,
 } from '../../scripts/lib/site-navigation-tree.mjs';
 
+export type CategoryDestinationMap = ReadonlyMap<string, { target: SitePage | null }>;
+
+export const getNavigationDestination = (node: SiteNode, categoryDestinations?: CategoryDestinationMap): SiteNode => (
+	categoryDestinations?.get(node.pathname)?.target ?? node
+);
+
 export type SiteNavigationEntry = {
 	node: SiteNode;
 	headings: HeadingNavigation[];

package/src/lib/sitePages.ts

@@ -3,10 +3,10 @@ import path from 'node:path';
 import { decodePageEntryId, parsePageDirectoryPath } from '../../scripts/lib/page-model.mjs';
 import { parsePageMarkdown } from '../../scripts/lib/page-markdown.mjs';
 import { readSiteFile } from '../../scripts/lib/site-content.mjs';
-import { homePageDirectory } from '../../scripts/lib/site-conventions.mjs';
+import { homePageDirectory, getPageSourceDirectory } from '../../scripts/lib/site-conventions.mjs';
 import { assertCategoryDestinationModel, createCategoryDestinationModel } from '../../scripts/lib/category-destinations.mjs';
 import { getSiteStructure } from '../../scripts/lib/site-structure.mjs';
-import { siteDirLabel, sitePagesDir, sitePagesLabel } from '../../scripts/lib/site-paths.mjs';
+import { siteDir, siteDirLabel } from '../../scripts/lib/site-paths.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
 
@@ -44,6 +44,7 @@ export type SitePage = SiteNodeBase & {
 export type SiteCategory = SiteNodeBase & {
 	kind: 'category';
 	categorySourceLabel: string;
+	description?: string;
 };
 
 export type SiteNode = SitePage | SiteCategory;
@@ -75,8 +76,9 @@ const compareNumberPaths = (left: number[], right: number[]) => {
 
 const readPageMarkdownDocument = async (entry: SiteEntry) => {
 	const pageDirectory = getPageDirectory(entry);
-	const contentLabel = `${sitePagesLabel}/${pageDirectory}/content.md`;
-	const contentPath = path.join(sitePagesDir, pageDirectory, 'content.md');
+	const contentRelativePath = [getPageSourceDirectory(pageDirectory), 'content.md'].filter(Boolean).join('/');
+	const contentLabel = `${siteDirLabel}/${contentRelativePath}`;
+	const contentPath = path.join(siteDir, contentRelativePath);
 	const { body, frontmatter } = await readSiteFile(contentPath, contentLabel);
 	const markdownDocument = await parsePageMarkdown(body, {
 		label: contentLabel,
@@ -141,6 +143,7 @@ const createSiteCategory = (category: Awaited<ReturnType<typeof getSiteStructure
 	pathSegment: category.pagePath,
 	pathname: getPagePathname(category.pagePath),
 	categorySourceLabel: category.categorySourceLabel,
+	description: category.description,
 	pageDirectory: category.pageDirectory,
 	pageDirectories: category.pageDirectories,
 	pageId: category.pageId,
@@ -161,7 +164,7 @@ const createSitePages = async (entries: SiteEntry[]) => {
 
 	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.`);
+			throw new Error(`The homepage at ${siteDirLabel}/root/content.md cannot set navigation.listed to false.`);
 		}
 		const existing = pathnames.get(page.pathname);
 		if (existing) {
@@ -190,7 +193,7 @@ const createSitePages = async (entries: SiteEntry[]) => {
 		siblingPageOrders.set(pageOrderKey, page);
 	}
 	if (!pages.some(({ isHome }) => isHome)) {
-		throw new Error(`Homepage page entry ${homePageDirectory} is missing.`);
+		throw new Error(`Homepage content ${siteDirLabel}/root/content.md is missing.`);
 	}
 
 	return pages.sort((left, right) => (

package/src/pages/404.astro

@@ -20,7 +20,7 @@ const homePage = sitePages.find((page) => page.isHome);
 if (!homePage) throw new Error('The required homepage is missing from the site page model.');
 
 const [siteTheme] = await getCollection('theme');
-if (!siteTheme) throw new Error('site/theme.yaml is required. Add a root theme before building the site.');
+if (!siteTheme) throw new Error('site/root/tree-theme.yaml is required. Add the shared site theme before building the site.');
 const [sitewide] = await getCollection('sitewide');
 const sitewideData = sitewide?.data ?? {};
 const siteThemeData = siteTheme.data;

package/src/pages/[...slug].astro

@@ -45,28 +45,18 @@ export async function getStaticPaths() {
 		? [{ params: { slug: 'search' }, props: { searchPage: true } }]
 		: [];
 
-	const categoryPaths = siteModel.categoryDestinations.destinations.map((destination) => ({
-		params: { slug: destination.category.pathSegment },
-		props: destination.kind === 'redirect' ? {
-			alias: {
-				targetPathname: destination.target.pathname,
-				targetTitle: destination.target.title,
-				categoryTitle: destination.category.title,
-			},
-		} : { categoryPath: destination.pathname },
-	}));
-	return [...pagePaths, ...aliasPaths, ...searchPath, ...categoryPaths];
+	return [...pagePaths, ...aliasPaths, ...searchPath];
 }
 
-const { alias, entry, searchPage, categoryPath } = Astro.props;
+const { alias, entry, searchPage } = Astro.props;
 
-if (!searchPage && !alias && !categoryPath && (!entry || isHomePageEntry(entry))) {
+if (!searchPage && !alias && (!entry || isHomePageEntry(entry))) {
 	throw new Error('Page entry is missing.');
 }
 
 const currentPage = entry ? await getSitePage(entry) : null;
 
-if (!searchPage && !alias && !categoryPath && !currentPage?.pathSegment) {
+if (!searchPage && !alias && !currentPage?.pathSegment) {
 	throw new Error(`Page "${entry.id}" needs a page id.`);
 }
 ---
@@ -75,4 +65,4 @@ if (!searchPage && !alias && !categoryPath && !currentPage?.pathSegment) {
 	? <SearchPage />
 	: alias
 	? <PageAliasRedirect targetPathname={alias.targetPathname} targetTitle={alias.targetTitle} categoryTitle={alias.categoryTitle} />
-	: <SitePage entry={entry} categoryPath={categoryPath} />}
+	: <SitePage entry={entry} />}

package/src/pages/index.astro

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