Documentation

gh-window

Browser-window style GitHub stats cards delivered as image responses for README files, HTML embeds, and profile pages.

Endpoint/api/[username]
Themesdark, light
FormatsMarkdown, HTML
Open Test BenchOpen HTML Test Page
https://gh-window.vercel.app/api/YOUR_USERNAME?theme=light&accent=84cc16&show=repos,stars,streak

Overview

What this project ships

Image endpoint for GitHub stats cards at `/api/[username]`.

Theme support for dark and light card variants.

Optional accent color control with hex values.

Selective stat rendering through the `show` query parameter.

Preview and testing surfaces for both app and plain HTML usage.

Endpoint

Main production URL

https://gh-window.vercel.app/api/YOUR_USERNAME

The endpoint returns a generated image, so it works in README markdown, raw HTML, and any consumer that accepts a remote image URL.

Query Parameters

Supported inputs

theme`dark` or `light`
accent3-digit or 6-digit hex without `#`
showComma-separated subset of supported stat keys

show Keys

Visible sections

reposstarsfollowersstreaklangs

If `show` is omitted, gh-window renders all available sections. `streak` only appears when streak data is available.

Streak Data

Token-dependent section

`GITHUB_TOKEN` enables the GraphQL contribution query.

Without the token, streak values remain unavailable.

The image still renders cleanly; the streak row is omitted.

Markdown Embeds

Copy-ready examples

![GitHub Stats](https://gh-window.vercel.app/api/YOUR_USERNAME)
![GitHub Stats](https://gh-window.vercel.app/api/YOUR_USERNAME?theme=light)
![GitHub Stats](https://gh-window.vercel.app/api/YOUR_USERNAME?show=repos,stars,streak)
![GitHub Stats](https://gh-window.vercel.app/api/YOUR_USERNAME?theme=light&accent=84cc16)

HTML

Direct image usage

<img src="https://gh-window.vercel.app/api/YOUR_USERNAME" alt="GitHub stats" />

Use the raw image URL when the consumer is not markdown-aware.

Testing

Ways to verify production behavior

`/test` shows the embed variants inside the Next app and lets you change usernames.

`/readme-test.html` uses the production domain directly in a plain browser page.

`README.test.md` lets you verify markdown rendering with the real deployed image URLs.

Deployment

Environment and caching notes

`NEXT_PUBLIC_BASE_URL` should resolve to the deployed site.

`GITHUB_TOKEN` improves rate limits and unlocks streak data.

The image route sets CDN-friendly cache headers.

GitHub fetches use revalidation to avoid hot-path overfetching.

Files

Important implementation paths

[app/api/[username]/route.tsx](/E:/Ivors/Developement/open-source/gh-window/app/api/[username]/route.tsx)

[lib/github.ts](/E:/Ivors/Developement/open-source/gh-window/lib/github.ts)

[lib/card.tsx](/E:/Ivors/Developement/open-source/gh-window/lib/card.tsx)

[app/[username]/page.tsx](/E:/Ivors/Developement/open-source/gh-window/app/[username]/page.tsx)

[app/test/page.tsx](/E:/Ivors/Developement/open-source/gh-window/app/test/page.tsx)