Add zoom feature for images

5 files changed, 25 insertions, 3 deletions

diff --git a/package.json b/package.json
index 4f25b06..09ccde9 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
 		"mdast-util-directive": "^3.0.0",
 		"mdast-util-to-markdown": "^2.1.2",
 		"mdast-util-to-string": "^4.0.0",
+		"medium-zoom": "^1.1.0",
 		"rehype-autolink-headings": "^7.1.0",
 		"rehype-external-links": "^3.0.0",
 		"rehype-unwrap-images": "^1.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7df8c8..395f4ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       mdast-util-to-string:
         specifier: ^4.0.0
         version: 4.0.0
+      medium-zoom:
+        specifier: ^1.1.0
+        version: 1.1.0
       rehype-autolink-headings:
         specifier: ^7.1.0
         version: 7.1.0
@@ -2373,6 +2376,9 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  medium-zoom@1.1.0:
+    resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -6156,6 +6162,8 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
+  medium-zoom@1.1.0: {}
+
   merge2@1.4.1: {}
 
   micromark-core-commonmark@2.0.3:
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;
+}