moat-heatmap

GitHub-style contribution heatmap — one cell per day, color-coded by quality and intensity. Two modes: inline JSON for static rendering, or src for live remote data.

Data format

{
  "2026-04-01": { "quality": 0.9, "intensity": 3 },
  "2026-04-02": { "quality": 0.5, "intensity": 1 }
}

• quality: 0–1, where 0 is red (struggling) and 1 is green (crushing). Maps to hue.
• intensity: 0+ count, maps to cell alpha. Defaults to saturating at 5.

Attributes

• src — optional URL returning the JSON above. If set, fetched on mount (with credentials for same-site auth). Overrides inline data.
• weeks — number of weeks to display (default: 52).
• max-intensity — intensity that maps to full alpha (default: 5).

Inline

Remote

Fetches fresh data on every page load. Great for embedding a live activity log on another site.

<moat-heatmap src="https://bellringer.me/api/public/heatmap/lilthorny/french?weeks=26"></moat-heatmap>

The endpoint should return JSON in the data format above. Responses with Access-Control-Allow-Origin: * work cross-origin; same-site fetches include credentials automatically.

Use cases

• Personal profile: render your own live streak on your site
• Project pages: show a project's commit activity heatmap
• Public dashboards: any daily-count time series

Cell colors

Red through yellow through green, by quality. Darker/more saturated cells have higher intensity (more activity that day). Empty cells render as transparent background, so they blend with the page.