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) =>
+  const formatDate = (d: string | Date) => {
-    new Intl.DateTimeFormat("de-DE", {
+    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>
+{
+  type === "unknown" && (
+    <div>
       <h3>Unknown resource type</h3>
-</div>}
+    </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>

src/pages/resources/[resourceType]/index.astro

@@ -21,17 +21,14 @@ export async function getStaticPaths() {
     return {
       params: {
         resourceType: type.id,
-        resourceName: "Recipe",
+        resourceName: type.data.title,
       },
     };
   });
 }
 
 function isValidResource(res) {
-  if(!res.content) return false;
+  return !!res?.content?._type;
-  if (res?.content?.name) return true;
-  if (res?.content?.headline) return true;
-  return false;
 }
 ---
 
@@ -45,8 +42,9 @@ function isValidResource(res) {
             collection: "resources/" + resourceType,
             id: resource.name.replace(/\.md$/, ""),
             data: {
-              title: resource.content.name ?? resource.content.headline,
+              title: resource?.content?.name ?? resource?.content?.headline ?? resource.content?.itemReviewed?.name,
               date: resource?.content?.datePublished,
+              rating: resource?.content?.reviewRating,
               cover: {
                 src: memorium.getImageUrl(resource.content.image),
               },
@@ -56,4 +54,3 @@ function isValidResource(res) {
       ))
   }
 </Layout>
-</Layout>

src/pages/resources/resources.ts

@@ -3,6 +3,7 @@ const collection = "resources";
 export type ResourceType = {
   id: string;
   collection: string;
+  body?: string;
   data: {
     title: string;
     icon: string;
@@ -37,24 +38,22 @@ const recipes = {
   },
 };
 
-// const movies = {
+const movies = {
-//   id: "Movies",
+  id: "movies",
-//   collection,
+  collection,
-//   body: "Movies",
+  data: {
-//   data: {
+    title: "Movies",
-//     title: "Movies",
+    icon: "🎥",
-//     icon: "🎥",
+  },
-//   },
+};
-// };
 
-// const series = {
+const series = {
-//   id: "Series",
+  id: "series",
-//   collection,
+  collection,
-//   body: "Series",
+  data: {
-//   data: {
+    title: "Series",
-//     title: "Series",
+    icon: "📺",
-//     icon: "📺",
+  },
-//   },
+};
-// };
 
-export const resources: ResourceType[] = [recipes, articles];
+export const resources: ResourceType[] = [recipes, articles, movies, series];