mirror of
https://github.com/Aviortheking/codestats-readme.git
synced 2025-04-22 10:42:08 +00:00
216 lines
7.3 KiB
Markdown
216 lines
7.3 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
|
|
- [Code::Stats Profile Card](#profile-card)
|
|
- [Top Languages Card](#top-languages-card)
|
|
- [Themes](#themes)
|
|
- [Customization](#customization)
|
|
- [Deploy Yourself](#deploy-on-your-own-vercel-instance)
|
|
|
|
# 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)
|
|
```
|
|
### Hiding individual stats
|
|
|
|
To hide any specific stats, you can pass a query parameter `?hide=` with comma separated values.
|
|
|
|
> Options: `&hide=recent_xp,xp`
|
|
|
|
```md
|
|
]
|
|
```
|
|
|
|
### Showing icons
|
|
|
|
To enable icons, you can pass `show_icons=true` in the query param, like so:
|
|
|
|
```md
|
|
|
|
```
|
|
|
|
### 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
|
|
|
|
### 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 shows github 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.
|
|
|
|
Endpoint: `api/top-langs?username=anuraghazra`
|
|
|
|
```md
|
|
[](https://github.com/aviortheking/codestats-readme)
|
|
```
|
|
|
|
### Hide individual languages
|
|
|
|
You can use `?hide=language1,language2` parameter to hide individual languages.
|
|
|
|
```md
|
|
[](https://github.com/aviortheking/codestats-readme)
|
|
```
|
|
|
|
### Compact Language Card Layout
|
|
|
|
You can use the `&layout=compact` option to change the card design.
|
|
|
|
```md
|
|
[](https://github.com/aviortheking/codestats-readme)
|
|
```
|
|
|
|
### Language Count
|
|
|
|
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
|
|
|
|
- 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:
|
|
|
|
```md
|
|
<a href="https://github.com/aviortheking/codestats-readme">
|
|
<img align="center" src="https://codestats-readme.vercel.app/api?username=aviortheking" />
|
|
</a>
|
|
<a href="https://github.com/aviortheking/codestats-readme">
|
|
<img align="center" src="https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking" />
|
|
</a>
|
|
```
|
|
|
|
## Deploy on your own Vercel instance
|
|
|
|
[](https://vercel.com/import/project?template=https://github.com/Aviortheking/codestats-readme/)
|
|
|
|
<details>
|
|
<summary><b> Guide on setting up Vercel 🔨 </b></summary>
|
|
|
|
1. Go to [vercel.com](https://vercel.com/)
|
|
1. Click on `Log in`
|
|
|
|
1. Sign in with GitHub by pressing `Continue with GitHub`
|
|
|
|
1. Sign into GitHub and allow access to all repositories, if prompted
|
|
1. Fork this repo
|
|
1. Go back to your [Vercel dashboard](https://vercel.com/dashboard)
|
|
1. Select `Import Project`
|
|
|
|
1. 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)
|
|
|
|
1. Click deploy, and you're good to go. See your domains to use the API!
|
|
|
|
</details>
|
|
|
|
---
|
|
|
|
|
|
|
|
Contributions are welcomed! <3
|
|
|
|
Made with :heart: and Typescript.
|