@janga/norna 0.7.22 → 0.7.24

package/src/components/DisplaySettings.astro

@@ -20,9 +20,9 @@ interface Props {
 const { controls, defaults } = Astro.props;
 const labels = projectConfig.locale.labels;
 const appearanceOptions = [
-	{ value: 'system', label: labels.colorModeSystem },
-	{ value: 'light', label: labels.colorModeLight },
-	{ value: 'dark', label: labels.colorModeDark },
+	{ value: 'system', label: labels.appearanceSystem },
+	{ value: 'light', label: labels.appearanceLight },
+	{ value: 'dark', label: labels.appearanceDark },
 ] as const;
 const widthOptions = [
 	{ value: 'narrow', label: labels.readingWidthNarrow },
@@ -51,7 +51,7 @@ const widthOptions = [
 
 		{controls.appearance && (
 			<fieldset>
-				<legend>{labels.colorMode}</legend>
+				<legend>{labels.appearance}</legend>
 				<div class="display-settings-segmented">
 					{appearanceOptions.map((option) => (
 						<label>

package/src/components/EditSourceLink.astro

@@ -0,0 +1,17 @@
+---
+import { PencilLine } from '@lucide/astro';
+
+interface Props {
+	href: string;
+	label: string;
+}
+
+const { href, label } = Astro.props;
+---
+
+<p class="edit-source-link" data-pagefind-ignore="all">
+	<a href={href}>
+		<PencilLine aria-hidden="true" />
+		<span>{label}</span>
+	</a>
+</p>

package/src/components/ImageCarousel.astro

@@ -1,5 +1,6 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
+import { defaultImageMaxAvailableHeightPercent } from '../../scripts/lib/image-presentation.mjs';
 import { getImageAttributes } from '../lib/generatedImages';
 import {
 	getCaptionId,
@@ -17,7 +18,7 @@ interface Props {
 		desktop: number;
 		mobile: number;
 	};
-	maxAvailableHeightPercent: {
+	maxAvailableHeightPercent?: {
 		desktop: number;
 		mobile: number;
 	};
@@ -33,11 +34,13 @@ const {
 } = Astro.props;
 const managedImageSizes = getManagedImageSizes(maxAvailableWidthPercent);
 const carouselAspectRatio = getCarouselAspectRatio(images);
+const carouselMaxAvailableHeightPercent = maxAvailableHeightPercent
+	?? defaultImageMaxAvailableHeightPercent;
 const carouselStyle = carouselAspectRatio
 	? [
 		`--image-carousel-aspect-ratio: ${carouselAspectRatio}`,
-		`--image-carousel-width-from-height-desktop: ${carouselAspectRatio * maxAvailableHeightPercent.desktop}svh`,
-		`--image-carousel-width-from-height-mobile: ${carouselAspectRatio * maxAvailableHeightPercent.mobile}svh`,
+		`--image-carousel-width-from-height-desktop: ${carouselAspectRatio * carouselMaxAvailableHeightPercent.desktop}svh`,
+		`--image-carousel-width-from-height-mobile: ${carouselAspectRatio * carouselMaxAvailableHeightPercent.mobile}svh`,
 	].join('; ')
 	: undefined;
 ---

package/src/components/NavigationPageTree.astro

@@ -7,7 +7,7 @@ import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
 	nodes: SiteNavigationNode[];
-	currentPage: SitePage;
+	currentPage?: SitePage;
 	variant: 'mobile' | 'sidebar' | 'submenu';
 	integratePageSections?: boolean;
 }
@@ -15,21 +15,31 @@ interface Props {
 const { nodes, currentPage, variant, integratePageSections = false } = Astro.props;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
 const hasBranch = (node: SiteNavigationNode) => node.children.length > 0;
-const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
-const isCurrentBranch = (node: SiteNode) => (
+const isCurrentPage = (page: SitePage) => currentPage?.pathname === page.pathname;
+const isCurrentBranch = (node: SiteNode) => Boolean(currentPage && (
 	currentPage.pageDirectory === node.pageDirectory
 	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`)
-);
+));
 const getBranchId = (node: SiteNode) => [
 	'navigation',
 	variant,
 	node.pagePath || 'home',
 	'children',
 ].join('-').replace(/[^a-z0-9-]+/gi, '-');
+const getSectionsId = (node: SiteNode) => [
+	'navigation',
+	variant,
+	node.pagePath || 'home',
+	'sections',
+].join('-').replace(/[^a-z0-9-]+/gi, '-');
 const hasPageSections = (node: SiteNavigationNode) => (
 	node.node.kind === 'page' && node.headings.some((heading) => heading.depth === 2)
 );
-const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPageSections(node);
+const showsPageSections = (node: SiteNavigationNode) => (
+	integratePageSections
+	&& hasPageSections(node)
+);
+const usesPageDisclosure = (node: SiteNavigationNode) => variant !== 'submenu' && hasBranch(node);
 ---
 
 <ul class:list={['navigation-page-tree', `navigation-page-tree-${variant}`]}>
@@ -37,9 +47,13 @@ const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPa
 		<li
 			class:list={['navigation-page-node', {
 				'navigation-page-node-category': node.node.kind === 'category',
+				'navigation-page-node-page-disclosure': node.node.kind === 'page' && usesPageDisclosure(node),
 				'navigation-page-node-current': node.node.kind === 'page' && isCurrentPage(node.node),
 				'navigation-page-node-current-branch': isCurrentBranch(node.node),
 			}]}
+			data-navigation-title={node.node.title}
+			data-navigation-kind={node.node.kind}
+			data-navigation-current-page={node.node.kind === 'page' && isCurrentPage(node.node) ? 'true' : undefined}
 		>
 			{node.node.kind === 'category' ? (
 				<details
@@ -69,103 +83,84 @@ const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPa
 						/>
 					</div>
 				</details>
-			) : variant !== 'submenu' && integratePageSections ? (
-				hasPageDisclosure(node) ? (
-					<details
-						class:list={['navigation-page-branch', 'navigation-page-disclosure', `navigation-page-disclosure-${variant}`]}
-						data-page-path={node.node.pagePath || '/'}
-						data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
-						data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
-						data-has-sections={hasPageSections(node) ? 'true' : undefined}
-						open={isCurrentBranch(node.node)}
-					>
-						<summary
-							class="navigation-page-summary"
-							aria-controls={getBranchId(node.node)}
-						>
-							<span class="navigation-page-summary-title">{node.node.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.node)}
-							aria-current={isCurrentPage(node.node) ? 'page' : undefined}
-						>
-							{node.node.title}
-						</a>
-						<div id={getBranchId(node.node)} class="navigation-page-branch-content">
-							{hasPageSections(node) && (
-								<nav
-									class="navigation-page-sections"
-									aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
-								>
-									<PageContentsLinks
-										headings={node.headings}
-										variant={variant === 'mobile' ? 'mobile' : 'desktop'}
-										pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
-									/>
-								</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.node)}
-						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
-					>
-						{node.node.title}
-					</a>
-				)
-			) : variant !== 'submenu' ? (
-				<>
-					<a
-						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
-						href={pageHref(node.node)}
-						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
+			) : variant !== 'submenu' && usesPageDisclosure(node) ? (
+				<details
+					class:list={['navigation-page-branch', 'navigation-page-disclosure', `navigation-page-disclosure-${variant}`]}
+					data-page-path={node.node.pagePath || '/'}
+					data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
+					data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
+					open={isCurrentBranch(node.node)}
+				>
+					<summary
+						class="navigation-page-summary"
+						aria-controls={getBranchId(node.node)}
+						aria-label={`${projectConfig.locale.labels.navigationChildren}: ${node.node.title}`}
 					>
-						{node.node.title}
-					</a>
-					{variant === 'sidebar' && isCurrentPage(node.node) && hasPageSections(node) && (
+						<span class="navigation-page-chevron" aria-hidden="true"></span>
+					</summary>
+				</details>
+				<a
+					class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+					href={pageHref(node.node)}
+					aria-current={isCurrentPage(node.node) ? 'page' : undefined}
+				>
+					{node.node.title}
+				</a>
+				<div id={getBranchId(node.node)} class="navigation-page-branch-content">
+					{showsPageSections(node) && (
 						<nav
 							class="navigation-page-sections"
 							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
 						>
 							<PageContentsLinks
 								headings={node.headings}
-								variant="desktop"
+								variant={variant === 'mobile' ? 'mobile' : 'desktop'}
+								pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
 							/>
 						</nav>
 					)}
 					{hasBranch(node) && (
+						<Astro.self
+							nodes={node.children}
+							currentPage={currentPage}
+							variant={variant}
+							integratePageSections={integratePageSections}
+						/>
+					)}
+				</div>
+			) : variant !== 'submenu' ? (
+				<>
+					<a
+						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+						href={pageHref(node.node)}
+						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
+					>
+						{node.node.title}
+					</a>
+					{showsPageSections(node) && (
 						<details
-							class="navigation-page-branch"
+							class="navigation-page-sections-disclosure"
 							data-page-path={node.node.pagePath || '/'}
-							data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
-							open={isCurrentBranch(node.node)}
+							data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
+							open={isCurrentPage(node.node)}
 						>
-							<summary aria-controls={getBranchId(node.node)}>
-								<span class="visually-hidden">
-									{projectConfig.locale.labels.navigationChildren}: {node.node.title}
-								</span>
-								<span aria-hidden="true"></span>
+							<summary
+								aria-controls={getSectionsId(node.node)}
+								aria-label={`${projectConfig.locale.labels.pageSections}: ${node.node.title}`}
+							>
+								<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}
-									variant={variant}
-									integratePageSections={integratePageSections}
+							<nav
+								id={getSectionsId(node.node)}
+								class="navigation-page-sections"
+								aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
+							>
+								<PageContentsLinks
+									headings={node.headings}
+									variant={variant === 'mobile' ? 'mobile' : 'desktop'}
+									pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
 								/>
-							</div>
+							</nav>
 						</details>
 					)}
 				</>

package/src/components/NavigationTreeControls.astro

@@ -0,0 +1,77 @@
+---
+import { ChevronsDownUp, ChevronsUpDown, ListFilter, LocateFixed } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import type { SiteNavigationNode } from '../lib/siteNavigation';
+
+interface Props {
+	idPrefix: string;
+	nodes: SiteNavigationNode[];
+}
+
+const { idPrefix, nodes } = 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 labels = projectConfig.locale.labels;
+const filterId = `${idPrefix}-filter`;
+const statusId = `${idPrefix}-status`;
+---
+
+{showControls && (
+	<div
+		class="navigation-tree-controls"
+		data-tree-controls
+		data-tree-label-collapsed={labels.navigationCollapsedAll}
+		data-tree-label-expanded={labels.navigationExpandedAll}
+		data-tree-label-filter-matches={labels.navigationFilterMatches}
+		data-tree-label-located={labels.navigationLocatedCurrent}
+		hidden
+	>
+		<label class="navigation-tree-filter" for={filterId}>
+			<ListFilter aria-hidden="true" />
+			<span class="visually-hidden">{labels.navigationFilter}</span>
+			<input
+				id={filterId}
+				type="search"
+				autocomplete="off"
+				spellcheck="false"
+				placeholder={labels.navigationFilter}
+				aria-describedby={statusId}
+				data-tree-filter
+			/>
+		</label>
+		<div class="navigation-tree-commands" role="group" aria-label={labels.navigationControls}>
+			<button
+				type="button"
+				aria-label={labels.navigationExpandAll}
+				title={labels.navigationExpandAll}
+				data-tree-expand-all
+			>
+				<ChevronsUpDown aria-hidden="true" />
+			</button>
+			<button
+				type="button"
+				aria-label={labels.navigationCollapseAll}
+				title={labels.navigationCollapseAll}
+				data-tree-collapse-all
+			>
+				<ChevronsDownUp aria-hidden="true" />
+			</button>
+			<button
+				type="button"
+				aria-label={labels.navigationLocateCurrent}
+				title={labels.navigationLocateCurrent}
+				data-tree-locate-current
+			>
+				<LocateFixed aria-hidden="true" />
+			</button>
+		</div>
+		<p class="navigation-tree-filter-empty" data-tree-filter-empty hidden>
+			{labels.navigationFilterEmpty}
+		</p>
+		<p id={statusId} class="visually-hidden" role="status" aria-live="polite" data-tree-status></p>
+	</div>
+)}

package/src/components/PageAliasRedirect.astro

@@ -0,0 +1,49 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { getAbsolutePageUrl } from '../../scripts/lib/site-page-urls.mjs';
+import { withBasePath } from '../lib/basePath';
+
+interface Props {
+	targetPathname: string;
+	targetTitle: string;
+}
+
+const { targetPathname, targetTitle } = Astro.props;
+const { labels, lang } = projectConfig.locale;
+const targetHref = withBasePath(projectConfig.site.basePath, targetPathname);
+const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
+---
+
+<!doctype html>
+<html lang={lang} data-pagefind-ignore="all">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="robots" content="noindex, follow" />
+		<meta http-equiv="refresh" content={`0; url=${targetHref}`} />
+		<link rel="canonical" href={canonicalUrl} />
+		<title>{labels.pageMoved}: {targetTitle}</title>
+		<style is:inline>
+			:root {
+				color-scheme: light dark;
+				font-family: system-ui, sans-serif;
+			}
+
+			body {
+				margin: 0;
+				padding: 2rem;
+			}
+
+			main {
+				max-width: 42rem;
+				margin-inline: auto;
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<h1>{labels.pageMoved}</h1>
+			<p>{labels.pageMovedText} <a href={targetHref}>{targetTitle}</a>.</p>
+		</main>
+	</body>
+</html>

package/src/components/PageContentsNavigation.astro

@@ -0,0 +1,21 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import type { HeadingNavigation } from '../lib/sectionContent';
+import PageContentsLinks from './PageContentsLinks.astro';
+
+interface Props {
+	headings: HeadingNavigation[];
+	pageTitle: string;
+	variant: 'inline' | 'rail';
+}
+
+const { headings, pageTitle, variant } = Astro.props;
+const label = `${projectConfig.locale.labels.pageNavigation}: ${pageTitle}`;
+---
+
+<aside class={`page-contents-navigation page-contents-navigation-${variant}`}>
+	<nav aria-label={label}>
+		<p class="page-contents-navigation-label">{projectConfig.locale.labels.pageNavigation}</p>
+		<PageContentsLinks headings={headings} variant="desktop" />
+	</nav>
+</aside>

package/src/components/PageList.astro

@@ -0,0 +1,33 @@
+---
+import { ArrowRight } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+
+type PageListItem = {
+	title: string;
+	pathname: string;
+	description?: string;
+};
+
+interface Props {
+	pages: PageListItem[];
+}
+
+const { pages } = Astro.props;
+---
+
+<nav class="child-page-list" aria-label={projectConfig.locale.labels.navigationChildren}>
+	<ul>
+		{pages.map((page) => (
+			<li>
+				<a href={withBasePath(projectConfig.site.basePath, page.pathname)}>
+					<span class="child-page-list-copy">
+						<strong>{page.title}</strong>
+						{page.description && <span>{page.description}</span>}
+					</span>
+					<ArrowRight aria-hidden="true" />
+				</a>
+			</li>
+		))}
+	</ul>
+</nav>

package/src/components/PageSequenceNavigation.astro

@@ -0,0 +1,37 @@
+---
+import { ArrowLeft, ArrowRight } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import type { SitePage } from '../lib/sitePages';
+
+interface Props {
+	previous: SitePage | null;
+	next: SitePage | null;
+}
+
+const { previous, next } = Astro.props;
+const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+---
+
+{(previous || next) && (
+	<nav class="page-sequence-navigation" aria-label={projectConfig.locale.labels.pageSequence}>
+		{previous ? (
+			<a class="page-sequence-link page-sequence-previous" href={pageHref(previous)} rel="prev">
+				<ArrowLeft aria-hidden="true" />
+				<span>
+					<span class="page-sequence-direction">{projectConfig.locale.labels.previousPage}</span>
+					<span class="page-sequence-title">{previous.title}</span>
+				</span>
+			</a>
+		) : <span class="page-sequence-empty" aria-hidden="true"></span>}
+		{next ? (
+			<a class="page-sequence-link page-sequence-next" href={pageHref(next)} rel="next">
+				<span>
+					<span class="page-sequence-direction">{projectConfig.locale.labels.nextPage}</span>
+					<span class="page-sequence-title">{next.title}</span>
+				</span>
+				<ArrowRight aria-hidden="true" />
+			</a>
+		) : <span class="page-sequence-empty" aria-hidden="true"></span>}
+	</nav>
+)}

package/src/components/SearchPage.astro

@@ -0,0 +1,151 @@
+---
+import { getCollection } from 'astro:content';
+import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
+import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
+import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
+import SiteBanners from './SiteBanners.astro';
+import SiteNavigation from './SiteNavigation.astro';
+import SiteSection from './SiteSection.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import type { ResolvedSection } from '../lib/sectionContent';
+import { flattenSiteNavigationTree, getListedSiteNavigationTree } from '../lib/siteNavigation';
+import { getSiteModel, type SitePage } from '../lib/sitePages';
+import { getLogoAsset } from '../lib/sitePublicAssets';
+import { getToday, isVisibleToday } from '../lib/visibility';
+import { withBasePath } from '../lib/basePath';
+
+const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
+const siteModel = await getSiteModel(await getCollection('site'));
+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.');
+const [sitewide] = await getCollection('sitewide');
+const sitewideData = sitewide?.data ?? {};
+const siteThemeData = siteTheme.data;
+const themeLabel = `${siteDirectory || 'site'}/${siteTheme.id}`;
+const visualTheme = resolveThemeVisualConfig(siteThemeData, themeLabel);
+const getPageContent = (page: SitePage) => page.markdownDocument.navigationHeadings.map((heading) => ({ ...heading }));
+const siteNavigation = siteNodes.map((node) => {
+	const headings = node.kind === 'page' ? getPageContent(node) : [];
+	return {
+		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,
+	nodes: renderedNavigationEntries.map(({ node, headings }) => ({
+		depth: Math.max(1, node.depth),
+		headings,
+		isHome: node.isHome,
+		kind: node.kind,
+		listed: node.navigation.listed,
+		pagePath: node.pagePath,
+	})),
+});
+const pagePresentation = resolvePagePresentation(siteThemeData, themeLabel, {
+	navigationMode: navigationModel.mode,
+});
+const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
+const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: themeLabel });
+const logoAsset = getLogoAsset();
+const logo = logoAsset
+	? {
+		src: logoAsset.href,
+		alt: homePage.title,
+		height: sitewideData.logo?.height,
+	}
+	: undefined;
+const today = getToday();
+const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
+const labels = projectConfig.locale.labels;
+const searchSection: ResolvedSection = {
+	id: null,
+	title: labels.search,
+	titleHtml: labels.search,
+	headingLevel: 1,
+	contentBlocks: [{
+		type: 'html',
+		html: `<p>${labels.searchDescription}</p><div class="norna-search" id="norna-search"><p data-search-status>${labels.searchLoading}</p><noscript><p>${labels.searchNoScript}</p></noscript></div>`,
+	}],
+};
+const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
+	|| (
+		navigationModel.requestedMode === 'automatic'
+		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
+	);
+const bundlePath = withBasePath(projectConfig.site.basePath, '/pagefind/');
+const searchScript = `(() => {
+	const root = document.querySelector('#norna-search');
+	const status = root?.querySelector('[data-search-status]');
+	if (!root) return;
+	const script = document.createElement('script');
+	script.src = ${JSON.stringify(`${bundlePath}pagefind-ui.js`)};
+	script.onload = () => {
+		status?.remove();
+		new window.PagefindUI({
+			element: '#norna-search',
+			bundlePath: ${JSON.stringify(bundlePath)},
+			baseUrl: ${JSON.stringify(projectConfig.site.basePath)},
+			showImages: false,
+			showSubResults: true
+		});
+		const labelInput = () => {
+			const input = root.querySelector('.pagefind-ui__search-input');
+			if (!input) return false;
+			input.setAttribute('aria-label', ${JSON.stringify(labels.search)});
+			return true;
+		};
+		if (!labelInput()) {
+			const observer = new MutationObserver(() => {
+				if (labelInput()) observer.disconnect();
+			});
+			observer.observe(root, { childList: true, subtree: true });
+		}
+	};
+	script.onerror = () => {
+		if (status) status.textContent = ${JSON.stringify(labels.searchUnavailable)};
+	};
+	document.head.append(script);
+})();`;
+---
+
+<BaseLayout
+	title={labels.search}
+	description={labels.searchDescription}
+	presentation={pagePresentation}
+	visualTheme={visualTheme}
+	frameColors={frameColors}
+	pathname="/search/"
+	footer={sitewideData.footer}
+	indexable={false}
+>
+	<link slot="head" rel="stylesheet" href={`${bundlePath}pagefind-ui.css`} />
+	<SiteNavigation
+		logo={logo}
+		navigationEntries={siteNavigation}
+		navigationMode={navigationModel.mode}
+		showTopNavigationSubmenus={navigationModel.requestedMode !== 'automatic' && navigationModel.mode !== 'tree'}
+		hasNavigationRailFrame={hasNavigationRailFrame}
+		frameColors={frameColors}
+		readerPreferences={pagePresentation.readerPreferences}
+		searchPage
+	/>
+	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
+	<main class="site-content search-page-content" id="main-content" style={`--page-text-width: ${pageTextWidth}`}>
+		<SiteSection
+			section={searchSection}
+			pagePresentation={pagePresentation}
+			visualTheme={visualTheme}
+			sectionIndex={0}
+		/>
+	</main>
+	<script is:inline set:html={searchScript} />
+</BaseLayout>