From d9a2f638659142cf420c8f616da4e59477e0e4b5 Mon Sep 17 00:00:00 2001
From: Max Richter <git@max-richter.dev>
Date: Wed, 22 Oct 2025 16:24:04 +0200
Subject: [PATCH] feat: show recipe image on page

---
 src/components/Image.astro                         |  1 +
 src/helpers/image.ts                               |  4 ++++
 src/helpers/memorium.ts                            | 13 +++++++++++++
 .../resources/[resourceType]/[resourceName].astro  | 11 ++++++++---
 src/pages/resources/[resourceType]/index.astro     | 14 +-------------
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/Image.astro b/src/components/Image.astro
index f0f4218..f69f8ba 100644
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@@ -16,6 +16,7 @@ interface Props {
 }
 
 async function checkImage(image: ImageMetadata) {
+console.log("Checking image: ", image);
   const src = image.src;
   try {
     if (src.startsWith("/@fs") || src.startsWith("/_astro")) return true;
diff --git a/src/helpers/image.ts b/src/helpers/image.ts
index 0441ed4..ac4c53b 100644
--- a/src/helpers/image.ts
+++ b/src/helpers/image.ts
@@ -15,6 +15,8 @@ export async function generateThumbHash(
     const imagePath = (image as ImageMetadata & { fsPath: string }).fsPath ??
       image.src;
 
+    if (!imagePath) return;
+
     let sp;
     if (imagePath.startsWith("https://") || imagePath.startsWith("http://")) {
       const res = await fetch(imagePath);
@@ -72,6 +74,8 @@ export async function getExifData(image: ImageMetadata) {
   const imagePath = (image as ImageMetadata & { fsPath: string }).fsPath ??
     image.src;
 
+  if (!imagePath) return undefined;
+
   try {
     let buffer: ArrayBuffer;
     if (imagePath.startsWith("https://") || imagePath.startsWith("http://")) {
diff --git a/src/helpers/memorium.ts b/src/helpers/memorium.ts
index 956f5cb..f3f820d 100644
--- a/src/helpers/memorium.ts
+++ b/src/helpers/memorium.ts
@@ -44,3 +44,16 @@ export async function listResource(
     return;
   }
 }
+
+export function getImageUrl(input: string): string {
+  if (!input) {
+    return;
+  }
+  if (input.startsWith("https://") || input.startsWith("http://")) {
+    return input;
+  }
+  if (input.startsWith("/")) {
+    return `https://marka.max-richter.dev${input}`;
+  }
+  return `https://marka.max-richter.dev/${input}`;
+}
diff --git a/src/pages/resources/[resourceType]/[resourceName].astro b/src/pages/resources/[resourceType]/[resourceName].astro
index fdcd113..9e618f1 100644
--- a/src/pages/resources/[resourceType]/[resourceName].astro
+++ b/src/pages/resources/[resourceType]/[resourceName].astro
@@ -4,6 +4,7 @@ import { useTranslatedPath } from "@i18n/utils";
 import * as memorium from "@helpers/memorium";
 import { resources as resourceTypes } from "../resources.ts";
 import markdownToText from "@helpers/markdownToText";
+import Image from "@components/Image.astro";
 
 const { resourceType, resourceName } = Astro?.params;
 
@@ -57,9 +58,13 @@ const instructions = resource?.content?.recipeInstructions || [];
     </div>
   </div>
 
-  <h1>{resource?.content?.name}</h1>
+  <!-- <pre>{JSON.stringify(resource, null, 2)}</pre> -->
+  <h1 class="text-4xl">{resource?.content?.name}</h1>
+  <div>
+    {resource?.content?.image && <Image hash src={{src: memorium.getImageUrl(resource.content.image)}} alt="Cover for {resource?.content?.name}" class="rounded-2xl overflow-hidden" pictureClass="rounded-2xl" />}
+  </div>
   <p>{resource?.content?.description}</p>
-  <h2>Ingredients</h2>
+  <h2 class="text-2xl">Ingredients</h2>
   <ul>
     {
       ingredients.map((ingredient) => (
@@ -68,7 +73,7 @@ const instructions = resource?.content?.recipeInstructions || [];
     }
   </ul>
 
-  <h2>Steps</h2>
+  <h2 class="text-2xl">Steps</h2>
   <ol>
     {
       instructions.map((ingredient) => (
diff --git a/src/pages/resources/[resourceType]/index.astro b/src/pages/resources/[resourceType]/index.astro
index 1b47027..0218f05 100644
--- a/src/pages/resources/[resourceType]/index.astro
+++ b/src/pages/resources/[resourceType]/index.astro
@@ -28,18 +28,6 @@ export async function getStaticPaths() {
   });
 }
 
-function getImageUrl(input: string): string {
-  if (!input) {
-    return;
-  }
-  if (input.startsWith("https://") || input.startsWith("http://")) {
-    return input;
-  }
-  if (input.startsWith("/")) {
-    return `https://marka.max-richter.dev${input}`;
-  }
-  return `https://marka.max-richter.dev/${input}`;
-}
 ---
 
 <Layout title="Max Richter">
@@ -54,7 +42,7 @@ function getImageUrl(input: string): string {
             data: {
               title: resource.content.name,
               cover: {
-                src: getImageUrl(resource.content.image),
+                src: memorium.getImageUrl(resource.content.image),
               },
             },
           }}