Website/src/routes/+error.svelte

<script lang="ts">
	import { page } from "$app/stores";

	import TerminalTUI from "$lib/components/TerminalTUI.svelte";
	import type { TerminalLine } from "$lib/components/tui/types";
	import { user } from "$lib/config";

	// Fun 404 messages
	const notFoundMessages = [
		"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.",
		"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.",
	];

	// 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 status = $derived($page.status);
	const errorMessage = $derived($page.error?.message || "Something went wrong");
	const pathname = $derived($page.url.pathname);

	// 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: "" },
	]);
</script>

<svelte:head>
	<title>{status} | {user.username}</title>
	<meta name="description" content="Error {status} - {errorMessage}" />
</svelte:head>

<div class="error-container">
	<TerminalTUI {lines} title="error" interactive={true} speed="instant" />
</div>

<style>
	.error-container {
		padding: 2rem 1rem;
		min-height: calc(100vh - 60px);
	}
</style>