feat: refactor whole bunch of stuff

components/Card.tsx

@@ -11,13 +11,13 @@ export function Card(
     rating,
     title,
     image,
-    thumbnail,
+    thumbhash,
     backgroundColor,
     backgroundSize = 100,
   }: {
     backgroundSize?: number;
     backgroundColor?: string;
-    thumbnail?: string;
+    thumbhash?: string;
     link?: string;
     title?: string;
     image?: string;
@@ -39,22 +39,20 @@ export function Card(
     <Link
       href={link}
       style={backgroundStyle}
-      data-thumb={thumbnail}
+      data-thumb={thumbhash}
       class="text-white rounded-3xl shadow-md relative
   lg:w-56 lg:h-56 
   sm:w-48 sm:h-48
   w-[37vw] h-[37vw]"
     >
-      {true && (
-        <span class="absolute top-0 left-0 overflow-hidden rounded-3xl w-full h-full">
-          <img
-            class="w-full h-full object-cover"
-            data-thumb-img
-            loading="lazy"
-            src={image || "/placeholder.svg"}
-          />
-        </span>
-      )}
+      <span class="absolute top-0 left-0 overflow-hidden rounded-3xl w-full h-full">
+        <img
+          class="w-full h-full object-cover"
+          data-thumb-img
+          loading="lazy"
+          src={image || "/placeholder.svg"}
+        />
+      </span>
       <div
         class="p-4 flex flex-col justify-between relative z-10"
         style={{
@@ -97,7 +95,7 @@ export function Card(
 export function ResourceCard(
   { res, sublink = "movies" }: { sublink?: string; res: GenericResource },
 ) {
-  const img = res?.content?.image || res?.content?.cover;
+  const img = res?.image?.url;
 
   const imageUrl = img
     ? `/api/images?image=${img}&width=200&height=200`
@@ -105,11 +103,12 @@ export function ResourceCard(
 
   return (
     <Card
-      title={res.content?.name || res.content?.itemReviewed?.name || res.content?.headline ||
+      title={res.content?.name || res.content?.itemReviewed?.name ||
+        res.content?.headline ||
         res?.name}
-      backgroundColor={res.meta?.average}
+      backgroundColor={res.image?.average}
+      thumbhash={res.image?.blurhash}
       rating={parseRating(res.content?.reviewRating?.ratingValue)}
-      thumbnail={res.cover}
       image={imageUrl}
       link={`/${sublink}/${res.name.replace(/\.md$/g, "")}`}
     />

components/Image.tsx

@@ -34,7 +34,7 @@ const Image = (
     class: string;
     src: string;
     alt?: string;
-    thumbnail?: string;
+    thumbhash?: string;
     fill?: boolean;
     width?: number | string;
     height?: number | string;
@@ -55,19 +55,17 @@ const Image = (
         height: props.fill ? "100%" : "",
         zIndex: props.fill ? -1 : "",
       }}
-      data-thumb={props.thumbnail}
+      data-thumb={props.thumbhash}
     >
       <img
-        data-thumb={props.thumbnail}
         data-thumb-img
         loading="lazy"
         alt={props.alt}
         style={props.style}
         srcset={responsiveAttributes.srcset}
         sizes={responsiveAttributes.sizes}
-        src={`/api/images?image=${asset(props.src)}${
-          props.width ? `&width=${props.width}` : ""
-        }${props.height ? `&height=${props.height}` : ""}`}
+        src={`/api/images?image=${asset(props.src)}${props.width ? `&width=${props.width}` : ""
+          }${props.height ? `&height=${props.height}` : ""}`}
         width={props.width}
         height={props.height}
         class={props.class}

components/PageHero.tsx

@@ -6,23 +6,22 @@ import { IconArrowNarrowLeft } from "@components/icons.tsx";
 import { IconEdit } from "@components/icons.tsx";
 import { useContext } from "preact/hooks";
 
-const HeroContext = createContext<{ image?: string; thumbnail?: string }>({
+const HeroContext = createContext<{ image?: string; thumbhash?: string }>({
   image: undefined,
-  thumbnail: undefined,
+  thumbhash: undefined,
 });
 
 function Wrapper(
-  { children, image, thumbnail }: {
+  { children, image, thumbhash }: {
     children: ComponentChildren;
     image?: string;
-    thumbnail?: string;
+    thumbhash?: string;
   },
 ) {
   return (
     <div
-      class={`flex justify-between flex-col relative w-full ${
-        image ? "min-h-[400px]" : "min-h-[200px]"
-      } rounded-3xl overflow-hidden`}
+      class={`flex justify-between flex-col relative w-full ${image ? "min-h-[400px]" : "min-h-[200px]"
+        } rounded-3xl overflow-hidden`}
     >
       <HeroContext.Provider value={{ image }}>
         {image &&
@@ -30,7 +29,7 @@ function Wrapper(
             <Image
               fill
               src={image}
-              thumbnail={thumbnail}
+              thumbhash={thumbhash}
               alt="Recipe Banner"
               // style={{ objectPosition: "0% 25%" }}
               class="absolute object-cover w-full h-full -z-10"
@@ -52,9 +51,8 @@ function Title(
   return (
     <OuterTag
       href={link}
-      class={`${
-        ctx.image ? "noisy-gradient" : ""
-      } after:opacity-90 flex gap-4 items-center ${ctx.image ? "pt-12" : ""}`}
+      class={`${ctx.image ? "noisy-gradient" : ""
+        } after:opacity-90 flex gap-4 items-center ${ctx.image ? "pt-12" : ""}`}
     >
       <h2
         class="flex gap-2 items-center text-4xl font-bold z-10"
@@ -83,9 +81,8 @@ function EditLink({ href }: { href: string }) {
   const ctx = useContext(HeroContext);
   return (
     <a
-      class={`px-4 py-2 ${
-        ctx.image ? "bg-gray-300 text-gray-800" : "text-gray-200"
-      } rounded-lg flex gap-1 items-center`}
+      class={`px-4 py-2 ${ctx.image ? "bg-gray-300 text-gray-800" : "text-gray-200"
+        } rounded-lg flex gap-1 items-center`}
       href={href}
     >
       <IconEdit class="w-5 h-5" />