@janga/norna 0.7.11 → 0.7.13

package/scripts/test-project-config.mjs

@@ -0,0 +1,125 @@
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const repoRoot = path.resolve(import.meta.dirname, '..');
+const projectConfigUrl = pathToFileURL(path.join(repoRoot, 'scripts', 'lib', 'project-config.mjs')).href;
+const tempRoot = await mkdtemp(path.join(tmpdir(), 'norna-project-config-'));
+const importScript = `
+	const { projectConfig } = await import(${JSON.stringify(projectConfigUrl)});
+	console.log(JSON.stringify({
+		basePath: projectConfig.site.basePath,
+		language: projectConfig.locale.lang,
+		labels: projectConfig.locale.labels,
+		scrollBehavior: projectConfig.navigation.scrollBehavior,
+		url: projectConfig.site.url,
+	}));
+`;
+
+const createSite = async (name, config, { legacy = false } = {}) => {
+	const projectRoot = path.join(tempRoot, name);
+	const siteDir = path.join(projectRoot, 'site');
+	await mkdir(siteDir, { recursive: true });
+	await writeFile(path.join(siteDir, legacy ? 'config.mjs' : 'config.md'), config);
+	await writeFile(path.join(siteDir, 'content.md'), '---\ntitle: Config test\ndescription: Config test.\n---\n\n## Intro {#intro}\n\nText.\n');
+	await writeFile(path.join(siteDir, 'theme.md'), '---\npreset: documentation\n---\n');
+	return { projectRoot, siteDir };
+};
+
+const loadConfig = ({ projectRoot, siteDir }, env = {}) => spawnSync(
+	process.execPath,
+	['--input-type=module', '--eval', importScript],
+	{
+		cwd: projectRoot,
+		encoding: 'utf8',
+		env: {
+			...process.env,
+			NORNA_INVOCATION_ROOT: projectRoot,
+			NORNA_SITE_DIR: siteDir,
+			...env,
+		},
+	},
+);
+
+const assertFailure = (result, expectedPattern) => {
+	assert.notEqual(result.status, 0, result.stdout);
+	assert.match(`${result.stdout}\n${result.stderr}`, expectedPattern);
+};
+
+try {
+	const minimalSite = await createSite('minimal', '---\nurl: https://example.com/docs\n---\n');
+	const minimalResult = loadConfig(minimalSite);
+	assert.equal(minimalResult.status, 0, minimalResult.stderr);
+	assert.deepEqual(JSON.parse(minimalResult.stdout), {
+		basePath: '/docs/',
+		language: 'en',
+		labels: {
+			dismissBanner: 'Dismiss notice',
+			gallery: 'Images',
+			note: 'Note',
+			pageNavigation: 'On this page',
+			siteBanners: 'Site notices',
+			siteNavigation: 'Pages',
+			skipToContent: 'Skip to content',
+		},
+		scrollBehavior: 'instant',
+		url: 'https://example.com/docs/',
+	});
+
+	const localizedSite = await createSite('localized', '---\nurl: https://example.com/\nlanguage: sv-SE\nscrollBehavior: browser-smooth\n---\n');
+	const localizedResult = loadConfig(localizedSite);
+	assert.equal(localizedResult.status, 0, localizedResult.stderr);
+	const localizedConfig = JSON.parse(localizedResult.stdout);
+	assert.equal(localizedConfig.language, 'sv-SE');
+	assert.equal(localizedConfig.labels.skipToContent, 'Hoppa till innehållet');
+	assert.equal(localizedConfig.scrollBehavior, 'browser-smooth');
+
+	const overrideResult = loadConfig(minimalSite, {
+		NORNA_SITE_URL: 'http://127.0.0.1:4567/preview',
+	});
+	assert.equal(overrideResult.status, 0, overrideResult.stderr);
+	assert.deepEqual(
+		JSON.parse(overrideResult.stdout),
+		{
+			...JSON.parse(minimalResult.stdout),
+			basePath: '/preview/',
+			url: 'http://127.0.0.1:4567/preview/',
+		},
+	);
+
+	assertFailure(
+		loadConfig(await createSite('unknown-field', '---\nurl: https://example.com/\nbasePath: /docs/\n---\n')),
+		/not a valid top-level config field/,
+	);
+	assertFailure(
+		loadConfig(await createSite('markdown-body', '---\nurl: https://example.com/\n---\n\nConfiguration prose.\n')),
+		/may contain YAML frontmatter only/,
+	);
+	assertFailure(
+		loadConfig(await createSite('unsupported-language', '---\nurl: https://example.com/\nlanguage: de\n---\n')),
+		/has no built-in Norna UI text/,
+	);
+	assertFailure(
+		loadConfig(await createSite('invalid-url', '---\nurl: example.com\n---\n')),
+		/url must be an absolute URL/,
+	);
+	assertFailure(
+		loadConfig(await createSite('invalid-scroll-behavior', '---\nurl: https://example.com/\nscrollBehavior: slow\n---\n')),
+		/scrollBehavior must be one of instant, browser-smooth/,
+	);
+	assertFailure(
+		loadConfig(await createSite('obsolete-smooth-scroll', '---\nurl: https://example.com/\nsmoothScroll: true\n---\n')),
+		/not a valid top-level config field/,
+	);
+	assertFailure(
+		loadConfig(await createSite('legacy', 'export default {};\n', { legacy: true })),
+		/Replace the obsolete config\.mjs with a frontmatter-only config\.md file/,
+	);
+
+	console.log('Project config test passed.');
+} finally {
+	await rm(tempRoot, { force: true, recursive: true });
+}

package/scripts/test-temporary-visibility.mjs

@@ -37,16 +37,9 @@ try {
 	await mkdir(path.join(siteDir, 'images', 'work'), { recursive: true });
 	await mkdir(path.join(siteDir, 'public'), { recursive: true });
 	await writeFile(path.join(siteDir, 'public', 'robots.txt'), 'User-agent: *\nAllow: /\n');
-	await writeFile(path.join(siteDir, 'config.mjs'), `export default {
-	site: {
-		url: 'https://example.com/',
-	},
-	github: {
-		repo: 'owner/example',
-		branch: 'main',
-		pagesWorkflow: 'Deploy to GitHub Pages',
-	},
-};
+	await writeFile(path.join(siteDir, 'config.md'), `---
+url: https://example.com/
+---
 `);
 	await writeFile(path.join(siteDir, 'theme.md'), `---
 typography:

package/scripts/test-theme-presets.mjs

@@ -51,14 +51,9 @@ try {
 	);
 
 	await mkdir(path.join(siteDir, 'routes', '010-guide'), { recursive: true });
-	await writeFile(path.join(siteDir, 'config.mjs'), `export default {
-  site: { url: 'https://example.com/', basePath: '/' },
-  github: {
-    repo: 'owner/repo',
-    branch: 'main',
-    pagesWorkflow: 'Deploy to GitHub Pages',
-  },
-};
+	await writeFile(path.join(siteDir, 'config.md'), `---
+url: https://example.com/
+---
 `);
 	await writeFile(path.join(siteDir, 'content.md'), `---
 title: Theme preset test

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>