feat: show recipe image on page

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;

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://")) {

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}`;
+}

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) => (

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),
               },
             },
           }}