feat: correctly cache images with redis

components/Card.tsx

@@ -0,0 +1,29 @@
+import { Recipe } from "../lib/recipes.ts";
+
+export function Card(
+  { link, title, image }: { link?: string; title?: string; image?: string },
+) {
+  return (
+    <a
+      href={link}
+      style={{
+        backgroundImage: `url(${image})`,
+        backgroundSize: "cover",
+      }}
+      class="bg-gray-900 text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
+  lg:w-56 lg:h-56 
+  sm:w-40 sm:h-40 
+  w-32 h-32"
+    >
+      <div class="h-full flex flex-col justify-between relative z-10">
+        <div>
+          {/* Recipe Card content */}
+        </div>
+        <div class="mt-2">
+          {title}
+        </div>
+      </div>
+      <div class="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black to-transparent" />
+    </a>
+  );
+}

components/RecipeCard.tsx

@@ -1,29 +1,18 @@
-import { Recipe } from "../lib/recipes.ts";
+import { Card } from "@components/Card.tsx";
+import { Recipe } from "@lib/recipes.ts";
 
 export function RecipeCard({ recipe }: { recipe: Recipe }) {
+  const { meta: { image = "Recipes/images/placeholder.jpg" } = {} } = recipe;
+
+  const imageUrl = image.startsWith("Recipes/images/")
+    ? `/api/images?image=${image}&width=200&height=200`
+    : image;
+
   return (
-    <a
-      href={`/recipes/${recipe.id}`}
-      style={{
-        backgroundImage: `url(${
-          recipe?.meta?.image || "/api/recipes/images/placeholder.jpg"
-        }?width=200&height=200)`,
-        backgroundSize: "cover",
-      }}
-      class="bg-gray-900 text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
-  lg:w-56 lg:h-56 
-  sm:w-40 sm:h-40 
-  w-32 h-32"
-    >
-      <div class="h-full flex flex-col justify-between relative z-10">
-        <div>
-          {/* Recipe Card content */}
-        </div>
-        <div class="mt-2">
-          {recipe.name}
-        </div>
-      </div>
-      <div class="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black to-transparent" />
-    </a>
+    <Card
+      title={recipe.name}
+      image={imageUrl}
+      link={`/recipes/${recipe.id}`}
+    />
   );
 }

components/RecipeHero.tsx

@@ -1,10 +1,16 @@
-import { Recipe } from "../lib/recipes.ts";
+import { Recipe } from "@lib/recipes.ts";
 
 export function RecipeHero({ recipe }: { recipe: Recipe }) {
+  const { meta: { image = "Recipes/images/placeholder.jpg" } = {} } = recipe;
+
+  const imageUrl = image.startsWith("Recipes/images/")
+    ? `/api/images?image=${image}&width=800`
+    : image;
+
   return (
     <div class="relative w-full h-[400px] rounded-3xl overflow-hidden bg-black">
       <img
-        src={recipe?.meta?.image + "?width=800"}
+        src={imageUrl}
         alt="Recipe Banner"
         class="object-cover w-full h-full"
       />
@@ -18,11 +24,11 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
         </a>
       </div>
 
-      <div
-        class="absolute inset-x-0 bottom-0 py-4 px-8 py-8"
-        style={{ background: "linear-gradient(#0000, #fff9)" }}
-      >
-        <h2 class="text-4xl font-bold mt-4" style={{ color: "#1F1F1F" }}>
+      <div class="absolute inset-x-0 bottom-0 py-4 px-8 py-8 noisy-gradient">
+        <h2
+          class="relative text-4xl font-bold mt-4 z-10"
+          style={{ color: "#1F1F1F" }}
+        >
           {recipe.name}
         </h2>
       </div>