Showing my GitHub contribution graph

The contribution graph on the home page is the site's take on the green calendar from my GitHub profile. Instead of embedding an image, I fetch the data and draw the graph myself so it matches the site's colours and both languages.

Where the data comes from

There are two paths:

1. With a token: GitHub's official GraphQL API. The contributionsCollection query returns a contribution count for every day of the past year.
2. Without a token: the public version of the calendar GitHub shows on profile pages. Each cell carries its date and its tooltip carries that day's count, so reading them gives the same data.

The second path means the site works with no keys at all. Because GitHub can change that page's structure at any time, production uses the official API.

Colour levels

Each day's count becomes a level from 0 to 4. Zero contributions is 0; everything else is split into quarters of the busiest day of the year:

const step = max / 4;
const level = count === 0 ? 0 : Math.min(4, Math.max(1, Math.ceil(count / step)));

The colours aren't hard-coded; they're a mix of the site's accent colour and the background, so the graph adapts to light and dark themes on its own.

Drawing

The graph is a single SVG rendered on the server: 53 weeks × 7 days. Every square has a title with the date and count, which shows up as a tooltip on hover without any JavaScript. Month names follow the page language.

Caching

The data barely changes during a day, so it refreshes once a day. If GitHub can't be reached, a quiet "unavailable right now" message of the same size takes its place, so the page never shifts or breaks.