cms/tibi-svelte-starter
Template
4
0
Fork 2
Code Issues Pull Requests Projects Releases Wiki Activity

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.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/api.ts
View File

@ -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: {
sort: "priority",
...params,
},
filter: { locale, ...filter },
params,
filter,
sort: "-priority",
})
if (c?.data?.length) {
return c.data
return c.data[0]
}
return null
}

2
src/components/App.svelte
View File

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

66
src/components/routes/Content.svelte
View File

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

8
src/css/theme-2022/components/cc-bar.less
View File

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

6
src/localization/de.json
View File

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

6
src/localization/en.json
View File

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