tangled.org
Monorepo for Tangled
tangled.org
1<script lang="ts">
2 import { page } from '$app/state';
3 import Button from '$lib/components/ui/Button.svelte';
4
5 const copy = $derived.by(() => {
6 switch (page.status) {
7 case 404:
8 return {
9 status: '404',
10 title: 'Page not found',
11 message:
12 "The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.",
13 mark: '?',
14 tone: 'bg-surface-muted text-fg-subtle'
15 };
16 case 503:
17 return {
18 status: '503',
19 title: 'Service unavailable',
20 message:
21 'We were unable to reach the service backing this page. It may be temporarily unavailable.',
22 mark: '503',
23 tone: 'bg-info-soft text-info'
24 };
25 default:
26 return {
27 status: '500',
28 title: 'Internal server error',
29 message:
30 page.error?.message ??
31 'We encountered an error while processing your request. Please try again later.',
32 mark: '!',
33 tone: 'bg-danger-soft text-danger'
34 };
35 }
36 });
37</script>
38
39<svelte:head>
40 <title>{copy.status} · Tangled</title>
41</svelte:head>
42
43<section class="flex min-h-[60vh] flex-col items-center justify-center text-center">
44 <div class="mx-auto max-w-lg rounded-lg bg-surface p-8 shadow-sm">
45 <div class="mb-6">
46 <div
47 class={`mx-auto mb-4 flex size-16 items-center justify-center rounded-full ${copy.tone}`}
48 >
49 <span class="font-mono text-xl font-bold" aria-hidden="true">{copy.mark}</span>
50 </div>
51 </div>
52
53 <div class="space-y-4">
54 <h1 class="text-2xl font-bold text-fg-strong sm:text-3xl">
55 {copy.status} — {copy.title}
56 </h1>
57 <p class="text-fg-muted">{copy.message}</p>
58 <div class="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
59 <Button href="/" variant="default">Back to home</Button>
60 </div>
61 </div>
62 </div>
63</section>