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/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 })
-                    } else {
-                        content = c[0]
+                        let newPath = c.path + $location.search
+                        window.history.pushState({}, document.getElementsByTagName("title")[0].innerHTML, newPath)
                     }
+
+                    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 />
-                        Gehen Sie zurück oder gehen Sie zu <a href="/"><strong>{currentDomain}</strong></a>, um eine
-                        neue Richtung zu wählen.
-                    </p>
-                    <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.
+                        {@html $_("pageNotFoundInformation", {
+                            values: {
+                                url: currentDomain,
+                                backUrl: currentDomain + "/" + path,
+                            },
+                        })}
                     </p>
                 </div>
             {/if}