From e8a1c9b104da8094f490463a3a660b4c59d90c94 Mon Sep 17 00:00:00 2001
From: Chris Stade <christoph-stade@outlook.de>
Date: Sat, 23 Dec 2023 16:21:32 +0100
Subject: [PATCH 1/6] Create carousel draft

---
 package.json            | 58 ++++++++++++++++++++++-------------------
 src/app.d.ts            |  2 ++
 src/lib/Carousel.svelte | 31 ++++++++++++++++++++++
 src/lib/index.ts        |  1 +
 src/routes/+page.svelte |  9 +++++--
 5 files changed, 72 insertions(+), 29 deletions(-)
 create mode 100644 src/lib/Carousel.svelte

diff --git a/package.json b/package.json
index 75066ee2..4946d15c 100644
--- a/package.json
+++ b/package.json
@@ -17,34 +17,38 @@
     "check": "svelte-check"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.4",
+    "@iconify/svelte": "^3.1.3",
     "@mapbox/mapbox-gl-geocoder": "^5.0.1",
-    "@playwright/test": "^1.38.1",
-    "@rollup/plugin-yaml": "^4.1.1",
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.25.1",
-    "@sveltejs/vite-plugin-svelte": "^2.4.6",
-    "@types/events": "^3.0.1",
-    "@types/mapbox-gl": "^2.7.15",
-    "@types/mapbox__mapbox-gl-geocoder": "^4.7.5",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "eslint": "^8.50.0",
-    "eslint-plugin-svelte": "^2.33.2",
+    "@playwright/test": "^1.33.0",
+    "@rollup/plugin-yaml": "^4.0.1",
+    "@sveltejs/adapter-static": "^2.0.2",
+    "@sveltejs/kit": "^1.16.2",
+    "@sveltejs/vite-plugin-svelte": "^2.2.0",
+    "@types/events": "^3.0.0",
+    "@types/mapbox-gl": "^2.7.11",
+    "@types/mapbox__mapbox-gl-geocoder": "^4.7.3",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "eslint": "^8.40.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "js-yaml": "^4.1.0",
-    "mapbox-gl": "^2.15.0",
-    "marked": "^9.0.3",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
-    "svelte": "^4.2.1",
-    "svelte-check": "^3.5.2",
-    "svelte-multiselect": "^10.2.0",
-    "svelte-preprocess": "^5.0.4",
-    "svelte-range-slider-pips": "^2.2.3",
-    "svelte-toc": "^0.5.6",
-    "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.22",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "mapbox-gl": "^2.14.1",
+    "marked": "^4.3.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.0",
+    "svelte": "3.57.0",
+    "svelte-carousel": "^1.0.25",
+    "svelte-check": "^3.3.1",
+    "svelte-multiselect": "^8.6.1",
+    "svelte-preprocess": "^5.0.3",
+    "svelte-range-slider-pips": "^2.1.1",
+    "svelte-toc": "^0.5.5",
+    "svelte-zoo": "^0.4.5",
+    "svelte2tsx": "^0.6.13",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5"
+  },
+  "dependencies": {
+    "suncalc": "^1.9.0"
   }
 }
diff --git a/src/app.d.ts b/src/app.d.ts
index 71714b12..9e70e9d3 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -29,3 +29,5 @@ declare module '*messages.yml' {
 }
 
 declare module '*package.json'
+
+declare module 'svelte-carousel'
diff --git a/src/lib/Carousel.svelte b/src/lib/Carousel.svelte
new file mode 100644
index 00000000..057ed305
--- /dev/null
+++ b/src/lib/Carousel.svelte
@@ -0,0 +1,31 @@
+<script>
+    import { browser } from '$app/environment';
+    import { PostPreview } from '$lib'
+    import { fetch_posts } from '$lib/fetch'
+
+    import Carousel from 'svelte-carousel';
+    // Alt no package: https://svelte.dev/repl/a363db348ba4485d965c5b5464428a73?version=3.31.2
+    // Alt with beautiful animations: https://splidejs.com/integration/svelte-splide/
+
+    let carousel; // for calling methods of the carousel instance
+        
+    export let posts;
+    
+    async function get_posts() {
+        posts = await fetch_posts()
+    }
+</script>
+
+{#await get_posts() then _ }
+    <Carousel
+    autoplay
+    autoplayDuration={5000}
+    autoplayProgressVisible
+    >
+    {#each posts as post}
+        <div>
+            <PostPreview {post} />
+        </div>
+    {/each}
+    </Carousel>
+{/await}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5c1038aa..c2562b9c 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,6 +1,7 @@
 export { default as BasePage } from './BasePage.svelte'
 export { default as ChapterList } from './ChapterList.svelte'
 export { default as ChapterMap } from './ChapterMap.svelte'
+export { default as Carousel } from './Carousel.svelte'
 export { default as CircleSpinner } from './CircleSpinner.svelte'
 export { default as Collapsible } from './Collapsible.svelte'
 export { default as Footer } from './Footer.svelte'
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 71565517..ac081664 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import { ChapterMap } from '$lib'
   import { microcopy } from '$lib/stores'
+  
   import Icon from '@iconify/svelte'
-
+  
   export let data
-
+  
   const style = `margin-right: 5pt;`
+
+  import { Carousel } from '$lib'
 </script>
 
 <!-- Shows image of name of german association if page is german. Otherwise shows name of association. -->
@@ -86,6 +89,8 @@
   {@html data.page.body}
 </article>
 
+<Carousel/>
+
 <style>
   h1 img {
     margin: 3ex auto;

From 188c51f82e0d8cb72d174188182ca68cd0a5dede Mon Sep 17 00:00:00 2001
From: Chris Stade <christoph-stade@outlook.de>
Date: Sun, 16 Jun 2024 17:52:40 +0200
Subject: [PATCH 2/6] Unify slider with page content width

---
 package.json            |  3 ---
 src/lib/Carousel.svelte | 27 ++++++++++++++++-----------
 src/routes/+page.svelte |  5 ++++-
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 4946d15c..ef06c4f3 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,5 @@
     "svelte2tsx": "^0.6.13",
     "typescript": "^5.0.4",
     "vite": "^4.3.5"
-  },
-  "dependencies": {
-    "suncalc": "^1.9.0"
   }
 }
diff --git a/src/lib/Carousel.svelte b/src/lib/Carousel.svelte
index 057ed305..0f0f742e 100644
--- a/src/lib/Carousel.svelte
+++ b/src/lib/Carousel.svelte
@@ -1,15 +1,19 @@
 <script>
-    import { browser } from '$app/environment';
     import { PostPreview } from '$lib'
     import { fetch_posts } from '$lib/fetch'
 
-    import Carousel from 'svelte-carousel';
-    // Alt no package: https://svelte.dev/repl/a363db348ba4485d965c5b5464428a73?version=3.31.2
+    // Package source: https://www.npmjs.com/package/svelte-carousel
     // Alt with beautiful animations: https://splidejs.com/integration/svelte-splide/
+    import Carousel from 'svelte-carousel';
 
     let carousel; // for calling methods of the carousel instance
         
     export let posts;
+    export let autoplay = true
+    export let autoplayDuration = 3000
+    export let autoplayProgressVisible = true
+    // TODO:CS: Style-Frage Dots ja/nein? Wenn ja nur ausgewaehlte Beitraege, da zu viele sonst?
+    export let dots = false
     
     async function get_posts() {
         posts = await fetch_posts()
@@ -18,14 +22,15 @@
 
 {#await get_posts() then _ }
     <Carousel
-    autoplay
-    autoplayDuration={5000}
-    autoplayProgressVisible
+        {autoplay}
+        {autoplayDuration}
+        {autoplayProgressVisible}
+        {dots}
     >
-    {#each posts as post}
-        <div>
-            <PostPreview {post} />
-        </div>
-    {/each}
+        {#each posts as post}
+            <div>
+                <PostPreview {post} />
+            </div>
+        {/each}
     </Carousel>
 {/await}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ac081664..d4ebfde8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -89,7 +89,10 @@
   {@html data.page.body}
 </article>
 
-<Carousel/>
+<!-- TODO:CS: Kann man das Carousel eleganter auf content Breite bringen als mit "article" zu verpacken? -->
+<article>
+  <Carousel/>
+</article>
 
 <style>
   h1 img {

From 742dc64a02f073fb342ce92750795f1cdc0a5688 Mon Sep 17 00:00:00 2001
From: Chris Stade <christoph-stade@outlook.de>
Date: Sun, 16 Jun 2024 19:54:43 +0200
Subject: [PATCH 3/6] Trying alternative package

---
 package.json            |  3 +++
 src/lib/Carousel.svelte | 20 +++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ef06c4f3..2354f666 100644
--- a/package.json
+++ b/package.json
@@ -47,5 +47,8 @@
     "svelte2tsx": "^0.6.13",
     "typescript": "^5.0.4",
     "vite": "^4.3.5"
+  },
+  "dependencies": {
+    "@splidejs/svelte-splide": "^0.2.9"
   }
 }
diff --git a/src/lib/Carousel.svelte b/src/lib/Carousel.svelte
index 0f0f742e..0bfd33c5 100644
--- a/src/lib/Carousel.svelte
+++ b/src/lib/Carousel.svelte
@@ -3,7 +3,6 @@
     import { fetch_posts } from '$lib/fetch'
 
     // Package source: https://www.npmjs.com/package/svelte-carousel
-    // Alt with beautiful animations: https://splidejs.com/integration/svelte-splide/
     import Carousel from 'svelte-carousel';
 
     let carousel; // for calling methods of the carousel instance
@@ -18,6 +17,10 @@
     async function get_posts() {
         posts = await fetch_posts()
     }
+
+    // Alternative carousel with beautiful animations: https://splidejs.com/integration/svelte-splide/
+    import { Splide, SplideSlide } from '@splidejs/svelte-splide';
+    import '@splidejs/svelte-splide/css';
 </script>
 
 {#await get_posts() then _ }
@@ -33,4 +36,19 @@
             </div>
         {/each}
     </Carousel>
+
+    <!-- TODO:CS: Dauert etwas lange zu rendern... -->
+    <!-- <Splide options={ { rewind: true } } aria-label="Svelte Splide Example"> -->
+    <Splide options={{ 
+        type: 'loop', 
+        padding:'5rem',
+        gap: '2rem', 
+        autoplay: true
+    }} aria-label="Svelte Splide Example">
+        {#each posts as post}
+            <SplideSlide>
+                <PostPreview {post} />
+            </SplideSlide>
+        {/each}
+    </Splide>
 {/await}

From a3d8108052a3946e243d891b5e9d977351d85ba9 Mon Sep 17 00:00:00 2001
From: Chris Stade <christoph-stade@outlook.de>
Date: Mon, 8 Jul 2024 14:31:36 +0200
Subject: [PATCH 4/6] Comment alternative

---
 src/lib/Carousel.svelte | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/lib/Carousel.svelte b/src/lib/Carousel.svelte
index 0bfd33c5..0c881715 100644
--- a/src/lib/Carousel.svelte
+++ b/src/lib/Carousel.svelte
@@ -19,8 +19,8 @@
     }
 
     // Alternative carousel with beautiful animations: https://splidejs.com/integration/svelte-splide/
-    import { Splide, SplideSlide } from '@splidejs/svelte-splide';
-    import '@splidejs/svelte-splide/css';
+    // import { Splide, SplideSlide } from '@splidejs/svelte-splide';
+    // import '@splidejs/svelte-splide/css';
 </script>
 
 {#await get_posts() then _ }
@@ -39,7 +39,7 @@
 
     <!-- TODO:CS: Dauert etwas lange zu rendern... -->
     <!-- <Splide options={ { rewind: true } } aria-label="Svelte Splide Example"> -->
-    <Splide options={{ 
+    <!-- <Splide options={{ 
         type: 'loop', 
         padding:'5rem',
         gap: '2rem', 
@@ -50,5 +50,25 @@
                 <PostPreview {post} />
             </SplideSlide>
         {/each}
-    </Splide>
+    </Splide> -->
+    <!-- <ul>
+        {#each posts as post (post.slug)}
+            <li animate:flip={{ duration: 200 }} transition:scale style="display: flex;">
+                <PostPreview {post} />
+            </li>
+        {/each}
+    </ul> -->
 {/await}
+
+<style>
+    ul {
+      list-style: none;
+      max-width: 56em;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
+      grid-gap: 1em;
+      margin: auto;
+      padding: 2em 1em;
+    }
+  </style>
+  
\ No newline at end of file

From 3db18353f7658bed186cab7fdc1c7e142e39c6d5 Mon Sep 17 00:00:00 2001
From: unknown <christoph-stade@outlook.de>
Date: Fri, 1 Aug 2025 12:52:32 +0200
Subject: [PATCH 5/6] Add error handling and removed comments

---
 src/lib/Carousel.svelte | 63 +++++++++++++++--------------------------
 1 file changed, 23 insertions(+), 40 deletions(-)

diff --git a/src/lib/Carousel.svelte b/src/lib/Carousel.svelte
index 0c881715..74a8b91e 100644
--- a/src/lib/Carousel.svelte
+++ b/src/lib/Carousel.svelte
@@ -14,50 +14,33 @@
     // TODO:CS: Style-Frage Dots ja/nein? Wenn ja nur ausgewaehlte Beitraege, da zu viele sonst?
     export let dots = false
     
+    let error: Error | undefined = undefined
+    
     async function get_posts() {
-        posts = await fetch_posts()
+        try {
+            posts = await fetch_posts()
+        } catch (err) {
+            error = err as Error
+            console.error('Failed to fetch posts:', err)
+        }
     }
-
-    // Alternative carousel with beautiful animations: https://splidejs.com/integration/svelte-splide/
-    // import { Splide, SplideSlide } from '@splidejs/svelte-splide';
-    // import '@splidejs/svelte-splide/css';
 </script>
 
-{#await get_posts() then _ }
-    <Carousel
-        {autoplay}
-        {autoplayDuration}
-        {autoplayProgressVisible}
-        {dots}
-    >
-        {#each posts as post}
-            <div>
-                <PostPreview {post} />
-            </div>
-        {/each}
-    </Carousel>
-
-    <!-- TODO:CS: Dauert etwas lange zu rendern... -->
-    <!-- <Splide options={ { rewind: true } } aria-label="Svelte Splide Example"> -->
-    <!-- <Splide options={{ 
-        type: 'loop', 
-        padding:'5rem',
-        gap: '2rem', 
-        autoplay: true
-    }} aria-label="Svelte Splide Example">
-        {#each posts as post}
-            <SplideSlide>
-                <PostPreview {post} />
-            </SplideSlide>
-        {/each}
-    </Splide> -->
-    <!-- <ul>
-        {#each posts as post (post.slug)}
-            <li animate:flip={{ duration: 200 }} transition:scale style="display: flex;">
-                <PostPreview {post} />
-            </li>
-        {/each}
-    </ul> -->
+{#await get_posts() then _}
+    {#if !error && posts && posts.length > 0}
+        <Carousel
+            {autoplay}
+            {autoplayDuration}
+            {autoplayProgressVisible}
+            {dots}
+        >
+            {#each posts as post}
+                <div>
+                    <PostPreview {post} />
+                </div>
+            {/each}
+        </Carousel>
+    {/if}
 {/await}
 
 <style>

From 6bf3cd67f932a767dfc0781d375cb58bb46726f3 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Fri, 1 Aug 2025 11:14:59 +0000
Subject: [PATCH 6/6] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/lib/Carousel.svelte | 8 ++++----
 src/routes/+page.svelte | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/Carousel.svelte b/src/lib/Carousel.svelte
index 74a8b91e..28e9648f 100644
--- a/src/lib/Carousel.svelte
+++ b/src/lib/Carousel.svelte
@@ -6,16 +6,16 @@
     import Carousel from 'svelte-carousel';
 
     let carousel; // for calling methods of the carousel instance
-        
+
     export let posts;
     export let autoplay = true
     export let autoplayDuration = 3000
     export let autoplayProgressVisible = true
     // TODO:CS: Style-Frage Dots ja/nein? Wenn ja nur ausgewaehlte Beitraege, da zu viele sonst?
     export let dots = false
-    
+
     let error: Error | undefined = undefined
-    
+
     async function get_posts() {
         try {
             posts = await fetch_posts()
@@ -54,4 +54,4 @@
       padding: 2em 1em;
     }
   </style>
-  
\ No newline at end of file
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c4367b31..7e7a30fb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { ChapterMap } from '$lib'
   import { microcopy } from '$lib/stores'
-  
+
   import Icon from '@iconify/svelte'
-  
+
   export let data
-  
+
   const style = `margin-right: 5pt;`
 
   import { Carousel } from '$lib'