@janga/norna 0.7.25 → 0.7.26

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;
 }