feat: add photoswipe for image zoom (#135)

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

@@ -1,48 +1,48 @@
 ---
-import { getCollection } from 'astro:content';
-import MainGridLayout from "@layouts/MainGridLayout.astro";
-import ImageWrapper from "../../components/misc/ImageWrapper.astro";
-import {Icon} from "astro-icon/components";
-import PostMetadata from "../../components/PostMeta.astro";
-import {i18n} from "@i18n/translation";
-import I18nKey from "@i18n/i18nKey";
-import {getDir, getPostUrlBySlug} from "@utils/url-utils";
-import License from "@components/misc/License.astro";
-import {licenseConfig} from "src/config";
-import Markdown from "@components/misc/Markdown.astro";
-import path from "path";
-import {profileConfig} from "../../config";
-import {formatDateToYYYYMMDD} from "../../utils/date-utils";
+import path from 'node:path'
+import { getCollection } from 'astro:content'
+import License from '@components/misc/License.astro'
+import Markdown from '@components/misc/Markdown.astro'
+import I18nKey from '@i18n/i18nKey'
+import { i18n } from '@i18n/translation'
+import MainGridLayout from '@layouts/MainGridLayout.astro'
+import { getDir, getPostUrlBySlug } from '@utils/url-utils'
+import { Icon } from 'astro-icon/components'
+import { licenseConfig } from 'src/config'
+import PostMetadata from '../../components/PostMeta.astro'
+import ImageWrapper from '../../components/misc/ImageWrapper.astro'
+import { profileConfig } from '../../config'
+import { formatDateToYYYYMMDD } from '../../utils/date-utils'
 
 export async function getStaticPaths() {
-    const blogEntries = await getCollection('posts', ({ data }) => {
-        return import.meta.env.PROD ? data.draft !== true : true;
-    });
-    return blogEntries.map(entry => ({
-        params: { slug: entry.slug }, props: { entry },
-    }));
+  const blogEntries = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true
+  })
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }))
 }
 
-const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { entry } = Astro.props
+const { Content } = await entry.render()
 
-const { remarkPluginFrontmatter } = await entry.render();
+const { remarkPluginFrontmatter } = await entry.render()
 
 const jsonLd = {
-    "@context": "https://schema.org",
-    "@type": "BlogPosting",
-    "headline": entry.data.title,
-    "description": entry.data.description || entry.data.title,
-    "keywords": entry.data.tags,
-    "author": {
-        "@type": "Person",
-        "name": profileConfig.name,
-        "url": Astro.site
-    },
-    "datePublished": formatDateToYYYYMMDD(entry.data.published),
-    // TODO include cover image here
+  '@context': 'https://schema.org',
+  '@type': 'BlogPosting',
+  headline: entry.data.title,
+  description: entry.data.description || entry.data.title,
+  keywords: entry.data.tags,
+  author: {
+    '@type': 'Person',
+    name: profileConfig.name,
+    url: Astro.site,
+  },
+  datePublished: formatDateToYYYYMMDD(entry.data.published),
+  // TODO include cover image here
 }
-
 ---
 <MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description}>
     <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
@@ -137,5 +137,61 @@ const jsonLd = {
 #post-container :nth-child(3) { animation-delay: calc(var(--content-delay) + 100ms) }
 #post-container :nth-child(4) { animation-delay: calc(var(--content-delay) + 175ms) }
 #post-container :nth-child(5) { animation-delay: calc(var(--content-delay) + 250ms) }
-#post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) }
-</style>
+#post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) } 
+</style>
+
+
+<script>
+import PhotoSwipeLightbox from "photoswipe/lightbox"
+import "photoswipe/style.css"
+
+let lightbox: PhotoSwipeLightbox
+
+function createPhotoSwipe() {
+  lightbox = new PhotoSwipeLightbox({
+    gallery: "#post-container img",
+    pswpModule: () => import("photoswipe"),
+  })
+
+  lightbox.addFilter("domItemData", (itemData, element, linkEl) => {
+    if (element instanceof HTMLImageElement) {
+      itemData.src = element.src
+
+      itemData.w = Number(element.getAttribute("width"))
+      itemData.h = Number(element.getAttribute("height"))
+
+      itemData.msrc = element.src
+    }
+
+    return itemData
+  })
+
+  lightbox.init()
+}
+
+const setup = () => {
+  if (!lightbox) {
+    createPhotoSwipe()
+  }
+  window.swup.hooks.on("page:view", () => {
+    createPhotoSwipe()
+  })
+
+  window.swup.hooks.on(
+    "content:replace",
+    () => {
+      console.log("content:replace")
+      lightbox?.destroy?.()
+    },
+    { before: true },
+  )
+}
+
+if (window.swup) {
+  setup()
+} else {
+  document.addEventListener("swup:enable", setup)
+}
+
+</script>
+