create-oven 0.2.4 → 0.3.1

package/index.js

@@ -3,21 +3,14 @@
 /**
  * create-oven - Create a new Oven project
  * Like create-next-app but for Bun
- *
- * Usage:
- *   npx create-oven my-app
- *   bunx create-oven my-app
  */
 
 import fs from 'fs';
 import path from 'path';
 import readline from 'readline';
-import { fileURLToPath } from 'url';
 import { execSync } from 'child_process';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-// Colors for terminal output
+// Colors
 const c = {
   reset: '\x1b[0m',
   bold: '\x1b[1m',
@@ -26,13 +19,9 @@ const c = {
   green: '\x1b[32m',
   yellow: '\x1b[33m',
   blue: '\x1b[34m',
-  magenta: '\x1b[35m',
   cyan: '\x1b[36m',
-  white: '\x1b[37m',
-  bgBlue: '\x1b[44m',
 };
 
-// Create readline interface for prompts
 function createPrompt() {
   return readline.createInterface({
     input: process.stdin,
@@ -40,34 +29,16 @@ function createPrompt() {
   });
 }
 
-// Ask a yes/no question
 async function askYesNo(rl, question, defaultValue = true) {
-  const defaultText = defaultValue ? 'Yes' : 'No';
   const hint = defaultValue ? '(Y/n)' : '(y/N)';
-
   return new Promise((resolve) => {
     rl.question(`${c.cyan}?${c.reset} ${question} ${c.dim}${hint}${c.reset} `, (answer) => {
-      if (!answer.trim()) {
-        resolve(defaultValue);
-      } else {
-        resolve(answer.toLowerCase().startsWith('y'));
-      }
-    });
-  });
-}
-
-// Ask for text input
-async function askText(rl, question, defaultValue = '') {
-  const hint = defaultValue ? ` ${c.dim}(${defaultValue})${c.reset}` : '';
-
-  return new Promise((resolve) => {
-    rl.question(`${c.cyan}?${c.reset} ${question}${hint} `, (answer) => {
-      resolve(answer.trim() || defaultValue);
+      if (!answer.trim()) resolve(defaultValue);
+      else resolve(answer.toLowerCase().startsWith('y'));
     });
   });
 }
 
-// Display a spinner
 function spinner(text) {
   const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
   let i = 0;
@@ -75,7 +46,6 @@ function spinner(text) {
     process.stdout.write(`\r${c.cyan}${frames[i]}${c.reset} ${text}`);
     i = (i + 1) % frames.length;
   }, 80);
-
   return {
     stop: (finalText) => {
       clearInterval(interval);
@@ -88,57 +58,44 @@ function spinner(text) {
   };
 }
 
-// Main function
 async function main() {
   const args = process.argv.slice(2);
 
-  // Show help
   if (args.includes('--help') || args.includes('-h')) {
     console.log(`
   ${c.bold}${c.cyan}create-oven${c.reset} - Create a new Oven project
 
   ${c.yellow}Usage:${c.reset}
     npx create-oven [project-name] [options]
-    bunx create-oven [project-name] [options]
 
   ${c.yellow}Options:${c.reset}
-    --typescript, --ts    Use TypeScript (default: true)
-    --no-typescript       Don't use TypeScript
-    --tailwind            Add Tailwind CSS
-    --no-tailwind         Don't add Tailwind CSS
-    --eslint              Add ESLint
-    --no-eslint           Don't add ESLint
-    --src-dir             Use src/ directory
-    --no-src-dir          Don't use src/ directory (default)
-    --app                 Use App Router (default: true)
-    --import-alias <alias> Set import alias (default: @/*)
-    --use-bun             Use Bun for installing dependencies
-    --use-npm             Use npm for installing dependencies
+    --ts, --typescript    Use TypeScript (default)
+    --js, --javascript    Use JavaScript
+    --tailwind            Use Tailwind CSS (default)
+    --eslint              Use ESLint (default)
+    --no-tailwind         Don't use Tailwind CSS
+    --no-eslint           Don't use ESLint
     --no-install          Skip installing dependencies
     -y, --yes             Use defaults without prompts
-    -h, --help            Show this help message
+    -h, --help            Show this help
     -v, --version         Show version
 
   ${c.yellow}Examples:${c.reset}
     npx create-oven my-app
-    npx create-oven my-app --tailwind --eslint
-    bunx create-oven my-app --src-dir
-
-  ${c.cyan}Learn more: https://github.com/oven-ttta/oven-framework${c.reset}
+    npx create-oven my-app --js --no-tailwind
     `);
     process.exit(0);
   }
 
-  // Show version
   if (args.includes('--version') || args.includes('-v')) {
-    console.log('create-oven v0.2.4');
+    console.log('create-oven v0.3.1');
     process.exit(0);
   }
 
   console.log(`
 ${c.bold}${c.cyan}  ╔═══════════════════════════════════════╗
   ║                                       ║
-  ║   🔥  Create Oven App  v0.2.4         ║
+  ║   🔥  Create Oven App  v0.3.1         ║
   ║                                       ║
   ║   Next.js-style framework for Bun     ║
   ║                                       ║
@@ -148,113 +105,93 @@ ${c.bold}${c.cyan}  ╔═══════════════════
   const rl = createPrompt();
 
   try {
+    const hasFlag = (flag) => args.includes(flag);
+    const skipPrompts = hasFlag('--yes') || hasFlag('-y');
+    const noInstall = hasFlag('--no-install');
+
     // Get project name
     let projectName = args.find(arg => !arg.startsWith('-'));
-
     if (!projectName) {
-      projectName = await askText(rl, 'What is your project named?', 'my-app');
+      projectName = await new Promise((resolve) => {
+        rl.question(`${c.cyan}?${c.reset} What is your project named? ${c.dim}(my-app)${c.reset} `, (answer) => {
+          resolve(answer.trim() || 'my-app');
+        });
+      });
     }
 
     const projectDir = path.join(process.cwd(), projectName);
 
-    // Check if directory exists
     if (fs.existsSync(projectDir)) {
       console.log(`\n${c.red}✗${c.reset} Directory "${projectName}" already exists!`);
       rl.close();
       process.exit(1);
     }
 
-    // Parse CLI flags
-    const hasFlag = (flag) => args.includes(flag);
-    const skipPrompts = hasFlag('--yes') || hasFlag('-y');
-    const noInstall = hasFlag('--no-install');
-
-    // Interactive prompts (like create-next-app)
     console.log();
 
-    // If --yes flag, use defaults. If specific flag, use that value. Otherwise ask.
-    const useTypescript = hasFlag('--typescript') || hasFlag('--ts') ||
-      hasFlag('--no-typescript') ? !hasFlag('--no-typescript') :
+    // Options
+    const useTypescript = hasFlag('--js') || hasFlag('--javascript') ? false :
+      hasFlag('--ts') || hasFlag('--typescript') ? true :
       skipPrompts ? true :
       await askYesNo(rl, 'Would you like to use TypeScript?', true);
 
-    const useEslint = hasFlag('--eslint') ||
-      hasFlag('--no-eslint') ? !hasFlag('--no-eslint') :
-      skipPrompts ? true :
-      await askYesNo(rl, 'Would you like to use ESLint?', true);
-
-    const useTailwind = hasFlag('--tailwind') ||
-      hasFlag('--no-tailwind') ? !hasFlag('--no-tailwind') :
+    const useTailwind = hasFlag('--no-tailwind') ? false :
+      hasFlag('--tailwind') ? true :
       skipPrompts ? true :
       await askYesNo(rl, 'Would you like to use Tailwind CSS?', true);
 
-    const useSrcDir = hasFlag('--src-dir') ||
-      hasFlag('--no-src-dir') ? !hasFlag('--no-src-dir') :
-      skipPrompts ? false :
-      await askYesNo(rl, 'Would you like to use `src/` directory?', false);
-
-    const useAppRouter = hasFlag('--app') ||
-      hasFlag('--no-app') ? !hasFlag('--no-app') :
+    const useEslint = hasFlag('--no-eslint') ? false :
+      hasFlag('--eslint') ? true :
       skipPrompts ? true :
-      await askYesNo(rl, 'Would you like to use App Router? (recommended)', true);
-
-    const importAliasArg = args.find((arg, i) => args[i - 1] === '--import-alias');
-    const importAlias = importAliasArg ||
-      (skipPrompts ? '@/*' : await askText(rl, 'What import alias would you like configured?', '@/*'));
+      await askYesNo(rl, 'Would you like to use ESLint?', true);
 
     rl.close();
 
+    console.log();
+    console.log(`Creating a new Oven app in ${c.green}${projectDir}${c.reset}.`);
     console.log();
 
-    // Create project
-    const spin = spinner('Creating project structure...');
-
-    // Determine base directory
-    const baseDir = useSrcDir ? path.join(projectDir, 'src') : projectDir;
-    const appDir = path.join(baseDir, 'app');
+    const ext = useTypescript ? 'tsx' : 'js';
 
     // Create directories
-    const dirs = [
-      appDir,
-      path.join(projectDir, 'public'),
-    ];
-
-    for (const dir of dirs) {
-      fs.mkdirSync(dir, { recursive: true });
-    }
+    fs.mkdirSync(path.join(projectDir, 'app'), { recursive: true });
+    fs.mkdirSync(path.join(projectDir, 'public'), { recursive: true });
 
-    spin.stop('Created project structure');
+    // ============ public/oven.svg ============
+    fs.writeFileSync(path.join(projectDir, 'public', 'oven.svg'), `<svg width="100" height="24" viewBox="0 0 100 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <text x="0" y="20" font-family="system-ui, sans-serif" font-size="20" font-weight="bold" fill="currentColor">🔥 Oven</text>
+</svg>`);
 
-    // Create files
-    const spin2 = spinner('Creating configuration files...');
+    // ============ public/github.svg ============
+    fs.writeFileSync(path.join(projectDir, 'public', 'github.svg'), `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+</svg>`);
 
-    // package.json
-    const ext = useTypescript ? 'tsx' : 'js';
+    // ============ package.json ============
+    const spin1 = spinner('Creating package.json...');
     const pkg = {
       name: projectName,
       version: '0.1.0',
       private: true,
       scripts: {
-        dev: `bun run --hot ${useSrcDir ? 'src/' : ''}server.${ext}`,
-        build: `bun build ./${useSrcDir ? 'src/' : ''}server.${ext} --outdir ./dist --target bun`,
+        dev: 'bun run --hot server.tsx',
+        build: 'bun build ./server.tsx --outdir ./dist --target bun',
         start: 'bun run dist/server.js',
-        lint: useEslint ? 'eslint . --ext .tsx' : undefined,
+        ...(useEslint && { lint: 'eslint .' }),
       },
       dependencies: {},
       devDependencies: {
-        ...(useTypescript && { '@types/bun': 'latest', 'typescript': '^5.3.0' }),
-        ...(useEslint && { 'eslint': '^8.0.0', '@typescript-eslint/eslint-plugin': '^6.0.0', '@typescript-eslint/parser': '^6.0.0' }),
-        ...(useTailwind && { 'tailwindcss': '^3.4.0', 'postcss': '^8.4.0', 'autoprefixer': '^10.4.0' }),
+        ...(useTypescript && { '@types/bun': 'latest', 'typescript': '^5' }),
+        ...(useTailwind && { '@tailwindcss/postcss': '^4', 'tailwindcss': '^4' }),
+        ...(useEslint && { 'eslint': '^9' }),
       },
     };
-    // Remove undefined scripts
-    Object.keys(pkg.scripts).forEach(key => {
-      if (pkg.scripts[key] === undefined) delete pkg.scripts[key];
-    });
     fs.writeFileSync(path.join(projectDir, 'package.json'), JSON.stringify(pkg, null, 2));
+    spin1.stop('Created package.json');
 
-    // tsconfig.json
+    // ============ tsconfig.json ============
     if (useTypescript) {
+      const spin2 = spinner('Creating tsconfig.json...');
       const tsconfig = {
         compilerOptions: {
           target: 'ES2017',
@@ -271,116 +208,66 @@ ${c.bold}${c.cyan}  ╔═══════════════════
           jsx: 'preserve',
           incremental: true,
           types: ['bun-types'],
-          paths: {
-            [importAlias]: [useSrcDir ? './src/*' : './*'],
-          },
-          baseUrl: '.',
+          paths: { '@/*': ['./*'] },
         },
-        include: [useSrcDir ? 'src/**/*.tsx' : '**/*.tsx'],
+        include: ['**/*.ts', '**/*.tsx'],
         exclude: ['node_modules', 'dist'],
       };
       fs.writeFileSync(path.join(projectDir, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2));
+      spin2.stop('Created tsconfig.json');
     }
 
-    // ESLint config
-    if (useEslint) {
-      const eslintConfig = {
-        extends: [
-          'eslint:recommended',
-          ...(useTypescript ? ['plugin:@typescript-eslint/recommended'] : []),
-        ],
-        parser: useTypescript ? '@typescript-eslint/parser' : undefined,
-        plugins: useTypescript ? ['@typescript-eslint'] : [],
-        parserOptions: {
-          ecmaVersion: 'latest',
-          sourceType: 'module',
-        },
-        rules: {},
-        ignorePatterns: ['node_modules/', 'dist/'],
-      };
-      fs.writeFileSync(path.join(projectDir, '.eslintrc.json'), JSON.stringify(eslintConfig, null, 2));
-    }
-
-    // Tailwind config
+    // ============ postcss.config.mjs ============
     if (useTailwind) {
-      const tailwindConfig = `/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './${useSrcDir ? 'src/' : ''}app/**/*.{js,ts,jsx,tsx,mdx}',
-    './${useSrcDir ? 'src/' : ''}components/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        oven: {
-          50: '#fff5f2',
-          100: '#ffe6de',
-          200: '#ffc9b8',
-          300: '#ffa088',
-          400: '#ff6b35',
-          500: '#f7531e',
-          600: '#e63d0a',
-          700: '#bf3009',
-          800: '#99290d',
-          900: '#7d2510',
-        },
-      },
-    },
-  },
-  plugins: [],
-};
-`;
-      fs.writeFileSync(path.join(projectDir, 'tailwind.config.js'), tailwindConfig);
-
-      const postcssConfig = `module.exports = {
+      const spin3 = spinner('Creating postcss.config.mjs...');
+      fs.writeFileSync(path.join(projectDir, 'postcss.config.mjs'), `const config = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
-`;
-      fs.writeFileSync(path.join(projectDir, 'postcss.config.js'), postcssConfig);
-    }
-
-    // oven.config.ts
-    const ovenConfig = `${useTypescript ? "import type { OvenConfig } from './app/types';\n\n" : ''}const config${useTypescript ? ': OvenConfig' : ''} = {
-  // Server configuration
-  port: 3000,
-
-  // Directories
-  appDir: '${useSrcDir ? 'src/' : ''}app',
-  publicDir: 'public',
-};
 
 export default config;
-`;
-    fs.writeFileSync(path.join(projectDir, `oven.config.${ext}`), ovenConfig);
-
-    spin2.stop('Created configuration files');
+`);
+      spin3.stop('Created postcss.config.mjs');
+    }
 
-    // Create app files
-    const spin3 = spinner('Creating app files...');
+    // ============ eslint.config.mjs ============
+    if (useEslint) {
+      const spin4 = spinner('Creating eslint.config.mjs...');
+      fs.writeFileSync(path.join(projectDir, 'eslint.config.mjs'), `import js from "@eslint/js";
+
+export default [
+  js.configs.recommended,
+  {
+    rules: {
+      "no-unused-vars": "warn",
+    },
+  },
+];
+`);
+      spin4.stop('Created eslint.config.mjs');
+    }
 
-    // globals.css
-    const globalsCss = useTailwind ? `@tailwind base;
-@tailwind components;
-@tailwind utilities;
+    // ============ app/globals.css ============
+    const spin5 = spinner('Creating app/globals.css...');
+    const globalsCss = useTailwind ? `@import "tailwindcss";
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-rgb: 255, 255, 255;
+  --background: #ffffff;
+  --foreground: #171717;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-rgb: 10, 10, 10;
+    --background: #0a0a0a;
+    --foreground: #ededed;
   }
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: rgb(var(--background-rgb));
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
 }
 ` : `* {
   margin: 0;
@@ -389,193 +276,229 @@ body {
 }
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-rgb: 255, 255, 255;
-  --oven-primary: #ff6b35;
-  --oven-secondary: #f7931e;
+  --background: #ffffff;
+  --foreground: #171717;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  color: rgb(var(--foreground-rgb));
-  background: rgb(var(--background-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
 }
 `;
-    fs.writeFileSync(path.join(appDir, 'globals.css'), globalsCss);
-
-    // favicon.ico (placeholder - just create the public dir marker)
-    fs.writeFileSync(path.join(projectDir, 'public', '.gitkeep'), '');
+    fs.writeFileSync(path.join(projectDir, 'app', 'globals.css'), globalsCss);
+    spin5.stop('Created app/globals.css');
 
-    // Root Layout
-    const layoutContent = `import './globals.css';
+    // ============ app/layout.tsx ============
+    const spin6 = spinner(`Creating app/layout.${ext}...`);
+    const layoutContent = useTypescript ? `import "./globals.css";
 
-export const metadata = {
-  title: {
-    default: '${projectName}',
-    template: '%s | ${projectName}',
-  },
-  description: 'Built with Oven - A Next.js-style framework for Bun',
+export const metadata${useTypescript ? ': { title: string; description: string }' : ''} = {
+  title: "Create Oven App",
+  description: "Generated by create-oven",
 };
 
-export default function RootLayout({ children }${useTypescript ? ': { children: string }' : ''}) {
-  return \`
-    <!DOCTYPE html>
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: string;
+}>) {
+  return (
+    \`<!DOCTYPE html>
     <html lang="en">
       <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>\${metadata.title}</title>
+        <meta name="description" content="\${metadata.description}" />
         <link rel="icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet" />
       </head>
-      <body${useTailwind ? ' class="antialiased"' : ''}>
+      <body class="antialiased" style="font-family: 'Geist', sans-serif;">
         \${children}
       </body>
-    </html>
-  \`;
+    </html>\`
+  );
 }
-`;
-    fs.writeFileSync(path.join(appDir, `layout.${ext}`), layoutContent);
+` : `import "./globals.css";
 
-    // Home Page
-    const homePageContent = `export const metadata = {
-  title: 'Home',
-  description: 'Welcome to ${projectName}',
+export const metadata = {
+  title: "Create Oven App",
+  description: "Generated by create-oven",
 };
 
-export default function HomePage() {
-  return \`
-    <main ${useTailwind ? 'class="flex min-h-screen flex-col items-center justify-center p-24"' : 'style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 6rem;"'}>
-      <div ${useTailwind ? 'class="text-center"' : 'style="text-align: center;"'}>
-        <h1 ${useTailwind ? 'class="text-6xl font-bold mb-4 bg-gradient-to-r from-oven-400 to-oven-500 bg-clip-text text-transparent"' : 'style="font-size: 3.5rem; font-weight: bold; margin-bottom: 1rem; background: linear-gradient(135deg, #ff6b35, #f7931e); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"'}>
-          Welcome to ${projectName}
-        </h1>
-
-        <p ${useTailwind ? 'class="text-xl text-gray-600 mb-8"' : 'style="font-size: 1.25rem; color: #666; margin-bottom: 2rem;"'}>
-          Get started by editing
-          <code ${useTailwind ? 'class="px-2 py-1 bg-gray-100 rounded text-oven-400 font-mono"' : 'style="padding: 0.25rem 0.5rem; background: #f5f5f5; border-radius: 4px; color: #ff6b35; font-family: monospace;"'}>
-            ${useSrcDir ? 'src/' : ''}app/page.${ext}
-          </code>
-        </p>
-
-        <div ${useTailwind ? 'class="flex gap-4 flex-wrap justify-center"' : 'style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;"'}>
-          <a href="https://github.com/oven-ttta/oven-framework" target="_blank" ${useTailwind ? 'class="px-6 py-3 bg-gradient-to-r from-oven-400 to-oven-500 text-white rounded-lg font-medium hover:opacity-90 transition"' : 'style="padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #ff6b35, #f7931e); color: white; border-radius: 8px; font-weight: 500;"'}>
-            Documentation →
+export default function RootLayout({ children }) {
+  return (
+    \`<!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>\${metadata.title}</title>
+        <meta name="description" content="\${metadata.description}" />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet" />
+      </head>
+      <body class="antialiased" style="font-family: 'Geist', sans-serif;">
+        \${children}
+      </body>
+    </html>\`
+  );
+}
+`;
+    fs.writeFileSync(path.join(projectDir, 'app', `layout.${ext}`), layoutContent);
+    spin6.stop(`Created app/layout.${ext}`);
+
+    // ============ app/page.tsx ============
+    const spin7 = spinner(`Creating app/page.${ext}...`);
+    const pageContent = useTailwind ? `export default function Home() {
+  return (
+    \`<div class="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main class="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <img
+          class="dark:invert"
+          src="/oven.svg"
+          alt="Oven logo"
+          width="100"
+          height="24"
+        />
+        <div class="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 class="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            Get started by editing app/page.${ext}
+          </h1>
+          <p class="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Looking for a starting point? Head over to the{" "}
+            <a
+              href="https://github.com/oven-ttta/oven-framework"
+              class="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Documentation
+            </a>{" "}
+            or{" "}
+            <a
+              href="https://bun.sh/docs"
+              class="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Bun Docs
+            </a>.
+          </p>
+        </div>
+        <div class="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            class="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            href="https://github.com/oven-ttta/oven-framework"
+            target="_blank"
+            rel="noopener noreferrer"
+            style="background: #171717; color: white;"
+          >
+            <img
+              class="dark:invert"
+              src="/github.svg"
+              alt="GitHub"
+              width="16"
+              height="16"
+            />
+            GitHub
           </a>
-          <a href="https://github.com/oven-ttta/oven-framework" target="_blank" ${useTailwind ? 'class="px-6 py-3 border border-gray-300 rounded-lg font-medium hover:border-gray-400 transition"' : 'style="padding: 0.75rem 1.5rem; border: 1px solid #ddd; border-radius: 8px; font-weight: 500;"'}>
-            GitHub ⭐
+          <a
+            class="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            href="https://bun.sh/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Bun Docs
           </a>
         </div>
-      </div>
-
-      <div ${useTailwind ? 'class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl"' : 'style="margin-top: 4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; max-width: 900px;"'}>
-        <div ${useTailwind ? 'class="p-6 bg-white border border-gray-200 rounded-xl hover:border-oven-400 transition"' : 'style="padding: 1.5rem; background: white; border: 1px solid #eee; border-radius: 12px;"'}>
-          <h3 ${useTailwind ? 'class="text-lg font-semibold mb-2"' : 'style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;"'}>📁 File-based Routing</h3>
-          <p ${useTailwind ? 'class="text-gray-600 text-sm"' : 'style="color: #666; font-size: 0.9rem;"'}>
-            Create routes by adding files to the app directory. Just like Next.js!
-          </p>
-        </div>
-
-        <div ${useTailwind ? 'class="p-6 bg-white border border-gray-200 rounded-xl hover:border-oven-400 transition"' : 'style="padding: 1.5rem; background: white; border: 1px solid #eee; border-radius: 12px;"'}>
-          <h3 ${useTailwind ? 'class="text-lg font-semibold mb-2"' : 'style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;"'}>⚡ Blazing Fast</h3>
-          <p ${useTailwind ? 'class="text-gray-600 text-sm"' : 'style="color: #666; font-size: 0.9rem;"'}>
-            Powered by Bun runtime. Up to 4x faster than Node.js.
+      </main>
+    </div>\`
+  );
+}
+` : `export default function Home() {
+  return (
+    \`<div style="display: flex; min-height: 100vh; align-items: center; justify-content: center; background: #fafafa;">
+      <main style="display: flex; flex-direction: column; align-items: center; justify-content: space-between; max-width: 48rem; padding: 8rem 4rem; background: white;">
+        <div style="font-size: 4rem; margin-bottom: 2rem;">🔥</div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center;">
+          <h1 style="font-size: 1.875rem; font-weight: 600; line-height: 2.5rem; color: black;">
+            Get started by editing app/page.${ext}
+          </h1>
+          <p style="max-width: 28rem; font-size: 1.125rem; line-height: 2rem; color: #666;">
+            Looking for a starting point? Head over to the
+            <a href="https://github.com/oven-ttta/oven-framework" style="font-weight: 500; color: black;">Documentation</a>
+            or
+            <a href="https://bun.sh/docs" style="font-weight: 500; color: black;">Bun Docs</a>.
           </p>
         </div>
-
-        <div ${useTailwind ? 'class="p-6 bg-white border border-gray-200 rounded-xl hover:border-oven-400 transition"' : 'style="padding: 1.5rem; background: white; border: 1px solid #eee; border-radius: 12px;"'}>
-          <h3 ${useTailwind ? 'class="text-lg font-semibold mb-2"' : 'style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;"'}>🔌 API Routes</h3>
-          <p ${useTailwind ? 'class="text-gray-600 text-sm"' : 'style="color: #666; font-size: 0.9rem;"'}>
-            Build APIs with route handlers. Support GET, POST, PUT, DELETE.
-          </p>
+        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
+          <a
+            href="https://github.com/oven-ttta/oven-framework"
+            target="_blank"
+            style="display: flex; height: 3rem; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; background: black; color: white; padding: 0 1.5rem; text-decoration: none;"
+          >
+            GitHub
+          </a>
+          <a
+            href="https://bun.sh/docs"
+            target="_blank"
+            style="display: flex; height: 3rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid #e5e5e5; padding: 0 1.5rem; text-decoration: none; color: inherit;"
+          >
+            Bun Docs
+          </a>
         </div>
-      </div>
-    </main>
-  \`;
+      </main>
+    </div>\`
+  );
 }
 `;
-    fs.writeFileSync(path.join(appDir, `page.${ext}`), homePageContent);
+    fs.writeFileSync(path.join(projectDir, 'app', `page.${ext}`), pageContent);
+    spin7.stop(`Created app/page.${ext}`);
 
-    // Server file
+    // ============ server.tsx ============
+    const spin8 = spinner(`Creating server.${ext}...`);
     const serverContent = `/**
- * Oven Server - ${projectName}
- * A Next.js-style framework powered by Bun
+ * Oven Server
+ * Powered by Bun
  */
 
-const PORT = parseInt(process.env.PORT || '3000');
+const PORT = parseInt(process.env.PORT || "3000");
 
-// Routes map
-const routes${useTypescript ? ': Map<string, (req: Request) => Promise<Response>>' : ''} = new Map();
+// Simple router
+const routes = new Map${useTypescript ? '<string, (req: Request) => Promise<Response>>' : ''}();
 
-// Scan and register routes
 async function scanRoutes() {
-  const appDir = './${useSrcDir ? 'src/' : ''}app';
-
-  // Scan pages
-  const pageGlob = new Bun.Glob('**/page.{ts,tsx,js,jsx}');
-  for await (const file of pageGlob.scan({ cwd: appDir })) {
-    const routePath = '/' + file
-      .replace(/\\/page\\.(ts|tsx|js|jsx)$/, '')
-      .replace(/^page\\.(ts|tsx|js|jsx)$/, '')
-      .replace(/\\/$/, '') || '/';
-
-    const normalizedPath = routePath === '' ? '/' : routePath;
-
-    routes.set(normalizedPath, async (req${useTypescript ? ': Request' : ''}) => {
-      try {
-        const module = await import(\`\${appDir}/\${file}\`);
-        const content = await module.default({ params: {}, searchParams: {} });
+  const appDir = "./app";
 
-        // Get layout
-        let html = content;
-        try {
-          const layoutModule = await import(\`\${appDir}/layout.tsx\`);
-          html = await layoutModule.default({ children: content, params: {} });
-        } catch {}
-
-        // Metadata
-        const metadata = module.metadata || {};
-        const title = typeof metadata.title === 'string'
-          ? metadata.title
-          : metadata.title?.default || '${projectName}';
-
-        return new Response(html, {
-          headers: {
-            'Content-Type': 'text/html; charset=utf-8',
-          },
-        });
-      } catch (error) {
-        console.error('Page error:', error);
-        return new Response('Internal Server Error', { status: 500 });
-      }
-    });
-  }
+  // Scan for page files
+  const glob = new Bun.Glob("**/page.{tsx,jsx,ts,js}");
 
-  // Scan API routes
-  const apiGlob = new Bun.Glob('**/route.{ts,js}');
-  for await (const file of apiGlob.scan({ cwd: appDir })) {
-    const routePath = '/' + file
-      .replace(/\\/route\\.(ts|js)$/, '')
-      .replace(/^route\\.(ts|js)$/, '')
-      .replace(/\\/$/, '');
+  for await (const file of glob.scan({ cwd: appDir })) {
+    const routePath = "/" + file
+      .replace(/\\/page\\.(tsx|jsx|ts|js)$/, "")
+      .replace(/^page\\.(tsx|jsx|ts|js)$/, "")
+      .replace(/\\/$/, "") || "/";
 
-    routes.set(routePath, async (req${useTypescript ? ': Request' : ''}) => {
+    routes.set(routePath === "" ? "/" : routePath, async (req${useTypescript ? ': Request' : ''}) => {
       const module = await import(\`\${appDir}/\${file}\`);
-      const method = req.method.toUpperCase();
-      const handler = module[method];
+      const content = await module.default();
 
-      if (handler) {
-        return handler(req);
-      }
-      return new Response('Method not allowed', { status: 405 });
+      // Wrap with layout
+      let html = content;
+      try {
+        const layout = await import(\`\${appDir}/layout.tsx\`);
+        html = await layout.default({ children: content });
+      } catch {}
+
+      return new Response(html, {
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
     });
   }
 }
 
-// Start server
 async function main() {
   await scanRoutes();
 
@@ -585,94 +508,76 @@ async function main() {
       const url = new URL(req.url);
       let pathname = url.pathname;
 
-      // Remove trailing slash
-      if (pathname !== '/' && pathname.endsWith('/')) {
+      if (pathname !== "/" && pathname.endsWith("/")) {
         pathname = pathname.slice(0, -1);
       }
 
-      // Match route
+      // Check routes
       const handler = routes.get(pathname);
       if (handler) {
         return handler(req);
       }
 
       // Static files
-      const publicPath = './public' + pathname;
+      const publicPath = "./public" + pathname;
       const file = Bun.file(publicPath);
       if (await file.exists()) {
         return new Response(file);
       }
 
-      // 404
-      return new Response('Not Found', { status: 404 });
+      return new Response("Not Found", { status: 404 });
     },
   });
 
   console.log(\`
-  ${c.green}✓${c.reset} Ready in \${Date.now() - startTime}ms
+  ${c.green}▲${c.reset} Ready in \${Date.now() - start}ms
 
   ${c.dim}➜${c.reset}  Local:   ${c.cyan}http://localhost:\${PORT}${c.reset}
-  ${c.dim}➜${c.reset}  Network: ${c.cyan}http://0.0.0.0:\${PORT}${c.reset}
   \`);
 }
 
-const startTime = Date.now();
-main().catch(console.error);
+const start = Date.now();
+main();
 `;
-    fs.writeFileSync(path.join(useSrcDir ? path.join(projectDir, 'src') : projectDir, `server.${ext}`), serverContent);
+    fs.writeFileSync(path.join(projectDir, `server.${ext}`), serverContent);
+    spin8.stop(`Created server.${ext}`);
 
-    // .gitignore
-    const gitignoreContent = `# Dependencies
+    // ============ .gitignore ============
+    const spin9 = spinner('Creating .gitignore...');
+    fs.writeFileSync(path.join(projectDir, '.gitignore'), `# Dependencies
 node_modules
 .pnpm-store
 
 # Build
 dist
 .oven
-.next
-out
 
-# Environment
+# Env
 .env
 .env.local
 .env.*.local
 
 # Logs
 *.log
-npm-debug.log*
 
 # OS
 .DS_Store
-Thumbs.db
 
 # IDE
 .vscode
 .idea
-*.swp
-*.swo
-
-# Testing
-coverage
-
-# Misc
-*.tsbuildinfo
-`;
-    fs.writeFileSync(path.join(projectDir, '.gitignore'), gitignoreContent);
+`);
+    spin9.stop('Created .gitignore');
 
-    // README.md
-    const readmeContent = `# ${projectName}
+    // ============ README.md ============
+    const spin10 = spinner('Creating README.md...');
+    fs.writeFileSync(path.join(projectDir, 'README.md'), `# ${projectName}
 
-This is a [Oven](https://github.com/oven-ttta/oven-framework) project bootstrapped with \`create-oven\`.
+This is an [Oven](https://github.com/oven-ttta/oven-framework) project bootstrapped with \`create-oven\`.
 
 ## Getting Started
 
-First, install dependencies:
-
-\`\`\`bash
-bun install
-\`\`\`
-
-Then, run the development server:
+First, run the development server:
 
 \`\`\`bash
 bun run dev
@@ -680,68 +585,37 @@ bun run dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying \`${useSrcDir ? 'src/' : ''}app/page.${ext}\`. The page auto-updates as you edit the file.
-
-## Project Structure
-
-\`\`\`
-${projectName}/
-├── ${useSrcDir ? 'src/' : ''}app/
-│   ├── layout.${ext}       # Root layout
-│   ├── page.${ext}         # Home page (/)
-│   └── globals.css       # Global styles
-├── public/               # Static files
-${useTailwind ? '├── tailwind.config.js   # Tailwind config\n' : ''}├── oven.config.${ext}       # Oven config
-└── package.json
-\`\`\`
+You can start editing the page by modifying \`app/page.${ext}\`. The page auto-updates as you edit the file.
 
 ## Learn More
 
-- [Oven Documentation](https://github.com/oven-ttta/oven-framework)
+- [Oven GitHub](https://github.com/oven-ttta/oven-framework)
 - [Bun Documentation](https://bun.sh/docs)
-${useTailwind ? '- [Tailwind CSS](https://tailwindcss.com/docs)\n' : ''}
-## Deploy
-
-Deploy your Oven app with Docker or Vercel.
-
-### Docker
-
-\`\`\`bash
-docker build -t ${projectName} .
-docker run -p 3000:3000 ${projectName}
-\`\`\`
-
-### Vercel
-
-\`\`\`bash
-vercel --prod
-\`\`\`
-`;
-    fs.writeFileSync(path.join(projectDir, 'README.md'), readmeContent);
-
-    spin3.stop('Created app files');
+`);
+    spin10.stop('Created README.md');
 
-    // Install dependencies (unless --no-install)
+    // ============ Install dependencies ============
     if (!noInstall) {
-      const packageManager = hasFlag('--use-npm') ? 'npm' : 'bun';
-      const spin4 = spinner(`Installing dependencies with ${packageManager}...`);
-
+      console.log();
+      const spin11 = spinner('Installing dependencies...');
       try {
-        execSync(`${packageManager} install`, {
-          cwd: projectDir,
-          stdio: 'pipe',
-        });
-        spin4.stop(`Installed dependencies with ${packageManager}`);
-      } catch (e) {
-        spin4.fail(`Failed to install dependencies. Run '${packageManager} install' manually.`);
+        execSync('bun install', { cwd: projectDir, stdio: 'pipe' });
+        spin11.stop('Installed dependencies');
+      } catch {
+        try {
+          execSync('npm install', { cwd: projectDir, stdio: 'pipe' });
+          spin11.stop('Installed dependencies');
+        } catch {
+          spin11.fail('Failed to install. Run "bun install" manually.');
+        }
       }
     }
 
-    // Success message
+    // Success
     console.log(`
-${c.green}${c.bold}Success!${c.reset} Created ${c.cyan}${projectName}${c.reset} at ${projectDir}
+${c.green}Success!${c.reset} Created ${c.cyan}${projectName}${c.reset} at ${projectDir}
 
-${c.dim}Inside that directory, you can run several commands:${c.reset}
+Inside that directory, you can run:
 
   ${c.cyan}bun run dev${c.reset}
     Starts the development server.
@@ -750,14 +624,12 @@ ${c.dim}Inside that directory, you can run several commands:${c.reset}
     Builds the app for production.
 
   ${c.cyan}bun run start${c.reset}
-    Runs the built app in production mode.
+    Runs the built app.
 
-${c.dim}We suggest that you begin by typing:${c.reset}
+We suggest that you begin by typing:
 
   ${c.cyan}cd${c.reset} ${projectName}
   ${c.cyan}bun run dev${c.reset}
-
-${c.bold}Happy coding! 🔥${c.reset}
 `);
 
   } catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-oven",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "Create a new Oven project - Next.js-style framework for Bun",
   "type": "module",
   "bin": {