@janga/norna 0.7.10 → 0.7.12

package/scripts/test-theme-presets.mjs

@@ -0,0 +1,146 @@
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseYamlMapping } from './lib/frontmatter-yaml.mjs';
+import { splitSiteFile } from './lib/site-content.mjs';
+import {
+	resolveThemeConfig,
+	themePresetNames,
+	themePresets,
+} from './lib/theme-presets.mjs';
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const cliPath = path.join(repoRoot, 'bin', 'norna.mjs');
+const tempParent = path.join(repoRoot, 'node_modules', '.cache');
+await mkdir(tempParent, { recursive: true });
+const tempRoot = await mkdtemp(path.join(tempParent, 'norna theme presets-'));
+const siteDir = path.join(tempRoot, 'site');
+
+const runCli = (args) => spawnSync(process.execPath, [cliPath, '--site-dir', siteDir, ...args], {
+	cwd: repoRoot,
+	encoding: 'utf8',
+});
+
+try {
+	assert.deepEqual(Object.keys(themePresets), themePresetNames);
+	for (const presetName of themePresetNames) {
+		const resolved = resolveThemeConfig({ preset: presetName }, 'test theme');
+		assert.equal(resolved.preset, presetName);
+		assert.ok(resolved.layout?.density);
+		assert.ok(resolved.gallery?.width);
+		assert.ok(resolved.typography?.fontFamily);
+		assert.ok(resolved.typography?.preset);
+		assert.ok(resolved.presentation?.palette);
+	}
+
+	const overridden = resolveThemeConfig({
+		preset: 'documentation',
+		layout: { pageWidth: '1300px' },
+		presentation: { palette: 'dark' },
+	}, 'test theme');
+	assert.equal(overridden.layout.density, 'compact');
+	assert.equal(overridden.layout.pageWidth, '1300px');
+	assert.equal(overridden.gallery.width, '920px');
+	assert.equal(overridden.presentation.palette, 'dark');
+	assert.deepEqual(overridden.presentation.sectionSurfaces.sequence, ['base', 'soft']);
+	assert.throws(
+		() => resolveThemeConfig({ preset: 'unknown' }, 'test/theme.md'),
+		/Unknown theme preset "unknown" in test\/theme\.md.*portfolio, documentation, project, statement/,
+	);
+
+	await mkdir(path.join(siteDir, 'routes', '010-guide'), { recursive: true });
+	await writeFile(path.join(siteDir, 'config.md'), `---
+url: https://example.com/
+---
+`);
+	await writeFile(path.join(siteDir, 'content.md'), `---
+title: Theme preset test
+description: Root page
+---
+
+## Home {#home}
+
+Root content.
+`);
+	await writeFile(path.join(siteDir, 'theme.md'), `---
+preset: documentation
+layout:
+  pageWidth: 1300px
+presentation:
+  palette: dark
+---
+`);
+	await writeFile(path.join(siteDir, 'routes', '010-guide', 'route-content.md'), `---
+title: Guide
+description: Route page
+navigation:
+  label: Guide
+---
+
+## Guide {#guide}
+
+Route content.
+`);
+	await writeFile(path.join(siteDir, 'routes', '010-guide', 'theme.md'), `---
+preset: portfolio
+layout:
+  pageWidth: 1010px
+presentation:
+  palette: light
+---
+`);
+
+	const buildResult = runCli(['build']);
+	assert.equal(buildResult.status, 0, buildResult.stderr || buildResult.stdout);
+	const rootHtml = await readFile(path.join(tempRoot, 'dist', 'index.html'), 'utf8');
+	const routeHtml = await readFile(path.join(tempRoot, 'dist', 'guide', 'index.html'), 'utf8');
+	assert.match(rootHtml, /--page-width: 1300px/);
+	assert.match(rootHtml, /--font-sans: Georgia, 'Times New Roman', serif/);
+	assert.match(rootHtml, /--color-page: #000000/);
+	assert.match(routeHtml, /--page-width: 1010px/);
+	assert.match(routeHtml, /--font-sans: 'Helvetica Neue', Arial, sans-serif/);
+	assert.match(routeHtml, /--color-page: #ffffff/);
+
+	const typographyResult = runCli(['typography', 'show']);
+	assert.equal(typographyResult.status, 0, typographyResult.stderr || typographyResult.stdout);
+	assert.match(typographyResult.stdout, /value: text-forward/);
+	assert.match(typographyResult.stdout, /value: quiet-gallery/);
+
+	const routeThemePath = path.join(siteDir, 'routes', '010-guide', 'theme.md');
+	const routeThemeSource = await readFile(routeThemePath, 'utf8');
+	await writeFile(routeThemePath, `---\npreset: unknown\n---\n`);
+	const invalidRoutePresetResult = runCli(['config:check']);
+	assert.notEqual(invalidRoutePresetResult.status, 0);
+	assert.match(invalidRoutePresetResult.stderr, /Unknown theme preset "unknown" in .*routes\/010-guide\/theme\.md/);
+	await writeFile(routeThemePath, routeThemeSource);
+
+	const exportResult = runCli(['theme:export', 'documentation']);
+	assert.equal(exportResult.status, 0, exportResult.stderr || exportResult.stdout);
+	assert.match(exportResult.stdout, /orig-documentation-theme\.md/);
+	const exportedPath = path.join(siteDir, 'orig-documentation-theme.md');
+	const exportedSource = await readFile(exportedPath, 'utf8');
+	assert.match(exportedSource, /This is a reference file\. Norna only loads theme\.md\./);
+	assert.match(exportedSource, /Available theme presets: portfolio, documentation, project, statement\./);
+	assert.match(exportedSource, /# Alternatives: dark, light, paper\./);
+	const { frontmatterBody } = splitSiteFile(exportedSource, 'exported theme reference');
+	const exportedConfig = parseYamlMapping(frontmatterBody);
+	assert.equal(exportedConfig.preset, 'documentation');
+	assert.equal(exportedConfig.layout.pageWidth, themePresets.documentation.layout.pageWidth);
+	assert.equal(exportedConfig.typography.fontFamily, themePresets.documentation.typography.fontFamily);
+	assert.deepEqual(exportedConfig.presentation.sectionSurfaces.sequence, ['base', 'soft']);
+
+	const exportAgainResult = runCli(['theme:export', 'documentation']);
+	assert.notEqual(exportAgainResult.status, 0);
+	assert.match(exportAgainResult.stderr, /already exists\. Norna will not overwrite it\./);
+	assert.equal(await readFile(exportedPath, 'utf8'), exportedSource);
+
+	const unknownExportResult = runCli(['theme:export', 'unknown']);
+	assert.notEqual(unknownExportResult.status, 0);
+	assert.match(unknownExportResult.stderr, /Unknown theme preset "unknown"/);
+
+	console.log('ok - complete theme presets resolve for root and route themes and export as protected references');
+} finally {
+	await rm(tempRoot, { force: true, recursive: true });
+}

package/scripts/watch-pages-deploy.mjs

@@ -1,18 +1,17 @@
 import { execFile } from 'node:child_process';
 import { promisify } from 'node:util';
+import { getGitHubRepositoryContext, githubPagesWorkflow } from './lib/github-repository.mjs';
 import { projectConfig } from './lib/project-config.mjs';
 import { siteProjectRoot } from './lib/site-paths.mjs';
 
 const execFileAsync = promisify(execFile);
 
 const root = siteProjectRoot;
-const defaultRepo = projectConfig.github.repo;
-const defaultWorkflow = projectConfig.github.pagesWorkflow;
-const defaultBranch = projectConfig.github.branch;
+const defaultWorkflow = githubPagesWorkflow;
 const defaultSiteUrl = projectConfig.site.url;
-const defaultPollIntervalMs = projectConfig.deploy.watch.intervalMs;
-const defaultTimeoutMs = projectConfig.deploy.watch.timeoutMs;
-const defaultRunLimit = projectConfig.deploy.watch.runLimit;
+const defaultPollIntervalMs = 10_000;
+const defaultTimeoutMs = 15 * 60_000;
+const defaultRunLimit = 10;
 const runListFields = [
 	'conclusion',
 	'createdAt',
@@ -49,9 +48,9 @@ const usage = `
 Usage: norna deploy:watch [options]
 
 Options:
-  --repo <owner/name>     GitHub repository. Default: ${defaultRepo}
-  --workflow <name>       Workflow name. Default: ${defaultWorkflow}
-  --branch <name>         Branch to monitor. Default: ${defaultBranch}
+  --repo <owner/name>     GitHub repository. Default: current repository
+  --workflow <name>       Workflow name or file. Default: ${defaultWorkflow}
+  --branch <name>         Branch to monitor. Default: repository default branch
   --sha <sha>             Commit SHA to monitor. Default: current HEAD
   --site-url <url>        Public site URL to print. Default: ${defaultSiteUrl}
   --interval <duration>   Poll interval, for example 5s or 0.5m. Default: 10s
@@ -99,10 +98,10 @@ const readOptionValue = (args, index, optionName) => {
 
 const parseArgs = (args) => {
 	const options = {
-		branch: defaultBranch,
+		branch: null,
 		intervalMs: defaultPollIntervalMs,
 		limit: defaultRunLimit,
-		repo: defaultRepo,
+		repo: null,
 		sha: null,
 		siteUrl: defaultSiteUrl,
 		timeoutMs: defaultTimeoutMs,
@@ -367,6 +366,11 @@ const printFailureDetails = async (run, options, elapsedMs) => {
 
 const monitor = async () => {
 	const options = parseArgs(process.argv.slice(2));
+	if (!options.repo || !options.branch) {
+		const repository = await getGitHubRepositoryContext({ cwd: root, repo: options.repo });
+		options.repo ??= repository.repo;
+		options.branch ??= repository.branch;
+	}
 	options.sha ??= await getCurrentSha();
 
 	const startedAt = Date.now();

package/src/components/GalleryGrid.astro

@@ -1,22 +1,17 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
-import { getGeneratedImage, getImageAttributes } from '../lib/generatedImages';
-
-type GalleryImage = {
-	image: string;
-	src?: string;
-	alt?: string;
-	caption?: string;
-};
-type GalleryItem = GalleryImage | { carousel: GalleryImage[] };
-type GeneratedImageWithDimensions = NonNullable<ReturnType<typeof getGeneratedImage>> & {
-	width: number;
-	height: number;
-};
+import { getImageAttributes } from '../lib/generatedImages';
+import {
+	getCaptionId,
+	getGalleryImageSizes,
+	getImageClass,
+	getImageLoadingProps,
+	type GalleryImage,
+} from '../lib/galleryImages';
 
 interface Props {
 	title: string;
-	items: GalleryItem[];
+	images: GalleryImage[];
 	maxAvailableWidthPercent: {
 		desktop: number;
 		mobile: number;
@@ -24,229 +19,34 @@ interface Props {
 	priorityFirstImage?: boolean;
 }
 
-const { title, items, maxAvailableWidthPercent, priorityFirstImage = false } = Astro.props;
-const getCaptionId = (image: GalleryImage, itemIndex: number, imageIndex = 0) => {
-	const source = (image.src ?? image.image)
-		.toLowerCase()
-		.replace(/[^a-z0-9]+/g, '-')
-		.replace(/^-|-$/g, '');
-
-	return `gallery-caption-${source}-${itemIndex}-${imageIndex}`;
-};
-const galleryImageSizes = [
-	`(max-width: 700px) ${maxAvailableWidthPercent.mobile}vw`,
-	`${maxAvailableWidthPercent.desktop}vw`,
-].join(', ');
-const hasDimensions = (image: ReturnType<typeof getGeneratedImage>): image is GeneratedImageWithDimensions => (
-	Boolean(image) && Number.isFinite(image.width) && Number.isFinite(image.height)
-);
-const getImageClass = (image: GalleryImage) => {
-	const generatedImage = getGeneratedImage(image.src ?? image.image);
-	return hasDimensions(generatedImage) && generatedImage.width > generatedImage.height
-		? 'gallery-image-landscape'
-		: undefined;
-};
-const getImageLoadingProps = (isPriority: boolean) => ({
-	decoding: 'async' as const,
-	fetchpriority: isPriority ? 'high' as const : 'low' as const,
-	loading: isPriority ? 'eager' as const : 'lazy' as const,
-});
-const getCarouselAspectRatio = (images: GalleryImage[]) => {
-	const ratios = images
-		.map((image) => getGeneratedImage(image.src ?? image.image))
-		.filter(hasDimensions)
-		.map((image) => image.width / image.height);
-
-	return ratios.length > 0 ? Math.min(...ratios) : null;
-};
+const { title, images, maxAvailableWidthPercent, priorityFirstImage = false } = Astro.props;
+const galleryImageSizes = getGalleryImageSizes(maxAvailableWidthPercent);
 ---
 
 <div class="gallery" aria-label={`${projectConfig.locale.labels.gallery}: ${title}`}>
-	{items.map((item, itemIndex) => {
+	{images.map((image, itemIndex) => {
 		const isPriorityItem = priorityFirstImage && itemIndex === 0;
-
-		if ('image' in item) {
-			const captionId = item.caption ? getCaptionId(item, itemIndex) : undefined;
-
-			return (
-				<figure class="gallery-item">
-					<div class="gallery-image-frame">
-						<img
-							{...getImageAttributes(item.src ?? item.image, galleryImageSizes)}
-							class:list={['gallery-image', getImageClass(item)]}
-							alt={item.alt ?? ''}
-							aria-describedby={captionId}
-							{...getImageLoadingProps(isPriorityItem)}
-						/>
-					</div>
-					{item.caption && (
-						<figcaption class="gallery-meta" id={captionId}>
-							<div class="gallery-details">
-								<span>{item.caption}</span>
-							</div>
-						</figcaption>
-					)}
-				</figure>
-			);
-		}
-
-		const carouselAspectRatio = getCarouselAspectRatio(item.carousel);
-		const carouselStyle = carouselAspectRatio
-			? `--gallery-carousel-aspect-ratio: ${carouselAspectRatio}`
-			: undefined;
+		const captionId = image.caption ? getCaptionId(image, itemIndex) : undefined;
 
 		return (
-			<section
-				class="gallery-item gallery-carousel"
-				data-carousel
-				tabindex="0"
-				role="group"
-				aria-roledescription="carousel"
-				aria-label={`${title}, bildkarusell`}
-				style={carouselStyle}
-			>
-				<div class="gallery-carousel-stage">
-					<div class="gallery-carousel-viewport" data-carousel-viewport>
-						<div class="gallery-carousel-slides">
-							{item.carousel.map((image, imageIndex) => {
-								const captionId = image.caption ? getCaptionId(image, itemIndex, imageIndex) : undefined;
-
-								return (
-									<figure class="gallery-carousel-slide" data-carousel-slide>
-										<div class="gallery-carousel-image-frame">
-											<img
-												{...getImageAttributes(image.src ?? image.image, galleryImageSizes)}
-												class:list={['gallery-image', getImageClass(image)]}
-												alt={image.alt ?? ''}
-												aria-describedby={captionId}
-												{...getImageLoadingProps(isPriorityItem && imageIndex === 0)}
-											/>
-										</div>
-									</figure>
-								);
-							})}
-						</div>
-					</div>
-					<button
-						class="gallery-carousel-button gallery-carousel-button-previous"
-						type="button"
-						data-carousel-previous
-						aria-label="Föregående bild"
-						title="Föregående bild"
-					>
-						<span aria-hidden="true">‹</span>
-					</button>
-					<button
-						class="gallery-carousel-button gallery-carousel-button-next"
-						type="button"
-						data-carousel-next
-						aria-label="Nästa bild"
-						title="Nästa bild"
-					>
-						<span aria-hidden="true">›</span>
-					</button>
-					<output class="gallery-carousel-position" data-carousel-position aria-live="polite">
-						1 / {item.carousel.length}
-					</output>
+			<figure class="gallery-item">
+				<div class="gallery-image-frame">
+					<img
+						{...getImageAttributes(image.src ?? image.image, galleryImageSizes)}
+						class:list={['gallery-image', getImageClass(image)]}
+						alt={image.alt ?? ''}
+						aria-describedby={captionId}
+						{...getImageLoadingProps(isPriorityItem)}
+					/>
 				</div>
-				<div class="gallery-carousel-captions" data-carousel-captions>
-					{item.carousel.map((image, imageIndex) => (
-						image.caption && (
-							<p
-								class="gallery-meta gallery-carousel-caption"
-								id={getCaptionId(image, itemIndex, imageIndex)}
-								data-carousel-caption
-								data-carousel-caption-index={imageIndex}
-							>
-								<span class="gallery-details">
-									<span>{image.caption}</span>
-								</span>
-							</p>
-						)
-					))}
-				</div>
-			</section>
+				{image.caption && (
+					<figcaption class="gallery-meta" id={captionId}>
+						<div class="gallery-details">
+							<span>{image.caption}</span>
+						</div>
+					</figcaption>
+				)}
+			</figure>
 		);
 	})}
 </div>
-
-<script>
-	import EmblaCarousel from 'embla-carousel';
-
-	const carouselSelector = '[data-carousel]';
-
-	const initializeCarousel = (carousel: HTMLElement) => {
-		const viewport = carousel.querySelector<HTMLElement>('[data-carousel-viewport]');
-		const previous = carousel.querySelector<HTMLButtonElement>('[data-carousel-previous]');
-		const next = carousel.querySelector<HTMLButtonElement>('[data-carousel-next]');
-		const position = carousel.querySelector<HTMLOutputElement>('[data-carousel-position]');
-		const captions = Array.from(carousel.querySelectorAll<HTMLElement>('[data-carousel-caption]'));
-		const slides = Array.from(carousel.querySelectorAll<HTMLElement>('[data-carousel-slide]'));
-		if (!viewport || !previous || !next || !position || slides.length < 2) return;
-
-		let controlsTimeout: number | undefined;
-		const showControls = () => {
-			carousel.classList.add('is-interacting');
-			window.clearTimeout(controlsTimeout);
-			controlsTimeout = window.setTimeout(() => {
-				carousel.classList.remove('is-interacting');
-			}, 1600);
-		};
-
-		carousel.dataset.carouselReady = 'true';
-
-		const embla = EmblaCarousel(viewport, {
-			align: 'start',
-			containScroll: false,
-			loop: true,
-		});
-
-		const update = () => {
-			const activeIndex = embla.selectedScrollSnap();
-			slides.forEach((slide, index) => {
-				const isSelected = index === activeIndex;
-				slide.classList.toggle('is-active', isSelected);
-				slide.setAttribute('aria-hidden', String(!isSelected));
-			});
-			captions.forEach((caption) => {
-				const isSelected = Number(caption.dataset.carouselCaptionIndex) === activeIndex;
-				caption.classList.toggle('is-active', isSelected);
-				caption.setAttribute('aria-hidden', String(!isSelected));
-			});
-			previous.disabled = false;
-			next.disabled = false;
-			position.textContent = `${activeIndex + 1} / ${slides.length}`;
-		};
-
-		previous.addEventListener('click', () => {
-			showControls();
-			embla.scrollPrev();
-		});
-		next.addEventListener('click', () => {
-			showControls();
-			embla.scrollNext();
-		});
-		carousel.addEventListener('focusin', showControls);
-		carousel.addEventListener('pointerdown', showControls);
-		carousel.addEventListener('keydown', (event) => {
-			if (event.key === 'ArrowLeft') {
-				event.preventDefault();
-				showControls();
-				embla.scrollPrev();
-			}
-			if (event.key === 'ArrowRight') {
-				event.preventDefault();
-				showControls();
-				embla.scrollNext();
-			}
-		});
-		embla.on('select', () => {
-			showControls();
-			update();
-		});
-		embla.on('reInit', update);
-		update();
-	};
-
-	document.querySelectorAll<HTMLElement>(carouselSelector).forEach(initializeCarousel);
-</script>

package/src/components/ImageCarousel.astro

@@ -0,0 +1,184 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { getImageAttributes } from '../lib/generatedImages';
+import {
+	getCaptionId,
+	getCarouselAspectRatio,
+	getGalleryImageSizes,
+	getImageClass,
+	getImageLoadingProps,
+	type GalleryImage,
+} from '../lib/galleryImages';
+
+interface Props {
+	title: string;
+	images: GalleryImage[];
+	maxAvailableWidthPercent: {
+		desktop: number;
+		mobile: number;
+	};
+	priorityFirstImage?: boolean;
+}
+
+const { title, images, maxAvailableWidthPercent, priorityFirstImage = false } = Astro.props;
+const galleryImageSizes = getGalleryImageSizes(maxAvailableWidthPercent);
+const carouselAspectRatio = getCarouselAspectRatio(images);
+const carouselStyle = carouselAspectRatio
+	? `--gallery-carousel-aspect-ratio: ${carouselAspectRatio}`
+	: undefined;
+---
+
+<div class="gallery" aria-label={`${projectConfig.locale.labels.gallery}: ${title}`}>
+	<section
+		class="gallery-item gallery-carousel"
+		data-carousel
+		tabindex="0"
+		role="group"
+		aria-roledescription="carousel"
+		aria-label={`${title}, bildkarusell`}
+		style={carouselStyle}
+	>
+		<div class="gallery-carousel-stage">
+			<div class="gallery-carousel-viewport" data-carousel-viewport>
+				<div class="gallery-carousel-slides">
+					{images.map((image, imageIndex) => {
+						const captionId = image.caption ? getCaptionId(image, 0, imageIndex) : undefined;
+
+						return (
+							<figure class="gallery-carousel-slide" data-carousel-slide>
+								<div class="gallery-carousel-image-frame">
+									<img
+										{...getImageAttributes(image.src ?? image.image, galleryImageSizes)}
+										class:list={['gallery-image', getImageClass(image)]}
+										alt={image.alt ?? ''}
+										aria-describedby={captionId}
+										{...getImageLoadingProps(priorityFirstImage && imageIndex === 0)}
+									/>
+								</div>
+							</figure>
+						);
+					})}
+				</div>
+			</div>
+			<button
+				class="gallery-carousel-button gallery-carousel-button-previous"
+				type="button"
+				data-carousel-previous
+				aria-label="Föregående bild"
+				title="Föregående bild"
+			>
+				<span aria-hidden="true">‹</span>
+			</button>
+			<button
+				class="gallery-carousel-button gallery-carousel-button-next"
+				type="button"
+				data-carousel-next
+				aria-label="Nästa bild"
+				title="Nästa bild"
+			>
+				<span aria-hidden="true">›</span>
+			</button>
+			<output class="gallery-carousel-position" data-carousel-position aria-live="polite">
+				1 / {images.length}
+			</output>
+		</div>
+		<div class="gallery-carousel-captions" data-carousel-captions>
+			{images.map((image, imageIndex) => (
+				image.caption && (
+					<p
+						class="gallery-meta gallery-carousel-caption"
+						id={getCaptionId(image, 0, imageIndex)}
+						data-carousel-caption
+						data-carousel-caption-index={imageIndex}
+					>
+						<span class="gallery-details">
+							<span>{image.caption}</span>
+						</span>
+					</p>
+				)
+			))}
+		</div>
+	</section>
+</div>
+
+<script>
+	import EmblaCarousel from 'embla-carousel';
+
+	const initializeCarousel = (carousel: HTMLElement) => {
+		if (carousel.dataset.carouselInitialized === 'true') return;
+
+		const viewport = carousel.querySelector<HTMLElement>('[data-carousel-viewport]');
+		const previous = carousel.querySelector<HTMLButtonElement>('[data-carousel-previous]');
+		const next = carousel.querySelector<HTMLButtonElement>('[data-carousel-next]');
+		const position = carousel.querySelector<HTMLOutputElement>('[data-carousel-position]');
+		const captions = Array.from(carousel.querySelectorAll<HTMLElement>('[data-carousel-caption]'));
+		const slides = Array.from(carousel.querySelectorAll<HTMLElement>('[data-carousel-slide]'));
+		if (!viewport || !previous || !next || !position || slides.length < 2) return;
+
+		let controlsTimeout: number | undefined;
+		const showControls = () => {
+			carousel.classList.add('is-interacting');
+			window.clearTimeout(controlsTimeout);
+			controlsTimeout = window.setTimeout(() => {
+				carousel.classList.remove('is-interacting');
+			}, 1600);
+		};
+
+		carousel.dataset.carouselInitialized = 'true';
+		carousel.dataset.carouselReady = 'true';
+
+		const embla = EmblaCarousel(viewport, {
+			align: 'start',
+			containScroll: false,
+			loop: true,
+		});
+
+		const update = () => {
+			const activeIndex = embla.selectedScrollSnap();
+			slides.forEach((slide, index) => {
+				const isSelected = index === activeIndex;
+				slide.classList.toggle('is-active', isSelected);
+				slide.setAttribute('aria-hidden', String(!isSelected));
+			});
+			captions.forEach((caption) => {
+				const isSelected = Number(caption.dataset.carouselCaptionIndex) === activeIndex;
+				caption.classList.toggle('is-active', isSelected);
+				caption.setAttribute('aria-hidden', String(!isSelected));
+			});
+			previous.disabled = false;
+			next.disabled = false;
+			position.textContent = `${activeIndex + 1} / ${slides.length}`;
+		};
+
+		previous.addEventListener('click', () => {
+			showControls();
+			embla.scrollPrev();
+		});
+		next.addEventListener('click', () => {
+			showControls();
+			embla.scrollNext();
+		});
+		carousel.addEventListener('focusin', showControls);
+		carousel.addEventListener('pointerdown', showControls);
+		carousel.addEventListener('keydown', (event) => {
+			if (event.key === 'ArrowLeft') {
+				event.preventDefault();
+				showControls();
+				embla.scrollPrev();
+			}
+			if (event.key === 'ArrowRight') {
+				event.preventDefault();
+				showControls();
+				embla.scrollNext();
+			}
+		});
+		embla.on('select', () => {
+			showControls();
+			update();
+		});
+		embla.on('reInit', update);
+		update();
+	};
+
+	document.querySelectorAll<HTMLElement>('[data-carousel]').forEach(initializeCarousel);
+</script>

package/src/components/MobileSectionNavigationScript.astro

@@ -0,0 +1,14 @@
+<script>
+	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
+	const sectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('.mobile-page-nav a'));
+
+	sectionLinks.forEach((link) => {
+		link.addEventListener('click', (event) => {
+			const linkUrl = new URL(link.href, window.location.href);
+			if (linkUrl.pathname !== window.location.pathname) return;
+
+			if (mobileMenu) mobileMenu.open = false;
+			if (event.detail > 0) link.blur();
+		});
+	});
+</script>