add cover canva

src/pages/index.astro

@@ -4,7 +4,9 @@ import { Opulento } from "uvcanvas";
 import Heading from "~/layouts/default/components/heading.astro";
 import DefaultLayout from "~/layouts/default/index.astro";
 import Anchor from "~/ui/components/anchor.astro";
+import CoverCanva from "~/ui/components/conver-canva.astro";
 import CoverImgContainer from "~/ui/components/cover-img-container.astro";
+import { getImageUrl } from "~/utils/get-image-url";
 ---
 
 <DefaultLayout title="Ricardo Q. Bazan | Software Engineer">
@@ -28,9 +30,12 @@ import CoverImgContainer from "~/ui/components/cover-img-container.astro";
     </Fragment>
   </Heading>
 
-  <CoverImgContainer class="mb-9">
+  <CoverImgContainer>
     <Fragment slot="image">
-      <Opulento client:load />
+      <CoverCanva src={getImageUrl("covers/opulento-v2")}>
+        {/* @ts-expect-error */}
+        <Opulento id="canva-container" client:load />
+      </CoverCanva>
     </Fragment>
     <Fragment slot="description">
       <p class="small text-muted">

src/pages/projects/index.astro

@@ -10,7 +10,9 @@ import { Novatrix } from "uvcanvas";
 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,7 +27,10 @@ import ProjectPost from "./_components/project-post.astro";
 
   <CoverImgContainer class="mb-9">
     <Fragment slot="image">
-      <Novatrix client:load />
+      <ConverCanva src={getImageUrl("covers/novatrix-v2")}>
+        {/* @ts-expect-error */}
+        <Novatrix id="canva-container" client:load />
+      </ConverCanva>
     </Fragment>
     <Fragment slot="description">
       Novatrix by

src/ui/components/conver-canva.astro

@@ -0,0 +1,68 @@
+---
+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";
+
+interface Props {
+  src: string;
+  class?: string;
+}
+
+const { src, class: className } = Astro.props;
+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"
+      >
+        <Image
+          src={src}
+          width={672}
+          height={504}
+          placeholder="blurhash"
+          background={placeholder}
+          priority
+          fetchpriority="high"
+          class="aspect-[4/3] w-full h-full"
+        />
+      </a>
+    </ImgFrame>
+  </Fragment>
+  <Fragment slot="description">
+    <slot name="description" />
+  </Fragment>
+</CoverImgContainer>
+
+<script>
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      const { target } = mutation;
+
+      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";
+          }
+          observer.disconnect();
+        }
+      }
+    });
+  });
+
+  const containerEl = document.getElementById("canva-container");
+  if (containerEl) {
+    observer.observe(containerEl, { childList: true, subtree: true });
+  }
+</script>

src/ui/components/cover-img-container.astro

@@ -1,5 +1,6 @@
 ---
 import { cn } from "~/utils/cn";
+import ImgFrame from "./img-frame.astro";
 
 interface Props {
   description?: string;
@@ -11,9 +12,7 @@ const { class: className } = Astro.props;
 
 <div class={cn(className, "flex flex-col items-center")}>
   <div class="select-none w-full mb-3">
-    <div class="md:border-8 border-[6px] aspect-[4/3]">
-      <slot name="image" />
-    </div>
+    <slot name="image" />
   </div>
   <p class="small text-muted">
     <slot name="description" />

src/ui/components/cover-img.astro

@@ -2,6 +2,7 @@
 import { Image } from "@unpic/astro";
 import { getImagePlaceholder } from "~/utils/get-image-placeholder";
 import CoverImgContainer from "./cover-img-container.astro";
+import ImgFrame from "./img-frame.astro";
 
 interface Props {
   src: string;
@@ -17,16 +18,19 @@ const placeholder = await getImagePlaceholder(src);
 
 <CoverImgContainer class={className}>
   <Fragment slot="image">
-    <a href={src} target="_blank" rel="noreferrer" class="w-full h-full">
-      <Image
-        {...otherProps}
-        src={src}
-        placeholder="blurhash"
-        background={placeholder}
-        priority
-        fetchpriority="high"
-      />
-    </a>
+    <ImgFrame>
+      <a href={src} target="_blank" rel="noreferrer" class="w-full h-full">
+        <Image
+          {...otherProps}
+          src={src}
+          placeholder="blurhash"
+          background={placeholder}
+          priority
+          fetchpriority="high"
+          class="aspect-[4/3] w-full h-full"
+        />
+      </a>
+    </ImgFrame>
   </Fragment>
   <Fragment slot="description">
     <slot name="description" />

src/ui/components/img-frame.astro

@@ -0,0 +1,13 @@
+---
+import { cn } from "~/utils/cn";
+
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<div class={cn(className, "md:border-8 border-[6px]")}>
+  <slot />
+</div>