Rewrite website as a Hyprland desktop
This commit is contained in:
SirBlob committed
1 parent
7c52779cf6
commit
3065ad6092
197 files changed
+5609
-17779
No files matched your search
+70
-133
@@ -1,152 +1,89 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
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';
|
||||
|
||||
import TerminalTUI from "$lib/components/TerminalTUI.svelte";
|
||||
import type { TerminalLine } from "$lib/components/tui/types";
|
||||
import { user } from "$lib/config";
|
||||
let { error }: ErrorProps = $props();
|
||||
|
||||
// Fun 404 messages
|
||||
const notFoundMessages = [
|
||||
"Looks like this page went on vacation... without telling anyone.",
|
||||
'Looks like this page went on vacation... without telling anyone.',
|
||||
"404: Page not found. It's probably hiding with the missing socks.",
|
||||
"This page has mass, but it seems to have no class.",
|
||||
"You've reached the edge of the internet. Turn back now.",
|
||||
"The page you're looking for is in another castle.",
|
||||
"Oops! This page took a wrong turn at /dev/null.",
|
||||
"Error 404: Page went out for coffee and never came back.",
|
||||
"This page was mass deleted from the matrix.",
|
||||
"The server ate your page. Bad server!",
|
||||
"Page not found. Have you tried turning it off and on again?",
|
||||
"This URL is as empty as my coffee cup at 3am.",
|
||||
"404: The page is a lie.",
|
||||
'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.",
|
||||
"This page has been mass yeeted into the void.",
|
||||
'rm -rf /page... Oops, wrong command.'
|
||||
];
|
||||
|
||||
// Generic error messages
|
||||
const errorMessages: Record<number, string[]> = {
|
||||
500: [
|
||||
"The server is having an existential crisis.",
|
||||
"Something went wrong on our end. We're on it!",
|
||||
"Internal Server Error: The hamsters powering the server need a break.",
|
||||
],
|
||||
503: [
|
||||
"Service temporarily unavailable. Even servers need naps.",
|
||||
"We're doing some maintenance. BRB!",
|
||||
],
|
||||
};
|
||||
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 errorMessage = $derived($page.error?.message || "Something went wrong");
|
||||
const pathname = $derived($page.url.pathname);
|
||||
const status = $derived(page.status);
|
||||
const messages = $derived(status === 404 ? notFoundMessages : serverMessages);
|
||||
let randomIndex = $state(0);
|
||||
const funMessage = $derived(messages[randomIndex % messages.length]);
|
||||
|
||||
// Pick a random fun message based on status
|
||||
function getFunMessage(): string {
|
||||
if (status === 404) {
|
||||
return notFoundMessages[
|
||||
Math.floor(Math.random() * notFoundMessages.length)
|
||||
];
|
||||
}
|
||||
const msgs = errorMessages[status];
|
||||
if (msgs) {
|
||||
return msgs[Math.floor(Math.random() * msgs.length)];
|
||||
}
|
||||
return "Something unexpected happened. Our code monkeys are investigating.";
|
||||
}
|
||||
|
||||
// ASCII art for different errors (use ███ block characters)
|
||||
function getAsciiArt(): string[] {
|
||||
// 404: Page Not Found (Pink)
|
||||
if (status === 404) {
|
||||
return [
|
||||
"(&pink) █ █ ███ █ █ (&)",
|
||||
"(&pink) █ █ █ █ █ █ (&)",
|
||||
"(&pink) ████ █ █ ████ (&)",
|
||||
"(&pink) █ █ █ █ (&)",
|
||||
"(&pink) █ ███ █ (&)",
|
||||
];
|
||||
}
|
||||
|
||||
// 500: Server Error (Red/Error)
|
||||
if (status >= 500) {
|
||||
return [
|
||||
"(&error) ███ ███ ███ (&)",
|
||||
"(&error) █ █ █ █ █ (&)",
|
||||
"(&error) ███ █ █ █ █ (&)",
|
||||
"(&error) █ █ █ █ █ (&)",
|
||||
"(&error) ███ ███ ███ (&)",
|
||||
];
|
||||
}
|
||||
|
||||
// Generic ERROR (Pink)
|
||||
return [
|
||||
"(&pink) ███ ███ ███ ███ ███ (&)",
|
||||
"(&pink) █ █ █ █ █ █ █ █ █ (&)",
|
||||
"(&pink) ███ ███ ███ █ █ ███ (&)",
|
||||
"(&pink) █ █ █ █ █ █ █ █ █ (&)",
|
||||
"(&pink) ███ █ █ █ █ ███ █ █ (&)",
|
||||
];
|
||||
}
|
||||
|
||||
const funMessage = $derived(getFunMessage());
|
||||
const asciiLines = $derived(getAsciiArt());
|
||||
|
||||
// Build the terminal lines for the error page (derived to capture reactive values)
|
||||
const lines = $derived<TerminalLine[]>([
|
||||
// Command that caused the error
|
||||
{ type: "command", content: `curl ${pathname}` },
|
||||
{ type: "blank", content: "" },
|
||||
|
||||
// ASCII art
|
||||
...asciiLines.map((line: string) => ({ type: "output" as const, content: line })),
|
||||
{ type: "blank", content: "" },
|
||||
|
||||
// Error status (styled with leading X like the screenshot)
|
||||
{
|
||||
type: "error",
|
||||
content: `(&error,bold)X Error ${status}: ${errorMessage}(&)`,
|
||||
},
|
||||
{ type: "output", content: `(&muted,italic)# ${funMessage}(&)` },
|
||||
{ type: "divider", content: "SUGGESTIONS" },
|
||||
// Suggestions
|
||||
{ type: "command", content: "cat suggestions.txt" },
|
||||
{ type: "info", content: "Check if the URL is correct" },
|
||||
{ type: "info", content: "Try refreshing the page" },
|
||||
{ type: "info", content: "Contact me if the problem persists" },
|
||||
|
||||
{ type: "divider", content: "ACTIONS" },
|
||||
// Navigation buttons
|
||||
{
|
||||
type: "button",
|
||||
content: "Go Home",
|
||||
icon: "mdi:home",
|
||||
style: "primary",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
content: "Go Back",
|
||||
icon: "mdi:arrow-left",
|
||||
style: "accent",
|
||||
action: () => history.back(),
|
||||
},
|
||||
{ type: "blank", content: "" },
|
||||
]);
|
||||
onMount(() => (randomIndex = Math.floor(Math.random() * 100)));
|
||||
const asciiDigits = $derived(
|
||||
status === 404
|
||||
? [' █ █ ███ █ █', ' █ █ █ █ █ █', ' ████ █ █ ████', ' █ █ █ █', ' █ ███ █']
|
||||
: [' ███ ███ ███', ' █ █ █ █ █', ' ███ █ █ █ █', ' █ █ █ █ █', ' ███ ███ ███']
|
||||
);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{status} | {user.username}</title>
|
||||
<meta name="description" content="Error {status} - {errorMessage}" />
|
||||
</svelte:head>
|
||||
<div class="page">
|
||||
<PageHeader command="curl {page.url.pathname}" title="Error {status}" />
|
||||
|
||||
<div class="error-container">
|
||||
<TerminalTUI {lines} title="error" interactive={true} speed="instant" />
|
||||
<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>
|
||||
.error-container {
|
||||
padding: 2rem 1rem;
|
||||
min-height: calc(100vh - 60px);
|
||||
.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>
|
||||
Reference in new issue
Block a user