feat: add thumbhashes to images closes #6

components/Card.tsx

@@ -2,15 +2,15 @@ import { isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
 
 export function Card(
-  { link, title, image, backgroundSize = 100 }: {
+  { link, title, image, thumbnail, backgroundSize = 100 }: {
     backgroundSize?: number;
+    thumbnail?: string;
     link?: string;
     title?: string;
     image?: string;
   },
 ) {
   const backgroundStyle = {
-    backgroundImage: `url(${image})`,
     backgroundSize: "cover",
     boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
   };
@@ -25,20 +25,32 @@ export function Card(
     <a
       href={link}
       style={backgroundStyle}
-      class="text-white rounded-3xl shadow-md p-4 relative 
+      data-thumb={thumbnail}
+      class="text-white rounded-3xl shadow-md relative 
   lg:w-56 lg:h-56 
   sm:w-48 sm:h-48
   w-[37vw] h-[37vw]"
     >
-      {!image?.includes("placeholder.svg") && false &&
-        (
-          <img
-            class="absolute opacity-30 top-0 left-0 object-cover w-full h-full -z-10"
-            src={image}
-            style={{ filter: "blur(30px)" }}
-          />
-        )}
-      <div class="h-full flex flex-col justify-between relative z-10">
+      {true && (
+        <img
+          class="absolute rounded-3xl top-0 left-0 object-cover w-full h-full"
+          data-thumb-img
+          loading="lazy"
+          src={image || "/placeholder.svg"}
+        />
+      )}
+      <div
+        class="p-4 flex flex-col justify-between relative z-10"
+        style={{
+          outline: "solid 2px #141218",
+          borderRadius: "1.4rem",
+          height: "calc(100% + 0.5px)",
+          width: "calc(100% + 0.5px)",
+          marginTop: "-0.5px",
+          marginLeft: "-0.5px",
+          boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
+        }}
+      >
         <div>
           {/* Recipe Card content */}
         </div>

components/Image.tsx

@@ -6,20 +6,34 @@ const Image = (
     class: string;
     src: string;
     alt?: string;
+    thumbnail?: string;
     width?: number | string;
     height?: number | string;
     style?: CSS.HtmlAttributes;
   },
 ) => {
   return (
-    <img
-      alt={props.alt}
-      style={props.style}
-      src={asset(props.src)}
-      width={props.width}
-      height={props.height}
-      class={props.class}
-    />
+    <span
+      style={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        zIndex: -1,
+      }}
+      data-thumb={props.thumbnail}
+    >
+      <img
+        data-thumb={props.thumbnail}
+        data-thumb-img
+        loading="lazy"
+        alt={props.alt}
+        style={props.style}
+        src={asset(props.src)}
+        width={props.width}
+        height={props.height}
+        class={props.class}
+      />
+    </span>
   );
 };
 

components/MovieCard.tsx

@@ -15,6 +15,7 @@ export function MovieCard(
   return (
     <Card
       title={movie.name}
+      thumbnail={movie.meta.thumbnail}
       image={imageUrl}
       link={`/${sublink}/${movie.id}`}
     />

components/RecipeCard.tsx

@@ -13,6 +13,7 @@ export function RecipeCard({ recipe }: { recipe: Recipe }) {
     <Card
       title={recipe.name}
       image={imageUrl}
+      thumbnail={recipe?.meta?.thumbnail}
       link={`/recipes/${recipe.id}`}
     />
   );

components/RecipeHero.tsx

@@ -12,7 +12,10 @@ export function RecipeHero(
     backlink: string;
     subline?: string[];
     editLink?: string;
-    data: { meta?: { image?: string; link?: string }; name: string };
+    data: {
+      meta?: { thumbnail?: string; image?: string; link?: string };
+      name: string;
+    };
   },
 ) {
   const { meta: { image } = {} } = data;
@@ -31,6 +34,7 @@ export function RecipeHero(
         (
           <Image
             src={imageUrl}
+            thumbnail={data.meta?.thumbnail}
             alt="Recipe Banner"
             style={{ objectPosition: "0% 25%" }}
             class="absolute object-cover w-full h-full -z-10"