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.

[![Avior's code::stats stats](https://codestats-readme.vercel.app/api?username=aviortheking)](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

[![History](https://codestats-readme.vercel.app/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=anuraghazra

[![Top Langs](https://codestats-readme.vercel.app/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 :-

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

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.vercel.app/api?username=aviortheking" />
</a>
<a href="https://github.com/aviortheking/codestats-readme">
  <img align="center" src="https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking" />
</a>

Deploy on your own Vercel instance

Guide on setting up Vercel 🔨

1. Go to vercel.com
2. Click on Log in
3. Sign in with GitHub by pressing Continue with GitHub
4. Sign into GitHub and allow access to all repositories, if prompted
5. Fork this repo
6. Go back to your Vercel dashboard
7. Select Import Project
8. Select Import Git Repository
9. Select root and keep everything as is (leave everything as is, just name it something, it can be anything you want)
10. Click deploy, and you're good to go. See your domains to use the API!

---

Contributions are welcomed! <3

Made with ❤️ and Typescript.