docs: update to @nuxt/content@next (#2379)

Co-authored-by: Farnabaz <farnabaz@gmail.com>

docs/app/app.vue

@@ -2,16 +2,13 @@
 import { withoutTrailingSlash } from 'ufo'
 import colors from 'tailwindcss/colors'
 // import { debounce } from 'perfect-debounce'
-import type { ContentSearchFile } from '@nuxt/ui-pro'
 
 const route = useRoute()
 const appConfig = useAppConfig()
 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<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '-' + integrity : ''}`, { default: () => [] })
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
+const { data: files } = await useAsyncData('files', () => queryCollectionSearchSections('content', { ignoredTags: ['style'] }))
 
 const searchTerm = ref('')
 
@@ -29,7 +26,7 @@ const links = computed(() => {
     icon: 'i-heroicons-book-open',
     to: '/getting-started',
     active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
-  }, ...(navigation.value.find(item => item._path === '/pro')
+  }, ...(navigation.value?.find(item => item.path === '/pro')
     ? [{
         label: 'Pro',
         icon: 'i-heroicons-square-3-stack-3d',
@@ -76,12 +73,15 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-const updatedNavigation = computed(() => navigation.value.map(item => ({
+const updatedNavigation = computed(() => navigation.value?.map(item => ({
   ...item,
-  children: item.children?.map(child => ({
+  children: item.children?.map((child: typeof item) => ({
     ...child,
-    active: child.title === 'Installation' ? route.path.startsWith('/getting-started/installation') : undefined,
-    children: child.title === 'Installation' ? [] : child.children
+    ...(child.path === '/getting-started/installation' && {
+      title: 'Installation',
+      active: route.path.startsWith('/getting-started/installation'),
+      children: []
+    })
   })) || []
 })))
 

docs/app/components/Header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 import type { NavigationMenuItem } from '@nuxt/ui'
 
 defineProps<{
@@ -8,7 +8,7 @@ defineProps<{
 
 const config = useRuntimeConfig().public
 
-const navigation = inject<Ref<NavItem[]>>('navigation')
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 // const items = computed(() => props.links.map(({ icon, ...link }) => link))
 

docs/app/components/content/ComponentCode.vue

@@ -43,6 +43,7 @@ const { $prettier } = useNuxtApp()
 
 const camelName = camelCase(props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
+const component = defineAsyncComponent(() => import(`#ui/components/${upperFirst(camelName)}.vue`))
 
 const componentProps = reactive({ ...(props.props || {}) })
 const componentEvents = reactive({
@@ -268,12 +269,12 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
         </template>
       </div>
 
-      <div class="flex justify-center border border-b-0 border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
-        <component :is="name" v-bind="{ ...componentProps, ...componentEvents }">
+      <div v-if="component" class="flex justify-center border border-b-0 border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
+        <component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
-            <ContentSlot :name="slot" unwrap="p">
+            <MDCSlot :name="slot" unwrap="p">
               {{ slots?.[slot] }}
-            </ContentSlot>
+            </MDCSlot>
           </template>
         </component>
       </div>

docs/app/components/content/ComponentEmits.vue

@@ -24,9 +24,9 @@ const meta = await fetchComponentMeta(name as any)
     <ProseTbody>
       <ProseTr v-for="event in (meta?.meta?.events || [])" :key="event.name">
         <ProseTd>
-          <ProseCodeInline>
+          <ProseCode>
             {{ event.name }}
-          </ProseCodeInline>
+          </ProseCode>
         </ProseTd>
         <ProseTd>
           <HighlightInlineType v-if="event.type" :type="event.type" />

docs/app/components/content/ComponentProps.vue

@@ -87,9 +87,9 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
     <ProseTbody>
       <ProseTr v-for="prop in metaProps" :key="prop.name">
         <ProseTd>
-          <ProseCodeInline>
+          <ProseCode>
             {{ prop.name }}
-          </ProseCodeInline>
+          </ProseCode>
         </ProseTd>
         <ProseTd>
           <HighlightInlineType v-if="prop.default" :type="prop.default" />

docs/app/components/content/ComponentSlots.vue

@@ -24,9 +24,9 @@ const meta = await fetchComponentMeta(name as any)
     <ProseTbody>
       <ProseTr v-for="slot in (meta?.meta?.slots || [])" :key="slot.name">
         <ProseTd>
-          <ProseCodeInline>
+          <ProseCode>
             {{ slot.name }}
-          </ProseCodeInline>
+          </ProseCode>
         </ProseTd>
         <ProseTd>
           <HighlightInlineType v-if="slot.type" :type="slot.type" />

docs/app/error.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { NuxtError } from '#app'
 import colors from 'tailwindcss/colors'
-import type { ContentSearchFile } from '@nuxt/ui-pro'
+import type { NuxtError } from '#app'
 
 const props = defineProps<{
   error: NuxtError
@@ -10,11 +9,9 @@ const props = defineProps<{
 const route = useRoute()
 const appConfig = useAppConfig()
 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<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '-' + integrity : ''}`, { default: () => [] })
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
+const { data: files } = await useAsyncData('files', () => queryCollectionSearchSections('content', { ignoredTags: ['style'] }))
 
 const links = computed(() => {
   return [{
@@ -22,7 +19,7 @@ const links = computed(() => {
     icon: 'i-heroicons-book-open',
     to: '/getting-started',
     active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
-  }, ...(navigation.value.find(item => item._path === '/pro')
+  }, ...(navigation.value?.find(item => item.path === '/pro')
     ? [{
         label: 'Pro',
         icon: 'i-heroicons-square-3-stack-3d',

docs/app/layouts/docs.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 
-const nav = inject<Ref<NavItem[]>>('navigation')
-
-const navigation = computed(() => nav?.value.filter(item => !item._path.startsWith('/pro')))
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 </script>
 
 <template>

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { withoutTrailingSlash } from 'ufo'
-import type { NavItem } from '@nuxt/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 import { findPageBreadcrumb, mapContentNavigation } from '#ui-pro/utils/content'
 
 const route = useRoute()
@@ -9,31 +8,23 @@ definePageMeta({
   layout: 'docs'
 })
 
-const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
+const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
 
-const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
-  return queryContent()
-    .where({
-      _extension: 'md',
-      navigation: {
-        $ne: false
-      }
-    })
-    .only(['title', 'description', '_path'])
-    .findSurround(withoutTrailingSlash(route.path))
-}, { default: () => [] })
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryCollectionItemSurroundings('content', route.path, {
+  fields: ['description']
+}))
 
-const navigation = inject<Ref<NavItem[]>>('navigation')
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)))
 
 useSeoMeta({
   titleTemplate: '%s - Nuxt UI v3',
-  title: page.value.navigation?.title || page.value.title,
-  ogTitle: `${page.value.navigation?.title || page.value.title} - Nuxt UI v3`,
+  title: typeof page.value.navigation === 'object' ? page.value.navigation.title : page.value.title,
+  ogTitle: `${typeof page.value.navigation === 'object' ? page.value.navigation.title : page.value.title} - Nuxt UI v3`,
   description: page.value.seo?.description || page.value.description,
   ogDescription: page.value.seo?.description || page.value.description
 })
@@ -45,7 +36,7 @@ defineOgImageComponent('Docs', {
 const communityLinks = computed(() => [{
   icon: 'i-heroicons-pencil-square',
   label: 'Edit this page',
-  to: `https://github.com/nuxt/ui/edit/v3/docs/content/${page?.value?._file}`,
+  to: `https://github.com/nuxt/ui/edit/v3/docs/content/${page?.value?.stem}.md`,
   target: '_blank'
 }, {
   icon: 'i-heroicons-star',
@@ -97,7 +88,7 @@ const communityLinks = computed(() => [{
             trailing-icon="i-heroicons-chevron-down-20-solid"
             :class="[open && 'bg-[var(--ui-bg-accented)]/75']"
             :ui="{
-              trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : '']
+              trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
             }"
             class="w-[128px]"
           />