mirror of
https://github.com/Aviortheking/codestats-readme.git
synced 2025-04-22 10:42:08 +00:00
updated README
Signed-off-by: Florian Bouillon <florian.bouillon@delta-wings.net>
This commit is contained in:
parent
21a6c06f35
commit
e3ccb147f6
206
README.md
206
README.md
@ -5,11 +5,12 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
# Features
|
# Features
|
||||||
- [Code::Stats Profile Card](#profile-card)
|
|
||||||
|
- [Features](#features)
|
||||||
|
- [Profile Card](#profile-card)
|
||||||
|
- [History Card](#history-card)
|
||||||
- [Top Languages Card](#top-languages-card)
|
- [Top Languages Card](#top-languages-card)
|
||||||
- [Themes](#themes)
|
- [Common Options](#common-options)
|
||||||
- [Customization](#customization)
|
|
||||||
- [Deploy Yourself](#deploy-on-your-own-vercel-instance)
|
|
||||||
|
|
||||||
# Profile Card
|
# Profile Card
|
||||||
|
|
||||||
@ -20,89 +21,47 @@ Change the `?username=` value to your GitHub's username.
|
|||||||
```md
|
```md
|
||||||
[](https://github.com/Aviortheking/codestats-readme)
|
[](https://github.com/Aviortheking/codestats-readme)
|
||||||
```
|
```
|
||||||
### Hiding individual stats
|
|
||||||
|
|
||||||
To hide any specific stats, you can pass a query parameter `?hide=` with comma separated values.
|
### Options
|
||||||
|
|
||||||
> Options: `&hide=recent_xp,xp`
|
| 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=anuraghazra`
|
||||||
|
|
||||||
```md
|
```md
|
||||||
]
|
[](https://github.com/aviortheking/codestats-readme)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Showing icons
|
### Options
|
||||||
|
|
||||||
To enable icons, you can pass `show_icons=true` in the query param, like so:
|
| Option Name | Preview | Description |
|
||||||
|
| -------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
|
||||||
```md
|
| 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` |
|
||||||
### Themes
|
| 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` |
|
||||||
With inbuilt themes you can customize the look of the card without doing any [manual customization](#customization).
|
| 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` |
|
||||||
Use `?theme=THEME_NAME` parameter like so :-
|
| text_color |  | change the text colors<br />ex: `&text_color=654321` |
|
||||||
|
|
||||||
```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
|
|
||||||
|
|
||||||
### Customization
|
|
||||||
|
|
||||||
You can customize the appearance of your Cards however you want with URL params.
|
|
||||||
|
|
||||||
#### Common Options:
|
|
||||||
|
|
||||||
- `title_color` - Card's title color _(hex color)_
|
|
||||||
- `text_color` - Body text color _(hex color)_
|
|
||||||
- `icon_color` - Icons color if available _(hex color)_
|
|
||||||
- `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_
|
|
||||||
- `theme` - name of the theme, choose from [all available themes](./themes/README.md)
|
|
||||||
- `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_
|
|
||||||
|
|
||||||
##### Gradient in bg_color
|
|
||||||
|
|
||||||
You can provide multiple comma separated values in bg_color option to render a gradient, the format of the gradient is :-
|
|
||||||
|
|
||||||
```
|
|
||||||
&bg_color=DEG,COLOR1,COLRO2,COLOR3...COLOR10
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Stats Card Exclusive Options:
|
|
||||||
|
|
||||||
- `hide` - Hides the specified items from stats _(Comma seperated values)_
|
|
||||||
- `hide_title` - _(boolean)_
|
|
||||||
- `hide_rank` - _(boolean)_
|
|
||||||
- `show_icons` - _(boolean)_
|
|
||||||
- `line_height` - Sets the line-height between text _(number)_
|
|
||||||
|
|
||||||
#### Language Card Exclusive Options:
|
|
||||||
|
|
||||||
- `hide` - Hide the languages specified from the card _(Comma separated values)_
|
|
||||||
- `hide_title` - _(boolean)_
|
|
||||||
- `layout` - Switch between two available layouts `default` & `compact`
|
|
||||||
- `card_width` - Set the card's width manually _(number)_
|
|
||||||
|
|
||||||
> :warning: **Important:**
|
|
||||||
> Language names should be uri-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding)
|
|
||||||
> (i.e: `c++` should become `c%2B%2B`, `jupyter notebook` should become `jupyter%20notebook`, etc.)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Top Languages Card
|
# Top Languages Card
|
||||||
|
|
||||||
Top languages card shows github user's top languages.
|
Top languages card shows user's top languages.
|
||||||
|
|
||||||
_NOTE: Top languages does not indicate your skill level or something like that, it's a metric of which languages you have the coded the most._
|
|
||||||
|
|
||||||
### Usage
|
|
||||||
|
|
||||||
Copy-paste this code into your readme and change the links.
|
Copy-paste this code into your readme and change the links.
|
||||||
|
|
||||||
@ -112,63 +71,46 @@ Endpoint: `api/top-langs?username=anuraghazra`
|
|||||||
[](https://github.com/aviortheking/codestats-readme)
|
[](https://github.com/aviortheking/codestats-readme)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Hide individual languages
|
### Options
|
||||||
|
|
||||||
You can use `?hide=language1,language2` parameter to hide individual languages.
|
| 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
|
```md
|
||||||
[](https://github.com/aviortheking/codestats-readme)
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compact Language Card Layout
|
|
||||||
|
|
||||||
You can use the `&layout=compact` option to change the card design.
|
#### All inbuilt themes :-
|
||||||
|
|
||||||
```md
|
dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
|
||||||
[](https://github.com/aviortheking/codestats-readme)
|
|
||||||
```
|
|
||||||
|
|
||||||
### Language Count
|
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 change the default language count (5) using the `&language_count=10` option.
|
|
||||||
|
|
||||||
```md
|
|
||||||
[](https://github.com/aviortheking/codestats-readme)
|
|
||||||
```
|
|
||||||
|
|
||||||
### Demo
|
|
||||||
|
|
||||||
[](https://github.com/aviortheking/codestats-readme)
|
|
||||||
|
|
||||||
- Compact layout
|
|
||||||
|
|
||||||
[](https://github.com/aviortheking/codestats-readme)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### All Demos
|
### Quick Tip (Align your Cards)
|
||||||
|
|
||||||
- Themes
|
|
||||||
|
|
||||||
Choose from any of the [default themes](#themes)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Gradient
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Customizing stats card
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Top languages
|
|
||||||
|
|
||||||
[](https://github.com/aviortheking/codestats-readme)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Quick Tip (Align The Repo Cards)
|
|
||||||
|
|
||||||
You usually won't be able to layout the images side by side. To do that you can use this approach:
|
You usually won't be able to layout the images side by side. To do that you can use this approach:
|
||||||
|
|
||||||
@ -189,20 +131,20 @@ You usually won't be able to layout the images side by side. To do that you can
|
|||||||
<summary><b> Guide on setting up Vercel 🔨 </b></summary>
|
<summary><b> Guide on setting up Vercel 🔨 </b></summary>
|
||||||
|
|
||||||
1. Go to [vercel.com](https://vercel.com/)
|
1. Go to [vercel.com](https://vercel.com/)
|
||||||
1. Click on `Log in`
|
2. Click on `Log in`
|
||||||
|
|
||||||
1. Sign in with GitHub by pressing `Continue with GitHub`
|
3. Sign in with GitHub by pressing `Continue with GitHub`
|
||||||
|
|
||||||
1. Sign into GitHub and allow access to all repositories, if prompted
|
4. Sign into GitHub and allow access to all repositories, if prompted
|
||||||
1. Fork this repo
|
5. Fork this repo
|
||||||
1. Go back to your [Vercel dashboard](https://vercel.com/dashboard)
|
6. Go back to your [Vercel dashboard](https://vercel.com/dashboard)
|
||||||
1. Select `Import Project`
|
7. Select `Import Project`
|
||||||
|
|
||||||
1. Select `Import Git Repository`
|
8. Select `Import Git Repository`
|
||||||
|
|
||||||
1. Select root and keep everything as is (leave everything as is, just name it something, it can be anything you want)
|
9. Select root and keep everything as is (leave everything as is, just name it something, it can be anything you want)
|
||||||
|
|
||||||
1. Click deploy, and you're good to go. See your domains to use the API!
|
10. Click deploy, and you're good to go. See your domains to use the API!
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
|
|||||||
@ -82,7 +82,9 @@ export default class ProfileCard extends Card {
|
|||||||
public render() {
|
public render() {
|
||||||
return super.render(
|
return super.render(
|
||||||
<>
|
<>
|
||||||
<RankCircle xp={this.options.hide_rank ? undefined : this.xp} />
|
{!this.options.hide_rank && (
|
||||||
|
<RankCircle xp={this.xp} />
|
||||||
|
)}
|
||||||
<svg x="0" y="0">
|
<svg x="0" y="0">
|
||||||
<FlexLayout
|
<FlexLayout
|
||||||
items={
|
items={
|
||||||
@ -113,7 +115,7 @@ export default class ProfileCard extends Card {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class RankCircle extends React.Component<{
|
class RankCircle extends React.Component<{
|
||||||
xp?: number
|
xp: number
|
||||||
}> {
|
}> {
|
||||||
|
|
||||||
public static getCSS = (textColor: string, titleColor: string, progress: number) => `
|
public static getCSS = (textColor: string, titleColor: string, progress: number) => `
|
||||||
@ -150,12 +152,7 @@ class RankCircle extends React.Component<{
|
|||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
public render() {
|
public render = () => (
|
||||||
if (!this.props.xp) {
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<g data-testid="rank-circle"
|
<g data-testid="rank-circle"
|
||||||
transform="translate(400, 0)">
|
transform="translate(400, 0)">
|
||||||
<circle className="rank-circle-rim" cx="-10" cy="8" r="40" />
|
<circle className="rank-circle-rim" cx="-10" cy="8" r="40" />
|
||||||
@ -173,7 +170,6 @@ class RankCircle extends React.Component<{
|
|||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
)
|
)
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user