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=aviortheking`
```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 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 :heart: and Typescript.