docs(components): add page (#3365)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/components/Header.vue

@@ -89,7 +89,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
           <span class="inline-flex items-center gap-0.5">
             {{ link.title }}
 
-            <sup v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
+            <sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
           </span>
         </template>
       </UContentNavigation>

docs/app/composables/useLinks.ts

@@ -5,12 +5,11 @@ export function useLinks() {
     label: 'Docs',
     icon: 'i-lucide-square-play',
     to: '/getting-started',
-    active: route.path.startsWith('/getting-started')
+    active: route.path.startsWith('/getting-started') || route.path.startsWith('/composables/') || (route.path.startsWith('/components/') && route.name !== 'components')
   }, {
     label: 'Components',
     icon: 'i-lucide-square-code',
-    to: '/components',
+    to: '/components'
-    active: route.path.startsWith('/components')
   }, {
     label: 'Pro',
     icon: 'i-lucide-panels-top-left',

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

@@ -116,11 +116,15 @@ const communityLinks = computed(() => [{
 
 <template>
   <UPage v-if="page">
-    <UPageHeader :title="page.title">
+    <UPageHeader>
       <template #headline>
         <UBreadcrumb :items="breadcrumb" />
       </template>
 
+      <template #title>
+        {{ page.title }}<sup v-if="page.module === 'ui-pro'" class="text-xs align-super font-medium text-(--ui-primary)">PRO</sup>
+      </template>
+
       <template #description>
         <MDC v-if="page.description" :value="page.description" unwrap="p" />
       </template>

docs/app/pages/components.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+const title = 'Vue Components'
+const description = 'Explore 99+ customizable UI components for Vue and Nuxt built with Tailwind CSS and Reka UI.'
+
+useSeoMeta({
+  titleTemplate: `%s - Nuxt UI`,
+  title,
+  description,
+  ogTitle: `${title} - Nuxt UI`,
+  ogDescription: description
+})
+
+defineOgImageComponent('Docs', {
+  headline: 'Documentation'
+})
+
+const { data: components } = await useAsyncData('components', () => {
+  return queryCollection('content')
+    .where('path', 'LIKE', '/components/%')
+    .where('extension', '=', 'md')
+    .select('path', 'title', 'description', 'category', 'module')
+    .all()
+})
+
+const componentsPerCategory = computed(() => {
+  return components.value!.reduce((acc, component) => {
+    acc[component.category!] = [...(acc[component.category!] || []), component]
+    return acc
+  }, {} as Record<string, any[]>)
+})
+
+const categories = [{
+  category: 'layout',
+  title: 'Layout',
+  description: 'Structural components for organizing content, including containers, grids, dividers, and responsive layout systems.'
+}, {
+  category: 'form',
+  title: 'Form',
+  description: 'Interactive form elements including inputs, selects, checkboxes, radio buttons, and advanced form validation components.'
+}, {
+  category: 'element',
+  title: 'Element',
+  description: 'Core UI building blocks like buttons, badges, icons, avatars, and other fundamental interface elements.'
+}, {
+  category: 'data',
+  title: 'Data',
+  description: 'Components for displaying and managing data, including tables, lists, cards, data grids, and visualization elements.'
+}, {
+  category: 'navigation',
+  title: 'Navigation',
+  description: 'Components for user navigation and wayfinding, including menus, breadcrumbs, pagination, and navigation bars.'
+}, {
+  category: 'overlay',
+  title: 'Overlay',
+  description: 'Floating UI elements like modals, dialogs, tooltips, popovers, and other components that overlay the main content.'
+}]
+</script>
+
+<template>
+  <UMain>
+    <UPageHero
+      description="Build your Vue or Nuxt application faster with Nuxt UI and Nuxt UI Pro components. Powered by Tailwind CSS and Reka UI, delivering responsive and customizable components."
+      class="relative"
+      orientation="vertical"
+      :ui="{ title: 'text-balance' }"
+    >
+      <template #headline>
+        <UButton
+          to="https://tailwindcss.com"
+          label="Made with Tailwind CSS v4"
+          size="md"
+          variant="subtle"
+          color="neutral"
+          icon="i-logos-tailwindcss-icon"
+          class="rounded-full"
+        />
+      </template>
+      <template #title>
+        Build beautiful UI with <span class="text-(--ui-primary)">{{ components!.length }}+</span> powerful components
+      </template>
+      <template #links>
+        <UButton
+          to="/getting-started/installation/vue"
+          label="Start with Vue"
+          icon="i-logos-vue"
+          color="neutral"
+          variant="outline"
+          size="xl"
+        />
+        <UButton
+          to="/getting-started/installation/nuxt"
+          label="Start with Nuxt"
+          icon="i-logos-nuxt-icon"
+          color="neutral"
+          variant="outline"
+          size="xl"
+        />
+      </template>
+      <template #top>
+        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+        <StarsBg />
+      </template>
+    </UPageHero>
+
+    <UContainer>
+      <template v-for="category in categories" :key="category.category">
+        <UPageHeader :title="category.title" :description="category.description" class="mb-8" />
+        <UPageGrid class="xl:grid-cols-4 pb-24">
+          <UPageCard
+            v-for="(component, index) in componentsPerCategory[category.category]"
+            :key="component.path"
+            variant="naked"
+            :title="component.title"
+            :description="component.description"
+            :to="component.path"
+            :ui="{ wrapper: 'order-last', container: 'lg:flex' }"
+          >
+            <template #title>
+              <div class="flex items-center gap-1.5">
+                <span>{{ component.title }}</span>
+                <UBadge v-if="component.module === 'ui-pro'" label="PRO" size="sm" variant="subtle" />
+              </div>
+            </template>
+
+            <div class="group rounded-[calc(var(--ui-radius)*1.5)] border border-(--ui-border-muted) overflow-hidden aspect-[16/9]">
+              <UColorModeImage
+                :light="`${component.path.replace('/components/', '/components/light/')}.png`"
+                :dark="`${component.path.replace('/components/', '/components/dark/')}.png`"
+                class="group-hover:scale-105 transition-transform size-full"
+                :loading="index >= 4 ? 'lazy' : 'eager'"
+                width="640"
+                height="360"
+              />
+            </div>
+          </UPageCard>
+        </UPageGrid>
+      </template>
+    </UContainer>
+  </UMain>
+</template>

docs/app/pages/pro/.content/pro.yml

@@ -140,27 +140,6 @@ templates:
   headline: Templates
   title: Kickstart with Nuxt UI Pro in seconds
   description: Choose from a variety of templates to get started with Nuxt UI Pro in seconds. Each template is designed to help you build beautiful and responsive Nuxt applications in minutes.
-  items:
-    - title: Landing
-      description: A template for building a landing page with Nuxt UI Pro.
-      icon: i-lucide-layout
-      to: 'https://landing-template.nuxt.dev/'
-      image: '/pro/templates/landing.png'
-    - title: Saas
-      description: A template for building a SaaS application with Nuxt UI Pro.
-      icon: i-lucide-cloud
-      to: 'https://saas-template.nuxt.dev/'
-      image: '/pro/templates/saas.png'
-    - title: Docs
-      description: A template for building a documentation site with Nuxt UI Pro.
-      icon: i-lucide-book
-      to: 'https://docs-template.nuxt.dev/'
-      image: '/pro/templates/docs.png'
-    - title: Dashboard
-      description: A template for building a dashboard with Nuxt UI Pro.
-      icon: i-lucide-chart-bar
-      to: 'https://dashboard-template.nuxt.dev/'
-      image: '/pro/templates/dashboard.png'
 cta:
   title: Start with Nuxt UI Pro today!
   description: Nuxt UI Pro is free in development, but you need a license to use it in production.

docs/app/pages/pro/.content/templates.yml

@@ -1,7 +1,7 @@
 title: Official Nuxt UI Pro Templates
 description: 'Ready to use templates powered by our premium Vue components and Nuxt Content. The templates are responsive, accessible and easy to customize so you can get started in no time.'
 hero:
-  title: Official Nuxt UI [Pro]{.text-(--ui-primary)} Templates
+  title: Ship [in minutes]{.text-(--ui-primary)} with :br Nuxt UI Pro Templates
   description: 'Ready to use templates powered by our premium Vue components and Nuxt Content.<br class="hidden lg:block"> The templates are responsive, accessible and easy to customize so you can get started in no time.'
 navigation: false
 links:
@@ -18,6 +18,7 @@ links:
 templates:
   - title: 'Landing'
     description: "A landing page template you can use as a starting point for your next idea. You can change the content easily in [`content/index.yml`](https://github.com/nuxt-ui-pro/landing/blob/v3/content/index.yml)."
+    icon: i-lucide-layout
     thumbnail:
       dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2xhbmRpbmctdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjMzNzV9.ja2nUDVOoIFvyaMmg9Jn51uNMoYYt4WA1KWUQBWwUPo.jpg?theme=dark
       light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2xhbmRpbmctdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjMzNzV9.ja2nUDVOoIFvyaMmg9Jn51uNMoYYt4WA1KWUQBWwUPo.jpg?theme=light
@@ -42,6 +43,7 @@ templates:
         variant: outline
   - title: 'Docs'
     description: "A ready-to-use documentation template integrated with [Nuxt Content](https://content.nuxt.com). You can start writing your docs right away inside the [`content/`](https://github.com/nuxt-ui-pro/docs/tree/v3/content) directory."
+    icon: i-lucide-book
     thumbnail:
       dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=dark
       light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=light
@@ -66,6 +68,10 @@ templates:
         color: neutral
   - title: 'SaaS'
     description: "A fully built SaaS application to launch your next project. It includes a landing page, a pricing page, a documentation and a blog which can customized easily from the `content/` directory."
+    icon: i-lucide-cloud
+    thumbnail:
+      dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3NhYXMtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0NDh9.tgzUQaw6XswUPPVbOXazuWwoTHJODg155CYt1xfzIdM.jpg?theme=dark
+      light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3NhYXMtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0NDh9.tgzUQaw6XswUPPVbOXazuWwoTHJODg155CYt1xfzIdM.jpg?theme=light
     features:
       - title: Includes Landing & Docs sections
         icon: i-lucide-grid-2x2-plus
@@ -74,21 +80,23 @@ templates:
       - title: Authentication pages (login, register)
         icon: i-lucide-user-round-check
     links:
-      - label: Live preview (soon)
+      - label: Live preview
         to: https://saas-template.nuxt.dev
         target: _blank
         trailingIcon: i-lucide-arrow-up-right
         color: neutral
-        disabled: true
+      - label: Use this template
-      - label: Use this template (soon)
         to: https://github.com/nuxt-ui-pro/saas/tree/v3
         target: _blank
         variant: outline
         icon: i-simple-icons-github
         color: neutral
-        disabled: true
   - title: 'Dashboard'
     description: "A template to illustrate how to build your own dashboard with the 15+ latest Nuxt UI Pro components, designed specifically to create a consistent look and feel."
+    icon: i-lucide-bar-chart-big
+    thumbnail:
+      dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2Rhc2hib2FyZC10ZW1wbGF0ZS5udXh0LmRldiIsImlhdCI6MTczOTQ2MzU2N30._VElt4uvLjvAMdnTLytCInOajMElzWDKbmvOaMZhZUI.jpg?theme=dark
+      light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2Rhc2hib2FyZC10ZW1wbGF0ZS5udXh0LmRldiIsImlhdCI6MTczOTQ2MzU2N30._VElt4uvLjvAMdnTLytCInOajMElzWDKbmvOaMZhZUI.jpg?theme=light
     features:
       - title: Mix with SaaS template for a complete solution
         icon: i-lucide-puzzle
@@ -97,16 +105,14 @@ templates:
       - title: Resizable multi-column layout
         icon: i-lucide-columns-3
     links:
-      - label: Live preview (soon)
+      - label: Live preview
         to: https://dashboard-template.nuxt.dev
         target: _blank
         trailingIcon: i-lucide-arrow-up-right
         color: neutral
-        disabled: true
+      - label: Use this template
-      - label: Use this template (soon)
         to: https://github.com/nuxt-ui-pro/dashboard/tree/v3
         target: _blank
         icon: i-simple-icons-github
         color: neutral
         variant: outline
-        disabled: true

docs/app/pages/pro/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // @ts-expect-error yaml is not typed
 import page from '.content/pro.yml'
+// @ts-expect-error yaml is not typed
+import templatesPage from '.content/templates.yml'
 
 useSeoMeta({
   title: page.title,
@@ -72,12 +74,13 @@ defineOgImageComponent('Docs', {
         arrows
         dots
         :autoplay="{ delay: 3000 }"
-        :items="(page.templates.items as any[])"
+        :items="(templatesPage.templates as any[])"
         :ui="{ item: 'basis-1/2', container: 'py-2' }"
       >
         <UPageCard
-          :to="item.to"
+          :to="item.links[0].to"
-          :description="item.description"
+          target="_blank"
+          variant="subtle"
           class="group"
           :ui="{ container: 'p-4 sm:p-4', title: 'flex items-center gap-1' }"
         >
@@ -87,11 +90,12 @@ defineOgImageComponent('Docs', {
               {{ item.title }}
             </span>
           </template>
-          <img
+          <UColorModeImage
-            :src="item.image"
+            :light="item.thumbnail.light"
+            :dark="item.thumbnail.dark"
             :alt="item.title"
-            class="rounded-lg grayscale group-hover:grayscale-0 transition-all duration-200 ease-in-out"
+            class="rounded-lg w-full border border-(--ui-border)"
-          >
+          />
         </UPageCard>
       </UCarousel>
     </UPageSection>

docs/content.config.ts

@@ -2,6 +2,7 @@ import { defineCollection, z } from '@nuxt/content'
 import { resolve } from 'node:path'
 
 const schema = z.object({
+  category: z.enum(['layout', 'form', 'element', 'navigation', 'data', 'overlay']).optional(),
   framework: z.string().optional(),
   module: z.string().optional(),
   navigation: z.object({

docs/content/3.components/0.app.md

@@ -1,6 +1,7 @@
 ---
 title: App
 description: Wraps your app to provide global configurations and more.
+category: layout
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/accordion.md

@@ -1,5 +1,6 @@
 ---
 description: A stacked set of collapsible panels.
+category: data
 links:
   - label: Accordion
     icon: i-custom-reka-ui

docs/content/3.components/alert.md

@@ -1,5 +1,6 @@
 ---
 description: A callout to draw user's attention.
+category: element
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/avatar-group.md

@@ -1,6 +1,7 @@
 ---
 title: AvatarGroup
 description: Stack multiple avatars in a group.
+category: element
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/avatar.md

@@ -1,5 +1,6 @@
 ---
 description: An img element with fallback and Nuxt Image support.
+category: element
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/badge.md

@@ -1,5 +1,6 @@
 ---
 description: A short text to represent a status or a category.
+category: element
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/breadcrumb.md

@@ -1,5 +1,6 @@
 ---
 description: A hierarchy of links to navigate through a website.
+category: navigation
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/button-group.md

@@ -1,6 +1,7 @@
 ---
 title: ButtonGroup
 description: Group multiple button-like elements together.
+category: element
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/button.md

@@ -1,5 +1,6 @@
 ---
 description: A button element that can act as a link or trigger an action.
+category: element
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/calendar.md

@@ -1,6 +1,7 @@
 ---
 title: Calendar
 description: A calendar component for selecting single dates, multiple dates or date ranges.
+category: element
 links:
   - label: Calendar
     icon: i-custom-reka-ui

docs/content/3.components/card.md

@@ -1,5 +1,6 @@
 ---
 description: Display content in a card with a header, body and footer.
+category: layout
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/carousel.md

@@ -1,5 +1,6 @@
 ---
 description: A carousel with motion and swipe built using Embla.
+category: data
 links:
   - label: Embla
     to: https://www.embla-carousel.com/api/

docs/content/3.components/checkbox.md

@@ -1,5 +1,6 @@
 ---
 description: An input element to toggle between checked and unchecked states.
+category: form
 links:
   - label: Checkbox
     icon: i-custom-reka-ui

docs/content/3.components/chip.md

@@ -1,5 +1,6 @@
 ---
 description: An indicator of a numeric value or a state.
+category: element
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/collapsible.md

@@ -1,5 +1,6 @@
 ---
 description: A collapsible element to toggle visibility of its content.
+category: element
 links:
   - label: Collapsible
     icon: i-custom-reka-ui

docs/content/3.components/color-picker.md

@@ -1,6 +1,7 @@
 ---
 title: ColorPicker
 description: A component to select a color.
+category: form
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/command-palette.md

@@ -1,6 +1,7 @@
 ---
 title: CommandPalette
 description: A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
+category: navigation
 links:
   - label: Fuse.js
     icon: i-custom-fuse-js

docs/content/3.components/container.md

@@ -1,5 +1,6 @@
 ---
 description: A container lets you center and constrain the width of your content.
+category: layout
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/context-menu.md

@@ -1,6 +1,7 @@
 ---
 title: ContextMenu
 description: A menu to display actions when right-clicking on an element.
+category: overlay
 links:
   - label: ContextMenu
     icon: i-custom-reka-ui

docs/content/3.components/drawer.md

@@ -1,5 +1,6 @@
 ---
 description: A drawer that smoothly slides in & out of the screen.
+category: overlay
 links:
   - label: Drawer
     icon: i-custom-reka-ui

docs/content/3.components/dropdown-menu.md

@@ -1,6 +1,7 @@
 ---
 title: DropdownMenu
 description: A menu to display actions when clicking on an element.
+category: overlay
 links:
   - label: DropdownMenu
     icon: i-custom-reka-ui

docs/content/3.components/form-field.md

@@ -1,6 +1,7 @@
 ---
 title: FormField
 description: A wrapper for form elements that provides validation and error handling.
+category: form
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/form.md

@@ -1,5 +1,6 @@
 ---
 description: A form component with built-in validation and submission handling.
+category: form
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/icon.md

@@ -1,5 +1,6 @@
 ---
 description: A component to display any icon from Iconify.
+category: element
 links:
   - label: Icônes
     to: https://icones.js.org/

docs/content/3.components/input-menu.md

@@ -1,6 +1,7 @@
 ---
 title: InputMenu
 description: An autocomplete input with real-time suggestions.
+category: form
 links:
   - label: Combobox
     icon: i-custom-reka-ui

docs/content/3.components/input-number.md

@@ -1,6 +1,7 @@
 ---
 title: InputNumber
 description: Input numerical values with a customizable range.
+category: form
 links:
   - label: Number Field
     icon: i-custom-reka-ui

docs/content/3.components/input.md

@@ -1,5 +1,6 @@
 ---
 description: An input element to enter text.
+category: form
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/kbd.md

@@ -1,6 +1,7 @@
 ---
 title: Keyboard Key
 description: A kbd element to display a keyboard key.
+category: element
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/link.md

@@ -1,5 +1,6 @@
 ---
 description: A wrapper around <NuxtLink> with extra props.
+category: navigation
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/modal.md

@@ -1,5 +1,6 @@
 ---
 description: A dialog window that can be used to display a message or request user input.
+category: overlay
 links:
   - label: Dialog
     icon: i-custom-reka-ui

docs/content/3.components/navigation-menu.md

@@ -1,6 +1,7 @@
 ---
 title: NavigationMenu
 description: A list of links that can be displayed horizontally or vertically.
+category: navigation
 links:
   - label: NavigationMenu
     icon: i-custom-reka-ui

docs/content/3.components/pagination.md

@@ -1,5 +1,6 @@
 ---
 description: A list of buttons or links to navigate through pages.
+category: navigation
 links:
   - label: Pagination
     icon: i-custom-reka-ui

docs/content/3.components/pin-input.md

@@ -1,6 +1,7 @@
 ---
 title: PinInput
 description: An input element to enter a pin.
+category: form
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/popover.md

@@ -1,5 +1,6 @@
 ---
 description: A non-modal dialog that floats around a trigger element.
+category: overlay
 links:
   - label: HoverCard
     icon: i-custom-reka-ui

docs/content/3.components/progress.md

@@ -1,5 +1,6 @@
 ---
 description: An indicator showing the progress of a task.
+category: element
 links:
   - label: Progress
     icon: i-custom-reka-ui

docs/content/3.components/radio-group.md

@@ -1,6 +1,7 @@
 ---
 title: RadioGroup
 description: A set of radio buttons to select a single option from a list.
+category: form
 links:
   - label: RadioGroup
     icon: i-custom-reka-ui

docs/content/3.components/select-menu.md

@@ -1,6 +1,7 @@
 ---
 title: SelectMenu
 description: An advanced searchable select element.
+category: form
 links:
   - label: Combobox
     icon: i-custom-reka-ui

docs/content/3.components/select.md

@@ -1,5 +1,6 @@
 ---
 description: A select element to choose from a list of options.
+category: form
 links:
   - label: Select
     icon: i-custom-reka-ui

docs/content/3.components/separator.md

@@ -1,5 +1,6 @@
 ---
 description: Separates content horizontally or vertically.
+category: layout
 links:
   - label: Separator
     icon: i-custom-reka-ui

docs/content/3.components/skeleton.md

@@ -1,5 +1,6 @@
 ---
 description: A placeholder to show while content is loading.
+category: layout
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/slideover.md

@@ -1,5 +1,6 @@
 ---
 description: A dialog that slides in from any side of the screen.
+category: overlay
 links:
   - label: Dialog
     icon: i-custom-reka-ui

docs/content/3.components/slider.md

@@ -1,5 +1,6 @@
 ---
 description: An input to select a numeric value within a range.
+category: form
 links:
   - label: Slider
     icon: i-custom-reka-ui

docs/content/3.components/stepper.md

@@ -1,5 +1,6 @@
 ---
 description: A set of steps that are used to indicate progress through a multi-step process.
+category: navigation
 links:
   - label: Stepper
     icon: i-custom-reka-ui

docs/content/3.components/switch.md

@@ -1,5 +1,6 @@
 ---
 description: A control that toggles between two states.
+category: form
 links:
   - label: Switch
     icon: i-custom-reka-ui

docs/content/3.components/table.md

@@ -1,5 +1,6 @@
 ---
 description: A responsive table element to display data in rows and columns.
+category: data
 links:
   - label: TanStack Table
     avatar:

docs/content/3.components/tabs.md

@@ -1,5 +1,6 @@
 ---
 description: A set of tab panels that are displayed one at a time.
+category: navigation
 links:
   - label: Tabs
     icon: i-custom-reka-ui

docs/content/3.components/textarea.md

@@ -1,5 +1,6 @@
 ---
 description: A textarea element to input multi-line text.
+category: form
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/3.components/toast.md

@@ -1,5 +1,6 @@
 ---
 description: A succinct message to provide information or feedback to the user.
+category: overlay
 links:
   - label: Toast
     icon: i-custom-reka-ui

docs/content/3.components/tooltip.md

@@ -1,5 +1,6 @@
 ---
 description: A popup that reveals information when hovering over an element.
+category: overlay
 links:
   - label: Tooltip
     icon: i-custom-reka-ui

docs/modules/llms/module.ts

@@ -1,47 +0,0 @@
-import { addPrerenderRoutes, addServerScanDir, createResolver, defineNuxtModule, useLogger } from '@nuxt/kit'
-import type { SQLOperator } from '@nuxt/content'
-
-export interface ModuleOptions {
-  domain: string
-  sections: Array<{
-    title: string
-    collection: string
-    description?: string
-    filters?: Array<{
-      field: string
-      operator: SQLOperator
-      value?: string
-    }>
-  }>
-  title?: string
-  description?: string
-  notes?: string[]
-}
-
-export default defineNuxtModule({
-  meta: {
-    name: 'llms',
-    configKey: 'llms'
-  },
-  setup(options, nuxt) {
-    const { resolve } = createResolver(import.meta.url)
-    const logger = useLogger('llms')
-
-    nuxt.options.runtimeConfig.llms = {
-      domain: options.domain,
-      title: options.title,
-      description: options.description,
-      notes: options.notes,
-      sections: options.sections || [{ title: 'Docs', collection: 'content' }]
-    }
-
-    if (!options.domain) {
-      logger.warn('Please provide a domain for the LLMs module. LLMS docs require a domain to be set.')
-    }
-
-    addServerScanDir(resolve('runtime/server'))
-
-    addPrerenderRoutes('/llms.txt')
-    addPrerenderRoutes('/llms_full.txt')
-  }
-})

docs/modules/llms/runtime/server/routes/llms.txt.get.ts

@@ -1,56 +0,0 @@
-import { joinURL } from 'ufo'
-import type { ModuleOptions } from '~~/modules/llms/module'
-
-export default eventHandler(async (event) => {
-  const options = useRuntimeConfig(event).llms as ModuleOptions
-
-  const llms = [
-    `# ${options.title || 'Documentation'}`
-  ]
-
-  if (options.description) {
-    llms.push(`> ${options.description}`)
-  }
-
-  llms.push(
-    '## Documentation Sets',
-    `- [Complete Documentation](${joinURL(options.domain, '/llms_full.txt')}): The complete documentation including all content`
-  )
-
-  for (const section of options.sections) {
-    // @ts-expect-error - typecheck does not derect server querryCollection
-    const query = queryCollection(event, section.collection)
-      .select('path', 'title', 'description')
-      .where('path', 'NOT LIKE', '%/.navigation')
-
-    if (section.filters) {
-      for (const filter of section.filters) {
-        query.where(filter.field, filter.operator, filter.value)
-      }
-    }
-
-    const docs = await query.all()
-
-    const links = docs.map((doc) => {
-      return `- [${doc.title}](${joinURL(options.domain, doc.path)}): ${doc.description}`
-    })
-
-    llms.push(`## ${section.title}`)
-
-    if (section.description) {
-      llms.push(section.description)
-    }
-
-    llms.push(links.join('\n'))
-  }
-
-  if (options.notes && options.notes.length) {
-    llms.push(
-      '## Notes',
-      (options.notes || []).map(note => `- ${note}`).join('\n')
-    )
-  }
-
-  setHeader(event, 'Content-Type', 'text/plain')
-  return llms.join('\n\n')
-})

docs/modules/llms/runtime/server/routes/llms_full.txt.get.ts

@@ -1,78 +0,0 @@
-import { joinURL, hasProtocol } from 'ufo'
-import type { ModuleOptions } from '~~/modules/llms/module'
-import { stringifyMarkdown } from '@nuxtjs/mdc/runtime'
-import type { MDCRoot } from '@nuxtjs/mdc'
-
-export default eventHandler(async (event) => {
-  const options = useRuntimeConfig(event).llms as ModuleOptions
-
-  const llms = []
-
-  for (const section of options.sections) {
-    // @ts-expect-error - typecheck does not derect server querryCollection
-    const query = queryCollection(event, section.collection)
-      .where('path', 'NOT LIKE', '%/.navigation')
-
-    if (section.filters) {
-      for (const filter of section.filters) {
-        query.where(filter.field, filter.operator, filter.value)
-      }
-    }
-
-    const docs = await query.all()
-
-    for (const doc of docs) {
-      let markdown = await stringifyMarkdown(decompressBody(doc.body, options), {})
-
-      if (!markdown?.trim().startsWith('# ')) {
-        markdown = `# ${doc.title}\n\n${markdown}`
-      }
-      llms.push(markdown)
-    }
-  }
-
-  if (options.notes && options.notes.length) {
-    llms.push(
-      '## Notes',
-      (options.notes || []).map(note => `- ${note}`).join('\n')
-    )
-  }
-
-  setHeader(event, 'Content-Type', 'text/plain')
-  return llms.join('\n\n')
-})
-
-// decompress utils is part of Content module and not exposed yet
-// We can refactor this after exposing the utils
-function decompressBody(body: any, options: ModuleOptions): MDCRoot {
-  const linkProps = ['href', 'src', 'to']
-
-  function decompressNode(input: any) {
-    if (typeof input === 'string') {
-      return {
-        type: 'text',
-        value: input
-      }
-    }
-
-    const [tag, props, ...children] = input
-
-    for (const prop of linkProps) {
-      if (props[prop] && !hasProtocol(props[prop])) {
-        props[prop] = joinURL(options.domain, props[prop])
-      }
-    }
-
-    return {
-      type: 'element',
-      tag,
-      props,
-      children: children.map(decompressNode)
-    }
-  }
-
-  return {
-    type: 'root',
-    children: body.value.map(decompressNode)
-  }
-}

docs/modules/llms/runtime/server/tsconfig.json

@@ -1,3 +0,0 @@
-{
-	"extends": "../../../../.nuxt/tsconfig.server.json"
-}

docs/nuxt.config.ts

@@ -24,7 +24,7 @@ export default defineNuxtConfig({
         dirs.unshift({ path: resolve('./app/components/content/examples'), pathPrefix: false, prefix: '', global: true })
       })
     },
-    '~~/modules/llms/module'
+    'nuxt-llms'
   ],
 
   app: {
@@ -79,8 +79,7 @@ export default defineNuxtConfig({
     '/getting-started/icons': { redirect: '/getting-started/icons/nuxt', prerender: false },
     '/getting-started/color-mode': { redirect: '/getting-started/color-mode/nuxt', prerender: false },
     '/getting-started/i18n': { redirect: '/getting-started/i18n/nuxt', prerender: false },
-    '/composables': { redirect: '/composables/define-shortcuts', prerender: false },
+    '/composables': { redirect: '/composables/define-shortcuts', prerender: false }
-    '/components': { redirect: '/components/app', prerender: false }
   },
 
   future: {
@@ -162,38 +161,30 @@ export default defineNuxtConfig({
     domain: 'https://ui3.nuxt.dev',
     title: 'Nuxt UI v3',
     description: 'A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.',
+    full: {
+      title: 'Nuxt UI v3 Full Documentation',
+      description: 'This is the full documentation for Nuxt UI v3. It includes all the Markdown files written with the MDC syntax.'
+    },
     sections: [
       {
         title: 'Getting Started',
-        collection: 'content',
+        contentCollection: 'content',
-        filters: [
+        contentFilters: [
-          {
+          { field: 'path', operator: 'LIKE', value: '/getting-started%' }
-            field: 'path',
-            operator: 'LIKE',
-            value: '/getting-started%'
-          }
         ]
       },
       {
         title: 'Components',
-        collection: 'content',
+        contentCollection: 'content',
-        filters: [
+        contentFilters: [
-          {
+          { field: 'path', operator: 'LIKE', value: '/components/%' }
-            field: 'path',
-            operator: 'LIKE',
-            value: '/components/%'
-          }
         ]
       },
       {
         title: 'Composables',
-        collection: 'content',
+        contentCollection: 'content',
-        filters: [
+        contentFilters: [
-          {
+          { field: 'path', operator: 'LIKE', value: '/composables/%' }
-            field: 'path',
-            operator: 'LIKE',
-            value: '/composables/%'
-          }
         ]
       }
     ],

docs/package.json

@@ -6,8 +6,8 @@
     "@iconify-json/logos": "^1.2.4",
     "@iconify-json/lucide": "^1.2.26",
     "@iconify-json/simple-icons": "^1.2.25",
-    "@iconify-json/vscode-icons": "^1.2.14",
+    "@iconify-json/vscode-icons": "^1.2.15",
-    "@nuxt/content": "^3.1.1",
+    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@f1a9b8e",
     "@nuxt/image": "^1.9.0",
     "@nuxt/ui": "latest",
     "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@c6577ad",
@@ -17,9 +17,10 @@
     "@rollup/plugin-yaml": "^4.1.2",
     "@vueuse/nuxt": "^12.7.0",
     "joi": "^17.13.3",
-    "motion": "^12.4.4",
+    "motion": "^12.4.7",
     "nuxt": "^3.15.4",
     "nuxt-component-meta": "^0.10.0",
+    "nuxt-llms": "^0.0.2",
     "nuxt-og-image": "^4.1.4",
     "prettier": "^3.5.1",
     "shiki-transformer-color-highlight": "^0.2.0",