feat: some shit

src/components/HeroCard.astro

@@ -3,13 +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";
 
 interface Props {
   post: {
     data: {
       title: string;
       icon?: string;
-      headerImg?: string;
+      cover?: ImageMetadata;
     };
     collection: string;
     slug: string;
@@ -18,7 +19,7 @@ interface Props {
 }
 
 const {
-  data: { title, headerImg, icon },
+  data: { title, cover, icon },
   collection,
   body,
   slug,
@@ -27,15 +28,11 @@ const {
 const translatePath = useTranslatedPath(Astro.url);
 const t = useTranslations(Astro.url);
 
-const imagePath = `../content/${collection}/${slug.split("/")[0]}/${headerImg}`;
-
-const image = headerImg && (await import(imagePath)).default;
-
 const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
 ---
 
 <Card
-  classes={`grid gradient border-1 border-neutral overflow-hidden  ${image ? "grid-rows-[200px_1fr] sm:grid-rows-none sm:grid-cols-[1fr_200px]" : ""}`}
+  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] sm:grid-rows-none sm:grid-cols-[1fr_200px]" : ""}`}
 >
   <Card.Content classes="px-8 py-7 order-last sm:order-first">
     <Card.Title classes="text-4xl flex items-center gap-2">
@@ -48,10 +45,10 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
     <Card.ReadMoreButton link={link} text={t("read-more")} />
   </Card.Content>
   {
-    image?.format && (
+    cover && (
       <a href={link}>
         <Image
-          src={image}
+          src={cover}
           alt={"cover for " + title}
           class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
         />

src/components/ThemeToggle.svelte

@@ -2,11 +2,7 @@
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
-  let theme = writable("light");
-
-  onMount(() => {
-    theme.set(localStorage.getItem("theme") || "light");
-  });
+  let theme = writable("");
 
   $: if ($theme && "document" in globalThis) {
     document.documentElement.classList.remove("light", "dark");
@@ -15,9 +11,12 @@
   }
 
   function toggleTheme() {
-    console.log($theme);
     theme.update((t) => (t === "light" ? "dark" : "light"));
   }
+
+  onMount(() => {
+    theme.set(localStorage.getItem("theme") || "dark");
+  });
 </script>
 
 <button class="block w-6 h-6" on:click={toggleTheme} title="toggle dark mode">