create-unmint 1.0.0

package/template/app/components/docs/docs-sidebar.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { siteConfig } from '@/lib/theme-config'
+import type { Root, Node } from 'fumadocs-core/page-tree'
+
+interface DocsSidebarProps {
+  tree: Root
+}
+
+export function DocsSidebar({ tree }: DocsSidebarProps) {
+  const pathname = usePathname()
+
+  return (
+    <aside className="hidden lg:block w-64 shrink-0">
+      <nav className="sticky top-36 max-h-[calc(100vh-10rem)] overflow-y-auto pb-10 pr-4">
+        {/* Quick links */}
+        <div className="mb-6 pb-5 border-b border-border">
+          <ul className="space-y-2">
+            <li>
+              <Link
+                href="/docs"
+                className="flex items-center gap-3 py-1 text-sm text-[var(--accent)] font-medium hover:opacity-80 transition-opacity"
+              >
+                <span className="flex items-center justify-center w-7 h-7 rounded-md bg-[var(--accent-muted)]">
+                  <svg className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                  </svg>
+                </span>
+                Documentation
+              </Link>
+            </li>
+            {siteConfig.links.github && (
+              <li>
+                <a
+                  href={siteConfig.links.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <span className="flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 dark:bg-gray-800">
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                      <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                    </svg>
+                  </span>
+                  GitHub
+                </a>
+              </li>
+            )}
+            {siteConfig.links.support && (
+              <li>
+                <a
+                  href={siteConfig.links.support}
+                  className="flex items-center gap-3 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <span className="flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 dark:bg-gray-800">
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                  </span>
+                  Support
+                </a>
+              </li>
+            )}
+          </ul>
+        </div>
+
+        <SidebarNodes nodes={tree.children} pathname={pathname} level={0} />
+      </nav>
+    </aside>
+  )
+}
+
+interface SidebarNodesProps {
+  nodes: Node[]
+  pathname: string
+  level: number
+}
+
+function SidebarNodes({ nodes, pathname, level }: SidebarNodesProps) {
+  return (
+    <div className="space-y-1">
+      {nodes.map((node, index) => (
+        <SidebarNode key={index} node={node} pathname={pathname} level={level} />
+      ))}
+    </div>
+  )
+}
+
+interface SidebarNodeProps {
+  node: Node
+  pathname: string
+  level: number
+}
+
+function SidebarNode({ node, pathname, level }: SidebarNodeProps) {
+  if (node.type === 'separator') {
+    return (
+      <div className="pt-4 first:pt-0">
+        <h5 className="text-sm font-semibold text-foreground mb-1.5">
+          {node.name}
+        </h5>
+      </div>
+    )
+  }
+
+  if (node.type === 'folder') {
+    return (
+      <div>
+        <span className="block py-1 text-sm font-medium text-muted-foreground">
+          {node.name}
+        </span>
+        {node.children && (
+          <ul className="ml-3 mt-1 space-y-0.5 border-l border-border pl-3">
+            {node.children.map((child, index) => (
+              <SidebarNode key={index} node={child} pathname={pathname} level={level + 1} />
+            ))}
+          </ul>
+        )}
+      </div>
+    )
+  }
+
+  const isActive = pathname === node.url
+
+  return (
+    <li className="list-none">
+      <Link
+        href={node.url}
+        className={cn(
+          'flex items-center gap-2 py-1 px-2 text-sm transition-colors rounded-md',
+          isActive
+            ? 'text-[var(--accent)] font-medium bg-[var(--accent-muted)]'
+            : 'text-muted-foreground hover:text-foreground'
+        )}
+      >
+        <span>{node.name}</span>
+      </Link>
+    </li>
+  )
+}

package/template/app/components/docs/docs-toc.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { cn } from '@/lib/utils'
+import type { TOCItemType } from 'fumadocs-core/toc'
+
+interface DocsTOCProps {
+  toc: TOCItemType[]
+}
+
+export function DocsTOC({ toc }: DocsTOCProps) {
+  const [activeId, setActiveId] = useState<string>('')
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: '-100px 0px -66%' }
+    )
+
+    const headings = document.querySelectorAll('h2, h3')
+    headings.forEach((heading) => observer.observe(heading))
+
+    return () => {
+      headings.forEach((heading) => observer.unobserve(heading))
+    }
+  }, [])
+
+  if (!toc || toc.length === 0) return null
+
+  return (
+    <aside className="hidden xl:block w-56 shrink-0">
+      <nav className="sticky top-36 max-h-[calc(100vh-10rem)] overflow-y-auto">
+        <p className="text-sm font-semibold text-foreground mb-4">On this page</p>
+        <ul className="space-y-2 text-sm">
+          {toc.map((item) => (
+            <li key={item.url}>
+              <a
+                href={item.url}
+                className={cn(
+                  'block py-1 transition-colors',
+                  item.depth === 3 && 'pl-4',
+                  activeId === item.url.slice(1)
+                    ? 'text-[var(--accent)] font-medium'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {item.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  )
+}

package/template/app/components/docs/mdx/accordion.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@/lib/utils'
+
+interface AccordionGroupProps {
+  children: React.ReactNode
+}
+
+export function AccordionGroup({ children }: AccordionGroupProps) {
+  return (
+    <div className="my-6 divide-y divide-border rounded-lg border border-border">
+      {children}
+    </div>
+  )
+}
+
+interface AccordionProps {
+  title: string
+  children: React.ReactNode
+  defaultOpen?: boolean
+}
+
+export function Accordion({ title, children, defaultOpen = false }: AccordionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+
+  return (
+    <div>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center justify-between px-4 py-4 text-left font-medium text-foreground hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+      >
+        <span>{title}</span>
+        <svg
+          className={cn(
+            'w-5 h-5 text-muted-foreground transition-transform duration-200',
+            isOpen && 'rotate-180'
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      {isOpen && (
+        <div className="px-4 pb-4 text-muted-foreground [&>p]:m-0">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}

package/template/app/components/docs/mdx/callout.tsx

@@ -0,0 +1,102 @@
+import { cn } from '@/lib/utils'
+
+interface CalloutProps {
+  children: React.ReactNode
+  title?: string
+}
+
+const calloutStyles = {
+  info: {
+    container: 'bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800',
+    icon: 'text-blue-600',
+    title: 'text-blue-800 dark:text-blue-400',
+    content: 'text-blue-700 dark:text-blue-300',
+  },
+  tip: {
+    container: 'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800',
+    icon: 'text-emerald-600',
+    title: 'text-emerald-800 dark:text-emerald-400',
+    content: 'text-emerald-700 dark:text-emerald-300',
+  },
+  warning: {
+    container: 'bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800',
+    icon: 'text-amber-600',
+    title: 'text-amber-800 dark:text-amber-400',
+    content: 'text-amber-700 dark:text-amber-300',
+  },
+  note: {
+    container: 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700',
+    icon: 'text-gray-600',
+    title: 'text-gray-800 dark:text-gray-200',
+    content: 'text-gray-700 dark:text-gray-300',
+  },
+  check: {
+    container: 'bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800',
+    icon: 'text-green-600',
+    title: 'text-green-800 dark:text-green-400',
+    content: 'text-green-700 dark:text-green-300',
+  },
+}
+
+function createCallout(type: keyof typeof calloutStyles, icon: React.ReactNode, defaultTitle: string) {
+  return function Callout({ children, title }: CalloutProps) {
+    const styles = calloutStyles[type]
+    return (
+      <div className={cn('my-6 rounded-lg border p-4', styles.container)}>
+        <div className="flex gap-3">
+          <div className={cn('mt-0.5 shrink-0', styles.icon)}>{icon}</div>
+          <div className="flex-1 min-w-0">
+            {(title || defaultTitle) && (
+              <p className={cn('font-semibold mb-1', styles.title)}>
+                {title || defaultTitle}
+              </p>
+            )}
+            <div className={cn('text-sm [&>p]:m-0', styles.content)}>
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export const Info = createCallout(
+  'info',
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>,
+  'Info'
+)
+
+export const Tip = createCallout(
+  'tip',
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+  </svg>,
+  'Tip'
+)
+
+export const Warning = createCallout(
+  'warning',
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+  </svg>,
+  'Warning'
+)
+
+export const Note = createCallout(
+  'note',
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+  </svg>,
+  'Note'
+)
+
+export const Check = createCallout(
+  'check',
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>,
+  ''
+)

package/template/app/components/docs/mdx/card.tsx

@@ -0,0 +1,110 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { cn } from '@/lib/utils'
+
+interface CardProps {
+  title: string
+  icon?: string
+  image?: string
+  href?: string
+  children?: React.ReactNode
+}
+
+const iconMap: Record<string, React.ReactNode> = {
+  rocket: (
+    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
+    </svg>
+  ),
+  code: (
+    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+    </svg>
+  ),
+  book: (
+    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
+    </svg>
+  ),
+  gear: (
+    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  ),
+  plug: (
+    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+    </svg>
+  ),
+  terminal: (
+    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
+    </svg>
+  ),
+}
+
+export function Card({ title, icon, image, href, children }: CardProps) {
+  const IconComponent = icon ? iconMap[icon] : null
+
+  const content = (
+    <div
+      className={cn(
+        'group block h-full p-6 rounded-xl bg-gray-100 dark:bg-gray-800/50',
+        'hover:bg-gray-200/80 dark:hover:bg-gray-800 transition-all duration-200',
+        href && 'cursor-pointer'
+      )}
+    >
+      {image ? (
+        <div className="mb-3 w-6 h-6 relative">
+          <Image
+            src={image}
+            alt=""
+            width={24}
+            height={24}
+            className="object-contain"
+          />
+        </div>
+      ) : IconComponent && (
+        <div className="mb-3 text-[var(--accent)]">
+          {IconComponent}
+        </div>
+      )}
+      <h3 className="font-semibold text-foreground mb-2">
+        {title}
+      </h3>
+      {children && (
+        <div className="text-sm text-muted-foreground leading-relaxed [&>p]:m-0">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+
+  if (href) {
+    return <Link href={href} className="block h-full">{content}</Link>
+  }
+
+  return content
+}
+
+interface CardGroupProps {
+  cols?: number
+  children: React.ReactNode
+}
+
+export function CardGroup({ cols = 2, children }: CardGroupProps) {
+  return (
+    <div
+      className={cn(
+        'grid gap-4 my-6 auto-rows-fr',
+        cols === 1 && 'grid-cols-1',
+        cols === 2 && 'grid-cols-1 sm:grid-cols-2',
+        cols === 3 && 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+        cols === 4 && 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
+      )}
+    >
+      {children}
+    </div>
+  )
+}

package/template/app/components/docs/mdx/code-block.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@/lib/utils'
+
+interface CodeBlockProps {
+  children: React.ReactNode
+  title?: string
+  className?: string
+}
+
+export function CodeBlock({ children, title, className }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    const code = document.querySelector('.code-block-content')?.textContent
+    if (code) {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }
+
+  return (
+    <div className={cn('my-6 rounded-lg overflow-hidden border border-border', className)}>
+      {title && (
+        <div className="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-gray-800 border-b border-border">
+          <span className="text-sm font-medium text-muted-foreground">{title}</span>
+          <button
+            onClick={handleCopy}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {copied ? 'Copied!' : 'Copy'}
+          </button>
+        </div>
+      )}
+      <div className="code-block-content bg-[#fafafa] dark:bg-[#1a1a1f] overflow-x-auto">
+        {children}
+      </div>
+    </div>
+  )
+}

package/template/app/components/docs/mdx/frame.tsx

@@ -0,0 +1,14 @@
+import { cn } from '@/lib/utils'
+
+interface FrameProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function Frame({ children, className }: FrameProps) {
+  return (
+    <div className={cn('my-6 rounded-lg overflow-hidden border border-border', className)}>
+      {children}
+    </div>
+  )
+}