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.
2026-04-17 22:01:30 +02:00
parent 852cef0980
commit 2fef91a548
137 changed files with 28585 additions and 0 deletions
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
+  import Accordion from "./Accordion.svelte";
+  import { t, T } from "$lib/translations";
+  import type { Translations } from "$lib/translations";
+
+  let {
+    embedUrl = null,
+    linkUrl = null,
+    locationText = null,
+    label = "Karte",
+    translations = null,
+  }: {
+    embedUrl?: string | null;
+    linkUrl?: string | null;
+    locationText?: string | null;
+    label?: string;
+    translations?: Translations | null;
+  } = $props();
+
+  let overlayVisible = $state(true);
+</script>
+
+<Accordion id="map-section" {label} open class="mt-12">
+  <div class="overflow-hidden rounded-lg border border-wald-200 shadow-sm">
+    {#if embedUrl}
+      <div>
+        <div class="relative">
+          <iframe
+            src={embedUrl}
+            width="600"
+            height="300"
+            class="block w-full border-0"
+            loading="lazy"
+            title={locationText ? `Karte: ${locationText}` : "Veranstaltungsort"}
+          ></iframe>
+          {#if overlayVisible}
+            <div
+              role="button"
+              tabindex="0"
+              class="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[1px] cursor-pointer select-none"
+              aria-label="Karte aktivieren"
+              onclick={() => { overlayVisible = false; }}
+              onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') overlayVisible = false; }}
+            >
+              <div class="flex items-center gap-2 rounded-full bg-white/90 px-4 py-2 text-xs font-medium text-zinc-700 shadow">
+                <Icon icon="mdi:cursor-default-click" class="size-4 shrink-0" aria-hidden="true" />
+                {t(translations, T.post_map_activate)}
+              </div>
+            </div>
+          {/if}
+        </div>
+        {#if linkUrl}
+          <a
+            href={linkUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-1.5 px-3 py-1.5 bg-wald-50 text-wald-700 text-[.65rem] font-medium hover:bg-wald-100 transition-colors border-t border-wald-200"
+          >
+            <Icon icon="mdi:open-in-new" class="size-3.5 shrink-0" aria-hidden="true" />
+            {t(translations, T.post_map_open_osm)}
+          </a>
+        {/if}
+      </div>
+    {:else if linkUrl}
+      <a
+        href={linkUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-2 px-3 py-2 bg-wald-50 text-wald-700 text-xs font-medium hover:bg-wald-100 transition-colors"
+      >
+        <Icon icon="mdi:map-marker" class="size-4 shrink-0" aria-hidden="true" />
+        {locationText ?? t(translations, T.post_map_open_osm)}
+      </a>
+    {/if}
+  </div>
+</Accordion>