docs-please 0.2.0-beta.0

package/app/components/app/AppHeader.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Moon, Sun } from 'lucide-vue-next'
+import { Button } from '~/components/ui/button'
+
+const colorMode = useColorMode()
+
+function toggleColorMode() {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+}
+
+const appConfig = useAppConfig()
+const title = computed(() => appConfig.docs?.title || 'Docs')
+</script>
+
+<template>
+  <header class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <div class="container flex h-14 items-center">
+      <!-- Logo -->
+      <div class="mr-4 flex">
+        <NuxtLink
+          to="/"
+          class="flex items-center space-x-2"
+        >
+          <span class="font-bold">{{ title }}</span>
+        </NuxtLink>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="flex flex-1 items-center space-x-6 text-sm font-medium">
+        <NuxtLink
+          to="/docs"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Documentation
+        </NuxtLink>
+      </nav>
+
+      <!-- Actions -->
+      <div class="flex items-center space-x-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          @click="toggleColorMode"
+        >
+          <Sun
+            v-if="colorMode.value === 'dark'"
+            class="size-5"
+          />
+          <Moon
+            v-else
+            class="size-5"
+          />
+          <span class="sr-only">Toggle theme</span>
+        </Button>
+      </div>
+    </div>
+  </header>
+</template>

package/app/components/content/BrowserFrame.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <div class="w-fit rounded-xl border border-border bg-muted shadow-md overflow-hidden px-2 pb-2">
+    <div class="flex justify-between items-center px-2 py-2 bg-muted border-border border-b">
+      <div class="flex items-center gap-2">
+        <span class="w-3 h-3 bg-red-500 rounded-full" />
+        <span class="w-3 h-3 bg-yellow-500 rounded-full" />
+        <span class="w-3 h-3 bg-green-500 rounded-full" />
+      </div>
+      <div class="text-muted-foreground text-sm">
+        {{ title }}
+      </div>
+    </div>
+    <slot mdc-unwrap="p" />
+  </div>
+</template>

package/app/components/content/Callout.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { HTMLAttributes, Component } from 'vue'
+import type { AlertVariants } from '~/components/ui/alert'
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  CircleXIcon,
+  InfoIcon,
+  LightbulbIcon,
+  TriangleAlertIcon,
+} from 'lucide-vue-next'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '~/components/ui/alert'
+
+export type CalloutType = 'note' | 'tip' | 'warning' | 'caution' | 'info' | 'success' | 'error'
+
+const props = withDefaults(defineProps<{
+  icon?: boolean | Component
+  title?: string
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+  type?: CalloutType
+}>(), {
+  icon: true,
+})
+
+const typeConfig: Record<CalloutType, { icon: Component, variant: AlertVariants['variant'], defaultTitle: string }> = {
+  note: { icon: InfoIcon, variant: 'info', defaultTitle: 'Note' },
+  tip: { icon: LightbulbIcon, variant: 'success', defaultTitle: 'Tip' },
+  warning: { icon: TriangleAlertIcon, variant: 'warning', defaultTitle: 'Warning' },
+  caution: { icon: CircleAlertIcon, variant: 'error', defaultTitle: 'Caution' },
+  info: { icon: InfoIcon, variant: 'info', defaultTitle: 'Info' },
+  success: { icon: CircleCheckIcon, variant: 'success', defaultTitle: 'Success' },
+  error: { icon: CircleXIcon, variant: 'error', defaultTitle: 'Error' },
+}
+
+const config = computed(() => {
+  if (props.type && typeConfig[props.type]) {
+    return typeConfig[props.type]
+  }
+  return null
+})
+
+const resolvedVariant = computed(() => props.variant ?? config.value?.variant ?? 'default')
+const resolvedIcon = computed(() => {
+  if (props.icon === false) return null
+  if (typeof props.icon === 'object') return props.icon
+  return config.value?.icon ?? InfoIcon
+})
+</script>
+
+<template>
+  <Alert
+    :class="cn(
+      'my-6 w-auto md:-mx-1',
+      props.class,
+    )"
+    :variant="resolvedVariant"
+  >
+    <component
+      :is="resolvedIcon"
+      v-if="resolvedIcon"
+    />
+    <AlertTitle v-if="title || $slots.title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </AlertTitle>
+    <AlertDescription>
+      <slot name="description">
+        <slot />
+      </slot>
+    </AlertDescription>
+  </Alert>
+</template>

package/app/components/content/Caution.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Callout from './Callout.vue'
+
+defineProps<{
+  title?: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Callout
+    type="caution"
+    :title
+    :class
+  >
+    <template
+      v-if="$slots.title"
+      #title
+    >
+      <slot name="title" />
+    </template>
+    <slot />
+  </Callout>
+</template>

package/app/components/content/CodeBlockCommand.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { TerminalIcon } from 'lucide-vue-next'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '~/components/ui/tabs'
+
+const props = defineProps<{
+  code: string
+}>()
+
+const tabs = computed(() => {
+  const data = { bun: '', pnpm: '', npm: '', yarn: '' }
+
+  if (props.code.includes('npm install')) {
+    data.npm = props.code
+    data.yarn = props.code.replaceAll('npm install', 'yarn add')
+    data.pnpm = props.code.replaceAll('npm install', 'pnpm add')
+    data.bun = props.code.replaceAll('npm install', 'bun add')
+  }
+  else if (props.code.includes('npx create-')) {
+    data.npm = props.code
+    data.yarn = props.code.replaceAll('npx create-', 'yarn create')
+    data.pnpm = props.code.replaceAll('npx create-', 'pnpm create')
+    data.bun = props.code.replaceAll('npx', 'bunx --bun')
+  }
+  else if (props.code.includes('npm create')) {
+    data.npm = props.code
+    data.yarn = props.code.replaceAll('npm create', 'yarn create')
+    data.pnpm = props.code.replaceAll('npm create', 'pnpm create')
+    data.bun = props.code.replaceAll('npm create', 'bun create')
+  }
+  else if (props.code.includes('npx')) {
+    data.npm = props.code
+    data.yarn = props.code.replaceAll('npx', 'yarn dlx')
+    data.pnpm = props.code.replaceAll('npx', 'pnpm dlx')
+    data.bun = props.code.replaceAll('npx', 'bunx --bun')
+  }
+  else if (props.code.includes('npm run')) {
+    data.npm = props.code
+    data.yarn = props.code.replaceAll('npm run', 'yarn')
+    data.pnpm = props.code.replaceAll('npm run', 'pnpm')
+    data.bun = props.code.replaceAll('npm run', 'bun')
+  }
+
+  return data
+})
+
+const { config } = useConfig()
+</script>
+
+<template>
+  <div class="relative overflow-x-auto">
+    <Tabs
+      v-model="config.packageManager"
+      class="gap-0"
+    >
+      <div class="border-border/50 flex items-center gap-2 border-b px-3 py-1">
+        <div class="bg-foreground flex size-4 items-center justify-center rounded-[1px] opacity-70">
+          <TerminalIcon class="text-code size-3" />
+        </div>
+        <TabsList class="rounded-none bg-transparent p-0">
+          <TabsTrigger
+            v-for="key in Object.keys(tabs)"
+            :key="key"
+            :value="key"
+            class="data-[state=active]:bg-accent data-[state=active]:border-input h-7 border border-transparent pt-0.5 data-[state=active]:shadow-none"
+          >
+            {{ key }}
+          </TabsTrigger>
+        </TabsList>
+      </div>
+
+      <div class="no-scrollbar overflow-x-auto">
+        <TabsContent
+          v-for="([key, value]) in Object.entries(tabs)"
+          :key="key"
+          :value="key"
+          class="mt-0 px-4 py-3.5"
+        >
+          <pre class="language-bash shiki shiki-themes github-light-default github-dark"><code class="relative font-mono text-sm leading-none"><span class="line"><span>{{ value }}</span></span></code></pre>
+        </TabsContent>
+      </div>
+    </Tabs>
+    <CopyButton
+      class="absolute top-2 right-2 z-10 size-7 opacity-70 hover:opacity-100 focus-visible:opacity-100"
+      :value="tabs[config.packageManager]"
+    />
+  </div>
+</template>

package/app/components/content/CodeCollapsibleWrapper.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+import { Button } from '~/components/ui/button'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '~/components/ui/collapsible'
+import { Separator } from '~/components/ui/separator'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const open = ref(false)
+</script>
+
+<template>
+  <Collapsible
+    v-model:open="open"
+    :class="cn('group/collapsible relative md:-mx-1', props.class)"
+  >
+    <CollapsibleTrigger as-child>
+      <div class="absolute top-1.5 right-9 z-10 flex items-center">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="text-muted-foreground h-7 rounded-md px-2"
+        >
+          {{ open ? "Collapse" : "Expand" }}
+        </Button>
+        <Separator
+          orientation="vertical"
+          class="mx-1.5 !h-4"
+        />
+      </div>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent
+      force-mount
+      class="relative mt-6 overflow-hidden data-[state=closed]:max-h-64 [&>figure]:mt-0 [&>figure]:md:!mx-0"
+    >
+      <slot />
+    </CollapsibleContent>
+    <CollapsibleTrigger class="from-code/70 to-code text-muted-foreground absolute inset-x-0 -bottom-2 flex h-20 items-center justify-center rounded-b-lg bg-gradient-to-b text-sm group-data-[state=open]/collapsible:hidden">
+      {{ open ? "Collapse" : "Expand" }}
+    </CollapsibleTrigger>
+  </Collapsible>
+</template>

package/app/components/content/CodeTabs.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Tabs } from '~/components/ui/tabs'
+
+const { config } = useConfig()
+</script>
+
+<template>
+  <Tabs
+    v-model="config.installationType"
+    class="relative mt-6 w-full"
+  >
+    <slot />
+  </Tabs>
+</template>

package/app/components/content/ComponentPreview.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  name: string
+  align?: 'center' | 'start' | 'end'
+  description?: string
+  hideCode?: boolean
+  type?: 'block' | 'component' | 'example'
+  class?: HTMLAttributes['class']
+}>()
+
+// For now, only support demo components - blocks and charts are not supported in the docs layer
+const Component = defineAsyncComponent({
+  loader: () => import(`~/components/demo/${props.name}.vue`),
+  errorComponent: () => null,
+})
+</script>
+
+<template>
+  <p
+    v-if="!Component"
+    class="text-muted-foreground text-sm"
+  >
+    Component
+    <code class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
+      {{ name }}
+    </code>
+    not found in registry.
+  </p>
+
+  <div
+    v-else-if="type === 'block'"
+    class="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border md:-mx-1"
+  >
+    <img
+      :src="`/r/styles/new-york-v4/${name}-light.png`"
+      :alt="name"
+      width="1440"
+      height="900"
+      class="bg-background absolute top-0 left-0 z-20 w-[970px] max-w-none sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
+    >
+    <img
+      :src="`/r/styles/new-york-v4/${name}-dark.png`"
+      :alt="name"
+      :width="1440"
+      :height="900"
+      class="bg-background absolute top-0 left-0 z-20 hidden w-[970px] max-w-none sm:w-[1280px] md:hidden dark:block md:dark:hidden"
+    >
+    <div class="bg-background absolute inset-0 hidden w-[1600px] md:block">
+      <iframe
+        :src="`/view/${name}`"
+        class="size-full"
+      />
+    </div>
+  </div>
+
+  <ComponentPreviewTabs
+    v-else
+    :class="props.class"
+    :align
+    :hide-code
+    :component="Component"
+  >
+    <ComponentSource
+      v-if="!hideCode"
+      :name
+      :collapsible="false"
+    />
+  </ComponentPreviewTabs>
+</template>

package/app/components/content/ComponentsList.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { data } = await useNavigation()
+
+const list = computed(() => data.value?.[0]?.children.find(item => item.title === 'Components')?.children ?? [])
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 md:gap-x-8 lg:gap-x-16 lg:gap-y-6 xl:gap-x-20">
+    <NuxtLink
+      v-for="component in list"
+      :key="component.title"
+      :to="component.path"
+      class="inline-flex items-center gap-2 text-lg font-medium underline-offset-4 hover:underline md:text-base"
+    >
+      {{ component.title }}
+
+      <span
+        v-if="component.new"
+        class="flex size-2 rounded-full bg-green-500"
+        title="New"
+      />
+    </NuxtLink>
+  </div>
+</template>

package/app/components/content/CopyButton.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Check, Copy } from 'lucide-vue-next'
+import { useClipboard } from '@vueuse/core'
+import { toRefs } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<{
+  value?: string
+  class?: HTMLAttributes['class']
+}>(), {
+  value: '',
+})
+const { value } = toRefs(props)
+
+const { copy, copied } = useClipboard({ source: value })
+</script>
+
+<template>
+  <button
+    type="button"
+    data-slot="copy-button"
+    :class="cn(
+      'bg-code absolute top-3 right-2 z-10 size-7 rounded-md flex items-center justify-center opacity-70 hover:opacity-100 focus-visible:opacity-100 transition-opacity',
+      props.class,
+    )"
+    @click="copy()"
+  >
+    <span class="sr-only">Copy</span>
+    <Check
+      v-if="copied"
+      class="size-4"
+    />
+    <Copy
+      v-else
+      class="size-4"
+    />
+  </button>
+</template>

package/app/components/content/FeatureCard.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '~/components/ui/card'
+
+const props = defineProps<{
+  title?: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Card :class="props.class">
+    <CardHeader v-if="title">
+      <CardTitle>{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <slot />
+    </CardContent>
+  </Card>
+</template>

package/app/components/content/LinkedCard.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    :class="cn(
+      'bg-surface text-surface-foreground hover:bg-surface/80 flex w-full flex-col items-center rounded-xl p-6 transition-colors sm:p-10',
+      props.class,
+    )"
+  >
+    <slot />
+  </NuxtLink>
+</template>

package/app/components/content/Note.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Callout from './Callout.vue'
+
+defineProps<{
+  title?: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Callout
+    type="note"
+    :title
+    :class
+  >
+    <template
+      v-if="$slots.title"
+      #title
+    >
+      <slot name="title" />
+    </template>
+    <slot />
+  </Callout>
+</template>

package/app/components/content/ProseA.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  href?: string
+  target?: '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined
+}>(), {
+  href: '',
+})
+</script>
+
+<template>
+  <NuxtLink
+    :href="props.href"
+    :target="props.target"
+    class="font-medium underline underline-offset-4"
+  >
+    <slot />
+  </NuxtLink>
+</template>

package/app/components/content/ProseBlockQuote.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <blockquote class="mt-6 border-l-2 pl-6 italic">
+    <slot />
+  </blockquote>
+</template>

package/app/components/content/ProseCode.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <code class="bg-muted relative rounded-md px-[0.3rem] py-[0.2rem] font-mono text-[0.8rem] outline-none">
+    <slot />
+  </code>
+</template>

package/app/components/content/ProseH1.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1 class="font-heading mt-2 scroll-m-28 text-3xl font-bold tracking-tight">
+    <slot />
+  </h1>
+</template>

package/app/components/content/ProseH2.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <h2 class="font-heading [&+]*:[code]:text-xl mt-10 scroll-m-28 text-xl font-medium tracking-tight first:mt-0 lg:mt-16 [&+.steps]:!mt-0 [&+.steps>h3]:!mt-4 [&+h3]:!mt-6 [&+p]:!mt-4">
+    <slot />
+  </h2>
+</template>

package/app/components/content/ProseH3.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h3
+    class="font-heading mt-12 scroll-m-28 text-lg font-medium tracking-tight [&+p]:!mt-4 *:[code]:text-xl"
+  >
+    <slot />
+  </h3>
+</template>

package/app/components/content/ProseH4.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h4
+    class="font-heading mt-8 scroll-m-28 text-base font-medium tracking-tight"
+  >
+    <slot />
+  </h4>
+</template>

package/app/components/content/ProseH5.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h5 class="mt-8 scroll-m-28 text-base font-medium tracking-tight">
+    <slot />
+  </h5>
+</template>

package/app/components/content/ProseH6.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h6 class="mt-8 scroll-m-28 text-base font-medium tracking-tight">
+    <slot />
+  </h6>
+</template>

package/app/components/content/ProseHr.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <hr class="my-4 md:my-8">
+</template>