mirror of
https://github.com/Aviortheking/codestats-readme.git
synced 2025-04-23 11:02:09 +00:00
Florian Bouillon
3938dc98fc
This PR remove the need to use Vercel to setup the server, currently it can still be used as such using the api folder
148 lines
10 KiB
Markdown
148 lines
10 KiB
Markdown
<p align="center">
|
||
<img width="100px" src="https://raw.githubusercontent.com/Aviortheking/codestats-readme/master/.github/logo.svg" align="center" alt="GitHub Readme Stats" />
|
||
<h2 align="center">Code::Stats Readme</h2>
|
||
<p align="center">Get dynamically generated Code::Stats stats on your readmes!</p>
|
||
</p>
|
||
|
||
# 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<br />ex: `&layout=horizontal` |
|
||
| height |  | Change the height of the card _Only on horizontal layout_<br />ex: `&height=400`<br />Default: `300` |
|
||
| width |  | Change the width of the card _Only on vertical layout_<br />ex: `&width=TypeScript`<br />Default: `500` |
|
||
| title |  | Change the title of the card<br />ex: `&title=History` |
|
||
| days_count |  | Change the number of days shown<br />ex: `&days_count=7` <br />Default: `14` |
|
||
| reverse_order |  | Reverse the order of the days<br />ex: `&reverse_order` |
|
||
| hide |  | Hide specifics languages and put them in Others<br />ex: `&hide=TypeScript` |
|
||
| language_count |  | Change the number of languages shown before going to Others<br />ex: `&language_count=3`<br />defaults: `8` |
|
||
| text_color |  | change the text colors<br />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<br />ex: `&hide=TypeScript` or `&hide=TypeScript,TypeScript%20(JSX)` |
|
||
| language_count |  | Change the number of languages shown before going to Others<br />ex: `&language_count=3`<br />defaults: `8` |
|
||
| card_width |  | hide the rank circle<br />ex: `&card_width=600`<br />defaults: `300` |
|
||
| layout |  | make the layout more compact<br />ex: `&layout=compact` |
|
||
| text_color |  | change the text colors<br />ex: `&text_color=654321` |
|
||
|
||
# Common Options
|
||
|
||
| Options Name | Preview | Description |
|
||
| ------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
|
||
| title_color |  | Change the title color<br />ex: `&title_color=654321` |
|
||
| bg_color |  | Change the background color<br />ex: `&bg_color=654321` |
|
||
| hide_border |  | Hide the border<br />ex: `&hide_border` |
|
||
| hide_title |  | Hide the title<br />ex: `&hide_border` |
|
||
| theme |  | See [#themes](Themes) |
|
||
| cache_seconds |  | set the cache header manually _(min: 1800, max: 86400)_<br />ex: `&cache_seconds=86400`<br />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
|
||
<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
|
||
|
||
|
||
<details>
|
||
|
||
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!
|
||
|
||
</details>
|
||
|
||
---
|
||
|
||
Contributions are welcomed! <3
|
||
|
||
Made with :heart: and Typescript.
|