Convert Figma logo to code with AI

vn7n24fzkq logogithub-profile-summary-cards

A tool to generate your github summary card for profile README

2,559
310
2,559
23

Top Related Projects

:zap: Dynamically generated stats for your github readmes

13,445

📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!

🏆 Add dynamically generated GitHub Stat Trophies on your readme

It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README

Better GitHub statistics images for your profile, with stats from private repos too

Quick Overview

GitHub Profile Summary Cards is a project that generates profile summary cards for GitHub users. It creates visually appealing cards displaying various statistics and information about a user's GitHub activity, which can be easily added to GitHub profile READMEs.

Pros

  • Enhances GitHub profiles with attractive, informative cards
  • Offers a variety of card types and themes
  • Easy to set up and integrate into existing profiles
  • Automatically updates with the latest GitHub data

Cons

  • Requires GitHub Actions to generate and update cards
  • Limited customization options for card designs
  • May not accurately reflect private repository activity
  • Can increase the load time of GitHub profile pages

Code Examples

This project is not primarily a code library, but rather a tool for generating profile cards. However, here are some examples of how to use the cards in your GitHub profile README:

![](https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=yourusername&theme=vue)

This code generates a profile details card with the Vue theme.

![](https://github-profile-summary-cards.vercel.app/api/cards/repos-per-language?username=yourusername&theme=dracula)

This code creates a card showing the distribution of repositories by language using the Dracula theme.

![](https://github-profile-summary-cards.vercel.app/api/cards/most-commit-language?username=yourusername&theme=solarized_dark)

This code displays a card with the most used languages in commits, using the Solarized Dark theme.

Getting Started

To use GitHub Profile Summary Cards in your profile:

  1. Create a new repository named yourusername/yourusername
  2. Create a README.md file in this repository
  3. Add the following workflow file to .github/workflows/profile-summary-cards.yml:
name: GitHub-Profile-Summary-Cards

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

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate

    steps:
      - uses: actions/checkout@v2
      - uses: vn7n24fzkq/github-profile-summary-cards@release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          USERNAME: ${{ github.repository_owner }}
  1. Add the desired card URLs to your README.md file as shown in the code examples above.

Competitor Comparisons

:zap: Dynamically generated stats for your github readmes

Pros of github-readme-stats

  • More customizable with various themes and layout options
  • Provides real-time statistics without requiring manual updates
  • Supports additional features like top languages, wakatime stats, and streak stats

Cons of github-readme-stats

  • May have performance issues with high traffic or large repositories
  • Limited to displaying statistics for individual users, not organizations
  • Requires users to expose their GitHub token, which may raise security concerns

Code Comparison

github-readme-stats:

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

github-profile-summary-cards:

name: GitHub-Profile-Summary-Cards
uses: vn7n24fzkq/github-profile-summary-cards@release
env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Both repositories aim to enhance GitHub profiles with visual statistics, but they differ in implementation and features. github-readme-stats offers more customization and real-time updates, while github-profile-summary-cards provides a comprehensive set of cards that can be generated periodically. The choice between them depends on specific needs, such as desired update frequency, customization options, and security considerations.

13,445

📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!

Pros of metrics

  • More comprehensive and customizable, offering a wider range of metrics and visualizations
  • Supports plugins for extended functionality and integration with various services
  • Provides a web-based interface for easy configuration and preview

Cons of metrics

  • More complex setup and configuration process
  • Requires more resources to generate and update due to its extensive features
  • May have a steeper learning curve for new users

Code comparison

metrics:

- uses: lowlighter/metrics@latest
  with:
    token: ${{ secrets.METRICS_TOKEN }}
    config_timezone: America/New_York
    plugin_languages: yes
    plugin_languages_ignored: html, css

github-profile-summary-cards:

- uses: vn7n24fzkq/github-profile-summary-cards@release
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  with:
    USERNAME: ${{ github.repository_owner }}

Both repositories provide GitHub Actions for generating profile statistics, but metrics offers more customization options and plugins. github-profile-summary-cards is simpler to set up and use, focusing primarily on generating summary cards for GitHub profiles. metrics is more feature-rich but may require more time to configure and maintain. The choice between the two depends on the desired level of detail and customization for your GitHub profile.

🏆 Add dynamically generated GitHub Stat Trophies on your readme

Pros of github-profile-trophy

  • Focuses on achievements and milestones, providing a gamified experience
  • Offers a wider variety of trophies and customization options
  • Easier to set up with a single line of markdown

Cons of github-profile-trophy

  • Limited to displaying trophies, lacking comprehensive profile statistics
  • May not provide as detailed insights into coding habits and language preferences
  • Less visually diverse, primarily using a single trophy-style design

Code Comparison

github-profile-trophy:

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)

github-profile-summary-cards:

name: GitHub-Profile-Summary-Cards
uses: vn7n24fzkq/github-profile-summary-cards@release
env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

github-profile-trophy offers a simpler setup with a single line of markdown, while github-profile-summary-cards requires a GitHub Action workflow configuration.

github-profile-summary-cards provides a more comprehensive set of profile statistics and visualizations, including language usage, commit history, and repository details. It offers a broader overview of a user's GitHub activity and coding preferences.

In contrast, github-profile-trophy focuses on gamifying the GitHub experience by showcasing achievements as trophies. It's more suitable for users who want to highlight specific milestones and accomplishments in a visually appealing way.

Both projects serve different purposes and can complement each other in a GitHub profile, providing users with options to showcase their GitHub activity in unique ways.

It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

Pros of github-profile-views-counter

  • Focuses specifically on tracking and displaying profile view counts
  • Lightweight and easy to implement with minimal configuration
  • Provides real-time view count updates

Cons of github-profile-views-counter

  • Limited to view count functionality, lacking comprehensive profile statistics
  • Doesn't offer visual representations like graphs or charts
  • May require additional setup for more advanced customization

Code Comparison

github-profile-views-counter:

![](https://komarev.com/ghpvc/?username=your-github-username)

github-profile-summary-cards:

name: GitHub-Profile-Summary-Cards

on:
  schedule:
    - cron: "0 0 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-summary-cards
    steps:
      - uses: actions/checkout@v2
      - uses: vn7n24fzkq/github-profile-summary-cards@release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

The github-profile-views-counter provides a simple, single-line implementation for adding view counts to your profile. In contrast, github-profile-summary-cards requires a more complex setup using GitHub Actions to generate comprehensive profile statistics and visualizations.

While github-profile-views-counter excels in simplicity and ease of use for tracking views, github-profile-summary-cards offers a more feature-rich solution for showcasing various aspects of your GitHub activity through customizable cards and graphs.

🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README

Pros of github-readme-streak-stats

  • Focuses specifically on GitHub contribution streaks, providing a unique and motivational metric
  • Offers extensive customization options for colors, date formats, and localization
  • Includes a user-friendly demo site for easy configuration and preview

Cons of github-readme-streak-stats

  • Limited to streak statistics, lacking comprehensive GitHub profile information
  • Requires more setup and configuration compared to the all-in-one approach of github-profile-summary-cards

Code Comparison

github-readme-streak-stats:

def calculate_streak(contributions):
    current_streak = 0
    longest_streak = 0
    for day in contributions:
        if day > 0:
            current_streak += 1
            longest_streak = max(longest_streak, current_streak)
        else:
            current_streak = 0
    return current_streak, longest_streak

github-profile-summary-cards:

function generateCards(username) {
    const cards = [
        generateContributionCard(username),
        generateLanguageCard(username),
        generateStatsCard(username),
        generateRepoCard(username),
        generateCommitCard(username)
    ];
    return cards;
}

The code snippets highlight the focused approach of github-readme-streak-stats on streak calculations, while github-profile-summary-cards generates a variety of profile summary cards.

Better GitHub statistics images for your profile, with stats from private repos too

Pros of github-stats

  • Provides a more detailed breakdown of language usage percentages
  • Includes a "Lines of code changed" statistic for a deeper activity overview
  • Offers customizable themes for generated images

Cons of github-stats

  • Lacks visual graphs and charts for data representation
  • Does not provide contribution calendars or commit history visualizations
  • Has fewer overall statistics and metrics compared to github-profile-summary-cards

Code Comparison

github-stats:

languages = get_languages(oauth_token)
repos = get_total_repos(oauth_token)
commits = get_total_commits(oauth_token)

github-profile-summary-cards:

const statsData = await getStatsData(token, user);
const contributionsData = await getContributionsData(token, user);
const profileDetails = await getProfileDetails(token, user);

Both projects use API calls to fetch user data, but github-stats focuses on specific metrics like languages and commit counts, while github-profile-summary-cards retrieves a broader range of data including contributions and profile details.

github-stats generates static images with key statistics, whereas github-profile-summary-cards creates multiple cards with various visualizations. The latter offers more comprehensive GitHub profile analytics, but github-stats provides a simpler, more focused approach to displaying GitHub activity.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

GitHub Profile Summary Cards

繁體中文

A tool to generate your github summary card for profile README. Inspired by profile-summary-for-github

:star: This repo is just for fun, feel free to contribute! :star:

Stargazers Releases conventionalcommits testandlint

Themes

default2077draculagithubgithub_dark
gruvboxmonokainord_brightnord_darkradical
solarizedsolarized_darktokyonightvuezenburn
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

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.

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

Local Run

  • Require node 16, lower versions should get some problems.
  • Add personal access token to .env file. ex: GITHUB_TOKEN=abcda69ddf66ae95538c5b1666591b59b4abc73a
  • Remember npm run build after modifying any code
npm run run [username] [UTC offset]

Example

npm run run vn7n24fzkq 8
  • To locally run the API you can use the vercel dev package
vercel dev

Deploy your own API on Vercel

Quickly deploy your own version!

Deploy with Vercel