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.

This commit is contained in:
Mario Linz 2022-06-02 11:04:37 +02:00
parent aaf2860714
commit cabaaef456
6 changed files with 66 additions and 35 deletions
src
api.ts
components
css/theme-2022/components
localization

@ -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", { const c = await api<Content[]>("content", {
// limit: 1, // limit: 1,
params: { params,
sort: "priority", filter,
...params,
},
filter: { locale, ...filter },
sort: "-priority", sort: "-priority",
}) })
if (c?.data?.length) { if (c?.data?.length) {
return c.data return c.data[0]
} }
return null return null
} }

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

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { _ } from "svelte-i18n"
import { getContent } from "../../api" import { getContent } from "../../api"
import { generalInfo, currentLang, location } from "../../store" import { generalInfo, currentLang, location } from "../../store"
import { navigate } from "svelte-routing" import { navigate } from "svelte-routing"
@ -9,30 +10,49 @@
let loading = true let loading = true
let content: Content let content: Content
let currentDomain = window.location.protocol + "//" + window.location.host let connectedContentNotFound: boolean = false
let oldLocation: string let oldLocation: string
$: currentDomain = window.location.protocol + "//" + window.location.host
const load = (type?: string) => { const load = (type?: string) => {
// Set default API call filter
let filter = { let filter = {
locale: $currentLang,
path, 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) { if (type === "changedLanguage" && content?.tags) {
filter = { filter = {
tags: { $in: content?.tags }, tags: { $in: content?.tags },
locale: $currentLang,
} }
delete filter.path delete filter.path
} }
// Get content by API call
loading = true loading = true
getContent($currentLang, filter) getContent(filter)
.then((c) => { .then((c) => {
if (c && c.length) { if (c) {
if (type === "changedLanguage") { 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(() => { .finally(() => {
@ -41,7 +61,9 @@
} }
currentLang.subscribe(() => { currentLang.subscribe(() => {
load("changedLanguage") if (content) {
load("changedLanguage")
}
}) })
$: if (path) load() $: if (path) load()
@ -73,19 +95,31 @@
/> />
</div> </div>
<h1>Seite nicht gefunden!</h1> <h1>{$_("pageNotFound")}</h1>
<p class="mb-md"> <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>
<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> </p>
</div> </div>
{/if} {/if}

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

@ -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"
} }

@ -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"
} }