Merge pull request #36 from jycouet/feat/error

Add a dummy error

src/lib/atproto/methods.ts

···
 } from '@atcute/identity-resolver';
 import { Client, simpleFetchHandler } from '@atcute/client';
 import type { AppBskyActorDefs } from '@atcute/bluesky';
+import { redirect } from '@sveltejs/kit';
 
 export type Collection = `${string}.${string}.${string}`;
 
···
 		}
 	});
 
-	const data = await handleResolver.resolve(handle);
-	return data;
+	try {
+		const data = await handleResolver.resolve(handle);
+		return data;
+	} catch (error) {
+		redirect(307, '/?error=handle_not_found&handle=' + handle);
+	}
 }
 
 const didResolver = new CompositeDidDocumentResolver({

src/lib/website/EditableProfile.svelte

···
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
 	import type { Editor } from '@tiptap/core';
+	import MadeWithBlento from './MadeWithBlento.svelte';
 
 	let { data = $bindable() }: { data: WebsiteData } = $props();
 
···
 
 		<div class="h-10.5 w-1 @5xl/wrapper:hidden"></div>
 
-		<div class="hidden text-xs font-light @5xl/wrapper:block">
-			made with <a
-				href="https://blento.app"
-				target="_blank"
-				class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
-				>blento</a
-			>
-		</div>
+		<MadeWithBlento class="hidden @5xl/wrapper:block" />
 	</div>
 </div>

src/lib/website/MadeWithBlento.svelte

···
+<script lang="ts">
+	let { class: className = '' }: { class?: string } = $props();
+</script>
+
+<div class={['text-xs font-light', className]}>
+	made with <a
+		href="https://blento.app"
+		target="_blank"
+		class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
+		>blento</a
+	>
+</div>

src/lib/website/Profile.svelte

···
 	import { page } from '$app/state';
 	import type { ActorIdentifier } from '@atcute/lexicons';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
+	import MadeWithBlento from './MadeWithBlento.svelte';
 
 	let {
 		data,
···
 				</div>
 			{/if}
 		{/if}
-		<div class="hidden text-xs font-light @5xl/wrapper:block">
-			made with <a
-				href="https://blento.app"
-				target="_blank"
-				class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
-				>blento</a
-			>
-		</div>
+		<MadeWithBlento class="hidden @5xl/wrapper:block" />
 	</div>
 </div>

src/lib/website/Website.svelte

···
 	import BaseCard from '../cards/BaseCard/BaseCard.svelte';
 	import type { WebsiteData } from '$lib/types';
 	import Context from './Context.svelte';
+	import MadeWithBlento from './MadeWithBlento.svelte';
 	import Head from './Head.svelte';
 	import type { Did, Handle } from '@atcute/lexicons';
 	import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte';
···
 			</div>
 		</div>
 
-		<div class="mx-auto block pb-8 text-center text-xs font-light @5xl/wrapper:hidden">
-			made with <a
-				href="https://blento.app"
-				target="_blank"
-				class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
-				>blento</a
-			>
-		</div>
+		<MadeWithBlento class="mx-auto block pb-8 text-center @5xl/wrapper:hidden" />
 	</div>
 </Context>

src/routes/+error.svelte

···
+<script lang="ts">
+	import { page } from '$app/stores';
+	import MadeWithBlento from '$lib/website/MadeWithBlento.svelte';
+</script>
+
+<div
+	class="bg-base-100 dark:bg-base-950 text-base-900 dark:text-base-50 min-h-screen px-4 py-8 lg:px-8"
+>
+	<div class="@container/grid mx-auto max-w-4xl">
+		<!-- Bento Grid -->
+		<div class="grid grid-cols-4 gap-3 lg:grid-cols-8 lg:gap-4">
+			<!-- Error Code - Large prominent card -->
+			<div
+				class="col-span-4 row-span-2 flex flex-col items-center justify-center rounded-3xl bg-gradient-to-br from-pink-500 to-rose-500 p-8 text-white lg:col-span-4"
+			>
+				<span class="text-8xl font-black lg:text-9xl">{$page.status}</span>
+				<span class="mt-2 text-xl font-medium opacity-90">Error</span>
+			</div>
+
+			<!-- Oops card -->
+			<div
+				class="col-span-2 flex items-center justify-center rounded-3xl bg-amber-500 p-6 text-white"
+			>
+				<span class="text-2xl font-bold lg:text-3xl">Oops!</span>
+			</div>
+
+			<!-- Decorative emoji card -->
+			<div
+				class="col-span-2 flex items-center justify-center rounded-3xl bg-violet-500 p-6 text-4xl lg:text-5xl"
+			>
+				<span class="animate-bounce">:(</span>
+			</div>
+
+			<!-- Message card -->
+			<div
+				class="bg-base-200/50 dark:bg-base-800/50 text-base-700 dark:text-base-300 col-span-4 flex items-center justify-center rounded-3xl p-6 text-center"
+			>
+				<p class="text-lg font-medium">
+					{$page.error?.message ||
+						"Something went wrong. We couldn't find what you're looking for."}
+				</p>
+			</div>
+
+			<!-- Decorative pattern card -->
+			<div
+				class="col-span-2 flex items-center justify-center overflow-hidden rounded-3xl bg-cyan-500 p-4"
+			>
+				<div class="grid grid-cols-3 gap-2">
+					{#each Array(9) as _, i (i)}
+						<div class="h-3 w-3 rounded-full bg-white/40 lg:h-4 lg:w-4"></div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Home link card -->
+			<a
+				href="/"
+				class="col-span-2 flex items-center justify-center rounded-3xl bg-emerald-500 p-6 text-white transition-transform hover:scale-[1.02] active:scale-[0.98]"
+			>
+				<span class="text-lg font-bold lg:text-xl">Go Home</span>
+			</a>
+
+			<!-- Decorative stripes card -->
+			<div class="col-span-2 overflow-hidden rounded-3xl bg-blue-500 p-4">
+				<div class="flex h-full w-full flex-col justify-center gap-2">
+					<div class="h-2 w-full rounded-full bg-white/30"></div>
+					<div class="h-2 w-3/4 rounded-full bg-white/40"></div>
+					<div class="h-2 w-1/2 rounded-full bg-white/50"></div>
+				</div>
+			</div>
+
+			<!-- Decorative circles card -->
+			<div
+				class="col-span-2 flex items-center justify-center rounded-3xl bg-orange-500 p-4 lg:col-span-2"
+			>
+				<div class="relative h-16 w-16 lg:h-20 lg:w-20">
+					<div class="absolute inset-0 rounded-full border-4 border-white/40"></div>
+					<div class="absolute inset-2 rounded-full border-4 border-white/50"></div>
+					<div class="absolute inset-4 rounded-full border-4 border-white/60"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Footer -->
+	<MadeWithBlento class="text-base-500 mt-12 text-center" />
+</div>

src/routes/+layout.svelte

···
 <script lang="ts">
 	import '../app.css';
 
-	import { ThemeToggle } from '@foxui/core';
+	import { ThemeToggle, Toaster, toast } from '@foxui/core';
 	import { onMount } from 'svelte';
 	import { initClient } from '$lib/atproto';
 	import YoutubeVideoPlayer, { videoPlayer } from '$lib/components/YoutubeVideoPlayer.svelte';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
 
 	let { children } = $props();
+
+	const errorMessages: Record<string, (params: URLSearchParams) => string> = {
+		handle_not_found: (p) => `Handle ${p.get('handle') ?? ''} not found!`
+	};
 
 	onMount(() => {
 		initClient();
+
+		const error = page.url.searchParams.get('error');
+		if (error) {
+			const msg = errorMessages[error]?.(page.url.searchParams) ?? error;
+			toast.error(msg);
+			goto(page.url.pathname, { replaceState: true });
+		}
 	});
 </script>
 
 {@render children()}
 
 <ThemeToggle class="fixed top-2 left-2 z-10" />
+<Toaster />
 
 {#if videoPlayer.id}
 	<YoutubeVideoPlayer />