Kleinere Anpassungen für Seiten- und Navigations- Bearbeitung.

api/collections/content.yml

@@ -25,7 +25,7 @@ meta:
           primaryText: path
           columns:
               - source: path
-                twig: "{{locale}}{{path}}"
+                twig: "{{path}}"
               - source: locale
                 type: flag
         # Desktop
@@ -33,7 +33,7 @@ meta:
           mediaQuery: "(min-width:600px)"
           columns:
               - source: path
-                twig: "{{locale}}{{path}}"
+                twig: "{{path}}"
               - source: locale
                 type: flag
 
@@ -107,15 +107,14 @@ hooks:
 # Feldliste der Kollektion
 fields:
     - !include fields/_locale.yml
-    - name: name
-      type: string
-      meta:
-          label: { de: "Name der Page (optional)", en: "Page Name (optional)" }
     - name: path
       type: string
       index: [single, unique]
       meta:
           label: { de: "Pfad", en: "Path" }
+          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: blocks
       type: object[]
       meta:

api/collections/navigation.yml

@@ -112,7 +112,7 @@ x-page: &page
             endpoint: "content"
             mapping:
                 id: "path"
-                name: "name"
+                name: "path"
             params:
                 count: 1
                 sort: "ASC"

src/api.ts

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

src/components/App.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Router, Route } from "svelte-routing"
     import { scrollToTop } from "svelte-scrollto"
-    import { generalInfo, location } from "../store"
+    import { generalInfo, location, currentLang } from "../store"
 
     import Home from "./routes/Home.svelte"
     import Content from "./routes/Content.svelte"
@@ -64,7 +64,7 @@
         <Home />
     </Route>
     <Route path="/*path" let:params>
-        <Content path="/{params.path}" />
+        <Content path="{params.path}" />
     </Route>
 </Router>
 

src/components/routes/Content.svelte

@@ -31,7 +31,7 @@
 <svelte:head>
     <title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title>
 </svelte:head>
-
+{path}
 <div class="container">
     <div class="row">
         <div class="col-md-12">
@@ -45,6 +45,8 @@
                 <div class="page-404">
                     <div>
                         <Image
+                            collectionName="general"
+                            entryId="{$generalInfo.id}"
                             file="{$generalInfo?.media?.brand}"
                             alt="{$generalInfo?.meta?.metaTitle}"
                             cssClass="brand"

src/components/widgets/LanguageChooser.svelte

@@ -14,13 +14,9 @@
     }
 
     const setLanguage = (lang: string) => {
-        let path = $location.path.split("/")
-        path[1] = lang
-
-        $location.path = path.join("/")
         $currentLang = lang
-
-        navigate($location.path + $location.search, { replace: true })
+        // $location.path = "/" + lang
+        // navigate($location.path + $location.search, { replace: true })
     }
 </script>
 

src/components/widgets/Navigation.svelte

@@ -4,7 +4,7 @@
     import { mdiMenu } from "@mdi/js"
 
     import { links } from "svelte-routing"
-    import { navigations, currentLang } from "../../store"
+    import { navigations, currentLang, location } from "../../store"
 
     import LanguageChooser from "./LanguageChooser.svelte"
 
@@ -40,7 +40,7 @@
                     {item.settings.title}
                 </a>
             {:else}
-                <a href="/{navigation.locale}{item.settings.page}">
+                <a href="{item.settings.page}" class:active="{item.settings.page === $location.path}">
                     {item.settings.title}
                 </a>
             {/if}
@@ -69,7 +69,11 @@
                     </div>
                 {:else}
                     <div class="nav-item">
-                        <a href="/{navigation.locale}{item.settings.page}" on:click="{() => (showMobileNav = false)}">
+                        <a
+                            href="{item.settings.page}"
+                            on:click="{() => (showMobileNav = false)}"
+                            class:active="{item.settings.page === $location.path}"
+                        >
                             {item.settings.title}
                         </a>
                     </div>

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

@@ -5,7 +5,7 @@ body {
     font-size: @font-size-default;
     font-weight: @font-weight-default;
     line-height: @font-line-height-default;
-    font-family: "Montserrat", sans-serif;
+    font-family: "Nunito", sans-serif;
     width: 100%;
     height: 100%;
 }

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

@@ -50,6 +50,12 @@ header {
             display: none;
         }
 
+        a {
+            &.active {
+                color: @primary;
+            }
+        }
+
         & > * {
             text-decoration: none;
             transition: @transition-default;

src/css/theme-2022/main.less

@@ -15,7 +15,7 @@
 @error: #eebdbd;
 @on-error: #eb5757;
 
-@font-size-default: 16px;
+@font-size-default: 14px;
 @font-weight-default: 400;
 @font-line-height-default: 1.6;
 

src/store.ts

@@ -13,11 +13,13 @@ export const location = writable(initialLocation)
 
 // Current Language
 
+export const defaultLang = writable<string>("de")
+
 function langFromUrl(): string {
     if (new RegExp(`\/[a-zA-Z]*[-[a-zA-Z]*]{0,1}\/[a-zA-Z0-9-]*$`).test(get(location).path)) {
         return get(location)?.path.split("/")[1]
     }
-    return "de"
+    return get(defaultLang)
 }
 export const currentLang = writable<string>(langFromUrl())