90 lines
2.7 KiB
Svelte
90 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { page } from '$app/state';
|
|
import type { ErrorProps } from './$types';
|
|
import PageHeader from '#lib/components/ui/PageHeader.svelte';
|
|
import LinkButton from '#lib/components/ui/LinkButton.svelte';
|
|
|
|
let { error }: ErrorProps = $props();
|
|
|
|
const notFoundMessages = [
|
|
'Looks like this page went on vacation... without telling anyone.',
|
|
"404: Page not found. It's probably hiding with the missing socks.",
|
|
"You've reached the edge of the internet. Turn back now.",
|
|
'The page you are looking for is in another castle.',
|
|
'Oops! This page took a wrong turn at /dev/null.',
|
|
'Page not found. Have you tried turning it off and on again?',
|
|
'404: The page is a lie.',
|
|
"Segmentation fault (core dumped)... just kidding, it's a 404.",
|
|
'rm -rf /page... Oops, wrong command.'
|
|
];
|
|
|
|
const serverMessages = [
|
|
'The server is having an existential crisis.',
|
|
'Internal Server Error: the hamsters powering the server need a break.',
|
|
'Even servers need naps.'
|
|
];
|
|
|
|
const status = $derived(page.status);
|
|
const messages = $derived(status === 404 ? notFoundMessages : serverMessages);
|
|
let randomIndex = $state(0);
|
|
const funMessage = $derived(messages[randomIndex % messages.length]);
|
|
|
|
onMount(() => (randomIndex = Math.floor(Math.random() * 100)));
|
|
const asciiDigits = $derived(
|
|
status === 404
|
|
? [' █ █ ███ █ █', ' █ █ █ █ █ █', ' ████ █ █ ████', ' █ █ █ █', ' █ ███ █']
|
|
: [' ███ ███ ███', ' █ █ █ █ █', ' ███ █ █ █ █', ' █ █ █ █ █', ' ███ ███ ███']
|
|
);
|
|
</script>
|
|
|
|
<div class="page">
|
|
<PageHeader command="curl {page.url.pathname}" title="Error {status}" meta={{ noIndex: true }} />
|
|
|
|
<pre class="ascii" class:server-error={status >= 500}>{asciiDigits.join('\n')}</pre>
|
|
|
|
<p class="error-line">x Error {status}: {error.message}</p>
|
|
<p class="muted"># {funMessage}</p>
|
|
|
|
<div class="suggestions">
|
|
<div class="muted">$ cat suggestions.txt</div>
|
|
<div>> Check if the URL is correct</div>
|
|
<div>> Try refreshing the page</div>
|
|
<div>> Contact me if the problem persists</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<LinkButton href="/" icon="mdi:home">Go Home</LinkButton>
|
|
<LinkButton href="/projects" icon="mdi:folder">Projects</LinkButton>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.ascii {
|
|
margin: 0 0 1rem;
|
|
color: var(--magenta);
|
|
font: inherit;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.ascii.server-error {
|
|
color: var(--red);
|
|
}
|
|
|
|
.error-line {
|
|
margin: 0;
|
|
color: var(--red);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.suggestions {
|
|
margin: 1.25rem 0;
|
|
color: var(--blue);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
</style>
|