From de3d07122d4fe945e93906d52083c6b55195ed01 Mon Sep 17 00:00:00 2001
From: EveSunMaple <evesunmaple@outlook.com>
Date: Tue, 20 Aug 2024 23:22:00 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8D=20medium-zoom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   | 1 +
 pnpm-lock.yaml                 | 8 ++++++++
 src/pages/blog/[...slug].astro | 9 +++++++++
 src/styles/global.scss         | 4 ++++
 4 files changed, 22 insertions(+)

diff --git a/package.json b/package.json
index 88f1c37..cbb6e77 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8cde440..2697561 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       katex:
         specifier: ^0.16.11
         version: 0.16.11
+      medium-zoom:
+        specifier: ^1.1.0
+        version: 1.1.0
       pagefind:
         specifier: ^1.1.0
         version: 1.1.0
@@ -3215,6 +3218,9 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  medium-zoom@1.1.0:
+    resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -8786,6 +8792,8 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
+  medium-zoom@1.1.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 1aee869..3742f94 100644
--- a/src/pages/blog/[...slug].astro
+++ b/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>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 5f89bca..086e459 100644
--- a/src/styles/global.scss
+++ b/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;
 }