Initial SvelteKit frontend port of windwiderstand.de

Full parity with Astro site: content rows, post/tag routes, pagination,
event badges + OSM map, comments, Live-Search via /api/search-index,
CMS image proxy, RSS, sitemap.

Deploy: Dockerfile + docker-compose.prod.yml + Gitea Actions workflow
to build + push to git.pm86.de registry and ssh-deploy to Contabo.

src/lib/components/Search.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { tick } from "svelte";
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
+
+  type SearchHit = {
+    type: "page" | "post";
+    slug: string;
+    href: string;
+    title: string;
+    subtitle: string;
+    excerpt: string;
+    image: string | null;
+    created: string | null;
+    isEvent?: boolean;
+    eventDate?: string | null;
+  };
+
+  let { open = $bindable(false) } = $props();
+
+  let query = $state("");
+  let allHits = $state<SearchHit[] | null>(null);
+  let loading = $state(false);
+  let loadError = $state<string | null>(null);
+  let inputEl = $state<HTMLInputElement | null>(null);
+
+  const normalizedQuery = $derived(query.trim().toLowerCase());
+  const results = $derived.by<SearchHit[]>(() => {
+    if (!allHits || normalizedQuery.length < 2) return [];
+    const q = normalizedQuery;
+    return allHits
+      .filter((h) => {
+        const hay = `${h.title} ${h.subtitle} ${h.excerpt} ${h.slug}`.toLowerCase();
+        return hay.includes(q);
+      })
+      .slice(0, 40);
+  });
+
+  async function loadIndex() {
+    if (allHits || loading) return;
+    loading = true;
+    loadError = null;
+    try {
+      const res = await fetch("/api/search-index");
+      if (!res.ok) throw new Error("search index fetch failed");
+      const data = (await res.json()) as { hits: SearchHit[] };
+      allHits = data.hits ?? [];
+    } catch (e) {
+      loadError = e instanceof Error ? e.message : String(e);
+      allHits = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  function closeSearch() {
+    open = false;
+  }
+
+  function formatDate(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" });
+  }
+
+  $effect(() => {
+    if (!open) return;
+    void loadIndex();
+    tick().then(() => inputEl?.focus());
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeSearch();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
+</script>
+
+{#if open}
+  <div
+    id="search-panel"
+    class="border-t border-white/30 bg-white/95 backdrop-blur overflow-hidden"
+    role="region"
+    aria-label="Suche"
+    in:slide={{ duration: 200 }}
+    out:slide={{ duration: 150 }}
+  >
+    <div class="container-custom py-4 overflow-auto max-h-[calc(100vh-120px)]">
+      <label class="relative block max-w-xl mx-auto">
+        <span class="sr-only">Suche</span>
+        <span class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-zinc-500">
+          <Icon icon="mdi:magnify" class="h-5 w-5" />
+        </span>
+        <input
+          bind:this={inputEl}
+          type="search"
+          bind:value={query}
+          placeholder="Seiten und Beiträge durchsuchen…"
+          class="w-full rounded-sm border border-zinc-300 bg-white py-3 pl-10 pr-10 text-sm focus:border-zinc-500 focus:outline-none"
+        />
+        {#if query}
+          <button
+            type="button"
+            onclick={() => (query = "")}
+            aria-label="Eingabe leeren"
+            class="absolute top-1/2 right-2 -translate-y-1/2 rounded-sm p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
+          >
+            <Icon icon="mdi:close" class="h-4 w-4" />
+          </button>
+        {/if}
+      </label>
+
+      <div class="max-w-xl mx-auto mt-4 text-sm">
+        {#if loading}
+          <p class="text-zinc-500 text-center py-2">Lade Suchindex…</p>
+        {:else if loadError}
+          <p class="text-red-600 text-center py-2">Suche nicht verfügbar: {loadError}</p>
+        {:else if normalizedQuery.length < 2}
+          <p class="text-zinc-500 text-center py-2">Mindestens 2 Zeichen eingeben.</p>
+        {:else if results.length === 0}
+          <p class="text-zinc-500 text-center py-2">Keine Treffer.</p>
+        {:else}
+          <ul class="divide-y divide-zinc-200">
+            {#each results as hit}
+              <li>
+                <a
+                  href={hit.href}
+                  onclick={closeSearch}
+                  class="flex items-start gap-3 py-3 hover:bg-zinc-50 rounded-sm px-2 -mx-2 no-underline"
+                >
+                  {#if hit.image}
+                    <img
+                      src={hit.image}
+                      alt=""
+                      class="w-20 h-12 object-cover shrink-0 rounded-sm border border-zinc-200"
+                      loading="lazy"
+                    />
+                  {:else}
+                    <span class="w-20 h-12 shrink-0 bg-zinc-100 rounded-sm border border-zinc-200 flex items-center justify-center text-zinc-400">
+                      <Icon icon={hit.type === "post" ? "mdi:file-document-outline" : "mdi:file-outline"} class="h-5 w-5" />
+                    </span>
+                  {/if}
+                  <div class="min-w-0 flex-1">
+                    <div class="flex items-center gap-2 text-[.65rem] uppercase tracking-wide text-zinc-500">
+                      <span>{hit.type === "post" ? "Beitrag" : "Seite"}</span>
+                      {#if hit.isEvent && hit.eventDate}
+                        <span class="text-wald-700">{formatDate(hit.eventDate)}</span>
+                      {:else if hit.created}
+                        <span>{formatDate(hit.created)}</span>
+                      {/if}
+                    </div>
+                    <div class="font-medium text-zinc-900 truncate">{hit.title}</div>
+                    {#if hit.excerpt}
+                      <div class="text-xs text-zinc-600 line-clamp-2">{hit.excerpt}</div>
+                    {/if}
+                  </div>
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}