gaiety/codestats-readme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'dev'

Browse source
This commit is contained in:
Domai 2023-06-13 13:11:27 +02:00
commit 9be1f0aaf8
No known key found for this signature in database
GPG key ID: 8F0CBA9FA6CBDB53
10 changed files with 230 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
README.md
View file

@ -1,12 +1,11 @@
<p align="center"> <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> <h2 align="center">Code::Stats Readme</h2>
<p align="center">Get dynamically generated Code::Stats stats on your readmes!</p> <p align="center">Get dynamically generated Code::Stats stats on your readmes!</p>
</p> </p>
# Features # Features
- [Features](#features)
- [Profile Card](#profile-card) - [Profile Card](#profile-card)
- [History Card](#history-card) - [History Card](#history-card)
- [Top Languages Card](#top-languages-card) - [Top Languages Card](#top-languages-card)
@ -14,134 +13,89 @@
# Profile Card # Profile Card
Copy paste this into your markdown content, and that's it. Simple! ![](./assets/profile.svg)
Change the `?username=` value to your GitHub's username. ## Options
```md | Option Name | Description |
[![Avior's code::stats stats](https://codestats-readme.avior.me/api?username=aviortheking)](https://github.com/Aviortheking/codestats-readme) | ----------- | ----------------------------------------------------------- |
``` | hide | Hide specific line, eg: `&hide=xp` or `&hide=xp,recent_xp` |
| show_icons | Shows icons before each lines eg: `&show_icons` |
[![Avior's code::stats stats](https://codestats-readme.avior.me/api?username=aviortheking)](https://github.com/Aviortheking/codestats-readme) | hide_rank | Hide the rank circle eg: `&hide_rank` |
| line_height | Change the line Height of each lines, eg: `&line_height=45` |
### Options | icon_color | Change the icons color, eg: `&icon_color=123456&show_icons` |
| text_color | Change the text colors, eg: `&text_color=123456` |
| Option Name | Preview | Description |
| ----------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| hide | ![](https://codestats-readme.avior.me/api?username=aviortheking&hide=xp) | Hide specific line, ex: `&hide=xp` or `&hide=xp,recent_xp` |
| show_icons | ![](https://codestats-readme.avior.me/api?username=aviortheking&show_icons) | shows icons before each lines ex: `&show_icons` |
| hide_rank | ![](https://codestats-readme.avior.me/api?username=aviortheking&hide_rank) | hide the rank circle ex: `&hide_rank` |
| line_height | ![](https://codestats-readme.avior.me/api?username=aviortheking&line_height=45) | change the line Height of each lines, ex: `&line_height=45` |
| icon_color | ![](https://codestats-readme.avior.me/api?username=aviortheking&icon_color=123456&show_icons) | change the icons color, ex: `&icon_color=123456&show_icons` |
| text_color | ![](https://codestats-readme.avior.me/api?username=aviortheking&text_color=123456) | change the text colors, ex: `&text_color=123456` |
# History Card # History Card
Shows your XP history as it's shown on your profile. ![](./assets/history.svg)
Copy-paste this code into your readme and change the links. ## Options
Endpoint: `api/history?username=Aviortheking` | Option Name | Description |
| -------------- | ----------------------------------------------------------------------------------------------------------- |
```md | layout | Change the layout to the horizontal one<br />ex: `&layout=horizontal` |
[![History](https://codestats-readme.avior.me/api/history/?username=Aviortheking)](https://github.com/aviortheking/codestats-readme) | 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` |
[![History](https://codestats-readme.avior.me/api/history/?username=Aviortheking)](https://github.com/aviortheking/codestats-readme) | 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` |
### Options | 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` |
| Option Name | Preview | Description | | text_color | Change the text colors<br />ex: `&text_color=654321` |
| -------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| layout | ![](https://codestats-readme.avior.me/api/history?username=Aviortheking&layout=horizontal) | Change the layout to the horizontal one<br />ex: `&layout=horizontal` |
| height | ![](https://codestats-readme.avior.me/api/history?username=Aviortheking&height=400&layout=horizontal) | Change the height of the card _Only on horizontal layout_<br />ex: `&height=400`<br />Default: `300` |
| width | ![](https://codestats-readme.avior.me/api/history?username=Aviortheking&width=400) | Change the width of the card _Only on vertical layout_<br />ex: `&width=TypeScript`<br />Default: `500` |
| title | ![](https://codestats-readme.avior.me/api/history?username=Aviortheking&title=History) | Change the title of the card<br />ex: `&title=History` |
| days_count | ![](https://codestats-readme.avior.me/api/history?username=Aviortheking&days_count=7) | Change the number of days shown<br />ex: `&days_count=7` <br />Default: `14` |
| reverse_order | ![](https://codestats-readme.avior.me/api/history?username=Aviortheking&reverse_order) | Reverse the order of the days<br />ex: `&reverse_order` |
| hide | ![](https://codestats-readme.avior.me/api/history?username=Aviortheking&hide=Typescript) | Hide specifics languages and put them in Others<br />ex: `&hide=TypeScript` |
| language_count | ![](https://codestats-readme.avior.me/api/history?username=Aviortheking&language_count=3) | Change the number of languages shown before going to Others<br />ex: `&language_count=3`<br />defaults: `8` |
| text_color | ![](https://codestats-readme.avior.me/api/history?username=Aviortheking&text_color=654321) | change the text colors<br />ex: `&text_color=654321` |
# Top Languages Card # Top Languages Card
Top languages card shows user's top languages. ![](./assets/toplang.svg)
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
[![Top Langs](https://codestats-readme.avior.me/api/top-langs/?username=aviortheking)](https://github.com/aviortheking/codestats-readme)
```
[![Top Langs](https://codestats-readme.avior.me/api/top-langs/?username=aviortheking)](https://github.com/aviortheking/codestats-readme)
### Options
| Option Name | Preview | Description |
| -------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| hide | ![](https://codestats-readme.avior.me/api/top-langs?username=aviortheking&hide=TypeScript) | Hide Specific language<br />ex: `&hide=TypeScript` or `&hide=TypeScript,TypeScript%20(JSX)` |
| language_count | ![](https://codestats-readme.avior.me/api/top-langs?username=aviortheking&language_count=3) | Change the number of languages shown before going to Others<br />ex: `&language_count=3`<br />defaults: `8` |
| card_width | ![](https://codestats-readme.avior.me/api/top-langs?username=aviortheking&card_width=250) | hide the rank circle<br />ex: `&card_width=600`<br />defaults: `300` |
| layout | ![](https://codestats-readme.avior.me/api/top-langs?username=aviortheking&layout=compact) | make the layout more compact<br />ex: `&layout=compact` |
| text_color | ![](https://codestats-readme.avior.me/api/top-langs?username=aviortheking&text_color=654321) | change the text colors<br />ex: `&text_color=654321` |
# Common Options # Common Options
| Options Name | Preview | Description | | Options Name | Description |
| ------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | ------------- | -------------------------------------------------------------------------------------------------------------------------- |
| title_color | ![](https://codestats-readme.avior.me/api?username=aviortheking&title_color=654321) | Change the title color<br />ex: `&title_color=654321` | | title_color | Change the title color<br />ex: `&title_color=654321` |
| bg_color | ![](https://codestats-readme.avior.me/api?username=aviortheking&bg_color=654321) | Change the background color<br />ex: `&bg_color=654321` | | bg_color | Change the background color<br />ex: `&bg_color=654321` |
| hide_border | ![](https://codestats-readme.avior.me/api?username=aviortheking&hide_border) | Hide the border<br />ex: `&hide_border` | | hide_border | Hide the border<br />ex: `&hide_border` |
| hide_title | ![](https://codestats-readme.avior.me/api?username=aviortheking&hide_title) | Hide the title<br />ex: `&hide_border` | | hide_title | Hide the title<br />ex: `&hide_border` |
| theme | ![](https://codestats-readme.avior.me/api?username=aviortheking&theme=radical) | See [#themes](Themes) | | theme | See [#themes](Themes) |
| cache_seconds | ![](https://codestats-readme.avior.me/api?username=aviortheking&cache_seconds=86400) | set the cache header manually _(min: 1800, max: 86400)_<br />ex: `&cache_seconds=86400`<br />Default: `1800` or 30 minutes | | 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). With inbuilt themes you can customize the look of the card without doing any [manual customization](#customization).
Use `?theme=THEME_NAME` parameter like so :- Use `?theme=THEME_NAME` parameter like so :-
```md
![Aviortheking's Code::Stats stats](https://codestats-readme.avior.me/api?username=aviortheking&show_icons=true&theme=nightowl)
```
![Aviortheking's Code::Stats stats](https://codestats-readme.avior.me/api?username=aviortheking&show_icons=true&theme=nightowl)
#### All inbuilt themes :-
dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula 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 ```shell
<a href="https://github.com/aviortheking/codestats-readme"> docker build . --tag your-tag
<img align="center" src="https://codestats-readme.avior.me/api?username=aviortheking" /> docker run your-tag
</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 ## NPM
```shell
<details> npm ci
npm run build
1. Build the Docker image `docker build . --tag your-tag` npm run start
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.

5
api/index.ts → api/profile.ts
View file

@ -15,6 +15,7 @@ export interface query {
icon_color?: string icon_color?: string
text_color?: string text_color?: string
cache_seconds?: string cache_seconds?: string
title?: string
// Mater // Mater
bg_color?: string bg_color?: string
@ -34,6 +35,7 @@ export default async (req: Request<unknown, unknown, unknown, query>, res: Respo
icon_color, icon_color,
text_color, text_color,
cache_seconds, cache_seconds,
title,
// Master // Master
bg_color, bg_color,
@ -59,11 +61,12 @@ export default async (req: Request<unknown, unknown, unknown, query>, res: Respo
hide_border: parseBoolean(hide_border), hide_border: parseBoolean(hide_border),
hide_rank: parseBoolean(hide_rank), hide_rank: parseBoolean(hide_rank),
line_height: parseNumber(line_height), line_height: parseNumber(line_height),
title,
title_color, title_color,
icon_color, icon_color,
text_color, text_color,
bg_color, bg_color,
theme theme,
}).render() }).render()
)) ))
} catch (err) { } catch (err) {

5
api/top-langs.ts
View file

@ -20,6 +20,7 @@ export interface query {
theme?: keyof typeof themes theme?: keyof typeof themes
cache_seconds?: string cache_seconds?: string
layout?: string layout?: string
title?: string
} }
export default async (req: Request<unknown, unknown, unknown, query>, res: Response) => { export default async (req: Request<unknown, unknown, unknown, query>, res: Response) => {
@ -35,7 +36,8 @@ export default async (req: Request<unknown, unknown, unknown, query>, res: Respo
language_count, language_count,
theme, theme,
cache_seconds, cache_seconds,
layout layout,
title,
} = req.query } = req.query
prepareResponse(res) prepareResponse(res)
@ -53,6 +55,7 @@ export default async (req: Request<unknown, unknown, unknown, query>, res: Respo
layout, layout,
text_color, text_color,
theme, theme,
title,
title_color, title_color,
bg_color, bg_color,
hide_border: parseBoolean(hide_border), hide_border: parseBoolean(hide_border),

43
assets/history.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

73
assets/profile.svg Normal file
View 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 &#x27;Segoe UI&#x27;, Ubuntu, Sans-Serif;
fill: #ffffff;
animation: fadeInAnimation 0.8s ease-in-out forwards;
}
.rank-text {
font: 800 24px &#x27;Segoe UI&#x27;, 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 &#x27;Segoe UI&#x27;, Ubuntu, &quot;Helvetica Neue&quot;, 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&#x27;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>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

31
assets/toplang.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 9.4 KiB

11
index.ts
View file

@ -1,17 +1,18 @@
import express from 'express' import express from 'express'
import api from './api' import api from './api/profile'
import history from './api/history' import history from './api/history'
import topLangs from './api/top-langs' import topLangs from './api/top-langs'
import profile from './api/profile'
const app = express() const app = express()
app.use('/api', api) app.use('/profile', profile)
app.use('/api/history', history) app.use('/history', history)
app.use('/api/top-langs', topLangs) app.use('/toplang', topLangs)
app.get('/', (_, res) => { app.get('/', (_, res) => {
res.redirect(301, 'https://github.com/aviortheking/codestats-readme') res.redirect(301, 'https://github.com/domai-tb/codestats-readme')
}) })
app.listen(3000, () => { app.listen(3000, () => {

8
src/cards/ProfileCard.tsx
View file

@ -18,6 +18,7 @@ interface ProfileCardOptions extends CardOptions {
line_height?: number line_height?: number
icon_color?: string icon_color?: string
text_color?: string text_color?: string
title?: string
} }
export default class ProfileCard extends Card { export default class ProfileCard extends Card {
@ -39,9 +40,8 @@ export default class ProfileCard extends Card {
private recentXp: number, private recentXp: number,
private options: ProfileCardOptions private options: ProfileCardOptions
) { ) {
super(
options super(options)
)
// This Element // This Element
this.stats = { this.stats = {
@ -64,7 +64,7 @@ export default class ProfileCard extends Card {
options.hide_rank ? 0 : 120 options.hide_rank ? 0 : 120
) )
this.title = `${encodeHTML(this.username)}${ this.title = this.options.title ?? `${encodeHTML(this.username)}${
['x', 's'].includes(this.username.slice(-1)) ? '\'' : '\'s' ['x', 's'].includes(this.username.slice(-1)) ? '\'' : '\'s'
} Code::Stats Profile` } Code::Stats Profile`

5
src/cards/TopLanguagesCard.tsx
View file

@ -10,6 +10,7 @@ interface TopLanguagesOptions extends CardOptions {
card_width?: number card_width?: number
layout?: string layout?: string
text_color?: string text_color?: string
title?: string
} }
export default class TopLanguagesCard extends Card { export default class TopLanguagesCard extends Card {
@ -21,12 +22,10 @@ export default class TopLanguagesCard extends Card {
) { ) {
super(options) super(options)
this.langs = this.langs this.langs = this.langs
.filter((item) => !(options.hide || []).includes(item.name)) .filter((item) => !(options.hide || []).includes(item.name))
.slice(0, options.language_count || 5) .slice(0, options.language_count || 5)
this.height = 45 + (this.langs.length + 1) * 40 this.height = 45 + (this.langs.length + 1) * 40
this.width = 300 this.width = 300
if (options.card_width && !isNaN(options.card_width)) { if (options.card_width && !isNaN(options.card_width)) {
@ -34,7 +33,7 @@ export default class TopLanguagesCard extends Card {
} }
const textColor = getColor('text_color', options.text_color, options.theme) const textColor = getColor('text_color', options.text_color, options.theme)
this.title = 'Most Used Languages' this.title = this.options.title ?? 'Most Used Languages'
this.css = CompactTextNode.getCSS(textColor as string) this.css = CompactTextNode.getCSS(textColor as string)
} }

6
themes/themes.json
View file

@ -214,5 +214,11 @@
"icon_color": "61dafb", "icon_color": "61dafb",
"text_color": "ffffff", "text_color": "ffffff",
"bg_color": "20232a" "bg_color": "20232a"
},
"snownight": {
"title_color": "ffffff",
"icon_color": "ffffff",
"text_color": "ffffff",
"bg_color": "000000a0"
} }
} }