@janga/norna 0.7.9 → 0.7.10

package/src/components/SiteNavigation.astro

@@ -1,7 +1,7 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import type { ResolvedSection } from '../lib/sectionContent';
+import type { SectionNavigation } from '../lib/sectionContent';
 import type { SitePage } from '../lib/sitePages';
 
 type FrameColors = {
@@ -11,13 +11,20 @@ type FrameColors = {
 
 interface Props {
 	brandLabel: string;
+	logo?: {
+		src: string;
+		alt: string;
+		height?: string;
+	};
 	currentPage: SitePage;
-	pages: SitePage[];
-	sections: ResolvedSection[];
+	pageNavigation: Array<{
+		page: SitePage;
+		sections: SectionNavigation[];
+	}>;
 	frameColors: FrameColors;
 }
 
-const { brandLabel, currentPage, pages, sections, frameColors } = Astro.props;
+const { brandLabel, logo, currentPage, pageNavigation, frameColors } = Astro.props;
 const smoothScrollConfig = projectConfig.navigation.smoothScroll;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
@@ -25,12 +32,15 @@ const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 const navigationStyle = [
 	`--site-top-background-color: ${siteTopBackgroundColor}`,
 	`--site-top-text-color: ${frameColors.textColor}`,
+	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
-const showSiteNavigation = pages.length > 1;
-const showPageNavigation = sections.length > 1;
-const homePage = pages.find((page) => page.isHome) ?? currentPage;
+const showSiteNavigation = pageNavigation.length > 1;
+const homePage = pageNavigation.find(({ page }) => page.isHome)?.page ?? currentPage;
+const currentPageNavigation = pageNavigation.find(({ page }) => page.pathname === currentPage.pathname);
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+const sectionHref = (page: SitePage, section: SectionNavigation) => `${pageHref(page)}#${section.id}`;
+const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
@@ -42,15 +52,30 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 >
 	{showSiteNavigation && (
 		<div class="site-nav-row">
-			<a class="site-brand" href={pageHref(homePage)}>{brandLabel}</a>
+			<a class="site-brand" href={pageHref(homePage)}>
+				{logo ? <img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} /> : brandLabel}
+			</a>
 
 			<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 				<ul>
-					{pages.map((page) => (
-						<li>
+					{pageNavigation.map(({ page, sections: pageSections }) => (
+						<li class:list={['site-nav-item', { 'site-nav-item-has-sections': hasSectionMenu(pageSections) }]}>
 							<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
 								{page.navigation.label}
 							</a>
+							{hasSectionMenu(pageSections) && (
+								<div class="site-nav-submenu">
+									<nav aria-label={`${page.navigation.label} ${projectConfig.locale.labels.pageNavigation}`}>
+										<ul>
+											{pageSections.map((section) => (
+												<li>
+													<a href={sectionHref(page, section)}>{section.title}</a>
+												</li>
+											))}
+										</ul>
+									</nav>
+								</div>
+							)}
 						</li>
 					))}
 				</ul>
@@ -64,7 +89,7 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 					<nav class="mobile-site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 						<h2>{projectConfig.locale.labels.siteNavigation}</h2>
 						<ul>
-							{pages.map((page) => (
+							{pageNavigation.map(({ page }) => (
 								<li>
 									<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
 										{page.navigation.label}
@@ -74,13 +99,13 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 						</ul>
 					</nav>
 
-					{showPageNavigation && (
+					{currentPageNavigation && hasSectionMenu(currentPageNavigation.sections) && (
 						<nav class="mobile-page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
 							<h2>{projectConfig.locale.labels.pageNavigation}</h2>
 							<ul>
-								{sections.map((section, index) => (
+								{currentPageNavigation.sections.map((section, index) => (
 									<li>
-										<a href={`#${section.id}`} aria-current={index === 0 ? 'true' : undefined}>
+										<a href={sectionHref(currentPage, section)} aria-current={index === 0 ? 'true' : undefined}>
 											{section.title}
 										</a>
 									</li>
@@ -93,25 +118,12 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 		</div>
 	)}
 
-	{showPageNavigation && (
-		<nav class="page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
-			<ul>
-				{sections.map((section, index) => (
-					<li>
-						<a href={`#${section.id}`} aria-current={index === 0 ? 'true' : undefined}>
-							{section.title}
-						</a>
-					</li>
-				))}
-			</ul>
-		</nav>
-	)}
 </header>
 
 <script>
 	const siteTop = document.querySelector('.site-top');
 	const sections = Array.from(document.querySelectorAll('.site-section'));
-	const links = Array.from(document.querySelectorAll('.page-nav a, .mobile-page-nav a'));
+	const links = Array.from(document.querySelectorAll('.site-nav-submenu a, .mobile-page-nav a'));
 	const mobileMenu = document.querySelector('.mobile-nav-menu');
 	const smoothScrollConfig = JSON.parse(siteTop?.getAttribute('data-smooth-scroll') ?? '{}');
 	const anchorPadding = 0;
@@ -159,7 +171,9 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 		activeSectionId = section.id;
 
 		links.forEach((link) => {
-			const isActive = link.getAttribute('href') === `#${section.id}`;
+			const linkUrl = new URL(link.href, window.location.href);
+			const isCurrentPageLink = linkUrl.pathname === window.location.pathname;
+			const isActive = isCurrentPageLink && linkUrl.hash === `#${section.id}`;
 			if (isActive) {
 				link.setAttribute('aria-current', 'true');
 			} else {
@@ -372,7 +386,10 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 
 	links.forEach((link) => {
 		link.addEventListener('click', (event) => {
-			const section = getSectionFromHash(link.hash);
+			const linkUrl = new URL(link.href, window.location.href);
+			if (linkUrl.pathname !== window.location.pathname) return;
+
+			const section = getSectionFromHash(linkUrl.hash);
 			if (!(section instanceof HTMLElement)) return;
 
 			const top = getSectionScrollTop(section);
@@ -380,7 +397,7 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 
 			event.preventDefault();
 
-			const targetHash = `#${section.id}`;
+			const targetHash = linkUrl.hash;
 			const duration = getScrollDuration(top - window.scrollY);
 
 			setHash(targetHash);

package/src/components/SitePage.astro

@@ -3,12 +3,16 @@ import { getCollection, type CollectionEntry } from 'astro:content';
 import path from 'node:path';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import SiteNavigation from './SiteNavigation.astro';
+import SiteBanners from './SiteBanners.astro';
 import SiteSection from './SiteSection.astro';
-import { getSectionsContent } from '../lib/sectionContent';
+import { getSectionNavigation, getSectionsContent } from '../lib/sectionContent';
+import { getRouteTheme } from '../lib/routeThemes';
 import { getNavigationPages, getSitePage, getSitePages } from '../lib/sitePages';
 import { getToday, isVisibleToday } from '../lib/visibility';
+import { getLogoAsset } from '../lib/sitePublicAssets';
 import { readSiteFile } from '../../scripts/lib/site-content.mjs';
 import { siteContentPath, siteRoutesDir } from '../../scripts/lib/site-paths.mjs';
+import { resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
 import { resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
@@ -28,23 +32,55 @@ const pageContentPath = currentPage.routeDirectory
 	? path.join(siteRoutesDir, currentPage.routeDirectory, 'route-content.md')
 	: siteContentPath;
 const rawMarkdown = (await readSiteFile(pageContentPath, siteContentLabel)).body;
-const [theme] = await getCollection('theme');
+const [siteTheme] = await getCollection('theme');
+if (!siteTheme) {
+	throw new Error('site/theme.md is required. Add a root theme before building the site.');
+}
+const [sitewide] = await getCollection('sitewide');
+const sitewideData = sitewide?.data ?? {};
 const navigationPages = getNavigationPages(sitePages);
 const homePage = sitePages.find((page) => page.isHome) ?? currentPage;
-const themeData = theme?.data ?? {};
-const brandLabel = themeData.navigation?.brand ?? homePage.title;
-const pagePresentation = resolvePagePresentation(themeData, entry.data.presentation);
-const frameColors = resolveFrameColors({
-	theme: themeData,
-	pagePresentation,
-	pageFrame: entry.data.frame,
-});
+const siteThemeData = siteTheme.data;
+const routeTheme = await getRouteTheme(currentPage.routeDirectory);
+const themeData = routeTheme?.data ?? siteThemeData;
+const themeLabel = routeTheme
+	? `${siteDirectory || 'site'}/${routeTheme.id}`
+	: `${siteDirectory || 'site'}/theme.md`;
+const visualTheme = resolveThemeVisualConfig(themeData, themeLabel);
+const brandLabel = sitewideData.navigation?.brand ?? homePage.title;
+const logoAsset = getLogoAsset();
+const logoSettings = sitewideData.navigation?.logo;
+const logo = logoAsset
+	? {
+		src: logoAsset.href,
+		alt: logoSettings?.alt ?? brandLabel,
+		height: logoSettings?.height,
+	}
+	: undefined;
+const pagePresentation = resolvePagePresentation(themeData);
+const frameColors = resolveFrameColors({ theme: themeData });
 const sections = entry.data.sections;
 const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = getSectionsContent(siteHtml, rawMarkdown, sections, currentPage, pagePresentation.inlineStyles);
+const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, sections, currentPage);
 const today = getToday();
+const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
 const visibleSections = resolvedSections.filter((section) => isVisibleToday(section.visible, today));
 
+const getPageContent = async (page: SitePage) => {
+	if (page.pathname === currentPage.pathname) {
+		return visibleSections.map(({ id, title }) => ({ id, title }));
+	}
+
+	const pageSections = getSectionNavigation(page.entry.rendered?.html ?? '', page.entry.data.sections);
+
+	return pageSections.filter((section) => isVisibleToday(page.entry.data.sections[section.id]?.visible, today));
+};
+
+const pageNavigation = await Promise.all(navigationPages.map(async (page) => ({
+	page,
+	sections: await getPageContent(page),
+})));
+
 if (visibleSections.length === 0) {
 	throw new Error(`No sections are visible for ${today}. Check sections.<section-id>.visible in ${siteContentLabel}.`);
 }
@@ -53,22 +89,28 @@ if (visibleSections.length === 0) {
 <BaseLayout
 	title={entry.data.title}
 	description={entry.data.description}
+	presentation={pagePresentation}
+	visualTheme={visualTheme}
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
+	footer={sitewideData.footer}
 >
 	<SiteNavigation
 		brandLabel={brandLabel}
+		logo={logo}
 		currentPage={currentPage}
-		pages={navigationPages}
-		sections={visibleSections}
+		pageNavigation={pageNavigation}
 		frameColors={frameColors}
 	/>
+	<SiteBanners banners={siteBanners} />
 
 	<main id="main-content" class="site-content">
 		{visibleSections.map((section, index) => (
 			<SiteSection
 				section={section}
 				pagePresentation={pagePresentation}
+				visualTheme={visualTheme}
+				sectionIndex={index}
 				headingLevel={index === 0 ? 1 : 2}
 				priorityGalleryImage={index === 0}
 			/>

package/src/components/SiteSection.astro

@@ -1,6 +1,6 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-import { resolveTypographyOverride } from '../../scripts/lib/typography.mjs';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { resolveSectionSurface } from '../../scripts/lib/presentation.mjs';
 import CardList from './CardList.astro';
 import GalleryGrid from './GalleryGrid.astro';
 import type { ResolvedSection } from '../lib/sectionContent';
@@ -9,31 +9,44 @@ type ResponsiveValue<T> = { desktop: T; mobile: T };
 type ResponsiveOverride<T> = { desktop?: T; mobile?: T };
 type TextAlign = 'left' | 'center' | 'right';
 type TextSize = 'small' | 'medium' | 'large' | 'xlarge';
-type SectionPresentationOverride = {
-	backgroundColor?: string;
-	textColor?: string;
-	typography?: NonNullable<ResolvedSection['presentation']>['typography'];
-};
+type TextWidth = 'narrow' | 'normal' | 'wide';
 type ResolvedPagePresentation = {
-	backgroundColor: string;
-	textColor: string;
+	palette: {
+		surfaces: Record<'base' | 'soft' | 'emphasis', { backgroundColor: string; textColor: string }>;
+	};
+	sectionSurfaces: {
+		mode: 'none' | 'cycle';
+		sequence: Array<'base' | 'soft' | 'emphasis'>;
+	};
 	typography: {
 		preset: string;
 		values: any;
 	};
 };
+type VisualTheme = {
+	gallery: {
+		maxAvailableWidthPercent: {
+			desktop: number;
+			mobile: number;
+		};
+	};
+};
 
 interface Props {
 	section: ResolvedSection;
 	pagePresentation: ResolvedPagePresentation;
+	visualTheme: VisualTheme;
+	sectionIndex: number;
 	headingLevel: 1 | 2;
 	priorityGalleryImage?: boolean;
 }
 
-const { section, pagePresentation, headingLevel, priorityGalleryImage = false } = Astro.props;
+const { section, pagePresentation, visualTheme, sectionIndex, headingLevel, priorityGalleryImage = false } = Astro.props;
 const HeadingTag = headingLevel === 1 ? 'h1' : 'h2';
 // Sections are authored with Markdown ## headings even when the first one renders as HTML h1.
 const sectionHeadingVisualLevel = 'h2';
+const firstContentBlockIsVisual = section.contentBlocks[0]?.type !== 'html'
+	&& section.contentBlocks[0]?.type !== 'note';
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
 const headingSizeValues: Record<HeadingLevel, Record<TextSize, ResponsiveValue<string>>> = {
 	h1: {
@@ -145,7 +158,6 @@ const captionSizeValues: Record<TextSize, ResponsiveValue<string>> = {
 		mobile: 'clamp(1.04rem, 0.98rem + 0.18vw, 1.12rem)',
 	},
 };
-const sectionOverride = section.presentation as SectionPresentationOverride | undefined;
 const getSizeValue = (
 	sizeValues: Record<TextSize, ResponsiveValue<string>>,
 	size: TextSize,
@@ -153,15 +165,17 @@ const getSizeValue = (
 const getHeadingSizeValue = (level: HeadingLevel, size: TextSize) => (
 	headingSizeValues[level][size]
 );
-const backgroundColor = sectionOverride?.backgroundColor
-	?? pagePresentation.backgroundColor;
-const textColor = sectionOverride?.textColor
-	?? pagePresentation.textColor;
-const resolvedTypography = resolveTypographyOverride(pagePresentation.typography, sectionOverride?.typography);
-const typography = resolvedTypography.values;
+const textWidthValues: Record<TextWidth, string> = {
+	narrow: 'min(60ch, var(--text-width))',
+	normal: 'min(72ch, var(--text-width))',
+	wide: 'min(72ch, var(--gallery-layout-width))',
+};
+const surface = resolveSectionSurface(pagePresentation, sectionIndex);
+const typography = pagePresentation.typography.values;
 const heading = typography.headings[sectionHeadingVisualLevel] as {
 	align: ResponsiveValue<TextAlign>;
 	size: TextSize;
+	weight: number;
 	lineHeight: number;
 	spacingBefore: string;
 	spacingAfter: string;
@@ -172,6 +186,7 @@ const markdownHeadings = Object.fromEntries(markdownHeadingLevels.map((level) =>
 	typography.headings[level] as {
 		align: ResponsiveValue<TextAlign>;
 		size: TextSize;
+		weight: number;
 		lineHeight: number;
 		spacingBefore: string;
 		spacingAfter: string;
@@ -188,20 +203,54 @@ const justifyByAlign: Record<TextAlign, string> = {
 	center: 'center',
 	right: 'flex-end',
 };
-const getAlignedTextWidth = (
-	align: ResponsiveValue<TextAlign>,
-	centeredWidth: string,
-): ResponsiveValue<string> => ({
-	desktop: align.desktop === 'center' ? centeredWidth : 'var(--gallery-layout-width)',
-	mobile: align.mobile === 'center' ? centeredWidth : 'var(--gallery-layout-width)',
-});
-const headingWidth = getAlignedTextWidth(headingAlign, '760px');
-const bodyWidth = getAlignedTextWidth(bodyAlign, 'var(--text-width)');
+const bodyWidthValue = textWidthValues[typography.body.width as TextWidth];
+const headingWidth = {
+	desktop: bodyWidthValue,
+	mobile: bodyWidthValue,
+};
+const bodyWidth = {
+	desktop: bodyWidthValue,
+	mobile: bodyWidthValue,
+};
+const isMediaBlock = (block: ResolvedSection['contentBlocks'][number]) => (
+	block.type === 'image-stack'
+	|| block.type === 'image-carousel'
+	|| block.type === 'card-list'
+);
 const hasMedia = section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
 	|| (block.type === 'card-list' && block.cards.some((card) => card.image))
 ));
+const hasMarginNotes = section.contentBlocks.some((block) => (
+	block.type === 'note'
+));
+const getNoteGridRow = (blocks: ResolvedSection['contentBlocks'], blockIndex: number) => Math.max(
+	1,
+	blocks.slice(0, blockIndex).filter((block) => block.type === 'html').length,
+);
+const noteLabel = projectConfig.locale.labels.note;
+const contentGroups: Array<
+	| { type: 'reading'; blocks: ResolvedSection['contentBlocks'] }
+	| { type: 'media'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-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 (isMediaBlock(block)) {
+		flushReadingBlocks();
+		contentGroups.push({ type: 'media', block });
+	} else {
+		readingBlocks = [...readingBlocks, block];
+	}
+}
+
+flushReadingBlocks();
 const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 	const headingConfig = markdownHeadings[level];
 	const fontSize = getHeadingSizeValue(level, headingConfig.size);
@@ -211,18 +260,20 @@ const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 		`--section-markdown-${level}-align-mobile: ${headingConfig.align.mobile}`,
 		`--section-markdown-${level}-font-size-desktop: ${fontSize.desktop}`,
 		`--section-markdown-${level}-font-size-mobile: ${fontSize.mobile}`,
+		`--section-markdown-${level}-font-weight: ${headingConfig.weight}`,
 		`--section-markdown-${level}-line-height: ${headingConfig.lineHeight}`,
 		`--section-markdown-${level}-spacing-before: ${headingConfig.spacingBefore}`,
 		`--section-markdown-${level}-spacing-after: ${headingConfig.spacingAfter}`,
 	];
 };
 const sectionStyle = [
-	`--section-background-color: ${backgroundColor}`,
-	`--section-text-color: ${textColor}`,
+	`--section-background-color: ${surface.backgroundColor}`,
+	`--section-text-color: ${surface.textColor}`,
 	`--section-heading-align-desktop: ${headingAlign.desktop}`,
 	`--section-heading-align-mobile: ${headingAlign.mobile}`,
 	`--section-heading-font-size-desktop: ${headingFontSize.desktop}`,
 	`--section-heading-font-size-mobile: ${headingFontSize.mobile}`,
+	`--section-heading-font-weight: ${heading.weight}`,
 	`--section-heading-line-height: ${heading.lineHeight}`,
 	`--section-heading-spacing-after: ${heading.spacingAfter}`,
 	`--section-heading-width-desktop: ${headingWidth.desktop}`,
@@ -250,7 +301,13 @@ const sectionStyle = [
 
 <section
 	id={section.id}
-	class="site-section"
+	class:list={[
+		'site-section',
+		{
+			'site-section-first-block-is-visual': firstContentBlockIsVisual,
+			'site-section-has-margin-notes': hasMarginNotes,
+		},
+	]}
 	data-section-title={section.title}
 	style={sectionStyle}
 >
@@ -260,33 +317,134 @@ const sectionStyle = [
 		</header>
 
 		<div class:list={['section-body', { 'section-body-has-gallery': hasMedia, 'section-body-text-only': !hasMedia }]}>
-			{section.contentBlocks.map((block, blockIndex) => {
-				if (block.type === 'html') {
-					return block.html && <div class="section-markdown" set:html={block.html} />;
+			{contentGroups.map((group, groupIndex) => {
+				if (group.type === 'reading') {
+					if (hasMarginNotes && group.blocks.some((block) => block.type === 'note')) {
+						return (
+							<div class="section-reading-layout">
+								{group.blocks.map((block, blockIndex) => {
+									if (block.type === 'html') {
+										return block.html && <div class="section-markdown" set:html={block.html} />;
+									}
+
+									const noteGridRow = getNoteGridRow(group.blocks, blockIndex);
+									return (
+										<aside
+											class="section-note section-note-margin"
+											id={block.id}
+											aria-label={`${noteLabel}${block.number ? ` ${block.number}` : ''}`}
+											role="note"
+											data-note-id={block.id}
+											style={`grid-row: ${noteGridRow};`}
+										>
+											{block.number && block.referenceId && (
+												<a class="section-note-number" href={`#${block.referenceId}`} aria-label={`${noteLabel} ${block.number}`}>
+													{block.number}
+												</a>
+											)}
+											<div class="section-note-content" set:html={block.html} />
+										</aside>
+									);
+								})}
+							</div>
+						);
+					}
+
+					return group.blocks.map((block, blockIndex) => {
+						if (block.type === 'html') {
+							return block.html && <div class="section-markdown" set:html={block.html} />;
+						}
+
+						const noteGridRow = getNoteGridRow(group.blocks, blockIndex);
+						return (
+							<aside
+								class="section-note section-note-margin"
+								id={block.id}
+								aria-label={`${noteLabel}${block.number ? ` ${block.number}` : ''}`}
+								role="note"
+								data-note-id={block.id}
+								style={`grid-row: ${noteGridRow};`}
+							>
+								{block.number && block.referenceId && (
+									<a class="section-note-number" href={`#${block.referenceId}`} aria-label={`${noteLabel} ${block.number}`}>
+										{block.number}
+									</a>
+								)}
+								<div class="section-note-content" set:html={block.html} />
+							</aside>
+						);
+					});
 				}
 
+				const block = group.block;
 				if (block.type === 'image-carousel') {
 					return (
 						<GalleryGrid
 							title={section.title}
 							items={[{ carousel: block.images }]}
-							priorityFirstImage={priorityGalleryImage && blockIndex === 0}
+							maxAvailableWidthPercent={visualTheme.gallery.maxAvailableWidthPercent}
+							priorityFirstImage={priorityGalleryImage && groupIndex === 0}
 						/>
 					);
 				}
 
 				if (block.type === 'card-list') {
-					return <CardList cards={block.cards} layout={block.layout} flow={block.flow} size={block.size} width={block.width} />;
+					return <CardList cards={block.cards} maxAvailableWidthPercent={visualTheme.gallery.maxAvailableWidthPercent} layout={block.layout} flow={block.flow} size={block.size} width={block.width} />;
 				}
 
 				return (
 					<GalleryGrid
 						title={section.title}
 						items={block.images}
-						priorityFirstImage={priorityGalleryImage && blockIndex === 0}
+						maxAvailableWidthPercent={visualTheme.gallery.maxAvailableWidthPercent}
+						priorityFirstImage={priorityGalleryImage && groupIndex === 0}
 					/>
 				);
 			})}
 		</div>
 	</div>
 </section>
+
+<script>
+	const noteParts = Array.from(document.querySelectorAll<HTMLElement>('[data-note-id]'));
+	const noteReferences = noteParts.filter((part) => part.matches('.section-note-ref a'));
+	const marginNotes = noteParts.filter((part) => part.matches('.section-note'));
+
+	const setNoteState = (noteId: string, active: boolean) => {
+		noteParts
+			.filter((part) => part.dataset.noteId === noteId)
+			.forEach((part) => part.classList.toggle('is-referenced', active));
+	};
+
+	noteParts.forEach((part) => {
+		const noteId = part.dataset.noteId;
+		if (!noteId) return;
+
+		part.addEventListener('pointerenter', () => setNoteState(noteId, true));
+		part.addEventListener('pointerleave', () => setNoteState(noteId, false));
+		part.addEventListener('focusin', () => setNoteState(noteId, true));
+		part.addEventListener('focusout', () => setNoteState(noteId, false));
+	});
+
+	const alignMarginNotes = () => {
+		const wideLayout = window.matchMedia('(min-width: 1101px)').matches;
+		if (!wideLayout) {
+			marginNotes.forEach((note) => note.style.removeProperty('--section-note-offset'));
+			return;
+		}
+
+		marginNotes.forEach((note) => {
+			const noteId = note.dataset.noteId;
+			const reference = noteReferences.find((part) => part.dataset.noteId === noteId);
+			if (!noteId || !reference) return;
+
+			note.style.removeProperty('--section-note-offset');
+			const offset = reference.getBoundingClientRect().top - note.getBoundingClientRect().top;
+			note.style.setProperty('--section-note-offset', `${Math.max(0, offset)}px`);
+		});
+	};
+
+	alignMarginNotes();
+	window.addEventListener('resize', alignMarginNotes);
+	document.fonts?.ready.then(alignMarginNotes);
+</script>