create-oven 0.1.0 → 0.2.1

package/index.js

@@ -2,6 +2,7 @@
 
 /**
  * create-oven - Create a new Oven project
+ * Like create-next-app but for Bun
  *
  * Usage:
  *   npx create-oven my-app
@@ -10,199 +11,678 @@
 
 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));
 
-const COLORS = {
+// Colors for terminal output
+const c = {
   reset: '\x1b[0m',
-  bright: '\x1b[1m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
   red: '\x1b[31m',
   green: '\x1b[32m',
   yellow: '\x1b[33m',
   blue: '\x1b[34m',
+  magenta: '\x1b[35m',
   cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  bgBlue: '\x1b[44m',
 };
 
-function log(msg) {
-  console.log(msg);
+// Create readline interface for prompts
+function createPrompt() {
+  return readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
 }
 
-function success(msg) {
-  console.log(`${COLORS.green}${msg}${COLORS.reset}`);
+// 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'));
+      }
+    });
+  });
 }
 
-function error(msg) {
-  console.error(`${COLORS.red}${msg}${COLORS.reset}`);
+// 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);
+    });
+  });
 }
 
-function info(msg) {
-  console.log(`${COLORS.cyan}${msg}${COLORS.reset}`);
+// Display a spinner
+function spinner(text) {
+  const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+  let i = 0;
+  const interval = setInterval(() => {
+    process.stdout.write(`\r${c.cyan}${frames[i]}${c.reset} ${text}`);
+    i = (i + 1) % frames.length;
+  }, 80);
+
+  return {
+    stop: (finalText) => {
+      clearInterval(interval);
+      process.stdout.write(`\r${c.green}✓${c.reset} ${finalText || text}\n`);
+    },
+    fail: (finalText) => {
+      clearInterval(interval);
+      process.stdout.write(`\r${c.red}✗${c.reset} ${finalText || text}\n`);
+    },
+  };
 }
 
+// Main function
 async function main() {
   const args = process.argv.slice(2);
-  const projectName = args[0];
-
-  if (!projectName || projectName === '--help' || projectName === '-h') {
-    log(`
-  🔥 ${COLORS.bright}create-oven${COLORS.reset} - Create a new Oven project
-
-  ${COLORS.yellow}Usage:${COLORS.reset}
-    npx create-oven <project-name>
-    bunx create-oven <project-name>
 
-  ${COLORS.yellow}Examples:${COLORS.reset}
+  // 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
+    --no-install          Skip installing dependencies
+    -y, --yes             Use defaults without prompts
+    -h, --help            Show this help message
+    -v, --version         Show version
+
+  ${c.yellow}Examples:${c.reset}
     npx create-oven my-app
-    bunx create-oven my-awesome-app
+    npx create-oven my-app --tailwind --eslint
+    bunx create-oven my-app --src-dir
 
-  ${COLORS.yellow}Options:${COLORS.reset}
-    -h, --help     Show this help message
-    -v, --version  Show version
-
-  ${COLORS.cyan}Learn more: https://github.com/oven-ttta/oven-framework${COLORS.reset}
+  ${c.cyan}Learn more: https://github.com/oven-ttta/oven-framework${c.reset}
     `);
-    process.exit(projectName ? 0 : 1);
+    process.exit(0);
   }
 
-  if (projectName === '--version' || projectName === '-v') {
-    log('create-oven v0.1.0');
+  // Show version
+  if (args.includes('--version') || args.includes('-v')) {
+    console.log('create-oven v0.2.1');
     process.exit(0);
   }
 
-  log(`
-  🔥 Creating new Oven project: ${COLORS.bright}${projectName}${COLORS.reset}
-  `);
+  console.log(`
+${c.bold}${c.cyan}  ╔═══════════════════════════════════════╗
+  ║                                       ║
+  ║   🔥  Create Oven App  v0.2.1         ║
+  ║                                       ║
+  ║   Next.js-style framework for Bun     ║
+  ║                                       ║
+  ╚═══════════════════════════════════════╝${c.reset}
+`);
+
+  const rl = createPrompt();
+
+  try {
+    // Get project name
+    let projectName = args.find(arg => !arg.startsWith('-'));
+
+    if (!projectName) {
+      projectName = await askText(rl, 'What is your project named?', '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') :
+      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') :
+      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') :
+      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?', '@/*'));
+
+    rl.close();
+
+    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');
+
+    // Create directories
+    const dirs = [
+      appDir,
+      path.join(appDir, 'api', 'hello'),
+      path.join(appDir, 'about'),
+      path.join(projectDir, 'public'),
+    ];
+
+    for (const dir of dirs) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+
+    spin.stop('Created project structure');
+
+    // Create files
+    const spin2 = spinner('Creating configuration files...');
+
+    // package.json
+    const ext = useTypescript ? 'ts' : 'js';
+    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`,
+        start: 'bun run dist/server.js',
+        lint: useEslint ? 'eslint . --ext .ts,.tsx' : undefined,
+      },
+      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' }),
+      },
+    };
+    // 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));
+
+    // tsconfig.json
+    if (useTypescript) {
+      const tsconfig = {
+        compilerOptions: {
+          target: 'ES2017',
+          lib: ['dom', 'dom.iterable', 'esnext'],
+          allowJs: true,
+          skipLibCheck: true,
+          strict: true,
+          noEmit: true,
+          esModuleInterop: true,
+          module: 'esnext',
+          moduleResolution: 'bundler',
+          resolveJsonModule: true,
+          isolatedModules: true,
+          jsx: 'preserve',
+          incremental: true,
+          types: ['bun-types'],
+          paths: {
+            [importAlias]: [useSrcDir ? './src/*' : './*'],
+          },
+          baseUrl: '.',
+        },
+        include: [useSrcDir ? 'src/**/*.ts' : '**/*.ts', useSrcDir ? 'src/**/*.tsx' : '**/*.tsx'],
+        exclude: ['node_modules', 'dist'],
+      };
+      fs.writeFileSync(path.join(projectDir, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2));
+    }
+
+    // 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
+    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 projectDir = path.join(process.cwd(), projectName);
+      const postcssConfig = `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`;
+      fs.writeFileSync(path.join(projectDir, 'postcss.config.js'), postcssConfig);
+    }
 
-  // Check if directory exists
-  if (fs.existsSync(projectDir)) {
-    error(`  ✗ Directory "${projectName}" already exists!`);
-    process.exit(1);
-  }
+    // oven.config.ts
+    const ovenConfig = `${useTypescript ? "import type { OvenConfig } from './app/types';\n\n" : ''}const config${useTypescript ? ': OvenConfig' : ''} = {
+  // Server configuration
+  port: 3000,
 
-  // Create project directory
-  fs.mkdirSync(projectDir, { recursive: true });
-
-  // Create project structure
-  const dirs = [
-    'app',
-    'app/api/hello',
-    'app/about',
-    'public',
-    'components',
-    'lib',
-  ];
-
-  for (const dir of dirs) {
-    fs.mkdirSync(path.join(projectDir, dir), { recursive: true });
-  }
+  // Directories
+  appDir: '${useSrcDir ? 'src/' : ''}app',
+  publicDir: 'public',
+};
 
-  info('  Creating project files...');
-
-  // package.json
-  const pkg = {
-    name: projectName,
-    version: '0.1.0',
-    type: 'module',
-    scripts: {
-      dev: 'bun run --hot server.ts',
-      build: 'bun build ./server.ts --outdir ./dist --target bun',
-      start: 'bun run dist/server.js',
-    },
-    dependencies: {},
-    devDependencies: {
-      '@types/bun': 'latest',
-      typescript: '^5.3.0',
-    },
-  };
-  fs.writeFileSync(
-    path.join(projectDir, 'package.json'),
-    JSON.stringify(pkg, null, 2)
-  );
-
-  // tsconfig.json
-  const tsconfig = {
-    compilerOptions: {
-      target: 'ESNext',
-      module: 'ESNext',
-      moduleResolution: 'bundler',
-      strict: true,
-      esModuleInterop: true,
-      skipLibCheck: true,
-      forceConsistentCasingInFileNames: true,
-      jsx: 'preserve',
-      lib: ['ESNext', 'DOM'],
-      types: ['bun-types'],
-    },
-    include: ['**/*.ts', '**/*.tsx'],
-    exclude: ['node_modules'],
+export default config;
+`;
+    fs.writeFileSync(path.join(projectDir, `oven.config.${ext}`), ovenConfig);
+
+    spin2.stop('Created configuration files');
+
+    // Create app files
+    const spin3 = spinner('Creating app files...');
+
+    // Types
+    const typesContent = `export interface PageProps {
+  params: Record<string, string>;
+  searchParams: Record<string, string | string[] | undefined>;
+}
+
+export interface LayoutProps {
+  children: ${useTypescript ? 'string' : 'any'};
+  params: Record<string, string>;
+}
+
+export interface Metadata {
+  title?: string | { default: string; template?: string };
+  description?: string;
+  keywords?: string[];
+  openGraph?: {
+    title?: string;
+    description?: string;
+    images?: { url: string }[];
   };
-  fs.writeFileSync(
-    path.join(projectDir, 'tsconfig.json'),
-    JSON.stringify(tsconfig, null, 2)
-  );
+}
+
+export interface OvenConfig {
+  port?: number;
+  appDir?: string;
+  publicDir?: string;
+}
+`;
+    fs.writeFileSync(path.join(appDir, `types.${ext}`), typesContent);
+
+    // globals.css
+    const globalsCss = useTailwind ? `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-rgb: 10, 10, 10;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: rgb(var(--background-rgb));
+}
+` : `* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-rgb: 255, 255, 255;
+  --oven-primary: #ff6b35;
+  --oven-secondary: #f7931e;
+}
+
+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;
+}
+`;
+    fs.writeFileSync(path.join(appDir, 'globals.css'), globalsCss);
+
+    // favicon.ico (placeholder - just create the public dir marker)
+    fs.writeFileSync(path.join(projectDir, 'public', '.gitkeep'), '');
+
+    // Root Layout
+    const layoutContent = `import${useTypescript ? ' type' : ''} { LayoutProps } from './types';
+import './globals.css';
+
+export const metadata = {
+  title: {
+    default: '${projectName}',
+    template: '%s | ${projectName}',
+  },
+  description: 'Built with Oven - A Next.js-style framework for Bun',
+};
+
+export default function RootLayout({ children }${useTypescript ? ': LayoutProps' : ''}) {
+  return \`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body${useTailwind ? ' class="antialiased"' : ''}>
+        \${children}
+      </body>
+    </html>
+  \`;
+}
+`;
+    fs.writeFileSync(path.join(appDir, `layout.${ext}x`), layoutContent);
+
+    // Home Page
+    const homePageContent = `import${useTypescript ? ' type' : ''} { PageProps, Metadata } from './types';
+
+export const metadata${useTypescript ? ': Metadata' : ''} = {
+  title: 'Home',
+  description: 'Welcome to ${projectName}',
+};
+
+export default function HomePage({ searchParams }${useTypescript ? ': PageProps' : ''}) {
+  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}x
+          </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="/about" ${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;"'}>
+            Learn More →
+          </a>
+          <a href="/api/hello" ${useTailwind ? 'class="px-6 py-3 bg-gray-900 text-white rounded-lg font-medium hover:bg-gray-800 transition"' : 'style="padding: 0.75rem 1.5rem; background: #1a1a1a; color: white; border-radius: 8px; font-weight: 500;"'}>
+            API Example
+          </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>
+        </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.
+          </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>
+      </div>
+    </main>
+  \`;
+}
+`;
+    fs.writeFileSync(path.join(appDir, `page.${ext}x`), homePageContent);
+
+    // About Page
+    const aboutPageContent = `import${useTypescript ? ' type' : ''} { PageProps, Metadata } from '../types';
+
+export const metadata${useTypescript ? ': Metadata' : ''} = {
+  title: 'About',
+  description: 'About ${projectName}',
+};
+
+export default function AboutPage({ params }${useTypescript ? ': PageProps' : ''}) {
+  return \`
+    <main ${useTailwind ? 'class="max-w-4xl mx-auto px-6 py-16"' : 'style="max-width: 900px; margin: 0 auto; padding: 4rem 1.5rem;"'}>
+      <a href="/" ${useTailwind ? 'class="text-oven-400 hover:underline mb-8 inline-block"' : 'style="color: #ff6b35; margin-bottom: 2rem; display: inline-block;"'}>
+        ← Back to Home
+      </a>
+
+      <h1 ${useTailwind ? 'class="text-4xl font-bold mb-6"' : 'style="font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem;"'}>
+        About ${projectName}
+      </h1>
+
+      <p ${useTailwind ? 'class="text-lg text-gray-600 mb-8 leading-relaxed"' : 'style="font-size: 1.1rem; color: #666; margin-bottom: 2rem; line-height: 1.8;"'}>
+        This project was bootstrapped with <strong>create-oven</strong>,
+        a Next.js-style framework powered by the Bun runtime.
+      </p>
+
+      <div ${useTailwind ? 'class="bg-oven-50 border-l-4 border-oven-400 p-6 rounded-r-lg mb-8"' : 'style="background: #fff5f2; border-left: 4px solid #ff6b35; padding: 1.5rem; border-radius: 0 8px 8px 0; margin-bottom: 2rem;"'}>
+        <h2 ${useTailwind ? 'class="text-xl font-semibold mb-4"' : 'style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem;"'}>
+          🚀 Why Oven?
+        </h2>
+        <ul ${useTailwind ? 'class="space-y-2 text-gray-700"' : 'style="list-style: none;"'}>
+          <li ${useTailwind ? '' : 'style="margin-bottom: 0.5rem; color: #444;"'}>✓ Built for Bun runtime - 4x faster than Node.js</li>
+          <li ${useTailwind ? '' : 'style="margin-bottom: 0.5rem; color: #444;"'}>✓ Next.js-style file-based routing</li>
+          <li ${useTailwind ? '' : 'style="margin-bottom: 0.5rem; color: #444;"'}>✓ Zero configuration needed</li>
+          <li ${useTailwind ? '' : 'style="margin-bottom: 0.5rem; color: #444;"'}>✓ Full TypeScript support</li>
+          ${useTailwind ? "<li>✓ Tailwind CSS integration</li>" : ""}
+        </ul>
+      </div>
 
-  // server.ts - Main server file
-  const serverFile = `/**
+      <h2 ${useTailwind ? 'class="text-2xl font-semibold mb-4"' : 'style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem;"'}>
+        Learn More
+      </h2>
+
+      <div ${useTailwind ? 'class="flex gap-4 flex-wrap"' : 'style="display: flex; gap: 1rem; flex-wrap: wrap;"'}>
+        <a href="https://github.com/oven-ttta/oven-framework" target="_blank"
+           ${useTailwind ? 'class="px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition"' : 'style="padding: 0.5rem 1rem; background: #1a1a1a; color: white; border-radius: 8px;"'}>
+          GitHub
+        </a>
+        <a href="https://bun.sh/docs" target="_blank"
+           ${useTailwind ? 'class="px-4 py-2 border border-gray-300 rounded-lg hover:border-gray-400 transition"' : 'style="padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 8px;"'}>
+          Bun Docs
+        </a>
+      </div>
+    </main>
+  \`;
+}
+`;
+    fs.writeFileSync(path.join(appDir, 'about', `page.${ext}x`), aboutPageContent);
+
+    // API Route
+    const apiRouteContent = `// API Route: GET /api/hello
+
+export async function GET(request${useTypescript ? ': Request' : ''}) {
+  return Response.json({
+    message: 'Hello from ${projectName}!',
+    timestamp: new Date().toISOString(),
+    framework: 'Oven 🔥',
+    runtime: 'Bun',
+  });
+}
+
+export async function POST(request${useTypescript ? ': Request' : ''}) {
+  const body = await request.json().catch(() => ({}));
+
+  return Response.json({
+    message: 'Data received!',
+    data: body,
+    timestamp: new Date().toISOString(),
+  }, { status: 201 });
+}
+`;
+    fs.writeFileSync(path.join(appDir, 'api', 'hello', `route.${ext}`), apiRouteContent);
+
+    // Server file
+    const serverContent = `/**
  * Oven Server - ${projectName}
  * A Next.js-style framework powered by Bun
  */
 
 const PORT = parseInt(process.env.PORT || '3000');
 
-// Simple router
-const routes: Map<string, (req: Request) => Promise<Response>> = new Map();
+// Routes map
+const routes${useTypescript ? ': Map<string, (req: Request) => Promise<Response>>' : ''} = new Map();
 
-// Scan app directory for routes
+// Scan and register routes
 async function scanRoutes() {
-  const glob = new Bun.Glob('**/page.tsx');
-  for await (const file of glob.scan({ cwd: './app' })) {
-    const routePath = '/' + file.replace(/\\/page\\.tsx$/, '').replace(/^page\\.tsx$/, '');
-    const normalizedPath = routePath === '/' ? '/' : routePath;
+  const appDir = './${useSrcDir ? 'src/' : ''}app';
 
-    routes.set(normalizedPath, async (req: Request) => {
-      const module = await import(\`./app/\${file}\`);
-      const content = await module.default({ params: {}, searchParams: {} });
+  // 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(/\\/$/, '') || '/';
 
-      // Wrap with layout
-      let html = content;
+    const normalizedPath = routePath === '' ? '/' : routePath;
+
+    routes.set(normalizedPath, async (req${useTypescript ? ': Request' : ''}) => {
       try {
-        const layoutModule = await import('./app/layout.tsx');
-        html = await layoutModule.default({ children: content, params: {} });
-      } catch {}
-
-      // Generate metadata
-      const metadata = module.metadata || {};
-      const title = typeof metadata.title === 'string' ? metadata.title : metadata.title?.default || '${projectName}';
-
-      const fullHtml = \`<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>\${title}</title>
-  \${metadata.description ? \`<meta name="description" content="\${metadata.description}">\` : ''}
-</head>
-<body>
-  \${html}
-</body>
-</html>\`;
-
-      return new Response(fullHtml, {
-        headers: { 'Content-Type': 'text/html; charset=utf-8' },
-      });
+        const module = await import(\`\${appDir}/\${file}\`);
+        const content = await module.default({ params: {}, searchParams: {} });
+
+        // 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 API routes
-  const apiGlob = new Bun.Glob('**/route.ts');
-  for await (const file of apiGlob.scan({ cwd: './app' })) {
-    const routePath = '/' + file.replace(/\\/route\\.ts$/, '').replace(/^route\\.ts$/, '');
-
-    routes.set(routePath, async (req: Request) => {
-      const module = await import(\`./app/\${file}\`);
+  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(/\\/$/, '');
+
+    routes.set(routePath, async (req${useTypescript ? ': Request' : ''}) => {
+      const module = await import(\`\${appDir}/\${file}\`);
       const method = req.method.toUpperCase();
       const handler = module[method];
 
@@ -214,13 +694,13 @@ async function scanRoutes() {
   }
 }
 
-// Main server
+// Start server
 async function main() {
   await scanRoutes();
 
   Bun.serve({
     port: PORT,
-    async fetch(req: Request) {
+    async fetch(req${useTypescript ? ': Request' : ''}) {
       const url = new URL(req.url);
       let pathname = url.pathname;
 
@@ -229,7 +709,7 @@ async function main() {
         pathname = pathname.slice(0, -1);
       }
 
-      // Try to match route
+      // Match route
       const handler = routes.get(pathname);
       if (handler) {
         return handler(req);
@@ -248,266 +728,167 @@ async function main() {
   });
 
   console.log(\`
-  🔥 Oven is ready!
+  ${c.green}✓${c.reset} Ready in \${Date.now() - startTime}ms
 
-  ➜ Local:   http://localhost:\${PORT}
-  ➜ Network: http://0.0.0.0:\${PORT}
+  ${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}
   \`);
 }
 
-main();
-`;
-  fs.writeFileSync(path.join(projectDir, 'server.ts'), serverFile);
-
-  // app/layout.tsx
-  const rootLayout = `import type { LayoutProps } from './types';
-
-export default function RootLayout({ children }: LayoutProps) {
-  return \`
-    <div id="__oven">
-      <nav style="
-        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
-        padding: 1rem 2rem;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      ">
-        <a href="/" style="color: white; text-decoration: none; font-weight: bold; font-size: 1.25rem;">
-          🔥 ${projectName}
-        </a>
-        <div style="display: flex; gap: 1.5rem;">
-          <a href="/" style="color: rgba(255,255,255,0.9); text-decoration: none;">Home</a>
-          <a href="/about" style="color: rgba(255,255,255,0.9); text-decoration: none;">About</a>
-          <a href="/api/hello" style="color: rgba(255,255,255,0.9); text-decoration: none;">API</a>
-        </div>
-      </nav>
-      <main style="min-height: calc(100vh - 60px);">
-        \${children}
-      </main>
-      <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: system-ui, -apple-system, sans-serif; }
-      </style>
-    </div>
-  \`;
-}
-`;
-  fs.writeFileSync(path.join(projectDir, 'app', 'layout.tsx'), rootLayout);
-
-  // app/types.ts
-  const typesFile = `export interface PageProps {
-  params: Record<string, string>;
-  searchParams: Record<string, string>;
-}
-
-export interface LayoutProps {
-  children: string;
-  params: Record<string, string>;
-}
-
-export interface Metadata {
-  title?: string | { default: string; template?: string };
-  description?: string;
-  keywords?: string[];
-}
-`;
-  fs.writeFileSync(path.join(projectDir, 'app', 'types.ts'), typesFile);
-
-  // app/page.tsx
-  const homePage = `import type { PageProps, Metadata } from './types';
-
-export const metadata: Metadata = {
-  title: '${projectName}',
-  description: 'Built with Oven - A Next.js-style framework for Bun',
-};
-
-export default function HomePage({ searchParams }: PageProps) {
-  return \`
-    <div style="max-width: 800px; margin: 0 auto; padding: 4rem 2rem; text-align: center;">
-      <h1 style="font-size: 3rem; margin-bottom: 1rem; background: linear-gradient(135deg, #ff6b35, #f7931e); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-        Welcome to ${projectName} 🔥
-      </h1>
-      <p style="color: #666; font-size: 1.2rem; margin-bottom: 2rem;">
-        Get started by editing <code style="background: #f5f5f5; padding: 0.25rem 0.5rem; border-radius: 4px;">app/page.tsx</code>
-      </p>
-
-      <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
-        <a href="/about" style="
-          background: linear-gradient(135deg, #ff6b35, #f7931e);
-          color: white;
-          padding: 0.75rem 1.5rem;
-          border-radius: 8px;
-          text-decoration: none;
-          font-weight: 500;
-        ">
-          About Page →
-        </a>
-        <a href="/api/hello" style="
-          background: #333;
-          color: white;
-          padding: 0.75rem 1.5rem;
-          border-radius: 8px;
-          text-decoration: none;
-          font-weight: 500;
-        ">
-          API Example
-        </a>
-      </div>
-
-      <div style="margin-top: 4rem; padding: 2rem; background: #f9f9f9; border-radius: 12px; text-align: left;">
-        <h3 style="margin-bottom: 1rem;">📁 Project Structure</h3>
-        <pre style="font-size: 0.9rem; color: #666;">
-${projectName}/
-├── app/
-│   ├── layout.tsx      # Root layout
-│   ├── page.tsx        # Home page (/)
-│   ├── about/
-│   │   └── page.tsx    # About page (/about)
-│   └── api/
-│       └── hello/
-│           └── route.ts # API route (/api/hello)
-├── public/             # Static files
-├── server.ts           # Bun server
-└── package.json
-        </pre>
-      </div>
-    </div>
-  \`;
-}
+const startTime = Date.now();
+main().catch(console.error);
 `;
-  fs.writeFileSync(path.join(projectDir, 'app', 'page.tsx'), homePage);
+    fs.writeFileSync(path.join(useSrcDir ? path.join(projectDir, 'src') : projectDir, `server.${ext}`), serverContent);
 
-  // app/about/page.tsx
-  const aboutPage = `import type { PageProps, Metadata } from '../types';
+    // .gitignore
+    const gitignoreContent = `# Dependencies
+node_modules
+.pnpm-store
 
-export const metadata: Metadata = {
-  title: 'About',
-  description: 'About ${projectName}',
-};
-
-export default function AboutPage({ params }: PageProps) {
-  return \`
-    <div style="max-width: 800px; margin: 0 auto; padding: 4rem 2rem;">
-      <h1 style="font-size: 2.5rem; margin-bottom: 1rem;">About ${projectName}</h1>
-      <p style="color: #666; line-height: 1.8; margin-bottom: 1.5rem;">
-        This is the about page of your Oven application.
-        Built with Bun for maximum performance.
-      </p>
+# Build
+dist
+.oven
+.next
+out
 
-      <div style="background: #fff5f2; padding: 1.5rem; border-radius: 12px; border-left: 4px solid #ff6b35;">
-        <h3 style="margin-bottom: 0.5rem;">🚀 Why Oven?</h3>
-        <ul style="color: #666; line-height: 1.8; margin-left: 1.5rem;">
-          <li>Built for Bun runtime - 4x faster than Node.js</li>
-          <li>Next.js-style file-based routing</li>
-          <li>Zero configuration needed</li>
-          <li>Full TypeScript support</li>
-        </ul>
-      </div>
+# Environment
+.env
+.env.local
+.env.*.local
 
-      <a href="/" style="color: #ff6b35; margin-top: 2rem; display: inline-block; text-decoration: none;">
-        ← Back to Home
-      </a>
-    </div>
-  \`;
-}
-`;
-  fs.writeFileSync(path.join(projectDir, 'app', 'about', 'page.tsx'), aboutPage);
+# Logs
+*.log
+npm-debug.log*
 
-  // app/api/hello/route.ts
-  const apiRoute = `// API Route: /api/hello
+# OS
+.DS_Store
+Thumbs.db
 
-export async function GET(request: Request) {
-  return Response.json({
-    message: 'Hello from ${projectName}!',
-    timestamp: new Date().toISOString(),
-    framework: 'Oven 🔥',
-  });
-}
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
 
-export async function POST(request: Request) {
-  const body = await request.json().catch(() => ({}));
-  return Response.json({
-    message: 'Data received!',
-    data: body,
-  });
-}
-`;
-  fs.writeFileSync(path.join(projectDir, 'app', 'api', 'hello', 'route.ts'), apiRoute);
+# Testing
+coverage
 
-  // .gitignore
-  const gitignore = `node_modules
-dist
-.oven
-*.log
-.DS_Store
-.env
-.env.local
+# Misc
+*.tsbuildinfo
 `;
-  fs.writeFileSync(path.join(projectDir, '.gitignore'), gitignore);
+    fs.writeFileSync(path.join(projectDir, '.gitignore'), gitignoreContent);
 
-  // README.md
-  const readme = `# ${projectName}
+    // README.md
+    const readmeContent = `# ${projectName}
 
-Built with [Oven](https://github.com/oven-ttta/oven-framework) - A Next.js-style framework for Bun 🔥
+This is a [Oven](https://github.com/oven-ttta/oven-framework) project bootstrapped with \`create-oven\`.
 
 ## Getting Started
 
+First, install dependencies:
+
 \`\`\`bash
-# Install dependencies
 bun install
+\`\`\`
 
-# Start development server
-bun run dev
-
-# Build for production
-bun run build
+Then, run the development server:
 
-# Start production server
-bun run start
+\`\`\`bash
+bun run dev
 \`\`\`
 
-Open [http://localhost:3000](http://localhost:3000) to see your app.
+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}x\`. The page auto-updates as you edit the file.
 
 ## Project Structure
 
 \`\`\`
 ${projectName}/
-├── app/
-│   ├── layout.tsx      # Root layout
-│   ├── page.tsx        # Home page (/)
+├── ${useSrcDir ? 'src/' : ''}app/
+│   ├── layout.${ext}x       # Root layout
+│   ├── page.${ext}x         # Home page (/)
+│   ├── globals.css       # Global styles
 │   ├── about/
-│   │   └── page.tsx    # About page (/about)
+│   │   └── page.${ext}x     # About page (/about)
 │   └── api/
 │       └── hello/
-│           └── route.ts # API route (/api/hello)
-├── public/             # Static files
-├── server.ts           # Bun server
+│           └── route.${ext}  # API route (/api/hello)
+├── public/               # Static files
+${useTailwind ? '├── tailwind.config.js   # Tailwind config\n' : ''}├── oven.config.${ext}       # Oven config
 └── package.json
 \`\`\`
 
 ## Learn More
 
-- [Oven GitHub](https://github.com/oven-ttta/oven-framework)
+- [Oven Documentation](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'), readme);
+    fs.writeFileSync(path.join(projectDir, 'README.md'), readmeContent);
+
+    spin3.stop('Created app files');
+
+    // Install dependencies (unless --no-install)
+    if (!noInstall) {
+      const packageManager = hasFlag('--use-npm') ? 'npm' : 'bun';
+      const spin4 = spinner(`Installing dependencies with ${packageManager}...`);
+
+      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.`);
+      }
+    }
 
-  success(`
-  ✅ Project created successfully!
+    // Success message
+    console.log(`
+${c.green}${c.bold}Success!${c.reset} Created ${c.cyan}${projectName}${c.reset} at ${projectDir}
 
-  ${COLORS.yellow}Next steps:${COLORS.reset}
+${c.dim}Inside that directory, you can run several commands:${c.reset}
 
-    cd ${projectName}
-    bun install
-    bun run dev
+  ${c.cyan}bun run dev${c.reset}
+    Starts the development server.
 
-  Open ${COLORS.cyan}http://localhost:3000${COLORS.reset} in your browser.
+  ${c.cyan}bun run build${c.reset}
+    Builds the app for production.
 
-  ${COLORS.bright}Happy cooking! 🔥${COLORS.reset}
-  `);
+  ${c.cyan}bun run start${c.reset}
+    Runs the built app in production mode.
+
+${c.dim}We suggest that you begin by typing:${c.reset}
+
+  ${c.cyan}cd${c.reset} ${projectName}
+  ${c.cyan}bun run dev${c.reset}
+
+${c.bold}Happy coding! 🔥${c.reset}
+`);
+
+  } catch (err) {
+    console.error(`\n${c.red}Error: ${err.message}${c.reset}`);
+    rl.close();
+    process.exit(1);
+  }
 }
 
-main().catch((err) => {
-  error(`Error: ${err.message}`);
-  process.exit(1);
-});
+main();

package/package.json

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