create-unmint 1.0.0 → 1.1.0

package/dist/index.js

@@ -312,15 +312,19 @@ async function init(projectName, options = {}) {
       gitSpinner.warn("Could not initialize git repository");
     }
   }
+  let depsInstalled = false;
   if (config.installDeps) {
     const installSpinner = ora("Installing dependencies...").start();
     try {
       const packageManager = await detectPackageManager();
-      await execa(packageManager, ["install"], { cwd: targetDir });
+      await execa(packageManager, ["install"], { cwd: targetDir, stdio: "pipe" });
       installSpinner.succeed(`Dependencies installed with ${packageManager}`);
+      depsInstalled = true;
     } catch (error) {
       installSpinner.warn("Could not install dependencies");
-      console.log(chalk2.dim(`  Run "npm install" manually to install dependencies`));
+      if (error instanceof Error && "stderr" in error) {
+        console.log(chalk2.dim(`  ${error.stderr?.slice(0, 200) || error.message}`));
+      }
     }
   }
   console.log();
@@ -329,7 +333,7 @@ async function init(projectName, options = {}) {
   console.log("  Next steps:");
   console.log();
   console.log(chalk2.cyan(`    cd ${config.projectName}`));
-  if (!config.installDeps) {
+  if (!depsInstalled) {
     console.log(chalk2.cyan("    npm install"));
   }
   console.log(chalk2.cyan("    npm run dev"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-unmint",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Create a new Unmint documentation project",
   "type": "module",
   "bin": {

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

@@ -0,0 +1,90 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { SearchTrigger } from './search-dialog'
+import { ThemeToggle } from './theme-toggle'
+import { MobileSidebar } from './mobile-sidebar'
+import { siteConfig } from '@/lib/theme-config'
+import type { Root } from 'fumadocs-core/page-tree'
+
+interface DocsHeaderProps {
+  tree: Root
+}
+
+export function DocsHeader({ tree }: DocsHeaderProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+  const openMobileMenu = useCallback(() => setIsMobileMenuOpen(true), [])
+  const closeMobileMenu = useCallback(() => setIsMobileMenuOpen(false), [])
+
+  return (
+    <>
+      <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 gap-4">
+            {/* Left: Hamburger + Logo */}
+            <div className="flex items-center gap-2">
+              {/* Mobile menu button */}
+              <button
+                onClick={openMobileMenu}
+                className="lg:hidden p-2 -ml-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
+                aria-label="Open menu"
+                aria-expanded={isMobileMenuOpen}
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              </button>
+
+              {/* 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 hidden sm:inline">{siteConfig.name}</span>
+              </Link>
+            </div>
+
+            {/* Center: Search */}
+            <div className="flex-1 flex justify-center px-2 sm:px-4">
+              <SearchTrigger />
+            </div>
+
+            {/* Right: Links */}
+            <div className="flex items-center gap-1 sm: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 min-w-[44px] min-h-[44px] flex items-center justify-center"
+                  aria-label="GitHub"
+                >
+                  <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>
+
+      {/* Mobile sidebar */}
+      <MobileSidebar
+        tree={tree}
+        isOpen={isMobileMenuOpen}
+        onClose={closeMobileMenu}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,287 @@
+'use client'
+
+import { useEffect, useRef, useCallback, TouchEvent, useState } from 'react'
+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 MobileSidebarProps {
+  tree: Root
+  isOpen: boolean
+  onClose: () => void
+}
+
+/**
+ * Mobile sidebar with slide-in drawer animation
+ * - Swipe right to close
+ * - Tap backdrop to close
+ * - Escape key to close
+ * - Auto-close on navigation
+ */
+export function MobileSidebar({ tree, isOpen, onClose }: MobileSidebarProps) {
+  const pathname = usePathname()
+  const panelRef = useRef<HTMLDivElement>(null)
+  const touchStart = useRef<{ x: number; y: number; time: number } | null>(null)
+  const touchMove = useRef<{ x: number; y: number } | null>(null)
+
+  // Close on route change
+  useEffect(() => {
+    onClose()
+  }, [pathname, onClose])
+
+  // Close on escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onClose])
+
+  // Prevent body scroll when open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [isOpen])
+
+  // Swipe handlers
+  const handleTouchStart = useCallback((e: TouchEvent) => {
+    const touch = e.touches[0]
+    touchStart.current = {
+      x: touch.clientX,
+      y: touch.clientY,
+      time: Date.now(),
+    }
+    touchMove.current = null
+  }, [])
+
+  const handleTouchMove = useCallback((e: TouchEvent) => {
+    const touch = e.touches[0]
+    touchMove.current = {
+      x: touch.clientX,
+      y: touch.clientY,
+    }
+  }, [])
+
+  const handleTouchEnd = useCallback(() => {
+    if (!touchStart.current || !touchMove.current) return
+
+    const deltaX = touchMove.current.x - touchStart.current.x
+    const deltaY = touchMove.current.y - touchStart.current.y
+    const timeElapsed = Date.now() - touchStart.current.time
+
+    // Calculate velocity
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+    const velocity = distance / timeElapsed
+
+    // Swipe left to close (when panel is on left side)
+    const threshold = 50
+    const velocityThreshold = 0.3
+
+    if (
+      Math.abs(deltaX) > Math.abs(deltaY) && // Horizontal swipe
+      deltaX < -threshold && // Swiping left
+      velocity > velocityThreshold
+    ) {
+      onClose()
+    }
+
+    touchStart.current = null
+    touchMove.current = null
+  }, [onClose])
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={cn(
+          'fixed inset-0 bg-black/60 z-40 transition-opacity duration-300 lg:hidden',
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Sliding panel */}
+      <div
+        ref={panelRef}
+        className={cn(
+          'fixed top-0 left-0 bottom-0 w-80 max-w-[85vw] bg-background border-r border-border z-50 transform transition-transform duration-300 ease-out lg:hidden',
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between h-16 px-4 border-b border-border">
+          <Link href="/" className="font-semibold text-lg" onClick={onClose}>
+            {siteConfig.name}
+          </Link>
+          <button
+            onClick={onClose}
+            className="p-2 -mr-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
+            aria-label="Close menu"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Navigation */}
+        <nav className="h-[calc(100%-4rem)] overflow-y-auto p-4">
+          {/* Quick links */}
+          <div className="mb-6 pb-5 border-b border-border">
+            <ul className="space-y-1">
+              <li>
+                <Link
+                  href="/docs"
+                  onClick={onClose}
+                  className="flex items-center gap-3 py-2 px-2 text-sm text-[var(--accent)] font-medium hover:bg-[var(--accent-muted)] rounded-md transition-colors min-h-[44px]"
+                >
+                  <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-2 px-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px]"
+                  >
+                    <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted">
+                      <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-2 px-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px]"
+                  >
+                    <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted">
+                      <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>
+
+          {/* Page tree navigation */}
+          <MobileSidebarNodes nodes={tree.children} pathname={pathname} onNavigate={onClose} />
+        </nav>
+      </div>
+    </>
+  )
+}
+
+interface MobileSidebarNodesProps {
+  nodes: Node[]
+  pathname: string
+  onNavigate: () => void
+}
+
+function MobileSidebarNodes({ nodes, pathname, onNavigate }: MobileSidebarNodesProps) {
+  return (
+    <div className="space-y-1">
+      {nodes.map((node, index) => (
+        <MobileSidebarNode key={index} node={node} pathname={pathname} onNavigate={onNavigate} />
+      ))}
+    </div>
+  )
+}
+
+interface MobileSidebarNodeProps {
+  node: Node
+  pathname: string
+  onNavigate: () => void
+}
+
+function MobileSidebarNode({ node, pathname, onNavigate }: MobileSidebarNodeProps) {
+  const [isExpanded, setIsExpanded] = useState(true)
+
+  if (node.type === 'separator') {
+    return (
+      <div className="pt-4 first:pt-0">
+        <h5 className="text-sm font-semibold text-foreground mb-1.5 px-2">
+          {node.name}
+        </h5>
+      </div>
+    )
+  }
+
+  if (node.type === 'folder') {
+    return (
+      <div>
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center justify-between w-full py-2 px-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px]"
+        >
+          <span>{node.name}</span>
+          <svg
+            className={cn('w-4 h-4 transition-transform', isExpanded && 'rotate-90')}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+        {isExpanded && node.children && (
+          <ul className="ml-3 mt-1 space-y-0.5 border-l border-border pl-3">
+            {node.children.map((child, index) => (
+              <MobileSidebarNode key={index} node={child} pathname={pathname} onNavigate={onNavigate} />
+            ))}
+          </ul>
+        )}
+      </div>
+    )
+  }
+
+  const isActive = pathname === node.url
+
+  return (
+    <li className="list-none">
+      <Link
+        href={node.url}
+        onClick={onNavigate}
+        className={cn(
+          'flex items-center gap-2 py-2 px-2 text-sm transition-colors rounded-md min-h-[44px]',
+          isActive
+            ? 'text-[var(--accent)] font-medium bg-[var(--accent-muted)]'
+            : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+        )}
+      >
+        <span>{node.name}</span>
+      </Link>
+    </li>
+  )
+}

package/template/app/docs/layout.tsx

@@ -1,9 +1,6 @@
-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 { DocsHeader } from '../components/docs/docs-header'
 import { siteConfig } from '@/lib/theme-config'
 
 export default function DocsLayout({
@@ -15,48 +12,8 @@ export default function DocsLayout({
 
   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>
+      {/* Header with mobile navigation */}
+      <DocsHeader tree={tree} />
 
       {/* Main content */}
       <div className="flex-1">

package/template/content/docs/index.mdx

@@ -49,7 +49,7 @@ Unmint is designed to be forked and customized. All the code is yours to modify.
 
 ```bash
 # Clone the repository
-git clone https://github.com/your-org/unmint.git my-docs
+git clone https://github.com/gregce/unmint.git my-docs
 
 # Install dependencies
 cd my-docs

package/template/content/docs/quickstart.mdx

@@ -20,7 +20,7 @@ Before you begin, make sure you have:
     Start by cloning the Unmint template:
 
     ```bash
-    git clone https://github.com/your-org/unmint.git my-docs
+    git clone https://github.com/gregce/unmint.git my-docs
     cd my-docs
     ```
   </Step>

package/template/package.json

@@ -18,7 +18,7 @@
     "fumadocs-core": "^16.4.7",
     "fumadocs-mdx": "^14.2.5",
     "lucide-react": "^0.483.0",
-    "next": "^15.5.7",
+    "next": "^16.0.0",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -35,8 +35,8 @@
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.21",
     "eslint": "^9",
-    "eslint-config-next": "^15.5.7",
-    "happy-dom": "^17.4.4",
+    "eslint-config-next": "^16.0.0",
+    "happy-dom": "^20.3.4",
     "postcss": "^8.5.4",
     "tailwindcss": "^4",
     "typescript": "^5",

package/template/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,7 +23,9 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
   "include": [
@@ -27,7 +33,10 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".source/**/*.ts"
+    ".source/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }