docs-please 0.2.0-beta.0

package/app/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

package/app/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'

package/app/composables/useConfig.ts

@@ -0,0 +1,24 @@
+import { createSharedComposable } from '@vueuse/core'
+
+const COOKIE_NAME = 'docs_config'
+export type PackageManager = 'pnpm' | 'npm' | 'yarn' | 'bun'
+export type InstallationType = 'cli' | 'manual'
+
+export const useConfig = createSharedComposable(() => {
+  const config = useCookie<{
+    packageManager: PackageManager
+    installationType: InstallationType
+  }>(
+    COOKIE_NAME,
+    {
+      default: () => ({ packageManager: 'bun', installationType: 'cli' }),
+      path: '/',
+      maxAge: 31536000,
+      sameSite: 'lax',
+    },
+  )
+
+  return {
+    config,
+  }
+})

package/app/composables/useNavigation.ts

@@ -0,0 +1,43 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+
+export type NavigationItemType = 'page' | 'group'
+
+export interface NavigationItem {
+  title: string
+  path: string
+  stem?: string
+  children?: NavigationItem[]
+  page?: false
+  type?: NavigationItemType
+  [key: string]: unknown
+}
+
+function navigationItemType(item: ContentNavigationItem): NavigationItemType {
+  if (item.children && item.children.length > 0) {
+    return 'group'
+  }
+  return 'page'
+}
+
+function mapWithType(item: ContentNavigationItem): NavigationItem {
+  return {
+    ...item,
+    type: navigationItemType(item),
+    children: item.children?.map(child => mapWithType(child)),
+  }
+}
+
+export async function useNavigation(): Promise<{ data: Ref<NavigationItem[]> }> {
+  const { data } = useAsyncData('navigation', () => {
+    return queryCollectionNavigation('docs')
+  }, {
+    default: () => ([]),
+    transform: (data) => {
+      return data.map(item => mapWithType(item))
+    },
+  })
+
+  return {
+    data,
+  }
+}

package/app/layouts/default.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="relative flex min-h-svh flex-col bg-background">
+    <AppHeader />
+    <main class="flex-1">
+      <slot />
+    </main>
+    <AppFooter />
+  </div>
+</template>

package/app/layouts/docs.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="relative flex min-h-svh flex-col bg-background">
+    <AppHeader />
+    <div class="container flex-1">
+      <div class="flex gap-8 py-8">
+        <!-- Sidebar -->
+        <aside class="hidden w-64 shrink-0 lg:block">
+          <DocsSidebar />
+        </aside>
+
+        <!-- Main content -->
+        <main class="min-w-0 flex-1">
+          <slot />
+        </main>
+
+        <!-- Table of contents -->
+        <aside class="hidden w-56 shrink-0 xl:block">
+          <DocsTableOfContents />
+        </aside>
+      </div>
+    </div>
+    <AppFooter />
+  </div>
+</template>

package/app/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

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

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'docs',
+})
+
+const route = useRoute()
+
+const { data: page } = await useAsyncData(`docs-${route.path}`, () =>
+  queryCollection('docs').path(route.path).first())
+
+const { data: surround } = await useAsyncData(`surround-${route.path}`, () =>
+  queryCollectionItemSurroundings('docs', route.path))
+
+// Extract TOC from page body
+const _toc = computed(() => {
+  if (!page.value?.body)
+    return []
+
+  const headings: { id: string, text: string, depth: number }[] = []
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function extractHeadings(node: any) {
+    if (node.tag && node.tag.match(/^h[2-4]$/)) {
+      const id = node.props?.id
+      const text = extractText(node.children)
+      const depth = Number.parseInt(node.tag.charAt(1))
+      if (id && text) {
+        headings.push({ id, text, depth })
+      }
+    }
+    if (node.children) {
+      for (const child of node.children) {
+        extractHeadings(child)
+      }
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function extractText(children: any[]): string {
+    if (!children)
+      return ''
+    return children
+      .map((child) => {
+        if (typeof child === 'string')
+          return child
+        if (child.children)
+          return extractText(child.children)
+        return ''
+      })
+      .join('')
+  }
+
+  if (page.value.body.children) {
+    for (const child of page.value.body.children) {
+      extractHeadings(child)
+    }
+  }
+
+  return headings
+})
+
+useSeoMeta({
+  title: page.value?.title,
+  description: page.value?.description,
+})
+</script>
+
+<template>
+  <div v-if="page">
+    <DocsPageHeader
+      :title="page.title"
+      :description="page.description"
+    />
+
+    <UiSeparator class="my-6" />
+
+    <div class="prose dark:prose-invert max-w-none">
+      <ContentRenderer :value="page" />
+    </div>
+
+    <DocsPageNav
+      :prev="surround?.[0]"
+      :next="surround?.[1]"
+    />
+  </div>
+  <div
+    v-else
+    class="py-12 text-center"
+  >
+    <h1 class="text-2xl font-bold">
+      Page not found
+    </h1>
+    <p class="mt-2 text-muted-foreground">
+      The page you're looking for doesn't exist.
+    </p>
+  </div>
+</template>

package/app/pages/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default',
+})
+
+const { data: page } = await useAsyncData('landing', () =>
+  queryCollection('landing').first())
+
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+})
+</script>
+
+<template>
+  <ContentRenderer
+    v-if="page"
+    :value="page"
+  />
+</template>

package/app/plugins/ssr-width.ts

@@ -0,0 +1,5 @@
+import { provideSSRWidth } from '@vueuse/core'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  provideSSRWidth(1024, nuxtApp.vueApp)
+})

package/content.config.ts

@@ -0,0 +1,36 @@
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+import { useNuxt } from '@nuxt/kit'
+import { joinURL } from 'ufo'
+
+const { options } = useNuxt()
+const cwd = joinURL(options.rootDir, 'content')
+
+const docsSchema = z.object({
+  links: z.array(z.object({
+    label: z.string(),
+    icon: z.string(),
+    to: z.string(),
+    target: z.string().optional(),
+  })).optional(),
+})
+
+export default defineContentConfig({
+  collections: {
+    landing: defineCollection({
+      type: 'page',
+      source: {
+        cwd,
+        include: 'index.md',
+      },
+    }),
+    docs: defineCollection({
+      type: 'page',
+      source: {
+        cwd,
+        include: '**',
+        exclude: ['index.md'],
+      },
+      schema: docsSchema,
+    }),
+  },
+})

package/i18n/locales/en.json

@@ -0,0 +1,14 @@
+{
+  "common": {
+    "or": "or",
+    "error": {
+      "title": "Something went wrong",
+      "description": "An error occurred while loading this page."
+    }
+  },
+  "docs": {
+    "toc": "On this page",
+    "edit": "Edit this page",
+    "report": "Report an issue"
+  }
+}

package/modules/config.ts

@@ -0,0 +1,38 @@
+import { defineNuxtModule } from '@nuxt/kit'
+import { defu } from 'defu'
+import { getGitBranch, getGitEnv } from '../utils/git'
+import { getPackageJsonMetadata, inferSiteURL } from '../utils/meta'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'docs-config',
+  },
+  async setup(_options, nuxt) {
+    const dir = nuxt.options.rootDir
+    const url = inferSiteURL()
+    const meta = await getPackageJsonMetadata(dir)
+    const gitInfo = getGitEnv()
+    const siteName = meta.name || gitInfo?.name || 'Docs'
+
+    nuxt.options.appConfig.docs = defu(nuxt.options.appConfig.docs, {
+      title: siteName,
+      description: meta.description || '',
+      url,
+      github: {
+        owner: gitInfo?.owner,
+        name: gitInfo?.name,
+        url: gitInfo?.url,
+        branch: getGitBranch(),
+      },
+    })
+
+    // SEO defaults
+    nuxt.options.app.head = defu(nuxt.options.app.head, {
+      title: siteName,
+      titleTemplate: `%s - ${siteName}`,
+      meta: [
+        { name: 'description', content: meta.description || '' },
+      ],
+    })
+  },
+})

package/modules/css.ts

@@ -0,0 +1,38 @@
+import { addTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'
+import { joinURL } from 'ufo'
+import { resolveModulePath } from 'exsolve'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'docs-css',
+  },
+  async setup(_options, nuxt) {
+    const dir = nuxt.options.rootDir
+    const resolver = createResolver(import.meta.url)
+
+    const contentDir = joinURL(dir, 'content')
+    const layerDir = resolver.resolve('../app')
+    const mainCssPath = resolver.resolve('../app/assets/css/main.css')
+    const tailwindPath = resolveModulePath('tailwindcss', { from: import.meta.url, conditions: ['style'] })
+
+    // Create a CSS template that includes source directives for Tailwind
+    const cssTemplate = addTemplate({
+      filename: 'docs-layer.css',
+      getContents: () => {
+        return `@import ${JSON.stringify(tailwindPath)};
+
+@source "${contentDir.replace(/\\/g, '/')}/**/*";
+@source "${layerDir.replace(/\\/g, '/')}/**/*";
+@source "../../app.config.ts";
+
+@import ${JSON.stringify(mainCssPath)};`
+      },
+    })
+
+    // Remove main.css from nuxt.options.css if present (we import it in docs-layer.css)
+    nuxt.options.css = nuxt.options.css.filter(css => !css.includes('main.css'))
+
+    // Add the generated CSS file to Nuxt - unshift to load first
+    nuxt.options.css.unshift(cssTemplate.dst)
+  },
+})

package/modules/shadcn.ts

@@ -0,0 +1,116 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import {
+  addComponent,
+  addComponentsDir,
+  createResolver,
+  defineNuxtModule,
+  findPath,
+  useLogger,
+} from '@nuxt/kit'
+import { parseSync } from 'oxc-parser'
+
+// Module options TypeScript interface definition
+export interface ModuleOptions {
+  /**
+   * Prefix for all the imported component.
+   * @default "Ui"
+   */
+  prefix?: string
+  /**
+   * Directory that the component lives in.
+   * Will respect the Nuxt aliases.
+   * @link https://nuxt.com/docs/api/nuxt-config#alias
+   * @default "@/components/ui"
+   */
+  componentDir?: string
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'shadcn',
+    configKey: 'shadcn',
+  },
+  defaults: {
+    prefix: 'Ui',
+    componentDir: '@/components/ui',
+  },
+  async setup({ prefix, componentDir }, nuxt) {
+    const COMPONENT_DIR_PATH = componentDir!
+    const ROOT_DIR_PATH = nuxt.options.rootDir
+
+    const logger = useLogger('shadcn-nuxt')
+    logger.start('Setting up shadcn-nuxt module', { COMPONENT_DIR_PATH, ROOT_DIR_PATH })
+
+    // Build list of potential component directory paths from all layers
+    // _layers[0] is the app, subsequent entries are extended layers
+    // We check all layers and find the first existing component directory
+    const potentialPaths: string[] = []
+
+    for (const layer of nuxt.options._layers) {
+      const layerRoot = layer.cwd
+      // Resolve component directory relative to layer root
+      const componentPath = COMPONENT_DIR_PATH.replace(/^@\//, '')
+
+      // Try app/ subdirectory first (Nuxt 4 layer structure)
+      potentialPaths.push(join(layerRoot, 'app', componentPath))
+      // Also try direct path (traditional structure)
+      potentialPaths.push(join(layerRoot, componentPath))
+    }
+
+    logger.info('Checking', { potentialPaths })
+    // Use findPath to find the first existing component directory
+    const componentsPath = (await findPath(potentialPaths, {}, 'dir')) || ROOT_DIR_PATH
+
+    logger.info('Decided on', { componentsPath })
+
+    // Create resolver relative to the found components path
+    const { resolve, resolvePath } = createResolver(componentsPath)
+
+    // Tell Nuxt to not scan `componentsDir` for auto imports as we will do it manually
+    // See https://github.com/unovue/shadcn-vue/pull/528#discussion_r1590206268
+    addComponentsDir({
+      path: componentsPath,
+      extensions: [],
+      ignore: ['**/*'],
+    }, {
+      prepend: true,
+    })
+
+    // Manually scan `componentsDir` for components and register them for auto imports
+    try {
+      await Promise.all(readdirSync(componentsPath).map(async (dir) => {
+        try {
+          const filePath = await resolvePath(join(componentsPath, dir, 'index'), { extensions: ['.ts', '.js'] })
+          const content = readFileSync(filePath, { encoding: 'utf8' })
+          const ast = parseSync(filePath, content, {
+            sourceType: 'module',
+          })
+
+          const exportedKeys: string[] = ast.program.body
+            .filter(node => node.type === 'ExportNamedDeclaration')
+          // @ts-expect-error parse return any
+            .flatMap(node => node.specifiers?.map(specifier => specifier.exported?.name) || [])
+            .filter((key: string) => /^[A-Z]/.test(key))
+
+          exportedKeys.forEach((key) => {
+            addComponent({
+              name: `${prefix}${key}`, // name of the component to be used in vue templates
+              export: key, // (optional) if the component is a named (rather than default) export
+              filePath: resolve(filePath),
+              priority: 1,
+            })
+          })
+        }
+        catch (err) {
+          if (err instanceof Error)
+            console.warn('Module error: ', err.message)
+        }
+      }))
+    }
+    catch (err) {
+      if (err instanceof Error)
+        console.warn(err.message)
+    }
+  },
+})

package/nuxt.config.ts

@@ -0,0 +1,125 @@
+import { createResolver, useNuxt } from '@nuxt/kit'
+import tailwindcss from '@tailwindcss/vite'
+
+const { resolve } = createResolver(import.meta.url)
+
+export default defineNuxtConfig({
+  modules: [
+    resolve('./modules/config'),
+    resolve('./modules/css'),
+    resolve('./modules/shadcn'),
+    '@nuxtjs/color-mode',
+    '@nuxt/content',
+    '@nuxt/image',
+    '@nuxt/icon',
+    'nuxt-og-image',
+  ],
+  devtools: { enabled: true },
+  css: [resolve('./app/assets/css/main.css')],
+  colorMode: {
+    classSuffix: '',
+    preference: 'system',
+    fallback: 'light',
+  },
+  content: {
+    build: {
+      markdown: {
+        highlight: {
+          theme: {
+            light: 'github-light-default',
+            dark: 'github-dark',
+          },
+          langs: [
+            'ts',
+            'tsx',
+            'js',
+            'vue',
+            'vue-html',
+            'html',
+            'css',
+            'json',
+            'bash',
+            'shell',
+            'yaml',
+            'md',
+            'mdc',
+          ],
+        },
+      },
+    },
+  },
+  mdc: {
+    components: {
+      map: {
+        'browser-frame': 'BrowserFrame',
+        'callout': 'Callout',
+        'caution': 'Caution',
+        'icon': 'ProseIcon',
+        'note': 'Note',
+        'tip': 'Tip',
+        'warning': 'Warning',
+        'tabs': 'Tabs',
+        'tabs-item': 'TabsItem',
+        'u-color-mode-image': 'UColorModeImage',
+      },
+    },
+  },
+  compatibilityDate: '2025-01-01',
+  nitro: {
+    prerender: {
+      crawlLinks: true,
+      failOnError: false,
+      autoSubfolderIndex: false,
+    },
+  },
+  vite: {
+    plugins: [tailwindcss()],
+  },
+  hooks: {
+    'components:dirs': (dirs) => {
+      // Register app components from the layer directory
+      dirs.push({
+        path: resolve('./app/components/app'),
+        pathPrefix: false,
+        global: true,
+      })
+      // Register docs components from the layer directory
+      dirs.push({
+        path: resolve('./app/components/docs'),
+        pathPrefix: false,
+        global: true,
+      })
+      // Register content components from the layer directory
+      dirs.push({
+        path: resolve('./app/components/content'),
+        pathPrefix: false,
+        global: true,
+      })
+    },
+    'nitro:config': (nitroConfig) => {
+      const nuxt = useNuxt()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const i18nOptions = (nuxt.options as any).i18n
+
+      const routes: string[] = []
+      if (!i18nOptions) {
+        routes.push('/')
+      }
+      else {
+        routes.push(...(i18nOptions.locales?.map((locale: string | { code: string }) =>
+          typeof locale === 'string' ? `/${locale}` : `/${locale.code}`) || []))
+      }
+
+      nitroConfig.prerender = nitroConfig.prerender || {}
+      nitroConfig.prerender.routes = nitroConfig.prerender.routes || []
+      nitroConfig.prerender.routes.push(...routes)
+    },
+  },
+  ogImage: {
+    fonts: [
+      'Geist:400',
+      'Geist:500',
+      'Geist:600',
+    ],
+  },
+})