Content-Seiten und Language Chooser + Collections so überarbeitet, dass ein Umschalten zwischen Sprachen und Pages möglich ist. Collection der Seiten wurde um eine Priorität erweitert. Navigation zeigt aktives Item an. Entsprechende CSS Klassen angepasst und für neue Projekte sauberer strukturiert.

api/collections/content.yml

@@ -112,7 +112,7 @@ fields:
       meta:
           helperText:
               de: "Entsprechende Seiten in einer anderen Sprache, die mit den selben zugewiesenen Stichworten gekennzeichnet sind, können bei Umschaltung der Seitensprache gefunden werden."
-              en: ""
+              en: "Corresponding pages in another language, marked with the same assigned keywords, can be found when switching the page language."
           widget: chipArray
           label:
               de: Verknüpfungs-Stichworte
@@ -133,6 +133,14 @@ fields:
           helperText:
               de: "Der Pfad muss eindeutig sein und ohne ein Slash (/) beginnen und enden."
               en: "The path must be unique and must start and end without a slash (/)."
+    - name: priority
+      type: number
+      meta:
+          defaultValue: [0]
+          label: { de: "Priorität", en: "Priority" }
+          helperText:
+              de: "Sind mehr als ein Stichwort mit einer Seite verknüpft, führt die Priorität (z.B.: eine Zahl von 0..10..x) der gefundenen Seiten zu einer automatischen Vorauswahl aus den gefundenen Seiten."
+              en: "If more than one keyword is linked to a page, the priority (e.g. a number 0..10..x) of the pages found leads to an automatic preselection from the pages found."
     - name: blocks
       type: object[]
       meta:

src/api.ts

@@ -186,13 +186,18 @@ export const sendEmail = async (type: string = "contactForm", data: any, noToken
     })
 }
 
-export const getContent = async (path: string, lang: string, filter?: APIParams): Promise<Content> => {
+export const getContent = async (locale: string, filter?: APIParams, params?: APIParams): Promise<Content[]> => {
     const c = await api<Content[]>("content", {
-        limit: 1,
+        // limit: 1,
-        filter: { path, locale: lang, ...filter },
+        params: {
+            sort: "priority",
+            ...params,
+        },
+        filter: { locale, ...filter },
+        sort: "-priority",
     })
     if (c?.data?.length) {
-        return c.data[0]
+        return c.data
     }
     return null
 }

src/components/routes/Content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { getContent } from "../../api"
-    import { generalInfo, currentLang } from "../../store"
+    import { generalInfo, currentLang, location } from "../../store"
+    import { navigate } from "svelte-routing"
 
     import Image from "../widgets/Image.svelte"
 
@@ -9,19 +10,30 @@
     let loading = true
     let content: Content
     let currentDomain = window.location.protocol + "//" + window.location.host
+    let oldLocation: string
 
-    const load = () => {
+    const load = (type?: string) => {
-        let filter = {}
+        let filter = {
-        if (content?.tags) {
+            path,
+        }
+
+        if (type === "changedLanguage" && content?.tags) {
             filter = {
                 tags: { $in: content?.tags },
             }
+            delete filter.path
         }
 
         loading = true
-        getContent(path, $currentLang, filter)
+        getContent($currentLang, filter)
             .then((c) => {
-                content = c
+                if (c && c.length) {
+                    if (type === "changedLanguage") {
+                        navigate("/" + c[0].path + $location.search, { replace: true })
+                    } else {
+                        content = c[0]
+                    }
+                }
             })
             .finally(() => {
                 loading = false
@@ -29,7 +41,7 @@
     }
 
     currentLang.subscribe(() => {
-        load()
+        load("changedLanguage")
     })
 
     $: if (path) load()
@@ -46,6 +58,7 @@
                 <!-- Loader -->
             {:else if content}
                 {#each content.blocks || [] as b}
+                    <h1>{b.article.content.title}</h1>
                     {JSON.stringify(b)}
                 {/each}
             {:else}

src/components/widgets/LanguageChooser.svelte

@@ -17,8 +17,6 @@
 
     const setLanguage = (lang: string) => {
         $currentLang = lang
-        // $location.path = "/" + lang
-        // navigate($location.path + $location.search, { replace: true })
     }
 </script>
 

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}
@@ -72,7 +72,7 @@
                         <a
                             href="{item.settings.page}"
                             on:click="{() => (showMobileNav = false)}"
-                            class:active="{item.settings.page === $location.path}"
+                            class:active="{'/' + item.settings.page === $location.path}"
                         >
                             {item.settings.title}
                         </a>

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

@@ -37,97 +37,4 @@ header {
             width: 80%;
         }
     }
-
-    nav {
-        list-style-type: none;
-        margin-top: @space-md;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        gap: @space-md;
-
-        @media (max-width: 992px) {
-            display: none;
-        }
-
-        a {
-            &.active {
-                color: @primary;
-            }
-        }
-
-        & > * {
-            text-decoration: none;
-            transition: @transition-default;
-            font-weight: 500;
-
-            &:hover {
-                color: @primary;
-            }
-        }
-    }
-
-    .nav-mobile-toggle {
-        display: none;
-        cursor: pointer;
-        margin: @space-md 0 0 auto;
-
-        @media (max-width: 992px) {
-            display: block;
-        }
-    }
-
-    nav.main-mobile {
-        display: none;
-        position: fixed;
-        top: @header-height;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: @surface;
-        z-index: 9999;
-        margin: 0;
-        overflow-y: auto;
-
-        @media (max-width: 768px) {
-            top: @header-height-max-768;
-        }
-
-        &.show {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-        }
-
-        .bg-image {
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-
-        .nav-item {
-            align-self: center;
-            display: block;
-            text-align: center;
-            color: @primary;
-            font-size: 18px;
-            font-weight: 700;
-
-            a {
-                transition: @transition-default;
-                padding: @space-xs;
-
-                &:hover {
-                    color: @secondary;
-                }
-
-                &.tel-box {
-                    padding: 0 @space-md 0 0;
-                    margin-bottom: @space-md;
-                    color: @primary;
-                }
-            }
-        }
-    }
 }

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

@@ -1,3 +1,5 @@
+// NAVIGATION - GENERAL
+
 nav {
     @media (max-width: 992px) {
         display: none;
@@ -28,3 +30,122 @@ nav {
         display: block;
     }
 }
+
+// HEADER
+
+header {
+    nav {
+        list-style-type: none;
+        margin-top: @space-md;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: @space-md;
+
+        @media (max-width: 992px) {
+            display: none;
+        }
+
+        a {
+            &.active {
+                color: @primary;
+            }
+        }
+
+        & > * {
+            text-decoration: none;
+            transition: @transition-default;
+            font-weight: 500;
+
+            &:hover {
+                color: @primary;
+            }
+        }
+    }
+
+    .nav-mobile-toggle {
+        display: none;
+        cursor: pointer;
+        margin: @space-md 0 0 auto;
+
+        @media (max-width: 992px) {
+            display: block;
+        }
+    }
+
+    nav.main-mobile {
+        display: none;
+        position: fixed;
+        top: @header-height;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: @surface;
+        z-index: 9999;
+        margin: 0;
+        overflow-y: auto;
+
+        @media (max-width: 768px) {
+            top: @header-height-max-768;
+        }
+
+        &.show {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+        }
+
+        .bg-image {
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+
+        .nav-item {
+            align-self: center;
+            display: block;
+            text-align: center;
+            color: @primary;
+            font-size: 18px;
+            font-weight: 700;
+
+            a {
+                transition: @transition-default;
+                padding: @space-xs;
+
+                &:hover {
+                    color: @secondary;
+                }
+
+                &.tel-box {
+                    padding: 0 @space-md 0 0;
+                    margin-bottom: @space-md;
+                    color: @primary;
+                }
+            }
+        }
+    }
+}
+
+// FOOTER
+
+footer {
+    nav.footer {
+        display: flex;
+        justify-content: center;
+        gap: @space-md;
+
+        a {
+            color: @on-background;
+
+            &:hover {
+                text-decoration: underline;
+            }
+
+            &.active {
+                color: @primary;
+            }
+        }
+    }
+}

src/css/theme-2022/main.less

@@ -40,6 +40,7 @@
 @import "components/section";
 @import "components/header";
 @import "components/footer";
+@import "components/navigation";
 @import "components/news";
 @import "components/services";
 @import "components/specials";