codebakers 2.1.0 → 2.2.0

package/src/commands/website.ts

@@ -0,0 +1,658 @@
+import * as p from '@clack/prompts';
+import chalk from 'chalk';
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import Anthropic from '@anthropic-ai/sdk';
+import { execa } from 'execa';
+import { Config } from '../utils/config.js';
+import { textWithVoice } from '../utils/voice.js';
+
+// ============================================================================
+// WEBSITE TEMPLATES
+// ============================================================================
+
+interface WebsiteTemplate {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  sections: string[];
+  style: 'minimal' | 'bold' | 'elegant' | 'playful' | 'corporate';
+}
+
+const TEMPLATES: WebsiteTemplate[] = [
+  {
+    id: 'landing',
+    name: 'Landing Page',
+    description: 'Convert visitors into customers',
+    icon: '🚀',
+    sections: ['hero', 'features', 'testimonials', 'pricing', 'cta', 'footer'],
+    style: 'bold',
+  },
+  {
+    id: 'saas',
+    name: 'SaaS Website',
+    description: 'Software product marketing site',
+    icon: '💻',
+    sections: ['hero', 'features', 'how-it-works', 'pricing', 'faq', 'testimonials', 'cta', 'footer'],
+    style: 'minimal',
+  },
+  {
+    id: 'portfolio',
+    name: 'Portfolio',
+    description: 'Showcase your work',
+    icon: '🎨',
+    sections: ['hero', 'about', 'projects', 'skills', 'contact', 'footer'],
+    style: 'elegant',
+  },
+  {
+    id: 'agency',
+    name: 'Agency Website',
+    description: 'Professional services company',
+    icon: '🏢',
+    sections: ['hero', 'services', 'portfolio', 'team', 'testimonials', 'contact', 'footer'],
+    style: 'corporate',
+  },
+  {
+    id: 'startup',
+    name: 'Startup Page',
+    description: 'Early stage company',
+    icon: '⚡',
+    sections: ['hero', 'problem', 'solution', 'features', 'team', 'waitlist', 'footer'],
+    style: 'bold',
+  },
+  {
+    id: 'restaurant',
+    name: 'Restaurant',
+    description: 'Food & dining establishment',
+    icon: '🍽️',
+    sections: ['hero', 'menu', 'about', 'gallery', 'reservations', 'location', 'footer'],
+    style: 'elegant',
+  },
+  {
+    id: 'ecommerce',
+    name: 'E-commerce',
+    description: 'Online store',
+    icon: '🛒',
+    sections: ['hero', 'featured-products', 'categories', 'bestsellers', 'newsletter', 'footer'],
+    style: 'minimal',
+  },
+  {
+    id: 'blog',
+    name: 'Blog',
+    description: 'Content & articles',
+    icon: '📝',
+    sections: ['hero', 'featured-posts', 'categories', 'newsletter', 'about', 'footer'],
+    style: 'minimal',
+  },
+  {
+    id: 'event',
+    name: 'Event Page',
+    description: 'Conference or meetup',
+    icon: '🎉',
+    sections: ['hero', 'speakers', 'schedule', 'venue', 'sponsors', 'tickets', 'footer'],
+    style: 'bold',
+  },
+  {
+    id: 'nonprofit',
+    name: 'Nonprofit',
+    description: 'Charity or cause',
+    icon: '💚',
+    sections: ['hero', 'mission', 'impact', 'programs', 'donate', 'volunteer', 'footer'],
+    style: 'elegant',
+  },
+  {
+    id: 'personal',
+    name: 'Personal Website',
+    description: 'Your online presence',
+    icon: '👤',
+    sections: ['hero', 'about', 'experience', 'projects', 'blog', 'contact', 'footer'],
+    style: 'minimal',
+  },
+  {
+    id: 'coming-soon',
+    name: 'Coming Soon',
+    description: 'Pre-launch teaser',
+    icon: '⏳',
+    sections: ['hero', 'countdown', 'features-preview', 'waitlist', 'footer'],
+    style: 'bold',
+  },
+  {
+    id: 'custom',
+    name: 'Custom',
+    description: 'Build from scratch with AI',
+    icon: '✨',
+    sections: [],
+    style: 'minimal',
+  },
+];
+
+// ============================================================================
+// MAIN COMMAND
+// ============================================================================
+
+export async function websiteCommand(): Promise<void> {
+  const config = new Config();
+
+  if (!config.isConfigured()) {
+    console.log(chalk.yellow(`
+  ⚠️  CodeBakers isn't set up yet.
+  
+  Run this first:
+    ${chalk.cyan('codebakers setup')}
+`));
+    return;
+  }
+
+  const anthropicCreds = config.getCredentials('anthropic');
+  if (!anthropicCreds?.apiKey) {
+    console.log(chalk.yellow(`
+  ⚠️  Anthropic API key not configured.
+  
+  The website builder needs Claude AI to generate code.
+  
+  Run this to add your API key:
+    ${chalk.cyan('codebakers setup')}
+  
+  Get an API key at:
+    ${chalk.dim('https://console.anthropic.com/settings/keys')}
+`));
+    return;
+  }
+
+  console.log(chalk.cyan(`
+╔═══════════════════════════════════════════════════════════════╗
+║  🌐 WEBSITE BUILDER                                           ║
+║                                                               ║
+║  Describe your website in plain English.                      ║
+║  AI builds it in minutes.                                     ║
+╚═══════════════════════════════════════════════════════════════╝
+`));
+
+  // Step 1: Choose approach
+  const approach = await p.select({
+    message: 'How would you like to build your website?',
+    options: [
+      { value: 'describe', label: '💬 Describe it', hint: 'Tell me what you want in plain English' },
+      { value: 'template', label: '📋 Start from template', hint: 'Choose a pre-made structure' },
+      { value: 'url', label: '🔗 Clone a design', hint: 'Describe a site you like' },
+    ],
+  });
+
+  if (p.isCancel(approach)) return;
+
+  const anthropic = new Anthropic({ apiKey: anthropicCreds.apiKey });
+  let websiteSpec: WebsiteSpec;
+
+  if (approach === 'describe') {
+    websiteSpec = await describeWebsite(anthropic);
+  } else if (approach === 'template') {
+    websiteSpec = await templateWebsite(anthropic);
+  } else {
+    websiteSpec = await cloneDesign(anthropic);
+  }
+
+  if (!websiteSpec) return;
+
+  // Step 2: Confirm spec
+  console.log(chalk.cyan(`\n  📋 Website Plan:\n`));
+  console.log(chalk.bold(`  ${websiteSpec.name}`));
+  console.log(chalk.dim(`  ${websiteSpec.description}\n`));
+  console.log(chalk.dim(`  Style: ${websiteSpec.style}`));
+  console.log(chalk.dim(`  Sections: ${websiteSpec.sections.join(', ')}\n`));
+
+  const confirm = await p.confirm({
+    message: 'Build this website?',
+    initialValue: true,
+  });
+
+  if (!confirm || p.isCancel(confirm)) return;
+
+  // Step 3: Build it
+  await buildWebsite(anthropic, websiteSpec, config);
+}
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface WebsiteSpec {
+  name: string;
+  description: string;
+  style: string;
+  colorScheme: {
+    primary: string;
+    secondary: string;
+    accent: string;
+    background: string;
+    text: string;
+  };
+  sections: string[];
+  content: Record<string, any>;
+  features: string[];
+}
+
+// ============================================================================
+// DESCRIBE WEBSITE
+// ============================================================================
+
+async function describeWebsite(anthropic: Anthropic): Promise<WebsiteSpec | null> {
+  console.log(chalk.dim('\n  Describe your website. Be as detailed as you want.\n'));
+  console.log(chalk.dim('  Examples:'));
+  console.log(chalk.dim('  • "A landing page for my AI writing tool called WriteBot"'));
+  console.log(chalk.dim('  • "Portfolio site for a photographer, dark theme, minimal"'));
+  console.log(chalk.dim('  • "Coffee shop website with menu, location, and online ordering"\n'));
+
+  const description = await textWithVoice({
+    message: 'Describe your website:',
+    placeholder: 'A landing page for...',
+  });
+
+  if (p.isCancel(description)) return null;
+
+  const spinner = p.spinner();
+  spinner.start('Understanding your vision...');
+
+  const response = await anthropic.messages.create({
+    model: 'claude-sonnet-4-20250514',
+    max_tokens: 2048,
+    messages: [{
+      role: 'user',
+      content: `Based on this website description, create a detailed specification.
+
+Description: "${description}"
+
+Return JSON only:
+{
+  "name": "Project name (kebab-case)",
+  "description": "One line description",
+  "style": "minimal | bold | elegant | playful | corporate",
+  "colorScheme": {
+    "primary": "#hex",
+    "secondary": "#hex", 
+    "accent": "#hex",
+    "background": "#hex",
+    "text": "#hex"
+  },
+  "sections": ["hero", "features", ...],
+  "content": {
+    "hero": {
+      "headline": "...",
+      "subheadline": "...",
+      "cta": "..."
+    },
+    "features": [
+      { "title": "...", "description": "...", "icon": "..." }
+    ]
+    // etc for each section
+  },
+  "features": ["responsive", "dark-mode", "animations", etc]
+}
+
+Make the content compelling and professional. Use appropriate sections for the type of website.`
+    }],
+  });
+
+  spinner.stop('Got it!');
+
+  const text = response.content[0].type === 'text' ? response.content[0].text : '';
+  const jsonMatch = text.match(/\{[\s\S]*\}/);
+  
+  if (!jsonMatch) {
+    p.log.error('Failed to understand website description');
+    return null;
+  }
+
+  return JSON.parse(jsonMatch[0]);
+}
+
+// ============================================================================
+// TEMPLATE WEBSITE
+// ============================================================================
+
+async function templateWebsite(anthropic: Anthropic): Promise<WebsiteSpec | null> {
+  const template = await p.select({
+    message: 'Choose a template:',
+    options: TEMPLATES.map(t => ({
+      value: t.id,
+      label: `${t.icon} ${t.name}`,
+      hint: t.description,
+    })),
+  });
+
+  if (p.isCancel(template)) return null;
+
+  const selectedTemplate = TEMPLATES.find(t => t.id === template)!;
+
+  // Get customization details
+  const name = await p.text({
+    message: 'What is your business/project name?',
+    placeholder: 'My Awesome Project',
+  });
+
+  if (p.isCancel(name)) return null;
+
+  const tagline = await p.text({
+    message: 'Tagline or one-line description:',
+    placeholder: 'The best solution for...',
+  });
+
+  if (p.isCancel(tagline)) return null;
+
+  const details = await textWithVoice({
+    message: 'Any other details? (or press enter to skip)',
+    placeholder: 'We help startups with..., Our colors are blue and white...',
+  });
+
+  if (p.isCancel(details)) return null;
+
+  const spinner = p.spinner();
+  spinner.start('Customizing template...');
+
+  const response = await anthropic.messages.create({
+    model: 'claude-sonnet-4-20250514',
+    max_tokens: 2048,
+    messages: [{
+      role: 'user',
+      content: `Create a website spec based on this template and customization.
+
+Template: ${selectedTemplate.name}
+Sections: ${selectedTemplate.sections.join(', ')}
+Default Style: ${selectedTemplate.style}
+
+Business Name: ${name}
+Tagline: ${tagline}
+Additional Details: ${details || 'None provided'}
+
+Return JSON only:
+{
+  "name": "project-name-kebab",
+  "description": "${tagline}",
+  "style": "${selectedTemplate.style}",
+  "colorScheme": {
+    "primary": "#hex",
+    "secondary": "#hex",
+    "accent": "#hex",
+    "background": "#hex",
+    "text": "#hex"
+  },
+  "sections": ${JSON.stringify(selectedTemplate.sections)},
+  "content": {
+    // Content for each section, tailored to the business
+  },
+  "features": ["responsive", "dark-mode", etc]
+}
+
+Make the content specific and compelling for this business.`
+    }],
+  });
+
+  spinner.stop('Template customized!');
+
+  const text = response.content[0].type === 'text' ? response.content[0].text : '';
+  const jsonMatch = text.match(/\{[\s\S]*\}/);
+  
+  if (!jsonMatch) {
+    p.log.error('Failed to customize template');
+    return null;
+  }
+
+  return JSON.parse(jsonMatch[0]);
+}
+
+// ============================================================================
+// CLONE DESIGN
+// ============================================================================
+
+async function cloneDesign(anthropic: Anthropic): Promise<WebsiteSpec | null> {
+  console.log(chalk.dim('\n  Describe a website design you like.\n'));
+  console.log(chalk.dim('  Examples:'));
+  console.log(chalk.dim('  • "Like Linear.app - minimal, clean, dark mode"'));
+  console.log(chalk.dim('  • "Like Stripe - professional, lots of gradients"'));
+  console.log(chalk.dim('  • "Like Notion - simple, friendly, illustrated"\n'));
+
+  const inspiration = await textWithVoice({
+    message: 'What site do you want to be inspired by?',
+    placeholder: 'Like Linear.app but for...',
+  });
+
+  if (p.isCancel(inspiration)) return null;
+
+  const purpose = await p.text({
+    message: 'What is YOUR website for?',
+    placeholder: 'A project management tool for designers',
+  });
+
+  if (p.isCancel(purpose)) return null;
+
+  const spinner = p.spinner();
+  spinner.start('Analyzing design inspiration...');
+
+  const response = await anthropic.messages.create({
+    model: 'claude-sonnet-4-20250514',
+    max_tokens: 2048,
+    messages: [{
+      role: 'user',
+      content: `Create a website spec inspired by another site's design.
+
+Inspiration: "${inspiration}"
+Purpose: "${purpose}"
+
+Analyze the design style of the inspiration (based on your knowledge of popular websites) and create a spec that captures that aesthetic for this new purpose.
+
+Return JSON only:
+{
+  "name": "project-name-kebab",
+  "description": "One line description",
+  "style": "minimal | bold | elegant | playful | corporate",
+  "colorScheme": {
+    "primary": "#hex - inspired by the reference",
+    "secondary": "#hex",
+    "accent": "#hex",
+    "background": "#hex",
+    "text": "#hex"
+  },
+  "sections": ["appropriate sections for the purpose"],
+  "content": {
+    // Compelling content for each section
+  },
+  "features": ["responsive", "dark-mode", "animations", "gradients", etc - based on inspiration]
+}
+
+Capture the FEEL of the inspiration but make it original.`
+    }],
+  });
+
+  spinner.stop('Design analyzed!');
+
+  const text = response.content[0].type === 'text' ? response.content[0].text : '';
+  const jsonMatch = text.match(/\{[\s\S]*\}/);
+  
+  if (!jsonMatch) {
+    p.log.error('Failed to analyze design');
+    return null;
+  }
+
+  return JSON.parse(jsonMatch[0]);
+}
+
+// ============================================================================
+// BUILD WEBSITE
+// ============================================================================
+
+async function buildWebsite(
+  anthropic: Anthropic, 
+  spec: WebsiteSpec,
+  config: Config
+): Promise<void> {
+  const projectPath = path.join(process.cwd(), spec.name);
+
+  // Check if exists
+  if (await fs.pathExists(projectPath)) {
+    const overwrite = await p.confirm({
+      message: `${spec.name} already exists. Overwrite?`,
+      initialValue: false,
+    });
+    if (!overwrite || p.isCancel(overwrite)) return;
+    await fs.remove(projectPath);
+  }
+
+  console.log(chalk.cyan(`\n  🏗️  Building ${spec.name}...\n`));
+
+  const spinner = p.spinner();
+
+  // Step 1: Create project
+  spinner.start('Creating Next.js project...');
+  
+  await execa('npx', [
+    'create-next-app@latest',
+    spec.name,
+    '--typescript',
+    '--tailwind',
+    '--eslint',
+    '--app',
+    '--src-dir',
+    '--import-alias', '@/*',
+    '--no-git',
+  ], { cwd: process.cwd(), reject: false });
+
+  spinner.stop('Project created');
+
+  // Step 2: Install shadcn
+  spinner.start('Setting up shadcn/ui...');
+  
+  await execa('npx', ['shadcn@latest', 'init', '-y', '-d'], { 
+    cwd: projectPath, 
+    reject: false,
+  });
+
+  // Install common components
+  await execa('npx', ['shadcn@latest', 'add', 'button', 'card', 'input', 'badge', '-y'], {
+    cwd: projectPath,
+    reject: false,
+  });
+
+  spinner.stop('UI components ready');
+
+  // Step 3: Generate pages
+  spinner.start('Generating website code...');
+
+  const response = await anthropic.messages.create({
+    model: 'claude-sonnet-4-20250514',
+    max_tokens: 16000,
+    messages: [{
+      role: 'user',
+      content: `Generate a complete Next.js website based on this specification.
+
+Website Spec:
+${JSON.stringify(spec, null, 2)}
+
+Generate these files:
+
+1. src/app/page.tsx - Main landing page with ALL sections
+2. src/app/layout.tsx - Root layout with fonts, metadata
+3. src/app/globals.css - Tailwind config with custom colors
+4. src/components/sections/Hero.tsx
+5. src/components/sections/[OtherSections].tsx - One for each section
+6. src/components/ui/Navbar.tsx
+7. src/components/ui/Footer.tsx
+8. tailwind.config.ts - With custom colors from colorScheme
+
+Requirements:
+- Use TypeScript
+- Use Tailwind CSS for styling
+- Use shadcn/ui components (Button, Card, Input, Badge)
+- Make it responsive (mobile-first)
+- Add smooth scroll behavior
+- Use modern design patterns
+- Include hover effects and transitions
+- Use Lucide icons where appropriate
+
+Color scheme to use:
+- Primary: ${spec.colorScheme.primary}
+- Secondary: ${spec.colorScheme.secondary}
+- Accent: ${spec.colorScheme.accent}
+- Background: ${spec.colorScheme.background}
+- Text: ${spec.colorScheme.text}
+
+Style: ${spec.style}
+${spec.style === 'minimal' ? 'Clean, lots of whitespace, simple' : ''}
+${spec.style === 'bold' ? 'Strong colors, big typography, impactful' : ''}
+${spec.style === 'elegant' ? 'Refined, sophisticated, subtle animations' : ''}
+${spec.style === 'playful' ? 'Fun, colorful, friendly illustrations' : ''}
+${spec.style === 'corporate' ? 'Professional, trustworthy, structured' : ''}
+
+Output format:
+<<<FILE: path/to/file.tsx>>>
+content
+<<<END_FILE>>>
+
+Make it production-quality and visually impressive.`
+    }],
+  });
+
+  const text = response.content[0].type === 'text' ? response.content[0].text : '';
+  
+  // Write files
+  const fileRegex = /<<<FILE:\s*(.+?)>>>([\s\S]*?)<<<END_FILE>>>/g;
+  let match;
+  let fileCount = 0;
+
+  while ((match = fileRegex.exec(text)) !== null) {
+    const filePath = path.join(projectPath, match[1].trim());
+    const content = match[2].trim();
+
+    await fs.ensureDir(path.dirname(filePath));
+    await fs.writeFile(filePath, content);
+    fileCount++;
+  }
+
+  spinner.stop(`Generated ${fileCount} files`);
+
+  // Step 4: Git init
+  spinner.start('Initializing git...');
+  await execa('git', ['init'], { cwd: projectPath, reject: false });
+  await execa('git', ['add', '.'], { cwd: projectPath, reject: false });
+  await execa('git', ['commit', '-m', 'Initial website build by CodeBakers'], { cwd: projectPath, reject: false });
+  spinner.stop('Git initialized');
+
+  // Done!
+  console.log(chalk.green(`
+╔═══════════════════════════════════════════════════════════════╗
+║  ✅ Website built successfully!                               ║
+╠═══════════════════════════════════════════════════════════════╣
+║                                                               ║
+║  ${spec.name.padEnd(55)}║
+║  ${spec.description.substring(0, 55).padEnd(55)}║
+║                                                               ║
+║  Next steps:                                                  ║
+║    cd ${spec.name.padEnd(52)}║
+║    npm run dev                                                ║
+║                                                               ║
+║  Then open http://localhost:3000                              ║
+║                                                               ║
+║  Ready to deploy?                                             ║
+║    codebakers deploy                                          ║
+║                                                               ║
+╚═══════════════════════════════════════════════════════════════╝
+`));
+
+  // Offer to open in browser
+  const openDev = await p.confirm({
+    message: 'Start development server now?',
+    initialValue: true,
+  });
+
+  if (openDev && !p.isCancel(openDev)) {
+    console.log(chalk.dim('\n  Starting dev server...\n'));
+    
+    // Change to project directory and run dev
+    process.chdir(projectPath);
+    await execa('npm', ['run', 'dev'], { 
+      stdio: 'inherit',
+      reject: false,
+    });
+  }
+}
+
+export { TEMPLATES };