Peter Meier
da340530ee
- +layout.server: expose pageConfig.analyticsPm86SiteId on layout data - +layout.svelte: inject analytics.pm86.de script when CMS value present - +error.svelte: light 404 page with wald-700 accent, dropped dark gradient - .env.example + deploy.yml: remove PUBLIC_ANALYTICS_PM86_SITE_ID
48 lines
1.7 KiB
Svelte
48 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { useTranslate } from '$lib/translations';
|
|
import Icon from '@iconify/svelte';
|
|
import '$lib/iconify-offline';
|
|
|
|
const t = useTranslate();
|
|
const status = $derived($page.status);
|
|
const message = $derived($page.error?.message ?? '');
|
|
const isNotFound = $derived(status === 404);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{isNotFound ? t('page_404_title') : `Fehler ${status}`}</title>
|
|
<meta name="robots" content="noindex" />
|
|
</svelte:head>
|
|
|
|
<section>
|
|
<div class="container-custom pt-10 text-center">
|
|
<p class="mt-6 text-7xl md:text-8xl font-extrabold tracking-tight text-wald-700">{status}</p>
|
|
<h1 class="mt-3 text-2xl md:text-3xl font-semibold text-zinc-900">
|
|
{isNotFound ? t('page_404_title') : `Fehler ${status}`}
|
|
</h1>
|
|
{#if isNotFound}
|
|
<p class="mx-auto mt-4 max-w-xl text-base text-zinc-600">{t('page_404_text')}</p>
|
|
{:else if message}
|
|
<p class="mx-auto mt-4 max-w-xl text-base text-zinc-600">{message}</p>
|
|
{/if}
|
|
|
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
|
<a
|
|
href="/"
|
|
class="inline-flex items-center gap-2 rounded-sm bg-wald-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-wald-800 no-underline"
|
|
>
|
|
<Icon icon="mdi:home-outline" class="h-4 w-4" />
|
|
{t('page_404_back')}
|
|
</a>
|
|
<a
|
|
href="/posts/"
|
|
class="inline-flex items-center gap-2 rounded-sm border border-zinc-300 bg-white px-5 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-100 no-underline"
|
|
>
|
|
<Icon icon="mdi:file-document-outline" class="h-4 w-4" />
|
|
Zu den Beiträgen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|