Serverless GitHub Calendar

The popular react-github-calendar library and custom SVG generators like ghchart rely on a glaring architectural flaw. Because GitHub’s API requires a Personal Access Token (PAT), legacy plugins route all traffic through unauthenticated, third-party public proxy servers—essentially a frontend hack to bypass CORS and auth.

These proxies frequently suffer from rate limits and downtime under heavy load, causing loading spinners, layout shifts, and broken heatmaps on developer portfolios everywhere.

Serverless GitHub Calendar completely reimagines this architecture to achieve 100% uptime and zero runtime dependencies by shifting data fetching from a fragile runtime proxy to a robust, server-first data pipeline.

The Architecture

Instead of fetching data dynamically on page load via a vulnerable proxy, I engineered a highly-optimized GitHub Action that runs natively within the user’s repository.

  1. The Serverless Backend: A scheduled GitHub Action queries the GitHub GraphQL API directly using an injected token. It calculates exact contribution quartiles and current/longest streak statistics.
  2. Static Injection: The Action injects the parsed data as a static contributions.json file directly into the public folder and commits it.
  3. Zero-Overhead Rendering: The companion React component (and Next.js Server Component) reads this static JSON locally. It renders a mathematically precise SVG grid using native CSS variables for color-mix theming.

Key Innovations

  • Zero API Rate Limits: The data is pulled on a cron schedule natively, entirely sidestepping public API rate limits.
  • Next.js RSC Support: By providing a ServerHeatmap component, Next.js App Router users can inject the heatmap onto their page during Server-Side Rendering (SSR) via fs.readFileSync, shipping zero bytes of client-side JavaScript.
  • Private Contributions: Natively supports fetching private contributions securely without ever exposing Personal Access Tokens to the client browser.
  • A11y: Fully compliant SVG generation with dynamic ARIA labels for screen readers.

This project was built to be the definitive, un-breakable standard for embedding GitHub heatmaps.