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">

src/content/blog/alpine-valley/index.en.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Alpine Valley"
 date: 2016-12-22
-headerImg: "images/Render.png"
+cover: ./images/Render.png
 comments: true
 ---
 import Image from "@components/Image.astro";

src/content/blog/alpine-valley/index.mdx

@@ -1,7 +1,7 @@
 ---
-title: "Alpine Valley"
+title: Alpine Valley
 date: 2016-12-22
-headerImg: "images/Render.png"
+cover: ./images/Render.png
 comments: true
 ---
 

src/content/blog/random-renders-02/index.en.mdx

@@ -1,7 +1,7 @@
 ---
-title: "Random Renders NO°2"
+title: Random Renders NO°2
 date: 2023-05-11
-headerImg: "images/palma.png"
+cover: ./images/palma.png
 featured: true
 comments: true
 ---

src/content/blog/random-renders-02/index.mdx

@@ -1,7 +1,7 @@
 ---
-title: "Random Renders NO°2"
+title: Random Renders NO°2
 date: 2023-05-11
-headerImg: "images/palma.png"
+cover: ./images/palma.png
 featured: true
 comments: true
 ---

src/content/blog/random-renders-no1/index.en.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Random Renders NO°1"
 date: 2018-12-30
-headerImg: "images/myown.png"
+cover: ./images/myown.png
 comments: true
 ---
 

src/content/blog/random-renders-no1/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Random Renders NO°1"
 date: 2018-12-30
-headerImg: "images/myown.png"
+cover: ./images/myown.png
 comments: true
 ---
 

src/content/blog/sketche-01/index.en.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Sketche 01"
 date: 2017-05-08
-headerImg: "images/Baakk.jpg"
+cover: ./images/Baakk.jpg
 ---
 
 import Image from "@components/Image.astro";

src/content/blog/sketche-01/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Sketche 01"
 date: 2017-05-08
-headerImg: "images/Baakk.jpg"
+cover: ./images/Baakk.jpg
 ---
 
 import Image from "@components/Image.astro";

src/content/blog/speed_scene_03/index.en.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Speed_Scene_03"
 date: 2017-02-03
-headerImg: "images/Render_04.png"
+cover: ./images/Render_04.png
 comments: true
 ---
 

src/content/blog/speed_scene_03/index.mdx

@@ -1,7 +1,7 @@
 ---
-title: "Speed_Scene_03"
+title: Speed_Scene_03
 date: 2017-02-03
-headerImg: "images/Render_04.png"
+cover: ./images/Render_04.png
 comments: true
 ---
 

src/content/blog/speed_scene_0405/index.en.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Speed_Scene_04/05"
 date: 2017-03-13
-headerImg: "Render_01.jpg"
+cover: ./images/Render_01.jpg
 comments: true
 ---
 

src/content/blog/speed_scene_0405/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Speed_Scene_04/05"
 date: 2017-03-13
-headerImg: "Render_01.jpg"
+cover: ./images/Render_01.jpg
 comments: true
 ---
 

src/content/blog/station-b3-4-offline/index.en.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Station B3-4 Offline"
 date: 2016-12-21
-headerImg: "Station.jpg"
+cover: ./images/Station.jpg
 comments: true
 ---
 

src/content/blog/station-b3-4-offline/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Station B3-4 Offline"
 date: 2016-12-21
-headerImg: "Station.jpg"
+cover: ./images/Station.jpg
 comments: true
 ---
 

src/content/blog/surfirvorcamp-esmoriz/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Surfirvorcamp | Esmoriz"
 date: 2017-04-18
-headerImg: "MAX_4978.jpg"
+cover: ./images/MAX_4978.jpg
 comments: true
 ---
 import YouTube from "@components/YouTube.astro";

src/content/blog/the-end/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "The End"
 date: 2017-02-02
-headerImg: "Render_01.jpg"
+cover: ./images/Render_01.jpg
 comments: true
 ---
 

src/content/blog/webgl-showcase/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "WebGL Showcase"
 date: 2018-01-03
-headerImg: "images/Bildschirmfoto-2018-01-03-um-13.09.42-2.png"
+cover: ./images/Bildschirmfoto-2018-01-03-um-13.09.42-2.png
 comments: true
 ---
 

src/content/blog/workroom-no2/index.en.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Workroom No°2"
 date: 2017-05-26
-headerImg: "images/untitled7.png"
+cover: ./images/untitled7.png
 comments: true
 ---
 

src/content/blog/workroom/index.en.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Workroom"
 date: 2017-05-22
-headerImg: "images/untitled4.png"
+cover: ./images/untitled4.png
 comments: true
 ---
 

src/content/config.ts

@@ -1,10 +1,13 @@
 import { defineCollection, z } from 'astro:content';
 
 const blogCollection = defineCollection({
-  schema: z.object({
+  schema: ({ image }) => z.object({
     title: z.string(),
     date: z.date(),
-    headerImg: z.string().optional(),
+    cover: image().refine((img) => img.width >= 720, {
+      message: "Cover image must be at least 720 pixels wide!",
+    }).optional(),
+    coverAlt: z.string().optional(),
     description: z.string().optional(),
     icon: z.string().optional(),
     draft: z.boolean().optional(),

src/content/projects/invoice/index.md

@@ -1,7 +1,7 @@
 ---
 title: "Invoice"
 date: 2023-08-21
-headerImg: "bg.jpg"
+cover: ./images/bg.jpg
 icon: "/projects/invoice.svg"
 tags: ["sveltekit", "unocss", "prisma", "sqlite"]
 draft: true

src/content/projects/karl/index.md

@@ -1,7 +1,7 @@
 ---
 title: "K.A.R.L"
 date: 2021-04-01
-headerImg: "images/Indicatrices_of_Distortion.png"
+cover: ./images/Indicatrices_of_Distortion.png
 license: "CC-BY-SA:4.0"
 comments: true
 links:

src/content/projects/modern/index.md

@@ -1,7 +1,7 @@
 ---
 title: "Modern"
 date: 2020-06-09T11:55:24+02:00
-headerImg: "images/screenshot.png"
+cover: ./images/screenshot.png
 links:
   [
     ["live", "https://max-richter.dev/modern?scene=modern"],

src/content/projects/plantarium/index.en.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Plantarium"
 date: 2022-08-31
-headerImg: "images/plantarium.png"
+cover: ./images/plantarium.png
 featured: true
 links: [["website", "https://plant.max-richter.com"], ["git", "https://github.com/jim-fx/plantarium"]]
 draft: true

src/content/projects/plantarium/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Plantarium"
 date: 2022-08-31T20:46:26+02:00
-headerImg: "images/plantarium.png"
+cover: ./images/plantarium.png
 featured: true
 links: [["website", "https://plant.max-richter.dev"], ["git", "https://github.com/jim-fx/plantarium"]]
 tags: ["Web", "3D", "Svelte", "Node-Systeme"]

src/layouts/Layout.astro

@@ -57,12 +57,13 @@ const { title, width = "compact" } = Astro.props;
     <script>
       (function () {
         try {
-          var mode = localStorage.getItem("mode");
+          var mode = localStorage.getItem("theme");
           var supportDarkMode =
             window.matchMedia("(prefers-color-scheme: dark)").matches === true;
           if (!mode && supportDarkMode)
             document.documentElement.classList.add("dark");
           if (!mode) return;
+          console.log({ mode });
           document.documentElement.classList.add(mode);
         } catch (e) {}
       })();

src/pages/blog/index.astro

@@ -12,21 +12,7 @@ const locale = getLocale(Astro.url);
 
 const posts = filterCollection(pages, locale);
 
-const featuredPosts = await Promise.all(
-  posts.slice(0, 3).map(async (post) => {
-    if (!post.data.headerImg) {
-      return post;
-    }
-    const { default: image } = await import(
-      `../../content/blog/${post.slug.split("/")[0]}/${post.data.headerImg}`
-    );
-    return {
-      ...post,
-      image,
-    };
-  }),
-);
-
+const featuredPosts = posts.slice(0, 3);
 const otherPosts = posts.slice(3);
 ---
 

tsconfig.json

@@ -12,6 +12,9 @@
       "@components/*": [
         "src/components/*"
       ],
+      "@content/*": [
+        "src/content/*"
+      ],
       "@helpers/*": [
         "src/helpers/index.ts",
         "src/helpers/*"