@janga/norna 0.7.16 → 0.7.17

package/src/components/SectionNavigationScript.astro

@@ -1,7 +1,12 @@
 <script>
 	const siteTop = document.querySelector<HTMLElement>('.site-top');
 	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
-	const mobileSectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('.mobile-page-nav a'));
+	const sectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>(
+		'.mobile-nav-sections a, .page-nav a',
+	));
+	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 setAnchorOffset = () => {
 		if (!siteTop) return;
@@ -10,17 +15,117 @@
 		document.documentElement.style.setProperty('--site-top-anchor-offset', `${offset}px`);
 	};
 
-	mobileSectionLinks.forEach((link) => {
-		link.addEventListener('click', (event) => {
+	const alignInitialHashTarget = () => {
+		if (!window.location.hash) return;
+
+		try {
+			const target = document.getElementById(decodeURIComponent(window.location.hash.slice(1)));
+			target?.scrollIntoView({ block: 'start' });
+		} catch {
+			// Invalid URL encoding is left to the browser's native hash handling.
+		}
+	};
+
+	const getSamePageTarget = (link: HTMLAnchorElement) => {
+		const linkUrl = new URL(link.href, window.location.href);
+		if (linkUrl.pathname !== window.location.pathname || !linkUrl.hash) return undefined;
+
+		try {
+			return document.getElementById(decodeURIComponent(linkUrl.hash.slice(1))) ?? undefined;
+		} catch {
+			return undefined;
+		}
+	};
+
+	const updateCurrentSection = () => {
+		sectionLinks.forEach((link) => {
 			const linkUrl = new URL(link.href, window.location.href);
-			if (linkUrl.pathname !== window.location.pathname) return;
+			const isCurrent = linkUrl.pathname === window.location.pathname
+				&& linkUrl.hash !== ''
+				&& linkUrl.hash === window.location.hash;
+
+			if (isCurrent) {
+				link.setAttribute('aria-current', 'location');
+			} else if (link.getAttribute('aria-current') === 'location') {
+				link.removeAttribute('aria-current');
+			}
+		});
+	};
+
+	submenuItems.forEach((item) => {
+		const resetDismissal = () => delete item.dataset.submenuDismissed;
+		item.addEventListener('pointerleave', resetDismissal);
+		item.querySelector<HTMLAnchorElement>(':scope > a')?.addEventListener('focus', resetDismissal);
+	});
+
+	if (mobileMenu) {
+		mobileDestinationLinks.forEach((link) => {
+			link.addEventListener('click', () => {
+				mobileMenu.open = false;
+			});
+		});
+
+		mobileMenu.addEventListener('toggle', () => {
+			document.documentElement.classList.toggle('mobile-navigation-open', mobileMenu.open);
+			if (mobileMenu.open) window.requestAnimationFrame(() => mobileMenu.querySelector<HTMLElement>('h2')?.focus());
+		});
+
+		mobileMenu.addEventListener('keydown', (event) => {
+			if (!mobileMenu.open) return;
+
+			if (event.key === 'Escape') {
+				event.preventDefault();
+				mobileMenu.open = false;
+				mobileMenuSummary?.focus();
+				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 firstFocusable = focusableElements[0];
+			const lastFocusable = focusableElements.at(-1);
+			if (!firstFocusable || !lastFocusable) return;
+
+			if (event.shiftKey && document.activeElement === firstFocusable) {
+				event.preventDefault();
+				lastFocusable.focus();
+			} else if (!event.shiftKey && document.activeElement === lastFocusable) {
+				event.preventDefault();
+				firstFocusable.focus();
+			}
+		});
+	}
+
+	sectionLinks.forEach((link) => {
+		link.addEventListener('click', (event) => {
+			const target = getSamePageTarget(link);
+			if (!target) return;
 
 			if (mobileMenu) mobileMenu.open = false;
-			if (event.detail > 0) link.blur();
+			link.closest<HTMLElement>('.site-nav-item')?.setAttribute('data-submenu-dismissed', 'true');
+
+			window.requestAnimationFrame(() => {
+				updateCurrentSection();
+				if (event.detail > 0) {
+					link.blur();
+					return;
+				}
+
+				target.setAttribute('tabindex', '-1');
+				target.focus({ preventScroll: true });
+				target.addEventListener('blur', () => target.removeAttribute('tabindex'), { once: true });
+			});
 		});
 	});
 
+	window.addEventListener('hashchange', updateCurrentSection);
+	updateCurrentSection();
+
 	setAnchorOffset();
+	if (window.location.hash) window.requestAnimationFrame(alignInitialHashTarget);
 
 	if (siteTop && 'ResizeObserver' in window) {
 		new ResizeObserver(setAnchorOffset).observe(siteTop);

package/src/components/SiteBreadcrumbs.astro

@@ -0,0 +1,29 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import type { SitePage } from '../lib/sitePages';
+
+interface Props {
+	currentPage: SitePage;
+	pages: SitePage[];
+}
+
+const { currentPage, pages } = Astro.props;
+const pagesByPath = new Map(pages.map((page) => [page.pagePath, page]));
+const ancestors = currentPage.pageIds
+	.slice(0, -1)
+	.map((_, index) => pagesByPath.get(currentPage.pageIds.slice(0, index + 1).join('/')))
+	.filter((page): page is SitePage => page !== undefined);
+const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+---
+
+{ancestors.length > 0 && (
+	<nav class="site-breadcrumbs" aria-label={projectConfig.locale.labels.breadcrumb}>
+		<ol>
+			{ancestors.map((page) => (
+				<li><a href={pageHref(page)}>{page.title}</a></li>
+			))}
+			<li><span aria-current="page">{currentPage.title}</span></li>
+		</ol>
+	</nav>
+)}

package/src/components/SiteNavigation.astro

@@ -2,7 +2,9 @@
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
+import { getListedPageNavigationTree, type PageNavigationEntry } from '../lib/siteNavigation';
 import type { SitePage } from '../lib/sitePages';
+import NavigationPageTree from './NavigationPageTree.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
 
 type FrameColors = {
@@ -11,21 +13,18 @@ type FrameColors = {
 };
 
 interface Props {
-	navigationLabel: string;
 	logo?: {
 		src: string;
 		alt: string;
 		height?: string;
 	};
 	currentPage: SitePage;
-	pageNavigation: Array<{
-		page: SitePage;
-		sections: SectionNavigation[];
-	}>;
+	pageNavigation: PageNavigationEntry[];
+	navigationMode: 'sections' | 'top' | 'tree';
 	frameColors: FrameColors;
 }
 
-const { navigationLabel, logo, currentPage, pageNavigation, frameColors } = Astro.props;
+const { logo, currentPage, pageNavigation, navigationMode, frameColors } = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
 	: frameColors.backgroundColor;
@@ -34,54 +33,54 @@ const navigationStyle = [
 	`--site-top-text-color: ${frameColors.textColor}`,
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
-const showSiteNavigation = pageNavigation.length > 1;
-const showNavigationRow = showSiteNavigation || Boolean(logo);
+const siteNavigationPages = pageNavigation.filter(({ page }) => page.isHome || page.navigation.listed);
+const siteNavigationTree = getListedPageNavigationTree(pageNavigation);
+const topLevelNavigation = siteNavigationTree;
+const showSiteNavigation = siteNavigationPages.some(({ page }) => !page.isHome);
 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;
-const showSinglePageSectionNavigation = Boolean(
-	!showSiteNavigation && currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
-);
 const hasCurrentPageSectionMenu = Boolean(
-	showSiteNavigation && currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+	currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
 );
-const hasSectionNavigation = showSinglePageSectionNavigation || hasCurrentPageSectionMenu;
+const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu;
+const showNavigationRow = showMobileNavigation || Boolean(logo);
+const hasSectionNavigation = hasCurrentPageSectionMenu;
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
 
 <header
 	class:list={['site-top', { 'site-top-has-site-nav': showSiteNavigation }]}
+	data-navigation-mode={navigationMode}
 	style={navigationStyle}
 >
 	{showNavigationRow && (
 		<div class="site-nav-row">
-			<a class="site-brand" href={pageHref(homePage)}>
-				{logo ? <img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} /> : navigationLabel}
-			</a>
+			{logo && (
+				<a class="site-brand" href={pageHref(homePage)}>
+					<img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} />
+				</a>
+			)}
 
 			{showSiteNavigation && (
 				<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 					<ul>
-						{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>
+					{topLevelNavigation.map((node) => (
+						<li class:list={['site-nav-item', {
+							'site-nav-item-has-submenu': node.children.length > 0,
+							'site-nav-item-current-branch': !node.page.isHome && currentPage.pagePath.startsWith(`${node.page.pagePath}/`),
+						}]}>
+							<a href={pageHref(node.page)} aria-current={isCurrentPage(node.page) ? 'page' : undefined}>
+								{node.page.title}
+							</a>
+							{node.children.length > 0 && (
+								<div class="site-nav-submenu">
+									<nav aria-label={`${node.page.title} ${projectConfig.locale.labels.siteNavigation}`}>
+										<NavigationPageTree nodes={[node]} currentPage={currentPage} variant="submenu" />
+									</nav>
 									</div>
 								)}
 							</li>
@@ -90,52 +89,49 @@ const hasSectionNavigation = showSinglePageSectionNavigation || hasCurrentPageSe
 				</nav>
 			)}
 
-			{showSiteNavigation && <details class="mobile-nav-menu">
-				<summary>
-					<span>{currentPage.navigation.label}</span>
-				</summary>
-				<div class="mobile-nav-panel">
-					<nav class="mobile-site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
-						<h2>{projectConfig.locale.labels.siteNavigation}</h2>
-						<ul>
-							{pageNavigation.map(({ page }) => (
-								<li>
-									<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
-										{page.navigation.label}
-									</a>
-								</li>
-							))}
-						</ul>
-					</nav>
+			{showMobileNavigation && <details class="mobile-nav-menu">
+			<summary>
+				<span>{projectConfig.locale.labels.navigationMenu}</span>
+			</summary>
+			<div class="mobile-nav-panel">
+				<div class="mobile-site-nav">
+					{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" />
+						</nav>
+					)}
 
-					{currentPageNavigation && hasCurrentPageSectionMenu && (
-						<nav class="mobile-page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
-							<h2>{projectConfig.locale.labels.pageNavigation}</h2>
-							<ul>
-								{currentPageNavigation.sections.map((section) => (
-									<li>
-										<a href={sectionHref(currentPage, section)}>
-											{section.title}
-										</a>
-									</li>
+					{hasCurrentPageSectionMenu && currentPageNavigation && (
+						<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.pageNavigation}>
+							<h2 tabindex="-1">{projectConfig.locale.labels.pageNavigation}</h2>
+							<ul class="mobile-nav-sections">
+									{currentPageNavigation.sections.map((section) => (
+										<li>
+											<a class="mobile-nav-destination" href={`#${section.id}`}>{section.title}</a>
+										</li>
 								))}
 							</ul>
 						</nav>
 					)}
 				</div>
-			</details>}
+			</div>
+		</details>}
 		</div>
 	)}
 
-	{showSinglePageSectionNavigation && currentPageNavigation && (
+	{hasCurrentPageSectionMenu && currentPageNavigation && (
 		<nav class="page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
-			<ul>
-				{currentPageNavigation.sections.map((section) => (
-					<li>
-						<a href={`#${section.id}`}>{section.title}</a>
-					</li>
-				))}
-			</ul>
+			<div class="page-nav-inner">
+				<span class="page-nav-label">{projectConfig.locale.labels.pageNavigation}</span>
+				<ul>
+					{currentPageNavigation.sections.map((section) => (
+						<li>
+							<a href={`#${section.id}`}>{section.title}</a>
+						</li>
+					))}
+				</ul>
+			</div>
 		</nav>
 	)}
 

package/src/components/SitePage.astro

@@ -2,18 +2,20 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import path from 'node:path';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
 import SiteNotesScript from './SiteNotesScript.astro';
 import SiteSection from './SiteSection.astro';
-import { getSectionNavigation, getSectionsContent } from '../lib/sectionContent';
-import { getRouteTheme } from '../lib/routeThemes';
-import { getNavigationPages, getSitePage, getSitePages } from '../lib/sitePages';
+import { getHeadingNavigation, getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
+import { getPageTheme } from '../lib/pageThemes';
+import { getSitePage, getSitePages, type SitePage } 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 { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
+import { siteContentPath, sitePagesDir } from '../../scripts/lib/site-paths.mjs';
+import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
 import { resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
@@ -26,71 +28,93 @@ const { entry } = Astro.props;
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
 const sitePages = getSitePages(await getCollection('site'));
 const currentPage = getSitePage(entry);
-const siteContentLabel = entry.id.includes('-route-')
-	? `${siteDirectory || 'site'}/routes/${currentPage.routeDirectory}/content.md`
-	: `${siteDirectory || 'site'}/content.md`;
-const pageContentPath = currentPage.routeDirectory
-	? path.join(siteRoutesDir, currentPage.routeDirectory, 'content.md')
-	: siteContentPath;
-const rawMarkdown = (await readSiteFile(pageContentPath, siteContentLabel)).body;
+const getPageContentFile = (page: SitePage) => page.pageDirectory
+	? {
+		label: `${siteDirectory || 'site'}/pages/${page.pageDirectory}/content.md`,
+		path: path.join(sitePagesDir, page.pageDirectory, 'content.md'),
+	}
+	: {
+		label: `${siteDirectory || 'site'}/content.md`,
+		path: siteContentPath,
+	};
+const pageContentFile = getPageContentFile(currentPage);
+const siteContentLabel = pageContentFile.label;
+const rawMarkdown = (await readSiteFile(pageContentFile.path, pageContentFile.label)).body;
 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 navigationPages = getNavigationPages(sitePages);
 const homePage = sitePages.find((page) => page.isHome) ?? currentPage;
 const siteThemeData = siteTheme.data;
-const routeTheme = await getRouteTheme(currentPage.routeDirectory);
-const themeData = routeTheme?.data ?? siteThemeData;
-const themeLabel = routeTheme
-	? `${siteDirectory || 'site'}/${routeTheme.id}`
+const pageTheme = await getPageTheme(currentPage.pageDirectory);
+const themeData = pageTheme?.data ?? siteThemeData;
+const themeLabel = pageTheme
+	? `${siteDirectory || 'site'}/${pageTheme.id}`
 	: `${siteDirectory || 'site'}/${siteTheme.id}`;
 const visualTheme = resolveThemeVisualConfig(themeData, themeLabel);
-const navigationLabel = sitewideData.navigation?.label ?? homePage.title;
 const logoAsset = getLogoAsset();
-const logoSettings = sitewideData.navigation?.logo;
+const logoSettings = sitewideData.logo;
 const logo = logoAsset
 	? {
 		src: logoAsset.href,
-		alt: navigationLabel,
+		alt: homePage.title,
 		height: logoSettings?.height,
 	}
 	: undefined;
 const pagePresentation = resolvePagePresentation(themeData, themeLabel);
 const frameColors = resolveFrameColors({ theme: themeData, sourceLabel: themeLabel });
-const sections = entry.data.sections;
 const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, sections, currentPage);
+const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, currentPage, siteContentLabel);
 const today = getToday();
 const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
-const visibleSections = resolvedSections.filter((section) => isVisibleToday(section.visible, today));
-const hasMarginNotes = visibleSections.some((section) => section.contentBlocks.some((block) => block.type === 'note'));
+const hasMarginNotes = resolvedSections.some((section) => section.contentBlocks.some((block) => block.type === 'note'));
+const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
+	block.type === 'image-stack'
+	|| block.type === 'image-carousel'
+));
+const firstImageSectionIndex = resolvedSections.findIndex(hasPrioritizableImage);
+let contentSectionIndex = 0;
+const renderedSections = resolvedSections.map((section, index) => ({
+	section,
+	sectionIndex: section.headingLevel === 1 ? 0 : contentSectionIndex++,
+	prioritizeFirstImage: index === firstImageSectionIndex,
+}));
 
 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 contentFile = getPageContentFile(page);
+	const pageMarkdown = page.pathname === currentPage.pathname
+		? rawMarkdown
+		: (await readSiteFile(contentFile.path, contentFile.label)).body;
+	return getHeadingNavigation(pageMarkdown, contentFile.label);
 };
 
-const pageNavigation = await Promise.all(navigationPages.map(async (page) => ({
-	page,
-	sections: await getPageContent(page),
-})));
+const pageNavigation = await Promise.all(sitePages.map(async (page) => {
+	const headings = await getPageContent(page);
+	return {
+		page,
+		headings,
+		sections: headings
+			.filter((heading) => heading.depth === 2)
+			.map(({ id, title }) => ({ id, title })),
+	};
+}));
+const navigationModel = resolveNavigationModel({
+	mode: projectConfig.navigation.mode,
+	pages: pageNavigation.map(({ page, headings }) => ({
+		depth: Math.max(1, page.depth),
+		headings,
+		isHome: page.isHome,
+		listed: page.navigation.listed,
+	})),
+});
 
-if (visibleSections.length === 0) {
-	throw new Error(`No sections are visible for ${today}. Check sections.<section-id>.visible in ${siteContentLabel}.`);
-}
 ---
 
 <BaseLayout
-	title={entry.data.title}
-	description={entry.data.description}
+	title={currentPage.title}
+	description={entry.data.page?.description}
 	presentation={pagePresentation}
 	visualTheme={visualTheme}
 	frameColors={frameColors}
@@ -98,23 +122,23 @@ if (visibleSections.length === 0) {
 	footer={sitewideData.footer}
 >
 	<SiteNavigation
-		navigationLabel={navigationLabel}
 		logo={logo}
 		currentPage={currentPage}
 		pageNavigation={pageNavigation}
+		navigationMode={navigationModel.mode}
 		frameColors={frameColors}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
-	<main id="main-content" class="site-content">
-		{visibleSections.map((section, index) => (
+	<main class:list={['site-content', { 'site-content-has-breadcrumbs': currentPage.depth > 1 }]} id="main-content">
+		{currentPage.depth > 1 && <SiteBreadcrumbs currentPage={currentPage} pages={sitePages} />}
+		{renderedSections.map(({ section, sectionIndex, prioritizeFirstImage }) => (
 			<SiteSection
 				section={section}
 				pagePresentation={pagePresentation}
 				visualTheme={visualTheme}
-				sectionIndex={index}
-				headingLevel={index === 0 ? 1 : 2}
-				prioritizeFirstImage={index === 0}
+				sectionIndex={sectionIndex}
+				prioritizeFirstImage={prioritizeFirstImage}
 			/>
 		))}
 	</main>