Prototype Article und Theme Files hinzugefügt

src/components/PrototypeArticle.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { generalInformation } from "../store"
+    import { apiBaseURL } from "../config"
+
+    export let article: PrototypeArticle
+    export let details: boolean = false
+
+    const a = article.article
+    let cssClasses: string = "p_article"
+
+    cssClasses += a.layout.variant ? " p_article-" + a.layout.variant : ""
+    cssClasses += " " + Object.values(a.layout.margin).join(" ")
+    cssClasses += " " + Object.values(a.layout.padding).join(" ")
+
+    const getImageAlt = (image): string => {
+        if (image.alternateText) {
+            return image.alternateText
+        }
+        if (image.title) {
+            return image.title
+        }
+
+        return a.content.title
+    }
+
+    const getImageSrc = (file) => {
+        const url = `${apiBaseURL}prototype_articles/${file.id}/${file.file.path}?filter=l`
+        console.log(url, file)
+        return url
+    }
+</script>
+
+{#if a.general.public}
+    <article class="{cssClasses}">
+        {#if !a.layout.variant || a.layout.variant === "top-left"}
+            {#if a.general.categories}
+                <div class="p_article-categories">
+                    {#each a.general.categories || [] as c}
+                        <span class="p_article-category">{c}</span>
+                    {/each}
+                </div>
+            {/if}
+            {#if a.content.types.contentMedia.mediaFiles}
+                <div class="p_article-images">
+                    {#each a.content.types.contentMedia.mediaFiles || [] as image}
+                        <!-- {JSON.stringify(image)} -->
+                        {#if image?.file?.path}
+                            {getImageSrc(image)}
+                            <!-- <img 
+                                src="{getImageSrc(image?.file)}" 
+                                id="{image?.id ? image?.id : ''}" 
+                                alt="{getImageAlt(image)}"
+                                class="p_article-image"
+                            /> -->
+                        {/if}
+                        {#if image?.caption}
+                            <div class="p_article-image-caption">{image?.caption}</div>
+                        {/if}
+                    {/each}
+                </div>
+            {/if}
+
+            {#if a.content.title}
+                <div class="p_article-title">{a.content.title}</div>
+            {/if}
+            {#if a.content.subtitle}
+                <div class="p_article-subtitle">{a.content.subtitle}</div>
+            {/if}
+            {#if a.content.types.teaser}
+                <div class="p_article-teaser">
+                    {@html a.content.types.teaser}
+                </div>
+            {/if}
+            {#if details && a.content.types.details}
+                <div class="p_article-details">
+                    {@html a.content.types.details}
+                </div>
+            {/if}
+            {#if a.link.url}
+                <a href="{a.link.url}" target="{a.link.target}">
+                    {a.link.text ? a.link.text : a.link.url}
+                </a>
+            {/if}
+            {#if a.content.types.contentAttachments.attachments}
+                <div class="p_article-attachments">
+                    {#each a.content.types.contentAttachments.attachments || [] as attachment}
+                        <a href="{attachment.file.src}" download="{attachment.file.path}" class="p_article-attachment">
+                            {attachment.title ? attachment.title : attachment.file.path}
+                        </a>
+                    {/each}
+                </div>
+            {/if}
+        {/if}
+    </article>
+{/if}

src/components/routes/PrototypeArticles.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { getPrototypeArticles } from "../../api"
+
+    import Sidebar from "../page/Sidebar.svelte"
+    import PrototypeArticle from "../page/PrototypeArticle.svelte"
+
+    let articles: PrototypeArticle[] | []
+
+    const getArticles = async () => {
+        articles = await getPrototypeArticles()
+    }
+    getArticles()
+    
+</script>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-10">
+            
+            <div>
+                {#each articles || [] as article}
+                    <PrototypeArticle article="{article}" />
+                {/each}
+            </div>
+
+        </div>
+        <div class="col-md-2">
+            <Sidebar />
+        </div>
+    </div>
+</div>