https://github.com/aviortheking/codestats-readme
:zap: Dynamically generated Code::Stats SVGs for your github readmes
https://github.com/aviortheking/codestats-readme
codestats dynamic profile-readme readme-generator readme-stats serverless
Last synced: 2 months ago
JSON representation
:zap: Dynamically generated Code::Stats SVGs for your github readmes
- Host: GitHub
- URL: https://github.com/aviortheking/codestats-readme
- Owner: Aviortheking
- License: mit
- Created: 2020-09-08T09:14:11.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-20T03:00:06.000Z (over 1 year ago)
- Last Synced: 2025-07-24T09:20:49.704Z (3 months ago)
- Topics: codestats, dynamic, profile-readme, readme-generator, readme-stats, serverless
- Language: TypeScript
- Homepage: https://codestats-readme.avior.me
- Size: 705 KB
- Stars: 18
- Watchers: 0
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
![]()
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:
## 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.