From 4db2fd8562fc2fbda87af93444395d111a9dbcbf Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Mon, 4 May 2026 10:06:41 +0200
Subject: [PATCH] fix(blog-overview): use EventBadges in upcoming-events list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The plain `<time>` was visually weak next to the headline. Reuse the
`EventBadges` component from the post card so the date renders as a
proper wald-tinted pill — same shape as event posts. Drops the local
`formatEventDate` since EventBadges does the localization itself
(weekday + time included, matching post cards).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/lib/components/BlogOverview.svelte | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/BlogOverview.svelte b/src/lib/components/BlogOverview.svelte
index 0dcd520..8fe7868 100644
--- a/src/lib/components/BlogOverview.svelte
+++ b/src/lib/components/BlogOverview.svelte
@@ -2,6 +2,7 @@
   import Icon from "@iconify/svelte";
   import "$lib/iconify-offline";
   import PostCard from "./PostCard.svelte";
+  import EventBadges from "./EventBadges.svelte";
   import Tag from "./Tag.svelte";
   import Pagination from "./Pagination.svelte";
   import type { PostEntry } from "$lib/cms";
@@ -97,13 +98,6 @@
     return norm ? `/post/${encodeURIComponent(norm)}` : "/post";
   }
 
-  function formatEventDate(iso: string | null | undefined): string {
-    if (!iso) return "";
-    const d = new Date(iso);
-    if (Number.isNaN(d.getTime())) return "";
-    return d.toLocaleDateString("de-DE", { day: "2-digit", month: "long", year: "numeric" });
-  }
-
   function t(key: string, replacements?: Record<string, string | number>) {
     return tStatic(translations ?? null, key, replacements);
   }
@@ -184,10 +178,8 @@
       <ul class="not-prose list-none space-y-2 pl-0">
         {#each upcomingEvents as ev}
           <li>
-            <a href={postHref(ev)} class="group flex items-baseline gap-3 no-underline hover:underline">
-              <time class="shrink-0 text-xs font-medium text-zinc-600 tabular-nums">
-                {formatEventDate(ev.eventDate)}
-              </time>
+            <a href={postHref(ev)} class="group flex flex-wrap items-center gap-2 no-underline hover:underline">
+              <EventBadges eventDate={ev.eventDate} />
               <span class="text-sm text-zinc-900 group-hover:text-zinc-950">{ev.headline}</span>
             </a>
           </li>