finxol.io
Personal blog
finxol.io
blog
feat: improve 404 page
+26
-5
+14
-1
app/pages/[...page].vue
+14
-1
app/pages/[...page].vue
···
1
1
<script setup>
2
+
import A from "@/components/content/ProseA.vue";
3
+
2
4
const route = useRoute();
3
5
const { data: page } = await useAsyncData(route.path, () =>
4
6
queryCollection("pages").path(`/pages${route.path}`).first()
···
32
34
</div>
33
35
34
36
<div v-else>
35
-
not found
37
+
<article class="grid place-items-center gap-6 mt-12">
38
+
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-200">It seems you might be lost...</h2>
39
+
<p class="text-gray-500 dark:text-gray-400">Please check the URL and try again.</p>
40
+
41
+
<div></div>
42
+
43
+
<div class="flex flex-row gap-2 items-baseline">
44
+
<A href="/" target="_self" class="text-lg">
45
+
Take me home!</A>
46
+
<span class="text-gray-500 dark:text-gray-400 text-sm">(country roads)</span>
47
+
</div>
48
+
</article>
36
49
</div>
37
50
</template>
+12
-4
app/pages/posts/[...slug].vue
+12
-4
app/pages/posts/[...slug].vue
···
102
102
</article>
103
103
104
104
<div v-else class="flex items-center justify-center">
105
-
<div class="text-center">
106
-
<h1 class="text-4xl font-bold">404</h1>
107
-
<p class="text-neutral-500">Page not found</p>
108
-
</div>
105
+
<article class="grid place-items-center gap-6 mt-12">
106
+
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-200">It seems you might be lost...</h2>
107
+
<p class="text-gray-500 dark:text-gray-400">Please check the URL and try again.</p>
108
+
109
+
<div></div>
110
+
111
+
<div class="flex flex-row gap-2 items-baseline">
112
+
<A href="/" target="_self" class="text-lg">
113
+
Take me home!</A>
114
+
<span class="text-gray-500 dark:text-gray-400 text-sm">(country roads)</span>
115
+
</div>
116
+
</article>
109
117
</div>
110
118
</div>
111
119
</template>