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]"
           />

docs/content.config.ts

@@ -0,0 +1,27 @@
+import { defineCollection, z } from '@nuxt/content'
+
+export const collections = {
+  content: defineCollection({
+    type: 'page',
+    source: '**/*',
+    schema: z.object({
+      links: z.array(z.object({
+        label: z.string(),
+        icon: z.string(),
+        avatar: z.object({
+          src: z.string(),
+          alt: z.string()
+        }).optional(),
+        to: z.string(),
+        target: z.string().optional()
+      })),
+      select: z.object({
+        items: z.array(z.object({
+          label: z.string(),
+          icon: z.string(),
+          to: z.string()
+        }))
+      })
+    })
+  })
+}

docs/content/1.getting-started/.navigation.yml

@@ -0,0 +1 @@
+title: Getting Started

docs/content/1.getting-started/_dir.yml

@@ -1,3 +0,0 @@
-title: Getting Started
-navigation:
-  badge: null

docs/content/3.components/meter.md

@@ -1,30 +0,0 @@
----
-description: A gauge meter that fills or depletes.
-links:
-  - label: GitHub
-    icon: i-simple-icons-github
-    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Meter.vue
-navigation: false
----
-
-## Usage
-
-## Examples
-
-## API
-
-### Props
-
-:component-props
-
-### Slots
-
-:component-slots
-
-### Emits
-
-:component-emits
-
-## Theme
-
-:component-theme

docs/nuxt.config.ts

@@ -21,13 +21,6 @@ export default defineNuxtConfig({
     'nuxt-og-image'
   ],
 
-  $production: {
-    routeRules: {
-      '/api/_mdc/highlight': { cache: { group: 'mdc', name: 'highlight', maxAge: 60 * 60 } },
-      '/api/_content/query/**': { cache: { group: 'content', name: 'query', maxAge: 60 * 60 } }
-    }
-  },
-
   app: {
     rootAttrs: {
       'vaul-drawer-wrapper': '',
@@ -40,26 +33,18 @@ export default defineNuxtConfig({
   },
 
   content: {
-    // sources: {
-    //   pro: process.env.NUXT_UI_PRO_PATH
-    //     ? {
-    //         prefix: '/pro',
-    //         driver: 'fs',
-    //         base: resolve(process.env.NUXT_UI_PRO_PATH, 'docs/app/content/pro')
-    //       }
-    //     : process.env.NUXT_GITHUB_TOKEN
-    //       ? {
-    //           prefix: '/pro',
-    //           driver: 'github',
-    //           repo: 'nuxt/ui-pro',
-    //           branch: 'dev',
-    //           dir: 'docs/app/content/pro',
-    //           token: process.env.NUXT_GITHUB_TOKEN || ''
-    //         }
-    //       : undefined
-    // },
+    build: {
+      markdown: {
+        highlight: {
+          langs: ['bash', 'ts', 'diff', 'vue', 'json', 'yml', 'css', 'mdc']
+        }
+      }
+    }
+  },
+
+  mdc: {
     highlight: {
-      langs: ['bash', 'ts', 'diff', 'vue', 'json', 'yml', 'css', 'mdc']
+      noApiRoute: false
     }
   },
 
@@ -111,52 +96,6 @@ export default defineNuxtConfig({
     cache: true
   },
 
-  hooks: {
-    'components:extend': (components) => {
-      const globals = components.filter(c => [
-        'UAccordion',
-        'UAlert',
-        'UAvatar',
-        'UAvatarGroup',
-        'UBadge',
-        'UBreadcrumb',
-        'UButton',
-        'UButtonGroup',
-        'UCheckbox',
-        'UChip',
-        'UCollapsible',
-        'UCommandPalette',
-        'UContextMenu',
-        'UDrawer',
-        'UDropdownMenu',
-        'UFormField',
-        'UIcon',
-        'UInput',
-        'UInputMenu',
-        'UKbd',
-        'ULink',
-        'UModal',
-        'UNavigationMenu',
-        'UPagination',
-        'UPopover',
-        'UProgress',
-        'URadioGroup',
-        'USelect',
-        'USelectMenu',
-        'USeparator',
-        'USlider',
-        'USlideover',
-        'USwitch',
-        'UTable',
-        'UTabs',
-        'UTextarea',
-        'UTooltip'
-      ].includes(c.pascalName))
-
-      globals.forEach(c => c.global = 'sync')
-    }
-  },
-
   componentMeta: {
     exclude: [
       '@nuxt/content',

docs/package.json

@@ -6,10 +6,10 @@
     "@iconify-json/heroicons": "^1.2.1",
     "@iconify-json/simple-icons": "^1.2.10",
     "@iconify-json/vscode-icons": "^1.2.2",
-    "@nuxt/content": "^2.13.4",
+    "@nuxt/content": "3.0.0-alpha.5",
     "@nuxt/image": "^1.8.1",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@d0eb4a2",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@f8e24cf",
     "@nuxthub/core": "^0.8.4",
     "@nuxtjs/plausible": "^1.0.3",
     "@octokit/rest": "^21.0.2",