docs-please 0.2.0-beta.0 → 0.2.1-beta.0

package/app/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from '~/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

package/app/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

package/app/components/ui/dialog/DialogTrigger.vue

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

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

@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"

package/app/components/ui/kbd/Kbd.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <kbd
+    :class="cn(
+      'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+      '[&_svg:not([class*=\'size-\'])]:size-3',
+      '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+      props.class,
+    )"
+  >
+    <slot />
+  </kbd>
+</template>

package/app/components/ui/kbd/KbdGroup.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <kbd
+    data-slot="kbd-group"
+    :class="cn('inline-flex items-center gap-1', props.class)"
+  >
+    <slot />
+  </kbd>
+</template>

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

@@ -0,0 +1,2 @@
+export { default as Kbd } from "./Kbd.vue"
+export { default as KbdGroup } from "./KbdGroup.vue"

package/app/composables/useContentSearch.ts

@@ -0,0 +1,52 @@
+import type { NavigationItem } from './useNavigation'
+
+const open = ref(false)
+
+export interface SearchItem {
+  id: string
+  label: string
+  icon?: Component
+  to?: string
+  onSelect?: () => void
+  prefix?: string
+  suffix?: string
+  active?: boolean
+  disabled?: boolean
+  isDoc?: boolean
+}
+
+export interface SearchGroup {
+  id: string
+  label: string
+  items: SearchItem[]
+}
+
+export function useContentSearch() {
+  return {
+    open,
+  }
+}
+
+export function flattenNavigation(items: NavigationItem[], prefix = '', isDocSection = false): SearchItem[] {
+  return items.flatMap((item) => {
+    const result: SearchItem[] = []
+    // Determine if this item is a doc page based on parent context or path
+    const itemIsDoc = isDocSection || item.path?.startsWith('/docs')
+
+    if (item.type === 'page' && item.path) {
+      result.push({
+        id: item.path,
+        label: item.title,
+        to: item.path,
+        prefix: prefix || undefined,
+        isDoc: itemIsDoc,
+      })
+    }
+
+    if (item.children?.length) {
+      result.push(...flattenNavigation(item.children, item.title, itemIsDoc))
+    }
+
+    return result
+  })
+}

package/app/layouts/default.vue

@@ -8,5 +8,6 @@
       <slot />
     </main>
     <AppFooter />
+    <AppSearch />
   </div>
 </template>

package/app/layouts/docs.vue

@@ -23,5 +23,6 @@
       </div>
     </div>
     <AppFooter />
+    <AppSearch />
   </div>
 </template>

package/app/utils/navigation.ts

@@ -0,0 +1,7 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+
+export const flattenNavigation = (items?: ContentNavigationItem[]): ContentNavigationItem[] => items?.flatMap(
+  item => item.children
+    ? flattenNavigation(item.children)
+    : [item],
+) || []

package/app/utils/prerender.ts

@@ -0,0 +1,12 @@
+export const addPrerenderPath = (path: string) => {
+  const event = useRequestEvent()
+  if (event) {
+    event.node.res.setHeader(
+      'x-nitro-prerender',
+      [
+        event.node.res.getHeader('x-nitro-prerender'),
+        path,
+      ].filter(Boolean).join(','),
+    )
+  }
+}

package/nuxt.config.ts

@@ -13,6 +13,9 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxt/icon',
     'nuxt-og-image',
+      '@nuxtjs/robots',
+      'nuxt-og-image',
+      'nuxt-llms',
   ],
   devtools: { enabled: true },
   css: [resolve('./app/assets/css/main.css')],
@@ -61,6 +64,7 @@ export default defineNuxtConfig({
         'tabs': 'Tabs',
         'tabs-item': 'TabsItem',
         'u-color-mode-image': 'UColorModeImage',
+        'kbd': 'ProseKbd',
       },
     },
   },

package/nuxt.schema.ts

@@ -29,6 +29,50 @@ export default defineNuxtSchema({
           type: 'string',
         },
       },
+      header: {
+        $schema: {
+          title: 'Header Configuration',
+          description: 'Header configuration options',
+        },
+        title: {
+          $default: '',
+          $schema: {
+            title: 'Header Title',
+            description: 'Title displayed in the header (defaults to site title)',
+            type: 'string',
+          },
+        },
+        logo: {
+          $schema: {
+            title: 'Logo Configuration',
+            description: 'Logo images for light and dark modes',
+          },
+          light: {
+            $default: '',
+            $schema: {
+              title: 'Light Mode Logo',
+              description: 'Logo image for light mode',
+              type: 'string',
+            },
+          },
+          dark: {
+            $default: '',
+            $schema: {
+              title: 'Dark Mode Logo',
+              description: 'Logo image for dark mode',
+              type: 'string',
+            },
+          },
+          alt: {
+            $default: '',
+            $schema: {
+              title: 'Logo Alt Text',
+              description: 'Alt text for the logo image',
+              type: 'string',
+            },
+          },
+        },
+      },
       github: {
         $schema: {
           title: 'GitHub Configuration',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docs-please",
   "type": "module",
-  "version": "0.2.0-beta.0",
+  "version": "0.2.1-beta.0",
   "description": "Nuxt layer for documentation sites using shadcn-vue",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,8 @@
     "typecheck": "vue-tsc -b"
   },
   "peerDependencies": {
-    "nuxt": "^4.0.0"
+    "better-sqlite3": "12.x",
+    "nuxt": "4.x"
   },
   "dependencies": {
     "@iconify-json/lucide": "^1.2.75",
@@ -42,12 +43,14 @@
     "@nuxtjs/mdc": "^0.18.4",
     "@tabler/icons-vue": "^3.35.0",
     "@vueuse/core": "^14.1.0",
+    "@vueuse/integrations": "^14.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "debug": "^4.4.1",
     "defu": "^6.1.4",
     "eslint": "^9.39.1",
     "exsolve": "^1.0.8",
+    "fuse.js": "^7.1.0",
     "lucide-vue-next": "^0.555.0",
     "nuxt-og-image": "^5.1.12",
     "oxc-parser": "^0.99.0",
@@ -70,8 +73,10 @@
     "zod-to-json-schema": "^3.25.0"
   },
   "devDependencies": {
+    "@nuxtjs/robots": "^5.6.1",
     "@tailwindcss/vite": "^4.1.17",
     "better-sqlite3": "^11.9.1",
+    "nuxt-llms": "^0.1.3",
     "typescript": "^5.9.3",
     "vue-tsc": "^2.0.0"
   },

package/server/routes/raw/[...slug].md.get.ts

@@ -0,0 +1,45 @@
+import { withLeadingSlash } from 'ufo'
+import { stringify } from 'minimark/stringify'
+import { queryCollection } from '@nuxt/content/nitro'
+import type { Collections } from '@nuxt/content'
+
+export default eventHandler(async (event) => {
+  const slug = getRouterParams(event)['slug.md']
+  if (!slug?.endsWith('.md')) {
+    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  }
+
+  const path = withLeadingSlash(slug.replace('.md', ''))
+  const config = useRuntimeConfig(event).public
+
+  let collectionName = 'docs'
+  if (config.i18n?.locales) {
+    const pathSegments = path.split('/').filter(Boolean)
+    const firstSegment = pathSegments[0]
+
+    const availableLocales = config.i18n.locales.map((locale: string | { code: string }) =>
+      typeof locale === 'string' ? locale : locale.code,
+    )
+
+    if (firstSegment && availableLocales.includes(firstSegment)) {
+      collectionName = `docs_${firstSegment}`
+    }
+    else if (config.i18n.defaultLocale) {
+      collectionName = `docs_${config.i18n.defaultLocale}`
+    }
+  }
+
+  const page = await queryCollection(event, collectionName as keyof Collections).path(path).first()
+  if (!page) {
+    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  }
+
+  // Add title and description to the top of the page if missing
+  if (page.body.value[0]?.[0] !== 'h1') {
+    page.body.value.unshift(['blockquote', {}, page.description])
+    page.body.value.unshift(['h1', {}, page.title])
+  }
+
+  setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8')
+  return stringify({ ...page.body, type: 'minimark' }, { format: 'markdown/html' })
+})