Stateless HTTP microservice for generating cacheable SVG progress bars via URL parameters
Production: Runs entirely on Cloudflare Workers at the edge Latency: <50ms globally
# Start Workers dev server
pnpm dev
# Start web UI
pnpm dev:web
# Run tests
pnpm test# Deploy to Cloudflare Workers
pnpm deployCurrent (v2.0): Cloudflare Workers-only (all SVG generation at edge)
See docs/ARCHITECTURE.md for detailed architecture documentation.
├── packages/
│ └── core/ # Shared SVG generation library (@barbuilder/core)
│ ├── src/
│ │ ├── core/ # Types, colours, validation, SVG builder
│ │ ├── generators/ # Percentage, X-of-Y, icon generators
│ │ └── styles/ # Classic, pill, minimal, badge, segments renderers
│ └── tests/ # Unit tests for core logic
│
├── cloudflare-worker/ # Production: Workers-based API (DEPLOYED)
│ ├── src/index.ts # Workers fetch handler
│ └── wrangler.toml # Cloudflare configuration
│
├── web/ # Web UI (static site)
│ ├── partials/ # Shared HTML partials (head, header, footer)
│ ├── src/css/main.css # Consolidated stylesheet
│ └── docs/ # API docs, embedding guide
│
├── api/ # Fastify server (integration tests only)
│ ├── src/ # Server & routes (imports @barbuilder/core)
│ └── tests/integration/ # HTTP-level integration tests
│
└── docs/
├── ARCHITECTURE.md # System architecture
└── DEPLOYMENT.md # Deployment & CI/CD setup
All endpoints run on Cloudflare Workers at https://api.barbuilder.dev
Percentage:
GET /percentage/{value}?style=badge&color=red&label=Build
X of Y:
GET /xofy/{current}/{total}?style=segments&color=blue
Icon:
GET /icon/{current}/{total}?shape=star&color=gold&label=Rating
classic- Traditional bar with label sectionpill- Rounded ends, modern lookminimal- Thin bar, no labelsbadge- Badge style with auto-valuesegments- Discrete blocks
style- Style name (default:classic)color- Named color or hex (red,4c1,ff0000)label- Text label (auto-generated if omitted)theme-lightordark(default:light)width- Width in pixels (50-500, default: 200)segments- Number of segments for segments style (2-20)shape- Icon shape:8bit-heart,circle,heart,star(default:star)- All shapes support half-rendering for fractional values (e.g., 3.5 out of 5)
8bit-heart- Custom pixel art heart with retro video game aesthetic
Build Status Badge:
Task Progress:
Star Rating:
The web interface supports multiple languages:
- English (default)
- Spanish (Español)
- French (Français)
- German (Deutsch)
Language preference is stored in browser localStorage and auto-detected based on browser settings. Users can switch languages using the selector in the header.
The trophy icon shape has been removed due to rendering issues with half-states (Bootstrap Icons does not provide a trophy-half variant, requiring workarounds that didn't render cleanly).
Migration:
- Replace
?shape=trophywith?shape=star,?shape=heart, or?shape=8bit-heart - Existing URLs with
?shape=trophywill return a 400 error with a message indicating the shape is no longer supported
New shape added in v2.0:
8bit-heart- Retro pixel art heart with black outline
See CONTRIBUTING.md for development setup, testing, and deployment instructions.
Free tier includes:
- 100,000 requests/day
- Global edge deployment
- Zero cold starts
- Unlimited bandwidth
After free tier: ~$0.50 per million requests
Estimated monthly cost: $0-5 for most use cases
- Cache Hit (95%): <10ms
- Cache Miss (5%): <50ms (generated at edge)
- Availability: 99.99%
- Global: 300+ Cloudflare edge locations
MIT — see LICENSE.