feat: add movies and series to resources

src/components/HeroCard.astro

@@ -1,5 +1,5 @@
 ---
-import { markdownToText,readDuration } from "@helpers/markdown";
+import { markdownToText, readDuration } from "@helpers/markdown";
 import { Card } from "./card";
 import { useTranslatedPath, useTranslations } from "@i18n/utils";
 import Image from "@components/Image.astro";
@@ -15,7 +15,7 @@ interface Props {
 }
 
 const {
-  data: { title, cover, icon, date },
+  data: { title, cover, icon, date, reviewRating },
   collection,
   body,
   id,
@@ -30,7 +30,11 @@ 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 || body)&& <Card.Metadata date={date} readDuration={readDuration(body)} />}
+    {
+      (date || body || reviewRating !== undefined) && (
+      <Card.Metadata date={date} readDuration={readDuration(body)} rating={reviewRating} />
+      )
+    }
     <Card.Title classes="text-4xl flex items-center gap-2">
       {
         icon &&

src/components/card/Metadata.svelte

@@ -10,12 +10,17 @@
     return isNaN(v.getTime()) ? "" : v.toISOString();
   };
 
-  const formatDate = (d: string | Date) =>
-    new Intl.DateTimeFormat("de-DE", {
-      day: "2-digit",
-      month: "long",
-      year: "numeric",
-    }).format(toDate(d));
+  const formatDate = (d: string | Date) => {
+    try {
+      return new Intl.DateTimeFormat("de-DE", {
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+      }).format(toDate(d));
+    } catch (err) {
+      return "";
+    }
+  };
 </script>
 
 <div class="flex gap-5">

src/components/resources/Display.astro

@@ -1,13 +1,34 @@
 ---
+import { Code } from 'astro:components';
 import Recipe from "./Recipe.astro";
 import Article from "./Article.astro";
+import IconCode from "~icons/tabler/Code";
+import Review from "./Review.astro";
 const { resource } = Astro.props;
 const type = resource?.content?._type ?? "unknown";
 ---
 
 {type === "Recipe" && <Recipe resource={resource} />}
 {type === "Article" && <Article resource={resource} />}
+{type === "Review" && <Review resource={resource} />}
 
-{type === "unknown" && <div>
-  <h3>Unknown resource type</h3>
-</div>}
+{
+  type === "unknown" && (
+    <div>
+      <h3>Unknown resource type</h3>
+    </div>
+  )
+}
+
+<details>
+  <summary><IconCode class="inline"/></summary>
+  <Code code={JSON.stringify(resource, null, 2)} lang="json" theme="dark-plus" />
+</details>
+
+<style>
+  
+  summary::marker {
+    display: none;
+  }
+
+</style>

src/components/resources/Review.astro

@@ -0,0 +1,28 @@
+---
+import * as memorium from "@helpers/memorium";
+import { markdownToHtml } from "@helpers/markdown";
+import Image from "@components/Image.astro";
+import type { ImageMetadata } from "astro";
+
+const { resource } = Astro.props;
+---
+
+<div>
+  {
+    resource?.content?.image && (
+      <Image
+        hash
+        src={
+          { src: memorium.getImageUrl(resource.content.image) } as ImageMetadata
+        }
+        alt="Cover for {resource?.content?.name}"
+        class="rounded-2xl overflow-hidden"
+        pictureClass="rounded-2xl w-1/2 mr-4 mb-4 float-left"
+      />
+    )
+  }
+  <h1 class="text-4xl">{resource?.content?.itemReviewed?.name || "Unknown Name"}</h1>
+  { resource?.content?.reviewRating?.ratingValue !==  undefined && <div>{resource?.content?.reviewRating?.ratingValue}</div>}
+  <div set:html={markdownToHtml(resource?.content?.reviewBody)} />
+
+</div>