@janga/norna 0.7.27 → 0.7.29

package/scripts/sync-site-public.mjs

@@ -5,84 +5,62 @@ import { createSitemapXml, sitemapFilename } from './lib/sitemap.mjs';
 import {
 	astroPublicDir,
 	astroPublicLabel,
-	sitePublicDir,
 	sitePublicLabel,
 } from './lib/site-paths.mjs';
 import { getSiteStructure } from './lib/site-structure.mjs';
 import { getSiteLinkGraph } from './lib/site-link-graph.mjs';
 import { assertCategoryDestinationModel } from './lib/category-destinations.mjs';
 
-const keepAstroPublicEntries = new Set([
-	'images',
-	...(projectConfig.search.enabled ? ['pagefind'] : []),
-]);
+const main = async () => {
+	const readDirectory = async (directory) => {
+		try {
+			return await readdir(directory, { withFileTypes: true });
+		} catch (error) {
+			if (error?.code === 'ENOENT') {
+				return [];
+			}
 
-const readDirectory = async (directory) => {
-	try {
-		return await readdir(directory, { withFileTypes: true });
-	} catch (error) {
-		if (error?.code === 'ENOENT') {
-			return [];
+			throw error;
 		}
+	};
 
-		throw error;
-	}
-};
-
-const sourceEntries = await readDirectory(sitePublicDir);
-const generatedPublicFiles = [
-	{
-		filename: sitemapFilename,
-		explanation: `Norna generates ${sitemapFilename} from the public page tree and the URL in site/config.yaml.`,
-	},
-	{
-		filename: '404.html',
-		explanation: 'Norna generates 404.html as the site\'s localized missing-page response.',
-	},
-	...(projectConfig.search.enabled ? [{
-		filename: 'pagefind',
-		explanation: 'Norna generates pagefind/ from the rendered editorial content when search is enabled.',
-	}] : []),
-];
-for (const generatedFile of generatedPublicFiles) {
-	const conflict = sourceEntries.find(({ name }) => name.toLowerCase() === generatedFile.filename);
-	if (!conflict) continue;
-
-	throw new Error([
-		`${sitePublicLabel}/${conflict.name} conflicts with Norna's generated ${generatedFile.filename}.`,
-		`Remove that source file. ${generatedFile.explanation}`,
-	].join('\n'));
-}
-
-const siteStructure = await getSiteStructure();
-const { categoryModel } = await getSiteLinkGraph({ siteStructure });
-const { destinations: categoryDestinations } = assertCategoryDestinationModel(categoryModel);
-const sitemapXml = createSitemapXml({
-	siteStructure,
-	siteUrl: projectConfig.site.url,
-	categoryDestinations,
-});
+	const siteStructure = await getSiteStructure();
+	const { categoryModel, attachments, diagnostics, publicFilesByPathname } = await getSiteLinkGraph({ siteStructure });
+	const outputErrors = diagnostics.filter(issue => !issue.reference && issue.severity === 'error');
+	if (outputErrors.length) throw new Error(outputErrors.map(issue => issue.message).join('\n'));
+	const { destinations: categoryDestinations } = assertCategoryDestinationModel(categoryModel);
+	const sitemapXml = createSitemapXml({
+		siteStructure,
+		siteUrl: projectConfig.site.url,
+		categoryDestinations,
+	});
 
-await mkdir(astroPublicDir, { recursive: true });
+	await mkdir(astroPublicDir, { recursive: true });
 
-for (const entry of await readDirectory(astroPublicDir)) {
-	if (keepAstroPublicEntries.has(entry.name)) {
-		continue;
+	for (const entry of await readDirectory(astroPublicDir)) {
+		if (entry.name !== '_norna') await rm(path.join(astroPublicDir, entry.name), { force: true, recursive: true });
+	}
+	const resources = path.join(astroPublicDir, '_norna');
+	for (const entry of await readDirectory(resources)) {
+		if (entry.name === 'images' || entry.name === 'search' && projectConfig.search.enabled) continue;
+		await rm(path.join(resources, entry.name), { force: true, recursive: true });
+	}
+	for (const file of new Set(publicFilesByPathname.values())) {
+		const destination = path.join(astroPublicDir, file.pathname.slice(1));
+		await mkdir(path.dirname(destination), { recursive: true });
+		await cp(file.filePath, destination, { force: false, errorOnExist: true });
 	}
 
-	await rm(path.join(astroPublicDir, entry.name), { force: true, recursive: true });
-}
-
-for (const entry of sourceEntries) {
-	await cp(
-		path.join(sitePublicDir, entry.name),
-		path.join(astroPublicDir, entry.name),
-		{ force: true, recursive: true },
-	);
-}
+	for (const file of attachments.files) {
+		const destination = path.join(astroPublicDir, file.pathname.slice(1));
+		await mkdir(path.dirname(destination), { recursive: true });
+		await cp(file.filePath, destination, { force: false, errorOnExist: true });
+	}
+	await writeFile(path.join(astroPublicDir, sitemapFilename), sitemapXml);
 
-await writeFile(path.join(astroPublicDir, sitemapFilename), sitemapXml);
+	console.log(`Synced ${sitePublicLabel}/ to ${astroPublicLabel}/.`);
+	const pageCount = siteStructure.contentFiles.length + categoryDestinations.filter(({ kind }) => kind === 'listing').length;
+	console.log(`Generated ${astroPublicLabel}/${sitemapFilename} for ${pageCount} public page${pageCount === 1 ? '' : 's'}.`);
+};
 
-console.log(`Synced ${sitePublicLabel}/ to ${astroPublicLabel}/.`);
-const pageCount = siteStructure.contentFiles.length + categoryDestinations.filter(({ kind }) => kind === 'listing').length;
-console.log(`Generated ${astroPublicLabel}/${sitemapFilename} for ${pageCount} public page${pageCount === 1 ? '' : 's'}.`);
+await main().catch(error => { console.error(error.message); process.exitCode = 1; });

package/scripts/upgrade-site.mjs

@@ -0,0 +1,17 @@
+import { siteDir } from './lib/site-paths.mjs';
+import { planSiteUpgrade } from './lib/site-upgrade.mjs';
+
+const usage = 'Usage: norna site:upgrade [--apply]\nCheck the root/ source layout. Former layouts require manual conversion; --apply is retained but does not convert old sources.';
+const args = process.argv.slice(2);
+try {
+	if (args.includes('--help') || args.includes('-h')) {
+		console.log(usage);
+	} else {
+		if (args.length > 1 || args.some((arg) => arg !== '--apply')) throw new Error(usage);
+		await planSiteUpgrade(siteDir);
+		console.log('The site already uses the current configuration and homepage layout. No files changed.');
+	}
+} catch (error) {
+	console.error(error.message);
+	process.exitCode = 1;
+}

package/src/components/AreaNavigationMenu.astro

@@ -0,0 +1,24 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import type { CategoryDestinationMap, SiteNavigationNode } from '../lib/siteNavigation';
+import type { SiteNode } from '../lib/sitePages';
+import AreaNavigationPanel from './AreaNavigationPanel.astro';
+
+interface Props {
+	node: SiteNavigationNode;
+	currentPage?: SiteNode;
+	categoryDestinations?: CategoryDestinationMap;
+}
+const { node, currentPage, categoryDestinations } = Astro.props;
+const label = `${projectConfig.locale.labels.navigationMenu}: ${node.node.title}`;
+const panelId = `area-menu-${encodeURIComponent(node.node.pagePath)}`;
+---
+
+{node.children.length > 0 && (
+	<details class="top-page-menu area-navigation-menu" data-area-menu={node.node.pagePath}>
+		<summary aria-label={label} aria-controls={panelId}>
+			<span class="top-page-menu-title">{node.node.title}</span>
+		</summary>
+		<AreaNavigationPanel id={panelId} node={node} currentPage={currentPage} categoryDestinations={categoryDestinations} />
+	</details>
+)}

package/src/components/AreaNavigationPanel.astro

@@ -0,0 +1,55 @@
+---
+import { Check } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import { getNavigationDestination, type CategoryDestinationMap, type SiteNavigationNode } from '../lib/siteNavigation';
+import { getAreaMenuGroups, resolveAreaNavigation } from '../lib/areaNavigation';
+import type { SiteNode } from '../lib/sitePages';
+
+interface Props {
+	id: string;
+	node?: SiteNavigationNode;
+	currentPage?: SiteNode;
+	categoryDestinations?: CategoryDestinationMap;
+	otherRoots?: SiteNavigationNode[];
+}
+const { id, node, currentPage, categoryDestinations, otherRoots = [] } = Astro.props;
+const { localRoot } = resolveAreaNavigation(node ? [node] : [], currentPage);
+const { branches, pages } = node ? getAreaMenuGroups(node) : { branches: [], pages: [] };
+const columnsFor = (count: number, maximum: number) => count === 0 ? 0 : Math.ceil(count / Math.ceil(count / maximum));
+const branchColumns = columnsFor(branches.length, pages.length > 0 ? 2 : 3);
+const pageColumns = branches.length === 0 ? columnsFor(pages.length, 3) : pages.length > 0 ? 1 : 0;
+const groups = [
+	{ kind: 'branches', choices: branches, columns: branchColumns },
+	{ kind: 'pages', choices: pages, columns: pageColumns },
+].filter(({ choices }) => choices.length > 0);
+---
+
+<nav id={id} class="top-page-panel area-navigation-panel"
+	style={`--area-menu-columns: ${branchColumns + pageColumns || 2}`}
+	aria-label={node ? `${node.node.title}: ${projectConfig.locale.labels.navigationChildren}` : projectConfig.locale.labels.siteNavigation}>
+	{groups.map((group) => <ul class="area-navigation-choices" data-area-choice-group={group.kind}
+		style={`--area-group-columns: ${group.columns}; --area-group-rows: ${Math.ceil(group.choices.length / group.columns)}`}>
+		{group.choices.map((child) => {
+			const destination = getNavigationDestination(child.node, categoryDestinations);
+			const selected = localRoot === child || currentPage?.pagePath === child.node.pagePath;
+			const description = child.node.kind === 'page'
+				? child.node.entry.data.page?.description
+				: child.node.description;
+			return <li>
+				<a href={withBasePath(projectConfig.site.basePath, destination.pathname)}
+					aria-current={selected ? 'true' : undefined} data-area-choice={child.node.pagePath}>
+					<span class="area-navigation-title">{child.node.title}{selected && <Check aria-hidden="true" />}</span>
+					{group.kind === 'branches' && description && <span class="area-navigation-description">{description}</span>}
+				</a>
+			</li>;
+		})}
+	</ul>)}
+	{otherRoots.length > 0 && <ul class="area-navigation-other-roots" aria-label={projectConfig.locale.labels.siteNavigation}>
+		{otherRoots.map(({ node: root }) => <li>
+			<a href={withBasePath(projectConfig.site.basePath, getNavigationDestination(root, categoryDestinations).pathname)}>
+				{root.isHome ? projectConfig.locale.labels.returnHome : root.title}
+			</a>
+		</li>)}
+	</ul>}
+</nav>

package/src/components/AreaNavigationSwitcher.astro

@@ -0,0 +1,30 @@
+---
+import { Menu } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { hasLargeAreaMenu, resolveAreaNavigation } from '../lib/areaNavigation';
+import type { CategoryDestinationMap, SiteNavigationNode } from '../lib/siteNavigation';
+import type { SiteNode } from '../lib/sitePages';
+import AreaNavigationPanel from './AreaNavigationPanel.astro';
+
+interface Props {
+	nodes: SiteNavigationNode[];
+	currentPage?: SiteNode;
+	categoryDestinations?: CategoryDestinationMap;
+	label?: string;
+}
+
+const { nodes, currentPage, categoryDestinations, label } = Astro.props;
+const { globalRoot } = resolveAreaNavigation(nodes, currentPage);
+const currentLabel = label ?? globalRoot?.node.title ?? projectConfig.locale.labels.navigationMenu;
+const menuRoot = globalRoot && globalRoot.children.length > 0 && !hasLargeAreaMenu(globalRoot) ? globalRoot : undefined;
+const otherRoots = nodes.filter((root) => root !== menuRoot);
+const menuLabel = `${projectConfig.locale.labels.navigationMenu}: ${currentLabel}`;
+---
+
+<details class="top-page-menu area-navigation-switcher" data-area-switcher>
+	<summary aria-label={menuLabel} title={menuLabel} aria-controls="area-switcher-panel">
+		<Menu aria-hidden="true" />
+	</summary>
+	<AreaNavigationPanel id="area-switcher-panel" node={menuRoot} currentPage={currentPage}
+		categoryDestinations={categoryDestinations} otherRoots={otherRoots} />
+</details>

package/src/components/ContentBlocks.astro

@@ -4,6 +4,7 @@ import ImageCarousel from './ImageCarousel.astro';
 import ImageStack from './ImageStack.astro';
 import PageList from './PageList.astro';
 import type { SectionContentBlock } from '../lib/sectionContent';
+import { renderNestedMarkdownImages } from '../lib/markdownImages';
 
 interface Props {
 	blocks: SectionContentBlock[];
@@ -20,7 +21,7 @@ const firstMediaIndex = blocks.findIndex((block) => block.type === 'image-stack'
 ---
 
 {blocks.map((block, index) => {
-	if (block.type === 'html') return <div class="section-markdown" set:html={block.html} />;
+	if (block.type === 'html') return <div class="section-markdown" set:html={renderNestedMarkdownImages(block.html, title, images.maxAvailableWidthPercent)} />;
 	if (block.type === 'tabs') return (
 		<div class="content-tabs content-block-note-lane-boundary" data-content-tabs>
 			<div class="content-tabs-controls" data-tabs-controls hidden></div>

package/src/components/ImageStack.astro

@@ -43,10 +43,11 @@ const managedImageSizes = getManagedImageSizes(maxAvailableWidthPercent);
 				<div class="managed-image-frame">
 					<a
 						class="managed-image-inspection-link"
-						href={inspection.href}
-						aria-label={inspectionLabel}
+						href={image.href ?? inspection.href}
+						title={image.linkTitle}
+						aria-label={image.href === undefined ? inspectionLabel : undefined}
 						aria-describedby={captionId}
-						data-image-inspection-trigger
+						data-image-inspection-trigger={image.href === undefined ? '' : undefined}
 						data-image-intrinsic-width={inspection.width}
 						data-image-intrinsic-height={inspection.height}
 						data-image-inspection-scalable={inspection.scalable ? 'true' : undefined}
@@ -56,12 +57,13 @@ const managedImageSizes = getManagedImageSizes(maxAvailableWidthPercent);
 							{...getImageAttributes(image.src ?? image.image, managedImageSizes)}
 							class:list={['managed-image', getImageClass(image)]}
 							alt={image.alt ?? ''}
+							title={image.title}
 							aria-describedby={captionId}
 							{...getImageLoadingProps(isPriorityItem)}
 						/>
-						<span class="managed-image-inspection-affordance" aria-hidden="true">
+						{image.href === undefined && <span class="managed-image-inspection-affordance" aria-hidden="true">
 							<Maximize2 size={18} stroke-width={2} />
-						</span>
+						</span>}
 					</a>
 				</div>
 				{image.caption && (

package/src/components/ImageStackEnhancement.astro

@@ -104,13 +104,6 @@ const labels = projectConfig.locale.labels;
 		const imageBounds = image.getBoundingClientRect();
 		if (imageBounds.height < usableViewportHeight * persistentCaptionHeightRatio) return;
 
-		const visibleContentsRail = Array.from(
-			layout.querySelectorAll<HTMLElement>('.page-contents-navigation-rail'),
-		).some(isVisible);
-		const reservesContentsLane = layout.dataset.pageContentsPlacement === 'contents-rail'
-			&& document.documentElement.dataset.focusReading !== 'on';
-		if (visibleContentsRail || reservesContentsLane) return;
-
 		const frameBounds = frame.getBoundingClientRect();
 		const figureBounds = figure.getBoundingClientRect();
 		const captionBounds = caption.getBoundingClientRect();

package/src/components/NavigationContinuity.astro

@@ -0,0 +1,26 @@
+---
+import styles from '../styles/navigation-continuity.css?inline';
+---
+
+<style is:inline set:html={styles} />
+<script is:inline>
+	// A cold history arrival can restore its position at pagereveal, then lose
+	// it to native fragment scrolling when deferred modules finish parsing.
+	// Keep the browser's restored position until that initial load completes.
+	window.addEventListener('pagereveal', () => {
+		if (!location.hash || document.readyState === 'complete'
+			|| performance.getEntriesByType('navigation')[0]?.type !== 'back_forward'
+			|| history.scrollRestoration !== 'auto') return;
+
+		history.scrollRestoration = 'manual';
+		const release = () => {
+			history.scrollRestoration = 'auto';
+			window.removeEventListener('load', release);
+			window.removeEventListener('pagehide', release);
+		};
+		window.addEventListener('load', release);
+		window.addEventListener('pagehide', release);
+	}, { once: true });
+</script>
+<!-- A streamed response must finish the page before its transition snapshot. -->
+<link rel="expect" blocking="render" href="#norna-navigation-ready" />

package/src/components/NavigationPageTree.astro

@@ -1,19 +1,23 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import type { SiteNavigationNode } from '../lib/siteNavigation';
+import { getNavigationDestination, type CategoryDestinationMap, type SiteNavigationNode } from '../lib/siteNavigation';
 import type { SiteNode, SitePage } from '../lib/sitePages';
 import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
 	nodes: SiteNavigationNode[];
 	currentPage?: SiteNode;
+	categoryDestinations?: CategoryDestinationMap;
 	variant: 'mobile' | 'sidebar' | 'submenu';
 	integratePageSections?: boolean;
 }
 
-const { nodes, currentPage, variant, integratePageSections = false } = Astro.props;
+const { nodes, currentPage, categoryDestinations, variant, integratePageSections = false } = Astro.props;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+const categoryHref = (node: SiteNavigationNode) => withBasePath(
+	projectConfig.site.basePath, getNavigationDestination(node.node, categoryDestinations).pathname,
+);
 const hasBranch = (node: SiteNavigationNode) => node.children.length > 0;
 const isCurrentPage = (page: SitePage) => currentPage?.pathname === page.pathname;
 const isCurrentBranch = (node: SiteNode) => Boolean(currentPage && (
@@ -71,13 +75,17 @@ const usesPageDisclosure = (node: SiteNavigationNode) => variant !== 'submenu' &
 						class="navigation-page-summary"
 						aria-controls={getBranchId(node.node)}
 					>
-						<span class="navigation-page-summary-title">{node.node.title}</span>
+							<a class:list={['navigation-page-summary-title', 'navigation-category-link', {
+								'mobile-nav-destination': variant === 'mobile',
+							}]}
+								href={categoryHref(node)}>{node.node.title}</a>
 						<span class="navigation-page-chevron" aria-hidden="true"></span>
 					</summary>
 					<div id={getBranchId(node.node)} class="navigation-page-branch-content">
 						<Astro.self
 							nodes={node.children}
 							currentPage={currentPage}
+							categoryDestinations={categoryDestinations}
 							variant={variant}
 							integratePageSections={integratePageSections}
 						/>
@@ -123,6 +131,7 @@ const usesPageDisclosure = (node: SiteNavigationNode) => variant !== 'submenu' &
 						<Astro.self
 							nodes={node.children}
 							currentPage={currentPage}
+							categoryDestinations={categoryDestinations}
 							variant={variant}
 							integratePageSections={integratePageSections}
 						/>
@@ -174,7 +183,7 @@ const usesPageDisclosure = (node: SiteNavigationNode) => variant !== 'submenu' &
 						{node.node.title}
 					</a>
 					{node.children.length > 0 && (
-						<Astro.self nodes={node.children} currentPage={currentPage} variant={variant} />
+						<Astro.self nodes={node.children} currentPage={currentPage} categoryDestinations={categoryDestinations} variant={variant} />
 					)}
 				</>
 			)}

package/src/components/NavigationState.astro

@@ -0,0 +1,11 @@
+---
+import { getNavigationStateScript } from '../lib/navigationStateScript.mjs';
+
+interface Props {
+	scope: 'desktop' | 'mobile';
+}
+
+const { scope } = Astro.props;
+---
+
+<script is:inline data-navigation-state-scope={scope} set:html={getNavigationStateScript()} />

package/src/components/NavigationTreeControls.astro

@@ -6,15 +6,16 @@ import type { SiteNavigationNode } from '../lib/siteNavigation';
 interface Props {
 	idPrefix: string;
 	nodes: SiteNavigationNode[];
+	forceVisible?: boolean;
 }
 
-const { idPrefix, nodes } = Astro.props;
+const { idPrefix, nodes, forceVisible = false } = Astro.props;
 const countNodes = (tree: SiteNavigationNode[]): number => tree.reduce(
 	(total, node) => total + 1 + countNodes(node.children),
 	0,
 );
 const minimumUsefulNodeCount = 12;
-const showControls = countNodes(nodes) >= minimumUsefulNodeCount;
+const showControls = forceVisible || countNodes(nodes) >= minimumUsefulNodeCount;
 const labels = projectConfig.locale.labels;
 const filterId = `${idPrefix}-filter`;
 const statusId = `${idPrefix}-status`;

package/src/components/SearchPage.astro

@@ -1,4 +1,5 @@
 ---
+import { searchOutputDirectory } from '../../scripts/lib/publication-paths.mjs';
 import { getCollection } from 'astro:content';
 import { ArrowLeft } from '@lucide/astro';
 import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
@@ -17,12 +18,13 @@ import { withBasePath } from '../lib/basePath';
 
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
 const siteModel = await getSiteModel(await getCollection('site'));
+const categoryDestinations = siteModel.categoryDestinations.byPathname;
 const { nodes: siteNodes, pages: sitePages } = siteModel;
 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;
@@ -55,6 +57,7 @@ const pagePresentation = resolvePagePresentation(siteThemeData, themeLabel, {
 	navigationMode: navigationModel.mode,
 });
 const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
+const areaReadingFrame = navigationModel.mode === 'tree';
 const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: themeLabel });
 const logoAsset = getLogoAsset();
 const logo = logoAsset
@@ -82,7 +85,7 @@ const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
 		navigationModel.requestedMode === 'automatic'
 		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
 	);
-const bundlePath = withBasePath(projectConfig.site.basePath, '/pagefind/');
+const bundlePath = withBasePath(projectConfig.site.basePath, `/${searchOutputDirectory}/`);
 const pagefindTranslationOption = projectConfig.locale.pagefindTranslations
 	? `,\n\t\t\ttranslations: ${JSON.stringify(projectConfig.locale.pagefindTranslations)}`
 	: '';
@@ -130,19 +133,24 @@ const searchScript = `(() => {
 	pathname="/search/"
 	footer={sitewideData.footer}
 	indexable={false}
+	areaNavigation={navigationModel.mode === 'tree'}
+	areaReadingFrame={areaReadingFrame}
 >
 	<link slot="head" rel="stylesheet" href={`${bundlePath}pagefind-ui.css`} />
 	<SiteNavigation
 		logo={logo}
 		navigationEntries={siteNavigation}
+		categoryDestinations={categoryDestinations}
 		navigationMode={navigationModel.mode}
 		showTopNavigationSubmenus={navigationModel.requestedMode !== 'automatic' && navigationModel.mode !== 'tree'}
 		hasNavigationRailFrame={hasNavigationRailFrame}
 		frameColors={frameColors}
 		readerPreferences={pagePresentation.readerPreferences}
 		searchPage
+		areaReadingFrame={areaReadingFrame}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
+	<div class:list={['site-page-layout', { 'site-page-layout-tree': areaReadingFrame }]}>
 	<main class="site-content search-page-content" id="main-content" style={`--page-text-width: ${pageTextWidth}`}>
 		<SiteSection
 			section={searchSection}
@@ -158,6 +166,7 @@ const searchScript = `(() => {
 			</div>
 		</SiteSection>
 	</main>
+	</div>
 	<script is:inline set:html={searchScript} />
 </BaseLayout>