Update error page

src/error.vue

@@ -10,8 +10,17 @@ const getColor = computed(() => appConfig.ui.primary)
 </script>
 
 <template>
-  <NuxtLayout name="default">
-    <div class="flex flex-col items-center gap-4 mt-12">
+  <section>
+    <NuxtLoadingIndicator :color="getColor" />
+    <section class="fixed inset-0 flex justify-center sm:px-8">
+      <div class="flex w-full max-w-7xl">
+        <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
+      </div>
+    </section>
+    <div class="relative z-50 min-h-[100svh]">
+      <Header />
+      <UContainer>
+        <div class="flex flex-col items-center gap-4 mt-12">
       <h1 class="font-medium text-[8rem] md:text-[16rem] leading-none bg-error bg-clip-text tracking-wider font-error" :class="`text-${getColor}-500`">
         {{ error?.statusCode }}
       </h1>
@@ -29,7 +38,10 @@ const getColor = computed(() => appConfig.ui.primary)
         Go back to the main page
       </UButton>
     </div>
-  </NuxtLayout>
+      </UContainer>
+      <Footer />
+    </div>
+  </section>
 </template>
 
 <style scoped>

src/pages/writing/[slug].vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { Post } from '~~/types'
+import type { Post } from '~~/types';
 
 const route = useRoute()
 const { data: postContent } = await useAsyncData<Post>(`writing:${route.params.slug}`, async () => await queryContent<Post>(`/writing/${route.params.slug}`).findOne())
 
 if (!postContent.value) {
-  throw createError({
+  throw showError({
     statusMessage: 'The post you are looking for was not found.',
     statusCode: 404,
   })
@@ -92,7 +92,7 @@ async function handleLike() {
                 <div class="my-16 text-subtitle">
                   <div class="flex gap-2 items-center">
                     <UIcon name="i-eos-icons-loading" />
-                    <p>The talents are loading...</p>
+                    <p>The content of the post is loading...</p>
                   </div>
                 </div>
               </template>