📊 GitHub Commits Card

Generate beautiful, embeddable SVG cards for your GitHub commit history

View Demo · Report Bug · Request Feature

✨ Features

🎨 12+ Beautiful Themes

Dark, Light, Dracula, Nord, Tokyo Night, and more
Full custom color support

📱 Responsive Design

Adjustable width (300-800px)
Clean, minimalist aesthetics

🔤 Multiple Fonts

JetBrains Mono, Fira Code
Source Code Pro, Cascadia Code

⚡ Easy Integration

Simple URL-based API
Works in any Markdown file

🌓 Dark/Light Mode Support

Auto-switches with system preference
Using HTML picture element

📊 Rich Information

Repo stats (stars, forks, issues)
Commit SHA, author, date, message

🚀 Quick Start

Basic Usage

![GitHub Commits](https://your-domain.com/api?u=navaranjithsai&repo=MailVoyage&count=2)

Example

![GitHub Commits](https://your-domain.com/api?u=facebook&repo=react&count=5&theme=dark)

With Dark/Light Mode Support

<picture>
  <source
    srcset="https://your-domain.com/api?u=facebook&repo=react&theme=dark"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://your-domain.com/api?u=facebook&repo=react&theme=light"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src="https://your-domain.com/api?u=facebook&repo=react" alt="GitHub Commits" />
</picture>

📖 API Reference

Base URL

https://your-domain.com/

Parameters

Required Parameters

Parameter	Alias	Description	Example
`u`	`username`	GitHub username	`facebook`
`repo`	`r`	Repository name	`react`

Optional Parameters

Parameter	Alias	Default	Description
`count`	`c`	`5`	Number of commits to display (1-20)
`w`	`width`	`500`	Card width in pixels (300-800)
`theme`	-	`dark`	Theme preset name
`radius`	-	`10`	Border radius in pixels
`font`	-	`jetbrains`	Font family

Display Toggles

Parameter	Default	Description
`icons`	`true`	Show/hide icons
`stats`	`true`	Show/hide repository stats
`avatar`	`true`	Show/hide user avatar
`date`	`true`	Show/hide commit dates

Custom Colors (Hex without #)

Parameter	Description	Example
`bg`	Background color	`0d1117`
`border`	Border color	`30363d`
`title`	Title text color	`58a6ff`
`text`	Main text color	`e6edf3`
`accent`	Accent color (dots, highlights)	`238636`

🎨 Themes

Available Themes

🌙 dark	☀️ light	🧛 dracula	❄️ nord
🌃 tokyo_night	🐱 catppuccin	🎨 monokai	🟫 gruvbox
⚫ one_dark	🌈 synthwave	🐙 github_dark	🐙 github_light

Theme Usage

![Commits](https://your-domain.com/?u=user&repo=project&theme=dracula)

🔤 Fonts

Font ID	Font Name	Preview
`jetbrains`	JetBrains Mono	`const commit = "Hello"`
`fira`	Fira Code	`const commit = "Hello"`
`source`	Source Code Pro	`const commit = "Hello"`
`cascadia`	Cascadia Code	`const commit = "Hello"`
`ubuntu`	Ubuntu Mono	`const commit = "Hello"`
`inter`	Inter	`const commit = "Hello"`

Font Usage

![Commits](https://your-domain.com/?u=user&repo=project&font=fira)

📚 Examples

Minimal Card

![Commits](https://your-domain.com/?u=vercel&repo=next.js&stats=false&avatar=false)

Wide Card with More Commits

![Commits](https://your-domain.com/?u=microsoft&repo=vscode&count=10&w=700)

Custom Themed Card

![Commits](https://your-domain.com/?u=torvalds&repo=linux&bg=1a1a2e&title=e94560&text=eaeaea&accent=0f3460)

Dracula Theme with Fira Code

![Commits](https://your-domain.com/?u=gothinkster&repo=realworld&theme=dracula&font=fira)

Full Responsive Example

<p align="center">
  <picture>
    <source
      srcset="https://your-domain.com/api?u=facebook&repo=react&theme=tokyo_night&count=7"
      media="(prefers-color-scheme: dark)"
    />
    <source
      srcset="https://your-domain.com/api?u=facebook&repo=react&theme=github_light&count=7"
      media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
    />
    <img 
      src="https://your-domain.com/api?u=facebook&repo=react&theme=github_light&count=7" 
      alt="React Commits"
      width="500"
    />
  </picture>
</p>

🛠️ Self-Hosting

Option 1: Vercel (Recommended)

Fork this repository
Deploy to Vercel
Set Environment Variables (Optional)
```
GITHUB_TOKEN=your_github_personal_access_token
```
Adding a GitHub token increases rate limits from 60 to 5000 requests/hour

Use your deployed URL

![Commits](https://your-app.vercel.app/api?u=username&repo=repo)

Option 2: Cloudflare Workers

Clone this repository

git clone https://github.com/navaranjithsai/github-commits-card.git
cd github-commits-card
npm install

Configure Wrangler (First time only)
```
npx wrangler login
```
Set GitHub Token (Optional, for higher rate limits)
```
npx wrangler secret put GITHUB_TOKEN
```
Deploy to Cloudflare Workers
```
npm run cf:deploy
```

Use your deployed URL

![Commits](https://github-commits-card.your-subdomain.workers.dev?u=username&repo=repo)

Option 3: Docker

# Clone the repository
git clone https://github.com/navaranjithsai/github-commits-card.git
cd github-commits-card

# Build Docker image
docker build -t github-commits-card .

# Run container
docker run -p 3000:3000 -e GITHUB_TOKEN=your_token github-commits-card

Option 4: Node.js

# Clone and install
git clone https://github.com/navaranjithsai/github-commits-card.git
cd github-commits-card
npm install

# Set environment variable (optional, for higher rate limits)
export GITHUB_TOKEN=your_github_token

# Start Vercel development server
npx vercel dev

# OR start Cloudflare Workers development server
npm run cf:dev

📁 Project Structure

github-commits-card/
├── api/
│   └── index.ts         # Vercel serverless function
├── workers/
│   └── index.ts         # Cloudflare Workers entry point
├── src/
│   ├── types.ts         # TypeScript interfaces
│   ├── themes.ts        # Theme definitions
│   ├── fonts.ts         # Font configurations
│   ├── generator.ts     # SVG generation logic
│   └── utils.ts         # Utility functions
├── public/
│   └── index.html       # Card generator UI
├── package.json
├── tsconfig.json
├── vercel.json          # Vercel configuration
├── wrangler.toml        # Cloudflare Workers configuration
└── README.md

⚙️ Configuration

Environment Variables

Variable	Required	Description
`GITHUB_TOKEN`	No	Personal access token for higher rate limits
`CACHE_SECONDS`	No	Cache duration (default: 1800)

Creating a GitHub Token

Go to GitHub Settings > Developer Settings > Personal Access Tokens
Click "Generate new token (classic)"
Select scope: public_repo (for public repositories only)
Copy the token and add it to your environment variables

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository
Create your feature branch
```
git checkout -b feature/amazing-feature
```

Commit your changes

git commit -m 'Add some amazing feature'

Push to the branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Adding a New Theme

Open src/themes.js

Add your theme following this format:

your_theme: {
    bg: 'background_hex',
    border: 'border_hex',
    title: 'title_hex',
    text: 'text_hex',
    subtext: 'subtext_hex',
    accent: 'accent_hex',
    sha: 'sha_hex'
}

Submit a PR!

📈 Rate Limits

Type	Requests/Hour
Without Token	60
With Token	5,000

Note: Cards are cached for 30 minutes to minimize API calls

🐛 Troubleshooting

Card not showing in README

Ensure the repository is public
Check if the username and repo name are correct
Verify the deployed URL is accessible

Rate limit exceeded

Add a GITHUB_TOKEN environment variable
Wait for the rate limit to reset (1 hour)

Fonts not rendering correctly

Some email clients and older browsers may not support web fonts
The card falls back to system monospace fonts

Custom colors not working

Ensure hex colors are provided without the # symbol
Example: bg=0d1117 not bg=#0d1117

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 Your Name

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

🙏 Acknowledgments

Inspired by github-readme-stats
Theme colors from popular code editor themes
Icons from GitHub Octicons

⭐ Show Your Support

Give a ⭐️ if this project helped you!

Made with ❤️ by developers, for developers

⬆ Back to Top

```

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
.github/workflows		.github/workflows
api		api
public		public
src		src
workers		workers
.cloudflareignore		.cloudflareignore
.dockerignore		.dockerignore
.gitignore		.gitignore
.vercelignore		.vercelignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vercel.json		vercel.json
vitest.config.ts		vitest.config.ts
wrangler.toml		wrangler.toml

Folders and files

Latest commit

History

Repository files navigation