/codestats-readme

:zap: Dynamically generated Code::Stats SVGs for your github readmes

Primary LanguageTypeScriptMIT LicenseMIT

GitHub Readme Stats

Code::Stats Readme

Get dynamically generated Code::Stats stats on your readmes!

Features

Profile Card

Copy paste this into your markdown content, and that's it. Simple!

Change the ?username= value to your GitHub's username.

[![Avior's code::stats stats](https://codestats-readme.avior.me/api?username=aviortheking)](https://github.com/Aviortheking/codestats-readme)

Avior's code::stats stats

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

[![History](https://codestats-readme.avior.me/api/history/?username=Aviortheking)](https://github.com/aviortheking/codestats-readme)

History

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

[![Top Langs](https://codestats-readme.avior.me/api/top-langs/?username=aviortheking)](https://github.com/aviortheking/codestats-readme)

Top Langs

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 :-

![Aviortheking's Code::Stats stats](https://codestats-readme.avior.me/api?username=aviortheking&show_icons=true&theme=nightowl)

Aviortheking's Code::Stats stats

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

  1. Build the Docker image docker build . --tag your-tag
  2. run the Docker image docker run your-tag
  3. Profit on the port 3000!

Contributions are welcomed! <3

Made with ❤️ and Typescript.