Live SVG · Cloudflare Workers · KV

Animated cards for your GitHub README

ghapi renders animated SVG cards for GitHub READMEs from live data: a title banner, a Cloudflare KV visit counter, GitHub repository stats and animations, the manalejandro.com machines fleet and the real-time electricity price.

Browse the cards Open JSON API Source

0 runtime dependencies
KV visit counters
SVG animations
100% configurable

Cards

Drop any of these into your profile README. They are plain <img> tags, so GitHub renders them everywhere.

Title banner

Animated hero banner with your avatar, name, tagline and live stats.

/card/title

HTML

<img src="https://ghapi.manalejandro.com/card/title?title=Manuel%20Alejandro&subtitle=Building%20things%20on%20the%20edge&user=manalejandro&accent=emerald" alt="Title banner" />

Markdown

- [Title banner](https://ghapi.manalejandro.com/card/title?title=Manuel%20Alejandro&subtitle=Building%20things%20on%20the%20edge&user=manalejandro&accent=emerald)

Visit counter

Every view is counted and stored in Cloudflare KV.

/badge/visits

HTML

<img src="https://ghapi.manalejandro.com/badge/visits?label=profile%20views" alt="Visit counter" />

Markdown

- [Visit counter](https://ghapi.manalejandro.com/badge/visits?label=profile%20views)

GitHub stats

Repositories, stars, followers and more, straight from the GitHub API.

/card/stats

HTML

<img src="https://ghapi.manalejandro.com/card/stats?user=manalejandro&accent=sky" alt="GitHub stats" />

Markdown

- [GitHub stats](https://ghapi.manalejandro.com/card/stats?user=manalejandro&accent=sky)

Top repositories

Your most starred repositories with animated popularity bars.

/card/repos

HTML

<img src="https://ghapi.manalejandro.com/card/repos?user=manalejandro&limit=6&accent=violet" alt="Top repositories" />

Markdown

- [Top repositories](https://ghapi.manalejandro.com/card/repos?user=manalejandro&limit=6&accent=violet)

Languages

An animated donut of the languages you actually write.

/card/languages

HTML

<img src="https://ghapi.manalejandro.com/card/languages?user=manalejandro&accent=amber" alt="Languages" />

Markdown

- [Languages](https://ghapi.manalejandro.com/card/languages?user=manalejandro&accent=amber)

Machines fleet

Live CPU temperature, RAM, disk and UPS status of the manalejandro.com fleet.

/card/machines

HTML

<img src="https://ghapi.manalejandro.com/card/machines?accent=emerald" alt="Machines fleet" />

Markdown

- [Machines fleet](https://ghapi.manalejandro.com/card/machines?accent=emerald)

Electricity price

PVPC price hour by hour plus the live household consumption.

/card/energy

HTML

<img src="https://ghapi.manalejandro.com/card/energy?accent=rose" alt="Electricity price" />

Markdown

- [Electricity price](https://ghapi.manalejandro.com/card/energy?accent=rose)

Full profile block

Copy this whole block to get a centred, ready-to-go profile header.

Markdown

<div align="center">

![Title](https://ghapi.manalejandro.com/card/title?title=Your%20Name&subtitle=Your%20tagline)

<img src="https://ghapi.manalejandro.com/card/stats" height="232" alt="GitHub stats" />
<img src="https://ghapi.manalejandro.com/card/languages" height="252" alt="Languages" />

<img src="https://ghapi.manalejandro.com/card/repos" height="360" alt="Top repositories" />
<img src="https://ghapi.manalejandro.com/badge/visits?label=profile%20views" alt="Profile views" />

</div>

JSON API

Every card has a JSON twin. All responses are CORS-enabled, so you can fetch them from anywhere.

Method	Path	Description
GET	`/card/title`	Animated title banner. Query: title, subtitle, user, avatar, theme, accent, stats.
GET	`/badge/visits`	Visit counter badge stored in Cloudflare KV. Query: label, id, inc=0 to read only.
GET	`/card/visits`	Large animated visit counter card.
GET	`/card/stats`	GitHub user statistics. Query: user.
GET	`/card/repos`	Top repositories with animated bars. Query: user, limit.
GET	`/card/languages`	Language distribution donut. Query: user, limit.
GET	`/card/machines`	Machines fleet dashboard with temperature, memory, disk and UPS.
GET	`/card/energy`	PVPC electricity price hour by hour plus live consumption.
GET	`/api`	JSON index of the public API.
GET	`/api/github`	Aggregated GitHub statistics as JSON.
GET	`/api/visits`	Current visit counter as JSON. Query: id, inc=0 to read only.
GET	`/api/machines`	Normalized machines fleet status as JSON.
GET	`/api/energy`	Normalized electricity price and consumption as JSON.
GET	`/health`	Health probe.

Configuration

The whole project is configurable through wrangler.jsonc vars. Fork it, change these and deploy.

Variable	Value	Description
`GITHUB_USERNAME`	`manalejandro`	GitHub login used by every card by default.
`GITHUB_TOKEN`	`(secret, optional)`	Increases the GitHub API rate limit when set.
`SITE_NAME / SITE_URL`	`ghapi / https://ghapi.manalejandro.com`	Branding and absolute links in the snippets.
`SITE_TAGLINE / SITE_DESCRIPTION`	`custom text`	Copy used by the landing page and metadata.
`MACHINES_API`	`https://machines.manalejandro.com/api/machines`	Upstream machines metrics endpoint.
`ENERGY_PRICE_API`	`https://kwh.manalejandro.com/api/precio-luz`	Upstream PVPC price endpoint.
`ENERGY_CONSUMPTION_API`	`https://kwh.manalejandro.com/api/consumo`	Upstream live consumption endpoint.
`CACHE_TTL_SECONDS`	`300`	KV read-through cache lifetime for upstream data.
`DEFAULT_THEME / DEFAULT_ACCENT`	`dark / emerald`	Palette used when no query parameter is provided.