✨ feat: add image lightbox functionality

- Add imageConfig in astro.config.ts to optimize remote image processing in Markdown files
- Update PhotoSwipe component initialization logic to ensure proper setup on page load

src/components/Widgets/PhotoSwipe.astro

@@ -1,75 +1,58 @@
 <script>
-  import PhotoSwipeLightbox from 'photoswipe/lightbox'
-  import 'photoswipe/style.css'
+import PhotoSwipeLightbox from 'photoswipe/lightbox'
+import 'photoswipe/style.css'
 
-  let lightbox: PhotoSwipeLightbox | null = null
-  const pswp = import('photoswipe')
-
-  function cleanup() {
-    if (lightbox) {
-      lightbox.destroy()
-      lightbox = null
-    }
-    document.removeEventListener('astro:page-load', createPhotoSwipe)
-    document.removeEventListener('astro:before-swap', cleanup)
-  }
-
-  function createPhotoSwipe() {
-    // Clean up existing instance if any
-    cleanup()
+let lightbox: PhotoSwipeLightbox
+const pswp = import('photoswipe')
 
+function setupPhotoSwipe() {
+  const bodyElement = document.body
+  if (!bodyElement.hasAttribute('data-photoswipe-initialized')) {
     lightbox = new PhotoSwipeLightbox({
-      gallery: 'article img',
+      gallery: 'article.heti img',
       pswpModule: () => pswp,
-      closeSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>',
-      zoomSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M340-540h-40q-17 0-28.5-11.5T260-580q0-17 11.5-28.5T300-620h40v-40q0-17 11.5-28.5T380-700q17 0 28.5 11.5T420-660v40h40q17 0 28.5 11.5T500-580q0 17-11.5 28.5T460-540h-40v40q0 17-11.5 28.5T380-460q-17 0-28.5-11.5T340-500v-40Zm40 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',
-      padding: { top: window.innerHeight * 0.1, bottom: window.innerHeight * 0.1, left: window.innerWidth * 0.06, right: window.innerWidth * 0.06 },
+      bgOpacity: 0.9,
+      padding: {
+        top: window.innerHeight * 0.1,
+        bottom: window.innerHeight * 0.1,
+        left: window.innerWidth * 0.073,
+        right: window.innerWidth * 0.073,
+      },
+      zoom: false,
+      close: false,
       wheelToZoom: true,
-      arrowPrev: false,
-      arrowNext: false,
       imageClickAction: 'close',
       tapAction: 'close',
-      doubleTapAction: 'zoom',
     })
 
-    // Automatically add image dimensions
-    lightbox.addFilter('domItemData', (itemData: any, element: Element) => {
+    // Set image dimensions
+    lightbox.addFilter('domItemData', (itemData, element) => {
       if (element instanceof HTMLImageElement) {
+        // Set image source
         itemData.src = element.src
+
+        // Set dimensions with fallback to window size
         itemData.w = Number(element.naturalWidth || window.innerWidth)
         itemData.h = Number(element.naturalHeight || window.innerHeight)
+
+        // Set thumbnail source
         itemData.msrc = element.src
       }
       return itemData
     })
 
     lightbox.init()
-  }
 
-  document.addEventListener('astro:page-load', createPhotoSwipe)
-  document.addEventListener('astro:before-swap', cleanup)
+    bodyElement.setAttribute('data-photoswipe-initialized', 'true')
+  }
+}
+
+setupPhotoSwipe()
+document.addEventListener('astro:page-load', setupPhotoSwipe)
 </script>
 
 <style is:global>
-  .pswp__button {
-    --at-apply: 'flex items-center justify-center transition';
-  }
-
-  .pswp__button--zoom,
-  .pswp__button--close {
-    --at-apply: 'mt-2 lg:mt-4 active:scale-90';
-  }
-
-  .pswp__button--zoom svg:hover,
-  .pswp__button--close svg:hover {
-    fill: #BEBEBE;
-  }
-
-  .pswp__button--close {
-    --at-apply: 'mr-4 lg:mr-8';
-  }
-
-  .pswp__button--zoom {
-    --at-apply: 'mr--6 lg:mr-0';
-  }
+.pswp .pswp__bg {
+  --at-apply: 'bg-background!'
+}
 </style>

src/layouts/Layout.astro

@@ -3,6 +3,7 @@ import Button from '@/components/Button.astro'
 import Footer from '@/components/Footer.astro'
 import Header from '@/components/Header.astro'
 import Navbar from '@/components/Navbar.astro'
+import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
 import Scrollbar from '@/components/Widgets/Scrollbar.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
@@ -48,5 +49,6 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
     </div>
     <Scrollbar />
     <Button supportedLangs={supportedLangs} />
+    <PhotoSwipe />
   </body>
 </html>

src/styles/global.css

@@ -12,9 +12,9 @@ body {
   --at-apply: 'ios-flash-fix';
 }
 
-/* article img {
+article.heti img {
   --at-apply: 'cursor-zoom-in force-gpu';
-} */
+}
 
 /* View Transition with Theme Toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 ::view-transition-new(theme-transition) {