@janga/norna 0.7.17 → 0.7.18

package/scripts/test-theme-presets.mjs

@@ -35,13 +35,14 @@ try {
 		assert.ok(metadata.description);
 		const resolved = resolveThemeConfig({ preset: presetName }, 'test theme');
 		assert.equal(resolved.preset, presetName);
-		assert.ok(resolved.layout?.density);
-		assert.equal(resolved.navigation?.mode, 'automatic');
+		assert.ok(resolved.layout?.contentSpacing);
+		assert.ok(resolved.layout?.textWidth);
+		assert.ok(resolved.shape);
 		assert.ok(resolved.images?.width);
 		assert.ok(resolved.typography?.fontFamily);
 		assert.ok(resolved.typography?.profile);
 		assert.ok(resolved.palette);
-		assert.ok(resolved.sectionSurfaces);
+		assert.ok(resolved.sections?.backgroundPattern);
 	}
 
 	const overridden = resolveThemeConfig({
@@ -49,23 +50,20 @@ try {
 		layout: { pageWidth: '1300px' },
 		palette: 'dark',
 	}, 'test theme');
-	assert.equal(overridden.layout.density, 'compact');
-	assert.equal(overridden.navigation.mode, 'automatic');
+	assert.equal(overridden.layout.contentSpacing, 'compact');
+	assert.equal(overridden.layout.textWidth, 'narrow');
 	assert.equal(overridden.layout.pageWidth, '1300px');
+	assert.equal(overridden.layout.localNavigationGap, 'clamp(1.5rem, 3vw, 3rem)');
 	assert.equal(overridden.images.width, '920px');
 	assert.equal(overridden.palette, 'dark');
-	assert.deepEqual(overridden.sectionSurfaces, ['base', 'soft']);
+	assert.equal(overridden.sections.backgroundPattern, 'alternating');
 	assert.throws(
 		() => resolveThemeConfig({ preset: 'unknown' }, 'test/theme.yaml'),
 		/Unknown theme preset "unknown" in test\/theme\.yaml.*portfolio, documentation, project, statement/,
 	);
 	assert.throws(
-		() => resolveThemePresentation({ sectionSurfaces: ['base', 'glowing'] }, 'test/theme.yaml'),
-		/Unknown section surface "glowing" in test\/theme\.yaml.*base, soft, emphasis/,
-	);
-	assert.throws(
-		() => resolveThemePresentation({ sectionSurfaces: ['base', 'base'] }, 'test/theme.yaml'),
-		/Each section surface may appear only once in test\/theme\.yaml/,
+		() => resolveThemePresentation({ sections: { backgroundPattern: 'glowing' } }, 'test/theme.yaml'),
+		/sections\.backgroundPattern must be one of uniform, alternating, cycling in test\/theme\.yaml/,
 	);
 
 	const listResult = runCli(['theme:presets']);
@@ -89,9 +87,10 @@ try {
 		assert.equal(entry.description, metadata.description);
 	}
 
+	await mkdir(path.join(siteDir, 'pages', '000-home'), { recursive: true });
 	await mkdir(path.join(siteDir, 'pages', '010-guide'), { recursive: true });
-	await writeFile(path.join(siteDir, 'config.yaml'), 'url: https://example.com/\n');
-	await writeFile(path.join(siteDir, 'content.md'), `---
+	await writeFile(path.join(siteDir, 'config.yaml'), 'url: https://example.com/\nnavigation:\n  mode: top\n');
+	await writeFile(path.join(siteDir, 'pages', '000-home', 'content.md'), `---
 page:
   description: Root page
 ---
@@ -115,10 +114,13 @@ page:
 # Guide
 Page content.
 `);
-	await writeFile(path.join(siteDir, 'pages', '010-guide', 'theme.yaml'), `preset: portfolio
-layout:
-  pageWidth: 1010px
-palette: light
+	await writeFile(path.join(siteDir, 'pages', '010-guide', 'theme.yaml'), `layout:
+  contentSpacing: spacious
+  textWidth: wide
+images:
+  width: 700px
+sections:
+  backgroundPattern: cycling
 `);
 
 	const buildResult = runCli(['build']);
@@ -128,28 +130,31 @@ palette: light
 	assert.match(rootHtml, /--page-width: 1300px/);
 	assert.match(rootHtml, /--font-sans: Georgia, 'Times New Roman', serif/);
 	assert.match(rootHtml, /--color-page: #000000/);
-	assert.match(pageHtml, /--page-width: 1010px/);
-	assert.match(pageHtml, /--font-sans: 'Helvetica Neue', Arial, sans-serif/);
-	assert.match(pageHtml, /--color-page: #ffffff/);
+	assert.match(pageHtml, /--page-width: 1300px/);
+	assert.match(pageHtml, /--font-sans: Georgia, 'Times New Roman', serif/);
+	assert.match(pageHtml, /--color-page: #000000/);
+	assert.match(pageHtml, /--image-width: 700px/);
+	assert.match(pageHtml, /--space-section-to-section-desktop: clamp\(2\.25rem, 5vw, 4\.5rem\)/);
 	assert.match(rootHtml, /data-navigation-mode="top"/);
 	assert.match(pageHtml, /data-navigation-mode="top"/);
 
 	const typographyResult = runCli(['typography', 'show']);
 	assert.equal(typographyResult.status, 0, typographyResult.stderr || typographyResult.stdout);
 	assert.match(typographyResult.stdout, /value: reading/);
-	assert.match(typographyResult.stdout, /value: restrained/);
+	assert.doesNotMatch(typographyResult.stdout, /value: restrained/);
 
 	const pageThemePath = path.join(siteDir, 'pages', '010-guide', 'theme.yaml');
 	const pageThemeSource = await readFile(pageThemePath, 'utf8');
 	await writeFile(pageThemePath, 'preset: unknown\n');
 	const invalidPagePresetResult = runCli(['config:check']);
 	assert.notEqual(invalidPagePresetResult.status, 0);
-	assert.match(invalidPagePresetResult.stderr, /Unknown theme preset "unknown" in .*pages\/010-guide\/theme\.yaml/);
+	assert.match(invalidPagePresetResult.stderr, /page themes may not define site-wide visual identity through "preset"/);
 	await writeFile(pageThemePath, pageThemeSource);
 	await writeFile(pageThemePath, 'navigation:\n  mode: sections\n');
 	const pageNavigationResult = runCli(['config:check']);
 	assert.notEqual(pageNavigationResult.status, 0);
-	assert.match(pageNavigationResult.stderr, /page themes may not define navigation/);
+	assert.match(pageNavigationResult.stderr, /navigation is technical, site-wide configuration/);
+	assert.match(pageNavigationResult.stderr, /config\.yaml/);
 	await writeFile(pageThemePath, pageThemeSource);
 
 	const exportResult = runCli(['theme:export', 'documentation']);
@@ -162,10 +167,11 @@ palette: light
 	assert.match(exportedSource, /# Alternatives: dark, light, paper\./);
 	const exportedConfig = load(exportedSource);
 	assert.equal(exportedConfig.preset, 'documentation');
-	assert.equal(exportedConfig.navigation.mode, 'automatic');
+	assert.equal(exportedConfig.navigation, undefined);
+	assert.equal(exportedConfig.shape, themePresets.documentation.shape);
 	assert.equal(exportedConfig.layout.pageWidth, themePresets.documentation.layout.pageWidth);
 	assert.equal(exportedConfig.typography.fontFamily, themePresets.documentation.typography.fontFamily);
-	assert.deepEqual(exportedConfig.sectionSurfaces, ['base', 'soft']);
+	assert.equal(exportedConfig.sections.backgroundPattern, 'alternating');
 
 	const exportAgainResult = runCli(['theme:export', 'documentation']);
 	assert.notEqual(exportAgainResult.status, 0);
@@ -176,7 +182,7 @@ palette: light
 	assert.notEqual(unknownExportResult.status, 0);
 	assert.match(unknownExportResult.stderr, /Unknown theme preset "unknown"/);
 
-	console.log('ok - complete theme presets resolve for root and page themes and export as protected references');
+	console.log('ok - complete root presets and limited inherited page themes resolve and export as protected references');
 } finally {
 	await rm(tempRoot, { force: true, recursive: true });
 }

package/src/components/NavigationPageTree.astro

@@ -3,22 +3,31 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { PageNavigationNode } from '../lib/siteNavigation';
 import type { SitePage } from '../lib/sitePages';
+import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
 	nodes: PageNavigationNode[];
 	currentPage: SitePage;
-	variant: 'mobile' | 'submenu';
+	variant: 'mobile' | 'sidebar' | 'submenu';
+	integratePageSections?: boolean;
 }
 
-const { nodes, currentPage, variant } = Astro.props;
+const { nodes, currentPage, variant, integratePageSections = false } = Astro.props;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
 const hasBranch = (node: PageNavigationNode) => node.children.length > 0;
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
 const isCurrentBranch = (page: SitePage) => (
-	page.isHome
-		? currentPage.isHome
-		: currentPage.pagePath === page.pagePath || currentPage.pagePath.startsWith(`${page.pagePath}/`)
+	currentPage.pageDirectory === page.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${page.pageDirectory}/pages/`)
 );
+const getBranchId = (page: SitePage) => [
+	'navigation',
+	variant,
+	page.pagePath || 'home',
+	'children',
+].join('-').replace(/[^a-z0-9-]+/gi, '-');
+const hasPageSections = (node: PageNavigationNode) => node.headings.some((heading) => heading.depth === 2);
+const hasPageDisclosure = (node: PageNavigationNode) => hasBranch(node) || hasPageSections(node);
 ---
 
 <ul class:list={['navigation-page-tree', `navigation-page-tree-${variant}`]}>
@@ -29,27 +38,63 @@ const isCurrentBranch = (page: SitePage) => (
 				'navigation-page-node-current-branch': isCurrentBranch(node.page),
 			}]}
 		>
-			{variant === 'mobile' && hasBranch(node) ? (
-				<details class="mobile-navigation-branch" open={isCurrentBranch(node.page)}>
-					<summary><span>{node.page.title}</span></summary>
-					<div class="mobile-navigation-branch-content">
-						<ul class="mobile-navigation-page-links">
-							<li>
-								<a
-									class="mobile-nav-destination mobile-nav-overview"
-									href={pageHref(node.page)}
-									aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+			{variant !== 'submenu' && integratePageSections ? (
+				hasPageDisclosure(node) ? (
+					<details
+						class:list={['navigation-page-branch', 'navigation-page-disclosure', `navigation-page-disclosure-${variant}`]}
+						data-page-path={node.page.pagePath || '/'}
+						data-current-branch={isCurrentBranch(node.page) ? 'true' : undefined}
+						data-current-page={isCurrentPage(node.page) ? 'true' : undefined}
+						data-has-sections={hasPageSections(node) ? 'true' : undefined}
+						open={isCurrentBranch(node.page)}
+					>
+						<summary
+							class="navigation-page-summary"
+							aria-controls={getBranchId(node.page)}
+						>
+							<span class="navigation-page-summary-title">{node.page.title}</span>
+							<span class="navigation-page-chevron" aria-hidden="true"></span>
+						</summary>
+						<a
+							class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+							href={pageHref(node.page)}
+							aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+						>
+							{node.page.title}
+						</a>
+						<div id={getBranchId(node.page)} class="navigation-page-branch-content">
+							{hasPageSections(node) && (
+								<nav
+									class="navigation-page-sections"
+									aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.page.title}`}
 								>
-									{projectConfig.locale.labels.navigationOverview}
-								</a>
-							</li>
-						</ul>
-						{node.children.length > 0 && (
-							<Astro.self nodes={node.children} currentPage={currentPage} variant={variant} />
-						)}
-					</div>
-				</details>
-			) : (
+									<PageContentsLinks
+										headings={node.headings}
+										variant={variant === 'mobile' ? 'mobile' : 'desktop'}
+										pageHref={isCurrentPage(node.page) ? undefined : pageHref(node.page)}
+									/>
+								</nav>
+							)}
+							{hasBranch(node) && (
+								<Astro.self
+									nodes={node.children}
+									currentPage={currentPage}
+									variant={variant}
+									integratePageSections={integratePageSections}
+								/>
+							)}
+						</div>
+					</details>
+				) : (
+					<a
+						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+						href={pageHref(node.page)}
+						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+					>
+						{node.page.title}
+					</a>
+				)
+			) : variant !== 'submenu' ? (
 				<>
 					<a
 						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
@@ -58,6 +103,50 @@ const isCurrentBranch = (page: SitePage) => (
 					>
 						{node.page.title}
 					</a>
+					{variant === 'sidebar' && isCurrentPage(node.page) && hasPageSections(node) && (
+						<nav
+							class="navigation-page-sections"
+							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.page.title}`}
+						>
+							<PageContentsLinks
+								headings={node.headings}
+								variant="desktop"
+							/>
+						</nav>
+					)}
+					{hasBranch(node) && (
+						<details
+							class="navigation-page-branch"
+							data-page-path={node.page.pagePath || '/'}
+							data-current-branch={isCurrentBranch(node.page) ? 'true' : undefined}
+							open={isCurrentBranch(node.page)}
+						>
+							<summary aria-controls={getBranchId(node.page)}>
+								<span class="visually-hidden">
+									{projectConfig.locale.labels.navigationChildren}: {node.page.title}
+								</span>
+								<span aria-hidden="true"></span>
+							</summary>
+							<div id={getBranchId(node.page)} class="navigation-page-branch-content">
+								<Astro.self
+									nodes={node.children}
+									currentPage={currentPage}
+									variant={variant}
+									integratePageSections={integratePageSections}
+								/>
+							</div>
+						</details>
+					)}
+				</>
+			) : (
+				<>
+					<a
+						class="navigation-page-link"
+						href={pageHref(node.page)}
+						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+					>
+						{node.page.title}
+					</a>
 					{node.children.length > 0 && (
 						<Astro.self nodes={node.children} currentPage={currentPage} variant={variant} />
 					)}

package/src/components/PageContentsLinks.astro

@@ -0,0 +1,40 @@
+---
+import type { HeadingNavigation } from '../lib/sectionContent';
+
+interface Props {
+	headings: HeadingNavigation[];
+	variant: 'desktop' | 'mobile';
+	pageHref?: string;
+}
+
+const { headings, variant, pageHref = '' } = Astro.props;
+const sections = headings
+	.filter((heading) => heading.depth === 2)
+	.map((heading) => ({
+		...heading,
+		children: headings.filter((candidate) => (
+			candidate.depth === 3 && candidate.parentId === heading.id
+		)),
+	}));
+---
+
+<ol class:list={['page-contents-links', `page-contents-links-${variant}`]}>
+	{sections.map((section) => (
+		<li>
+			<a class={variant === 'mobile' ? 'mobile-nav-destination' : undefined} href={`${pageHref}#${section.id}`}>
+				{section.title}
+			</a>
+			{section.children.length > 0 && (
+				<ol>
+					{section.children.map((heading) => (
+						<li>
+							<a class={variant === 'mobile' ? 'mobile-nav-destination' : undefined} href={`${pageHref}#${heading.id}`}>
+								{heading.title}
+							</a>
+						</li>
+					))}
+				</ol>
+			)}
+		</li>
+	))}
+</ol>

package/src/components/SectionNavigationScript.astro

@@ -2,7 +2,7 @@
 	const siteTop = document.querySelector<HTMLElement>('.site-top');
 	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
 	const sectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>(
-		'.mobile-nav-sections a, .page-nav a',
+		'.mobile-nav-sections a, .page-contents-links a, .page-nav a',
 	));
 	const submenuItems = Array.from(document.querySelectorAll<HTMLElement>('.site-nav-item-has-submenu'));
 	const mobileDestinationLinks = Array.from(mobileMenu?.querySelectorAll<HTMLAnchorElement>('.mobile-nav-destination') ?? []);
@@ -40,9 +40,12 @@
 	const updateCurrentSection = () => {
 		sectionLinks.forEach((link) => {
 			const linkUrl = new URL(link.href, window.location.href);
-			const isCurrent = linkUrl.pathname === window.location.pathname
-				&& linkUrl.hash !== ''
-				&& linkUrl.hash === window.location.hash;
+			const isPageTop = link.hasAttribute('data-page-top');
+			const isCurrent = linkUrl.pathname === window.location.pathname && (
+				isPageTop
+					? window.location.hash === ''
+					: linkUrl.hash !== '' && linkUrl.hash === window.location.hash
+			);
 
 			if (isCurrent) {
 				link.setAttribute('aria-current', 'location');
@@ -67,7 +70,11 @@
 
 		mobileMenu.addEventListener('toggle', () => {
 			document.documentElement.classList.toggle('mobile-navigation-open', mobileMenu.open);
-			if (mobileMenu.open) window.requestAnimationFrame(() => mobileMenu.querySelector<HTMLElement>('h2')?.focus());
+			if (mobileMenu.open) {
+				window.requestAnimationFrame(() => (
+					mobileMenu.querySelector<HTMLElement>('.mobile-nav-view h2, .mobile-nav-view a')?.focus()
+				));
+			}
 		});
 
 		mobileMenu.addEventListener('keydown', (event) => {

package/src/components/SiteBreadcrumbs.astro

@@ -10,20 +10,23 @@ interface Props {
 
 const { currentPage, pages } = Astro.props;
 const pagesByPath = new Map(pages.map((page) => [page.pagePath, page]));
-const ancestors = currentPage.pageIds
-	.slice(0, -1)
-	.map((_, index) => pagesByPath.get(currentPage.pageIds.slice(0, index + 1).join('/')))
-	.filter((page): page is SitePage => page !== undefined);
+const ancestors: SitePage[] = [];
+let parentPagePath = currentPage.parentPagePath;
+while (parentPagePath !== null) {
+	const parentPage = pagesByPath.get(parentPagePath);
+	if (!parentPage) break;
+	ancestors.unshift(parentPage);
+	parentPagePath = parentPage.parentPagePath;
+}
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+const breadcrumbPages = ancestors;
 ---
 
-{ancestors.length > 0 && (
-	<nav class="site-breadcrumbs" aria-label={projectConfig.locale.labels.breadcrumb}>
-		<ol>
-			{ancestors.map((page) => (
-				<li><a href={pageHref(page)}>{page.title}</a></li>
-			))}
-			<li><span aria-current="page">{currentPage.title}</span></li>
-		</ol>
-	</nav>
-)}
+<nav class="site-breadcrumbs" aria-label={projectConfig.locale.labels.breadcrumb}>
+	<ol>
+		{breadcrumbPages.map((page) => (
+			<li><a href={pageHref(page)}>{page.title}</a></li>
+		))}
+		<li><span aria-current="page">{currentPage.title}</span></li>
+	</ol>
+</nav>

package/src/components/SiteNavigation.astro

@@ -40,14 +40,20 @@ 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 isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
+const isCurrentBranch = (page: SitePage) => currentPage.pageDirectory === page.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${page.pageDirectory}/pages/`);
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
 const hasCurrentPageSectionMenu = Boolean(
 	currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
 );
-const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu;
+const hasTreePageContents = Boolean(
+	navigationMode === 'tree' && currentPageNavigation?.headings.length,
+);
+const showSinglePageTopLink = !showSiteNavigation;
+const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
 const showNavigationRow = showMobileNavigation || Boolean(logo);
-const hasSectionNavigation = hasCurrentPageSectionMenu;
+const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents || navigationMode === 'tree';
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
@@ -70,13 +76,13 @@ const hasSectionNavigation = hasCurrentPageSectionMenu;
 					<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}/`),
+							'site-nav-item-has-submenu': navigationMode !== 'tree' && node.children.length > 0,
+							'site-nav-item-current-branch': !isCurrentPage(node.page) && isCurrentBranch(node.page),
 						}]}>
 							<a href={pageHref(node.page)} aria-current={isCurrentPage(node.page) ? 'page' : undefined}>
 								{node.page.title}
 							</a>
-							{node.children.length > 0 && (
+							{navigationMode !== 'tree' && 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" />
@@ -94,18 +100,36 @@ const hasSectionNavigation = hasCurrentPageSectionMenu;
 				<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>
@@ -120,11 +144,20 @@ const hasSectionNavigation = hasCurrentPageSectionMenu;
 		</div>
 	)}
 
-	{hasCurrentPageSectionMenu && currentPageNavigation && (
+	{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && (
 		<nav class="page-nav" 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 +170,4 @@ const hasSectionNavigation = hasCurrentPageSectionMenu;
 
 </header>
 
-{hasSectionNavigation && <SectionNavigationScript />}
+{needsNavigationScript && <SectionNavigationScript />}

package/src/components/SitePage.astro

@@ -7,6 +7,8 @@ import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
 import SiteNotesScript from './SiteNotesScript.astro';
 import SiteSection from './SiteSection.astro';
+import SiteTreeNavigation from './SiteTreeNavigation.astro';
+import TreeNavigationScript from './TreeNavigationScript.astro';
 import { getHeadingNavigation, getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
 import { getPageTheme } from '../lib/pageThemes';
 import { getSitePage, getSitePages, type SitePage } from '../lib/sitePages';
@@ -14,9 +16,10 @@ 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 { 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'>;
 
@@ -28,15 +31,10 @@ 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
-	? {
+const getPageContentFile = (page: SitePage) => ({
 		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;
@@ -49,7 +47,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}`;
@@ -64,7 +62,8 @@ const logo = logoAsset
 	}
 	: undefined;
 const pagePresentation = resolvePagePresentation(themeData, themeLabel);
-const frameColors = resolveFrameColors({ theme: themeData, sourceLabel: themeLabel });
+const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
+const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
 const siteHtml = entry.rendered?.html ?? '';
 const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, currentPage, siteContentLabel);
 const today = getToday();
@@ -109,6 +108,9 @@ const navigationModel = resolveNavigationModel({
 		listed: page.navigation.listed,
 	})),
 });
+const hasTreeNavigation = navigationModel.mode === 'tree';
+const showBreadcrumbs = !currentPage.isHome && currentPage.parentPagePath !== null;
+const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 
 ---
 
@@ -130,17 +132,29 @@ const navigationModel = resolveNavigationModel({
 	/>
 	{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>
+	<div class:list={['site-page-layout', { 'site-page-layout-tree': hasTreeNavigation }]}>
+		{hasTreeNavigation && (
+			<SiteTreeNavigation currentPage={currentPage} pageNavigation={pageNavigation} />
+		)}
+		<main
+			class:list={['site-content', { 'site-content-has-breadcrumbs': reserveBreadcrumbSpace }]}
+			id="main-content"
+			style={`--page-text-width: ${pageTextWidth}`}
+		>
+			{showBreadcrumbs
+				? <SiteBreadcrumbs currentPage={currentPage} pages={sitePages} />
+				: 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 />}
 	{hasMarginNotes && <SiteNotesScript />}
 </BaseLayout>