feat: add uvcanvas (#90)

package.json

@@ -34,7 +34,8 @@
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
-    "typewriter-effect": "^2.21.0"
+    "typewriter-effect": "^2.21.0",
+    "uvcanvas": "^0.2.2"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",

src/pages/index.astro

@@ -1,8 +1,12 @@
 ---
 import Typewriter from "typewriter-effect";
+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">
@@ -25,4 +29,21 @@ import Anchor from "~/ui/components/anchor.astro";
       found my personal place on the internet.
     </Fragment>
   </Heading>
+
+  <CoverImgContainer>
+    <Fragment slot="image">
+      <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">
+        Opulento by
+        <Anchor href="https://troyni.com">Troy Ni</Anchor> on <Anchor
+          href="https://uvcanvas.com">uvcanvas.com</Anchor
+        >
+      </p>
+    </Fragment>
+  </CoverImgContainer>
 </DefaultLayout>

src/pages/projects/index.astro

@@ -6,10 +6,12 @@ import {
   PackageIcon,
   Edit2Icon as PencilIcon,
 } from "astro-feather";
+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 CoverImg from "~/ui/components/cover-img.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";
 ---
@@ -23,26 +25,20 @@ import ProjectPost from "./_components/project-post.astro";
     </Fragment>
   </Heading>
 
-  <CoverImg
-    src={getImageUrl("covers/projects-v3")}
-    alt="Abstract art"
-    width={672}
-    height={504}
-    class="mb-9"
-  >
+  <CoverImgContainer class="mb-9">
+    <Fragment slot="image">
+      <ConverCanva src={getImageUrl("covers/novatrix-v2")}>
+        {/* @ts-expect-error */}
+        <Novatrix id="canva-container" client:load />
+      </ConverCanva>
+    </Fragment>
     <Fragment slot="description">
-      <p class="small text-muted">
-        Photo by
-        <Anchor
-          href="https://unsplash.com/@sebastiansvenson?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
-          >Sebastian Svenson</Anchor
-        > on <Anchor
-          href="https://unsplash.com/photos/blue-and-white-round-illustration-LpbyDENbQQg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
-          >Unsplash</Anchor
-        >
-      </p>
+      Novatrix by
+      <Anchor href="https://troyni.com">Troy Ni</Anchor> on <Anchor
+        href="https://uvcanvas.com">uvcanvas.com</Anchor
+      >
     </Fragment>
-  </CoverImg>
+  </CoverImgContainer>
 
   <div class="flex flex-col space-y-8">
     <ProjectPost

src/pages/uses.astro

@@ -22,8 +22,9 @@ import DefaultLayout from "../layouts/default/index.astro";
     height={504}
     alt="My office 2021"
     class="mb-9"
-    description="My home office"
-  />
+  >
+    <Fragment slot="description">My home office</Fragment>
+  </CoverImg>
   <h3 class="h3 mb-8">Desktop</h3>
   <ul class="ml-3 space-y-2">
     <Li>Macbook Pro M2 14inch</Li>

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

@@ -0,0 +1,20 @@
+---
+import { cn } from "~/utils/cn";
+import ImgFrame from "./img-frame.astro";
+
+interface Props {
+  description?: string;
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<div class={cn(className, "flex flex-col items-center")}>
+  <div class="select-none w-full mb-3">
+    <slot name="image" />
+  </div>
+  <p class="small text-muted">
+    <slot name="description" />
+  </p>
+</div>

src/ui/components/cover-img.astro

@@ -1,36 +1,38 @@
 ---
 import { Image } from "@unpic/astro";
-import { cn } from "~/utils/cn";
 import { getImagePlaceholder } from "~/utils/get-image-placeholder";
+import CoverImgContainer from "./cover-img-container.astro";
+import ImgFrame from "./img-frame.astro";
 
 interface Props {
   src: string;
   alt: string;
-  description?: string;
   class?: string;
   width: number;
   height: number;
 }
 
-const { class: className, src, description, ...otherProps } = Astro.props;
+const { class: className, src, ...otherProps } = Astro.props;
 const placeholder = await getImagePlaceholder(src);
 ---
 
-<div class={cn(className, "flex flex-col items-center")}>
-  <div class="select-none w-full mb-3">
-    <a href={src} target="_blank" rel="noreferrer">
-      <Image
-        {...otherProps}
-        src={src}
-        class="md:border-8 border-[6px] aspect-[4/3] w-full h-full"
-        placeholder="blurhash"
-        background={placeholder}
-        priority
-        fetchpriority="high"
-      />
-    </a>
-  </div>
-  <slot name="description">
-    <span class="small text-muted">{description}</span>
-  </slot>
-</div>
+<CoverImgContainer class={className}>
+  <Fragment slot="image">
+    <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" />
+  </Fragment>
+</CoverImgContainer>

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>

src/utils/get-image-placeholder.ts

@@ -4,7 +4,7 @@ import { encode } from "blurhash";
 import { transformImageUrl } from "./get-image-url";
 
 /**
- * @param src {string} - Cloudinary Image URL
+ * @param {string} src - Cloudinary Image URL
  * @returns {Promise<string>} - Blurhash Data URI
  */
 export async function getImagePlaceholder(src: string): Promise<string> {