✨ Zoom images

src/layouts/RootLayout.astro

@@ -13,17 +13,14 @@ const { title } = Astro.props;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
-    {title && (<title>山羊寒舍 | {title}</title>)}
-    {!title && (<title>山羊寒舍</title>)}
+    {title && <title>山羊寒舍 | {title}</title>}
+    {!title && <title>山羊寒舍</title>}
 
     <script is:inline>
       if (localStorage.getItem("theme") === null) {
         document.documentElement.setAttribute("data-theme", "light");
       } else {
-        document.documentElement.setAttribute(
-          "data-theme",
-          localStorage.getItem("theme")
-        );
+        document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
       }
     </script>
 

src/pages/posts/[slug].astro

@@ -48,14 +48,14 @@ const { post } = (
 }`,
     {
       where: { slug },
-    }
+    },
   )
 ).data;
 ---
 
 <PageLayout title={post.title}>
   <div class="wrapper">
-    <div class="card w-full shadow-xl">
+    <div class="card w-full shadow-xl post">
       {
         post.cover && (
           <figure>
@@ -101,10 +101,7 @@ const { post } = (
               <div class="flex gap-1">
                 {
                   post.categories?.map((category: any) => (
-                    <a
-                      href={`/categories/${category.slug}`}
-                      class="link link-primary"
-                    >
+                    <a href={`/categories/${category.slug}`} class="link link-primary">
                       {category.name}
                     </a>
                   ))
@@ -134,6 +131,13 @@ const { post } = (
   </div>
 </PageLayout>
 
+<script>
+  import mediumZoom from "medium-zoom";
+  mediumZoom(document.querySelectorAll(".post img"), {
+    background: "var(--fallback-b1,oklch(var(--b1)/1))",
+  });
+</script>
+
 <style>
   .wrapper {
     display: grid;