docs: move to /docs

docs/app/app.vue

@@ -37,8 +37,8 @@ const links = computed(() => {
   return [{
     label: 'Docs',
     icon: 'i-lucide-book',
-    to: '/getting-started',
-    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components'),
+    to: '/docs/getting-started',
+    active: route.path.startsWith('/docs'),
   }].filter(Boolean)
 })
 

docs/app/error.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   error: NuxtError
 }>()
 
+const route = useRoute()
 const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
@@ -14,6 +15,15 @@ const { data: files } = await useAsyncData('files', () => queryCollectionSearchS
 
 const color = computed(() => colorMode.value === 'dark' ? colors[appConfig.ui.colors.neutral as keyof typeof colors][900] : 'white')
 
+const links = computed(() => {
+  return [{
+    label: 'Docs',
+    icon: 'i-lucide-book',
+    to: '/docs/getting-started',
+    active: route.path.startsWith('/docs'),
+  }].filter(Boolean)
+})
+
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },

docs/app/layouts/docs.vue

@@ -3,7 +3,7 @@ import type { ContentNavigationItem } from '@nuxt/content'
 
 const nav = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const navigation = computed(() => nav?.value.filter(item => !item._path.startsWith('/pro')))
+const navigation = computed(() => nav?.value.find(item => item.path === '/docs')?.children || [])
 </script>
 
 <template>

docs/content.config.ts

@@ -1,8 +1,23 @@
-import { defineCollection } from '@nuxt/content'
+import { defineCollection, z } from '@nuxt/content'
 
 export const collections = {
   docs: defineCollection({
     type: 'page',
-    source: '**',
+    source: {
+      path: 'docs/**',
+      prefix: '/docs',
+    },
+    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(),
+      })).optional(),
+    }),
   }),
 }

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

@@ -0,0 +1,2 @@
+title: Getting Started
+icon: i-lucide-square-play

docs/content/1.getting-started/1.index.md → docs/content/docs/1.getting-started/1.index.md

@@ -42,3 +42,7 @@ The new collections system provides automatic TypeScript types for all your data
 :hr
 
 We're excited for you to explore these new capabilities. Dive into our documentation to learn more about integrating the module and implementing best practices in your next project.
+
+## Content V2 Migration
+
+Learn how to migrate from Content v2 to v3 in the [migration guide](/docs/getting-started/migration).

docs/content/1.getting-started/5.migration.md → docs/content/docs/1.getting-started/6.migration.md

@@ -34,7 +34,7 @@ Here is the list breaking changes in Content v3:
 Implementing document driven mode is Content v3 is quite easy. All you need is to create a catch-all page in Nuxt and fetch contents based on route path.
 
 
-```vue [[...slug\\].vue]
+```vue [pages/[...slug\\].vue]
 <script lang="ts" setup>
 const route = useRoute()
 const { data: page } = await useAsyncData(route.path, () => {

docs/content/2.usage/.navigation.yml → docs/content/docs/2.usage/.navigation.yml

@@ -1,2 +1,2 @@
-title: How To Use
+title: Concepts
 icon: i-lucide-lightbulb

docs/content/docs/3.composables/.navigation.yml

@@ -0,0 +1 @@
+icon: i-lucide-square-function

docs/content/3.api/1.query-collection.md → docs/content/docs/3.composables/1.query-collection.md

@@ -13,7 +13,7 @@ function queryCollection<T extends keyof Collections>(collection: T): Collection
 
 Use the auto-imported `queryCollection` to find contents inside a collection.Here we assume that you havr defined `docs` collection inside `content.config.ts`. If you have not defined any collection, check [How to define a collection](/getting-started/collections#defineCollection).
 
-```vue [[...slug\\].vue]
+```vue [pages/[...slug\\].vue]
 <script>
 const route = useRoute()
 const { data: page } = await useAsyncData(route.path, () => {

docs/content/3.api/2.query-collection-navigation.md → docs/content/docs/3.composables/2.query-collection-navigation.md

@@ -14,7 +14,7 @@ function queryCollectionNavigation<T extends keyof PageCollections>(collection:
 Use the auto-imported `queryCollectionNavigation` to generate a navigation tree for a specific collection. This is particularly useful for creating dynamic navigation menus or sidebars based on your content structure.
 
 
-```vue [[...slug\\].vue]
+```vue [pages/[...slug\\].vue]
 <script setup lang="ts">
 const { data } = await useAsyncData('navigation', () => {
   return queryCollectionNavigation('docs')

docs/content/3.api/3.query-collection-item-surroundings.md → docs/content/docs/3.composables/3.query-collection-item-surroundings.md

@@ -13,7 +13,7 @@ function queryCollectionItemSurroundings<T extends keyof PageCollections>(collec
 
 Use the auto-imported `queryCollectionItemSurroundings` to find the previous and next items relative to a specific content item in a collection. This is particularly useful for creating navigation between related content pages.
 
-```vue [[...slug\\].vue]
+```vue [pages/[...slug\\].vue]
 <script setup lang="ts">
 const { data } = await useAsyncData('surround', () => {
   return queryCollectionItemSurroundings('docs', '/foo')
@@ -46,7 +46,7 @@ Each item in the array is of type `ContentNavigationItem` or `null` if there is
 Here's an example of how to use `queryCollectionItemSurroundings` to create a simple navigation between content pages:
 
 
-```vue [[...slug\\].vue]
+```vue [pages/[...slug\\].vue]
 <script setup lang="ts">
 const { data } = await useAsyncData('surround', () => {
   return queryCollectionItemSurroundings('docs', '/foo', {

docs/content/3.api/4.query-collection-search-sections.md → docs/content/docs/3.composables/4.query-collection-search-sections.md

@@ -44,7 +44,7 @@ Generate searchable sections from the specified collection.
 Here's an example of how to use `queryCollectionSearchSections` to create searchable sections from the 'docs' collection:
 
 
-```vue [[...slug\\].vue]
+```vue [pages/[...slug\\].vue]
 <script>
 const { data: surround } = await useAsyncData('foo-surround', () => {
   return queryCollectionSearchSections('docs', {

docs/content/4.components/.navigation.yml → docs/content/docs/4.components/.navigation.yml

@@ -1,3 +1,3 @@
 title: Components
 navigation:
-  icon: i-lucide-blocks
+  icon: i-lucide-square-code

docs/content/4.components/0.content-renderer.md → docs/content/docs/4.components/0.content-renderer.md

@@ -37,7 +37,7 @@ The `<ContentRenderer>` component renders a document coming from a query with [`
 
 ## Example
 
-```vue [[...slug\\].vue]
+```vue [pages/[...slug\\].vue]
 <script lang="ts" setup>
 const route = useRoute()
 const { data: page } = await useAsyncData(route.path, () => {

docs/content/4.components/2.prose.md → docs/content/docs/4.components/2.prose.md

@@ -1,6 +1,10 @@
 ---
 title: 'Prose Components'
 description: 'A list of Prose components.'
+links:
+  - label: 'Content Renderer'
+    icon: 'i-lucide-square-text'
+    to: '/components/content-renderer'
 ---
 
 Prose component are replacements for HTML typography tags. Prose components provides simple way to customize content UI. To overwrite a prose component, create a component with the same name in your project `components/content/` directory (ex: `components/content/ProseA.vue`)

docs/nuxt.config.ts

@@ -40,7 +40,7 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
-    '/': { redirect: '/getting-started', prerender: false },
+    '/': { redirect: '/docs/getting-started', prerender: false },
   },
 
   future: {