Starter Projekt angefangen, etwas aufzubohren und ein paar grundlegend benötigte Collections, Teheming-Styles und Komponenten hinzugefügt. (WIP)

src/components/widgets/Article.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { navigate } from "svelte-routing"
+
+    import { apiBaseURL } from "../../config"
+
+    export let article: SWArticle
+    export let cssClass: string = ""
+    export let showDetails: boolean = false
+
+    const getImageSrc = () => {
+        return `${apiBaseURL}articles/${article?.id}/${article?.image?.src}?filter=l`
+    }
+</script>
+
+<article class="{article?.position} {cssClass}">
+    {#if article?.position !== "content"}
+        <div
+            class="article-image"
+            style="background-image: url({getImageSrc()});"
+        >
+            {#if article?.title}
+                <div class="article-title">{@html article?.title}</div>
+            {/if}
+            {#if article?.position === "top" || article?.position === "end-of-content"}
+                {#if article?.subtitle}
+                    <div class="article-subtitle">
+                        {@html article?.subtitle}
+                    </div>
+                {/if}
+            {/if}
+        </div>
+    {/if}
+
+    {#if article?.position !== "top"}
+        <div class="article-content">
+            {#if article?.position === "content"}
+                {#if article?.title}
+                    <div class="article-title">{@html article?.title}</div>
+                {/if}
+            {/if}
+            {#if article?.position === "content" || article?.position === "top-of-content"}
+                {#if article?.subtitle}
+                    <div class="article-subtitle mb-md">
+                        {@html article?.subtitle}
+                    </div>
+                {/if}
+            {/if}
+
+            {#if !showDetails && article?.content}
+                <div class="mb-lg">
+                    {@html article?.content}
+                </div>
+            {/if}
+
+            {#if showDetails && article?.details?.length}
+                <div class="mb-lg">
+                    {@html article?.details}
+                </div>
+            {/if}
+        </div>
+    {/if}
+
+    {#if !showDetails && article?.details}
+        <div
+            class="article-link"
+            on:click="{() => {
+                navigate('/articles/' + article?.id)
+            }}"
+        >
+            Details
+        </div>
+    {/if}
+</article>