docs: bump @nuxt-themes/ui-kit

docs/app.vue

@@ -1,39 +1,15 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
-    <UHeader>
-      <template #left>
-        <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
-          <Logo class="w-8 h-8 text-primary" />
-
-          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
-        </NuxtLink>
-      </template>
-
-      <template #center>
-        <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
-      </template>
-
-      <template #right>
-        <ColorPicker />
-
-        <UColorModeButton />
-
-        <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
-        <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
-      </template>
-
-      <template #links>
-        <UAsideAnchors :links="anchors" />
-        <UAsideLinks :links="links" />
-      </template>
-    </UHeader>
+    <Header />
 
     <UMain>
       <UContainer>
         <UPage>
           <template #left>
-            <UAside :links="links" :anchors="anchors" />
+            <UAside :links="anchors">
+              <UNavigationTree :links="mapContentNavigation(navigation)" />
+            </UAside>
           </template>
 
           <NuxtPage />
@@ -42,7 +18,7 @@
     </UMain>
 
     <ClientOnly>
-      <UDocsSearch :files="files" :links="links" />
+      <UDocsSearch :files="files" :navigation="navigation" />
     </ClientOnly>
 
     <UNotifications>
@@ -59,14 +35,14 @@
 
 <script setup lang="ts">
 const colorMode = useColorMode()
+const { mapContentNavigation } = useElementsHelpers()
 
-const { data: links } = await useAsyncData('navigation', () => fetchContentNavigation(), {
-  transform: (navigation) => mapContentLinks(navigation)
+const { data: navigation } = await useLazyAsyncData('navigation', () => fetchContentNavigation(), {
+  default: () => []
+})
+const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
+  default: () => []
 })
-
-const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), { default: () => [] })
-
-provide('links', links)
 
 const anchors = [{
   label: 'Documentation',
@@ -109,4 +85,8 @@ useSeoMeta({
   twitterImage: '/social-preview.jpg',
   twitterCard: 'summary_large_image'
 })
+
+// Provide
+
+provide('navigation', navigation)
 </script>

docs/components/Header.vue

@@ -0,0 +1,36 @@
+<template>
+  <UHeader>
+    <template #left>
+      <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+        <Logo class="w-8 h-8 text-primary" />
+
+        <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
+      </NuxtLink>
+    </template>
+
+    <template #center>
+      <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
+    </template>
+
+    <template #right>
+      <ColorPicker />
+
+      <UColorModeButton />
+
+      <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
+      <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
+    </template>
+
+    <template #panel>
+      <UNavigationTree :links="mapContentNavigation(navigation)" />
+    </template>
+  </UHeader>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const { mapContentNavigation } = useElementsHelpers()
+
+const navigation = inject<Ref<NavItem[]>>('navigation')
+</script>

docs/components/content/themes/CommandPaletteThemeAlgolia.vue

@@ -1,11 +1,11 @@
 <script setup>
 const commandPaletteRef = ref()
 
-const links = inject('links')
+const navigation = inject('navigation')
 
 const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
 
-const groups = computed(() => links.value.map(item => ({
+const groups = computed(() => navigation.value.map(item => ({
   key: item.to,
   label: item.label,
   commands: files.value.filter(file => file._path.startsWith(item.to)).map(file => ({

docs/error.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Header />
+
+    <UContainer>
+      <UMain>
+        <UPage>
+          <UPageError :error="error" />
+        </UPage>
+      </UMain>
+    </UContainer>
+
+    <ClientOnly>
+      <UDocsSearch :files="files" :navigation="navigation" />
+    </ClientOnly>
+
+    <UNotifications />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.'
+})
+
+defineProps<{
+  error: NuxtError
+}>()
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), {
+  default: () => []
+})
+const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
+  default: () => []
+})
+
+// Provide
+
+provide('navigation', navigation)
+</script>

docs/package.json

@@ -7,7 +7,7 @@
   "devDependencies": {
     "@iconify-json/heroicons": "latest",
     "@iconify-json/simple-icons": "latest",
-    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a",
+    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91",
     "@nuxt/content": "^2.7.2",
     "@nuxt/devtools": "^0.6.7",
     "@nuxt/eslint-config": "^0.1.1",

docs/pages/[...slug].vue

@@ -1,21 +1,15 @@
 <template>
-  <UPage v-if="page">
-    <UPageHeader v-bind="page" :headline="headline" />
+  <UPage>
+    <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
 
     <UPageBody prose>
-      <ContentRenderer v-if="page && page.body" :value="page" />
+      <ContentRenderer v-if="page.body" :value="page" />
 
       <div class="mt-12 not-prose">
-        <UButton
-          :to="githubLink"
-          variant="link"
-          icon="i-heroicons-pencil-square"
-          label="Edit this page on GitHub"
-          :padded="false"
-        />
+        <UButton :to="githubLink" variant="link" icon="i-heroicons-pencil-square" label="Edit this page on GitHub" :padded="false" />
       </div>
 
-      <hr v-if="surround?.length" class="border-gray-200 dark:border-gray-800 my-8">
+      <hr v-if="surround?.length" class="my-8">
 
       <UDocsSurround :surround="surround" />
 
@@ -26,25 +20,24 @@
       <UDocsToc :links="page.body.toc.links" />
     </template>
   </UPage>
-  <UPageError v-else />
 </template>
 
 <script setup lang="ts">
 const route = useRoute()
+const { findPageHeadline } = useElementsHelpers()
 
 const { data: page } = await useAsyncData(`docs-${route.path}`, () => queryContent(route.path).findOne())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found' })
+}
+
 const { data: surround } = await useAsyncData(`docs-${route.path}-surround`, () => queryContent()
   .where({ _extension: 'md', navigation: { $ne: false } })
   .findSurround(route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
 )
 
-if (process.server && !page.value) {
-  const event = useRequestEvent()
-  setResponseStatus(event, 404)
-}
-
 useContentHead(page)
 
 const githubLink = computed(() => `https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page?.value?._file}`)
-const headline = computed(() => page.value._dir?.title ? page.value._dir.title : useLowerCase(page.value._dir))
+const headline = computed(() => findPageHeadline(page.value))
 </script>