Documentation

src/
  app/
    page.tsx                    # Landing page + generator
    chat/                       # Conversational interface
    dashboard/                  # User history
    (pages)/                    # Info pages (about, docs, pricing)
    api/
      generate/route.ts         # POST - main generation (SSE)
      improve-prompt/route.ts   # POST - enhance brief
      extract-file/route.ts     # POST - PDF/DOCX parsing
      extract-url/route.ts      # POST - web scraping
      extract-video/route.ts    # POST - YouTube transcripts
      catalog/route.ts          # GET  - presets/layouts/styles
      jobs/[id]/route.ts        # GET  - poll job status
      jobs/[id]/stream/route.ts # GET  - SSE progress stream
  components/
    generator/                  # ContentInput, OptionsPanel, ResultViewer
    chat/                       # Chat interface components
    ui/                         # Radix-based primitives (Button, Card, etc.)
  hooks/
    use-generate.ts             # Generation state machine
    use-chat.ts                 # Chat management
  lib/
    pipeline.ts                 # 7-stage Gemini pipeline (THE CORE)
    engine.ts                   # API client
    constants.ts                # Presets, ratios, limits
    references/                 # 41 prompt reference files
      base-prompt.md            # Text rendering rules (DO NOT MODIFY)
      layouts/                  # 20 layout definitions
      styles/                   # 20 style definitions

# Key settings in next.config.ts
# - Security headers (X-Frame-Options, CSP, etc.)
# - Image optimization domains
# - Serverless function timeout (60s for generation)
# - Output: standalone (for Docker) or default (Vercel)

# globals.css — design tokens
# @theme {
#   --color-gold: #D4A84B;
#   --color-bg: #0A0A0B;
#   --color-surface: #111113;
#   --font-mono: 'IBM Plex Mono', monospace;
#   --font-sans: 'IBM Plex Sans', sans-serif;
# }

# 1. Fork the repository on GitHub
# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/zignal-infographic-lab.git

# 3. Create a feature branch
git checkout -b feature/your-feature-name

# 4. Make changes and commit
git add .
git commit -m "feat: describe your change"

# 5. Push and open a Pull Request
git push origin feature/your-feature-name
# Open PR at https://github.com/Neens6655/zignal-infographic-lab/pulls

# 1. Create the style reference file
# src/lib/references/styles/your-style-name.md

# 2. Follow the structure of existing style files:
#    - Color palette (primary, secondary, accent, bg, text)
#    - Typography specs (heading, body, caption fonts + sizes)
#    - Composition rules (spacing, alignment, density)
#    - Example visual description

# 3. Register in constants
# Add to STYLES array in src/lib/constants.ts

# 4. Test generation with the new style
npm run dev
# Generate an infographic with style: "your-style-name"

# Run before opening a PR
npm run lint          # ESLint
npm run build         # TypeScript + Next.js build

# 1. Connect GitHub repo to Vercel
# 2. Set environment variables in Vercel dashboard:
#    GOOGLE_API_KEY (required)
#    NEXT_PUBLIC_SUPABASE_URL (optional)
#    NEXT_PUBLIC_SUPABASE_ANON_KEY (optional)

# 3. Push to deploy
npm run build         # Verify build passes locally
git push origin main  # Triggers auto-deploy on Vercel