目录
- .devcontainerchore: add vscode github actions extension into devcontainer (#4615)6个月前
- .githubci: revert restoring e2e test workflow (#4709)4个月前
- .huskybuild(deps-dev): bump husky from 8.0.3 to 9.0.7 (#3621)2年前
- .vscodechore: add vscode github actions extension into workspace recommended (#4608)6个月前
- apirefactor: move svg rendering related code into separate module (#4588)6个月前
- scriptsrefactor: move all color related code into separate file (#4557)6个月前
- srcrefactor: update languages JSON (#4630)6个月前
- testsrefactor: move encode HTML function tests into separate module (#4593)6个月前
- themesdocs(theme): auto update theme readme (#4411)7个月前
- .eslintrc.jsonbuild(deps-dev): bump eslint from 8.57.0 to 9.8.0 (#3878)1年前
- .gitignoreAdd performance tests base (#3141)2年前
- .nvmrcchore: bump node.js version from 18 to 22 in whole project (#4377)8个月前
- .prettierignorefeat: added repo card hide border option (#488)5年前
- .prettierrc.jsonfeat: added repo card hide border option (#488)5年前
- .vercelignorechore: remove package lock from vercelignore to prevent discrepancies between dev and prod envs (#4513)7个月前
- CODE_OF_CONDUCT.mdCreate CODE_OF_CONDUCT.md5年前
- CONTRIBUTING.mddocs(contributing): remove hacktoberfest notice (#4686)4个月前
- LICENSErefactor: update license year (#1735)3年前
- SECURITY.mdDocs: Add security policy (#2908)2年前
- codecov.ymlfix: hide parameter array implementation (#162)5年前
- eslint.config.mjsbuild(deps-dev): bump eslint from 8.57.0 to 9.8.0 (#3878)1年前
- express.jsfeat: update express.js to support containerized deployments + replicate the behaviour of the vercel app (#4345)7个月前
- jest.bench.config.jstests: use custom benchmarking solution instead of outdated `jest-bench` package (#4468)7个月前
- jest.config.jsci: add e2e vercel test action (#2054)3年前
- jest.e2e.config.jsci: add e2e vercel test action (#2054)3年前
- package-lock.jsonbuild(deps-dev): Bump @actions/core from 1.11.1 to 2.0.1 (#4702)4个月前
- package.jsonbuild(deps-dev): Bump @actions/core from 1.11.1 to 2.0.1 (#4702)4个月前
- powered-by-vercel.svgchore: added vercel logo5年前
- readme.mddocs: add github action as recommended usage method (#4716)3个月前
- vercel.jsonfeat: disable fluid compute (#4168)1年前
邀请码
版权所有：中国计算机学会技术支持：开源发展技术委员会
京ICP备13000930号-9
京公网安备 11010802032778号
GitHub Readme Stats
Get dynamically generated GitHub stats on your READMEs!
View Demo · Report Bug · Request Feature · FAQ · Ask Question
Love the project? Please consider donating to help it improve!
Table of contents (Click to show)
Important Notices
GitHub Stats Card
Copy and paste this into your markdown, and that’s it. Simple!
Change the
?username=value to your GitHub username.Hiding individual stats
You can pass a query parameter
&hide=to hide any specific stats with comma-separated values.Showing additional individual stats
You can pass a query parameter
&show=to show any specific additional stats with comma-separated values.Showing icons
To enable icons, you can pass
&show_icons=truein the query param, like so:Showing commits count for specified year
You can specify a year and fetch only the commits that were made in that year by passing
&commits_year=YYYYto the parameter.Themes
With inbuilt themes, you can customize the look of the card without doing any manual customization.
Use
&theme=THEME_NAMEparameter like so :All inbuilt themes
GitHub Readme Stats comes with several built-in themes (e.g.
dark,radical,merko,gruvbox,tokyonight,onedark,cobalt,synthwave,highcontrast,dracula).You can look at a preview for all available themes or checkout the theme config file. Please note that we paused the addition of new themes to decrease maintenance efforts; all pull requests related to new themes will be closed.
Responsive Card Theme
Since GitHub will re-upload the cards and serve them from their CDN, we can not infer the browser/GitHub theme on the server side. There are, however, four methods you can use to create dynamics themes on the client side.
Use the transparent theme
We have included a
transparenttheme that has a transparent background. This theme is optimized to look good on GitHub’s dark and light default themes. You can enable this theme using the&theme=transparentparameter like so:Add transparent alpha channel to a themes bg_color
You can use the
bg_colorparameter to make any of the available themes transparent. This is done by setting thebg_colorto a color with a transparent alpha channel (i.e.bg_color=00000000):Use GitHub’s theme context tag
You can use GitHub’s theme context tags to switch the theme based on the user GitHub theme automatically. This is done by appending
#gh-dark-mode-onlyor#gh-light-mode-onlyto the end of an image URL. This tag will define whether the image specified in the markdown is only shown to viewers using a light or a dark GitHub theme:Use GitHub’s new media feature
You can use GitHub’s new media feature in HTML to specify whether to display images for light or dark themes. This is done using the HTML
<picture>element in combination with theprefers-color-schememedia feature.Customization
You can customize the appearance of all your cards however you wish with URL parameters.
Common Options
title_color2f80edtext_color434d58icon_color4c71f2border_colorhide_borderis enabled.e4e2e2bg_colorfffefehide_borderfalsethemedefaultcache_seconds21600localeenborder_radius4.5Gradient in bg_color
You can provide multiple comma-separated values in the bg_color option to render a gradient with the following format:
Available locales
Here is a list of all available locales:
arazbnbgmycacnzh-twcsnlenfilfifrdeelhehihuiditjakrmlnpnofaplpt-brpt-ptrorusasrsr-latnskesswsetathtruk-uauruzviIf we don’t support your language, please consider contributing! You can find more information about how to do it in our contributing guidelines.
Stats Card Exclusive Options
hidenullhide_titlefalsecard_width500px (approx.)hide_rankfalserank_icongithub,percentileordefault).defaultshow_iconsfalseinclude_all_commitsfalseline_height25exclude_reponullcustom_title<username> GitHub Statstext_boldtruedisable_animationsfalsering_color2f80ednumber_formatshort(i.e.6.6k) andlong(i.e.6626).shortnumber_precisionshortnumber format. Must be an integer between 0 and 2. Will be ignored forlongnumber format.nullshowreviews,discussions_started,discussions_answered,prs_mergedorprs_merged_percentage).nullcommits_year<current year> (one year to date)GitHub Extra Pins
GitHub extra pins allow you to pin more than 6 repositories in your profile using a GitHub readme profile.
Yay! You are no longer limited to 6 pinned repositories.
Usage
Copy-paste this code into your readme and change the links.
Endpoint:
api/pin?username=anuraghazra&repo=github-readme-statsOptions
You can customize the appearance and behavior of the pinned repository card using the common options and exclusive options listed in the table below.
show_ownerfalsedescription_lines_countnullDemo
Use
show_ownerquery option to include the repo’s owner usernameGitHub Gist Pins
GitHub gist pins allow you to pin gists in your GitHub profile using a GitHub readme profile.
Usage
Copy-paste this code into your readme and change the links.
Endpoint:
api/gist?id=bbfce31e0217a3689c8d961a356cb10dOptions
You can customize the appearance and behavior of the gist card using the common options and exclusive options listed in the table below.
show_ownerfalseDemo
Use
show_ownerquery option to include the gist’s owner usernameTop Languages Card
The top languages card shows a GitHub user’s most frequently used languages.
Usage
Copy-paste this code into your readme and change the links.
Endpoint:
api/top-langs?username=anuraghazraOptions
You can customize the appearance and behavior of the top languages card using the common options and exclusive options listed in the table below.
hidenullhide_titlefalselayoutnormal&compact&donut&donut-vertical&pie.normalcard_width300langs_count5fornormalanddonut,6for other layoutsexclude_reponullcustom_titleMost Used Languagesdisable_animationsfalsehide_progressfalsesize_weight1count_weight0stats_formatpercentagesandbytes.percentagesLanguage stats algorithm
We use the following algorithm to calculate the languages percentages on the language card:
By default, only the byte count is used for determining the languages percentages shown on the language card (i.e.
size_weight=1andcount_weight=0). You can, however, use the&size_weight=and&count_weight=options to weight the language usage calculation. The values must be positive real numbers. More details about the algorithm can be found here.&size_weight=1&count_weight=0- (default) Orders by byte count.&size_weight=0.5&count_weight=0.5- (recommended) Uses both byte and repo count for ranking&size_weight=0&count_weight=1- Orders by repo countExclude individual repositories
You can use the
&exclude_repo=repo1,repo2parameter to exclude individual repositories.Hide individual languages
You can use
&hide=language1,language2parameter to hide individual languages.Show more languages
You can use the
&langs_count=option to increase or decrease the number of languages shown on the card. Valid values are integers between 1 and 20 (inclusive). By default it was set to5fornormal&donutand6for other layouts.Compact Language Card Layout
You can use the
&layout=compactoption to change the card design.Donut Chart Language Card Layout
You can use the
&layout=donutoption to change the card design.Donut Vertical Chart Language Card Layout
You can use the
&layout=donut-verticaloption to change the card design.Pie Chart Language Card Layout
You can use the
&layout=pieoption to change the card design.Hide Progress Bars
You can use the
&hide_progress=trueoption to hide the percentages and the progress bars (layout will be automatically set tocompact).Change format of language’s stats
You can use the
&stats_format=bytesoption to display the stats in bytes instead of percentage.Demo
WakaTime Stats Card
Change the
?username=value to your WakaTime username.Options
You can customize the appearance and behavior of the WakaTime stats card using the common options and exclusive options listed in the table below.
hidenullhide_titlefalsecard_width495line_height25hide_progressfalsecustom_titleWakaTime Statslayoutdefault&compact.defaultlangs_countnullapi_domainwakatime.comdisplay_formattimeto display time-based stats orpercentto show percentages.timedisable_animationsfalseDemo
All Demos
Choose from any of the default themes
Quick Tip (Align The Cards)
By default, GitHub does not lay out the cards side by side. To do that, you can use such approaches:
Stats and top languages cards
Pinning repositories
Deploy on your own (recommended)
Because the public endpoint is not reliable, we recommend self-deployment via GitHub Actions or your own hosted instance. GitHub Actions is the simplest setup with static SVGs stored in your repo but less frequent updates, while self-hosting takes more work and can serve fresher stats (with caching).
GitHub Actions
GitHub Actions generates static SVGs and avoids per-request API calls. By default it uses
GITHUB_TOKEN(public stats only), for private stats, set a PAT as a secret and pass it to the action instead.Create
/.github/workflows/grs.ymlin your profile repo (USERNAME/USERNAME):Then embed from your profile README:
See more options and examples in the GitHub Readme Stats Action README.
Self-hosted (Vercel/Other)
Running your own instance avoids public rate limits and gives you full control over caching, tokens, and private stats.
First step: get your Personal Access Token (PAT)
For deploying your own instance of GitHub Readme Stats, you will need to create a GitHub Personal Access Token (PAT). Below are the steps to create one and the scopes you need to select for both classic and fine-grained tokens.
Selecting the right scopes for your token is important in case you want to display private contributions on your cards.
Classic token
Generate new token -> Generate new token (classic).Generate tokenand copy it.Fine-grained token
Generate new token -> Generate new token.All repositoriesRepository permission:Generate tokenand copy it.On Vercel
:film_projector: Check Out Step By Step Video Tutorial By @codeSTACKr
Since the GitHub API only allows 5k requests per hour, my
https://github-readme-stats.vercel.app/apicould possibly hit the rate limiter. If you host it on your own Vercel server, then you do not have to worry about anything. Click on the deploy button to get started!:hammer_and_wrench: Step-by-step guide on setting up your own Vercel instance
Log in.Continue with GitHub.Add New...button and select theProjectoption.Continue with GitHubbutton, search for the required Git Repository and import it by clicking theImportbutton. Alternatively, you can import a Third-Party Git Repository using theImport Third-Party Git Repository ->link at the bottom of the page.PAT_1(as shown).On other platforms
:hammer_and_wrench: Step-by-step guide for deploying on other platforms
expressfrom the devDependencies to the dependencies section ofpackage.jsonhttps://github.com/anuraghazra/github-readme-stats/blob/ba7c2f8b55eac8452e479c8bd38b044d204d0424/package.json#L54-L61npm iif needed (initial setup)node express.jsto start the server, or set the entry point toexpress.jsinpackage.jsonif you’re deploying on a managed service https://github.com/anuraghazra/github-readme-stats/blob/ba7c2f8b55eac8452e479c8bd38b044d204d0424/package.json#L11Available environment variables
GitHub Readme Stats provides several environment variables that can be used to customize the behavior of your self-hosted instance. These include:
CACHE_SECONDS0to disable cachingWHITELISTGIST_WHITELISTEXCLUDE_REPOFETCH_MULTI_PAGE_STARStrueorfalseSee the Vercel documentation on adding these environment variables to your Vercel instance.
Keep your fork up to date
You can keep your fork, and thus your private Vercel instance up to date with the upstream using GitHub’s Sync Fork button. You can also use the pull package created by @wei to automate this process.
I open-source almost everything I can and try to reply to everyone needing help using these projects. Obviously, this takes time. You can use this service for free.
However, if you are using this project and are happy with it or just want to encourage me to continue creating stuff, there are a few ways you can do it:
coffeetea.Thanks!
Contributions are welcome! <3
Made with
and JavaScript.