feat: add photoswipe to view images embeded in posts

package.json

@@ -49,6 +49,7 @@
     "marked": "^17.0.4",
     "marked-shiki": "^1.2.1",
     "mdast-util-to-string": "^4.0.0",
+    "photoswipe": "^5.4.4",
     "preline": "^4.1.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

pnpm-lock.yaml

@@ -74,6 +74,9 @@ importers:
       mdast-util-to-string:
         specifier: ^4.0.0
         version: 4.0.0
+      photoswipe:
+        specifier: 5.4.4
+        version: 5.4.4
       preline:
         specifier: ^4.1.2
         version: 4.1.2
@@ -4463,6 +4466,10 @@ packages:
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
+  photoswipe@5.4.4:
+    resolution: {integrity: sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==}
+    engines: {node: '>= 0.12.0'}
+
   piccolore@0.1.3:
     resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==}
 
@@ -11073,6 +11080,8 @@ snapshots:
 
   pend@1.2.0: {}
 
+  photoswipe@5.4.4: {}
+
   piccolore@0.1.3: {}
 
   picocolors@1.1.1: {}

src/pages/blog/[...slug].astro

@@ -6,6 +6,7 @@ import { marked } from 'marked';
 import markedShiki from 'marked-shiki';
 import { createHighlighter } from 'shiki';
 import { readItems, readSingleton } from '@directus/sdk';
+import 'photoswipe/style.css';
 
 import SocialShareButton from '@components/buttons/SocialShareButton.astro';
 import Logo from '@components/images/Logo.astro';
@@ -179,6 +180,40 @@ const content = marked.parse(post.content || '');
 </BaseLayout>
 
 <script>
+  import PhotoSwipeLightbox from 'photoswipe/lightbox';
+  const prose = document.querySelector('.prose');
+  if (prose) {
+    const images = prose.querySelectorAll('img');
+    images.forEach((img) => {
+      if (img.closest('a')) return;
+      const link = document.createElement('a');
+      link.href = img.src;
+      link.dataset.pswpSrc = img.src;
+      link.dataset.pswpWidth = img.naturalWidth.toString();
+      link.dataset.pswpHeight = img.naturalHeight.toString();
+      link.target = '_blank';
+      link.classList.add('pswp-link');
+
+      img.parentNode?.insertBefore(link, img);
+      link.appendChild(img);
+
+      if (!img.complete) {
+        img.onload = () => {
+          link.dataset.pswpWidth = img.naturalWidth.toString();
+          link.dataset.pswpHeight = img.naturalHeight.toString();
+        };
+      }
+    });
+
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: prose,
+      children: 'a.pswp-link',
+      pswpModule: () => import('photoswipe'),
+    });
+
+    lightbox.init();
+  }
+
   // Add smooth reveal animations for content after loading
   document.addEventListener('astro:page-load', () => {
     const animateContent = () => {