feat: show recipe image on page

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