@gentleduck/docs 0.0.1

package/src/components/layouts/site-header/index.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import { CommandMenu } from '@duck-docs/components/layouts/command-menu'
+import { MainNav } from '@duck-docs/components/main-nav'
+import { MobileNav } from '@duck-docs/components/mobile-nav'
+import { ModeSwitcher } from '@duck-docs/components/mode-toggle'
+import { useSiteConfig } from '@duck-docs/context'
+import { cn } from '@gentleduck/libs/cn'
+import { buttonVariants } from '@gentleduck/registry-ui-duckui/button'
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+import { CaseUpper, Github, Twitter, Type } from 'lucide-react'
+import Link from 'next/link'
+import React from 'react'
+import { HeaderContainer, HeaderRoot } from './header-shell'
+
+export function SiteHeader() {
+  const siteConfig = useSiteConfig()
+
+  return (
+    <HeaderRoot className="border-border/50 border-b bg-background/95 backdrop-blur-sm supports-[backdrop-filter]:bg-background/70">
+      <HeaderContainer>
+        <MainNav />
+        <MobileNav />
+        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+          <div className="w-full flex-1 md:w-auto md:flex-none">
+            <CommandMenu />
+          </div>
+          <nav className="flex items-center">
+            <GitHubStarsButton />
+            <FontStyleButton />
+            {siteConfig.links?.twitter ? (
+              <Link aria-label="Twitter" href={siteConfig.links.twitter} rel="noreferrer" target="_blank">
+                <div
+                  className={cn(
+                    buttonVariants({
+                      size: 'icon',
+                      variant: 'ghost',
+                    }),
+                  )}>
+                  <Twitter />
+                </div>
+              </Link>
+            ) : null}
+            <ModeSwitcher />
+          </nav>
+        </div>
+      </HeaderContainer>
+    </HeaderRoot>
+  )
+}
+
+function GitHubStarsButton() {
+  const [stars, setStars] = React.useState<number | null>(null)
+  const siteConfig = useSiteConfig()
+  const repoFromUrl = siteConfig.links?.github?.replace('https://github.com/', '').replace(/\/$/, '')
+  const repo = siteConfig.githubRepo ?? repoFromUrl
+
+  React.useEffect(() => {
+    async function fetchStars() {
+      try {
+        if (!repo) {
+          return
+        }
+        const res = await fetch(`https://api.github.com/repos/${repo}`)
+        const data = await res.json()
+        setStars(data.stargazers_count)
+      } catch (err) {
+        console.error('Failed to fetch stars:', err)
+      }
+    }
+    fetchStars()
+  }, [])
+
+  if (!siteConfig.links?.github) {
+    return null
+  }
+
+  return (
+    <Link aria-label="GitHub" href={siteConfig.links.github} rel="noopener noreferrer" target="_blank">
+      <div
+        className={cn(
+          buttonVariants({
+            className: 'size-auto h-8 w-16 font-medium text-sm',
+            size: 'icon',
+            variant: 'ghost',
+          }),
+        )}>
+        <Github />
+        {stars !== null ? stars.toLocaleString() : '...'}
+      </div>
+    </Link>
+  )
+}
+const fontAtom = atomWithStorage('fontType', 'mono')
+
+export function FontStyleButton() {
+  const [fontType, setFontType] = useAtom(fontAtom)
+  const firstRender = React.useRef(true)
+
+  React.useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false
+      return
+    }
+
+    const family = fontType === 'sans' ? 'var(--font-sans-geist)' : 'var(--font-mono-geist)'
+
+    document.documentElement.style.setProperty('font-family', family, 'important')
+  }, [fontType])
+
+  return (
+    <div
+      className={cn(buttonVariants({ size: 'icon', variant: 'ghost' }))}
+      onClick={() => setFontType(fontType === 'mono' ? 'sans' : 'mono')}>
+      {fontType === 'mono' ? <Type /> : <CaseUpper />}
+    </div>
+  )
+}
+
+export { HeaderBrand, HeaderContainer, HeaderRoot, HeaderSection } from './header-shell'

package/src/components/layouts/tailwind-indicator/index.tsx

@@ -0,0 +1,16 @@
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === 'production') return null
+
+  return (
+    <div
+      className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-white text-xs"
+      data-tailwind-indicator="">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  )
+}

package/src/components/main-nav.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { useDocsConfig } from '@duck-docs/context'
+import { cn } from '@gentleduck/libs/cn'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { HeaderBrand } from './layouts/site-header/header-shell'
+
+export function MainNav() {
+  const pathname = usePathname()
+  const { mainNav } = useDocsConfig()
+
+  return (
+    <div className="mr-4 hidden md:flex">
+      <HeaderBrand className="mr-4 lg:mr-6" />
+      {mainNav?.length ? (
+        <nav className="flex items-center gap-4 text-sm xl:gap-6">
+          {mainNav.map((item) => (
+            <Link
+              className={cn(
+                'font-medium transition-colors hover:text-foreground/80',
+                pathname === item.href ? 'text-foreground' : 'text-foreground/80',
+              )}
+              href={item.href ?? '#'}
+              key={item.href ?? item.title}>
+              {item.title}
+            </Link>
+          ))}
+        </nav>
+      ) : null}
+    </div>
+  )
+}

package/src/components/mdx/mdx-components/callout.tsx

@@ -0,0 +1,17 @@
+import { Alert, AlertDescription, AlertTitle } from '@gentleduck/registry-ui-duckui/alert'
+
+interface CalloutProps {
+  icon?: string
+  title?: string
+  children?: React.ReactNode
+}
+
+export function Callout({ title, children, icon, ...props }: CalloutProps) {
+  return (
+    <Alert {...props}>
+      {icon && <span className="mr-4 text-2xl">{icon}</span>}
+      {title && <AlertTitle>{title}</AlertTitle>}
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  )
+}

package/src/components/mdx/mdx-components/code/code-block-wrapper.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import type * as React from 'react'
+
+export function CodeBlockWrapper({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn(className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/components/mdx/mdx-components/code/code-block.tsx

@@ -0,0 +1,30 @@
+import { cn } from '@gentleduck/libs/cn'
+
+interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  __rawString__?: boolean
+}
+
+export function CodeBlock({ className, __rawString__, ...props }: CodeProps) {
+  if (__rawString__) {
+    return (
+      <code
+        className={cn(
+          'relative rounded-sm bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm dark:bg-muted',
+          className,
+        )}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <code
+      className={cn(
+        'relative rounded-sm px-[0.3rem] py-[0.2rem] font-mono text-sm',
+        'grid min-w-full break-words rounded-none border-0 bg-transparent p-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/components/mdx/mdx-components/code/code-preview.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { Icons } from '@duck-docs/components/icons'
+import { useLiftMode } from '@duck-docs/hooks/use-lift-mode'
+import { cn } from '@gentleduck/libs/cn'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@gentleduck/registry-ui-duckui/resizable'
+import { Tabs, TabsContent } from '@gentleduck/registry-ui-duckui/tabs'
+import React from 'react'
+import type { ImperativePanelHandle } from 'react-resizable-panels'
+
+type Block = {
+  name: string
+  container?: {
+    height?: number
+  }
+  highlightedCode: string
+}
+
+export function CodePreview({ block }: { block: Block & { hasLiftMode: boolean } }) {
+  const { isLiftMode } = useLiftMode(block.name)
+  const [isLoading, setIsLoading] = React.useState(true)
+  const ref = React.useRef<ImperativePanelHandle>(null)
+
+  return (
+    <Tabs
+      className="relative grid w-full scroll-m-20 gap-4"
+      defaultValue="preview"
+      id={block.name}
+      style={
+        {
+          '--container-height': block.container?.height,
+        } as React.CSSProperties
+      }>
+      <TabsContent
+        className="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted"
+        value="preview">
+        <ResizablePanelGroup className="relative z-10" direction="horizontal">
+          <ResizablePanel
+            className={cn(
+              'relative rounded-lg border bg-background',
+              isLiftMode ? 'border-border/50' : 'border-border',
+            )}
+            defaultSize={100}
+            minSize={30}
+            ref={ref}>
+            {isLoading ? (
+              <div className="absolute inset-0 z-10 flex h-[--container-height] w-full items-center justify-center gap-2 bg-background text-muted-foreground text-sm">
+                <Icons.spinner className="h-4 w-4 animate-spin" />
+                Loading...
+              </div>
+            ) : null}
+            <iframe
+              allowTransparency
+              className="chunk-mode relative z-20 w-full bg-background"
+              height={block.container?.height ?? 450}
+              onLoad={() => {
+                setIsLoading(false)
+              }}
+              src={`/blocks/${block.name}`}
+            />
+          </ResizablePanel>
+          <ResizableHandle
+            className={cn(
+              'relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:-translate-y-1/2 after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block',
+              isLiftMode && 'invisible',
+            )}
+          />
+          <ResizablePanel defaultSize={0} minSize={0} />
+        </ResizablePanelGroup>
+      </TabsContent>
+      <TabsContent value="code">
+        <div
+          className="w-full overflow-hidden rounded-md [&_pre]:my-0 [&_pre]:h-[--container-height] [&_pre]:overflow-auto [&_pre]:whitespace-break-spaces [&_pre]:p-6 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: block.highlightedCode }}
+          data-rehype-pretty-code-fragment
+        />
+      </TabsContent>
+    </Tabs>
+  )
+}

package/src/components/mdx/mdx-components/code/component-preview.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import { CopyButton } from '@duck-docs/components/copy-button'
+import { Icons } from '@duck-docs/components/icons'
+import { useRegistryIndex } from '@duck-docs/context'
+import { cn } from '@gentleduck/libs/cn'
+import { Button } from '@gentleduck/registry-ui-duckui/button'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gentleduck/registry-ui-duckui/tabs'
+import { Crown } from 'lucide-react'
+import * as React from 'react'
+
+interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string
+  extractClassname?: boolean
+  extractedClassNames?: string
+  align?: 'center' | 'start' | 'end'
+  description?: string
+  hideCode?: boolean
+  showSettings?: boolean
+}
+
+export function ComponentPreview({
+  name,
+  children,
+  className,
+  extractClassname,
+  extractedClassNames,
+  align = 'center',
+  description,
+  hideCode = false,
+  showSettings = false,
+  ...props
+}: ComponentPreviewProps) {
+  const Codes = React.Children.toArray(children) as React.ReactElement[]
+  const Code = Codes[0]
+  const registryIndex = useRegistryIndex()
+
+  const Preview = React.useMemo(() => {
+    if (!registryIndex) {
+      return <p className="text-muted-foreground text-sm">Registry index is not configured for this docs app.</p>
+    }
+
+    const Component = registryIndex[name]?.component
+
+    if (!Component) {
+      return (
+        <p className="text-muted-foreground text-sm">
+          Component <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">{name}</code>{' '}
+          not found in registry.
+        </p>
+      )
+    }
+
+    return <Component />
+  }, [name, registryIndex])
+
+  const codeString = React.useMemo(() => {
+    if (
+      // ! FIX:
+      //  @ts-ignore 'Code.props' is of type 'unknown'.ts(18046)
+      typeof Code?.props['data-rehype-pretty-code-fragment'] !== 'undefined'
+    ) {
+      const Button = React.Children.toArray(
+        // ! FIX:
+        //  @ts-expect-error Property 'children' does not exist on type '{}'.ts(2339)
+        Code.props.children,
+      ) as React.ReactElement[]
+      // ! FIX:
+      //  @ts-expect-error Property '__rawString__' does not exist on type '{}'.ts(2339)
+      return Button[1]?.props?.value || Button[1]?.props?.__rawString__ || null
+    }
+  }, [Code])
+
+  return (
+    <div
+      className={cn('group relative my-4 flex flex-col [&_div[data-slot="placeholder"]]:h-[512px]', className)}
+      {...props}>
+      <Tabs className="relative mr-auto w-full" defaultValue="preview">
+        <div className="flex items-center justify-between">
+          {!hideCode && (
+            <TabsList className="w-full justify-start overflow-x-auto rounded-none border-b bg-transparent p-0 [&_button]:shadow-none">
+              {TABS.map((tab, idx) => (
+                <TabsTrigger
+                  className="cursor-pointer rounded-none border-b-[2px] border-b-transparent px-12 py-2 [&[aria-selected='true']]:border-b-primary [&[aria-selected='true']]:shadow-none [&_input]:focus-visible:shadow-none [&_input]:focus-visible:ring-transparent [&_input]:focus-visible:ring-offset-0"
+                  key={idx}
+                  value={tab.value}>
+                  {tab.name}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          )}
+        </div>
+        <TabsContent className="relative min-w-2/5 rounded-md border" value="preview">
+          <div className="absolute flex w-full items-center justify-between p-4">
+            <span className="text-muted-foreground text-sm">{}</span>
+            <div className="flex items-center gap-2">
+              <CopyButton value={codeString} variant="outline" />
+            </div>
+          </div>
+          <div
+            className={cn('preview flex h-[500px] w-full justify-center overflow-auto p-10', {
+              'items-center': align === 'center',
+              'items-end': align === 'end',
+              'items-start': align === 'start',
+            })}
+            duck-preview="">
+            <React.Suspense
+              fallback={
+                <div className="flex w-full items-center justify-center text-muted-foreground text-sm">
+                  <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                  Loading...
+                </div>
+              }>
+              {Preview}
+            </React.Suspense>
+          </div>
+        </TabsContent>
+        <TabsContent
+          className="[&_[data-rehype-pretty-code-fragment]]:!m-0 relative mt-2 [&>div>div>button]:top-3 [&>div>div>button]:right-3 [&>div>div]:mb-0 [&>div]:rounded-lg [&>div]:border [&>div]:bg-muted/40 [&_pre]:h-[502px]"
+          value="code">
+          {Code}
+        </TabsContent>
+        <BuildTab />
+      </Tabs>
+    </div>
+  )
+}
+
+export const BuildTab = () => {
+  return (
+    <TabsContent className="relative overflow-hidden" value="build">
+      <div className="h-[500px] overflow-hidden rounded-lg">
+        <img alt="build" className="object-cover" src="/builder.png" />
+      </div>
+
+      <div className="absolute inset-0 top-0 left-0 flex h-[500px] flex-col items-center justify-center gap-4 rounded-md bg-zinc-700/10 px-4 py-2 backdrop-blur-sm dark:bg-zinc-700/50">
+        <div className="flex items-center gap-4">
+          <Button className="rounded-sm font-bold" size={'sm'}>
+            <Crown />
+            <span>Coming soon</span>
+          </Button>
+        </div>
+      </div>
+    </TabsContent>
+  )
+}
+
+export const TABS = [
+  {
+    name: 'Preview',
+    value: 'preview',
+  },
+  {
+    name: 'Code',
+    value: 'code',
+  },
+  // {
+  //   name: 'Benchmark',
+  //   value: 'benchmark',
+  // },
+]

package/src/components/mdx/mdx-components/code/component-source.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { Separator } from '@gentleduck/registry-ui-duckui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gentleduck/registry-ui-duckui/tabs'
+import type React from 'react'
+import { FigcaptionBlock } from './figcaption-block'
+
+interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode[]
+  src: string
+}
+
+/** NOTE: the props are not used */
+export function ComponentSource({ children, className, ...props }: ComponentSourceProps) {
+  if (!children.length) {
+    return children
+  }
+
+  const defaultValue = String((children[0] as any).props.children[0].props.__rawString__)
+    .split('\n')[0]
+    ?.replace('//', '') as string
+
+  return (
+    <Tabs className="rounded-md border border-border bg-muted/40" defaultValue={defaultValue}>
+      <TabsList className="w-[622px] justify-start overflow-x-auto bg-transparent px-2 py-2">
+        {children.map((item, idx) => {
+          const value = String((item as any).props.children[0].props.__rawString__)
+            .split('\n')[0]
+            ?.replace('//', '') as string
+          return (
+            <TabsTrigger className="aria-[selected='true']:bg-muted" key={idx} value={value}>
+              {value}
+            </TabsTrigger>
+          )
+        })}
+      </TabsList>
+      <Separator />
+      {children.map((item, idx) => {
+        const value = String((item as any).props.children[0].props.__rawString__)
+          .split('\n')[0]
+          ?.replace('//', '') as string
+        return (
+          <TabsContent
+            className="relative m-0 bg-transparent focus-visible:shadow-none focus-visible:outline-none focus-visible:ring-0 [&>div>div>button]:top-1 [&>div>div>button]:right-1 [&>div>div]:m-0"
+            key={idx}
+            value={value}>
+            <FigcaptionBlock>{value}</FigcaptionBlock>
+            {item}
+          </TabsContent>
+        )
+      })}
+    </Tabs>
+  )
+}

package/src/components/mdx/mdx-components/code/figcaption-block.tsx

@@ -0,0 +1,25 @@
+import { getIconForLanguageExtension } from '@duck-docs/components/icons'
+import { cn } from '@gentleduck/libs/cn'
+import { Separator } from '@gentleduck/registry-ui-duckui/separator'
+
+export function FigcaptionBlock({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  const language = children?.toString().split('.').pop() ?? 'terminal'
+
+  const Icon = getIconForLanguageExtension(language)
+
+  return (
+    <>
+      <figcaption {...props} className="rounded-lg p-2">
+        <div
+          className={cn(
+            className,
+            'flex items-center gap-2 font-mono text-muted-foreground text-sm ltr:pl-1.5 rtl:pr-1.5 [&_svg]:h-4 [&_svg]:w-4',
+          )}>
+          {Icon}
+          {children}
+        </div>
+      </figcaption>
+      <Separator />
+    </>
+  )
+}

package/src/components/mdx/mdx-components/code/index.ts

@@ -0,0 +1,7 @@
+export * from './code-block'
+export * from './code-block-wrapper'
+export * from './code-preview'
+export * from './component-preview'
+export * from './component-source'
+export * from './figcaption-block'
+export * from './pre-block'

package/src/components/mdx/mdx-components/code/pre-block.tsx

@@ -0,0 +1,103 @@
+import { CopyButton } from '@duck-docs/components/copy-button'
+import type { Event } from '@duck-docs/lib/events'
+import type { NpmCommands } from '@duck-docs/types/unist'
+import { cn } from '@gentleduck/libs/cn'
+import { Separator } from '@gentleduck/registry-ui-duckui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gentleduck/registry-ui-duckui/tabs'
+import { Terminal } from 'lucide-react'
+
+export type CodeBlockProps = React.HTMLAttributes<HTMLPreElement> & {
+  __rawString__?: string
+  __withMeta__?: boolean
+  __title__?: string
+  __event__?: Event['name']
+} & NpmCommands
+
+export function PreBlock({
+  className,
+  __rawString__,
+  __npmCommand__,
+  __yarnCommand__,
+  __pnpmCommand__,
+  __bunCommand__,
+  __withMeta__,
+  __event__,
+  __title__,
+  children,
+  ...props
+}: CodeBlockProps) {
+  return (
+    <div data-theme={(props as any)['data-theme']}>
+      {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__ ? (
+        <ShellCommand
+          __bunCommand__={__bunCommand__}
+          __npmCommand__={__npmCommand__}
+          __pnpmCommand__={__pnpmCommand__}
+          __yarnCommand__={__yarnCommand__}
+          {...props}
+        />
+      ) : (
+        <>
+          {__rawString__ && !__npmCommand__ && (
+            <CopyButton
+              className={cn('absolute top-2 right-2 bg-muted [&_svg]:text-muted-foreground', __withMeta__ && 'top-16')}
+              event={__event__}
+              value={__rawString__}
+              variant={'outline'}
+            />
+          )}
+          <pre
+            className={cn(
+              'max-h-[650px] overflow-auto rounded-lg py-4 focus-visible:shadow-none focus-visible:outline-none',
+              className,
+            )}
+            {...props}>
+            {children}
+          </pre>
+        </>
+      )}
+    </div>
+  )
+}
+
+export function ShellCommand({ __npmCommand__, __yarnCommand__, __pnpmCommand__, __bunCommand__ }: NpmCommands) {
+  const commands = {
+    __bunCommand__,
+    __npmCommand__,
+    __pnpmCommand__,
+    __yarnCommand__,
+  }
+  return (
+    <Tabs className="rounded-md" defaultValue="__npmCommand__">
+      <TabsList className="w-fit justify-start bg-transparent py-2">
+        <div className="flex size-4 flex-col items-center justify-center bg-foreground/65 ltr:mr-2 ltr:ml-3 rtl:mr-3 rtl:ml-2">
+          <Terminal className="size-4 text-background" />
+        </div>
+        {Object.keys(commands).map((command, idx) => {
+          return (
+            <TabsTrigger className="aria-[selected='true']:bg-muted" key={idx} value={command}>
+              {command.replace('__', '').replace('Command', '').replace('__', '')}
+            </TabsTrigger>
+          )
+        })}
+      </TabsList>
+      <Separator />
+      {Object.entries(commands).map(([commandKey, command], idx) => {
+        return (
+          <TabsContent className="[&_pre]:max-w-[620px] [&_pre]:overflow-auto" key={idx} value={commandKey}>
+            <CopyButton
+              className={cn(
+                'absolute top-1.5 right-1.5 border-none bg-transparent [&_svg]:size-5 [&_svg]:text-muted-foreground',
+              )}
+              value={command as string}
+              variant={'outline'}
+            />
+            <pre className="p-4 pt-2 text-muted-foreground text-sm focus-visible:shadow-none focus-visible:outline-none">
+              {command}
+            </pre>
+          </TabsContent>
+        )
+      })}
+    </Tabs>
+  )
+}