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>

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

@@ -14,6 +14,7 @@ export async function getStaticPaths() {
     const paths = await Promise.all(
       resourceTypes.map(async (resourceType) => {
         const resources = await memorium.listResource(resourceType.id);
+        console.log({resources:resources?.content[0]})
         return resources?.content?.map((res: any) => {
           return {
             params: {
@@ -43,7 +44,16 @@ const resource = await memorium.listResource(
       href={path("/resources/" + resourceType)}>
       <span class="i-tabler-arrow-left"></span> back
     </a>
-    {resource?.content?.url && <a class="flex gap-1 items-center"href={resource?.content?.url}>link<span class="inline-block w-3 h-3 i-tabler-external-link"/></a>}
+    <div class="links">
+      {
+        resource?.content?.url && (
+          <a class="flex gap-1 items-center" href={resource?.content?.url}>
+            link
+            <span class="inline-block w-3 h-3 i-tabler-external-link" />
+          </a>
+        )
+      }
+    </div>
     <div class="date opacity-50">
       {
         resource?.content.datePublished?.toLocaleString("en-US", {