forked from cms/tibi-svelte-starter
137 lines
4.4 KiB
Svelte
137 lines
4.4 KiB
Svelte
<script lang="ts">
|
|
import { _ } from "svelte-i18n"
|
|
import { getContent } from "../../api"
|
|
import { generalInfo, currentLang, location } from "../../store"
|
|
import { navigate } from "svelte-routing"
|
|
|
|
import Image from "../widgets/Image.svelte"
|
|
|
|
export let path: string
|
|
|
|
let loading = true
|
|
let content: Content
|
|
let connectedContentNotFound: boolean = false
|
|
$: 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
|
|
let apiParams: APIParams = {
|
|
filter,
|
|
}
|
|
loading = true
|
|
getContent(apiParams)
|
|
.then((c) => {
|
|
if (c) {
|
|
if (type === "changedLanguage") {
|
|
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
|
|
}
|
|
|
|
// Redirect to HOME if no content has been found. So the page 404 content will never shown.
|
|
if (!content) {
|
|
navigate("/")
|
|
}
|
|
})
|
|
.finally(() => {
|
|
loading = false
|
|
})
|
|
}
|
|
|
|
currentLang.subscribe(() => {
|
|
if (content) {
|
|
load("changedLanguage")
|
|
}
|
|
})
|
|
|
|
$: if (path) load()
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title>
|
|
</svelte:head>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
{#if loading}
|
|
<!-- Loader -->
|
|
{:else if content}
|
|
<!-- {JSON.stringify(content)} -->
|
|
{#each content.blocks || [] as b}
|
|
<h1>{b.article.content.title}</h1>
|
|
{JSON.stringify(b)}
|
|
{/each}
|
|
{:else}
|
|
<div class="page-404">
|
|
<div>
|
|
<Image
|
|
collectionName="general"
|
|
entryId="{$generalInfo.id}"
|
|
file="{$generalInfo?.media?.brand}"
|
|
alt="{$generalInfo?.meta?.metaTitle}"
|
|
cssClass="brand"
|
|
/>
|
|
</div>
|
|
|
|
<h1>{$_("pageNotFound")}</h1>
|
|
|
|
<p class="mb-md">
|
|
{#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>
|
|
{@html $_("pageNotFoundInformation", {
|
|
values: {
|
|
url: currentDomain,
|
|
backUrl: currentDomain + "/" + path,
|
|
},
|
|
})}
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|