Content Page überarbeitet. Inhalte werden nun auch erneut geholt, wenn sich die URL durch die History ändert. Aktuell statische Texte sind in localization files für en und de ausgelagert.

src/api.ts

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

src/components/App.svelte

@@ -60,8 +60,6 @@
 
 <Header />
 
-{$_("test")}
-
 <Router url="{url}">
     <Route path="/" let:params>
         <Home />

src/components/routes/Content.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { _ } from "svelte-i18n"
     import { getContent } from "../../api"
     import { generalInfo, currentLang, location } from "../../store"
     import { navigate } from "svelte-routing"
@@ -9,30 +10,49 @@
 
     let loading = true
     let content: Content
-    let currentDomain = window.location.protocol + "//" + window.location.host
+    let connectedContentNotFound: boolean = false
     let oldLocation: string
+    $: currentDomain = window.location.protocol + "//" + window.location.host
 
     const load = (type?: string) => {
+        // Set default API call filter
         let filter = {
+            locale: $currentLang,
             path,
         }
 
+        // API call filter without locale if URL changed
+        if (path !== content?.path) {
+            delete filter.locale
+        }
+
+        // Changed filter to find simmilar content for changed language
         if (type === "changedLanguage" && content?.tags) {
             filter = {
                 tags: { $in: content?.tags },
+                locale: $currentLang,
             }
             delete filter.path
         }
 
+        // Get content by API call
         loading = true
-        getContent($currentLang, filter)
+        getContent(filter)
             .then((c) => {
-                if (c && c.length) {
+                if (c) {
                     if (type === "changedLanguage") {
-                        navigate("/" + c[0].path + $location.search, { replace: true })
+                        let newPath = c.path + $location.search
-                    } else {
+                        window.history.pushState({}, document.getElementsByTagName("title")[0].innerHTML, newPath)
-                        content = c[0]
                     }
+
+                    connectedContentNotFound = false
+                    content = c
+                } else {
+                    // Show message if not found simmilar content for changed language
+                    if (filter.tags) {
+                        connectedContentNotFound = true
+                    }
+                    content = null
                 }
             })
             .finally(() => {
@@ -41,7 +61,9 @@
     }
 
     currentLang.subscribe(() => {
-        load("changedLanguage")
+        if (content) {
+            load("changedLanguage")
+        }
     })
 
     $: if (path) load()
@@ -73,19 +95,31 @@
                         />
                     </div>
 
-                    <h1>Seite nicht gefunden!</h1>
+                    <h1>{$_("pageNotFound")}</h1>
 
                     <p class="mb-md">
-                        <strong>{path}</strong>
+                        {#if connectedContentNotFound}
+                            <div>
+                                {@html $_("connectedContentNotFound", {
+                                    values: {
+                                        url: currentDomain + "/" + path,
+                                        lang: $_($currentLang) + ` (${$currentLang})`,
+                                    },
+                                })}
+                            </div>
+                        {:else}
+                            <strong>
+                                <a href="{currentDomain + '/' + path}">{currentDomain + "/" + path}</a>
+                            </strong>
+                        {/if}
                     </p>
                     <p>
-                        Die gesuchte Seite existiert nicht oder es ist ein anderer Fehler aufgetreten.<br />
+                        {@html $_("pageNotFoundInformation", {
-                        Gehen Sie zurück oder gehen Sie zu <a href="/"><strong>{currentDomain}</strong></a>, um eine
+                            values: {
-                        neue Richtung zu wählen.
+                                url: currentDomain,
-                    </p>
+                                backUrl: currentDomain + "/" + path,
-                    <p>
+                            },
-                        The page you are looking for doesn't exist or an other error occurred.<br />
+                        })}
-                        Go back, or head over to <a href="/"><strong>{currentDomain}</strong></a> to choose a new direction.
                     </p>
                 </div>
             {/if}

src/css/theme-2022/components/cc-bar.less

@@ -1,8 +0,0 @@
-#ccBarButtons #ccBarShowMoreButton {
-    color: @primary !important;
-}
-
-#ccBar ul li input[type="checkbox"]:checked ~ label:before {
-    background: @primary !important;
-    top: 1px;
-}

src/localization/de.json

@@ -1,3 +1,7 @@
 {
-    "test": "DE - TEST"
+    "pageNotFound": "Seite nicht gefunden!",
+    "pageNotFoundInformation": "Die gesuchte Seite existiert nicht oder es ist ein anderer Fehler aufgetreten.<br/>Gehen Sie <a href=\"{backUrl}\"><strong>zurück</strong></a> oder gehen Sie zu <a href=\"{url}\"><strong>{url}</strong></a>, um eineneue Richtung zu wählen.",
+    "connectedContentNotFound": "Zur aktuellen Seite <a href=\"{url}\"><strong>{url}</strong></a> wurde für die gewählte Sprache \"<strong>{lang}</strong>\" keine Übersetzung gefunden!",
+    "de": "Deutsch",
+    "en": "Englisch"
 }

src/localization/en.json

@@ -1,3 +1,7 @@
 {
-    "test": "EN - TEST"
+    "pageNotFound": "Page not found!",
+    "pageNotFoundInformation": "The page you are looking for doesn't exist or an other error occurred.<br/><a href=\"{backUrl}\"><strong>Go back</strong></a>, or head over to <a href=\"{url}\"><strong>{url}</strong></a> to choose a new direction.",
+    "connectedContentNotFound": "No translation was found for the selected language \"<strong>{lang}</strong>\" for the current page <a href=\"{url}\"><strong>{url}</strong></a>!",
+    "de": "German",
+    "en": "English"
 }