refactor: refactoring project structure and components, optimizing internationalization and page presentation

2025-06-17 20:01:33 +02:00 · 2025-03-08 21:38:08 +00:00 · 2025-03-08 21:38:08 +00:00 · d6cff842e1
commit d6cff842e1
parent 6674cb7072
37 changed files with 156 additions and 146 deletions
--- a/src/components/Widgets/PhotoSwipe.astro
+++ b/src/components/Widgets/PhotoSwipe.astro
@ -0,0 +1,75 @@
+<script>
+  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()
+
+    lightbox = new PhotoSwipeLightbox({
+      gallery: 'article 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 },
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      imageClickAction: 'close',
+      tapAction: 'close',
+      doubleTapAction: 'zoom',
+    })
+
+    // Automatically add image dimensions
+    lightbox.addFilter('domItemData', (itemData: any, element: Element) => {
+      if (element instanceof HTMLImageElement) {
+        itemData.src = element.src
+        itemData.w = Number(element.naturalWidth || window.innerWidth)
+        itemData.h = Number(element.naturalHeight || window.innerHeight)
+        itemData.msrc = element.src
+      }
+      return itemData
+    })
+
+    lightbox.init()
+  }
+
+  document.addEventListener('astro:page-load', createPhotoSwipe)
+  document.addEventListener('astro:before-swap', cleanup)
+</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';
+  }
+</style>