Alexander
fbd09fbdae
Replace the emoji/gradient card with an editorial layout: small lucide glyph, oversized error code, hairline-divided serif bible quote. Extract shared ErrorView + SectionError components and a bilingual string helper. Add +error.svelte at each section root (faith, recipes, fitness, tasks, cospend) so errors render inside the correct layout and inherit the section-specific header/nav. Catch-all [...rest]/+page.ts stubs route unmatched URLs through the section layout so the right error page catches them.
54 lines
1.8 KiB
Svelte
54 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
import Header from '$lib/components/Header.svelte';
|
|
import ErrorView from '$lib/components/ErrorView.svelte';
|
|
import { getErrorTitle, getErrorDescription, errorLabels, pick } from '$lib/js/errorStrings';
|
|
|
|
let status = $derived($page.status);
|
|
let error = $derived($page.error as any);
|
|
|
|
let bibleQuote = $derived(error?.bibleQuote);
|
|
let isEnglish = $derived(error?.lang === 'en');
|
|
let details = $derived(error?.details);
|
|
|
|
function goHome() { goto('/'); }
|
|
function goBack() {
|
|
if (window.history.length > 1) window.history.back();
|
|
else goto('/');
|
|
}
|
|
function login() { goto('/login'); }
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{getErrorTitle(status, isEnglish)} — Alexander's Website</title>
|
|
</svelte:head>
|
|
|
|
<Header>
|
|
{#snippet links()}
|
|
<ul class="site_header"></ul>
|
|
{/snippet}
|
|
|
|
<ErrorView
|
|
{status}
|
|
title={getErrorTitle(status, isEnglish)}
|
|
description={getErrorDescription(status, isEnglish)}
|
|
{details}
|
|
{bibleQuote}
|
|
{isEnglish}
|
|
>
|
|
{#snippet actions()}
|
|
{#if status === 401}
|
|
<button class="link link-primary" onclick={login}>{pick(errorLabels.login, isEnglish)}</button>
|
|
<button class="link" onclick={goHome}>{pick(errorLabels.homepage, isEnglish)}</button>
|
|
{:else if status === 500}
|
|
<button class="link link-primary" onclick={goBack}>{pick(errorLabels.tryAgain, isEnglish)}</button>
|
|
<button class="link" onclick={goHome}>{pick(errorLabels.homepage, isEnglish)}</button>
|
|
{:else}
|
|
<button class="link link-primary" onclick={goHome}>{pick(errorLabels.homepage, isEnglish)}</button>
|
|
<button class="link" onclick={goBack}>{pick(errorLabels.goBack, isEnglish)}</button>
|
|
{/if}
|
|
{/snippet}
|
|
</ErrorView>
|
|
</Header>
|