|
| 1 | +# 🎨 Worker Landing Page Generator |
| 2 | + |
| 3 | +**Automatically generate cinematic landing pages for Cloudflare Workers.** |
| 4 | + |
| 5 | +Analyzes your Worker's architecture, APIs, and features to create a stunning, marketing-quality landing page inspired by modern SaaS microsites—complete with gradient heroes, scroll animations, and narrative-driven copy. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## 🎯 What It Does |
| 10 | + |
| 11 | +Transform this: |
| 12 | +```json |
| 13 | +// wrangler.jsonc |
| 14 | +{ |
| 15 | + "durable_objects": { ... }, |
| 16 | + "d1_databases": [ ... ], |
| 17 | + "ai": { "binding": "AI" } |
| 18 | +} |
| 19 | +``` |
| 20 | + |
| 21 | +Into **this**: A fully responsive, animated landing page with: |
| 22 | +- 🌊 Gradient hero with live stats |
| 23 | +- 📊 Architecture diagrams |
| 24 | +- ✨ Scroll-triggered animations |
| 25 | +- 🎨 8 narrative sections (Problem → Solution → Features → Roadmap → CTA) |
| 26 | +- 📱 Mobile-first Tailwind design |
| 27 | +- 🧠 AI-powered content generation |
| 28 | + |
| 29 | +--- |
| 30 | + |
| 31 | +## 🚀 Quick Start |
| 32 | + |
| 33 | +### Generate a Landing Page |
| 34 | + |
| 35 | +```bash |
| 36 | +# Option 1: Use the TypeScript generator (requires tsx) |
| 37 | +npx tsx landing-generator/generate.ts |
| 38 | + |
| 39 | +# Option 2: Use the programmatic API |
| 40 | +import { generateLandingPage } from './landing-generator'; |
| 41 | + |
| 42 | +const html = await generateLandingPage({ |
| 43 | + wranglerConfig: require('./wrangler.jsonc'), |
| 44 | + packageJson: require('./package.json'), |
| 45 | + customAnalysis: { |
| 46 | + purpose: { |
| 47 | + headline: 'Your Killer Headline', |
| 48 | + tagline: 'What makes this Worker special', |
| 49 | + valueStatement: '2-3 sentences explaining impact' |
| 50 | + } |
| 51 | + } |
| 52 | +}); |
| 53 | + |
| 54 | +fs.writeFileSync('public/index.html', html); |
| 55 | +``` |
| 56 | +
|
| 57 | +Output: `public/index.html` ready to deploy! |
| 58 | +
|
| 59 | +--- |
| 60 | +
|
| 61 | +## 📁 Architecture |
| 62 | +
|
| 63 | +``` |
| 64 | +landing-generator/ |
| 65 | +├── analyzer.ts # Extracts features from Worker config |
| 66 | +├── blueprint.ts # Transforms analysis into content structure |
| 67 | +├── template.ts # Generates HTML with Tailwind + animations |
| 68 | +├── types.ts # TypeScript interfaces |
| 69 | +├── index.ts # Main API |
| 70 | +├── generate.ts # CLI script for this Worker |
| 71 | +└── README.md # This file |
| 72 | +``` |
| 73 | +
|
| 74 | +### Data Flow |
| 75 | +
|
| 76 | +``` |
| 77 | +wrangler.jsonc + package.json |
| 78 | + ↓ |
| 79 | + [Analyzer] ← Extracts: DOs, D1, AI, KV, Queues |
| 80 | + ↓ |
| 81 | + [Blueprint] ← Generates: 8 sections of content |
| 82 | + ↓ |
| 83 | + [Template] ← Renders: HTML with Tailwind + Alpine.js |
| 84 | + ↓ |
| 85 | + index.html ← Deploy to Worker static assets |
| 86 | +``` |
| 87 | +
|
| 88 | +--- |
| 89 | +
|
| 90 | +## 🎨 Design Philosophy |
| 91 | +
|
| 92 | +Inspired by **modern SaaS microsites** (Vibe Engineer, Linear, Vercel): |
| 93 | +
|
| 94 | +1. **Gradient Hero** - Bold headline + live stats + dual CTAs |
| 95 | +2. **Problem Section** - 3-4 pain point cards |
| 96 | +3. **Solution Section** - Architecture diagram + component breakdown |
| 97 | +4. **Features** - Grid of capability cards with tech tags |
| 98 | +5. **Metrics** - Quantitative impact (response time, uptime, scale) |
| 99 | +6. **Use Cases** - Real-world persona scenarios |
| 100 | +7. **Roadmap** - Timeline with v1/v2/v3 milestones |
| 101 | +8. **CTA** - Gradient footer with final push to action |
| 102 | +
|
| 103 | +**Tone**: "Apple keynote meets Cloudflare docs" — confident, technical, inspiring. |
| 104 | +
|
| 105 | +--- |
| 106 | +
|
| 107 | +## 🧱 Content Blueprint |
| 108 | +
|
| 109 | +The `BlueprintGenerator` creates narrative-driven content: |
| 110 | +
|
| 111 | +### Auto-Generated Sections |
| 112 | +
|
| 113 | +| Section | Source | Output | |
| 114 | +|---------|--------|--------| |
| 115 | +| **Hero** | `package.json` description | Headline, tagline, stats bar | |
| 116 | +| **Problem** | Inferred from features | Pain point cards | |
| 117 | +| **Solution** | `wrangler.jsonc` bindings | ASCII architecture diagram | |
| 118 | +| **Features** | Durable Objects, AI, Queues | Capability cards with icons | |
| 119 | +| **Metrics** | Component count + defaults | Response time, uptime, scale | |
| 120 | +| **Use Cases** | Architecture patterns | Persona-based scenarios | |
| 121 | +| **Roadmap** | Generic template | v1 (done) → v2 (progress) → v3 (planned) | |
| 122 | +
|
| 123 | +### Customization |
| 124 | +
|
| 125 | +Override any section with `customAnalysis`: |
| 126 | +
|
| 127 | +```typescript |
| 128 | +const html = await generateLandingPage({ |
| 129 | + wranglerConfig, |
| 130 | + packageJson, |
| 131 | + customAnalysis: { |
| 132 | + purpose: { |
| 133 | + headline: 'GitHub Automation Redefines How AI Agents Code', |
| 134 | + tagline: 'Multi-protocol GitHub proxy for autonomous operations', |
| 135 | + valueStatement: 'Transform GitHub into programmable infrastructure...' |
| 136 | + }, |
| 137 | + metrics: [ |
| 138 | + { value: '<50ms', label: 'P95 Latency', trend: 'positive' }, |
| 139 | + { value: '99.99%', label: 'Uptime', trend: 'positive' } |
| 140 | + ], |
| 141 | + painPoints: [ |
| 142 | + { |
| 143 | + title: 'AI Agents Lack GitHub Access', |
| 144 | + description: '...', |
| 145 | + solution: 'Native MCP Protocol with 7+ tools' |
| 146 | + } |
| 147 | + ] |
| 148 | + } |
| 149 | +}); |
| 150 | +``` |
| 151 | +
|
| 152 | +--- |
| 153 | +
|
| 154 | +## 🎭 Style System |
| 155 | +
|
| 156 | +### Color Palette |
| 157 | +
|
| 158 | +- **Primary**: Indigo (`#4f46e5`) - Tech, professional |
| 159 | +- **Secondary**: Emerald (`#10b981`) - Success, growth |
| 160 | +- **Neutral**: Slate/Stone - Typography, backgrounds |
| 161 | +
|
| 162 | +### Animations |
| 163 | +
|
| 164 | +1. **Scroll Triggers** - Fade-in-up on viewport intersection |
| 165 | +2. **Float** - Gentle vertical motion on architecture diagrams |
| 166 | +3. **Pulse Glow** - Breathing shadow on primary CTA |
| 167 | +4. **Gradient Flows** - Hero and CTA sections |
| 168 | +
|
| 169 | +### Typography |
| 170 | +
|
| 171 | +- **Font**: Inter (Google Fonts CDN) |
| 172 | +- **Hierarchy**: 7xl hero → 5xl sections → 2xl cards → base body |
| 173 | +
|
| 174 | +--- |
| 175 | +
|
| 176 | +## 🔧 API Reference |
| 177 | +
|
| 178 | +### `generateLandingPage(config)` |
| 179 | +
|
| 180 | +Main entry point for HTML generation. |
| 181 | +
|
| 182 | +```typescript |
| 183 | +interface GeneratorConfig { |
| 184 | + wranglerConfig?: WranglerConfig; // Parsed wrangler.jsonc |
| 185 | + packageJson?: PackageJson; // Parsed package.json |
| 186 | + sourceFiles?: Record<string, string>; // Optional source code |
| 187 | + apiSpec?: OpenAPISpec; // Optional OpenAPI spec |
| 188 | + customAnalysis?: Partial<WorkerAnalysis>; // Override defaults |
| 189 | +} |
| 190 | + |
| 191 | +Returns: Promise<string> // Full HTML document |
| 192 | +``` |
| 193 | +
|
| 194 | +### `WorkerAnalyzer.analyzeWorker(config)` |
| 195 | +
|
| 196 | +Extracts architecture components and features. |
| 197 | +
|
| 198 | +**Returns**: |
| 199 | +- `components[]` - Durable Objects, D1, KV, Queues, AI |
| 200 | +- `features[]` - API capabilities |
| 201 | +- `endpoints[]` - HTTP routes |
| 202 | +- `techStack[]` - Dependencies (Hono, Zod, etc.) |
| 203 | +
|
| 204 | +### `BlueprintGenerator.generate(analysis)` |
| 205 | +
|
| 206 | +Transforms analysis into 8-section content structure. |
| 207 | +
|
| 208 | +**Returns**: `ContentBlueprint` with hero, problem, solution, features, etc. |
| 209 | +
|
| 210 | +### `TemplateGenerator.generate(blueprint, name)` |
| 211 | +
|
| 212 | +Renders HTML with Tailwind CSS and Alpine.js. |
| 213 | +
|
| 214 | +**Features**: |
| 215 | +- Glass morphism nav |
| 216 | +- IntersectionObserver animations |
| 217 | +- Responsive grid layouts |
| 218 | +- Semantic HTML5 sections |
| 219 | +
|
| 220 | +--- |
| 221 | +
|
| 222 | +## 📦 Deployment |
| 223 | +
|
| 224 | +### Static Assets (Recommended) |
| 225 | +
|
| 226 | +Add to your Worker: |
| 227 | +
|
| 228 | +```typescript |
| 229 | +// src/index.ts |
| 230 | +import landingPage from '../public/index.html'; |
| 231 | + |
| 232 | +app.get('/', (c) => c.html(landingPage)); |
| 233 | +``` |
| 234 | +
|
| 235 | +Update `wrangler.jsonc`: |
| 236 | +```jsonc |
| 237 | +{ |
| 238 | + "assets": { "directory": "./public" } |
| 239 | +} |
| 240 | +``` |
| 241 | +
|
| 242 | +### Pages Deployment |
| 243 | +
|
| 244 | +```bash |
| 245 | +npx wrangler pages deploy public |
| 246 | +``` |
| 247 | +
|
| 248 | +### Workers Sites |
| 249 | +
|
| 250 | +```bash |
| 251 | +wrangler publish |
| 252 | +``` |
| 253 | +
|
| 254 | +--- |
| 255 | +
|
| 256 | +## 🧪 Example Output |
| 257 | +
|
| 258 | +**For this Worker (Core GitHub API):** |
| 259 | +
|
| 260 | +✅ Generated `public/index.html` with: |
| 261 | +- 8 full sections (Hero → CTA) |
| 262 | +- Architecture diagram showing: Worker → 3 DOs → D1/AI/Queues |
| 263 | +- 6 feature cards (Multi-Protocol, AI Intelligence, Real-Time, etc.) |
| 264 | +- 3 use case scenarios (AI Agents, DevOps, Teams) |
| 265 | +- 3-phase roadmap (v1 complete → v2 in progress → v3 planned) |
| 266 | +- Responsive navigation with mobile menu |
| 267 | +- Scroll animations on all sections |
| 268 | +
|
| 269 | +**View**: Open `public/index.html` in browser or deploy to Worker domain! |
| 270 | +
|
| 271 | +--- |
| 272 | +
|
| 273 | +## 🎨 Customization Guide |
| 274 | +
|
| 275 | +### Change Color Scheme |
| 276 | +
|
| 277 | +Edit `template.ts`: |
| 278 | +```typescript |
| 279 | +.gradient-hero { |
| 280 | + background: linear-gradient(135deg, #YOUR_COLOR_1 0%, #YOUR_COLOR_2 100%); |
| 281 | +} |
| 282 | +``` |
| 283 | +
|
| 284 | +### Add New Section |
| 285 | +
|
| 286 | +1. Define in `types.ts`: `export interface MySection { ... }` |
| 287 | +2. Add to `ContentBlueprint`: `mySection: MySection` |
| 288 | +3. Generate in `blueprint.ts`: `generateMySection(analysis)` |
| 289 | +4. Render in `template.ts`: `generateMySection(blueprint.mySection)` |
| 290 | +
|
| 291 | +### Custom Icons |
| 292 | +
|
| 293 | +Replace emoji icons in `blueprint.ts`: |
| 294 | +```typescript |
| 295 | +private static selectFeatureIcon(solution: string): string { |
| 296 | + return solution.includes('AI') ? '🤖' : '✨'; |
| 297 | +} |
| 298 | +``` |
| 299 | +
|
| 300 | +--- |
| 301 | +
|
| 302 | +## 🚀 Future Enhancements |
| 303 | +
|
| 304 | +- [ ] Live metrics from `/metrics` endpoint |
| 305 | +- [ ] Auto-extract features from OpenAPI spec |
| 306 | +- [ ] Generate diagrams from D1 schema |
| 307 | +- [ ] Dark mode toggle |
| 308 | +- [ ] Interactive API playground embed |
| 309 | +- [ ] Video/screenshot gallery section |
| 310 | +- [ ] Customer testimonials from GitHub issues |
| 311 | +- [ ] Internationalization (i18n) |
| 312 | +
|
| 313 | +--- |
| 314 | +
|
| 315 | +## 📚 Inspiration |
| 316 | +
|
| 317 | +- **Vibe Engineer** - Gradient heroes, narrative sections |
| 318 | +- **Linear.app** - Clean typography, scroll animations |
| 319 | +- **Vercel.com** - Architecture diagrams, feature grids |
| 320 | +- **Cloudflare Docs** - Technical accuracy + visual polish |
| 321 | +
|
| 322 | +--- |
| 323 | +
|
| 324 | +## 📄 License |
| 325 | +
|
| 326 | +MIT - Use freely for your Workers! |
| 327 | +
|
| 328 | +--- |
| 329 | +
|
| 330 | +## 🤝 Contributing |
| 331 | +
|
| 332 | +Found a bug or have ideas? |
| 333 | +This generator is part of the **Core GitHub API** Worker project. |
| 334 | +
|
| 335 | +**Improvements welcome**: |
| 336 | +- Better AI-powered content generation |
| 337 | +- More sophisticated architecture diagram rendering |
| 338 | +- Video embedding support |
| 339 | +- Advanced analytics integration |
| 340 | +
|
| 341 | +--- |
| 342 | +
|
| 343 | +**Built with ❤️ on Cloudflare Workers** |
0 commit comments