docs(deps): update @nuxt/content

docs/app/app.vue

@@ -7,7 +7,7 @@ const route = useRoute()
 const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
-const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content', ['framework']))
 const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
   server: false
 })

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

@@ -3,6 +3,7 @@ import type { ContentNavigationItem } from '@nuxt/content'
 import { findPageBreadcrumb, mapContentNavigation } from '#ui-pro/utils/content'
 
 const route = useRoute()
+const { framework } = useSharedData()
 
 definePageMeta({
   layout: 'docs'
@@ -13,21 +14,23 @@ if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
 
-const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryCollectionItemSurroundings('content', route.path, {
-  fields: ['description']
-}))
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
+  return queryCollectionItemSurroundings('content', route.path, {
+    fields: ['description']
+  }).orWhere(group => group.where('framework', '=', framework.value).where('framework', 'IS NULL'))
+}, {
+  watch: [framework]
+})
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
 
-const { framework } = useSharedData()
-
 // Redirect to the correct framework version if the page is not the current framework
 if (!import.meta.prerender) {
   watch(framework, () => {
-    if (page.value?.navigation?.framework && page.value?.navigation?.framework !== framework.value) {
-      if (route.path.endsWith(`/${page.value?.navigation?.framework}`)) {
+    if (page.value?.framework && page.value?.framework !== framework.value) {
+      if (route.path.endsWith(`/${page.value?.framework}`)) {
         navigateTo(`${route.path.split('/').slice(0, -1).join('/')}/${framework.value}`)
       } else {
         navigateTo(`/getting-started`)
@@ -38,15 +41,15 @@ if (!import.meta.prerender) {
 
 // Update the framework if the page has a different framework
 watch(page, () => {
-  if (page.value?.navigation?.framework && page.value?.navigation?.framework !== framework.value) {
-    framework.value = page.value?.navigation?.framework as string
+  if (page.value?.framework && page.value?.framework !== framework.value) {
+    framework.value = page.value?.framework as string
   }
 }, { immediate: true })
 
 useSeoMeta({
   titleTemplate: '%s - Nuxt UI v3',
-  title: typeof page.value.navigation === 'object' && page.value.navigation.title ? page.value.navigation.title : page.value.title,
-  ogTitle: `${typeof page.value.navigation === 'object' && page.value.navigation.title ? page.value.navigation.title : page.value.title} - Nuxt UI v3`,
+  title: page.value.navigation?.title ? page.value.navigation.title : page.value.title,
+  ogTitle: `${page.value.navigation?.title ? page.value.navigation.title : page.value.title} - Nuxt UI v3`,
   description: page.value.description,
   ogDescription: page.value.description
 })

docs/content.config.ts

@@ -5,9 +5,9 @@ export const collections = {
     type: 'page',
     source: '**/*',
     schema: z.object({
+      framework: z.string().optional(),
       navigation: z.object({
-        title: z.string().optional(),
-        framework: z.string().optional()
+        title: z.string().optional()
       }),
       links: z.array(z.object({
         label: z.string(),

docs/content/1.getting-started/2.installation/1.nuxt.md

@@ -1,7 +1,7 @@
 ---
 title: Installation
 description: 'Learn how to install and configure Nuxt UI in your Nuxt application.'
-navigation.framework: nuxt
+framework: nuxt
 ---
 
 ::callout{to="/getting-started/installation/vue" icon="i-logos-vue" class="hidden"}

docs/content/1.getting-started/2.installation/2.vue.md

@@ -1,7 +1,7 @@
 ---
 title: Installation
 description: 'Learn how to install and configure Nuxt UI in your Vue application.'
-navigation.framework: vue
+framework: vue
 ---
 
 ::callout{to="/getting-started/installation/nuxt" icon="i-logos-nuxt-icon" class="hidden"}

docs/content/1.getting-started/4.icons/1.nuxt.md

@@ -1,7 +1,7 @@
 ---
 title: Icons
 description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.'
-navigation.framework: nuxt
+framework: nuxt
 links:
   - label: 'Iconify'
     to: https://iconify.design/

docs/content/1.getting-started/4.icons/2.vue.md

@@ -1,7 +1,7 @@
 ---
 title: Icons
 description: 'Nuxt UI integrates with Iconify to access over 200,000+ icons.'
-navigation.framework: vue
+framework: vue
 links:
   - label: 'Iconify'
     to: https://iconify.design/

docs/content/1.getting-started/5.fonts.md

@@ -1,7 +1,7 @@
 ---
 title: Fonts
 description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.'
-navigation.framework: nuxt
+framework: nuxt
 links:
   - label: 'nuxt/fonts'
     to: https://github.com/nuxt/fonts

docs/content/1.getting-started/6.color-mode/1.nuxt.md

@@ -1,7 +1,7 @@
 ---
 title: Color Mode
 description: 'Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.'
-navigation.framework: nuxt
+framework: nuxt
 links:
   - label: 'nuxtjs/color-mode'
     to: https://github.com/nuxt-modules/color-mode

docs/content/1.getting-started/6.color-mode/2.vue.md

@@ -1,7 +1,7 @@
 ---
 title: Color Mode
 description: 'Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.'
-navigation.framework: vue
+framework: vue
 ---
 
 ::callout{to="/getting-started/color-mode/nuxt" icon="i-logos-nuxt-icon" class="hidden"}

docs/content/1.getting-started/7.i18n/1.nuxt.md

@@ -1,7 +1,7 @@
 ---
 title: Internationalization (i18n)
 description: 'Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).'
-navigation.framework: nuxt
+framework: nuxt
 ---
 
 ::callout{to="/getting-started/i18n/vue" icon="i-logos-vue" class="hidden"}

docs/content/1.getting-started/7.i18n/2.vue.md

@@ -1,7 +1,7 @@
 ---
 title: Internationalization (i18n)
 description: 'Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).'
-navigation.framework: vue
+framework: vue
 ---
 
 ::callout{to="/getting-started/i18n/nuxt" icon="i-logos-nuxt-icon" class="hidden"}

docs/nuxt.config.ts

@@ -41,15 +41,6 @@ export default defineNuxtConfig({
       markdown: {
         highlight: {
           langs: ['bash', 'ts', 'typescript', 'diff', 'vue', 'json', 'yml', 'css', 'mdc']
-        },
-        remarkPlugins: {
-          'remark-mdc': {
-            options: {
-              experimental: {
-                autoUnwrap: false
-              }
-            }
-          }
         }
       }
     }

docs/package.json

@@ -7,7 +7,7 @@
     "@iconify-json/lucide": "^1.2.16",
     "@iconify-json/simple-icons": "^1.2.13",
     "@iconify-json/vscode-icons": "^1.2.2",
-    "@nuxt/content": "3.0.0-alpha.7",
+    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@7f8f128",
     "@nuxt/image": "^1.8.1",
     "@nuxt/ui": "latest",
     "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@1408077",