make 404 into its own component and use on blog

Author: probablyjassin

app/components/NotFound.vue

@@ -0,0 +1,18 @@
+<template>
+	<div class="text-center flex flex-col items-center justify-center self-center">
+		<h1 class="text-9xl">404</h1>
+		<h1 class="text-4xl">That page does not exist!</h1>
+		<NuxtLink to="https://twitter.com/sawaratsuki1004">
+			<NuxtImg src="/images/NotFound.webp" width="600" />
+		</NuxtLink>
+		<a href="https://twitter.com/sawaratsuki1004" class="mr-auto pl-[5%] text-sm mt-[-10%] mb-[10%]">Illustration by @sawaratsuki1004</a>
+		<div class="flex gap-6">
+			<UButton class="text-2xl bg-primary-600 hover:bg-secondary-700 cursor-pointer">
+				<NuxtLink class="bg-transparent text-black no-underline" to="/">Go to home</NuxtLink>
+			</UButton>
+			<UButton class="text-2xl bg-primary-600 hover:bg-secondary-700 cursor-pointer">
+				<NuxtLink class="bg-transparent text-black no-underline" to="/">Check out all blog articles</NuxtLink>
+			</UButton>
+		</div>
+	</div>
+</template>

app/error.vue

@@ -10,17 +10,9 @@
 
 <template>
 	<div class="min-h-screen flex items-center justify-center">
-		<div class="text-center">
-			<div v-if="error?.statusCode == 404" class="min-h-screen flex flex-col items-center justify-center">
-				<h1 class="text-9xl">404</h1>
-				<h1 class="text-4xl">That page does not exist!</h1>
-				<a href="https://twitter.com/sawaratsuki1004">
-					<NuxtImg src="/images/NotFound.webp" width="600" />
-				</a>
-				<a href="https://twitter.com/sawaratsuki1004" class="block mr-auto pl-9 text-sm mt-[-10%] mb-14">Illustration by @sawaratsuki1004</a>
-				<UButton class="text-2xl bg-primary-600 hover:bg-secondary-700 cursor-pointer">
-					<NuxtLink class="bg-transparent text-black no-underline" to="/">Go back home</NuxtLink>
-				</UButton>
+		<div>
+			<div v-if="error?.statusCode == 404">
+				<NotFound />
 			</div>
 			<div v-else>
 				<h1 class="text-9xl">{{ error?.statusCode }}</h1>

app/pages/blog/[...slug].vue

@@ -3,21 +3,20 @@
 		<article>
 			<Suspense>
 				<template #default>
-					<main>
+					<main v-if="page">
 						<div class="min-h-[1.65rem] mb-[-30px]">
 							<LazyPostMeta v-if="isMounted" />
 						</div>
 
 						<ContentRenderer v-if="page" :value="page" />
-						<div class="text-center py-16" v-else>
-							<h1 class="text-4xl font-bold mb-4">Page Not Found (404)</h1>
-							<p class="text-lg mb-4">Sorry, the page you are looking for does not exist.</p>
-							<NuxtLink to="/blog" class="text-primary underline">View all blog articles</NuxtLink><br />
-							<NuxtLink to="/" class="text-primary underline">Go back to the homepage</NuxtLink>
-						</div>
 						<hr />
 						<RelatedPosts v-if="isMounted" />
 					</main>
+					<div v-else class="min-h-screen flex items-center justify-center">
+						<div class="w-1/3">
+							<NotFound />
+						</div>
+					</div>
 				</template>
 				<template #fallback>
 					<div class="animate-pulse">