docs(getting-started): improve categories

Author: benjamincanac

docs/app/layouts/docs.vue

@@ -6,64 +6,83 @@ const route = useRoute()
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const categories = [{
-  id: 'layout',
-  title: 'Layout'
-}, {
-  id: 'element',
-  title: 'Element'
-}, {
-  id: 'form',
-  title: 'Form'
-}, {
-  id: 'data',
-  title: 'Data'
-}, {
-  id: 'navigation',
-  title: 'Navigation'
-}, {
-  id: 'overlay',
-  title: 'Overlay'
-}, {
-  id: 'page',
-  title: 'Page'
-}, {
-  id: 'content',
-  title: 'Content'
-}, {
-  id: 'dashboard',
-  title: 'Dashboard'
-}, {
-  id: 'chat',
-  title: 'AI Chat'
-}, {
-  id: 'color-mode',
-  title: 'Color Mode'
-}, {
-  id: 'i18n',
-  title: 'i18n'
-}]
+const categories = {
+  'getting-started': [{
+    id: 'integrations',
+    title: 'Integrations'
+  }],
+  'components': [{
+    id: 'layout',
+    title: 'Layout'
+  }, {
+    id: 'element',
+    title: 'Element'
+  }, {
+    id: 'form',
+    title: 'Form'
+  }, {
+    id: 'data',
+    title: 'Data'
+  }, {
+    id: 'navigation',
+    title: 'Navigation'
+  }, {
+    id: 'overlay',
+    title: 'Overlay'
+  }, {
+    id: 'page',
+    title: 'Page'
+  }, {
+    id: 'content',
+    title: 'Content'
+  }, {
+    id: 'dashboard',
+    title: 'Dashboard'
+  }, {
+    id: 'chat',
+    title: 'AI Chat'
+  }, {
+    id: 'color-mode',
+    title: 'Color Mode'
+  }, {
+    id: 'i18n',
+    title: 'i18n'
+  }]
+}
 
-function groupChildrenByCategory(items: ContentNavigationItem[]): ContentNavigationItem[] {
+function groupChildrenByCategory(items: ContentNavigationItem[], slug: string): ContentNavigationItem[] {
   const childrenGroupedByCategory = items.reduce((acc, child) => {
     if (child.category) {
       acc[child.category as string] = [...(acc[child.category as string] || []), child]
+    } else {
+      acc.__overview = [...(acc.__overview || []), child]
     }
     return acc
   }, {} as Record<string, ContentNavigationItem[]>)
 
-  return categories.map(category => ({
+  const grouped = categories[slug as keyof typeof categories]?.map(category => ({
     ...category,
-    path: `/docs/components`,
+    path: `/docs/${slug}`,
     children: childrenGroupedByCategory[category.id]
-  }))
+  }))?.filter(category => category.children?.length) || []
+
+  if (childrenGroupedByCategory.__overview && childrenGroupedByCategory.__overview.length > 0) {
+    grouped.unshift({
+      id: 'overview',
+      title: 'Overview',
+      path: `/docs/${slug}`,
+      children: childrenGroupedByCategory.__overview
+    })
+  }
+
+  return grouped
 }
 
 const children = computed(() => {
-  const slug = route.params.slug?.[0]
+  const slug = route.params.slug?.[0] as string
   const children = findPageChildren(navigation?.value, `/docs/${slug}`, { indexAsChild: true })?.map(child => ({ ...child, icon: undefined }))
 
-  return slug === 'components' ? groupChildrenByCategory(children) : [{ title: 'Overview', path: `/docs/${slug}`, children }]
+  return groupChildrenByCategory(children, slug)
 })
 </script>
 

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

@@ -88,10 +88,6 @@ const communityLinks = computed(() => [{
   label: 'Star on GitHub',
   to: `https://github.com/nuxt/ui`,
   target: '_blank'
-}, {
-  icon: 'i-lucide-git-pull-request-arrow',
-  label: 'Contribution',
-  to: '/docs/getting-started/contribution'
 }])
 </script>
 

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

@@ -0,0 +1,2 @@
+icon: 'i-lucide-arrow-right-left'
+shadow: true

docs/content/docs/1.getting-started/3.migration/1.v4.md

@@ -0,0 +1,12 @@
+---
+title: Migration to v4
+description: 'A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.'
+navigation.title: 'Migration'
+navigation.icon: 'i-lucide-arrow-right-left'
+links:
+  - label: 'Migration to v3'
+    to: '/docs/getting-started/migration/v3'
+    icon: 'i-lucide-arrow-right-left'
+---
+
+## Migrate your project

docs/content/docs/1.getting-started/2.migration.md renamed to docs/content/docs/1.getting-started/3.migration/2.v3.md

@@ -1,7 +1,11 @@
 ---
-title: Migration
+title: Migration to v3
 description: 'A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.'
-navigation.icon: 'i-lucide-arrow-right-left'
+links:
+  - label: 'Migration to v4'
+    to: '/docs/getting-started/migration/v4'
+    icon: 'i-lucide-arrow-right-left'
+navigation: false
 ---
 
 Nuxt UI v3.0 is a new major version rebuilt from the ground up, introducing a modern architecture with significant performance improvements and an enhanced developer experience. This major release includes several breaking changes alongside powerful new features and capabilities:

docs/content/docs/1.getting-started/contribution.md renamed to docs/content/docs/1.getting-started/4.contribution.md

@@ -1,7 +1,7 @@
 ---
-title: Contribution Guide
+title: Contribution
 description: 'A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.'
-navigation: false
+navigation.icon: 'i-lucide-handshake'
 ---
 
 Nuxt UI thrives thanks to its incredible community ❤️. We welcome all contributions through bug reports, pull requests, and feedback to help make this library even better.

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

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

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

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

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

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

docs/content/docs/1.getting-started/3.theme.md renamed to docs/content/docs/1.getting-started/5.theme.md

@@ -2,7 +2,6 @@
 title: Theme
 description: 'Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.'
 navigation.icon: i-lucide-swatch-book
-navigation.path: /docs/getting-started/theme
 ---
 
 ## Tailwind CSS