feat: display articles

src/components/resources/Recipe.astro

@@ -0,0 +1,32 @@
+---
+import * as memorium from "@helpers/memorium";
+import { markdownToHtml, markdownToText } from "@helpers/markdown";
+import Image from "@components/Image.astro";
+
+const { resource } = Astro.props
+const ingredients = resource?.content?.recipeIngredient || [];
+const instructions = resource?.content?.recipeInstructions || [];
+---
+
+<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 class="text-2xl">Ingredients</h2>
+<ul>
+  {
+    ingredients.map((ingredient) => (
+      <li set:html={markdownToHtml(ingredient)}/>
+    ))
+  }
+</ul>
+
+<h2 class="text-2xl">Steps</h2>
+<ol>
+  {
+    instructions.map((ingredient) => (
+      <li set:html={markdownToHtml(ingredient)}/>
+    ))
+  }
+</ol>