From 41dfbb2930280b070c9292729db0d8f42702aa6d Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Sat, 16 May 2026 14:27:31 +0200
Subject: [PATCH] feat: add carousel design to PostOverview; extract shared
 Carousel component

- New Carousel.svelte: index-fade, arrows, dots, optional auto-rotate
- QuoteCarouselBlock refactored to use Carousel
- PostOverviewBlock: carousel design variant added
- CMS schema: "carousel" added to post_overview design enum

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/block-types.ts                        |   4 +-
 src/lib/components/Carousel.svelte            | 111 ++++++++++++++++
 .../blocks/PostOverviewBlock.svelte           |  12 ++
 .../blocks/QuoteCarouselBlock.svelte          | 120 ++----------------
 4 files changed, 138 insertions(+), 109 deletions(-)
 create mode 100644 src/lib/components/Carousel.svelte

diff --git a/src/lib/block-types.ts b/src/lib/block-types.ts
index f0c555f..2560e0f 100644
--- a/src/lib/block-types.ts
+++ b/src/lib/block-types.ts
@@ -236,8 +236,8 @@ export interface PostOverviewBlockData {
   excludeTag?: string[];
   /** Max. Anzahl Einträge. */
   numberItems?: number;
-  /** "list" | "cards". */
-  design?: "list" | "cards";
+  /** "list" | "cards" | "carousel". */
+  design?: "list" | "cards" | "carousel";
   layout?: BlockLayout;
   /** Nach resolvePostOverviewBlocks: geladene/gefilterte Posts (PostEntry[]). */
   postsResolved?: unknown[];
diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
new file mode 100644
index 0000000..c97da05
--- /dev/null
+++ b/src/lib/components/Carousel.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import type { Snippet } from "svelte";
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
+
+  let {
+    count,
+    item,
+    ariaLabel = "Karussell",
+    autoRotateMs = 0,
+    showArrows = true,
+  }: {
+    count: number;
+    item: Snippet<[index: number]>;
+    ariaLabel?: string;
+    autoRotateMs?: number;
+    showArrows?: boolean;
+  } = $props();
+
+  let index = $state(0);
+  let paused = $state(false);
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  function prev() {
+    if (count > 0) index = (index - 1 + count) % count;
+  }
+  function next() {
+    if (count > 0) index = (index + 1) % count;
+  }
+
+  function startTimer() {
+    stopTimer();
+    if (!autoRotateMs || paused || count < 2) return;
+    timer = setInterval(() => { index = (index + 1) % count; }, autoRotateMs);
+  }
+  function stopTimer() {
+    if (timer) { clearInterval(timer); timer = null; }
+  }
+
+  $effect(() => {
+    void autoRotateMs; void paused; void count;
+    startTimer();
+    return stopTimer;
+  });
+
+  onMount(startTimer);
+  onDestroy(stopTimer);
+</script>
+
+<div
+  role="region"
+  aria-roledescription="carousel"
+  aria-label={ariaLabel}
+  onmouseenter={() => (paused = true)}
+  onmouseleave={() => (paused = false)}
+>
+  <div class="flex items-center gap-1.5 sm:gap-2">
+    {#if showArrows && count > 1}
+      <button
+        type="button"
+        onclick={prev}
+        aria-label="Vorheriger Eintrag"
+        class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-stein-200 shadow-sm hover:bg-white hover:border-wald-700 transition"
+      >
+        <Icon icon="mdi:chevron-left" class="size-4" aria-hidden="true" />
+      </button>
+    {/if}
+
+    <div class="grid flex-1 min-w-0">
+      {#each { length: count } as _, i}
+        <div
+          class="col-start-1 row-start-1 transition-opacity duration-300 {i === index
+            ? 'opacity-100'
+            : 'pointer-events-none opacity-0'}"
+          aria-hidden={i !== index}
+        >
+          {@render item(i)}
+        </div>
+      {/each}
+    </div>
+
+    {#if showArrows && count > 1}
+      <button
+        type="button"
+        onclick={next}
+        aria-label="Nächster Eintrag"
+        class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-stein-200 shadow-sm hover:bg-white hover:border-wald-700 transition"
+      >
+        <Icon icon="mdi:chevron-right" class="size-4" aria-hidden="true" />
+      </button>
+    {/if}
+  </div>
+
+  {#if count > 1}
+    <div class="mt-3 flex justify-center gap-1.5" role="tablist">
+      {#each { length: count } as _, i}
+        <button
+          type="button"
+          role="tab"
+          aria-selected={i === index}
+          aria-label={`Eintrag ${i + 1}`}
+          onclick={() => (index = i)}
+          class="size-2 rounded-full transition-colors {i === index
+            ? 'bg-wald-700'
+            : 'bg-stein-300 hover:bg-stein-400'}"
+        ></button>
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/src/lib/components/blocks/PostOverviewBlock.svelte b/src/lib/components/blocks/PostOverviewBlock.svelte
index 3456de2..21e61cd 100644
--- a/src/lib/components/blocks/PostOverviewBlock.svelte
+++ b/src/lib/components/blocks/PostOverviewBlock.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { marked } from "$lib/markdown-safe";
   import PostCard from "../PostCard.svelte";
+  import Carousel from "$lib/components/Carousel.svelte";
   import { getBlockLayoutClasses } from "$lib/block-layout";
   import type { PostOverviewBlockData } from "$lib/block-types";
   import type { PostEntry } from "$lib/cms";
@@ -72,6 +73,17 @@
         />
       {/each}
     </div>
+  {:else if design === "carousel" && posts.length > 0}
+    <Carousel count={posts.length} ariaLabel={block.headline ?? "Beiträge"}>
+      {#snippet item(i)}
+        <PostCard
+          post={posts[i]}
+          href={postHref(posts[i])}
+          tagBase={tagBase}
+          commentCount={commentCounts[postSlugForComments(posts[i])] ?? null}
+        />
+      {/snippet}
+    </Carousel>
   {/if}
 
   {#if posts.length > 0}
diff --git a/src/lib/components/blocks/QuoteCarouselBlock.svelte b/src/lib/components/blocks/QuoteCarouselBlock.svelte
index f792f43..18242bc 100644
--- a/src/lib/components/blocks/QuoteCarouselBlock.svelte
+++ b/src/lib/components/blocks/QuoteCarouselBlock.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
-  import Icon from "@iconify/svelte";
-  import "$lib/iconify-offline";
   import { getBlockLayoutClasses } from "$lib/block-layout";
   import type { QuoteBlockData, QuoteCarouselBlockData } from "$lib/block-types";
   import QuoteBlock from "./QuoteBlock.svelte";
+  import Carousel from "$lib/components/Carousel.svelte";
 
   type QuoteItem = { quote?: string; author?: string; variant?: "left" | "right" | "center" };
 
@@ -17,64 +15,15 @@
         typeof q === "object" && q !== null && "quote" in q,
     ),
   );
-  const autoRotate = $derived(block.autoRotate !== false);
-  const showArrows = $derived(block.showArrows === true);
-  const intervalMs = $derived(
-    Math.max(2, block.intervalSeconds ?? 6) * 1000,
+  const autoRotateMs = $derived(
+    block.autoRotate !== false ? Math.max(2, block.intervalSeconds ?? 6) * 1000 : 0,
   );
-
-  let index = $state(0);
-  let timer: ReturnType<typeof setInterval> | null = null;
-  let paused = $state(false);
-
-  function prev() {
-    if (quotes.length === 0) return;
-    index = (index - 1 + quotes.length) % quotes.length;
-  }
-  function next() {
-    if (quotes.length === 0) return;
-    index = (index + 1) % quotes.length;
-  }
-  function goTo(i: number) {
-    index = i;
-  }
-
-  function startTimer() {
-    stopTimer();
-    if (!autoRotate || paused || quotes.length < 2) return;
-    timer = setInterval(() => {
-      index = (index + 1) % quotes.length;
-    }, intervalMs);
-  }
-  function stopTimer() {
-    if (timer) {
-      clearInterval(timer);
-      timer = null;
-    }
-  }
-
-  $effect(() => {
-    void autoRotate;
-    void intervalMs;
-    void paused;
-    void quotes.length;
-    startTimer();
-    return stopTimer;
-  });
-
-  onMount(() => startTimer());
-  onDestroy(() => stopTimer());
 </script>
 
 <div
   class="quote-carousel {layoutClasses}"
   data-block="QuoteCarousel" data-block-type="quote_carousel"
   data-block-slug={block._slug}
-  onmouseenter={() => (paused = true)}
-  onmouseleave={() => (paused = false)}
-  role="region"
-  aria-roledescription="carousel"
-  aria-label={block.headline ?? "Zitat-Karussell"}
 >
   {#if block.headline}
     <h3 class="mb-8 text-lg font-semibold">{block.headline}</h3>
@@ -83,58 +32,15 @@
   {#if quotes.length === 0}
     <p class="text-sm text-stein-500 italic">Keine Zitate vorhanden.</p>
   {:else}
-    <div class="flex items-center gap-1.5 sm:gap-2">
-      {#if showArrows && quotes.length > 1}
-        <button
-          type="button"
-          onclick={prev}
-          aria-label="Vorheriges Zitat"
-          class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-stein-200 shadow-sm hover:bg-white hover:border-wald-700 transition"
-        >
-          <Icon icon="mdi:chevron-left" class="size-4" aria-hidden="true" />
-        </button>
-      {/if}
-
-      <div class="grid flex-1 min-w-0">
-        {#each quotes as q, i (i)}
-          <div
-            class="col-start-1 row-start-1 transition-opacity duration-300 {i === index
-              ? 'opacity-100'
-              : 'pointer-events-none opacity-0'}"
-            aria-hidden={i !== index}
-          >
-            <QuoteBlock block={{ ...(q as QuoteBlockData), variant: "left" }} bare extraClass="py-2" />
-          </div>
-        {/each}
-      </div>
-
-      {#if showArrows && quotes.length > 1}
-        <button
-          type="button"
-          onclick={next}
-          aria-label="Nächstes Zitat"
-          class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-stein-200 shadow-sm hover:bg-white hover:border-wald-700 transition"
-        >
-          <Icon icon="mdi:chevron-right" class="size-4" aria-hidden="true" />
-        </button>
-      {/if}
-    </div>
-
-    {#if quotes.length > 1}
-      <div class="mt-4 flex justify-center gap-1.5" role="tablist">
-        {#each quotes as _, i}
-          <button
-            type="button"
-            role="tab"
-            aria-selected={i === index}
-            aria-label={`Zitat ${i + 1}`}
-            onclick={() => goTo(i)}
-            class="size-2 rounded-full transition-colors {i === index
-              ? 'bg-wald-700'
-              : 'bg-stein-300 hover:bg-stein-400'}"
-          ></button>
-        {/each}
-      </div>
-    {/if}
+    <Carousel
+      count={quotes.length}
+      ariaLabel={block.headline ?? "Zitat-Karussell"}
+      {autoRotateMs}
+      showArrows={block.showArrows === true}
+    >
+      {#snippet item(i)}
+        <QuoteBlock block={{ ...(quotes[i] as QuoteBlockData), variant: "left" }} bare extraClass="py-2" />
+      {/snippet}
+    </Carousel>
   {/if}
 </div>