adjust readme
This commit is contained in:
Domai
parent
c3bac21c32
commit
77e2e3758b
4 changed files with 204 additions and 103 deletions
160
README.md
160
README.md
|
|
@ -1,12 +1,11 @@
|
|||
<p align="center">
|
||||
<img width="100px" src="https://raw.githubusercontent.com/Aviortheking/codestats-readme/master/.github/logo.svg" align="center" alt="GitHub Readme Stats" />
|
||||
<img width="100px" src="https://raw.githubusercontent.com/domai-tb/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)
|
||||
|
|
@ -14,134 +13,89 @@
|
|||
|
||||
# Profile Card
|
||||
|
||||
Copy paste this into your markdown content, and that's it. Simple!
|
||||
|
||||
|
||||
Change the `?username=` value to your GitHub's username.
|
||||
## Options
|
||||
|
||||
```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` |
|
||||
| Option Name | Description |
|
||||
| ----------- | ----------------------------------------------------------- |
|
||||
| hide | Hide specific line, eg: `&hide=xp` or `&hide=xp,recent_xp` |
|
||||
| show_icons | Shows icons before each lines eg: `&show_icons` |
|
||||
| hide_rank | Hide the rank circle eg: `&hide_rank` |
|
||||
| line_height | Change the line Height of each lines, eg: `&line_height=45` |
|
||||
| icon_color | Change the icons color, eg: `&icon_color=123456&show_icons` |
|
||||
| text_color | Change the text colors, eg: `&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.
|
||||
## Options
|
||||
|
||||
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` |
|
||||
| Option Name | 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.
|
||||
## Options
|
||||
|
||||
Endpoint: `api/top-langs?username=aviortheking`
|
||||
| Option Name | 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 | Cange the text colors<br />ex: `&text_color=654321` |
|
||||
|
||||
```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 |
|
||||
| Options Name | 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 |
|
||||
| title | CHange the cards title. eg: `&title=My Code::Stats` |
|
||||
|
||||
# Themes
|
||||
|
||||
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
|
||||
You can checkout the [theme config file](./themes/index.js)!
|
||||
|
||||
---
|
||||
# Development
|
||||
|
||||
### Quick Tip (Align your Cards)
|
||||
Both ways will create a webserver that listens on port 3000.
|
||||
|
||||
You usually won't be able to layout the images side by side. To do that you can use this approach:
|
||||
## Docker
|
||||
|
||||
```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>
|
||||
```shell
|
||||
docker build . --tag your-tag
|
||||
docker run your-tag
|
||||
```
|
||||
|
||||
## Deploy on your own Server
|
||||
## NPM
|
||||
|
||||
|
||||
<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.
|
||||
```shell
|
||||
npm ci
|
||||
npm run build
|
||||
npm run start
|
||||
```
|
||||
|
|
|
|||
43
assets/history.svg
Normal file
43
assets/history.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
73
assets/profile.svg
Normal file
73
assets/profile.svg
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<svg width="495" height="120" viewBox="0 0 495 120" fill="none" xmlns="http://www.w3.org/2000/svg"><style>
|
||||
.header {
|
||||
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
|
||||
fill: #ffffff;
|
||||
animation: fadeInAnimation 0.8s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.rank-text {
|
||||
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #ffffff;
|
||||
animation: scaleInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.rank-circle-rim {
|
||||
stroke: #ffffff;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.rank-circle {
|
||||
stroke: #ffffff;
|
||||
stroke-dasharray: 250;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.8;
|
||||
transform-origin: -10px 8px;
|
||||
transform: rotate(-90deg);
|
||||
animation: rankAnimation 1s forwards ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes rankAnimation {
|
||||
from {
|
||||
stroke-dashoffset: 251.32741228718345;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 111.2375126783074;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: #ffffff;
|
||||
// display: block;
|
||||
}
|
||||
.stagger {
|
||||
opacity: 0;
|
||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.stat {
|
||||
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #ffffff;
|
||||
}
|
||||
.bold {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
|
||||
/* Animations */
|
||||
@keyframes scaleInAnimation {
|
||||
from {
|
||||
transform: translate(-5px, 5px) scale(0);
|
||||
}
|
||||
to {
|
||||
transform: translate(-5px, 5px) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style><rect x="0.5" y="0.5" rx="4.5" height="99%" stroke="#E4E2E2" width="494" fill="#000000a0" stroke-opacity="0"></rect><g transform="translate(25, 35)"><g transform="translate(0, 0)"><text x="0" y="0" class="header">:Domai's Code::Stats</text></g></g><g transform="translate(0, 55)"><g data-testid="rank-circle" transform="translate(400, 0)"><circle class="rank-circle-rim" cx="-10" cy="8" r="40"></circle><circle class="rank-circle" cx="-10" cy="8" r="40"></circle><g class="rank-text"><text x="-4" y="0" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">lv 18</text></g></g><svg x="0" y="0"><g transform="translate(0, 0)"><g class="stagger" style="animation-delay:450ms" transform="translate(25, 0)"><svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg><text class="stat bold" x="25" y="12.5">XP:</text><text class="stat" x="120" y="12.5">551k</text></g></g><g transform="translate(0, 25)"><g class="stagger" style="animation-delay:451ms" transform="translate(25, 0)"><svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16"><path fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"></path></svg><text class="stat bold" x="25" y="12.5">Recent xp:</text><text class="stat" x="120" y="12.5">3k</text></g></g></svg></g></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
31
assets/toplang.svg
Normal file
31
assets/toplang.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.4 KiB |
Loading…
Add table
Reference in a new issue