feat: display articles

src/components/HeroCard.astro

@@ -1,5 +1,5 @@
 ---
-import markdownToText from "@helpers/markdownToText";
+import { markdownToText,readDuration } from "@helpers/markdown";
 import { Card } from "./card";
 import { useTranslatedPath, useTranslations } from "@i18n/utils";
 import Image from "@components/Image.astro";
@@ -30,7 +30,7 @@ const link = translatePath(`/${collection}/${id.split("/")[0]}`);
 <Card
   classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}>
   <Card.Content classes="px-8 py-7 order-last xs:order-first">
-    {date && (<Card.Metadata date={date} />)}
+    {(date || body)&& <Card.Metadata date={date} readDuration={readDuration(body)} />}
     <Card.Title classes="text-4xl flex items-center gap-2">
       {
         icon &&

src/components/SmallCard.astro

@@ -1,5 +1,5 @@
 ---
-import markdownToText from "@helpers/markdownToText";
+import { markdownToText } from "@helpers/markdown";
 import { useTranslatedPath } from "@i18n/utils";
 import type { InferEntrySchema } from "astro:content";
 

src/components/card/Metadata.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   export let date: string | Date;
+  export let readDuration: string | undefined;
 
   const toDate = (d: string | Date) =>
     typeof d === "string" ? new Date(d) : d;
@@ -22,4 +23,8 @@
     <time class="text-sm text-neutral" datetime={iso(date)}
       >{formatDate(date)}</time>
   {/if}
+
+  {#if readDuration}
+    <div class="text-sm text-neutral">{readDuration} mins read</div>
+  {/if}
 </div>

src/components/resources/Article.astro

@@ -0,0 +1,25 @@
+---
+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?.headline}</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>
+<div set:html={markdownToHtml(resource?.content?.articleBody)} />

src/components/resources/Display.astro

@@ -0,0 +1,13 @@
+---
+import Recipe from "./Recipe.astro";
+import Article from "./Article.astro";
+const { resource } = Astro.props;
+const type = resource?.content?._type ?? "unknown";
+---
+
+{type === "Recipe" && <Recipe resource={resource} />}
+{type === "Article" && <Article resource={resource} />}
+
+{type === "unknown" && <div>
+  <h3>Unknown resource type</h3>
+</div>}

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>