feat: some shit

src/components/Image.astro

@@ -85,7 +85,7 @@ const sizes = thumbnail
       pictureAttributes={{
         class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
       }}
-      class={Astro.props.class}
+      class={`${Astro.props.class} h-full w-full`}
       widths={sizes.map((size) => size.width)}
       sizes={sizes
         .map((size) => `${size.media || "100vw"} ${size.width}px`)

src/components/resources/Review.astro

@@ -5,6 +5,13 @@ import Image from "@components/Image.astro";
 import type { ImageMetadata } from "astro";
 
 const { resource } = Astro.props;
+
+function formatRating(rating: string | number) {
+  if (typeof rating === "number") {
+    return "⭐".repeat(rating);
+  }
+  return rating;
+}
 ---
 
 <div>
@@ -21,8 +28,13 @@ const { resource } = Astro.props;
       />
     )
   }
-  <h1 class="text-4xl mb-4">{resource?.content?.itemReviewed?.name || "Unknown Name"}</h1>
-  { resource?.content?.reviewRating?.ratingValue !==  undefined && <div>{resource?.content?.reviewRating?.ratingValue}</div>}
+  <h1 class="text-4xl mb-4">
+    {resource?.content?.itemReviewed?.name || "Unknown Name"}
+  </h1>
+  {
+    resource?.content?.reviewRating?.ratingValue !== undefined && (
+      <div>{formatRating(resource?.content?.reviewRating?.ratingValue)}</div>
+    )
+  }
   <div set:html={markdownToHtml(resource?.content?.reviewBody)} />
-
 </div>