feat: add thumbhash loading to image

2024-04-06 20:32:32 +02:00
parent 82eb0657e2
commit 5d59e2171d
7 changed files with 358 additions and 862 deletions
--- a/src/components/HeroCard.astro
+++ b/src/components/HeroCard.astro
@ -48,6 +48,7 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
    cover && (
      <a href={link}>
        <Image
+          hash
          src={cover}
          alt={"cover for " + title}
          class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@ -6,10 +6,32 @@ interface Props {
  alt: string;
  class?: string;
  caption?: string;
+  hash?: boolean;
  maxWidth?: number;
 }
+import { rgbaToThumbHash } from "thumbhash";
+import sharp from "sharp";

-const { src: image, alt, maxWidth } = Astro.props;
+const { src: image, hash = true, alt, maxWidth } = Astro.props;
+
+let thumbhash = "";
+
+if (hash) {
+  const scaleFactor = 100 / Math.max(image.width, image.height);
+
+  const smallWidth = Math.floor(image.width * scaleFactor);
+  const smallHeight = Math.floor(image.height * scaleFactor);
+
+  const smallImg = await sharp(image.fsPath)
+    .resize(smallWidth, smallHeight)
+    .withMetadata()
+    .raw()
+    .ensureAlpha()
+    .toBuffer();
+
+  const buffer = rgbaToThumbHash(smallWidth, smallHeight, smallImg);
+  thumbhash = Buffer.from(buffer).toString("base64");
+}

 const sizes = [
  {
@ -33,6 +55,8 @@ const sizes = [
 <AstroImage
  src={image}
  alt={alt}
+  data-thumbhash={thumbhash}
+  pictureAttributes={{ class: hash ? "block h-full" : "" }}
  class={Astro.props.class}
  widths={sizes.map((size) => size.width)}
  sizes={sizes
--- a/src/components/Max.astro
+++ b/src/components/Max.astro
@ -13,7 +13,7 @@ const t = useTranslations(Astro.url);
  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid grid-cols-[250px_1fr] h-[180px] mt-8"
 >
  <div class="image">
-    <Image src={MaxImg} alt="its mee" maxWidth={700} />
+    <Image src={MaxImg} alt="its mee" hash={false} maxWidth={700} />
    <div class="eye right">
      <GoogleyEye client:load />
    </div>
--- a/src/components/Thumbhash.astro
+++ b/src/components/Thumbhash.astro
@ -0,0 +1,46 @@
+<script>
+  import { thumbHashToRGBA, rgbaToDataURL } from "thumbhash";
+
+  function show(img: HTMLImageElement) {
+    img.style.opacity = "1";
+    img.style.filter = "blur(0px)";
+    setTimeout(() => {
+      img.parentNode.style.background = "";
+    }, 600);
+  }
+
+  document.querySelectorAll("[data-thumbhash]").forEach((entry) => {
+    const parent = entry?.parentNode as HTMLPictureElement;
+    const img = entry as HTMLImageElement;
+
+    if (parent?.nodeName !== "PICTURE") return;
+
+    const hash = img.getAttribute("data-thumbhash");
+    if (!hash) return;
+
+    const decodedString = atob(hash);
+
+    // Create Uint8Array from decoded string
+    const buffer = new Uint8Array(decodedString.length);
+    for (let i = 0; i < decodedString.length; i++) {
+      buffer[i] = decodedString.charCodeAt(i);
+    }
+
+    const image = thumbHashToRGBA(buffer);
+    const dataURL = rgbaToDataURL(image.w, image.h, image.rgba);
+
+    parent.style.background = `url(${dataURL})`;
+    parent.style.backgroundSize = "cover";
+
+    img.style.opacity = "0";
+    img.style.filter = "blur(5px)";
+    img.style.transition = "opacity 0.6s ease, filter 0.8s ease";
+
+    const sources = parent.querySelectorAll("source");
+
+    img.onload = () => show(img);
+    for (const source of sources) {
+      source.addEventListener("load", () => show(img));
+    }
+  });
+</script>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -8,6 +8,7 @@ interface Props {
 }

 const { title, width = "compact" } = Astro.props;
+import Thumbhash from "@components/Thumbhash.astro";
 ---

 <!doctype html>
@ -126,6 +127,7 @@ const { title, width = "compact" } = Astro.props;
    <footer>
      <LanguagePicker />
    </footer>
+    <Thumbhash />
    <style>
      .layout-compact {
        max-width: 600px;