fix: some image loading

src/components/HeroCard.astro

@@ -15,7 +15,7 @@ interface Props {
 }
 
 const {
-  data: { title, cover, icon, date, reviewRating },
+  data: { title, cover, icon, date, rating },
   collection,
   body,
   id,
@@ -28,11 +28,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]" : ""}`}>
+  classes={`max-h-250px 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 || reviewRating !== undefined) && (
-      <Card.Metadata date={date} readDuration={readDuration(body)} rating={reviewRating} />
+      (date || body || rating !== undefined) && (
+      <Card.Metadata date={date} readDuration={readDuration(body)} rating={rating} />
       )
     }
     <Card.Title classes="text-4xl flex items-center gap-2">

src/components/Image.astro

@@ -15,12 +15,12 @@ interface Props {
 }
 
 async function checkImage(image: ImageMetadata) {
-  const src = image.src;
+  const src = typeof image === "string" ? image : image.src;
   if (!src) return false;
   try {
     if (src.startsWith("/@fs") || src.startsWith("/_astro")) return true;
     const res = await inferRemoteSize(src);
-    if (res.format) {
+    console.log(res)
       image.format = res.format;
       return true;
     } else {

src/components/card/Metadata.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   export let date: string | Date;
-  export let readDuration: string | undefined;
+  export let readDuration: number | undefined;
+  export let rating: string | number | undefined;
 
   const toDate = (d: string | Date) =>
     typeof d === "string" ? new Date(d) : d;
@@ -10,6 +11,13 @@
     return isNaN(v.getTime()) ? "" : v.toISOString();
   };
 
+  function formatRating(rating: string | number) {
+    if (typeof rating === "number") {
+      return "⭐".repeat(rating);
+    }
+    return rating;
+  }
+
   const formatDate = (d: string | Date) => {
     try {
       return new Intl.DateTimeFormat("de-DE", {
@@ -29,7 +37,13 @@
       >{formatDate(date)}</time>
   {/if}
 
-  {#if readDuration}
-    <div class="text-sm text-neutral">{readDuration} mins read</div>
+  {#if typeof readDuration === "number"}
+    {#if readDuration > 1}
+      <div class="text-sm text-neutral">{readDuration} mins read</div>
+    {/if}
+  {/if}
+
+  {#if rating}
+    <div class="text-sm text-neutral">{formatRating(rating)}</div>
   {/if}
 </div>

src/components/resources/Display.astro

@@ -2,7 +2,6 @@
 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";
@@ -20,15 +19,7 @@ const type = resource?.content?._type ?? "unknown";
   )
 }
 
-<details>
-  <summary><IconCode class="inline"/></summary>
+<details >
+  <summary class="flex"><span class="i-tabler-code w-6 h-6 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

@@ -21,7 +21,7 @@ const { resource } = Astro.props;
       />
     )
   }
-  <h1 class="text-4xl">{resource?.content?.itemReviewed?.name || "Unknown Name"}</h1>
+  <h1 class="text-4xl mb-4">{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)} />