create-unmint 1.0.0

package/template/app/components/docs/theme-toggle.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return <div className="w-9 h-9" />
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="flex items-center justify-center w-9 h-9 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      aria-label="Toggle theme"
+    >
+      {theme === 'dark' ? (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+      ) : (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+      )}
+    </button>
+  )
+}

package/template/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,139 @@
+import { source } from '@/lib/docs-source'
+import { notFound } from 'next/navigation'
+import { DocsTOC } from '../../components/docs/docs-toc'
+import { DocsPager } from '../../components/docs/docs-pager'
+import { getMDXComponents } from '../../components/docs/mdx'
+import { findNeighbour } from 'fumadocs-core/page-tree'
+import type { Metadata } from 'next'
+import type { Root, Node } from 'fumadocs-core/page-tree'
+import { siteConfig, themeConfig } from '@/lib/theme-config'
+
+interface PageProps {
+  params: Promise<{ slug?: string[] }>
+}
+
+// Find the section separator that precedes this page in the tree
+function findSectionName(tree: Root, pageUrl: string): string {
+  let lastSeparator = 'Documentation'
+
+  function traverse(nodes: Node[]): string | null {
+    for (const node of nodes) {
+      if (node.type === 'separator') {
+        // node.name can be ReactNode, convert to string safely
+        lastSeparator = typeof node.name === 'string' ? node.name : 'Documentation'
+      } else if (node.type === 'page' && node.url === pageUrl) {
+        return lastSeparator
+      } else if (node.type === 'folder' && node.children) {
+        const result = traverse(node.children)
+        if (result) return result
+      }
+    }
+    return null
+  }
+
+  return traverse(tree.children) || lastSeparator
+}
+
+export default async function DocsPage({ params }: PageProps) {
+  const { slug } = await params
+  const page = source.getPage(slug)
+
+  if (!page) notFound()
+
+  const MDXContent = page.data.body
+  const toc = page.data.toc
+
+  // Get prev/next navigation using fumadocs utility
+  const tree = source.pageTree
+  const neighbours = findNeighbour(tree, page.url)
+
+  // Find section name for the header banner
+  const sectionName = findSectionName(tree, page.url)
+
+  return (
+    <div className="flex gap-8">
+      {/* Main content */}
+      <article className="flex-1 min-w-0 max-w-3xl">
+        {/* Header banner */}
+        <header className="mb-8 pb-6 border-b border-border">
+          <p className="text-sm text-[var(--accent)] font-medium mb-2">
+            {sectionName}
+          </p>
+          <h1 className="text-3xl font-bold text-foreground">
+            {page.data.title}
+          </h1>
+          {page.data.description && (
+            <p className="mt-3 text-base text-muted-foreground">
+              {page.data.description}
+            </p>
+          )}
+        </header>
+
+        {/* MDX content */}
+        <div className="prose prose-slate dark:prose-invert max-w-none">
+          <MDXContent components={getMDXComponents()} />
+        </div>
+
+        <DocsPager
+          previous={neighbours.previous ? {
+            name: typeof neighbours.previous.name === 'string' ? neighbours.previous.name : 'Previous',
+            url: neighbours.previous.url
+          } : undefined}
+          next={neighbours.next ? {
+            name: typeof neighbours.next.name === 'string' ? neighbours.next.name : 'Next',
+            url: neighbours.next.url
+          } : undefined}
+        />
+      </article>
+
+      {/* Table of contents */}
+      <DocsTOC toc={toc} />
+    </div>
+  )
+}
+
+export async function generateStaticParams() {
+  return source.generateParams()
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params
+  const page = source.getPage(slug)
+
+  if (!page) return {}
+
+  const tree = source.pageTree
+  const section = findSectionName(tree, page.url)
+  const title = page.data.title
+  const description = page.data.description
+
+  // Build OG image URL with query params
+  const ogImageUrl = new URL(`${siteConfig.url}/api/og`)
+  ogImageUrl.searchParams.set('title', title)
+  ogImageUrl.searchParams.set('section', section)
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: 'article',
+      url: `${siteConfig.url}${page.url}`,
+      images: [
+        {
+          url: ogImageUrl.toString(),
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: [ogImageUrl.toString()],
+    },
+  }
+}

package/template/app/docs/layout.tsx

@@ -0,0 +1,98 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { source } from '@/lib/docs-source'
+import { DocsSidebar } from '../components/docs/docs-sidebar'
+import { SearchTrigger } from '../components/docs/search-dialog'
+import { ThemeToggle } from '../components/docs/theme-toggle'
+import { siteConfig } from '@/lib/theme-config'
+
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const tree = source.pageTree
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      {/* Header */}
+      <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex h-16 items-center justify-between">
+            {/* Logo */}
+            <Link href="/" className="flex items-center gap-2">
+              {siteConfig.logo.src && (
+                <Image
+                  src={siteConfig.logo.src}
+                  alt={siteConfig.logo.alt}
+                  width={siteConfig.logo.width}
+                  height={siteConfig.logo.height}
+                  className="dark:invert"
+                />
+              )}
+              <span className="font-semibold text-lg">{siteConfig.name}</span>
+            </Link>
+
+            {/* Center: Search */}
+            <div className="flex-1 flex justify-center px-4">
+              <SearchTrigger />
+            </div>
+
+            {/* Right: Links */}
+            <div className="flex items-center gap-2">
+              {siteConfig.links.github && (
+                <a
+                  href={siteConfig.links.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="p-2 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <svg className="w-5 h-5" 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>
+                </a>
+              )}
+              <ThemeToggle />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <div className="flex-1">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="flex gap-8">
+            <DocsSidebar tree={tree} />
+            <main className="flex-1 min-w-0">
+              {children}
+            </main>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="border-t border-border py-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
+            <p className="text-sm text-muted-foreground">
+              {siteConfig.footer.copyright}
+            </p>
+            <div className="flex gap-4">
+              {siteConfig.footer.links.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}

package/template/app/globals.css

@@ -0,0 +1,151 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* Brand accent colors - customize these for your brand */
+  --accent: #0891b2;
+  --accent-foreground: #ffffff;
+  --accent-muted: rgba(8, 145, 178, 0.1);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+
+  /* Brand accent colors - brighter for dark mode */
+  --accent: #22d3ee;
+  --accent-foreground: #0f172a;
+  --accent-muted: rgba(34, 211, 238, 0.1);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Syntax highlighting - Shiki integration */
+pre {
+  overflow-x: auto;
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+pre code {
+  display: block;
+  min-width: max-content;
+  background: transparent !important;
+  border: none !important;
+  padding: 1rem !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  color: inherit !important;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+code {
+  font-family: var(--font-mono);
+}
+
+/* Shiki dual-theme support */
+pre code span {
+  color: var(--shiki-light);
+}
+
+.dark pre code span {
+  color: var(--shiki-dark);
+}
+
+/* Code block line highlighting */
+pre code [data-highlighted-line] {
+  background-color: rgba(0, 0, 0, 0.05);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+}
+
+.dark pre code [data-highlighted-line] {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: oklch(0.556 0 0 / 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.556 0 0 / 0.5);
+}

package/template/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next'
+import { ThemeProvider } from './providers/theme-provider'
+import { siteConfig } from '@/lib/theme-config'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

package/template/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function Home() {
+  redirect('/docs')
+}

package/template/app/providers/theme-provider.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ThemeProviderProps } from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/template/content/docs/components.mdx

@@ -0,0 +1,82 @@
+---
+title: Components
+description: Pre-built MDX components for beautiful documentation
+---
+
+Unmint includes a rich set of MDX components that you can use in your documentation pages.
+
+## Cards
+
+Use cards to highlight links or features:
+
+<CardGroup cols={2}>
+  <Card title="Quick Start" icon="rocket" href="/docs/quickstart">
+    Get started in under 5 minutes
+  </Card>
+  <Card title="Components" icon="code" href="/docs/components">
+    Explore available components
+  </Card>
+</CardGroup>
+
+### Available Icons
+
+Cards support these built-in icons: `rocket`, `code`, `book`, `gear`, `plug`, `terminal`.
+
+## Callouts
+
+Callouts draw attention to important information:
+
+<Info>
+This is an info callout for general information.
+</Info>
+
+<Tip>
+This is a tip callout for helpful suggestions.
+</Tip>
+
+<Warning>
+This is a warning callout for potential issues.
+</Warning>
+
+## Steps
+
+Use steps for sequential instructions:
+
+<Steps>
+  <Step title="First Step">
+    Do this first.
+  </Step>
+  <Step title="Second Step">
+    Then do this.
+  </Step>
+</Steps>
+
+## Tabs
+
+Organize related content into tabs:
+
+<Tabs>
+  <Tab title="npm">
+    ```bash
+    npm install my-package
+    ```
+  </Tab>
+  <Tab title="yarn">
+    ```bash
+    yarn add my-package
+    ```
+  </Tab>
+</Tabs>
+
+## Accordions
+
+Collapse content that isn't always needed:
+
+<AccordionGroup>
+  <Accordion title="What is Unmint?">
+    Unmint is a free, open-source documentation system.
+  </Accordion>
+  <Accordion title="Is it really free?">
+    Yes! MIT licensed and free to use.
+  </Accordion>
+</AccordionGroup>

package/template/content/docs/customization.mdx

@@ -0,0 +1,34 @@
+---
+title: Customization
+description: Advanced customization options
+---
+
+## Navigation Structure
+
+Edit `content/docs/meta.json`:
+
+```json
+{
+  "pages": [
+    "index",
+    "quickstart",
+    "---Getting Started---",
+    "installation"
+  ]
+}
+```
+
+- **Page references**: Filename without `.mdx`
+- **Separators**: `"---Section Name---"` for headers
+
+## Adding Components
+
+Create custom MDX components in `app/components/docs/mdx/`:
+
+```tsx
+export function MyComponent({ children }) {
+  return <div className="my-component">{children}</div>
+}
+```
+
+Then register in `app/components/docs/mdx/index.tsx`.

package/template/content/docs/deployment.mdx

@@ -0,0 +1,28 @@
+---
+title: Deployment
+description: Deploy your docs to Vercel, Netlify, or any static host
+---
+
+Unmint can be deployed anywhere that supports Next.js.
+
+## Vercel (Recommended)
+
+<Steps>
+  <Step title="Push to GitHub">
+    Push your repository to GitHub.
+  </Step>
+  <Step title="Import to Vercel">
+    Go to vercel.com/new and import your repository.
+  </Step>
+  <Step title="Deploy">
+    Vercel will automatically detect Next.js and deploy.
+  </Step>
+</Steps>
+
+## Build Commands
+
+```bash
+npm run dev      # Development
+npm run build    # Production build
+npm run start    # Start production server
+```