Click images to zoom

src/components/layout.astro

@@ -51,10 +51,14 @@ import Analytics from "@/components/analytics.astro";
 	>
 		<Analytics />
 		<script>
+			import { enhanceImageZoom } from "@/lib/enhance-image-zoom";
 			import { enhanceStaticTabs } from "@/lib/enhance-static-tabs";
 
 			enhanceStaticTabs();
-			document.addEventListener("astro:page-load", enhanceStaticTabs);
+			document.addEventListener("astro:page-load", () => {
+				enhanceStaticTabs();
+				enhanceImageZoom();
+			});
 		</script>
 		<slot />
 	</body>

src/lib/enhance-image-zoom.ts

@@ -0,0 +1,41 @@
+let dialog: HTMLDialogElement | undefined;
+
+function getDialog() {
+	if (dialog?.isConnected) return dialog;
+
+	dialog = document.createElement("dialog");
+	dialog.className = "image-zoom-dialog";
+	dialog.setAttribute("aria-label", "Zoomed image");
+	dialog.append(document.createElement("img"));
+	dialog.addEventListener("click", () => dialog?.close());
+	document.body.append(dialog);
+	return dialog;
+}
+
+function openZoom(source: HTMLImageElement) {
+	const target = getDialog();
+	const img = target.querySelector("img")!;
+	img.src = source.currentSrc || source.src;
+	img.alt = source.alt;
+	target.showModal();
+}
+
+function enhanceImage(img: HTMLImageElement) {
+	if (img.closest("a")) return;
+	img.classList.add("image-zoom");
+	img.tabIndex = 0;
+	img.setAttribute("role", "button");
+	img.setAttribute("aria-haspopup", "dialog");
+	img.addEventListener("click", () => openZoom(img));
+	img.addEventListener("keydown", (event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		openZoom(img);
+	});
+}
+
+export function enhanceImageZoom() {
+	for (const img of document.querySelectorAll<HTMLImageElement>(".prose img")) {
+		enhanceImage(img);
+	}
+}

src/styles/global.css

@@ -185,3 +185,36 @@
 	font-weight: 500;
 	color: var(--foreground);
 }
+
+.prose img.image-zoom {
+	cursor: zoom-in;
+}
+
+.image-zoom-dialog {
+	max-width: 100vw;
+	max-height: 100vh;
+	width: 100vw;
+	height: 100vh;
+	background: transparent;
+	cursor: zoom-out;
+}
+
+.image-zoom-dialog[open] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.image-zoom-dialog::backdrop {
+	background: color-mix(in oklab, var(--background) 85%, transparent);
+	backdrop-filter: blur(4px);
+}
+
+.image-zoom-dialog img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+html:has(.image-zoom-dialog[open]) {
+	overflow: hidden;
+}