@janga/norna 0.7.17 → 0.7.22

package/src/components/SiteNavigation.astro

@@ -2,8 +2,14 @@
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
-import { getListedPageNavigationTree, type PageNavigationEntry } from '../lib/siteNavigation';
-import type { SitePage } from '../lib/sitePages';
+import {
+	getFirstPageInNavigationNode,
+	getListedSiteNavigationTree,
+	type SiteNavigationEntry,
+	type SiteNavigationNode,
+} from '../lib/siteNavigation';
+import type { SiteNode, SitePage } from '../lib/sitePages';
+import DisplaySettings from './DisplaySettings.astro';
 import NavigationPageTree from './NavigationPageTree.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
 
@@ -19,12 +25,24 @@ interface Props {
 		height?: string;
 	};
 	currentPage: SitePage;
-	pageNavigation: PageNavigationEntry[];
+	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
 	frameColors: FrameColors;
+	readerPreferences: {
+		controls: {
+			appearance: boolean;
+			readingWidth: boolean;
+			focusReading: boolean;
+		};
+		defaults: {
+			appearance: 'system' | 'light' | 'dark';
+			readingWidth: 'narrow' | 'standard' | 'wide';
+			focusReading: 'off' | 'on';
+		};
+	};
 }
 
-const { logo, currentPage, pageNavigation, navigationMode, frameColors } = Astro.props;
+const { logo, currentPage, navigationEntries, navigationMode, frameColors, readerPreferences } = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
 	: frameColors.backgroundColor;
@@ -33,79 +51,132 @@ const navigationStyle = [
 	`--site-top-text-color: ${frameColors.textColor}`,
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
-const siteNavigationPages = pageNavigation.filter(({ page }) => page.isHome || page.navigation.listed);
-const siteNavigationTree = getListedPageNavigationTree(pageNavigation);
+const siteNavigationTree = getListedSiteNavigationTree(navigationEntries);
 const topLevelNavigation = siteNavigationTree;
-const showSiteNavigation = siteNavigationPages.some(({ page }) => !page.isHome);
-const homePage = pageNavigation.find(({ page }) => page.isHome)?.page ?? currentPage;
-const currentPageNavigation = pageNavigation.find(({ page }) => page.pathname === currentPage.pathname);
+const showSiteNavigation = topLevelNavigation.some(({ node }) => !node.isHome);
+const homeNode = navigationEntries.find(({ node }) => node.isHome)?.node;
+const homePage = homeNode?.kind === 'page' ? homeNode : currentPage;
+const currentPageNavigation = navigationEntries.find(({ node }) => node.kind === 'page' && node.pathname === currentPage.pathname);
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
+const isCurrentBranch = (node: SiteNode) => currentPage.pageDirectory === node.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`);
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+const getNavigationPage = (node: SiteNavigationNode) => getFirstPageInNavigationNode(node);
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
+const showSinglePageTopLink = !showSiteNavigation;
+const currentPageSectionCount = currentPageNavigation?.sections.length ?? 0;
 const hasCurrentPageSectionMenu = Boolean(
-	currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+	currentPageNavigation && (
+		showSinglePageTopLink
+			? currentPageSectionCount > 0
+			: hasSectionMenu(currentPageNavigation.sections)
+	),
+);
+const hasTreePageContents = Boolean(
+	navigationMode === 'tree' && currentPageNavigation?.headings.length,
+);
+const showPageNavigation = Boolean(
+	navigationMode !== 'tree'
+	&& currentPageNavigation
+	&& (showSinglePageTopLink || hasCurrentPageSectionMenu),
 );
-const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu;
-const showNavigationRow = showMobileNavigation || Boolean(logo);
-const hasSectionNavigation = hasCurrentPageSectionMenu;
+const showSinglePageTitleOnly = showSinglePageTopLink && currentPageSectionCount === 0;
+const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
+const showReaderControls = Object.values(readerPreferences.controls).some(Boolean);
+const showDesktopNavigationRow = showSiteNavigation || Boolean(logo) || showReaderControls;
+const showNavigationRow = showMobileNavigation || showDesktopNavigationRow;
+const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents || navigationMode === 'tree';
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
 
 <header
-	class:list={['site-top', { 'site-top-has-site-nav': showSiteNavigation }]}
+	class:list={['site-top', {
+		'site-top-has-site-nav': showSiteNavigation,
+		'site-top-has-navigation-row': showDesktopNavigationRow,
+	}]}
 	data-navigation-mode={navigationMode}
 	style={navigationStyle}
 >
 	{showNavigationRow && (
-		<div class="site-nav-row">
+		<div class:list={['site-nav-row', { 'site-nav-row-mobile-only': !showDesktopNavigationRow }]}>
 			{logo && (
-				<a class="site-brand" href={pageHref(homePage)}>
-					<img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} />
-				</a>
+				<div class="site-nav-leading">
+					<a class="site-brand" href={pageHref(homePage)}>
+						<img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} />
+					</a>
+				</div>
 			)}
 
-			{showSiteNavigation && (
-				<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
+			<div class="site-nav-actions">
+				{showSiteNavigation && (
+					<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 					<ul>
-					{topLevelNavigation.map((node) => (
-						<li class:list={['site-nav-item', {
-							'site-nav-item-has-submenu': node.children.length > 0,
-							'site-nav-item-current-branch': !node.page.isHome && currentPage.pagePath.startsWith(`${node.page.pagePath}/`),
-						}]}>
-							<a href={pageHref(node.page)} aria-current={isCurrentPage(node.page) ? 'page' : undefined}>
-								{node.page.title}
-							</a>
-							{node.children.length > 0 && (
-								<div class="site-nav-submenu">
-									<nav aria-label={`${node.page.title} ${projectConfig.locale.labels.siteNavigation}`}>
-										<NavigationPageTree nodes={[node]} currentPage={currentPage} variant="submenu" />
-									</nav>
+					{topLevelNavigation.map((navigationNode) => {
+						const destination = getNavigationPage(navigationNode);
+						if (!destination) return null;
+						const nodeIsCurrentPage = navigationNode.node.kind === 'page' && isCurrentPage(navigationNode.node);
+						return (
+							<li class:list={['site-nav-item', {
+								'site-nav-item-has-submenu': navigationMode !== 'tree' && navigationNode.children.length > 0,
+								'site-nav-item-current-branch': !nodeIsCurrentPage && isCurrentBranch(navigationNode.node),
+							}]}>
+								<a href={pageHref(destination)} aria-current={nodeIsCurrentPage ? 'page' : undefined}>
+									{navigationNode.node.title}
+								</a>
+								{navigationMode !== 'tree' && navigationNode.children.length > 0 && (
+									<div class="site-nav-submenu">
+										<nav aria-label={`${navigationNode.node.title} ${projectConfig.locale.labels.siteNavigation}`}>
+											<NavigationPageTree nodes={[navigationNode]} currentPage={currentPage} variant="submenu" />
+										</nav>
 									</div>
 								)}
 							</li>
-						))}
+						);
+					})}
 					</ul>
-				</nav>
-			)}
+					</nav>
+				)}
 
-			{showMobileNavigation && <details class="mobile-nav-menu">
+				{showReaderControls && (
+					<DisplaySettings controls={readerPreferences.controls} defaults={readerPreferences.defaults} />
+				)}
+
+				{showMobileNavigation && <details class="mobile-nav-menu">
 			<summary>
 				<span>{projectConfig.locale.labels.navigationMenu}</span>
 			</summary>
 			<div class="mobile-nav-panel">
-				<div class="mobile-site-nav">
+			<div class="mobile-site-nav" data-navigation-root={pageHref(homePage)}>
 					{showSiteNavigation && (
 						<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.siteNavigation}>
 							<h2 tabindex="-1">{projectConfig.locale.labels.siteNavigation}</h2>
-							<NavigationPageTree nodes={siteNavigationTree} currentPage={currentPage} variant="mobile" />
+							<NavigationPageTree
+								nodes={siteNavigationTree}
+								currentPage={currentPage}
+								variant="mobile"
+								integratePageSections={navigationMode === 'tree'}
+							/>
 						</nav>
 					)}
 
-					{hasCurrentPageSectionMenu && currentPageNavigation && (
+					{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && (
 						<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.pageNavigation}>
-							<h2 tabindex="-1">{projectConfig.locale.labels.pageNavigation}</h2>
+							{!showSinglePageTopLink && (
+								<h2 tabindex="-1">{projectConfig.locale.labels.pageNavigation}</h2>
+							)}
 							<ul class="mobile-nav-sections">
+								{showSinglePageTopLink && (
+									<li class="mobile-nav-page-top-item">
+										<a
+											class="mobile-nav-destination mobile-nav-page-top"
+											data-page-top
+											href={pageHref(currentPage)}
+										>
+											{currentPage.title}
+										</a>
+									</li>
+								)}
 									{currentPageNavigation.sections.map((section) => (
 										<li>
 											<a class="mobile-nav-destination" href={`#${section.id}`}>{section.title}</a>
@@ -116,15 +187,28 @@ const hasSectionNavigation = hasCurrentPageSectionMenu;
 					)}
 				</div>
 			</div>
-		</details>}
+				</details>}
+			</div>
 		</div>
 	)}
 
-	{hasCurrentPageSectionMenu && currentPageNavigation && (
-		<nav class="page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
+	{showPageNavigation && currentPageNavigation && (
+		<nav
+			class:list={['page-nav', { 'page-nav-title-only': showSinglePageTitleOnly }]}
+			aria-label={projectConfig.locale.labels.pageNavigation}
+		>
 			<div class="page-nav-inner">
-				<span class="page-nav-label">{projectConfig.locale.labels.pageNavigation}</span>
+				{!showSinglePageTopLink && (
+					<span class="page-nav-label">{projectConfig.locale.labels.pageNavigation}</span>
+				)}
 				<ul>
+					{showSinglePageTopLink && (
+						<li class="page-nav-page-top-item">
+							<a class="page-nav-page-top" data-page-top href={pageHref(currentPage)}>
+								{currentPage.title}
+							</a>
+						</li>
+					)}
 					{currentPageNavigation.sections.map((section) => (
 						<li>
 							<a href={`#${section.id}`}>{section.title}</a>
@@ -137,4 +221,4 @@ const hasSectionNavigation = hasCurrentPageSectionMenu;
 
 </header>
 
-{hasSectionNavigation && <SectionNavigationScript />}
+{needsNavigationScript && <SectionNavigationScript />}

package/src/components/SitePage.astro

@@ -1,22 +1,22 @@
 ---
 import { getCollection, type CollectionEntry } from 'astro:content';
-import path from 'node:path';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
-import SiteNotesScript from './SiteNotesScript.astro';
 import SiteSection from './SiteSection.astro';
-import { getHeadingNavigation, getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
+import SiteTreeNavigation from './SiteTreeNavigation.astro';
+import TreeNavigationScript from './TreeNavigationScript.astro';
+import { getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
 import { getPageTheme } from '../lib/pageThemes';
-import { getSitePage, getSitePages, type SitePage } from '../lib/sitePages';
+import { getSiteModel, type SitePage } from '../lib/sitePages';
+import { flattenSiteNavigationTree, getListedSiteNavigationTree } from '../lib/siteNavigation';
 import { getToday, isVisibleToday } from '../lib/visibility';
 import { getLogoAsset } from '../lib/sitePublicAssets';
-import { readSiteFile } from '../../scripts/lib/site-content.mjs';
 import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
-import { siteContentPath, sitePagesDir } from '../../scripts/lib/site-paths.mjs';
 import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
-import { resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
+import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
+import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
 
@@ -26,20 +26,10 @@ interface Props {
 
 const { entry } = Astro.props;
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
-const sitePages = getSitePages(await getCollection('site'));
-const currentPage = getSitePage(entry);
-const getPageContentFile = (page: SitePage) => page.pageDirectory
-	? {
-		label: `${siteDirectory || 'site'}/pages/${page.pageDirectory}/content.md`,
-		path: path.join(sitePagesDir, page.pageDirectory, 'content.md'),
-	}
-	: {
-		label: `${siteDirectory || 'site'}/content.md`,
-		path: siteContentPath,
-	};
-const pageContentFile = getPageContentFile(currentPage);
-const siteContentLabel = pageContentFile.label;
-const rawMarkdown = (await readSiteFile(pageContentFile.path, pageContentFile.label)).body;
+const siteModel = await getSiteModel(await getCollection('site'));
+const { nodes: siteNodes, pages: sitePages } = siteModel;
+const currentPage = sitePages.find((page) => page.entry.id === entry.id);
+if (!currentPage) throw new Error(`Page entry "${entry.id}" 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.');
@@ -49,7 +39,7 @@ const sitewideData = sitewide?.data ?? {};
 const homePage = sitePages.find((page) => page.isHome) ?? currentPage;
 const siteThemeData = siteTheme.data;
 const pageTheme = await getPageTheme(currentPage.pageDirectory);
-const themeData = pageTheme?.data ?? siteThemeData;
+const themeData = mergePageThemeConfig(siteThemeData, pageTheme?.data);
 const themeLabel = pageTheme
 	? `${siteDirectory || 'site'}/${pageTheme.id}`
 	: `${siteDirectory || 'site'}/${siteTheme.id}`;
@@ -63,13 +53,10 @@ const logo = logoAsset
 		height: logoSettings?.height,
 	}
 	: undefined;
-const pagePresentation = resolvePagePresentation(themeData, themeLabel);
-const frameColors = resolveFrameColors({ theme: themeData, sourceLabel: themeLabel });
 const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, currentPage, siteContentLabel);
+const resolvedSections = await getSectionsContent(siteHtml, currentPage);
 const today = getToday();
 const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
-const hasMarginNotes = resolvedSections.some((section) => section.contentBlocks.some((block) => block.type === 'note'));
 const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
@@ -82,33 +69,43 @@ const renderedSections = resolvedSections.map((section, index) => ({
 	prioritizeFirstImage: index === firstImageSectionIndex,
 }));
 
-const getPageContent = async (page: SitePage) => {
-	const contentFile = getPageContentFile(page);
-	const pageMarkdown = page.pathname === currentPage.pathname
-		? rawMarkdown
-		: (await readSiteFile(contentFile.path, contentFile.label)).body;
-	return getHeadingNavigation(pageMarkdown, contentFile.label);
-};
+const getPageContent = (page: SitePage) =>
+	page.markdownDocument.navigationHeadings.map(({ depth, id, parentId, title }) => ({
+		depth,
+		id,
+		parentId,
+		title,
+	}));
 
-const pageNavigation = await Promise.all(sitePages.map(async (page) => {
-	const headings = await getPageContent(page);
+const siteNavigation = siteNodes.map((node) => {
+	const headings = node.kind === 'page' ? getPageContent(node) : [];
 	return {
-		page,
+		node,
 		headings,
 		sections: headings
 			.filter((heading) => heading.depth === 2)
 			.map(({ id, title }) => ({ id, title })),
 	};
-}));
+});
+const renderedNavigationEntries = flattenSiteNavigationTree(getListedSiteNavigationTree(siteNavigation));
 const navigationModel = resolveNavigationModel({
 	mode: projectConfig.navigation.mode,
-	pages: pageNavigation.map(({ page, headings }) => ({
-		depth: Math.max(1, page.depth),
+	nodes: renderedNavigationEntries.map(({ node, headings }) => ({
+		depth: Math.max(1, node.depth),
 		headings,
-		isHome: page.isHome,
-		listed: page.navigation.listed,
+		isHome: node.isHome,
+		kind: node.kind,
+		listed: node.navigation.listed,
 	})),
 });
+const pagePresentation = resolvePagePresentation(themeData, themeLabel, {
+	navigationMode: navigationModel.mode,
+});
+const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
+const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
+const hasTreeNavigation = navigationModel.mode === 'tree';
+const showBreadcrumbs = !currentPage.isHome && currentPage.parentPagePath !== null;
+const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 
 ---
 
@@ -120,27 +117,40 @@ const navigationModel = resolveNavigationModel({
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
 	footer={sitewideData.footer}
+	treeNavigation={hasTreeNavigation}
 >
 	<SiteNavigation
 		logo={logo}
 		currentPage={currentPage}
-		pageNavigation={pageNavigation}
+		navigationEntries={siteNavigation}
 		navigationMode={navigationModel.mode}
 		frameColors={frameColors}
+		readerPreferences={pagePresentation.readerPreferences}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
-	<main class:list={['site-content', { 'site-content-has-breadcrumbs': currentPage.depth > 1 }]} id="main-content">
-		{currentPage.depth > 1 && <SiteBreadcrumbs currentPage={currentPage} pages={sitePages} />}
-		{renderedSections.map(({ section, sectionIndex, prioritizeFirstImage }) => (
-			<SiteSection
-				section={section}
-				pagePresentation={pagePresentation}
-				visualTheme={visualTheme}
-				sectionIndex={sectionIndex}
-				prioritizeFirstImage={prioritizeFirstImage}
-			/>
-		))}
-	</main>
-	{hasMarginNotes && <SiteNotesScript />}
+	<div class:list={['site-page-layout', { 'site-page-layout-tree': hasTreeNavigation }]}>
+		{hasTreeNavigation && (
+			<SiteTreeNavigation currentPage={currentPage} navigationEntries={siteNavigation} />
+		)}
+		<main
+			class:list={['site-content', { 'site-content-has-breadcrumbs': reserveBreadcrumbSpace }]}
+			id="main-content"
+			style={`--page-text-width: ${pageTextWidth}`}
+		>
+			{showBreadcrumbs
+				? <SiteBreadcrumbs currentPage={currentPage} nodes={siteNodes} />
+				: reserveBreadcrumbSpace && <div class="site-breadcrumbs" aria-hidden="true"></div>}
+			{renderedSections.map(({ section, sectionIndex, prioritizeFirstImage }) => (
+				<SiteSection
+					section={section}
+					pagePresentation={pagePresentation}
+					visualTheme={visualTheme}
+					sectionIndex={sectionIndex}
+					prioritizeFirstImage={prioritizeFirstImage}
+				/>
+			))}
+		</main>
+	</div>
+	{hasTreeNavigation && <TreeNavigationScript />}
 </BaseLayout>