A high-performance Open Graph image generator built with Cloudflare Workers, Hono, and Vercel OG. Generate beautiful social media cards dynamically for Audius content including tracks, collections, users, comments, and airdrops.
- 🚀 Built on Cloudflare Workers for edge computing
- ⚡ Multiple content types (tracks, collections, users, comments, airdrops)
- 🎨 Consistent design system with reusable components
- 🔄 Centralized API service with error handling
- 📱 Responsive OG images (1200x630)
- 🎯 TypeScript with full type safety
- 🏗️ Clean, modular architecture
# Install dependencies
bun install
# Run development server
bun run dev
# Deploy to Cloudflare Workers
bun run deployGenerate OG images by making GET requests to specific endpoints:
/airdrop/[handle]? # Optional handle parameter
/comment/[comment-id] # Direct comment route
/og/comment/[comment-id] # Generic route
/og/track/[track-id] # Track OG images
/og/user/[user-id] # User profile OG images
/og/collection/[collection-id] # Collection OG images
The project follows a clean, feature-based architecture:
- Features: Each content type has its own directory with route + renderer
- Shared: Common components, services, utilities, and types
- Components: Reusable React components
- Services: Centralized API service
- Types: Full TypeScript type definitions
- Utils: Shared utility functions
- Config: Centralized constants and configuration
See ARCHITECTURE.md for detailed documentation.
To add a new OG image type:
- Create
src/routes/[feature-name].tsxwith route + renderer - Add types and constants directly in your feature file
- Add route in
src/index.tsusing.route('/[feature-name]', [featureName]Route)
See src/routes/template.tsx for a complete example.
- Cloudflare Workers
- Hono Framework
- Vercel OG
- TypeScript
- React (for OG image components)
MIT