From 1bfa0d8b1b899973c944ba6913b4ac25bfbbe640 Mon Sep 17 00:00:00 2001
From: Mario Linz <mario@webmakers.de>
Date: Fri, 8 Jul 2022 14:44:23 +0200
Subject: [PATCH] =?UTF-8?q?Artikel=20rendern=20slug=20f=C3=BCr=20eventuell?=
 =?UTF-8?q?e=20Anker=20Links.=20Navigation=20vereinfacht=20und=20Item=20in?=
 =?UTF-8?q?=20eigene=20Komponente=20ausgelagert,=20um=20sp=C3=A4ter=20sch?=
 =?UTF-8?q?=C3=B6ner=20eine=20Multi-Level=20Navigation=20erstellen=20zu=20?=
 =?UTF-8?q?k=C3=B6nnen.=20Label=20in=20Navigation-Collection=20umbenannt.?=
 =?UTF-8?q?=20Home-Page=20Komponente=20vereinfacht.=20Content-Komponente?=
 =?UTF-8?q?=20f=C3=BCr=20eventuelles=20Animated-Ancher-Scrolling=20erweite?=
 =?UTF-8?q?rt.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/collections/navigation.yml                |  2 +-
 src/components/App.svelte                     | 29 ++++++-
 src/components/routes/Content.svelte          | 21 ++++++
 src/components/routes/Home.svelte             | 48 +-----------
 src/components/widgets/Article.svelte         |  5 +-
 src/components/widgets/Navigation.svelte      | 75 ++-----------------
 src/components/widgets/NavigationItem.svelte  | 63 ++++++++++++++++
 src/css/theme-2022/components/article.less    |  3 -
 src/css/theme-2022/components/navigation.less |  2 +
 9 files changed, 127 insertions(+), 121 deletions(-)
 create mode 100644 src/components/widgets/NavigationItem.svelte

diff --git a/api/collections/navigation.yml b/api/collections/navigation.yml
index 60d1257..29654ed 100644
--- a/api/collections/navigation.yml
+++ b/api/collections/navigation.yml
@@ -144,7 +144,7 @@ x-url: &url
               defaultValue: "default"
               choices:
                   - { id: "default", name: "Gleicher Tab oder Seite (ohne Refresh)" }
-                  - { id: "_self", name: "Gleicher Tab oder Seite (Standardwert)" }
+                  - { id: "_self", name: "Gleicher Tab oder Seite (mit Refresh)" }
                   - { id: "_blank", name: "Neuer Tab oder Fenster" }
                   - { id: "_parent", name: "Elternfenster" }
 
diff --git a/src/components/App.svelte b/src/components/App.svelte
index ab4867c..e82e53c 100644
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@@ -2,7 +2,7 @@
     import { _ } from "svelte-i18n"
     import { Router, Route } from "svelte-routing"
     import { scrollToTop } from "svelte-scrollto"
-    import { location } from "../store"
+    import { location, generalInfo } from "../store"
 
     import Home from "./routes/Home.svelte"
     import Content from "./routes/Content.svelte"
@@ -31,6 +31,33 @@
     if (typeof window !== "undefined") console.log("App initialized")
 </script>
 
+<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 && $generalInfo?.meta?.metaTagRobots.length}
+        <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>
+
 <Header />
 
 <Router url="{url}">
diff --git a/src/components/routes/Content.svelte b/src/components/routes/Content.svelte
index 3405df2..04bf213 100644
--- a/src/components/routes/Content.svelte
+++ b/src/components/routes/Content.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { afterUpdate } from "svelte"
+    import * as animateScroll from "svelte-scrollto"
     import { _ } from "svelte-i18n"
     import { getContent, getArticles } from "../../api"
     import { generalInfo, currentLang, location } from "../../store"
@@ -67,6 +69,7 @@
             })
             .finally(() => {
                 loading = false
+                scrollToAnchor()
             })
     }
 
@@ -103,6 +106,7 @@
             })
             .finally(() => {
                 loading = false
+                scrollToAnchor()
             })
     }
 
@@ -130,6 +134,23 @@
             loadArticle()
         }
     }
+
+    afterUpdate(() => {
+        scrollToAnchor()
+    })
+
+    const scrollToAnchor = () => {
+        if (content && window.location.hash) {
+            window.setTimeout(() => {
+                animateScroll.scrollTo({
+                    delay: 100,
+                    element: window.location.hash,
+                    offset: -200,
+                    onDone: () => {},
+                })
+            }, 500)
+        }
+    }
 </script>
 
 <svelte:head>
diff --git a/src/components/routes/Home.svelte b/src/components/routes/Home.svelte
index 983662c..b4257c1 100644
--- a/src/components/routes/Home.svelte
+++ b/src/components/routes/Home.svelte
@@ -1,44 +1,14 @@
 <script lang="ts">
     import * as animateScroll from "svelte-scrollto"
 
-    import { generalInfo } from "../../store"
+    // import { generalInfo } from "../../store"
 
     // import ContactForm from "../widgets/ContactForm.svelte"
     // import GoogleMaps from "../widgets/GoogleMaps.svelte"
-    import ScrollTo from "../widgets/ScrollTo.svelte"
-    import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
+    // import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
     import ArticlesList from "../widgets/ArticlesList.svelte"
-
-    let expandedForm: string = "recipe"
 </script>
 
-<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 && $generalInfo?.meta?.metaTagRobots.length}
-        <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>
-
 <ArticlesList pages="{['/']}" />
 
 <!-- <GeneralMediaImage id="test1" /> -->
@@ -46,17 +16,3 @@
 <!-- <ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" /> -->
 <!-- <ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" /> -->
 <!-- <GoogleMaps /> -->
-
-<ScrollTo
-    on:scrollTo="{(e) => {
-        expandedForm = null
-        animateScroll.scrollTo({
-            delay: 100,
-            element: '#' + e.detail.element,
-            offset: -200,
-            onDone: () => {
-                expandedForm = e.detail.element
-            },
-        })
-    }}"
-/>
diff --git a/src/components/widgets/Article.svelte b/src/components/widgets/Article.svelte
index f0fe806..7a53d84 100644
--- a/src/components/widgets/Article.svelte
+++ b/src/components/widgets/Article.svelte
@@ -66,7 +66,10 @@
 </script>
 
 {#if article && published}
-    <article class="{cssClass} {article?.layout?.variant} {marginClasses} {paddingClasses}">
+    <article
+        class="{cssClass} {article?.layout?.variant} {marginClasses} {paddingClasses}"
+        id="{article?.content?.slug}"
+    >
         {#if article?.layout?.variant === "top"}
             {#if article?.content?.types?.media?.files?.length}
                 <TibiArticleMediaFile
diff --git a/src/components/widgets/Navigation.svelte b/src/components/widgets/Navigation.svelte
index 1de82da..66ce903 100644
--- a/src/components/widgets/Navigation.svelte
+++ b/src/components/widgets/Navigation.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-    import * as animateScroll from "svelte-scrollto"
     import Icon from "mdi-svelte"
     import { mdiMenu } from "@mdi/js"
 
-    import { links, link } from "svelte-routing"
-    import { navigations, currentLang, location } from "../../store"
+    import { navigations, currentLang } from "../../store"
 
     import LanguageChooser from "./LanguageChooser.svelte"
+    import NavigationItem from "./NavigationItem.svelte"
 
     export let ident = "main"
 
@@ -26,36 +25,9 @@
 <LanguageChooser />
 
 {#if navigation}
-    <nav class="{ident}" use:links>
+    <nav class="{ident}">
         {#each navigation?.items || [] as item}
-            {#if !item.settings.url.hidden}
-                {#if item.settings.url.url}
-                    {#if item.settings.url.target === "default"}
-                        <a
-                            use:link
-                            href="{item.settings.url.url}"
-                            class:active="{'/' + item.settings.page === $location.path}"
-                        >
-                            {item.settings.title}
-                        </a>
-                    {:else}
-                        <a
-                            href="{item.settings.url.url}"
-                            target="{item.settings.url.target}"
-                            on:click="{() => {
-                                animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
-                                showMobileNav = false
-                            }}"
-                        >
-                            {item.settings.title}
-                        </a>
-                    {/if}
-                {:else}
-                    <a href="{item.settings.page + '/'}" class:active="{'/' + item.settings.page === $location.path}">
-                        {item.settings.title}
-                    </a>
-                {/if}
-            {/if}
+            <NavigationItem item="{item}" />
         {/each}
     </nav>
 
@@ -64,44 +36,9 @@
             <Icon path="{mdiMenu}" size="2" />
         </div>
 
-        <nav class="{ident}-mobile" class:show="{showMobileNav}" use:links>
+        <nav class="{ident}-mobile" class:show="{showMobileNav}">
             {#each navigation?.items || [] as item}
-                {#if !item.settings.url.hidden}
-                    {#if item.settings.url.url}
-                        {#if item.settings.url.target === "default"}
-                            <a
-                                use:link
-                                href="{item.settings.url.url}"
-                                class:active="{'/' + item.settings.page === $location.path}"
-                            >
-                                {item.settings.title}
-                            </a>
-                        {:else}
-                            <div class="nav-item">
-                                <a
-                                    href="{item.settings.url.url}"
-                                    target="{item.settings.url.target}"
-                                    on:click="{() => {
-                                        animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
-                                        showMobileNav = false
-                                    }}"
-                                >
-                                    {item.settings.title}
-                                </a>
-                            </div>
-                        {/if}
-                    {:else}
-                        <div class="nav-item">
-                            <a
-                                href="{item.settings.page + '/'}"
-                                on:click="{() => (showMobileNav = false)}"
-                                class:active="{'/' + item.settings.page === $location.path}"
-                            >
-                                {item.settings.title}
-                            </a>
-                        </div>
-                    {/if}
-                {/if}
+                <NavigationItem item="{item}" />
             {/each}
         </nav>
     {/if}
diff --git a/src/components/widgets/NavigationItem.svelte b/src/components/widgets/NavigationItem.svelte
new file mode 100644
index 0000000..f797207
--- /dev/null
+++ b/src/components/widgets/NavigationItem.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    // import * as animateScroll from "svelte-scrollto"
+    import { link, navigate } from "svelte-routing"
+    import { location } from "../../store"
+
+    export let item: NavigationItem
+
+    const isActive = (itemPath: string, locationPath: string): boolean | any => {
+        itemPath = "/" + itemPath + (locationPath.endsWith("/") ? "/" : "")
+        locationPath = (locationPath.startsWith("/") ? "" : "/") + locationPath
+
+        if (!locationPath.endsWith("/")) {
+            return locationPath.startsWith(itemPath)
+        }
+
+        return itemPath === locationPath
+    }
+
+    const onClickInternalLink = (item: NavigationItem) => {
+        let url = ""
+        if (item.settings?.page) {
+            url += item.settings?.page
+        }
+        if (item.settings?.url?.url) {
+            url += (url.endsWith("/") ? "" : "/") + item.settings.url.url
+        }
+
+        if (item.settings?.page) {
+            navigate(url, { replace: true })
+        }
+    }
+
+    const getInternalUrl = (item): string => {
+        if (item.settings.page === "/") {
+            return item.settings.page
+        }
+
+        return item.settings.page + "/"
+    }
+</script>
+
+{#if !item.settings.url.hidden}
+    {#if item.settings.url.url}
+        {#if item.settings.url.target === "default"}
+            <a
+                use:link
+                href="{getInternalUrl(item)}"
+                class:active="{isActive(item.settings.page, $location.path)}"
+                on:click|stopPropagation="{() => onClickInternalLink(item)}"
+            >
+                {item.settings.title}
+            </a>
+        {:else}
+            <a href="{item.settings.url.url}" target="{item.settings.url.target}">
+                {item.settings.title}
+            </a>
+        {/if}
+    {:else}
+        <a use:link href="{getInternalUrl(item)}" class:active="{isActive(item.settings.page, $location.path)}">
+            {item.settings.title}
+        </a>
+    {/if}
+{/if}
diff --git a/src/css/theme-2022/components/article.less b/src/css/theme-2022/components/article.less
index c01b740..03c30aa 100644
--- a/src/css/theme-2022/components/article.less
+++ b/src/css/theme-2022/components/article.less
@@ -29,11 +29,8 @@ article,
 
 .article-details {
     &.default {
-        background: #000;
-        color: #fff;
     }
 
     &.news {
-        background: #fc0;
     }
 }
diff --git a/src/css/theme-2022/components/navigation.less b/src/css/theme-2022/components/navigation.less
index 1be2da4..d5bb441 100644
--- a/src/css/theme-2022/components/navigation.less
+++ b/src/css/theme-2022/components/navigation.less
@@ -56,6 +56,8 @@ header {
             text-decoration: none;
             transition: @transition-default;
             font-weight: 500;
+            border: 1px solid @primary;
+            padding: 0 @space-xs;
 
             &:hover {
                 color: @primary;