@janga/norna 0.7.23 → 0.7.25

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>

package/src/components/SectionNavigationScript.astro

@@ -7,6 +7,8 @@
 	const submenuItems = Array.from(document.querySelectorAll<HTMLElement>('.site-nav-item-has-submenu'));
 	const mobileDestinationLinks = Array.from(mobileMenu?.querySelectorAll<HTMLAnchorElement>('.mobile-nav-destination') ?? []);
 	const mobileMenuSummary = mobileMenu?.querySelector<HTMLElement>(':scope > summary');
+	const mobileMenuPanel = mobileMenu?.querySelector<HTMLElement>('[data-compact-navigation-panel]');
+	const mobileMenuClose = mobileMenu?.querySelector<HTMLButtonElement>('[data-compact-navigation-close]');
 	const sectionTrackingEnabled = document.documentElement.dataset.sectionTracking === 'enabled';
 	const trackedHeadingIds = new Set(sectionLinks.flatMap((link) => {
 		const linkUrl = new URL(link.href, window.location.href);
@@ -158,17 +160,54 @@
 	});
 
 	if (mobileMenu) {
+		const siteHeader = mobileMenu.closest<HTMLElement>('.site-top');
+		const navigationRow = mobileMenu.closest<HTMLElement>('.site-nav-row');
+		const navigationActions = mobileMenu.closest<HTMLElement>('.site-nav-actions');
+		const backgroundTargets = new Set<HTMLElement>([
+			...Array.from(document.body.children)
+				.filter((element): element is HTMLElement => element instanceof HTMLElement && element !== siteHeader),
+			...Array.from(siteHeader?.children ?? [])
+				.filter((element): element is HTMLElement => element instanceof HTMLElement && element !== navigationRow),
+			...Array.from(navigationRow?.children ?? [])
+				.filter((element): element is HTMLElement => element instanceof HTMLElement && element !== navigationActions),
+			...Array.from(navigationActions?.children ?? [])
+				.filter((element): element is HTMLElement => element instanceof HTMLElement && element !== mobileMenu),
+		]);
+		const previousInertState = new Map<HTMLElement, boolean>();
+		const setBackgroundInert = (inert: boolean) => {
+			if (inert) {
+				backgroundTargets.forEach((element) => {
+					if (!previousInertState.has(element)) {
+						previousInertState.set(element, element.hasAttribute('inert'));
+					}
+					element.setAttribute('inert', '');
+				});
+				return;
+			}
+
+			previousInertState.forEach((wasInert, element) => {
+				if (!wasInert) element.removeAttribute('inert');
+			});
+			previousInertState.clear();
+		};
+		const closeMenu = (restoreFocus: boolean) => {
+			mobileMenu.open = false;
+			if (restoreFocus) mobileMenuSummary?.focus();
+		};
+
 		mobileDestinationLinks.forEach((link) => {
 			link.addEventListener('click', () => {
-				mobileMenu.open = false;
+				closeMenu(false);
 			});
 		});
+		mobileMenuClose?.addEventListener('click', () => closeMenu(true));
 
 		mobileMenu.addEventListener('toggle', () => {
 			document.documentElement.classList.toggle('mobile-navigation-open', mobileMenu.open);
+			setBackgroundInert(mobileMenu.open);
 			if (mobileMenu.open) {
 				window.requestAnimationFrame(() => (
-					mobileMenu.querySelector<HTMLElement>('.mobile-nav-view h2, .mobile-nav-view a')?.focus()
+					mobileMenuClose?.focus()
 				));
 			}
 		});
@@ -178,16 +217,15 @@
 
 			if (event.key === 'Escape') {
 				event.preventDefault();
-				mobileMenu.open = false;
-				mobileMenuSummary?.focus();
+				closeMenu(true);
 				return;
 			}
 
 			if (event.key !== 'Tab') return;
 
-			const focusableElements = Array.from(mobileMenu.querySelectorAll<HTMLElement>(
-				'summary, a[href]:not([hidden]), [tabindex]:not([tabindex="-1"]):not([hidden])',
-			)).filter((element) => element.getClientRects().length > 0);
+			const focusableElements = Array.from(mobileMenuPanel?.querySelectorAll<HTMLElement>(
+				'a[href]:not([hidden]), button:not([disabled]):not([hidden]), input:not([disabled]):not([hidden]), summary, [tabindex]:not([tabindex="-1"]):not([hidden])',
+			) ?? []).filter((element) => element.getClientRects().length > 0);
 			const firstFocusable = focusableElements[0];
 			const lastFocusable = focusableElements.at(-1);
 			if (!firstFocusable || !lastFocusable) return;

package/src/components/SiteNavigation.astro

@@ -1,4 +1,5 @@
 ---
+import { Menu, Search, X } from '@lucide/astro';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
@@ -11,6 +12,7 @@ import {
 import type { SiteNode, SitePage } from '../lib/sitePages';
 import DisplaySettings from './DisplaySettings.astro';
 import NavigationPageTree from './NavigationPageTree.astro';
+import NavigationTreeControls from './NavigationTreeControls.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
 
 type FrameColors = {
@@ -24,7 +26,7 @@ interface Props {
 		alt: string;
 		height?: string;
 	};
-	currentPage: SitePage;
+	currentPage?: SitePage;
 	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
 	showTopNavigationSubmenus: boolean;
@@ -42,6 +44,7 @@ interface Props {
 			focusReading: 'off' | 'on';
 		};
 	};
+	searchPage?: boolean;
 }
 
 const {
@@ -53,6 +56,7 @@ const {
 	hasNavigationRailFrame,
 	frameColors,
 	readerPreferences,
+	searchPage = false,
 } = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
@@ -67,10 +71,15 @@ const topLevelNavigation = siteNavigationTree;
 const showSiteNavigation = topLevelNavigation.some(({ node }) => !node.isHome);
 const homeNode = navigationEntries.find(({ node }) => node.isHome)?.node;
 const homePage = homeNode?.kind === 'page' ? homeNode : currentPage;
-const currentPageNavigation = navigationEntries.find(({ node }) => node.kind === 'page' && node.pathname === currentPage.pathname);
-const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
-const isCurrentBranch = (node: SiteNode) => currentPage.pageDirectory === node.pageDirectory
-	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`);
+if (!homePage) throw new Error('Site navigation requires a homepage.');
+const currentPageNavigation = currentPage
+	? navigationEntries.find(({ node }) => node.kind === 'page' && node.pathname === currentPage.pathname)
+	: undefined;
+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 pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
 const getNavigationPage = (node: SiteNavigationNode) => getFirstPageInNavigationNode(node);
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
@@ -94,7 +103,9 @@ const showPageNavigation = Boolean(
 const showSinglePageTitleOnly = showSinglePageTopLink && currentPageSectionCount === 0;
 const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
 const showReaderControls = Object.values(readerPreferences.controls).some(Boolean);
-const showDesktopNavigationRow = showSiteNavigation || Boolean(logo) || showReaderControls;
+const showSearch = projectConfig.search.enabled;
+const searchHref = withBasePath(projectConfig.site.basePath, '/search/');
+const showDesktopNavigationRow = showSiteNavigation || Boolean(logo) || showReaderControls || showSearch;
 const showNavigationRow = showMobileNavigation || showDesktopNavigationRow;
 const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents || navigationMode === 'tree';
 ---
@@ -150,61 +161,101 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					</nav>
 				)}
 
+				{showSearch && (
+					<a
+						class="site-search-link"
+						href={searchHref}
+						aria-current={searchPage ? 'page' : undefined}
+						aria-label={projectConfig.locale.labels.search}
+						title={projectConfig.locale.labels.search}
+					>
+						<Search aria-hidden="true" />
+					</a>
+				)}
+
 				{showReaderControls && (
 					<DisplaySettings controls={readerPreferences.controls} defaults={readerPreferences.defaults} />
 				)}
 
-				{showMobileNavigation && <details class="mobile-nav-menu">
-			<summary>
-				<span>{projectConfig.locale.labels.navigationMenu}</span>
-			</summary>
-			<div class="mobile-nav-panel">
-			<div class="mobile-site-nav" 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>
-					)}
+					{showMobileNavigation && (
+						<details class="mobile-nav-menu" data-compact-navigation>
+							<summary>
+								<span>{projectConfig.locale.labels.navigationMenu}</span>
+								<Menu class="mobile-nav-trigger-icon mobile-nav-trigger-open" aria-hidden="true" />
+								<X class="mobile-nav-trigger-icon mobile-nav-trigger-close" aria-hidden="true" />
+							</summary>
+							<div
+								class="mobile-nav-panel"
+								data-compact-navigation-panel
+								role="dialog"
+								aria-modal="true"
+								aria-label={projectConfig.locale.labels.navigationMenu}
+							>
+								<div class="mobile-nav-panel-actions">
+									<button
+										type="button"
+										class="mobile-nav-close"
+										data-compact-navigation-close
+										aria-label={projectConfig.locale.labels.closeNavigation}
+									>
+										<X aria-hidden="true" />
+									</button>
+								</div>
+								<div
+									class="mobile-site-nav"
+									data-navigation-root={pageHref(homePage)}
+									data-navigation-state-root={pageHref(homePage)}
+								>
+									{showSiteNavigation && (
+										<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.siteNavigation}>
+											<h2 tabindex="-1">{projectConfig.locale.labels.siteNavigation}</h2>
+											<NavigationTreeControls
+												idPrefix="mobile-tree-navigation"
+												nodes={siteNavigationTree}
+											/>
+											<NavigationPageTree
+												nodes={siteNavigationTree}
+												currentPage={currentPage}
+												variant="mobile"
+												integratePageSections={navigationMode === 'tree'}
+											/>
+										</nav>
+									)}
 
-					{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>
+									{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && currentPage && (
+										<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>
+							</div>
+						</details>
 					)}
-				</div>
-			</div>
-				</details>}
 			</div>
 		</div>
 	)}
 
-	{showPageNavigation && currentPageNavigation && (
+	{showPageNavigation && currentPageNavigation && currentPage && (
 		<nav
 			class:list={['page-nav', { 'page-nav-title-only': showSinglePageTitleOnly }]}
 			aria-label={projectConfig.locale.labels.pageNavigation}