pagescrape-init 1.0.0

package/README.md

@@ -0,0 +1,65 @@
+# pagescrape-init
+
+> Zero-friction CLI to scaffold a production-ready Next.js clone from a PageScrape blueprint.
+
+Deconstruct any website with [PageScrape](https://github.com/pagescrape), then run a single command to generate a fully configured project — complete with design tokens, animation components, AI IDE rules, and a step-by-step build roadmap.
+
+## Quick Start
+
+```bash
+# From a running PageScrape server
+npx pagescrape-init <job-id>
+
+# From a local blueprint file
+npx pagescrape-init --file ./blueprint.json
+```
+
+## What It Does
+
+Running `pagescrape-init` performs 5 automated phases:
+
+| Phase | Action |
+|-------|--------|
+| **1. Scaffold** | Creates a new Next.js app with TypeScript, Tailwind, ESLint |
+| **2. Dependencies** | Installs all libraries detected in the blueprint (GSAP, Three.js, Lenis, etc.) |
+| **3. AI Rules** | Generates `.cursorrules` so your AI IDE understands the project immediately |
+| **4. Components** | Writes starter components (3D scenes, scroll animations, etc.) |
+| **5. Roadmap** | Creates `tasks.md` — a phased build checklist for your AI assistant |
+
+## Usage
+
+```
+npx pagescrape-init <job-id>              Fetch blueprint & scaffold
+npx pagescrape-init --file <path>         Use a local JSON blueprint
+
+Options:
+  -f, --file   <path>     Path to a local blueprint JSON file
+  -s, --server <url>      PageScrape server URL (default: http://localhost:3000)
+  -o, --output <dir>      Output directory name (default: pagescrape-clone)
+  -v, --version           Show version
+  -h, --help              Show help
+```
+
+## Environment Variables
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `PAGESCRAPE_SERVER` | URL of your PageScrape server | `http://localhost:3000` |
+
+## Workflow
+
+1. Open the **PageScrape dashboard** and paste any URL
+2. Wait for the scrape to complete
+3. Copy the **Job ID** from the dashboard
+4. Run `npx pagescrape-init <job-id>` in your terminal
+5. Open the generated folder in **Cursor / Windsurf / your IDE**
+6. Say **"Build Phase 1"** — your AI reads `.cursorrules` and gets to work
+
+## Requirements
+
+- **Node.js 18+** (uses built-in `fetch`)
+- **npm** (for `create-next-app` scaffolding)
+
+## License
+
+ISC

package/dist/index.js

@@ -0,0 +1,321 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const child_process_1 = require("child_process");
+// ── Constants ────────────────────────────────────────────────
+const VERSION = '1.0.0';
+const TARGET_DIR_NAME = 'pagescrape-clone';
+const DEFAULT_SERVER = process.env.PAGESCRAPE_SERVER || 'http://localhost:3000';
+// ── Styled Console Helpers ───────────────────────────────────
+const c = {
+    reset: '\x1b[0m',
+    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',
+    bgRed: '\x1b[41m',
+    bgGreen: '\x1b[42m',
+    bgBlue: '\x1b[44m',
+    bgMagenta: '\x1b[45m',
+};
+function banner() {
+    console.log(`
+${c.magenta}${c.bold}  ╔══════════════════════════════════════════════════╗
+  ║                                                  ║
+  ║   ▄▀▀▄ ▄▀▀▄  ▄▀▀▀▄  ▄▀▀▀▀  ▄▀▀▀▄  ▄▀▀▀▄ ▄▀▀▄  ║
+  ║   █  █ █  █  █   █  █      █   █  █   █ █  █   ║
+  ║   █▀▀  █▀▀█  █   █  █ ▀▀█  █▀▀▀   █▀▀▀  █▀▀    ║
+  ║   █    █  █  ▀▄▄▄▀  ▀▄▄▄▀  ▀▄▄▄▀  ▀     ▀▄▄▄   ║
+  ║                                                  ║
+  ║${c.reset}${c.magenta}   ${c.cyan}P A G E S C R A P E   •   I N I T${c.magenta}              ║
+  ║${c.reset}${c.magenta}   ${c.dim}Zero-Friction Site Cloning Engine${c.reset}${c.magenta}              ║
+  ║                                                  ║
+  ╚══════════════════════════════════════════════════╝${c.reset}
+`);
+}
+function log(emoji, msg) {
+    console.log(`  ${emoji}  ${msg}`);
+}
+function logPhase(num, title) {
+    console.log(`\n${c.bold}${c.cyan}  ┌─ Phase ${num} ─────────────────────────────────────${c.reset}`);
+    console.log(`${c.bold}${c.cyan}  │${c.reset} ${c.bold}${title}${c.reset}`);
+    console.log(`${c.bold}${c.cyan}  └──────────────────────────────────────────────${c.reset}`);
+}
+function logSuccess(msg) {
+    console.log(`  ${c.green}  ✓${c.reset} ${msg}`);
+}
+function logError(msg) {
+    console.error(`\n  ${c.red}${c.bold}✖ ${msg}${c.reset}\n`);
+}
+// ── Core Functions ───────────────────────────────────────────
+function runCommand(command, cwd = process.cwd()) {
+    console.log(`${c.dim}    > ${command}${c.reset}`);
+    (0, child_process_1.execSync)(command, { stdio: 'inherit', cwd });
+}
+async function fetchBlueprint(jobId, server) {
+    const url = `${server}/api/blueprint/${jobId}`;
+    log('📡', `Fetching blueprint from ${c.cyan}${url}${c.reset}...`);
+    let res;
+    try {
+        res = await fetch(url);
+    }
+    catch {
+        logError(`Could not connect to server at ${server}`);
+        console.error(`  ${c.dim}Make sure your PageScrape server is running (npm run dev)${c.reset}`);
+        console.error(`  ${c.dim}Or set PAGESCRAPE_SERVER env variable to your server URL${c.reset}\n`);
+        process.exit(1);
+    }
+    if (res.status === 202) {
+        logError('The scrape is still running. Wait for it to finish on the dashboard, then try again.');
+        process.exit(1);
+    }
+    if (res.status === 404) {
+        logError(`No blueprint found for Job ID "${jobId}".`);
+        console.error(`  ${c.dim}Check your Job ID on the PageScrape dashboard.${c.reset}\n`);
+        process.exit(1);
+    }
+    if (!res.ok) {
+        const errBody = await res.json().catch(() => ({ error: res.statusText }));
+        logError(`Server error: ${errBody.error || res.statusText}`);
+        process.exit(1);
+    }
+    return res.json();
+}
+function loadLocalFile(filePath) {
+    const resolved = path_1.default.resolve(process.cwd(), filePath);
+    if (!fs_1.default.existsSync(resolved)) {
+        logError(`File not found: ${resolved}`);
+        process.exit(1);
+    }
+    try {
+        return JSON.parse(fs_1.default.readFileSync(resolved, 'utf8'));
+    }
+    catch {
+        logError(`Failed to parse JSON from: ${resolved}`);
+        process.exit(1);
+    }
+}
+// ── Project Scaffolder ───────────────────────────────────────
+async function initProject(report, outputDir) {
+    const dirName = outputDir || TARGET_DIR_NAME;
+    const targetDir = path_1.default.resolve(process.cwd(), dirName);
+    // Phase 1: Scaffold Next.js
+    logPhase(1, '🚀 Scaffolding Next.js Project');
+    if (!fs_1.default.existsSync(targetDir)) {
+        runCommand(`npx -y create-next-app@latest ./${dirName} --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm --yes`);
+    }
+    else {
+        log('⚠️', `${c.yellow}Directory "${dirName}" already exists — skipping scaffold.${c.reset}`);
+    }
+    // Phase 2: Install Dependencies
+    logPhase(2, '📦 Installing Blueprint Dependencies');
+    const deps = report.quickStart?.keyDependencies || [];
+    if (deps.length > 0) {
+        const safeDeps = deps
+            .join(' ')
+            .split(' ')
+            .filter((d) => d.trim() && !d.includes('npm') && d !== 'install' && d !== 'i');
+        if (safeDeps.length > 0) {
+            log('📋', `Dependencies: ${c.cyan}${safeDeps.join(', ')}${c.reset}`);
+            runCommand(`npm install ${safeDeps.join(' ')}`, targetDir);
+        }
+    }
+    else {
+        log('ℹ️', `${c.dim}No additional dependencies in blueprint.${c.reset}`);
+    }
+    // Phase 3: AI IDE Rules
+    logPhase(3, '🧠 Injecting AI Rules');
+    if (report.aiIdeRules) {
+        fs_1.default.writeFileSync(path_1.default.join(targetDir, '.cursorrules'), report.aiIdeRules);
+        logSuccess('.cursorrules created');
+    }
+    else {
+        log('ℹ️', `${c.dim}No AI rules in blueprint.${c.reset}`);
+    }
+    // Phase 4: Blueprint Components
+    logPhase(4, '🏗️  Writing Blueprint Components');
+    const componentsDir = path_1.default.join(targetDir, 'src', 'components');
+    const hooksDir = path_1.default.join(targetDir, 'src', 'hooks');
+    fs_1.default.mkdirSync(componentsDir, { recursive: true });
+    fs_1.default.mkdirSync(hooksDir, { recursive: true });
+    let filesWritten = 0;
+    if (report.sceneScaffoldCode && report.sceneScaffoldCode.includes('import')) {
+        fs_1.default.writeFileSync(path_1.default.join(componentsDir, 'BackgroundScene.tsx'), report.sceneScaffoldCode);
+        logSuccess('src/components/BackgroundScene.tsx');
+        filesWritten++;
+    }
+    if (report.gsapSequencerCode && report.gsapSequencerCode.includes('import')) {
+        fs_1.default.writeFileSync(path_1.default.join(hooksDir, 'useScrollAnimations.ts'), report.gsapSequencerCode);
+        logSuccess('src/hooks/useScrollAnimations.ts');
+        filesWritten++;
+    }
+    // Write design tokens as CSS variables
+    if (report.designSystem?.colors) {
+        const colors = report.designSystem.colors;
+        let cssVars = ':root {\n';
+        for (const [key, value] of Object.entries(colors)) {
+            cssVars += `  --color-${key}: ${value};\n`;
+        }
+        cssVars += '}\n';
+        const tokensPath = path_1.default.join(targetDir, 'src', 'styles', 'tokens.css');
+        fs_1.default.mkdirSync(path_1.default.dirname(tokensPath), { recursive: true });
+        fs_1.default.writeFileSync(tokensPath, cssVars);
+        logSuccess('src/styles/tokens.css (design tokens)');
+        filesWritten++;
+    }
+    if (filesWritten === 0) {
+        log('ℹ️', `${c.dim}No component code in blueprint.${c.reset}`);
+    }
+    // Phase 5: Build Roadmap
+    logPhase(5, '🗺️  Generating Build Roadmap');
+    if (report.buildRoadmap?.phases) {
+        let md = '# Build Roadmap\n\n';
+        md += '> Generated by [PageScrape](https://github.com/pagescrape) — Use this checklist with your AI assistant.\n\n';
+        report.buildRoadmap.phases.forEach((phase, i) => {
+            const emoji = ['🏗️', '🎨', '⚡', '🚀', '✨'][i] || '📋';
+            md += `## ${emoji} Phase ${i + 1}: ${phase.name}\n`;
+            md += `**Difficulty:** ${phase.difficulty}\n\n`;
+            if (phase.steps) {
+                phase.steps.forEach((step) => {
+                    md += `- [ ] ${step}\n`;
+                });
+            }
+            md += '\n';
+        });
+        fs_1.default.writeFileSync(path_1.default.join(targetDir, 'tasks.md'), md);
+        logSuccess('tasks.md');
+    }
+    else {
+        log('ℹ️', `${c.dim}No build roadmap in blueprint.${c.reset}`);
+    }
+    // Write the raw blueprint for reference
+    fs_1.default.writeFileSync(path_1.default.join(targetDir, 'pagescrape-blueprint.json'), JSON.stringify(report, null, 2));
+    logSuccess('pagescrape-blueprint.json (raw blueprint)');
+    // ── Success Banner ─────────────────────────────────────────
+    console.log(`
+${c.green}${c.bold}  ╔══════════════════════════════════════════════════╗
+  ║                                                  ║
+  ║       🎉  Zero-Friction Scaffold Complete!       ║
+  ║                                                  ║
+  ╚══════════════════════════════════════════════════╝${c.reset}
+
+  ${c.bold}Next steps:${c.reset}
+
+    ${c.cyan}1.${c.reset} cd ${c.bold}${dirName}${c.reset}
+    ${c.cyan}2.${c.reset} Open in ${c.bold}Cursor${c.reset} / ${c.bold}Windsurf${c.reset} / your AI-powered IDE
+    ${c.cyan}3.${c.reset} Your AI will auto-read ${c.bold}.cursorrules${c.reset} ✨
+    ${c.cyan}4.${c.reset} Say ${c.green}"Build Phase 1"${c.reset} and watch it work
+
+  ${c.dim}Blueprint saved to ${dirName}/pagescrape-blueprint.json${c.reset}
+`);
+}
+// ── Argument Parser ──────────────────────────────────────────
+function parseArgs(argv) {
+    const args = argv.slice(2); // strip node + script path
+    const parsed = {
+        help: false,
+        version: false,
+        server: DEFAULT_SERVER,
+    };
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (arg === '--help' || arg === '-h') {
+            parsed.help = true;
+        }
+        else if (arg === '--version' || arg === '-v') {
+            parsed.version = true;
+        }
+        else if (arg === '--file' || arg === '-f') {
+            parsed.file = args[++i];
+        }
+        else if (arg === '--server' || arg === '-s') {
+            parsed.server = args[++i];
+        }
+        else if (arg === '--output' || arg === '-o') {
+            parsed.output = args[++i];
+        }
+        else if (!arg.startsWith('-')) {
+            parsed.jobId = arg;
+        }
+        else {
+            logError(`Unknown flag: ${arg}`);
+            process.exit(1);
+        }
+    }
+    return parsed;
+}
+function showHelp() {
+    banner();
+    console.log(`  ${c.bold}USAGE${c.reset}`);
+    console.log(`    ${c.cyan}npx pagescrape-init${c.reset} <job-id>              Fetch blueprint & scaffold`);
+    console.log(`    ${c.cyan}npx pagescrape-init${c.reset} --file <path>         Use a local JSON blueprint`);
+    console.log();
+    console.log(`  ${c.bold}OPTIONS${c.reset}`);
+    console.log(`    ${c.green}-f, --file${c.reset}   <path>     Path to a local blueprint JSON file`);
+    console.log(`    ${c.green}-s, --server${c.reset} <url>      PageScrape server URL (default: ${DEFAULT_SERVER})`);
+    console.log(`    ${c.green}-o, --output${c.reset} <dir>      Output directory name (default: ${TARGET_DIR_NAME})`);
+    console.log(`    ${c.green}-v, --version${c.reset}           Show version`);
+    console.log(`    ${c.green}-h, --help${c.reset}              Show this help message`);
+    console.log();
+    console.log(`  ${c.bold}EXAMPLES${c.reset}`);
+    console.log(`    ${c.dim}# Scaffold from a running PageScrape server${c.reset}`);
+    console.log(`    ${c.cyan}npx pagescrape-init 42${c.reset}`);
+    console.log();
+    console.log(`    ${c.dim}# Use a locally saved blueprint file${c.reset}`);
+    console.log(`    ${c.cyan}npx pagescrape-init --file ./my-blueprint.json${c.reset}`);
+    console.log();
+    console.log(`    ${c.dim}# Custom server and output directory${c.reset}`);
+    console.log(`    ${c.cyan}npx pagescrape-init -s https://pagescrape.example.com -o my-clone 7${c.reset}`);
+    console.log();
+    console.log(`  ${c.bold}ENVIRONMENT${c.reset}`);
+    console.log(`    ${c.green}PAGESCRAPE_SERVER${c.reset}       Override the default server URL`);
+    console.log();
+}
+// ── CLI Entry Point ──────────────────────────────────────────
+async function main() {
+    const opts = parseArgs(process.argv);
+    if (opts.version) {
+        console.log(`pagescrape-init v${VERSION}`);
+        process.exit(0);
+    }
+    if (opts.help || (!opts.jobId && !opts.file)) {
+        showHelp();
+        process.exit(0);
+    }
+    banner();
+    let report;
+    if (opts.file) {
+        log('📖', `Loading local blueprint: ${c.cyan}${opts.file}${c.reset}`);
+        report = loadLocalFile(opts.file);
+    }
+    else if (opts.jobId) {
+        report = await fetchBlueprint(opts.jobId, opts.server);
+    }
+    log('✅', `${c.green}Blueprint loaded successfully${c.reset}`);
+    // Show quick summary
+    if (report.quickStart) {
+        console.log();
+        log('📊', `${c.bold}Blueprint Summary:${c.reset}`);
+        if (report.quickStart.techStack) {
+            console.log(`       Tech: ${c.cyan}${report.quickStart.techStack.join(' • ')}${c.reset}`);
+        }
+        if (report.quickStart.difficultyLevel) {
+            console.log(`       Difficulty: ${c.yellow}${report.quickStart.difficultyLevel}${c.reset}`);
+        }
+    }
+    await initProject(report, opts.output);
+}
+main().catch((err) => {
+    logError(`Fatal error: ${err.message || err}`);
+    process.exit(1);
+});

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "pagescrape-init",
+  "version": "1.0.0",
+  "description": "Zero-friction CLI to scaffold a production-ready Next.js clone from a PageScrape blueprint.",
+  "main": "dist/index.js",
+  "bin": {
+    "pagescrape-init": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "dev": "tsx src/index.ts"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "pagescrape",
+    "web-scraping",
+    "scaffold",
+    "nextjs",
+    "cli",
+    "site-clone",
+    "reverse-engineer",
+    "vibe-coding"
+  ],
+  "author": "",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.7.0"
+  }
+}