Typ Select für Artikel hinzugefügt. Artikel-Details Komponenten sind nun für jeden Typ verfügbar, wenn benötigt.

api/collections/articles.yml

@@ -21,6 +21,7 @@ meta:
           columns:
               - article.general.public
               - article.content.title
+              - article.general.type
               - article.general.sort
               - source: article.general.locale
                 type: flag
@@ -32,6 +33,7 @@ meta:
               - label: { de: "Titel", en: "Title" }
                 source: article.content.title
                 filter: true
+              - article.general.type
               - article.general.sort
               - source: article.general.locale
                 type: flag

api/collections/fields/article/_article.yml

@@ -24,6 +24,21 @@ subFields:
                 helperText:
                     de: "Der Artikel wird auf der Seite angezeigt."
                     en: "This article is displayed on the page."
+          - name: type
+            type: string
+            meta:
+                filter: true
+                helperText:
+                    de: "Definiert allgemeinen Typ des Artikels."
+                    en: "Defines general type of the article."
+                widget: select
+                label:
+                    de: Typ des Artikels
+                    en: Article type
+                defaultValue: default
+                choices:
+                    - { id: "default", name: { de: "Artikel", en: "Article" } }
+                    - { id: "news", name: { de: "News", en: "News" } }
           - !include ../_locale.yml
           - name: tags
             type: string[]
@@ -158,10 +173,13 @@ subFields:
           - name: variant
             type: string
             meta:
+                helperText:
+                    de: "Definiert das visuelle Erscheinungsbild der aller Teaser-Informationen des Artikels."
+                    en: "Defines the visual appearance of all teaser information of the article."
                 widget: select
                 label:
-                    de: Erscheinungsbild
-                    en: Appearance
+                    de: Teaser Erscheinungsbild
+                    en: Teaser Layout
                 defaultValue: default
                 choices:
                     - { id: "top", name: { de: "Artikelbild oben", en: "Article picture top" } }

src/components/routes/ArticleDetails.svelte

@@ -1,34 +1,9 @@
 <script lang="ts">
-    import { currentLang } from "../../store"
-    import { getArticles } from "../../api"
+    import details from "./../widgets/details"
 
-    import Article from "../widgets/Article.svelte"
-
-    export let path: string
-
-    let articleEntries: CollectionEntry[] = []
-
-    $: if ($currentLang) {
-        let urlParts = path.split("/")
-        let slug = urlParts[urlParts.length - 1]
-
-        getArticles("articles", {
-            filter: {
-                "article.general.locale": $currentLang,
-                "article.content.slug": slug,
-            },
-        }).then((response) => {
-            articleEntries = response
-        })
-    }
+    export let entry: TibiArticle
 </script>
 
-<div class="container">
-    <div class="row">
-        <div class="col-md-12">
-            {#each articleEntries || [] as entry}
-                <Article entry="{entry}" />
-            {/each}
-        </div>
-    </div>
-</div>
+{#if entry}
+    <svelte:component this="{details[entry?.article?.general?.type] || details.default}" entry="{entry}" />
+{/if}

src/components/routes/Content.svelte

@@ -6,10 +6,9 @@
 
     import Image from "../widgets/Image.svelte"
     import ArticlesList from "../widgets/ArticlesList.svelte"
-    import Article from "../widgets/Article.svelte"
+    import ArticleDetails from "../routes/ArticleDetails.svelte"
 
     export let path: string
-    let oldPath: string = null
 
     let loading = true
     let content: Content
@@ -63,8 +62,6 @@
                     content = null
                 }
 
-                oldPath = path
-
                 // Redirect to HOME if no content has been found. So the page 404 content will never shown.
                 if (!content) {
                     navigate("/")
@@ -103,7 +100,6 @@
         getArticles("articles", apiParams)
             .then((respoonse) => {
                 article = respoonse[0]
-                oldPath = path
             })
             .finally(() => {
                 loading = false
@@ -166,7 +162,7 @@
 {#if loading}
     <!-- Loader -->
 {:else if article}
-    <Article entry="{article}" showDetails />
+    <ArticleDetails entry="{article}" />
 {:else if content}
     <ArticlesList path="{path}" tags="{content?.tags}" />
 {:else}

src/components/widgets/details/Default.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    export let entry: TibiArticle
+</script>
+
+{#if entry}
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="article-details {entry?.article?.general?.type}">
+                    {#if entry?.article?.content?.title}
+                        <h1 class="article-title">{@html entry?.article?.content?.title}</h1>
+                    {/if}
+
+                    {#if entry?.article?.content?.subtitle}
+                        <div class="article-subtitle">{@html entry?.article?.content?.subtitle}</div>
+                    {/if}
+
+                    {#if entry?.article?.content?.types?.teaser}
+                        <div class="article-teaser">{@html entry?.article?.content?.types?.teaser}</div>
+                    {/if}
+
+                    {#if entry?.article?.content?.types?.details}
+                        <div class="article-details">{@html entry?.article?.content?.types?.details}</div>
+                    {/if}
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}

src/components/widgets/details/News.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    export let entry: TibiArticle
+</script>
+
+{#if entry}
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="article-details {entry?.article?.general?.type}">
+                    {#if entry?.article?.content?.title}
+                        <h1 class="article-title">{@html entry?.article?.content?.title}</h1>
+                    {/if}
+
+                    {#if entry?.article?.content?.subtitle}
+                        <div class="article-subtitle">{@html entry?.article?.content?.subtitle}</div>
+                    {/if}
+
+                    {#if entry?.article?.content?.types?.teaser}
+                        <div class="article-teaser">{@html entry?.article?.content?.types?.teaser}</div>
+                    {/if}
+
+                    {#if entry?.article?.content?.types?.details}
+                        <div class="article-details">{@html entry?.article?.content?.types?.details}</div>
+                    {/if}
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}

src/components/widgets/details/index.ts

@@ -0,0 +1,7 @@
+import Default from "./Default.svelte"
+import News from "./News.svelte"
+
+export default {
+    default: Default,
+    news: News,
+}

src/css/theme-2022/components/article.less

@@ -26,3 +26,14 @@ article,
         text-decoration: underline;
     }
 }
+
+.article-details {
+    &.default {
+        background: #000;
+        color: #fff;
+    }
+
+    &.news {
+        background: #fc0;
+    }
+}

types/global.d.ts

@@ -75,6 +75,7 @@ interface TibiArticle {
     article: {
         general: {
             public: boolean
+            type: string
             locale: string
             publish_date: {
                 from: string