@gentleduck/docs 0.0.1

package/src/components/copy-button/copy-button.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { type Event, trackEvent } from '@duck-docs/lib/events'
+import { cn } from '@gentleduck/libs/cn'
+import { Button } from '@gentleduck/registry-ui-duckui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@gentleduck/registry-ui-duckui/dropdown-menu'
+import { CheckIcon, ClipboardIcon, Copy } from 'lucide-react'
+import * as React from 'react'
+import type { CopyButtonProps, CopyWithClassNamesProps } from './copy-button.types'
+
+export async function copyToClipboardWithMeta(value: string, event?: Event) {
+  navigator.clipboard.writeText(value)
+  if (event) {
+    trackEvent(event)
+  }
+}
+
+export function CopyButton({ value, className, variant = 'ghost', event, ...props }: CopyButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 3000)
+  }, [hasCopied])
+
+  return (
+    <Button
+      aria-label="Copy"
+      className={cn('[&_svg]:!size-3.5 z-50 size-7 rounded-sm shadow-none', className)}
+      icon={hasCopied ? <CheckIcon /> : <Copy />}
+      onClick={() => {
+        copyToClipboardWithMeta(
+          value,
+          event
+            ? {
+                name: event,
+                properties: {
+                  code: value,
+                },
+              }
+            : undefined,
+        )
+        setHasCopied(true)
+      }}
+      size="icon"
+      variant={variant}
+      {...props}
+    />
+  )
+}
+
+export function CopyWithClassNames({ value, classNames, className, ...props }: CopyWithClassNamesProps) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [hasCopied])
+
+  const copyToClipboard = React.useCallback((value: string) => {
+    copyToClipboardWithMeta(value)
+    setHasCopied(true)
+  }, [])
+
+  return (
+    <DropdownMenu placement="bottom-end">
+      <DropdownMenuTrigger asChild>
+        <Button
+          className={cn('!size-6.5 relative z-50 [&_svg]:w-3.5', className)}
+          icon={hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+          size="icon"
+          variant="outline"
+          {...props}></Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem onClick={() => copyToClipboard(value)}>Component</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => copyToClipboard(classNames)}>Classname</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/copy-button/copy-button.types.ts

@@ -0,0 +1,17 @@
+import type { Event } from '@duck-docs/lib/events'
+import type * as React from 'react'
+
+export type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof import('@gentleduck/registry-ui-duckui/dropdown-menu').DropdownMenuTrigger
+>
+
+export type CopyWithClassNamesProps = DropdownMenuTriggerProps & {
+  value: string
+  classNames: string
+  className?: string
+}
+
+export type CopyButtonProps = import('@gentleduck/registry-ui-duckui/button').ButtonProps & {
+  value: string
+  event?: Event['name']
+}

package/src/components/copy-button/index.ts

@@ -0,0 +1,2 @@
+export * from './copy-button'
+export * from './copy-button.types'

package/src/components/docs/docs-copy-page.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { useCopyToClipboard } from '@gentleduck/hooks/use-copy-to-clipboard'
+import { Button } from '@gentleduck/registry-ui-duckui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@gentleduck/registry-ui-duckui/dropdown-menu'
+import { Separator } from '@gentleduck/registry-ui-duckui/separator'
+import { Check, ChevronDown, Copy } from 'lucide-react'
+import { useSiteConfig } from '../../context'
+
+function getPromptUrl(baseURL: string, url: string, siteName: string) {
+  return `${baseURL}?q=${encodeURIComponent(
+    `I’m looking at this ${siteName} documentation: ${url}.
+Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,
+  )}`
+}
+
+const menuItems = {
+  chatgpt: (url: string, siteName: string) => (
+    <a href={getPromptUrl('https://chatgpt.com', url, siteName)} rel="noopener noreferrer" target="_blank">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z"
+          fill="currentColor"
+        />
+      </svg>
+      Open in ChatGPT
+    </a>
+  ),
+  claude: (url: string, siteName: string) => (
+    <a href={getPromptUrl('https://claude.ai/new', url, siteName)} rel="noopener noreferrer" target="_blank">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="m4.714 15.956 4.718-2.648.079-.23-.08-.128h-.23l-.79-.048-2.695-.073-2.337-.097-2.265-.122-.57-.121-.535-.704.055-.353.48-.321.685.06 1.518.104 2.277.157 1.651.098 2.447.255h.389l.054-.158-.133-.097-.103-.098-2.356-1.596-2.55-1.688-1.336-.972-.722-.491L2 6.223l-.158-1.008.655-.722.88.06.225.061.893.686 1.906 1.476 2.49 1.833.364.304.146-.104.018-.072-.164-.274-1.354-2.446-1.445-2.49-.644-1.032-.17-.619a2.972 2.972 0 0 1-.103-.729L6.287.133 6.7 0l.995.134.42.364.619 1.415L9.735 4.14l1.555 3.03.455.898.243.832.09.255h.159V9.01l.127-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.583.28.48.685-.067.444-.286 1.851-.558 2.903-.365 1.942h.213l.243-.242.983-1.306 1.652-2.064.728-.82.85-.904.547-.431h1.032l.759 1.129-.34 1.166-1.063 1.347-.88 1.142-1.263 1.7-.79 1.36.074.11.188-.02 2.853-.606 1.542-.28 1.84-.315.832.388.09.395-.327.807-1.967.486-2.307.462-3.436.813-.043.03.049.061 1.548.146.662.036h1.62l3.018.225.79.522.473.638-.08.485-1.213.62-1.64-.389-3.825-.91-1.31-.329h-.183v.11l1.093 1.068 2.003 1.81 2.508 2.33.127.578-.321.455-.34-.049-2.204-1.657-.85-.747-1.925-1.62h-.127v.17l.443.649 2.343 3.521.122 1.08-.17.353-.607.213-.668-.122-1.372-1.924-1.415-2.168-1.141-1.943-.14.08-.674 7.254-.316.37-.728.28-.607-.461-.322-.747.322-1.476.388-1.924.316-1.53.285-1.9.17-.632-.012-.042-.14.018-1.432 1.967-2.18 2.945-1.724 1.845-.413.164-.716-.37.066-.662.401-.589 2.386-3.036 1.439-1.882.929-1.086-.006-.158h-.055L4.138 18.56l-1.13.146-.485-.456.06-.746.231-.243 1.907-1.312Z"
+          fill="currentColor"
+        />
+      </svg>
+      Open in Claude
+    </a>
+  ),
+  markdown: (url: string) => (
+    <a href={`${url}.md`} rel="noopener noreferrer" target="_blank">
+      <svg strokeLinejoin="round" viewBox="0 0 22 16">
+        <path
+          clipRule="evenodd"
+          d="M19.5 2.25H2.5C1.80964 2.25 1.25 2.80964 1.25 3.5V12.5C1.25 13.1904 1.80964 13.75 2.5 13.75H19.5C20.1904 13.75 20.75 13.1904 20.75 12.5V3.5C20.75 2.80964 20.1904 2.25 19.5 2.25ZM2.5 1C1.11929 1 0 2.11929 0 3.5V12.5C0 13.8807 1.11929 15 2.5 15H19.5C20.8807 15 22 13.8807 22 12.5V3.5C22 2.11929 20.8807 1 19.5 1H2.5ZM3 4.5H4H4.25H4.6899L4.98715 4.82428L7 7.02011L9.01285 4.82428L9.3101 4.5H9.75H10H11V5.5V11.5H9V7.79807L7.73715 9.17572L7 9.97989L6.26285 9.17572L5 7.79807V11.5H3V5.5V4.5ZM15 8V4.5H17V8H19.5L17 10.5L16 11.5L15 10.5L12.5 8H15Z"
+          fill="currentColor"
+          fillRule="evenodd"
+        />
+      </svg>
+      View as Markdown
+    </a>
+  ),
+  v0: (url: string, siteName: string) => (
+    <a href={getPromptUrl('https://v0.dev', url, siteName)} rel="noopener noreferrer" target="_blank">
+      <svg
+        className="size-4.5 -translate-x-px"
+        fill="currentColor"
+        viewBox="0 0 147 70"
+        xmlns="http://www.w3.org/2000/svg">
+        <path d="M56 50.203V14h14v46.156C70 65.593 65.593 70 60.156 70c-2.596 0-5.158-1-7-2.843L0 14h19.797L56 50.203ZM147 56h-14V23.953L100.953 56H133v14H96.687C85.814 70 77 61.186 77 50.312V14h14v32.156L123.156 14H91V0h36.312C138.186 0 147 8.814 147 19.688V56Z" />
+      </svg>
+      <span className="-translate-x-[2px]">Open in v0</span>
+    </a>
+  ),
+}
+
+export function DocsCopyPage({ page, url }: { page: string; url: string }) {
+  const siteConfig = useSiteConfig()
+  const siteName = siteConfig.name ?? 'documentation'
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+
+  const trigger = (
+    <Button className="peer [&>svg]:!size-4 size-8 shadow-none" size="sm" variant="secondary">
+      <ChevronDown />
+    </Button>
+  )
+
+  return (
+    <div className="group/buttons relative flex rounded-lg bg-secondary *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
+      <Button className="[&_svg]:!size-3.5" onClick={() => copyToClipboard(page)} size="sm" variant="secondary">
+        {isCopied ? <Check /> : <Copy />}
+        Copy Page
+      </Button>
+      <Separator className="bg-foreground/25" orientation="vertical" />
+      <DropdownMenu placement="bottom-end">
+        <DropdownMenuTrigger asChild className="hidden sm:flex">
+          {trigger}
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="bg-muted shadow-none">
+          {Object.entries(menuItems).map(([key, value]) => (
+            <DropdownMenuItem
+              className="flex [&>a]:flex [&>a]:items-center [&>a]:gap-2 [&[aria-selected]]:bg-zinc-600/40"
+              key={key}>
+              {value(url, siteName)}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/src/components/docs/docs-pager.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { type DocsConfig, useDocsConfig } from '@duck-docs/context'
+import type { NavItem, NavItemWithChildren } from '@duck-docs/types/nav'
+import { cn } from '@gentleduck/libs/cn'
+import { buttonVariants } from '@gentleduck/registry-ui-duckui/button'
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+interface DocsPagerProps {
+  doc: {
+    slug?: string
+    title: string
+  }
+}
+
+export function DocsPagerBottom({ doc }: DocsPagerProps) {
+  const docsConfig = useDocsConfig()
+  const pager = getPagerForDoc(doc, docsConfig)
+
+  if (!pager) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-row items-center justify-between">
+      {pager?.prev?.href && (
+        <Link
+          className={cn(
+            buttonVariants({
+              className: 'flex items-center',
+              variant: 'outline',
+            }),
+          )}
+          href={pager.prev.href}>
+          <ChevronLeft className="mr-2 size-4" />
+          <span>{pager.prev.title}</span>
+        </Link>
+      )}
+      {pager?.next?.href && (
+        <Link
+          className={cn(
+            buttonVariants({
+              className: 'flex items-center',
+              variant: 'outline',
+            }),
+          )}
+          href={pager.next.href}>
+          <span>{pager.next.title}</span>
+          <ChevronRight className="ml-2 size-4" />
+        </Link>
+      )}
+    </div>
+  )
+}
+export function DocsPagerTop({ doc }: DocsPagerProps) {
+  const docsConfig = useDocsConfig()
+  const pager = getPagerForDoc(doc, docsConfig)
+
+  if (!pager) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-row items-center justify-between">
+      {pager?.prev?.href && (
+        <Link
+          className={cn(
+            buttonVariants({
+              className: '[&>svg]:!size-4 size-8 items-center',
+              size: 'sm',
+              variant: 'secondary',
+            }),
+          )}
+          href={pager.prev.href}>
+          <ArrowLeft />
+        </Link>
+      )}
+      {pager?.next?.href && (
+        <Link
+          className={cn(
+            buttonVariants({
+              className: '[&>svg]:!size-4 ml-2 size-8 items-center',
+              size: 'sm',
+              variant: 'secondary',
+            }),
+          )}
+          href={pager.next.href}>
+          <ArrowRight />
+        </Link>
+      )}
+    </div>
+  )
+}
+
+export function getPagerForDoc(doc: DocsPagerProps['doc'], docsConfig: DocsConfig) {
+  const nav = doc.title.startsWith('/docs/charts') ? docsConfig.chartsNav : docsConfig.sidebarNav
+  const flattenedLinks = [null, ...flatten(nav ?? []), null]
+  const activeIndex = flattenedLinks.findIndex((link) => link?.href?.includes(doc.slug ?? doc.title))
+  const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null
+  const next = activeIndex !== flattenedLinks.length - 1 ? flattenedLinks[activeIndex + 1] : null
+  return {
+    next,
+    prev,
+  }
+}
+
+export function flatten(links: NavItemWithChildren[]): NavItem[] {
+  return links
+    .reduce<NavItem[]>((flat, link) => {
+      return flat.concat(link.items?.length ? flatten(link.items) : link)
+    }, [])
+    .filter((link) => !link?.disabled)
+}

package/src/components/docs/docs-sidebar.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { type DocsConfig, useDocsConfig } from '@duck-docs/context'
+import type { SidebarNavItem } from '@duck-docs/types/nav'
+import { cn } from '@gentleduck/libs/cn'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+export interface DocsSidebarNavProps {
+  config?: DocsConfig
+}
+
+export function DocsSidebarNav({ config }: DocsSidebarNavProps) {
+  const pathname = usePathname()
+  const fallbackConfig = useDocsConfig()
+  const resolvedConfig = config ?? fallbackConfig
+
+  const items = pathname?.startsWith('/charts') ? resolvedConfig.chartsNav : resolvedConfig.sidebarNav
+
+  return (
+    items?.length && (
+      <div className="flex w-full flex-col">
+        {items.map((item, index) => (
+          <CategoryItem item={item} key={index} pathname={pathname} />
+        ))}
+      </div>
+    )
+  )
+}
+
+// Memoized category component to prevent unnecessary re-renders
+const CategoryItem = ({ item, pathname }: { item: SidebarNavItem; pathname: string | null }) => {
+  return (
+    <div className="mb-2 flex flex-col gap-1">
+      <div className="flex h-[36px] w-full items-center justify-between text-start font-semibold text-sm [&>div]:w-full [&>div]:justify-between">
+        {item.title}
+        {item.label && (
+          <span className="bg- ml-2 rounded-md px-1.5 py-0.5 font-normal text-[#000000] text-sm leading-none no-underline group-hover:no-underline">
+            {item.label}
+          </span>
+        )}
+      </div>
+      <div className="border-l">
+        {item?.items?.length && <DocsSidebarNavItems items={item.items} pathname={pathname} />}
+      </div>
+    </div>
+  )
+}
+
+interface DocsSidebarNavItemsProps {
+  items: SidebarNavItem[]
+  pathname: string | null
+  className?: string
+}
+
+export function DocsSidebarNavItems({ items, pathname }: DocsSidebarNavItemsProps) {
+  return (
+    items?.length && (
+      <ul>
+        {items.map((item, index) => (
+          <DocsSidebarNavItem item={item} key={index} pathname={pathname} />
+        ))}
+      </ul>
+    )
+  )
+}
+
+export function DocsSidebarNavItem({ item, pathname }: { item: SidebarNavItem; pathname: string | null }) {
+  if (item.href && !item.disabled) {
+    return (
+      <li className={cn(pathname === item.href && 'border-primary border-l')}>
+        <Link
+          className={cn(
+            'group flex w-full items-center border-primary px-4 py-1 font-medium text-sm focus-visible:border-l focus-visible:outline-none',
+            pathname === item.href ? 'font-medium text-foreground' : 'text-muted-foreground',
+          )}
+          href={item.href}
+          rel={item.external ? 'noreferrer' : ''}
+          target={item.external ? '_blank' : ''}>
+          {item.title}
+          {item.label && (
+            <span className="ml-2 rounded-md bg-primary px-1.5 py-0.5 font-medium text-accent text-xs leading-none no-underline group-hover:no-underline">
+              {item.label}
+            </span>
+          )}
+        </Link>
+      </li>
+    )
+  }
+
+  return (
+    <span
+      className={cn(
+        'flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline',
+      )}>
+      {item.title}
+      {item.label && (
+        <span className="ml-2 rounded-md bg-muted px-1.5 py-0.5 text-muted-foreground text-sm leading-none no-underline group-hover:no-underline">
+          {item.label}
+        </span>
+      )}
+    </span>
+  )
+}

package/src/components/docs/docs-toc.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import type { TocEntry } from '@duck-docs/context'
+import { useMounted } from '@duck-docs/hooks/use-mounted'
+import { cn } from '@gentleduck/libs/cn'
+import * as React from 'react'
+
+interface TocProps {
+  toc: TocEntry[]
+}
+
+export function DashboardTableOfContents({ toc }: TocProps) {
+  const itemIds = React.useMemo(
+    () =>
+      toc
+        ? toc
+            .flatMap((item) => [item.url, item?.items?.map((item) => item.url)])
+            .flat()
+            .filter(Boolean)
+            .map((id) => id?.split('#')[1])
+        : [],
+    [toc],
+  )
+  const activeHeading = useActiveItem(itemIds)
+  const mounted = useMounted()
+
+  return mounted ? (
+    <div className="space-y-2">
+      <p className="font-medium">On This Page</p>
+      <Tree activeItem={activeHeading} tree={toc} />
+    </div>
+  ) : null
+}
+
+function useActiveItem(itemIds: (string | undefined)[]) {
+  const [activeId, setActiveId] = React.useState<string>('')
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: `0% 0% -80% 0%` },
+    )
+
+    itemIds?.forEach((id) => {
+      if (!id) {
+        return
+      }
+
+      const element = document.getElementById(id)
+      if (element) {
+        observer.observe(element)
+      }
+    })
+
+    return () => {
+      itemIds?.forEach((id) => {
+        if (!id) {
+          return
+        }
+
+        const element = document.getElementById(id)
+        if (element) {
+          observer.unobserve(element)
+        }
+      })
+    }
+  }, [itemIds])
+
+  return activeId
+}
+
+interface TreeProps {
+  tree: TocEntry[]
+  level?: number
+  activeItem?: string | null
+}
+
+function Tree({ tree, level = 1, activeItem }: TreeProps) {
+  return tree.length && level < 3 ? (
+    <ul className={cn('m-0 list-none', { 'pl-4': level !== 1 })}>
+      {tree.map((item, index) => {
+        return (
+          <li className={cn('mt-0 pt-2')} key={index}>
+            <a
+              className={cn(
+                'inline-block no-underline',
+                item.url === `#${activeItem}` ? 'font-medium text-primary' : 'text-muted-foreground text-sm',
+              )}
+              href={item.url}>
+              {item.title}
+            </a>
+            {item.items?.length ? <Tree activeItem={activeItem} level={level + 1} tree={item.items} /> : null}
+          </li>
+        )
+      })}
+    </ul>
+  ) : null
+}

package/src/components/docs/index.ts

@@ -0,0 +1,4 @@
+export * from './docs-copy-page'
+export * from './docs-pager'
+export * from './docs-sidebar'
+export * from './docs-toc'