forked from cms/tibi-svelte-starter
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:
parent
aaf2860714
commit
cabaaef456
src
13
src/api.ts
13
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", {
|
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"
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user