@janga/norna 0.7.16 → 0.7.18

package/src/components/SiteBreadcrumbs.astro

@@ -0,0 +1,32 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import type { SitePage } from '../lib/sitePages';
+
+interface Props {
+	currentPage: SitePage;
+	pages: SitePage[];
+}
+
+const { currentPage, pages } = Astro.props;
+const pagesByPath = new Map(pages.map((page) => [page.pagePath, page]));
+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;
+---
+
+<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

@@ -2,7 +2,9 @@
 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 NavigationPageTree from './NavigationPageTree.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
 
 type FrameColors = {
@@ -11,21 +13,18 @@ type FrameColors = {
 };
 
 interface Props {
-	navigationLabel: string;
 	logo?: {
 		src: string;
 		alt: string;
 		height?: string;
 	};
 	currentPage: SitePage;
-	pageNavigation: Array<{
-		page: SitePage;
-		sections: SectionNavigation[];
-	}>;
+	pageNavigation: PageNavigationEntry[];
+	navigationMode: 'sections' | 'top' | 'tree';
 	frameColors: FrameColors;
 }
 
-const { navigationLabel, logo, currentPage, pageNavigation, frameColors } = Astro.props;
+const { logo, currentPage, pageNavigation, navigationMode, frameColors } = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
 	: frameColors.backgroundColor;
@@ -34,54 +33,60 @@ const navigationStyle = [
 	`--site-top-text-color: ${frameColors.textColor}`,
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
-const showSiteNavigation = pageNavigation.length > 1;
-const showNavigationRow = showSiteNavigation || Boolean(logo);
+const siteNavigationPages = pageNavigation.filter(({ page }) => page.isHome || page.navigation.listed);
+const siteNavigationTree = getListedPageNavigationTree(pageNavigation);
+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 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 sectionHref = (page: SitePage, section: SectionNavigation) => `${pageHref(page)}#${section.id}`;
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
-const showSinglePageSectionNavigation = Boolean(
-	!showSiteNavigation && currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
-);
 const hasCurrentPageSectionMenu = Boolean(
-	showSiteNavigation && currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+	currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+);
+const hasTreePageContents = Boolean(
+	navigationMode === 'tree' && currentPageNavigation?.headings.length,
 );
-const hasSectionNavigation = showSinglePageSectionNavigation || hasCurrentPageSectionMenu;
+const showSinglePageTopLink = !showSiteNavigation;
+const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
+const showNavigationRow = showMobileNavigation || Boolean(logo);
+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 }]}
+	data-navigation-mode={navigationMode}
 	style={navigationStyle}
 >
 	{showNavigationRow && (
 		<div class="site-nav-row">
-			<a class="site-brand" href={pageHref(homePage)}>
-				{logo ? <img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} /> : navigationLabel}
-			</a>
+			{logo && (
+				<a class="site-brand" href={pageHref(homePage)}>
+					<img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} />
+				</a>
+			)}
 
 			{showSiteNavigation && (
 				<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 					<ul>
-						{pageNavigation.map(({ page, sections: pageSections }) => (
-							<li class:list={['site-nav-item', { 'site-nav-item-has-sections': hasSectionMenu(pageSections) }]}>
-								<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
-									{page.navigation.label}
-								</a>
-								{hasSectionMenu(pageSections) && (
-									<div class="site-nav-submenu">
-										<nav aria-label={`${page.navigation.label} ${projectConfig.locale.labels.pageNavigation}`}>
-											<ul>
-												{pageSections.map((section) => (
-													<li>
-														<a href={sectionHref(page, section)}>{section.title}</a>
-													</li>
-												))}
-											</ul>
-										</nav>
+					{topLevelNavigation.map((node) => (
+						<li class:list={['site-nav-item', {
+							'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>
+							{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" />
+									</nav>
 									</div>
 								)}
 							</li>
@@ -90,55 +95,79 @@ const hasSectionNavigation = showSinglePageSectionNavigation || hasCurrentPageSe
 				</nav>
 			)}
 
-			{showSiteNavigation && <details class="mobile-nav-menu">
-				<summary>
-					<span>{currentPage.navigation.label}</span>
-				</summary>
-				<div class="mobile-nav-panel">
-					<nav class="mobile-site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
-						<h2>{projectConfig.locale.labels.siteNavigation}</h2>
-						<ul>
-							{pageNavigation.map(({ page }) => (
-								<li>
-									<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
-										{page.navigation.label}
-									</a>
-								</li>
-							))}
-						</ul>
-					</nav>
+			{showMobileNavigation && <details class="mobile-nav-menu">
+			<summary>
+				<span>{projectConfig.locale.labels.navigationMenu}</span>
+			</summary>
+			<div class="mobile-nav-panel">
+			<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"
+								integratePageSections={navigationMode === 'tree'}
+							/>
+						</nav>
+					)}
 
-					{currentPageNavigation && hasCurrentPageSectionMenu && (
-						<nav class="mobile-page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
-							<h2>{projectConfig.locale.labels.pageNavigation}</h2>
-							<ul>
-								{currentPageNavigation.sections.map((section) => (
-									<li>
-										<a href={sectionHref(currentPage, section)}>
-											{section.title}
+					{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && (
+						<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.pageNavigation}>
+							{!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>
+										</li>
 								))}
 							</ul>
 						</nav>
 					)}
 				</div>
-			</details>}
+			</div>
+		</details>}
 		</div>
 	)}
 
-	{showSinglePageSectionNavigation && currentPageNavigation && (
+	{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && (
 		<nav class="page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
-			<ul>
-				{currentPageNavigation.sections.map((section) => (
-					<li>
-						<a href={`#${section.id}`}>{section.title}</a>
-					</li>
-				))}
-			</ul>
+			<div class="page-nav-inner">
+				{!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>
+						</li>
+					))}
+				</ul>
+			</div>
 		</nav>
 	)}
 
 </header>
 
-{hasSectionNavigation && <SectionNavigationScript />}
+{needsNavigationScript && <SectionNavigationScript />}

package/src/components/SitePage.astro

@@ -2,19 +2,24 @@
 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 { getSectionNavigation, getSectionsContent } from '../lib/sectionContent';
-import { getRouteTheme } from '../lib/routeThemes';
-import { getNavigationPages, getSitePage, getSitePages } from '../lib/sitePages';
+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';
 import { getToday, isVisibleToday } from '../lib/visibility';
 import { getLogoAsset } from '../lib/sitePublicAssets';
 import { readSiteFile } from '../../scripts/lib/site-content.mjs';
-import { siteContentPath, siteRoutesDir } from '../../scripts/lib/site-paths.mjs';
-import { resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
-import { resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
+import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
+import { sitePagesDir } from '../../scripts/lib/site-paths.mjs';
+import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
+import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
+import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
 
@@ -26,71 +31,92 @@ const { entry } = Astro.props;
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
 const sitePages = getSitePages(await getCollection('site'));
 const currentPage = getSitePage(entry);
-const siteContentLabel = entry.id.includes('-route-')
-	? `${siteDirectory || 'site'}/routes/${currentPage.routeDirectory}/content.md`
-	: `${siteDirectory || 'site'}/content.md`;
-const pageContentPath = currentPage.routeDirectory
-	? path.join(siteRoutesDir, currentPage.routeDirectory, 'content.md')
-	: siteContentPath;
-const rawMarkdown = (await readSiteFile(pageContentPath, siteContentLabel)).body;
+const getPageContentFile = (page: SitePage) => ({
+		label: `${siteDirectory || 'site'}/pages/${page.pageDirectory}/content.md`,
+		path: path.join(sitePagesDir, page.pageDirectory, 'content.md'),
+	});
+const pageContentFile = getPageContentFile(currentPage);
+const siteContentLabel = pageContentFile.label;
+const rawMarkdown = (await readSiteFile(pageContentFile.path, pageContentFile.label)).body;
 const [siteTheme] = await getCollection('theme');
 if (!siteTheme) {
 	throw new Error('site/theme.yaml is required. Add a root theme before building the site.');
 }
 const [sitewide] = await getCollection('sitewide');
 const sitewideData = sitewide?.data ?? {};
-const navigationPages = getNavigationPages(sitePages);
 const homePage = sitePages.find((page) => page.isHome) ?? currentPage;
 const siteThemeData = siteTheme.data;
-const routeTheme = await getRouteTheme(currentPage.routeDirectory);
-const themeData = routeTheme?.data ?? siteThemeData;
-const themeLabel = routeTheme
-	? `${siteDirectory || 'site'}/${routeTheme.id}`
+const pageTheme = await getPageTheme(currentPage.pageDirectory);
+const themeData = mergePageThemeConfig(siteThemeData, pageTheme?.data);
+const themeLabel = pageTheme
+	? `${siteDirectory || 'site'}/${pageTheme.id}`
 	: `${siteDirectory || 'site'}/${siteTheme.id}`;
 const visualTheme = resolveThemeVisualConfig(themeData, themeLabel);
-const navigationLabel = sitewideData.navigation?.label ?? homePage.title;
 const logoAsset = getLogoAsset();
-const logoSettings = sitewideData.navigation?.logo;
+const logoSettings = sitewideData.logo;
 const logo = logoAsset
 	? {
 		src: logoAsset.href,
-		alt: navigationLabel,
+		alt: homePage.title,
 		height: logoSettings?.height,
 	}
 	: undefined;
 const pagePresentation = resolvePagePresentation(themeData, themeLabel);
-const frameColors = resolveFrameColors({ theme: themeData, sourceLabel: themeLabel });
-const sections = entry.data.sections;
+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, sections, currentPage);
+const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, currentPage, siteContentLabel);
 const today = getToday();
 const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
-const visibleSections = resolvedSections.filter((section) => isVisibleToday(section.visible, today));
-const hasMarginNotes = visibleSections.some((section) => section.contentBlocks.some((block) => block.type === 'note'));
+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'
+));
+const firstImageSectionIndex = resolvedSections.findIndex(hasPrioritizableImage);
+let contentSectionIndex = 0;
+const renderedSections = resolvedSections.map((section, index) => ({
+	section,
+	sectionIndex: section.headingLevel === 1 ? 0 : contentSectionIndex++,
+	prioritizeFirstImage: index === firstImageSectionIndex,
+}));
 
 const getPageContent = async (page: SitePage) => {
-	if (page.pathname === currentPage.pathname) {
-		return visibleSections.map(({ id, title }) => ({ id, title }));
-	}
-
-	const pageSections = getSectionNavigation(page.entry.rendered?.html ?? '', page.entry.data.sections);
-
-	return pageSections.filter((section) => isVisibleToday(page.entry.data.sections[section.id]?.visible, today));
+	const contentFile = getPageContentFile(page);
+	const pageMarkdown = page.pathname === currentPage.pathname
+		? rawMarkdown
+		: (await readSiteFile(contentFile.path, contentFile.label)).body;
+	return getHeadingNavigation(pageMarkdown, contentFile.label);
 };
 
-const pageNavigation = await Promise.all(navigationPages.map(async (page) => ({
-	page,
-	sections: await getPageContent(page),
-})));
+const pageNavigation = await Promise.all(sitePages.map(async (page) => {
+	const headings = await getPageContent(page);
+	return {
+		page,
+		headings,
+		sections: headings
+			.filter((heading) => heading.depth === 2)
+			.map(({ id, title }) => ({ id, title })),
+	};
+}));
+const navigationModel = resolveNavigationModel({
+	mode: projectConfig.navigation.mode,
+	pages: pageNavigation.map(({ page, headings }) => ({
+		depth: Math.max(1, page.depth),
+		headings,
+		isHome: page.isHome,
+		listed: page.navigation.listed,
+	})),
+});
+const hasTreeNavigation = navigationModel.mode === 'tree';
+const showBreadcrumbs = !currentPage.isHome && currentPage.parentPagePath !== null;
+const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 
-if (visibleSections.length === 0) {
-	throw new Error(`No sections are visible for ${today}. Check sections.<section-id>.visible in ${siteContentLabel}.`);
-}
 ---
 
 <BaseLayout
-	title={entry.data.title}
-	description={entry.data.description}
+	title={currentPage.title}
+	description={entry.data.page?.description}
 	presentation={pagePresentation}
 	visualTheme={visualTheme}
 	frameColors={frameColors}
@@ -98,25 +124,37 @@ if (visibleSections.length === 0) {
 	footer={sitewideData.footer}
 >
 	<SiteNavigation
-		navigationLabel={navigationLabel}
 		logo={logo}
 		currentPage={currentPage}
 		pageNavigation={pageNavigation}
+		navigationMode={navigationModel.mode}
 		frameColors={frameColors}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
-	<main id="main-content" class="site-content">
-		{visibleSections.map((section, index) => (
-			<SiteSection
-				section={section}
-				pagePresentation={pagePresentation}
-				visualTheme={visualTheme}
-				sectionIndex={index}
-				headingLevel={index === 0 ? 1 : 2}
-				prioritizeFirstImage={index === 0}
-			/>
-		))}
-	</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>

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';
@@ -35,34 +35,36 @@ interface Props {
 	pagePresentation: ResolvedPagePresentation;
 	visualTheme: VisualTheme;
 	sectionIndex: number;
-	headingLevel: 1 | 2;
 	prioritizeFirstImage?: boolean;
 }
 
-const { section, pagePresentation, visualTheme, sectionIndex, headingLevel, prioritizeFirstImage = false } = Astro.props;
-const HeadingTag = headingLevel === 1 ? 'h1' : 'h2';
-// Sections are authored with Markdown ## headings even when the first one renders as HTML h1.
-const sectionHeadingVisualLevel = 'h2';
-const firstContentBlockIsVisual = section.contentBlocks[0]?.type !== 'html'
-	&& section.contentBlocks[0]?.type !== 'note';
+const { section, pagePresentation, visualTheme, sectionIndex, prioritizeFirstImage = false } = Astro.props;
+const isPageTitle = section.headingLevel === 1;
+const HeadingTag = section.headingLevel === 1 ? 'h1' : 'h2';
+const sectionHeadingVisualLevel = section.headingLevel === 1 ? 'h1' : 'h2';
+const headingId = section.id ?? 'page-title';
+const firstContentBlock = section.contentBlocks[0];
+const firstContentBlockIsVisual = firstContentBlock !== undefined
+	&& firstContentBlock.type !== 'html'
+	&& firstContentBlock.type !== 'note';
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
 const headingSizeValues: Record<HeadingLevel, Record<TextSize, ResponsiveValue<string>>> = {
 	h1: {
 		small: {
-			desktop: 'clamp(1.5rem, 1.18rem + 1.15vw, 2.25rem)',
-			mobile: 'clamp(1.42rem, 1.12rem + 1.5vw, 2rem)',
+			desktop: 'clamp(1.35rem, 1.2rem + 0.55vw, 1.7rem)',
+			mobile: 'clamp(1.32rem, 1.16rem + 0.8vw, 1.58rem)',
 		},
 		medium: {
-			desktop: 'clamp(1.85rem, 1.35rem + 1.8vw, 3.1rem)',
-			mobile: 'clamp(1.65rem, 1.18rem + 2.2vw, 2.45rem)',
+			desktop: 'clamp(1.65rem, 1.35rem + 1.1vw, 2.4rem)',
+			mobile: 'clamp(1.5rem, 1.22rem + 1.4vw, 2rem)',
 		},
 		large: {
-			desktop: 'clamp(2.25rem, 1.45rem + 2.75vw, 4.25rem)',
-			mobile: 'clamp(1.9rem, 1.26rem + 3.2vw, 3.15rem)',
+			desktop: 'clamp(1.95rem, 1.48rem + 1.7vw, 3.2rem)',
+			mobile: 'clamp(1.75rem, 1.32rem + 2.15vw, 2.5rem)',
 		},
 		xlarge: {
-			desktop: 'clamp(2.75rem, 1.6rem + 3.8vw, 5.5rem)',
-			mobile: 'clamp(2.2rem, 1.35rem + 4.4vw, 3.9rem)',
+			desktop: 'clamp(2.35rem, 1.58rem + 2.75vw, 4.4rem)',
+			mobile: 'clamp(2rem, 1.4rem + 3vw, 3.1rem)',
 		},
 	},
 	h2: {
@@ -163,12 +165,9 @@ 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 = resolveSectionSurface(pagePresentation, sectionIndex);
+const surface = isPageTitle
+	? pagePresentation.palette.surfaces.base
+	: resolveSectionSurface(pagePresentation, sectionIndex);
 const typography = pagePresentation.typography.values;
 const heading = typography.headings[sectionHeadingVisualLevel] as {
 	align: ResponsiveValue<TextAlign>;
@@ -201,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,
@@ -249,6 +248,7 @@ for (const block of section.contentBlocks) {
 }
 
 flushReadingBlocks();
+const firstMediaGroupIndex = contentGroups.findIndex((group) => group.type === 'media');
 const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 	const headingConfig = markdownHeadings[level];
 	const fontSize = getHeadingSizeValue(level, headingConfig.size);
@@ -298,10 +298,12 @@ const sectionStyle = [
 ---
 
 <section
-	aria-labelledby={section.id}
+	aria-labelledby={headingId}
 	class:list={[
 		'site-section',
 		{
+			'site-section-page-title': isPageTitle,
+			'site-section-page-title-empty': isPageTitle && section.contentBlocks.length === 0,
 			'site-section-first-block-is-visual': firstContentBlockIsVisual,
 			'site-section-has-margin-notes': hasMarginNotes,
 		},
@@ -311,7 +313,7 @@ const sectionStyle = [
 >
 	<div class="section-card">
 		<header class="section-header">
-			<HeadingTag id={section.id} set:html={section.titleHtml} />
+			<HeadingTag id={headingId} set:html={section.titleHtml} />
 		</header>
 
 		<div class:list={['section-body', { 'section-body-has-media': hasMedia, 'section-body-text-only': !hasMedia }]}>
@@ -381,7 +383,7 @@ const sectionStyle = [
 							title={section.title}
 							images={block.images}
 							maxAvailableWidthPercent={visualTheme.images.maxAvailableWidthPercent}
-							priorityFirstImage={prioritizeFirstImage && groupIndex === 0}
+							priorityFirstImage={prioritizeFirstImage && groupIndex === firstMediaGroupIndex}
 						/>
 					);
 				}
@@ -395,7 +397,7 @@ const sectionStyle = [
 						title={section.title}
 						images={block.images}
 						maxAvailableWidthPercent={visualTheme.images.maxAvailableWidthPercent}
-						priorityFirstImage={prioritizeFirstImage && groupIndex === 0}
+						priorityFirstImage={prioritizeFirstImage && groupIndex === firstMediaGroupIndex}
 					/>
 				);
 			})}

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>
+)}