Github profile summary cards

<div align="center"> <h1>GitHub Profile Summary Cards</h1>

繁體中文

<p> A tool to generate your github summary card for profile README. Inspired by <a href=https://github.com/tipsy/profile-summary-for-github>profile-summary-for-github</a> </p> <p> :star: This repo is just for fun, feel free to contribute! :star: </p> <p align="center"> <a href="https://github.com/vn7n24fzkq/github-profile-summary-cards/stargazers"> <img alt="Stargazers" src="https://img.shields.io/github/stars/vn7n24fzkq/github-profile-summary-cards?style=for-the-badge&logo=github&color=f4dbd6&logoColor=D9E0EE&labelColor=302D41"></a> <a href="https://github.com/vn7n24fzkq/github-profile-summary-cards/releases/latest"> <img alt="Releases" src="https://img.shields.io/github/release/vn7n24fzkq/github-profile-summary-cards.svg?style=for-the-badge&logo=semantic-release&color=f5bde6&logoColor=D9E0EE&labelColor=302D41"/></a> <a href="https://www.conventionalcommits.org/en/v1.0.0/"> <img alt="conventionalcommits" src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?style=for-the-badge&logo=conventionalcommits&color=ee99a0&logoColor=D9E0EE&labelColor=302D41"></a> <a href="https://github.com/vn7n24fzkq/github-profile-summary-cards/actions/workflows/github-action.yml"> <img alt="testandlint" src="https://img.shields.io/github/actions/workflow/status/vn7n24fzkq/github-profile-summary-cards/test-and-lint.yml?branch=main&label=Test%20and%20Lint&style=for-the-badge&color=a6da95"></a> </p> </div> <div align="center"> <p> <a href="https://github-profile-summary-cards.vercel.app/demo.html">Get your own cards now!!</a> </p>

</div>

Themes

default	2077	dracula	github	github_dark
gruvbox	monokai	nord_bright	nord_dark	radical
solarized	solarized_dark	tokyonight	vue	zenburn
transparent

More themes

How to use (API)

Profile details card

http://github-profile-summary-cards.vercel.app/api/cards/profile-details?username={username}&theme={theme_name}

• Accept url parameters
  • theme
    • Theme name
  • username
    • Username

Top languages used in repository card

http://github-profile-summary-cards.vercel.app/api/cards/repos-per-language?username={username}&theme={theme_name}&exclude={exclude}

• Accept url parameters
  • theme
    • Theme name
  • username
    • Username
  • exclude:
    • A comma separated list of languages to exclude, e.g., exclude=java,rust,jupyter%20Notebook
      • You can represent a space in the language list by using '%20' when you want to include a space.
    • You can found the supported languages in here

Top languages in commits card

http://github-profile-summary-cards.vercel.app/api/cards/most-commit-language?username={username}&theme={theme_name}&exclude={exclude}

• Accept url parameters
  • theme
    • Theme name
  • username
    • Username
  • exclude:
    • A comma separated list of languages to exclude, e.g., exclude=java,rust,jupyter%20Notebook
      • You can represent a space in the language list by using '%20' when you want to include a space.
    • You can found the supported languages in here

GitHub stats card

http://github-profile-summary-cards.vercel.app/api/cards/stats?username={username}&theme={theme_name}

• Accept url parameters
  • theme
    • Theme name
  • username
    • Username

Productive time card

http://github-profile-summary-cards.vercel.app/api/cards/productive-time?username={username}&theme={theme_name}&utcOffset={utcOffset}

• accept url parameters
  • theme
  • username
  • utcOffset

---

How to use (GitHub Actions)

This action generate your github profile summary cards and make a commit to your repo.
You can also trigger action by yourself after add this action.

:star: Follow tutorial ( Recommendation ) :star:

First step

• You need create a Personal access token with correct permissions.
  Personal token

• Add personal access token to repo secret.

Use template ( create a repository )

• github-profile-summary-cards-example

• Action already setup in this template, you just need click use this template button to create your profile readme.

• After replace GITHUB_TOKEN with your repo secret and trigger action you can use everything in profile-summary-card-output folder.

Add to exist repository

• Add this action to repo and replace GITHUB_TOKEN in action yml file with your repo secret.

---

GitHub Actions usage

After the action finished. You can see all of summary cards are in folder which named profile-summary-card-output.

Note: Some summary cards might not be updated in time, because github raw file has cache time.

ymlCopy
name: GitHub-Profile-Summary-Cards

on:
  schedule: # execute every 24 hours
    - cron: "* */24 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-summary-cards
    permissions:
      contents: write

    steps:
      - uses: actions/checkout@v4
      - uses: vn7n24fzkq/github-profile-summary-cards@release
        env: # default use ${{ secrets.SUMMARY_GITHUB_TOKEN }}, you should replace with your personal access token
          GITHUB_TOKEN: ${{ secrets.SUMMARY_GITHUB_TOKEN }}
        with:
          USERNAME: ${{ github.repository_owner }}
          # BRANCH_NAME is optional, default to main, branch name to push cards
          BRANCH_NAME: "main"
          # UTC_OFFSET is optional, default to zero
          UTC_OFFSET: 8
          # EXCLUDE is an optional comma seperated list of languages to exclude, defaults to ""
          EXCLUDE: ""
          # AUTO_PUSH is optional, a boolean variable default to true, whether automatically push generated files to desired branch
          AUTO_PUSH: true

---

Development (Devbox)

This project uses devbox to ensure a reproducible development environment (Node.js 22, Python 3).

1. Setup

shCopy
# Install devbox
curl -fsSL https://get.jetpack.io/devbox | bash

# Enter shell (installs all dependencies automatically)
devbox shell

2. Local Testing

We provide a script to generate cards locally for visual verification.
Prerequisite: You must have a GITHUB_TOKEN.

shCopy
# Set token (or add to .env)
export GITHUB_TOKEN=your_token_here

# Run local test generator
npm run test:local

Outputs will be saved to debug_output/ folder.

3. Run Vercel API Locally

shCopy
npm i -g vercel
vercel dev

Deploy your own API on Vercel

Quickly deploy your own version!