GitHub streak stats

One Angular project that serves both the UI and the API, so ng serve runs everything.

Source: github.com/Joshuapavan/Github-stats

Path	What it is
src/	Angular app: interactive stats card plus a README snippet generator
src/server.ts	Express server used by ng serve and in production. Mounts the API, then serves the app
api/	The API in TypeScript: GitHub client (github.ts), stats math (stats.ts), SVG card (card.ts), routes (router.ts)
api/index.ts	Entry used when deploying to Vercel as a serverless function
vercel.json	Vercel build, output and routing

Run locally

Copy .env.example to .env and put your token in it:

cp .env.example .env

Then:

npm install
npm start

Open http://localhost:4200/?username=Joshuapavan. The API is on the same address, for example http://localhost:4200/api/card/Joshuapavan.svg. No scopes are needed on the token, since public contribution data is readable with a bare token.

Why the API exists

A GitHub README can only display images. It can't run Angular or any JavaScript, so the API draws the card as an SVG that GitHub can load. The image links back to this app, so clicking the card opens the app with that username already searched:

[![Joshuapavan's GitHub streak](https://YOUR-SITE.vercel.app/api/card/Joshuapavan.svg)](https://YOUR-SITE.vercel.app/?username=Joshuapavan)

Option	Values	Default
theme	dark, light	dark
range	30, 60, 90 (days in the chart)	30
layout	stacked (480px wide), wide (830px banner)	stacked
details	false hides everything below the chart (stacked) or the bottom row (wide)	shown

Wide banner: https://YOUR-SITE.vercel.app/api/card/Joshuapavan.svg?layout=wide

Other routes: GET /api/stats/:username (JSON the app uses) and GET /health.

Deploy to Vercel

1. Push this folder to a GitHub repo and import it in Vercel. If the repo contains other folders, set Root Directory to this one (Github-stats). The build and routing settings come from vercel.json.
2. Add an environment variable GITHUB_TOKEN (Settings → Environment Variables). It goes in Vercel, not in GitHub's repository secrets, because Vercel is what runs the code.
3. Deploy. Open your site, enter a username, and copy the Markdown or HTML snippet. It already shows your *.vercel.app address, since the app uses the address it's served from.

Things to know:

• Use your production domain in READMEs. Preview deployments can sit behind Vercel's Deployment Protection, which blocks GitHub from loading the image.
• Cards are cached at Vercel's edge for an hour (s-maxage=3600), and GitHub also caches README images, so new activity can take a while to show up.

Other hosts

Any Node host works. Build and run the server it produces:

npm run build
GITHUB_TOKEN=... NG_ALLOWED_HOSTS=your-domain.com PORT=3000 npm run serve:ssr:github-streak-angular

NG_ALLOWED_HOSTS is a comma-separated list of the hostnames the server may answer for. Angular's server rejects the page with a 400 for any other host. The API routes aren't affected. Vercel doesn't need it, since it serves the built page as a static file.