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

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,
+}