From 652f15830dd0b5119211316e768198e4609081ac Mon Sep 17 00:00:00 2001
From: Mario Linz <mario@webmakers.de>
Date: Wed, 15 Jun 2022 11:06:47 +0200
Subject: [PATCH] =?UTF-8?q?M=C3=B6glichkeit,=20in=20die=20Artikel-Details?=
 =?UTF-8?q?=20zu=20springen=20implementiert,=20ohne=20einen=20extra=20URL?=
 =?UTF-8?q?=20Pfad=20zu=20ben=C3=B6tigen.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/collections/articles.yml                  |  6 +-
 .../{ => article}/_article-attachments.yml    |  0
 .../{ => article}/_article-layout-margin.yml  |  0
 .../{ => article}/_article-layout-padding.yml |  0
 .../fields/{ => article}/_article-link.yml    |  0
 .../fields/{ => article}/_article-media.yml   |  0
 .../fields/{ => article}/_article.yml         |  2 +-
 src/components/routes/Content.svelte          | 64 ++++++++++++++++---
 src/components/widgets/Article.svelte         | 19 +++++-
 src/components/widgets/Navigation.svelte      |  4 +-
 src/css/theme-2022/components/article.less    |  1 +
 11 files changed, 78 insertions(+), 18 deletions(-)
 rename api/collections/fields/{ => article}/_article-attachments.yml (100%)
 rename api/collections/fields/{ => article}/_article-layout-margin.yml (100%)
 rename api/collections/fields/{ => article}/_article-layout-padding.yml (100%)
 rename api/collections/fields/{ => article}/_article-link.yml (100%)
 rename api/collections/fields/{ => article}/_article-media.yml (100%)
 rename api/collections/fields/{ => article}/_article.yml (99%)

diff --git a/api/collections/articles.yml b/api/collections/articles.yml
index 96b6267..bed29df 100644
--- a/api/collections/articles.yml
+++ b/api/collections/articles.yml
@@ -114,10 +114,6 @@ permissions:
 #         update:
 #             type: javascript
 #             file: hooks/article/put_return.js
-#     delete:
-#         return:
-#             type: javascript
-#             file: hooks/article/delete_return.js
 
 fields:
-    - !include fields/_article.yml
+    - !include fields/article/_article.yml
diff --git a/api/collections/fields/_article-attachments.yml b/api/collections/fields/article/_article-attachments.yml
similarity index 100%
rename from api/collections/fields/_article-attachments.yml
rename to api/collections/fields/article/_article-attachments.yml
diff --git a/api/collections/fields/_article-layout-margin.yml b/api/collections/fields/article/_article-layout-margin.yml
similarity index 100%
rename from api/collections/fields/_article-layout-margin.yml
rename to api/collections/fields/article/_article-layout-margin.yml
diff --git a/api/collections/fields/_article-layout-padding.yml b/api/collections/fields/article/_article-layout-padding.yml
similarity index 100%
rename from api/collections/fields/_article-layout-padding.yml
rename to api/collections/fields/article/_article-layout-padding.yml
diff --git a/api/collections/fields/_article-link.yml b/api/collections/fields/article/_article-link.yml
similarity index 100%
rename from api/collections/fields/_article-link.yml
rename to api/collections/fields/article/_article-link.yml
diff --git a/api/collections/fields/_article-media.yml b/api/collections/fields/article/_article-media.yml
similarity index 100%
rename from api/collections/fields/_article-media.yml
rename to api/collections/fields/article/_article-media.yml
diff --git a/api/collections/fields/_article.yml b/api/collections/fields/article/_article.yml
similarity index 99%
rename from api/collections/fields/_article.yml
rename to api/collections/fields/article/_article.yml
index 001275b..1277e5c 100644
--- a/api/collections/fields/_article.yml
+++ b/api/collections/fields/article/_article.yml
@@ -24,7 +24,7 @@ subFields:
                 helperText:
                     de: "Der Artikel wird auf der Seite angezeigt."
                     en: "This article is displayed on the page."
-          - !include _locale.yml
+          - !include ../_locale.yml
           - name: tags
             type: string[]
             meta:
diff --git a/src/components/routes/Content.svelte b/src/components/routes/Content.svelte
index a88d114..8a21d7e 100644
--- a/src/components/routes/Content.svelte
+++ b/src/components/routes/Content.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
     import { _ } from "svelte-i18n"
-    import { getContent } from "../../api"
+    import { getContent, getArticles } from "../../api"
     import { generalInfo, currentLang, location } from "../../store"
     import { navigate } from "svelte-routing"
 
     import Image from "../widgets/Image.svelte"
     import ArticlesList from "../widgets/ArticlesList.svelte"
-    // import Article from "../widgets/Article.svelte"
+    import Article from "../widgets/Article.svelte"
 
     export let path: string
+    let oldPath: string = null
 
     let loading = true
     let content: Content
+    let article: TibiArticle
     let connectedContentNotFound: boolean = false
     $: currentDomain = window.location.protocol + "//" + window.location.host
 
@@ -40,6 +42,7 @@
         let apiParams: APIParams = {
             filter,
         }
+
         loading = true
         getContent(apiParams)
             .then((c) => {
@@ -60,6 +63,8 @@
                     content = null
                 }
 
+                oldPath = path
+
                 // Redirect to HOME if no content has been found. So the page 404 content will never shown.
                 if (!content) {
                     navigate("/")
@@ -70,13 +75,59 @@
             })
     }
 
+    const loadArticle = (type?: string) => {
+        let pathParts = path.split("/")
+        let slug = pathParts[pathParts.length - 1]
+
+        // Set default API call filter
+        let filter = {
+            "article.general.locale": $currentLang,
+            "article.content.slug": slug,
+        }
+
+        // Changed filter to find simmilar content for changed language
+        if (type === "changedLanguage") {
+            // filter = {
+            //     tags: { $in: content?.tags },
+            //     locale: $currentLang,
+            // }
+            // delete filter["article.general.locale"]
+            // delete filter["article.content.slug"]
+        }
+
+        // Get content by API call
+        let apiParams: APIParams = {
+            filter,
+        }
+        loading = true
+        getArticles("articles", apiParams)
+            .then((respoonse) => {
+                article = respoonse[0]
+                oldPath = path
+            })
+            .finally(() => {
+                loading = false
+            })
+    }
+
     currentLang.subscribe(() => {
         if (content) {
             loadContent("changedLanguage")
+        } else if (article) {
+            loadArticle("changedLanguage")
         }
     })
 
-    $: if (path) loadContent()
+    $: if (path) {
+        content = null
+        article = null
+
+        if (window.location.pathname.endsWith("/")) {
+            loadContent()
+        } else {
+            loadArticle()
+        }
+    }
 </script>
 
 <svelte:head>
@@ -114,12 +165,9 @@
 
 {#if loading}
     <!-- Loader -->
+{:else if article}
+    <Article entry="{article}" showDetails />
 {:else if content}
-    <!-- 
-    {#each content.blocks || [] as b}
-        {JSON.stringify(b)}
-    {/each}
-    -->
     <ArticlesList path="{path}" tags="{content?.tags}" />
 {:else}
     <div class="page-404">
diff --git a/src/components/widgets/Article.svelte b/src/components/widgets/Article.svelte
index d690cfb..f0fe806 100644
--- a/src/components/widgets/Article.svelte
+++ b/src/components/widgets/Article.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { fade } from "svelte/transition"
     import { _ } from "svelte-i18n"
-    // import { navigate } from "svelte-routing"
+    import { navigate, link } from "svelte-routing"
 
     import TibiArticleMediaFile from "./TibiArticleMediaFile.svelte"
 
@@ -9,6 +8,7 @@
     export let cssClass: string = ""
     export let showDetails: boolean = false
 
+    let path = window.location.pathname
     let article = null
     if (entry) {
         article = entry.article
@@ -201,6 +201,21 @@
 
                     {#if article?.content?.types?.details && showDetails}
                         <div class="article-details">{@html article?.content?.types?.details}</div>
+                    {:else if article?.content?.types?.details}
+                        <a
+                            use:link
+                            href="{`${path}${encodeURIComponent(
+                                article?.content?.slug
+                                    ? article?.content?.slug
+                                          .toLowerCase()
+                                          .replace(/[^a-zA-Z0-9]/g, '-')
+                                          .replaceAll('---', '--')
+                                    : entry.id
+                            )}`}"
+                            class="article-link"
+                        >
+                            {@html article?.link?.text ? article?.link?.text : $_("details")}
+                        </a>
                     {/if}
                 </div>
             </div>
diff --git a/src/components/widgets/Navigation.svelte b/src/components/widgets/Navigation.svelte
index 068d1f3..e830445 100644
--- a/src/components/widgets/Navigation.svelte
+++ b/src/components/widgets/Navigation.svelte
@@ -40,7 +40,7 @@
                     {item.settings.title}
                 </a>
             {:else}
-                <a href="{item.settings.page}" class:active="{'/' + item.settings.page === $location.path}">
+                <a href="{item.settings.page + '/'}" class:active="{'/' + item.settings.page === $location.path}">
                     {item.settings.title}
                 </a>
             {/if}
@@ -70,7 +70,7 @@
                 {:else}
                     <div class="nav-item">
                         <a
-                            href="{item.settings.page}"
+                            href="{item.settings.page + '/'}"
                             on:click="{() => (showMobileNav = false)}"
                             class:active="{'/' + item.settings.page === $location.path}"
                         >
diff --git a/src/css/theme-2022/components/article.less b/src/css/theme-2022/components/article.less
index 0823924..eecb8c4 100644
--- a/src/css/theme-2022/components/article.less
+++ b/src/css/theme-2022/components/article.less
@@ -22,6 +22,7 @@ article,
     }
 
     .article-link {
+        cursor: pointer;
         text-decoration: underline;
     }
 }