feat: add madeira blog post upgrade astro

src/components/HeroCard.astro

@@ -3,18 +3,14 @@ import markdownToText from "@helpers/markdownToText";
 import { Card } from "./card";
 import { useTranslatedPath, useTranslations } from "@i18n/utils";
 import Image from "@components/Image.astro";
-import type { ImageMetadata } from "astro";
+import type { InferEntrySchema } from "astro:content";
 
 interface Props {
   post: {
-    data: {
-      title: string;
-      icon?: string;
-      cover?: ImageMetadata;
-    };
+    data: InferEntrySchema<"projects">;
     collection: string;
-    slug: string;
-    body: string;
+    id: string;
+    body?: string;
   };
 }
 
@@ -22,13 +18,13 @@ const {
   data: { title, cover, icon },
   collection,
   body,
-  slug,
+  id,
 } = Astro.props.post;
 
 const translatePath = useTranslatedPath(Astro.url);
 const t = useTranslations(Astro.url);
 
-const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
+const link = translatePath(`/${collection}/${id.split("/")[0]}`);
 ---
 
 <Card
@@ -39,7 +35,7 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
       {title}
     </Card.Title>
     <Card.Description>
-      {markdownToText(body).slice(0, 200)}
+      {markdownToText(body ?? "").slice(0, 200)}
     </Card.Description>
     <Card.ReadMoreButton link={link} text={t("read-more")} />
   </Card.Content>

src/components/ImageGallery.svelte

@@ -141,6 +141,15 @@
     // console.log(ev);
   };
 
+  function formatExposureTime(num: string) {
+    if (num.includes("/")) {
+      const [a, b] = num.split("/");
+      return `${a}/${b}s`;
+    } else {
+      return num + "s";
+    }
+  }
+
   onMount(() => {
     const wrappers = Array.prototype.slice.call(
       document.querySelectorAll("picture > img"),
@@ -168,7 +177,9 @@
               ? exifData.FocalLength.replace(" mm", "mm")
               : "",
             "FNumber" in exifData ? exifData.FNumber : "",
-            "ExposureTime" in exifData ? exifData.ExposureTime : "",
+            "ExposureTime" in exifData
+              ? formatExposureTime(exifData.ExposureTime)
+              : "",
           ];
         }
       } catch (error) {
@@ -206,10 +217,11 @@
     <div class="controls">
       {#each images as _, i}
         <button
+          aria-label={`Image ${i + 1}`}
           class:active={currentIndex === i}
           on:click={() => {
             currentIndex = i;
-          }} />
+          }}></button>
       {/each}
     </div>
   {/if}

src/components/SmallCard.astro

@@ -1,20 +1,16 @@
 ---
 import markdownToText from "@helpers/markdownToText";
 import { useTranslatedPath } from "@i18n/utils";
+import type { InferEntrySchema } from "astro:content";
 
 const tp = useTranslatedPath(Astro.url);
 
 interface Props {
   post: {
-    data: {
-      title: string;
-      description?: string;
-      icon?: string;
-      tags?: string[];
-    };
+    data: InferEntrySchema<"blog">;
     collection: string;
-    body: string;
-    slug: string;
+    body?: string;
+    id: string;
   };
 }
 
@@ -22,15 +18,14 @@ const { post } = Astro.props;
 ---
 
 <div class="rounded-diag-md border border-neutral p-4 overflow-hidden">
-  <a href={tp(`/${post.collection}/${post.slug.split("/")[0]}`)}>
+  <a href={tp(`/${post.collection}/${post.id.split("/")[0]}`)}>
     <h2
-      class="text-2xl flex gap-2 items-center line-clamp text-ellipsis overflow-hidden"
-    >
+      class="text-2xl flex gap-2 items-center line-clamp text-ellipsis overflow-hidden">
       {post.data.icon && <img src={post.data.icon} class="h-6" />}
       {post.data.title}
     </h2>
     <p class="text-ellipsis overflow-hidden line-clamp-2">
-      {post.data.description || markdownToText(post.body).slice(0, 200)}
+      {post.data.description || markdownToText(post?.body || "").slice(0, 200)}
     </p>
   </a>
   {
@@ -39,8 +34,7 @@ const { post } = Astro.props;
         {post.data.tags.map((tag) => (
           <a
             href={tp(`/tag/${tag}`)}
-            class="text-xs border border-neutral p-2 rounded-md"
-          >
+            class="text-xs border border-neutral p-2 rounded-md">
             {tag}
           </a>
         ))}

src/components/card/ReadMoreButton.svelte

@@ -7,5 +7,5 @@
   href={link}
   data-astro-prefetch
   class="bg-light p-2 text-s rounded-md px-4 flex flex-0 items-center gap-2 w-fit"
-  >{text}<span class="i-tabler-arrow-right inline-block w-4 h-4" />
+  >{text}<span class="i-tabler-arrow-right inline-block w-4 h-4"></span>
 </a>

src/components/card/index.ts

@@ -5,14 +5,7 @@ import Title from './Title.svelte';
 import Description from './Description.svelte';
 import ReadMoreButton from './ReadMoreButton.svelte';
 
-const Card = {
-  ...Wrapper,
-  Image,
-  Content,
-  Title,
-  Description,
-  ReadMoreButton
-} as typeof Wrapper & {
+const Card = Wrapper as typeof Wrapper & {
   Image: typeof Image;
   Content: typeof Content;
   Title: typeof Title;
@@ -20,4 +13,10 @@ const Card = {
   ReadMoreButton: typeof ReadMoreButton;
 }
 
+Card.Image = Image;
+Card.Content = Content;
+Card.Title = Title;
+Card.Description = Description;
+Card.ReadMoreButton = ReadMoreButton;
+
 export { Card };