create-unmint 1.0.0

package/template/README.md

@@ -0,0 +1,278 @@
+# Unmint
+
+A free, open-source Mintlify-style documentation system built with Next.js and Fumadocs.
+
+![License](https://img.shields.io/badge/license-MIT-blue.svg)
+
+## What is Unmint?
+
+Unmint provides a beautiful, customizable documentation experience similar to [Mintlify](https://mintlify.com), but completely free and open source. It's designed to be forked, customized, and self-hosted.
+
+### Features
+
+- **Beautiful out-of-the-box** - Professional styling without configuration
+- **MDX Components** - Cards, callouts, tabs, steps, accordions, and more
+- **Built-in Search** - Full-text search powered by Fumadocs
+- **Dynamic OG Images** - Auto-generated social preview images
+- **Dark Mode** - Seamless light/dark theme switching
+- **Easy Theming** - Single config file for all customization
+- **SEO Optimized** - Automatic meta tags and sitemap
+
+### What Unmint is NOT
+
+- A hosted SaaS (you deploy it yourself)
+- A replacement for all Mintlify features (no built-in analytics, AI search, etc.)
+- A no-code solution (basic Next.js knowledge helpful)
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js 18+
+- npm, yarn, or pnpm
+
+### Installation
+
+The fastest way to get started is with our CLI:
+
+```bash
+npx create-unmint@latest my-docs
+```
+
+This will prompt you for project configuration and set up everything automatically.
+
+#### CLI Options
+
+```bash
+# Create with all defaults (no prompts)
+npx create-unmint@latest my-docs --yes
+
+# Update an existing project to latest
+cd my-docs
+npx create-unmint@latest --update
+```
+
+#### Manual Installation
+
+You can also clone and customize manually:
+
+```bash
+# Clone the repository
+git clone https://github.com/gregce/unmint.git my-docs
+cd my-docs
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see your docs.
+
+## Project Structure
+
+```
+my-docs/
+├── app/
+│   ├── docs/                 # Documentation routes
+│   │   ├── layout.tsx        # Docs layout (header, sidebar, footer)
+│   │   └── [[...slug]]/      # Dynamic page rendering
+│   ├── api/
+│   │   ├── search/           # Search API endpoint
+│   │   └── og/               # OG image generation
+│   └── components/
+│       └── docs/             # Docs-specific components
+│           └── mdx/          # MDX components (Card, Callout, etc.)
+├── content/
+│   └── docs/                 # Your MDX documentation files
+│       ├── index.mdx         # Homepage
+│       ├── meta.json         # Navigation structure
+│       └── *.mdx             # Your pages
+├── lib/
+│   ├── theme-config.ts       # ⭐ Customize your theme here
+│   ├── docs-source.ts        # Fumadocs source config
+│   └── utils.ts              # Utility functions
+├── public/                   # Static assets (logo, images)
+├── source.config.ts          # MDX/Fumadocs configuration
+└── package.json
+```
+
+## Customization
+
+### 1. Update Site Info
+
+Edit `lib/theme-config.ts`:
+
+```typescript
+export const siteConfig = {
+  name: 'My Docs',
+  description: 'Documentation for My Project',
+  url: 'https://docs.example.com',
+  logo: {
+    src: '/logo.png',
+    alt: 'My Project',
+    width: 32,
+    height: 32,
+  },
+  links: {
+    github: 'https://github.com/your-org/your-repo',
+    discord: 'https://discord.gg/your-invite',
+    support: 'mailto:support@example.com',
+  },
+}
+```
+
+### 2. Customize Colors
+
+```typescript
+export const themeConfig = {
+  colors: {
+    light: {
+      accent: '#0891b2',  // Your brand color
+    },
+    dark: {
+      accent: '#22d3ee',  // Brighter for dark mode
+    },
+  },
+}
+```
+
+### 3. Add Your Logo
+
+Place your logo in `public/logo.png` and update `siteConfig.logo.src`.
+
+### 4. Write Documentation
+
+Create MDX files in `content/docs/`:
+
+```mdx
+---
+title: My Page
+description: A description of my page
+---
+
+# Hello World
+
+This is my documentation page!
+
+<Tip>
+You can use all the built-in components.
+</Tip>
+```
+
+### 5. Configure Navigation
+
+Edit `content/docs/meta.json`:
+
+```json
+{
+  "title": "Documentation",
+  "pages": [
+    "index",
+    "quickstart",
+    "---Getting Started---",
+    "installation",
+    "configuration",
+    "---Guides---",
+    "deployment"
+  ]
+}
+```
+
+## Available Components
+
+### Cards
+
+```mdx
+<CardGroup cols={2}>
+  <Card title="Quick Start" icon="rocket" href="/docs/quickstart">
+    Get started in 5 minutes
+  </Card>
+  <Card title="API Reference" icon="code" href="/docs/api">
+    Explore our API
+  </Card>
+</CardGroup>
+```
+
+### Callouts
+
+```mdx
+<Info>Informational message</Info>
+<Tip>Helpful tip</Tip>
+<Warning>Warning message</Warning>
+<Note>Additional note</Note>
+<Check>Success message</Check>
+```
+
+### Steps
+
+```mdx
+<Steps>
+  <Step title="Install">
+    Run `npm install`
+  </Step>
+  <Step title="Configure">
+    Edit your config file
+  </Step>
+</Steps>
+```
+
+### Tabs
+
+```mdx
+<Tabs>
+  <Tab title="npm">npm install package</Tab>
+  <Tab title="yarn">yarn add package</Tab>
+</Tabs>
+```
+
+### Accordions
+
+```mdx
+<AccordionGroup>
+  <Accordion title="Question 1">Answer 1</Accordion>
+  <Accordion title="Question 2">Answer 2</Accordion>
+</AccordionGroup>
+```
+
+## Deployment
+
+### Vercel (Recommended)
+
+1. Push to GitHub
+2. Import at [vercel.com/new](https://vercel.com/new)
+3. Deploy!
+
+### Netlify
+
+1. Add `netlify.toml`:
+   ```toml
+   [build]
+     command = "npm run build"
+     publish = ".next"
+   [[plugins]]
+     package = "@netlify/plugin-nextjs"
+   ```
+2. Connect and deploy
+
+### Other Hosts
+
+Any platform supporting Next.js works. Run `npm run build` and deploy the output.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT License - feel free to use this for any project.
+
+## Credits
+
+Built with:
+- [Next.js](https://nextjs.org)
+- [Fumadocs](https://fumadocs.vercel.app)
+- [Tailwind CSS](https://tailwindcss.com)
+
+Inspired by [Mintlify](https://mintlify.com).

package/template/__tests__/components/callout.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Info, Tip, Warning, Note, Check } from '../../app/components/docs/mdx/callout'
+
+describe('Callout Components', () => {
+  describe('Info', () => {
+    it('renders children content', () => {
+      render(<Info>Test information message</Info>)
+      expect(screen.getByText('Test information message')).toBeDefined()
+    })
+
+    it('has accessible structure', () => {
+      render(<Info>Accessible content</Info>)
+      const callout = screen.getByText('Accessible content').closest('div')
+      expect(callout).toBeDefined()
+    })
+  })
+
+  describe('Tip', () => {
+    it('renders children content', () => {
+      render(<Tip>Helpful tip content</Tip>)
+      expect(screen.getByText('Helpful tip content')).toBeDefined()
+    })
+  })
+
+  describe('Warning', () => {
+    it('renders children content', () => {
+      render(<Warning>Warning message</Warning>)
+      expect(screen.getByText('Warning message')).toBeDefined()
+    })
+  })
+
+  describe('Note', () => {
+    it('renders children content', () => {
+      render(<Note>Note content</Note>)
+      expect(screen.getByText('Note content')).toBeDefined()
+    })
+  })
+
+  describe('Check', () => {
+    it('renders children content', () => {
+      render(<Check>Success message</Check>)
+      expect(screen.getByText('Success message')).toBeDefined()
+    })
+  })
+})

package/template/__tests__/components/card.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Card, CardGroup } from '../../app/components/docs/mdx/card'
+
+describe('Card Component', () => {
+  it('renders with title and children', () => {
+    render(
+      <Card title="Test Card">
+        Card content here
+      </Card>
+    )
+    expect(screen.getByText('Test Card')).toBeDefined()
+    expect(screen.getByText('Card content here')).toBeDefined()
+  })
+
+  it('renders as a link when href is provided', () => {
+    render(
+      <Card title="Linked Card" href="/docs/test">
+        Click me
+      </Card>
+    )
+    const link = screen.getByRole('link')
+    expect(link).toBeDefined()
+    expect(link.getAttribute('href')).toBe('/docs/test')
+  })
+
+  it('renders icon when provided', () => {
+    render(
+      <Card title="Card with Icon" icon="rocket">
+        Content
+      </Card>
+    )
+    // Icon should be rendered (as SVG)
+    expect(screen.getByText('Card with Icon')).toBeDefined()
+  })
+})
+
+describe('CardGroup Component', () => {
+  it('renders children cards', () => {
+    render(
+      <CardGroup cols={2}>
+        <Card title="Card 1">Content 1</Card>
+        <Card title="Card 2">Content 2</Card>
+      </CardGroup>
+    )
+    expect(screen.getByText('Card 1')).toBeDefined()
+    expect(screen.getByText('Card 2')).toBeDefined()
+  })
+
+  it('applies grid layout', () => {
+    const { container } = render(
+      <CardGroup cols={3}>
+        <Card title="Card">Content</Card>
+      </CardGroup>
+    )
+    const grid = container.firstChild
+    expect(grid).toBeDefined()
+  })
+})

package/template/__tests__/components/tabs.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import { Tabs, Tab } from '../../app/components/docs/mdx/tabs'
+
+describe('Tabs Component', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders tab titles', () => {
+    render(
+      <Tabs>
+        <Tab title="First">First content</Tab>
+        <Tab title="Second">Second content</Tab>
+      </Tabs>
+    )
+    expect(screen.getAllByText('First')[0]).toBeDefined()
+    expect(screen.getAllByText('Second')[0]).toBeDefined()
+  })
+
+  it('shows first tab content by default', () => {
+    render(
+      <Tabs>
+        <Tab title="First">First content</Tab>
+        <Tab title="Second">Second content</Tab>
+      </Tabs>
+    )
+    expect(screen.getAllByText('First content')[0]).toBeDefined()
+  })
+
+  it('switches tab content when clicked', () => {
+    render(
+      <Tabs>
+        <Tab title="First">First content</Tab>
+        <Tab title="Second">Second content</Tab>
+      </Tabs>
+    )
+
+    // Click on second tab
+    const secondTabs = screen.getAllByText('Second')
+    fireEvent.click(secondTabs[0])
+
+    // Second content should now be visible
+    expect(screen.getAllByText('Second content')[0]).toBeDefined()
+  })
+})
+
+describe('Tab Component', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders children when active', () => {
+    render(
+      <Tabs>
+        <Tab title="Test">Tab content here</Tab>
+      </Tabs>
+    )
+    expect(screen.getByText('Tab content here')).toBeDefined()
+  })
+})

package/template/__tests__/theme-config.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest'
+import { siteConfig, themeConfig, getCSSVariables } from '../lib/theme-config'
+
+describe('theme-config', () => {
+  describe('siteConfig', () => {
+    it('should have required fields', () => {
+      expect(siteConfig.name).toBeDefined()
+      expect(siteConfig.description).toBeDefined()
+      expect(siteConfig.url).toBeDefined()
+    })
+
+    it('should have logo configuration', () => {
+      expect(siteConfig.logo).toBeDefined()
+      expect(siteConfig.logo.src).toBeDefined()
+      expect(siteConfig.logo.width).toBeGreaterThan(0)
+      expect(siteConfig.logo.height).toBeGreaterThan(0)
+    })
+  })
+
+  describe('themeConfig', () => {
+    it('should have light and dark color schemes', () => {
+      expect(themeConfig.colors.light).toBeDefined()
+      expect(themeConfig.colors.dark).toBeDefined()
+    })
+
+    it('should have accent colors', () => {
+      expect(themeConfig.colors.light.accent).toBeDefined()
+      expect(themeConfig.colors.dark.accent).toBeDefined()
+    })
+
+    it('should have OG image configuration', () => {
+      expect(themeConfig.ogImage).toBeDefined()
+      expect(themeConfig.ogImage.gradient).toBeDefined()
+      expect(themeConfig.ogImage.titleColor).toBeDefined()
+    })
+  })
+
+  describe('getCSSVariables', () => {
+    it('should return CSS variables for light mode', () => {
+      const vars = getCSSVariables('light')
+      expect(vars['--accent']).toBe(themeConfig.colors.light.accent)
+    })
+
+    it('should return CSS variables for dark mode', () => {
+      const vars = getCSSVariables('dark')
+      expect(vars['--accent']).toBe(themeConfig.colors.dark.accent)
+    })
+  })
+})

package/template/__tests__/utils.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { cn } from '../lib/utils'
+
+describe('cn utility', () => {
+  it('should merge class names', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar')
+  })
+
+  it('should handle conditional classes', () => {
+    expect(cn('foo', false && 'bar', 'baz')).toBe('foo baz')
+  })
+
+  it('should merge Tailwind classes correctly', () => {
+    expect(cn('px-4', 'px-6')).toBe('px-6')
+    expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500')
+  })
+
+  it('should handle arrays', () => {
+    expect(cn(['foo', 'bar'])).toBe('foo bar')
+  })
+
+  it('should handle undefined and null', () => {
+    expect(cn('foo', undefined, null, 'bar')).toBe('foo bar')
+  })
+})

package/template/app/api/og/route.tsx

@@ -0,0 +1,90 @@
+import { ImageResponse } from 'next/og'
+import { NextRequest } from 'next/server'
+import { themeConfig, siteConfig } from '@/lib/theme-config'
+
+export const runtime = 'edge'
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url)
+  let title = searchParams.get('title') || 'Documentation'
+  const section = searchParams.get('section') || siteConfig.name
+
+  // Truncate very long titles to prevent overflow
+  if (title.length > 60) {
+    title = title.slice(0, 57) + '...'
+  }
+
+  // Determine font size based on title length
+  const fontSize = title.length > 40 ? 48 : title.length > 25 ? 56 : 64
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          height: '100%',
+          background: themeConfig.ogImage.gradient,
+          padding: '60px',
+        }}
+      >
+        {/* Logo placeholder */}
+        <div style={{ display: 'flex', alignItems: 'flex-start' }}>
+          <div
+            style={{
+              display: 'flex',
+              width: '48px',
+              height: '48px',
+              background: `linear-gradient(135deg, ${themeConfig.colors.dark.accent} 0%, ${themeConfig.colors.light.accent} 100%)`,
+              borderRadius: '12px',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <span style={{ fontSize: '24px', color: '#fff', fontWeight: 700 }}>
+              {siteConfig.name.charAt(0)}
+            </span>
+          </div>
+        </div>
+
+        {/* Section name */}
+        <div
+          style={{
+            display: 'flex',
+            marginTop: 'auto',
+          }}
+        >
+          <span
+            style={{
+              color: themeConfig.ogImage.sectionColor,
+              fontSize: '28px',
+              fontWeight: 500,
+            }}
+          >
+            {section}
+          </span>
+        </div>
+
+        {/* Title */}
+        <div
+          style={{
+            fontSize: `${fontSize}px`,
+            fontWeight: 700,
+            color: themeConfig.ogImage.titleColor,
+            marginTop: '16px',
+            lineHeight: 1.1,
+            maxWidth: '100%',
+            overflow: 'hidden',
+          }}
+        >
+          {title}
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  )
+}

package/template/app/api/search/route.ts

@@ -0,0 +1,6 @@
+import { source } from '@/lib/docs-source'
+import { createFromSource } from 'fumadocs-core/search/server'
+
+export const { GET } = createFromSource(source, {
+  language: 'english',
+})

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

@@ -0,0 +1,41 @@
+import Link from 'next/link'
+
+interface DocsPagerProps {
+  previous?: { name: string; url: string }
+  next?: { name: string; url: string }
+}
+
+export function DocsPager({ previous, next }: DocsPagerProps) {
+  if (!previous && !next) return null
+
+  return (
+    <nav className="flex justify-between mt-16 pt-8 border-t border-border">
+      {previous ? (
+        <Link
+          href={previous.url}
+          className="group flex flex-col gap-1 max-w-[45%]"
+        >
+          <span className="text-sm text-muted-foreground">Previous</span>
+          <span className="text-foreground font-medium group-hover:text-[var(--accent)] transition-colors">
+            ← {previous.name}
+          </span>
+        </Link>
+      ) : (
+        <div />
+      )}
+      {next ? (
+        <Link
+          href={next.url}
+          className="group flex flex-col gap-1 items-end text-right max-w-[45%]"
+        >
+          <span className="text-sm text-muted-foreground">Next</span>
+          <span className="text-foreground font-medium group-hover:text-[var(--accent)] transition-colors">
+            {next.name} →
+          </span>
+        </Link>
+      ) : (
+        <div />
+      )}
+    </nav>
+  )
+}