🔍 medium-zoom

package.json

@@ -29,6 +29,7 @@
     "astro-pagefind": "^1.6.0",
     "dayjs": "^1.11.12",
     "katex": "^0.16.11",
+    "medium-zoom": "^1.1.0",
     "pagefind": "^1.1.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",

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

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import BaseCard from "../../components/BaseCard.astro";
+import "medium-zoom/dist/style.css";
 import { type CollectionEntry, getCollection } from "astro:content";
 
 export async function getStaticPaths() {
@@ -29,3 +30,11 @@ const { Content } = await post.render();
     <Content />
   </BaseCard>
 </BaseLayout>
+<script>
+  import mediumZoom from "medium-zoom/dist/pure";
+  mediumZoom(".main-card img", { margin: 24, background: "#00000080" });
+
+  document.addEventListener("swup:page:view", () => {
+    mediumZoom(".main-card img", { margin: 24, background: "#00000080" });
+  });
+</script>

src/styles/global.scss

@@ -15,6 +15,10 @@ a {
   @apply relative no-underline;
 }
 
+.medium-zoom-image--opened {
+  @apply rounded-xl;
+}
+
 .main-card img {
   @apply rounded-xl;
 }