feat: improve 404 page

finxol.io d0022c86 26f1fa60

verified
Changed files
+26 -5
app
+14 -1
app/pages/[...page].vue
···
<script setup>
+
import A from "@/components/content/ProseA.vue";
+
const route = useRoute();
const { data: page } = await useAsyncData(route.path, () =>
queryCollection("pages").path(`/pages${route.path}`).first()
···
</div>
<div v-else>
-
not found
+
<article class="grid place-items-center gap-6 mt-12">
+
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-200">It seems you might be lost...</h2>
+
<p class="text-gray-500 dark:text-gray-400">Please check the URL and try again.</p>
+
+
<div></div>
+
+
<div class="flex flex-row gap-2 items-baseline">
+
<A href="/" target="_self" class="text-lg">
+
Take me home!</A>
+
<span class="text-gray-500 dark:text-gray-400 text-sm">(country roads)</span>
+
</div>
+
</article>
</div>
</template>
+12 -4
app/pages/posts/[...slug].vue
···
</article>
<div v-else class="flex items-center justify-center">
-
<div class="text-center">
-
<h1 class="text-4xl font-bold">404</h1>
-
<p class="text-neutral-500">Page not found</p>
-
</div>
+
<article class="grid place-items-center gap-6 mt-12">
+
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-200">It seems you might be lost...</h2>
+
<p class="text-gray-500 dark:text-gray-400">Please check the URL and try again.</p>
+
+
<div></div>
+
+
<div class="flex flex-row gap-2 items-baseline">
+
<A href="/" target="_self" class="text-lg">
+
Take me home!</A>
+
<span class="text-gray-500 dark:text-gray-400 text-sm">(country roads)</span>
+
</div>
+
</article>
</div>
</div>
</template>