feat(header): highlight active nav link with bold + underline

Compares the link href against `$page.url.pathname` (with trailing-slash normalization + subpath match), applies `font-bold underline` and `aria-current="page"` on a match. Wired into both the desktop horizontal nav and the mobile slide-down menu. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
chore(blog-overview): apply prettier formatting
2026-05-04 11:29:05 +02:00 · 2026-05-04 11:29:00 +02:00 · 2026-05-04 10:07:56 +02:00 · 2026-05-04 10:06:41 +02:00
3 changed files with 615 additions and 527 deletions
@@ -2,13 +2,18 @@
    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";
    import { postHref } from "$lib/blog-utils";
    import { t as tStatic, T } from "$lib/translations";
    import type { Translations } from "$lib/translations";
-  import { fetchCommentCounts, postSlugForComments, type CommentCountsMap } from "$lib/comment-counts";
+    import {
+        fetchCommentCounts,
+        postSlugForComments,
+        type CommentCountsMap,
+    } from "$lib/comment-counts";

    interface TagEntry {
        _slug?: string;
@@ -84,7 +89,8 @@
            .filter((p) => {
                if (year && yearOf(p) !== year) return false;
                if (q) {
-          const hay = `${p.headline} ${p.excerpt} ${p.subheadline} ${p.tags.join(" ")}`.toLowerCase();
+                    const hay =
+                        `${p.headline} ${p.excerpt} ${p.subheadline} ${p.tags.join(" ")}`.toLowerCase();
                    if (!hay.includes(q)) return false;
                }
                return true;
@@ -97,13 +103,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);
    }
@@ -119,8 +118,9 @@
    let commentCounts = $state<CommentCountsMap>({});
    $effect(() => {
        const ctrl = new AbortController();
-    fetchCommentCounts(posts.map(postSlugForComments), { signal: ctrl.signal })
-      .then((map) => {
+        fetchCommentCounts(posts.map(postSlugForComments), {
+            signal: ctrl.signal,
+        }).then((map) => {
            commentCounts = map;
        });
        return () => ctrl.abort();
@@ -132,7 +132,9 @@
        <div class="mb-4 flex flex-wrap items-center gap-2">
            <label class="relative block w-full sm:max-w-sm">
                <span class="sr-only">{t(T.blog_search_label)}</span>
-        <span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500">
+                <span
+                    class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500"
+                >
                    <Icon icon="mdi:magnify" class="h-4 w-4" />
                </span>
                <input
@@ -155,7 +157,9 @@
            {#if availableYears.length > 0}
                <label class="relative inline-flex items-center">
                    <span class="sr-only">{t(T.blog_year_label)}</span>
-          <span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500">
+                    <span
+                        class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500"
+                    >
                        <Icon icon="mdi:calendar" class="h-4 w-4" />
                    </span>
                    <select
@@ -167,7 +171,9 @@
                            <option value={y}>{y}</option>
                        {/each}
                    </select>
-          <span class="pointer-events-none absolute top-1/2 right-1.5 -translate-y-1/2 text-zinc-500">
+                    <span
+                        class="pointer-events-none absolute top-1/2 right-1.5 -translate-y-1/2 text-zinc-500"
+                    >
                        <Icon icon="mdi:chevron-down" class="h-4 w-4" />
                    </span>
                </label>
@@ -176,19 +182,27 @@
    {/if}

    {#if !isFiltering && upcomingEvents.length > 0}
-    <section class="not-prose mb-6 rounded-sm border border-zinc-200 bg-zinc-50 p-4">
-      <h2 class="mb-3 flex items-center gap-2 text-sm font-semibold tracking-wide text-zinc-700 uppercase">
-        <Icon icon="mdi:calendar-clock" class="size-5 shrink-0" />
+        <section
+            class="not-prose mb-6 rounded-sm border border-zinc-200 bg-zinc-50 p-4"
+        >
+            <h2
+                class="mb-3 flex items-center gap-2 text-sm font-semibold tracking-wide text-zinc-700"
+            >
+                <Icon icon="mdi:calendar-clock" class="size-7 shrink-0" />
                {t(T.blog_upcoming_events)}
            </h2>
            <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>
-              <span class="text-sm text-zinc-900 group-hover:text-zinc-950">{ev.headline}</span>
+                        <a
+                            href={postHref(ev)}
+                            class="group flex flex-wrap items-center gap-2 no-underline"
+                        >
+                            <EventBadges eventDate={ev.eventDate} />
+                            <span
+                                class="text-sm text-zinc-900 group-hover:text-zinc-950"
+                                >{ev.headline}</span
+                            >
                        </a>
                    </li>
                {/each}
@@ -197,7 +211,9 @@
    {/if}

    {#if isFiltering}
-    <div class="mb-3 flex flex-wrap items-center gap-2 text-xs text-zinc-600">
+        <div
+            class="mb-3 flex flex-wrap items-center gap-2 text-xs text-zinc-600"
+        >
            <span>
                {t(T.blog_results_count, { count: filteredResults.length })}
                {#if query}{t(T.blog_results_for, { query })}{/if}
@@ -205,37 +221,63 @@
            </span>
            <button
                type="button"
-        onclick={() => { query = ""; year = ""; }}
+                onclick={() => {
+                    query = "";
+                    year = "";
+                }}
                class="text-zinc-500 underline hover:text-zinc-900"
-      >{t(T.blog_filter_reset)}</button>
+                >{t(T.blog_filter_reset)}</button
+            >
        </div>
        {#if filteredResults.length > 0}
-      <div class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <div
+                class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+            >
                {#each filteredResults as hit}
-          <a href={searchResultHref(hit.slug)} class="flex flex-col overflow-hidden border border-gray-200 bg-white text-slate-950 no-underline transition-all">
+                    <a
+                        href={searchResultHref(hit.slug)}
+                        class="flex flex-col overflow-hidden border border-gray-200 bg-white text-slate-950 no-underline transition-all"
+                    >
                        {#if hit.image}
-              <div class="aspect-3/2 w-full overflow-hidden bg-gray-100">
-                <img src={hit.image} alt={hit.headline} class="h-full w-full object-cover" loading="lazy" />
+                            <div
+                                class="aspect-3/2 w-full overflow-hidden bg-gray-100"
+                            >
+                                <img
+                                    src={hit.image}
+                                    alt={hit.headline}
+                                    class="h-full w-full object-cover"
+                                    loading="lazy"
+                                />
                            </div>
                        {/if}
                        <div class="flex flex-1 flex-col p-4">
-              <h3 class="mb-1 text-base font-semibold">{hit.headline}</h3>
+                            <h3 class="mb-1 text-base font-semibold">
+                                {hit.headline}
+                            </h3>
                            {#if hit.excerpt}
-                <p class="text-sm text-zinc-700 line-clamp-3">{hit.excerpt}</p>
+                                <p class="text-sm text-zinc-700 line-clamp-3">
+                                    {hit.excerpt}
+                                </p>
                            {/if}
                        </div>
                    </a>
                {/each}
            </div>
        {:else}
-      <div class="rounded-sm border border-zinc-200 bg-white p-6 text-center text-sm text-zinc-600">
+            <div
+                class="rounded-sm border border-zinc-200 bg-white p-6 text-center text-sm text-zinc-600"
+            >
                {t(T.blog_no_results)}
            </div>
        {/if}
    {:else}
        {#if tags.length > 0}
            <div class="mb-2">
-        <div class="flex flex-wrap gap-2" role="navigation" aria-label={t(T.blog_filter_aria)}>
+                <div
+                    class="flex flex-wrap gap-2"
+                    role="navigation"
+                    aria-label={t(T.blog_filter_aria)}
+                >
                    <Tag
                        label={t(T.blog_tag_all)}
                        href={tagHref(null)}
@@ -250,38 +292,31 @@
                            variant={activeTag === slug ? "inactive" : "green"}
                            active={activeTag === slug}
                            icon={tag.icon?.trim() || null}
-              customColor={activeTag === slug ? null : tag.color?.trim() || null}
+                            customColor={activeTag === slug
+                                ? null
+                                : tag.color?.trim() || null}
                        />
                    {/each}
                </div>
            </div>
        {/if}

-    <Pagination
-      {currentPage}
-      {totalPages}
-      {basePath}
-      activeTag={activeTag}
-    />
+        <Pagination {currentPage} {totalPages} {basePath} {activeTag} />

        <div class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {#each posts as post}
                <PostCard
-          post={post}
+                    {post}
                    href={postHref(post)}
                    tagBase={`${basePath}/tag`}
-          commentCount={commentCounts[postSlugForComments(post)] ?? null}
+                    commentCount={commentCounts[postSlugForComments(post)] ??
+                        null}
                />
            {/each}
        </div>

        <div class="flex flex-wrap items-center gap-2">
-      <Pagination
-        {currentPage}
-        {totalPages}
-        {basePath}
-        activeTag={activeTag}
-      />
+            <Pagination {currentPage} {totalPages} {basePath} {activeTag} />
            <div class="grow"></div>
            <div class="bg-white rounded-md font-thin">
                <div class="inline-flex text-xs p-2">
@@ -305,7 +340,10 @@
        </div>

        <div class="mt-4 text-xs text-zinc-600">
-      <a href="/posts/rss.xml" class="inline-flex items-center gap-1 hover:underline">
+            <a
+                href="/posts/rss.xml"
+                class="inline-flex items-center gap-1 hover:underline"
+            >
                <Icon icon="mdi:rss" class="h-3.5 w-3.5" />
                {t(T.blog_rss_subscribe)}
            </a>
@@ -27,7 +27,7 @@
 {#if dateLabel || locationText}
  <div class="flex flex-wrap gap-2">
    {#if dateLabel}
-      <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-wald-500 px-3 py-1 text-[.65rem] font-semibold text-white shadow-sm">
+      <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-wald-500 px-3 py-1 text-[.65rem] font-semibold text-white shadow-sm no-underline! [text-decoration:none]">
        <Icon icon="mdi:calendar" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
        {dateLabel}
      </span>
@@ -39,7 +39,7 @@
          {locationText}
        </a>
      {:else}
-        <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-neutral-800 text-neutral-50 px-3 py-1 text-[.65rem] font-medium shadow-sm">
+        <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-neutral-800 text-neutral-50 px-3 py-1 text-[.65rem] font-medium shadow-sm no-underline! [text-decoration:none]">
          <Icon icon="mdi:map-marker" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
          {locationText}
        </span>
@@ -1,11 +1,20 @@
 <script lang="ts">
-  import '$lib/iconify-offline';
+    import "$lib/iconify-offline";
    import { slide } from "svelte/transition";
    import Icon from "@iconify/svelte";
    import Search from "./Search.svelte";
    import { overlayOpen, overlayClose } from "$lib/overlay-store";
    import { t as tStatic, T } from "$lib/translations";
    import type { Translations } from "$lib/translations";
+    import { page } from "$app/stores";
+
+    function isActiveLink(href: string, pathname: string): boolean {
+        if (!href) return false;
+        const h = href.replace(/\/$/, "") || "/";
+        const p = pathname.replace(/\/$/, "") || "/";
+        if (h === "/") return p === "/";
+        return p === h || p.startsWith(h + "/");
+    }

    interface NavLink {
        href: string;
@@ -91,7 +100,7 @@

 <header
    id="horizontal-navigation"
-  class="sticky top-0 z-20 border-b border-white/30 shadow-2xl backdrop-blur-md bg-linear-to-br from-stein-50 from-0% via-wald-100/90 via-42% to-himmel-100 to-100%"
+    class="sticky top-0 z-20 border-b border-white/30 shadow-2xl backdrop-blur-md bg-wald-50"
 >
    <div class="flex items-center justify-between container-custom py-2">
        <a
@@ -100,7 +109,10 @@
            class="logo flex items-center origin-left font-bold text-lg tracking-wide hover:scale-[1.12] transition-transform duration-200 ease-out relative"
        >
            {#if logoSvgHtml}
-        <span class="logo-svg h-10 w-auto inline-flex items-center text-inherit [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-10" aria-hidden="true">{@html logoSvgHtml}</span>
+                <span
+                    class="logo-svg h-10 w-auto inline-flex items-center text-inherit [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-10"
+                    aria-hidden="true">{@html logoSvgHtml}</span
+                >
            {:else if logoUrl && logoUrl.trim() !== ""}
                <img src={logoUrl} alt="" class="h-10 w-auto object-contain" />
            {:else}
@@ -116,7 +128,18 @@
            {#each links as link}
                <a
                    href={link.href}
-          class="hover:animate-pulse transition-all text-xs tracking-wide"
+                    class="hover:animate-pulse transition-all text-[.7rem]"
+                    class:font-bold={isActiveLink(
+                        link.href,
+                        $page.url.pathname,
+                    )}
+                    class:underline={isActiveLink(
+                        link.href,
+                        $page.url.pathname,
+                    )}
+                    aria-current={isActiveLink(link.href, $page.url.pathname)
+                        ? "page"
+                        : undefined}
                >
                    {link.label}
                </a>
@@ -144,7 +167,11 @@
                onclick={() => (searchOpen = !searchOpen)}
            >
                {#if searchOpen}
-          <Icon icon="mdi:close" class="text-error!" aria-hidden="true" />
+                    <Icon
+                        icon="mdi:close"
+                        class="text-error!"
+                        aria-hidden="true"
+                    />
                {:else}
                    <Icon icon="mdi:magnify" aria-hidden="true" />
                {/if}
@@ -180,16 +207,24 @@
            <button
                type="button"
                class="p-2 -mr-2 hover:bg-stein-0/10 rounded-md transition-colors flex items-center justify-center"
-        aria-label={menuOpen ? t(T.header_menu_close) : t(T.header_menu_open)}
+                aria-label={menuOpen
+                    ? t(T.header_menu_close)
+                    : t(T.header_menu_open)}
                aria-controls={menuOpen ? "mobile-nav" : undefined}
                aria-expanded={menuOpen}
                onclick={toggleMenu}
            >
                <span class="sr-only"
-          >{menuOpen ? t(T.header_menu_close) : t(T.header_menu_open)}</span
+                    >{menuOpen
+                        ? t(T.header_menu_close)
+                        : t(T.header_menu_open)}</span
                >
                {#if menuOpen}
-          <Icon icon="mdi:close" class="text-2xl" aria-hidden="true" />
+                    <Icon
+                        icon="mdi:close"
+                        class="text-2xl"
+                        aria-hidden="true"
+                    />
                {:else}
                    <Icon icon="mdi:menu" class="text-2xl" aria-hidden="true" />
                {/if}
@@ -217,6 +252,20 @@
                    <a
                        href={link.href}
                        class="block py-3 px-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors text-sm"
+                        class:font-bold={isActiveLink(
+                            link.href,
+                            $page.url.pathname,
+                        )}
+                        class:underline={isActiveLink(
+                            link.href,
+                            $page.url.pathname,
+                        )}
+                        aria-current={isActiveLink(
+                            link.href,
+                            $page.url.pathname,
+                        )
+                            ? "page"
+                            : undefined}
                        onclick={closeMenu}
                    >
                        {link.label}
@@ -232,7 +281,8 @@
                                target="_blank"
                                rel="noopener noreferrer"
                                class="inline-flex p-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors"
-                aria-label={social.label || t(T.header_social_aria)}
+                                aria-label={social.label ||
+                                    t(T.header_social_aria)}
                                onclick={closeMenu}
                            >
                                <Icon
Author	SHA1	Message	Date
Peter Meier	1e9ef44b52	feat(header): highlight active nav link with bold + underline Deploy / verify (push) Successful in 45s Details Deploy / deploy (push) Successful in 1m9s Details Compares the link href against `$page.url.pathname` (with trailing-slash normalization + subpath match), applies `font-bold underline` and `aria-current="page"` on a match. Wired into both the desktop horizontal nav and the mobile slide-down menu. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-04 11:29:05 +02:00
Peter Meier	5cf141fa4a	chore(blog-overview): apply prettier formatting No behavior change — IDE auto-format pass. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-04 11:29:00 +02:00
Peter Meier	616fb66c00	fix(event-badges): suppress parent-link underline on hover When EventBadges sits inside a `<a hover:underline>` (upcoming-events list, post cards) the underline propagated through the badge spans on hover. Force `text-decoration: none` on the date and location pills so only the headline text underlines. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-04 10:07:56 +02:00
Peter Meier	4db2fd8562	fix(blog-overview): use EventBadges in upcoming-events list 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>	2026-05-04 10:06:41 +02:00