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,154 @@
+<script lang="ts">
+  import MarkdownBlock from "./blocks/MarkdownBlock.svelte";
+  import HeadlineBlock from "./blocks/HeadlineBlock.svelte";
+  import HtmlBlock from "./blocks/HtmlBlock.svelte";
+  import IframeBlock from "./blocks/IframeBlock.svelte";
+  import ImageBlock from "./blocks/ImageBlock.svelte";
+  import ImageGalleryBlock from "./blocks/ImageGalleryBlock.svelte";
+  import YoutubeVideoBlock from "./blocks/YoutubeVideoBlock.svelte";
+  import QuoteBlock from "./blocks/QuoteBlock.svelte";
+  import LinkListBlock from "./blocks/LinkListBlock.svelte";
+  import PostOverviewBlock from "./blocks/PostOverviewBlock.svelte";
+  import SearchableTextBlock from "./blocks/SearchableTextBlock.svelte";
+  import CalendarBlock from "./blocks/CalendarBlock.svelte";
+  import OrganisationsBlock from "./blocks/OrganisationsBlock.svelte";
+  import OpnFormBlock from "./blocks/OpnFormBlock.svelte";
+  import { isBlockLayoutBreakout, getSpaceBottomClass } from "$lib/block-layout";
+  import type { BlockLayout } from "$lib/block-layout";
+  import type { Translations } from "$lib/translations";
+  import type {
+    RowContentLayout,
+    ResolvedBlock,
+    MarkdownBlockData,
+    HeadlineBlockData,
+    HtmlBlockData,
+    IframeBlockData,
+    ImageBlockData,
+    ImageGalleryBlockData,
+    YoutubeVideoBlockData,
+    QuoteBlockData,
+    LinkListBlockData,
+    PostOverviewBlockData,
+    SearchableTextBlockData,
+    CalendarBlockData,
+    OrganisationsBlockData,
+    OpnFormBlockData,
+  } from "$lib/block-types";
+
+  let { layout, class: className = "", translations = {} }: { layout: RowContentLayout; class?: string; translations?: Translations | null } = $props();
+
+  function isResolvedBlock(item: unknown): item is ResolvedBlock {
+    return typeof item === "object" && item !== null;
+  }
+
+  function blockType(item: ResolvedBlock): string {
+    return (item._type as string) ?? "unknown";
+  }
+
+  function justifyToClass(j?: string): string {
+    switch (j) {
+      case "end": return "justify-end";
+      case "center": return "justify-center";
+      case "between": return "justify-between";
+      case "around": return "justify-around";
+      case "evenly": return "justify-evenly";
+      default: return "justify-start";
+    }
+  }
+
+  function alignToClass(a?: string): string {
+    switch (a) {
+      case "end": return "items-end";
+      case "center": return "items-center";
+      case "baseline": return "items-baseline";
+      case "stretch": return "items-stretch";
+      default: return "items-start";
+    }
+  }
+
+  const rows = $derived([
+    {
+      content: layout.row1Content ?? [],
+      justify: justifyToClass(layout.row1JustifyContent),
+      align: alignToClass(layout.row1AlignItems),
+    },
+    {
+      content: layout.row2Content ?? [],
+      justify: justifyToClass(layout.row2JustifyContent),
+      align: alignToClass(layout.row2AlignItems),
+    },
+    {
+      content: layout.row3Content ?? [],
+      justify: justifyToClass(layout.row3JustifyContent),
+      align: alignToClass(layout.row3AlignItems),
+    },
+  ]);
+</script>
+
+<div class="content my-6 {className}">
+  {#each rows as row}
+    {#if row.content.length > 0}
+      <div
+        class="content-row grid grid-cols-12 gap-4 {row.justify} {row.align}"
+        role="region"
+        data-cf-type="grid-row"
+      >
+        {#each row.content as item}
+          {#if isResolvedBlock(item)}
+            {#snippet blockContent()}
+              {#if blockType(item) === "markdown"}
+                <MarkdownBlock block={item as MarkdownBlockData} />
+              {:else if blockType(item) === "headline"}
+                <HeadlineBlock block={item as HeadlineBlockData} />
+              {:else if blockType(item) === "html"}
+                <HtmlBlock block={item as HtmlBlockData} />
+              {:else if blockType(item) === "iframe"}
+                <IframeBlock block={item as IframeBlockData} translations={translations} />
+              {:else if blockType(item) === "image"}
+                <ImageBlock block={item as ImageBlockData} />
+              {:else if blockType(item) === "image_gallery"}
+                <ImageGalleryBlock block={item as ImageGalleryBlockData} />
+              {:else if blockType(item) === "youtube_video"}
+                <YoutubeVideoBlock block={item as YoutubeVideoBlockData} />
+              {:else if blockType(item) === "quote"}
+                <QuoteBlock block={item as QuoteBlockData} />
+              {:else if blockType(item) === "link_list"}
+                <LinkListBlock block={item as LinkListBlockData} />
+              {:else if blockType(item) === "post_overview"}
+                <PostOverviewBlock block={item as PostOverviewBlockData} />
+              {:else if blockType(item) === "searchable_text"}
+                <SearchableTextBlock block={item as SearchableTextBlockData} translations={translations} />
+              {:else if blockType(item) === "calendar"}
+                <CalendarBlock block={item as CalendarBlockData} translations={translations} />
+              {:else if blockType(item) === "organisations"}
+                <OrganisationsBlock block={item as OrganisationsBlockData} />
+              {:else if blockType(item) === "opnform"}
+                <OpnFormBlock block={item as OpnFormBlockData} />
+              {:else}
+                <div class="col-span-12 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
+                  Unbekannter Block: <code>{blockType(item)}</code>
+                </div>
+              {/if}
+            {/snippet}
+            {#if isBlockLayoutBreakout((item as { layout?: BlockLayout }).layout)}
+              {@const rowBlockType = blockType(item)}
+              <div class="col-span-12">
+                <div
+                  class="component-breakout--{rowBlockType} {getSpaceBottomClass((item as { layout?: BlockLayout }).layout)} w-screen relative left-1/2 -translate-x-1/2 max-w-none {rowBlockType === 'quote'
+                    ? 'bg-wald-50'
+                    : '[background:var(--color-container-breakout)]'}"
+                >
+                  <div class="container-custom py-8">
+                    {@render blockContent()}
+                  </div>
+                </div>
+              </div>
+            {:else}
+              {@render blockContent()}
+            {/if}
+          {/if}
+        {/each}
+      </div>
+    {/if}
+  {/each}
+</div>