docs(app): update error

docs/app/error.vue

@@ -1,28 +1,20 @@
 <script setup lang="ts">
 import type { NuxtError } from '#app'
-// import type { ContentSearchFile } from '@nuxt/ui-pro'
+import colors from 'tailwindcss/colors'
+import type { ContentSearchFile } from '@nuxt/ui-pro'
 
-useSeoMeta({
+const props = defineProps<{
-  title: 'Page not found',
-  description: 'We are sorry but this page could not be found.'
-})
-
-defineProps<{
   error: NuxtError
 }>()
 
 const route = useRoute()
-// const colorMode = useColorMode()
+const appConfig = useAppConfig()
-// const { branch } = useContentSource()
+const colorMode = useColorMode()
 const runtimeConfig = useRuntimeConfig()
 const { integrity, api } = runtimeConfig.public.content
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
-const { data: files } = await useLazyFetch<any[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
+const { data: files } = await useLazyFetch<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '-' + integrity : ''}`, { default: () => [] })
-
-// Computed
-
-// const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 const links = computed(() => {
   return [{
@@ -52,43 +44,52 @@ const links = computed(() => {
   }].filter(Boolean)
 })
 
-// Head
+const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
+const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 
 useHead({
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    // { key: 'theme-color', name: 'theme-color', content: color }
+    { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
     { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
   ],
+  style: [
+    { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 }
+  ],
   htmlAttrs: {
     lang: 'en'
   }
 })
 
-// Provide
+useSeoMeta({
+  titleTemplate: '%s - Nuxt UI v3',
+  title: String(props.error.statusCode)
+})
+
+useServerSeoMeta({
+  ogSiteName: 'Nuxt UI',
+  twitterCard: 'summary_large_image'
+})
 
 provide('navigation', navigation)
-provide('files', files)
 </script>
 
 <template>
   <UApp>
     <NuxtLoadingIndicator />
 
+    <Banner />
+
     <Header :links="links" />
 
-    <UContainer>
+    <UError :error="error" />
-      <UMain>
-        <UPage>
-          <!-- <UPageError :error="error" /> -->
-        </UPage>
-      </UMain>
-    </UContainer>
 
     <Footer />
 
-    <LazyUContentSearch :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
+    <ClientOnly>
+      <LazyUContentSearch :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
+    </ClientOnly>
   </UApp>
 </template>