fix: canva container (#91)

rqbazan · Dec 6, 2024 · b6756cc · b6756cc
1 parent bc674b4
commit b6756cc
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 37 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -30,20 +30,16 @@ import { getImageUrl } from "~/utils/get-image-url";
     </Fragment>
   </Heading>
 
-  <CoverImgContainer>
-    <Fragment slot="image">
-      <CoverCanva src={getImageUrl("covers/opulento-v2")}>
-        {/* @ts-expect-error */}
-        <Opulento id="canva-container" client:load />
-      </CoverCanva>
+  <CoverCanva src={getImageUrl("covers/opulento-v2")}>
+    <Fragment slot="canva">
+      {/* @ts-expect-error */}
+      <Opulento id="canva-container" client:load />
     </Fragment>
     <Fragment slot="description">
-      <p class="small text-muted">
-        Opulento by
-        <Anchor href="https://troyni.com">Troy Ni</Anchor> on <Anchor
-          href="https://uvcanvas.com">uvcanvas.com</Anchor
-        >
-      </p>
+      Opulento by
+      <Anchor href="https://troyni.com">Troy Ni</Anchor> on <Anchor
+        href="https://uvcanvas.com">uvcanvas.com</Anchor
+      >
     </Fragment>
-  </CoverImgContainer>
+  </CoverCanva>
 </DefaultLayout>
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
@@ -11,7 +11,6 @@ import Heading from "~/layouts/default/components/heading.astro";
 import DefaultLayout from "~/layouts/default/index.astro";
 import Anchor from "~/ui/components/anchor.astro";
 import ConverCanva from "~/ui/components/conver-canva.astro";
-import CoverImgContainer from "~/ui/components/cover-img-container.astro";
 import { getImageUrl } from "~/utils/get-image-url";
 import ProjectPost from "./_components/project-post.astro";
 ---
@@ -25,20 +24,18 @@ import ProjectPost from "./_components/project-post.astro";
     </Fragment>
   </Heading>
 
-  <CoverImgContainer class="mb-9">
-    <Fragment slot="image">
-      <ConverCanva src={getImageUrl("covers/novatrix-v2")}>
-        {/* @ts-expect-error */}
-        <Novatrix id="canva-container" client:load />
-      </ConverCanva>
+  <ConverCanva class="mb-9" src={getImageUrl("covers/novatrix-v2")}>
+    <Fragment slot="canva">
+      {/* @ts-expect-error */}
+      <Novatrix id="canva-container" client:load />
     </Fragment>
     <Fragment slot="description">
       Novatrix by
       <Anchor href="https://troyni.com">Troy Ni</Anchor> on <Anchor
         href="https://uvcanvas.com">uvcanvas.com</Anchor
       >
     </Fragment>
-  </CoverImgContainer>
+  </ConverCanva>
 
   <div class="flex flex-col space-y-8">
     <ProjectPost

diff --git a/src/ui/components/conver-canva.astro b/src/ui/components/conver-canva.astro
@@ -1,6 +1,5 @@
 ---
 import { Image } from "@unpic/astro";
-import { Opulento } from "uvcanvas";
 import { getImagePlaceholder } from "~/utils/get-image-placeholder";
 import CoverImgContainer from "./cover-img-container.astro";
 import ImgFrame from "./img-frame.astro";
@@ -16,15 +15,9 @@ const placeholder = await getImagePlaceholder(src);
 
 <CoverImgContainer class={className}>
   <Fragment slot="image">
-    <ImgFrame class="aspect-[4/3] relative">
-      <slot id="canva-container" />
-      <a
-        id="image-link"
-        href={src}
-        target="_blank"
-        rel="noreferrer"
-        class="w-full h-full absolute inset-0"
-      >
+    <ImgFrame class="aspect-cover relative">
+      <slot name="canva" id="canva-container" />
+      <div id="image-container" class="w-full h-full absolute inset-0">
         <Image
           src={src}
           width={672}
@@ -33,9 +26,9 @@ const placeholder = await getImagePlaceholder(src);
           background={placeholder}
           priority
           fetchpriority="high"
-          class="aspect-[4/3] w-full h-full"
+          class="aspect-cover w-full h-full"
         />
-      </a>
+      </div>
     </ImgFrame>
   </Fragment>
   <Fragment slot="description">
@@ -51,9 +44,9 @@ const placeholder = await getImagePlaceholder(src);
       if ("querySelector" in target) {
         const canvas = (target as HTMLElement).querySelector("canvas");
         if (canvas) {
-          const imgLinkEl = document.getElementById("image-link");
-          if (imgLinkEl) {
-            imgLinkEl.style.opacity = "0";
+          const containerEl = document.getElementById("image-container");
+          if (containerEl) {
+            containerEl.style.opacity = "0";
           }
           observer.disconnect();
         }

diff --git a/src/ui/components/cover-img.astro b/src/ui/components/cover-img.astro
@@ -27,7 +27,7 @@ const placeholder = await getImagePlaceholder(src);
           background={placeholder}
           priority
           fetchpriority="high"
-          class="aspect-[4/3] w-full h-full"
+          class="aspect-cover w-full h-full"
         />
       </a>
     </ImgFrame>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -71,6 +71,9 @@ const config = {
         small: "0.75rem",
         tiny: "0.5rem",
       },
+      aspectRatio: {
+        cover: "4/3",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],