github-profile-summary-cards
A tool to generate your github summary card for profile README
Top Related Projects
:zap: Dynamically generated stats for your github readmes
📊 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:
- Create a new repository named
yourusername/yourusername
- Create a
README.md
file in this repository - 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 }}
- 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.
📊 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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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:
Themes
default | 2077 | dracula | github | github_dark |
gruvbox | monokai | nord_bright | nord_dark | radical |
solarized | solarized_dark | tokyonight | vue | zenburn |
transparent | ||||
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
- theme
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
- A comma separated list of languages to exclude, e.g., exclude=java,rust,jupyter%20notebook
- theme
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
- A comma separated list of languages to exclude, e.g., exclude=java,rust,jupyter%20notebook
- theme
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
- theme
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 )
-
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!
Top Related Projects
:zap: Dynamically generated stats for your github readmes
📊 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
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot