@janga/norna 0.7.25 → 0.7.27

package/src/components/SiteNavigation.astro

@@ -4,16 +4,17 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
 import {
-	getFirstPageInNavigationNode,
 	getListedSiteNavigationTree,
 	type SiteNavigationEntry,
 	type SiteNavigationNode,
 } from '../lib/siteNavigation';
-import type { SiteNode, SitePage } from '../lib/sitePages';
+import type { SiteNode } from '../lib/sitePages';
 import DisplaySettings from './DisplaySettings.astro';
 import NavigationPageTree from './NavigationPageTree.astro';
 import NavigationTreeControls from './NavigationTreeControls.astro';
+import TopPageMenu from './TopPageMenu.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
+import SearchNavigationScript from './SearchNavigationScript.astro';
 
 type FrameColors = {
 	backgroundColor: string;
@@ -26,7 +27,7 @@ interface Props {
 		alt: string;
 		height?: string;
 	};
-	currentPage?: SitePage;
+	currentPage?: SiteNode;
 	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
 	showTopNavigationSubmenus: boolean;
@@ -67,6 +68,12 @@ const navigationStyle = [
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
 const siteNavigationTree = getListedSiteNavigationTree(navigationEntries);
+const mobileNavigationTree = navigationMode === 'top'
+	? getListedSiteNavigationTree(navigationEntries.map((entry) => ({
+		...entry,
+		headings: entry.headings.filter((heading) => heading.depth === 2),
+	})))
+	: siteNavigationTree;
 const topLevelNavigation = siteNavigationTree;
 const showSiteNavigation = topLevelNavigation.some(({ node }) => !node.isHome);
 const homeNode = navigationEntries.find(({ node }) => node.isHome)?.node;
@@ -75,13 +82,13 @@ 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 isCurrentPage = (page: SiteNode) => 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 pageHref = (page: SiteNode) => withBasePath(projectConfig.site.basePath, page.pathname);
+const getNavigationPage = (node: SiteNavigationNode) => node.node;
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
 const showSinglePageTopLink = !showSiteNavigation;
 const currentPageSectionCount = currentPageNavigation?.sections.length ?? 0;
@@ -97,6 +104,7 @@ const hasTreePageContents = Boolean(
 );
 const showPageNavigation = Boolean(
 	navigationMode !== 'tree'
+	&& (navigationMode !== 'top' || showSinglePageTopLink)
 	&& currentPageNavigation
 	&& (showSinglePageTopLink || hasCurrentPageSectionMenu),
 );
@@ -107,7 +115,7 @@ 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';
+const needsNavigationScript = showMobileNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
@@ -138,22 +146,20 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					{topLevelNavigation.map((navigationNode) => {
 						const destination = getNavigationPage(navigationNode);
 						if (!destination) return null;
-						const nodeIsCurrentPage = navigationNode.node.kind === 'page' && isCurrentPage(navigationNode.node);
+						const nodeIsCurrentPage = isCurrentPage(navigationNode.node);
 						return (
 							<li class:list={['site-nav-item', {
-								'site-nav-item-has-submenu': showTopNavigationSubmenus && navigationNode.children.length > 0,
 								'site-nav-item-current-branch': !nodeIsCurrentPage && isCurrentBranch(navigationNode.node),
 							}]}>
 								<a href={pageHref(destination)} aria-current={nodeIsCurrentPage ? 'page' : undefined}>
 									{navigationNode.node.title}
 								</a>
-								{showTopNavigationSubmenus && navigationNode.children.length > 0 && (
-									<div class="site-nav-submenu">
-										<nav aria-label={`${navigationNode.node.title} ${projectConfig.locale.labels.siteNavigation}`}>
-											<NavigationPageTree nodes={[navigationNode]} currentPage={currentPage} variant="submenu" />
-										</nav>
-									</div>
-								)}
+								<TopPageMenu
+									node={navigationNode}
+									currentPage={currentPage}
+									showSections={navigationMode === 'top'}
+									showChildren={showTopNavigationSubmenus}
+								/>
 							</li>
 						);
 					})}
@@ -165,6 +171,8 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					<a
 						class="site-search-link"
 						href={searchHref}
+						data-search-base={projectConfig.site.basePath}
+						data-search-source-title={currentPage?.title}
 						aria-current={searchPage ? 'page' : undefined}
 						aria-label={projectConfig.locale.labels.search}
 						title={projectConfig.locale.labels.search}
@@ -211,18 +219,18 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 											<h2 tabindex="-1">{projectConfig.locale.labels.siteNavigation}</h2>
 											<NavigationTreeControls
 												idPrefix="mobile-tree-navigation"
-												nodes={siteNavigationTree}
+												nodes={mobileNavigationTree}
 											/>
 											<NavigationPageTree
-												nodes={siteNavigationTree}
+												nodes={mobileNavigationTree}
 												currentPage={currentPage}
 												variant="mobile"
-												integratePageSections={navigationMode === 'tree'}
+												integratePageSections={navigationMode === 'tree' || navigationMode === 'top'}
 											/>
 										</nav>
 									)}
 
-									{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && currentPage && (
+									{(navigationMode === 'sections' || !showSiteNavigation) && hasCurrentPageSectionMenu && currentPageNavigation && currentPage && (
 										<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.pageNavigation}>
 											{!showSinglePageTopLink && (
 												<h2 tabindex="-1">{projectConfig.locale.labels.pageNavigation}</h2>
@@ -285,3 +293,4 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 </header>
 
 {needsNavigationScript && <SectionNavigationScript />}
+{showSearch && <SearchNavigationScript />}

package/src/components/SitePage.astro

@@ -2,6 +2,8 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import CodeBlockCopyScript from './CodeBlockCopyScript.astro';
+import ContentTabsScript from './ContentTabsScript.astro';
+import NoteNavigationScript from './NoteNavigationScript.astro';
 import EditSourceLink from './EditSourceLink.astro';
 import ImageStackEnhancement from './ImageStackEnhancement.astro';
 import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
@@ -13,7 +15,7 @@ import SiteSection from './SiteSection.astro';
 import SiteTreeNavigation from './SiteTreeNavigation.astro';
 import TableOverflowScript from './TableOverflowScript.astro';
 import TreeNavigationScript from './TreeNavigationScript.astro';
-import { getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
+import { flattenContentBlocks, getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
 import { getPageTheme } from '../lib/pageThemes';
 import { getSiteModel, type SitePage } from '../lib/sitePages';
 import {
@@ -36,15 +38,18 @@ import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
 type SiteEntry = CollectionEntry<'site'>;
 
 interface Props {
-	entry: SiteEntry;
+	entry?: SiteEntry;
+	categoryPath?: string;
 }
 
-const { entry } = Astro.props;
+const { entry, categoryPath } = Astro.props;
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
 const siteModel = await getSiteModel(await getCollection('site'));
 const { nodes: siteNodes, pages: sitePages } = siteModel;
-const currentPage = sitePages.find((page) => page.entry.id === entry.id);
-if (!currentPage) throw new Error(`Page entry "${entry.id}" is missing from the site page model.`);
+const categoryDestination = categoryPath ? siteModel.categoryDestinations.byPathname.get(categoryPath) : null;
+const currentPage = categoryDestination?.category
+	?? sitePages.find((page) => page.entry.id === entry?.id);
+if (!currentPage) throw new Error(`Page entry "${entry?.id ?? categoryPath}" 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.');
@@ -93,17 +98,35 @@ const listedNavigationTree = getListedSiteNavigationTree(siteNavigation);
 const renderedNavigationEntries = flattenSiteNavigationTree(listedNavigationTree);
 const pageSequence = getSequentialPageNavigation(listedNavigationTree, currentPage.pagePath);
 const childPages = getDirectChildPages(listedNavigationTree, currentPage.pagePath);
-const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = await getSectionsContent(siteHtml, currentPage, childPages);
-const hasCodeBlocks = resolvedSections.some((section) => section.contentBlocks.some((block) => (
+const siteHtml = entry?.rendered?.html ?? '';
+const resolvedSections: ResolvedSection[] = categoryDestination ? [{
+	id: null,
+	title: currentPage.title,
+	titleHtml: currentPage.title.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;'),
+	headingLevel: 1,
+	contentBlocks: [{
+		type: 'page-list',
+		pages: categoryDestination.children.map((node) => ({
+			title: node.title,
+			pathname: node.pathname,
+			description: node.kind === 'page' ? node.entry.data.page?.description : undefined,
+		})),
+	}],
+}] : await getSectionsContent(siteHtml, currentPage, childPages);
+const allContentBlocks = resolvedSections.flatMap((section) => flattenContentBlocks(section.contentBlocks));
+const hasTabs = allContentBlocks.some((block) => block.type === 'tabs');
+const hasNotes = allContentBlocks.some((block) => (
+	block.type === 'html' && /class="[^"]*\bsection-note-ref\b|\bdata-footnote-ref(?:="")?/.test(block.html)
+));
+const hasCodeBlocks = allContentBlocks.some((block) => (
 	block.type === 'html' && /<pre\b[^>]*>[\s\S]*?<code\b/i.test(block.html)
-)));
-const hasTables = resolvedSections.some((section) => section.contentBlocks.some((block) => (
+));
+const hasTables = allContentBlocks.some((block) => (
 	block.type === 'html' && /\bdata-table-frame(?:="")?/i.test(block.html)
-)));
-const hasImageStack = resolvedSections.some((section) => section.contentBlocks.some((block) => (
+));
+const hasImageStack = allContentBlocks.some((block) => (
 	block.type === 'image-stack'
-)));
+));
 const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
@@ -116,7 +139,7 @@ const renderedSections = resolvedSections.map((section, index) => ({
 	prioritizeFirstImage: index === firstImageSectionIndex,
 }));
 const hasPageSequence = Boolean(pageSequence.previous || pageSequence.next);
-const editSourceTarget = projectConfig.editLink
+const editSourceTarget = projectConfig.editLink && currentPage.kind === 'page'
 	? resolveEditSourceTarget({
 		...projectConfig.editLink,
 		development: import.meta.env.DEV,
@@ -184,7 +207,7 @@ const reserveBreadcrumbSpace = showTreeNavigation || showBreadcrumbs;
 
 <BaseLayout
 	title={currentPage.title}
-	description={entry.data.page?.description}
+	description={entry?.data.page?.description}
 	presentation={pagePresentation}
 	visualTheme={visualTheme}
 	frameColors={frameColors}
@@ -259,6 +282,8 @@ const reserveBreadcrumbSpace = showTreeNavigation || showBreadcrumbs;
 	</div>
 	{hasTreeNavigation && <TreeNavigationScript />}
 	{hasCodeBlocks && <CodeBlockCopyScript />}
+	{hasTabs && <ContentTabsScript />}
+	{hasNotes && <NoteNavigationScript />}
 	{hasTables && <TableOverflowScript />}
 	{hasImageStack && <ImageStackEnhancement />}
 </BaseLayout>

package/src/components/SiteSection.astro

@@ -6,11 +6,8 @@ import {
 	getHeadingTypographySizeValue,
 	getTypographySizeValue,
 } from '../../scripts/lib/typography.mjs';
-import CardList from './CardList.astro';
-import ImageCarousel from './ImageCarousel.astro';
-import ImageStack from './ImageStack.astro';
-import PageList from './PageList.astro';
-import type { ResolvedSection } from '../lib/sectionContent';
+import ContentBlocks from './ContentBlocks.astro';
+import { flattenContentBlocks, type ResolvedSection } from '../lib/sectionContent';
 
 type ResponsiveValue<T> = { desktop: T; mobile: T };
 type ResponsiveOverride<T> = { desktop?: T; mobile?: T };
@@ -110,42 +107,11 @@ const bodyWidth = {
 	desktop: bodyWidthValue,
 	mobile: bodyWidthValue,
 };
-const isStructuredBlock = (block: ResolvedSection['contentBlocks'][number]) => (
-	block.type === 'image-stack'
-	|| block.type === 'image-carousel'
-	|| block.type === 'card-list'
-	|| block.type === 'page-list'
-);
-const hasMedia = section.contentBlocks.some((block) => (
+const hasMedia = flattenContentBlocks(section.contentBlocks).some((block) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
 	|| (block.type === 'card-list' && block.cards.some((card) => card.image))
 ));
-const contentGroups: Array<
-	| { type: 'reading'; blocks: ResolvedSection['contentBlocks'] }
-	| { type: 'structured'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' | 'page-list' }> }
-> = [];
-let readingBlocks: ResolvedSection['contentBlocks'] = [];
-const flushReadingBlocks = () => {
-	if (readingBlocks.length === 0) return;
-	contentGroups.push({ type: 'reading', blocks: readingBlocks });
-	readingBlocks = [];
-};
-
-for (const block of section.contentBlocks) {
-	if (isStructuredBlock(block)) {
-		flushReadingBlocks();
-		contentGroups.push({ type: 'structured', block });
-	} else {
-		readingBlocks = [...readingBlocks, block];
-	}
-}
-
-flushReadingBlocks();
-const firstMediaGroupIndex = contentGroups.findIndex((group) => (
-	group.type === 'structured'
-	&& (group.block.type === 'image-stack' || group.block.type === 'image-carousel')
-));
 const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 	const headingConfig = markdownHeadings[level];
 	const fontSize = getHeadingTypographySizeValue(level, headingConfig.size);
@@ -209,55 +175,13 @@ const sectionStyle = [
 	style={sectionStyle}
 >
 	<div class="section-card">
+		<slot name="before-heading" />
 		<header class="section-header">
 			<HeadingTag id={headingId} set:html={section.titleHtml} />
 		</header>
 
 		<div class:list={['section-body', { 'section-body-has-media': hasMedia, 'section-body-text-only': !hasMedia }]}>
-			{contentGroups.map((group, groupIndex) => {
-				if (group.type === 'reading') {
-					return group.blocks.map((block) => block.type === 'html'
-						&& block.html
-						&& <div class="section-markdown" set:html={block.html} />);
-				}
-
-				const block = group.block;
-				if (block.type === 'image-carousel') {
-					return (
-						<ImageCarousel
-							title={section.title}
-							images={block.images}
-							maxAvailableWidthPercent={visualTheme.images.maxAvailableWidthPercent}
-							maxAvailableHeightPercent={visualTheme.images.maxAvailableHeightPercent}
-							priorityFirstImage={prioritizeFirstImage && groupIndex === firstMediaGroupIndex}
-						/>
-					);
-				}
-
-				if (block.type === 'card-list') {
-					return (
-						<CardList
-							cards={block.cards}
-							layout={block.layout}
-							flow={block.flow}
-							size={block.size}
-							width={block.width ?? pagePresentation.blocks.cardList.width}
-						/>
-					);
-				}
-				if (block.type === 'page-list') {
-					return <PageList pages={block.pages} />;
-				}
-
-				return (
-					<ImageStack
-						title={section.title}
-						images={block.images}
-						maxAvailableWidthPercent={visualTheme.images.maxAvailableWidthPercent}
-						priorityFirstImage={prioritizeFirstImage && groupIndex === firstMediaGroupIndex}
-					/>
-				);
-			})}
+			<ContentBlocks blocks={section.contentBlocks} title={section.title} images={visualTheme.images} cardWidth={pagePresentation.blocks.cardList.width} prioritizeFirstImage={prioritizeFirstImage} />
 		</div>
 	</div>
 </section>

package/src/components/SiteTreeNavigation.astro

@@ -2,12 +2,12 @@
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import { getListedSiteNavigationTree, type SiteNavigationEntry } from '../lib/siteNavigation';
-import type { SitePage } from '../lib/sitePages';
+import type { SiteNode } from '../lib/sitePages';
 import NavigationPageTree from './NavigationPageTree.astro';
 import NavigationTreeControls from './NavigationTreeControls.astro';
 
 interface Props {
-	currentPage: SitePage;
+	currentPage: SiteNode;
 	navigationEntries: SiteNavigationEntry[];
 	integratePageSections?: boolean;
 }