Add fallback for img src's

astro/src/components/Content.astro

@@ -12,7 +12,7 @@ const contentArray = getContentArray(content);
       } else {
         return (
           <Image
-            src={getImageSrc(value.src)}
+            src={getImageSrc(value.src) || "/not-found.png"}
             width={value.width}
             height={value.height}
             format="webp"

astro/src/components/Footer.astro

@@ -1,9 +1,11 @@
 ---
 import { getCurrentYear } from "@/utils/date";
+import ThemeSwitcher from "./ThemeSwitcher.astro";
 ---
 
-<footer>
+<footer class="flex justify-between">
     <p class="text-lg font-semibold">
         &copy; {getCurrentYear()} Example Website. All rights reserved.
     </p>
+    <ThemeSwitcher/>
 </footer>

astro/src/components/Post.astro

@@ -8,15 +8,15 @@ const { post } = Astro.props;
     href={`/posts/${post.id}/`}
 >
     <article class="flex px-5 py-3 gap-8">
-        <Image
+      <Image
-        src={post.thumbnail.url}
+        src={post.thumbnail.url || "/not-found"}
-        height="150"
+        height={150}
-        aspectRatio="1"
+        aspectRatio={1}
         format="webp"
         alt={post.thumbnail.alt}
       />
 
-      <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-4 w-full">
         <div class="flex justify-between w-full">
           <h3 class="">{post.title}</h3>
           {post.publishedDate && (
@@ -24,8 +24,8 @@ const { post } = Astro.props;
             {new Date(post.publishedDate).toLocaleDateString("de-DE")}
             </p>
           )}
-          </div>
+        </div>
-          {post.summary && <p>
+          {post.summary && <p class="max-w-prose">
             {post.summary}
           </p>}
       </div>

astro/src/components/ThemeSwitcher.astro

@@ -0,0 +1,12 @@
+---
+---
+<select id="theme-selector">
+    <option value="autonomic">Autonomic</option>
+    <option value="light">Light</option>
+    <option value="dark">Dark</option>
+</select>
+
+<script>
+    import { handleThemeChange, switchTheme, initializeThemeSelector } from "@/utils/theme"
+    initializeThemeSelector()
+</script>

astro/src/utils/theme.ts

@@ -0,0 +1,21 @@
+export function switchTheme(themeClass: string): void {
+    const bodyElement = document.body;
+    const classesToRemove = ['light', 'dark', 'autonomic'];
+    
+    bodyElement.classList.remove(...classesToRemove);
+    bodyElement.classList.add(themeClass);
+}
+
+export function handleThemeChange(event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    const selectedTheme = selectElement.value;
+    
+    switchTheme(selectedTheme);
+}
+
+export function initializeThemeSelector(): void {
+    const themeSelector = document.getElementById('theme-selector');
+    if (themeSelector) {
+        themeSelector.addEventListener('change', handleThemeChange);
+    }
+}