From 1e2f147e08e6e69a7a356f38014dab33585544c2 Mon Sep 17 00:00:00 2001
From: Dawid Rycerz <dawid@rycerz.xyz>
Date: Tue, 13 Jan 2026 19:23:21 +0100
Subject: Add zoom feature for images

---
 src/layouts/BlogPost.astro | 9 +++++++++
 src/loaders/pleroma.ts     | 4 +---
 src/styles/global.css      | 6 ++++++
 3 files changed, 16 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 2744b8c..436efde 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -92,3 +92,12 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 	const observer = new IntersectionObserver(callback);
 	observer.observe(targetHeader);
 </script>
+
+<script>
+	import mediumZoom from "medium-zoom";
+
+	mediumZoom("[data-zoomable]", {
+		margin: 8,
+		background: "rgba(0, 0, 0, 0.2)",
+	});
+</script>
diff --git a/src/loaders/pleroma.ts b/src/loaders/pleroma.ts
index 83f60c2..853c888 100644
--- a/src/loaders/pleroma.ts
+++ b/src/loaders/pleroma.ts
@@ -531,9 +531,7 @@ function buildImageGridHtml(attachments: PleromaMediaAttachment[]): string {
 ${imageAttachments
 	.map((attachment) => {
 		const description = attachment.description || "Image";
-		return `<a href="${attachment.url}" target="_blank" rel="noopener noreferrer" class="block overflow-hidden rounded-lg border border-gray-200 transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600">
-<img src="${attachment.url}" alt="${description}" class="h-48 w-full object-cover" loading="lazy" />
-</a>`;
+		return `<img src="${attachment.url}" alt="${description}" class="h-48 w-full cursor-zoom-in rounded-lg border border-gray-200 object-cover transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600" loading="lazy" data-zoomable />`;
 	})
 	.join("\n")}
 </div>`;
diff --git a/src/styles/global.css b/src/styles/global.css
index 5f5cdb6..798afc7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -146,3 +146,9 @@
 	--tw-prose-quotes: var(--color-quote);
 	--tw-prose-th-borders: #666;
 }
+
+/* Medium-zoom overlay styles */
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+	z-index: 999;
+}
-- 
cgit v1.2.3