Neue Komponente für Article-Media-Image sowie eine allgemeine Image Komponente. Article-Komponente WorkInProgress.

src/components/routes/Home.svelte

@@ -1,45 +1,36 @@
 <script lang="ts">
     import * as animateScroll from "svelte-scrollto"
 
-    import { generalInfo } from "../../store"
+    import { generalInfo, currentLang } from "../../store"
+    import { getArticles } from "../../api"
 
     import GoogleMaps from "../widgets/GoogleMaps.svelte"
     import ScrollTo from "../widgets/ScrollTo.svelte"
     import ContactForm from "../widgets/ContactForm.svelte"
     import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
+    import Article from "../widgets/Article.svelte"
 
     let expandedForm: string = "recipe"
-</script>
+    let articleEntries: CollectionEntry[] = []
 
-<!-- <svelte:head>
-    {#if $generalInfo?.meta?.metaTitle}
-        <title>{$generalInfo?.meta?.metaTitle}</title>
-    {/if}
-    {#if $generalInfo?.meta?.metaDescription}
-        <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
-    {/if}
-    {#if $generalInfo?.meta?.metaKeywords}
-        <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
-    {/if}
-    {#if $generalInfo?.person?.firstname || $generalInfo?.person?.lastname}
-        <meta
-            name="author"
-            content="{$generalInfo?.person?.firstname ? $generalInfo?.person?.firstname : ''} {$generalInfo?.person
-                ?.lastname
-                ? $generalInfo?.person?.lastname
-                : ''}"
-        />
-    {/if}
-    {#if $generalInfo?.meta?.metaTagRobots}
-        <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
-    {/if}
-    {#if $generalInfo?.media?.favicon}
-        <link rel="shortcut icon" type="image/x-icon" href="{$generalInfo?.media?.favicon.src}" />
-    {/if}
-</svelte:head> -->
+    $: if ($currentLang) {
+        getArticles("articles", {
+            "article.general.locale": $currentLang,
+        }).then((response) => {
+            articleEntries = response
+        })
+    }
+</script>
 
 <section class="contact">
     <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                {#each articleEntries || [] as entry}
+                    <Article entry="{entry}" />
+                {/each}
+            </div>
+        </div>
         <div class="row">
             <div class="col-md-12">
                 <GeneralMediaImage id="test1" />

src/components/widgets/Article.svelte

@@ -1,73 +1,77 @@
 <script lang="ts">
-    import { navigate } from "svelte-routing"
+    // import { navigate } from "svelte-routing"
 
     import { apiBaseURL } from "../../config"
+    import TibiArticleMediaFile from "./TibiArticleMediaFile.svelte"
 
-    export let article: SWArticle
+    export let entry: CollectionEntry
     export let cssClass: string = ""
     export let showDetails: boolean = false
 
-    const getImageSrc = () => {
-        return `${apiBaseURL}articles/${article?.id}/${article?.image?.src}?filter=l`
+    let article = entry.article
+    let marginClasses: string = ""
+    let paddingClasses: string = ""
+
+    $: if (article) {
+        marginClasses = Object.values(article?.layout?.properties?.margin).join(" ").replace("  ", " ")
+        paddingClasses = Object.values(article?.layout?.properties?.padding).join(" ").replace("  ", " ")
     }
 </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 article}
+    <article class="{cssClass} {article?.layout?.variant} {marginClasses} {paddingClasses}">
+        {#if article?.layout?.variant === "default"}
+            {#if article?.content?.types?.media?.files?.length}
+                <TibiArticleMediaFile
+                    collectionName="articles"
+                    entryId="{entry.id}"
+                    mediaFile="{article?.content?.types?.media?.files[0]}"
+                />
             {/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 article?.content?.title}
+                <div class="article-title">{@html article?.content?.title}</div>
             {/if}
 
-            {#if !showDetails && article?.content}
-                <div class="mb-lg">
-                    {@html article?.content}
+            {#if article?.content?.subtitle}
+                <div class="article-subtitle">{@html article?.content?.subtitle}</div>
+            {/if}
+
+            {#if article?.content?.types?.teaser}
+                <div class="article-teaser">{@html article?.content?.types?.teaser}</div>
+            {/if}
+
+            {#if article?.content?.types?.details && showDetails}
+                <div class="article-details">{@html article?.content?.types?.details}</div>
+            {/if}
+        {:else if article?.layout?.variant === "left"}
+            <div class="row">
+                <div class="col-md-4">
+                    {#if article?.content?.types?.media?.files?.length}
+                        <TibiArticleMediaFile
+                            collectionName="articles"
+                            entryId="{entry.id}"
+                            mediaFile="{article?.content?.types?.media?.files[0]}"
+                        />
+                    {/if}
                 </div>
-            {/if}
+                <div class="col-md-8">
+                    {#if article?.content?.title}
+                        <div class="article-title">{@html article?.content?.title}</div>
+                    {/if}
 
-            {#if showDetails && article?.details?.length}
-                <div class="mb-lg">
-                    {@html article?.details}
+                    {#if article?.content?.subtitle}
+                        <div class="article-subtitle">{@html article?.content?.subtitle}</div>
+                    {/if}
+
+                    {#if article?.content?.types?.teaser}
+                        <div class="article-teaser">{@html article?.content?.types?.teaser}</div>
+                    {/if}
+
+                    {#if article?.content?.types?.details && showDetails}
+                        <div class="article-details">{@html article?.content?.types?.details}</div>
+                    {/if}
                 </div>
-            {/if}
-        </div>
-    {/if}
-
-    {#if !showDetails && article?.details}
-        <div
-            class="article-link"
-            on:click="{() => {
-                navigate('/articles/' + article?.id)
-            }}"
-        >
-            Details
-        </div>
-    {/if}
-</article>
+            </div>
+        {/if}
+    </article>
+{/if}

src/components/widgets/ContactInformation.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-    import { generalInfo } from "../../store"
-</script>
-
-<div class="contact-information" id="contact-information">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-12">...</div>
-        </div>
-    </div>
-</div>

src/components/widgets/Image.svelte

@@ -9,7 +9,7 @@
 </script>
 
 {#if collectionName && entryId && file}
-    {#if file.src.includes(";base64,")}
+    {#if file?.src?.includes(";base64,")}
         <img src="{file.src}" alt="{alt ? alt + ' - ' : ''}{file.path}" class="{cssClass}" />
     {:else}
         <img
@@ -19,3 +19,30 @@
         />
     {/if}
 {/if}
+
+<!-- <picture>
+    <source
+        media="(min-width: 1400px)"
+        data-srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
+        srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
+    />
+    <source
+        media="(min-width: 768px)"
+        data-srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
+        srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
+    />
+    <source
+        media="(min-width: 400px)"
+        data-srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
+        srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
+    />
+    <source
+        data-srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3-400x267.jpg"
+        srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3-400x267.jpg"
+    />
+    <img
+        data-src="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3-400x267.jpg"
+        alt="fresh IT GmbH"
+        src="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3-400x267.jpg"
+    />
+</picture> -->

src/components/widgets/TibiArticleMediaFile.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../config"
+
+    import Image from "./Image.svelte"
+
+    export let collectionName: string = null
+    export let entryId: string = null
+    export let mediaFile: TibiArticleImage = null
+    export let cssClass: string = ""
+</script>
+
+<Image collectionName="{collectionName}" entryId="{entryId}" file="{mediaFile.file}" cssClass="{cssClass}" />