Feature/blog carousel

package.json

@@ -24,6 +24,7 @@
     "@sveltejs/adapter-static": "2.0.3",
     "@sveltejs/kit": "1.25.1",
     "@sveltejs/vite-plugin-svelte": "2.4.6",
+    "@splidejs/svelte-splide": "0.2.9",
     "@types/events": "3.0.1",
     "@types/mapbox-gl": "2.7.15",
     "@types/mapbox__mapbox-gl-geocoder": "4.7.5",
@@ -37,6 +38,7 @@
     "prettier": "3.0.3",
     "prettier-plugin-svelte": "3.0.3",
     "svelte": "4.2.1",
+    "svelte-carousel": "1.0.25",
     "svelte-check": "3.5.2",
     "svelte-multiselect": "10.2.0",
     "svelte-preprocess": "5.0.4",

src/app.d.ts

@@ -29,3 +29,5 @@ declare module '*messages.yml' {
 }
 
 declare module '*package.json'
+
+declare module 'svelte-carousel'

src/lib/Carousel.svelte

@@ -0,0 +1,57 @@
+<script>
+    import { PostPreview } from '$lib'
+    import { fetch_posts } from '$lib/fetch'
+
+    // Package source: https://www.npmjs.com/package/svelte-carousel
+    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()
+        } catch (err) {
+            error = err as Error
+            console.error('Failed to fetch posts:', err)
+        }
+    }
+</script>
+
+{#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>
+    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>
+

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'

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. -->
@@ -81,6 +84,11 @@
   {@html data.page.body}
 </article>
 
+<!-- TODO:CS: Kann man das Carousel eleganter auf content Breite bringen als mit "article" zu verpacken? -->
+<article>
+  <Carousel/>
+</article>
+
 <style>
   h1 img {
     margin: 3ex auto;