Code::Stats Readme
Get dynamically generated Code::Stats stats on your readmes!
# Features
- [Features](#features)
- [Profile Card](#profile-card)
- [History Card](#history-card)
- [Top Languages Card](#top-languages-card)
- [Common Options](#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.
```md
[](https://github.com/Aviortheking/codestats-readme)
```
[](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`
```md
[](https://github.com/aviortheking/codestats-readme)
```
[](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`
```md
[](https://github.com/aviortheking/codestats-readme)
```
[](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](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](#customization).
Use `?theme=THEME_NAME` parameter like so :-
```md
```
#### All inbuilt themes :-
dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
You can look at a preview for [all available themes](./themes/README.md) or checkout the [theme config file](./themes/index.js) & **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:
```md
```
## Deploy on your own Vercel instance
[](https://vercel.com/import/project?template=https://github.com/Aviortheking/codestats-readme/)
Guide on setting up Vercel 🔨
1. Go to [vercel.com](https://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](https://vercel.com/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 :heart: and Typescript.