codestats-readme
codestats-readme copied to clipboard
:zap: Dynamically generated Code::Stats SVGs for your github readmes
Code::Stats Readme
Get dynamically generated Code::Stats stats on your readmes!
Features
- Features
- Profile Card
- History Card
- Top Languages Card
- Common Options
Profile Card
Copy paste this into your markdown content, and that's it. Simple!
Change the ?username=
value to your GitHub's username.
[](https://github.com/Aviortheking/codestats-readme)
Options
Option Name | Preview | Description |
---|---|---|
hide | Hide specific line, ex: &hide=xp or &hide=xp,recent_xp |
|
show_icons | shows icons before each lines ex: &show_icons |
|
hide_rank | hide the rank circle ex: &hide_rank |
|
line_height | change the line Height of each lines, ex: &line_height=45 |
|
icon_color | change the icons color, ex: &icon_color=123456&show_icons |
|
text_color | change the text colors, ex: &text_color=123456 |
History Card
Shows your XP history as it's shown on your profile.
Copy-paste this code into your readme and change the links.
Endpoint: api/history?username=Aviortheking
[](https://github.com/aviortheking/codestats-readme)
Options
Option Name | Preview | Description |
---|---|---|
layout | Change the layout to the horizontal one ex: &layout=horizontal |
|
height | Change the height of the card Only on horizontal layout ex: &height=400 Default: 300 |
|
width | Change the width of the card Only on vertical layout ex: &width=TypeScript Default: 500 |
|
title | Change the title of the card ex: &title=History |
|
days_count | Change the number of days shown ex: &days_count=7 Default: 14 |
|
reverse_order | Reverse the order of the days ex: &reverse_order |
|
hide | Hide specifics languages and put them in Others ex: &hide=TypeScript |
|
language_count | Change the number of languages shown before going to Others ex: &language_count=3 defaults: 8 |
|
text_color | change the text colors ex: &text_color=654321 |
Top Languages Card
Top languages card shows user's top languages.
Copy-paste this code into your readme and change the links.
Endpoint: api/top-langs?username=aviortheking
[](https://github.com/aviortheking/codestats-readme)
Options
Option Name | Preview | Description |
---|---|---|
hide | Hide Specific language ex: &hide=TypeScript or &hide=TypeScript,TypeScript%20(JSX) |
|
language_count | Change the number of languages shown before going to Others ex: &language_count=3 defaults: 8 |
|
card_width | hide the rank circle ex: &card_width=600 defaults: 300 |
|
layout | make the layout more compact ex: &layout=compact |
|
text_color | change the text colors ex: &text_color=654321 |
Common Options
Options Name | Preview | Description |
---|---|---|
title_color | Change the title color ex: &title_color=654321 |
|
bg_color | Change the background color ex: &bg_color=654321 |
|
hide_border | Hide the border ex: &hide_border |
|
hide_title | Hide the title ex: &hide_border |
|
theme | See #themes | |
cache_seconds | set the cache header manually (min: 1800, max: 86400) ex: &cache_seconds=86400 Default: 1800 or 30 minutes |
With inbuilt themes you can customize the look of the card without doing any manual customization.
Use ?theme=THEME_NAME
parameter like so :-

All inbuilt themes :-
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 & you can also contribute new themes if you like :D
Quick Tip (Align your Cards)
You usually won't be able to layout the images side by side. To do that you can use this approach:
<a href="https://github.com/aviortheking/codestats-readme">
<img align="center" src="https://codestats-readme.avior.me/api?username=aviortheking" />
</a>
<a href="https://github.com/aviortheking/codestats-readme">
<img align="center" src="https://codestats-readme.avior.me/api/top-langs/?username=aviortheking" />
</a>
Deploy on your own Server
- Build the Docker image
docker build . --tag your-tag
- run the Docker image
docker run your-tag
- Profit on the port 3000!
Contributions are welcomed! <3
Made with :heart: and Typescript.