diff --git a/README.md b/README.md
index 55cedcd..0a2ae66 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,11 @@
- 
+ 
Code::Stats Readme
Get dynamically generated Code::Stats stats on your readmes!
# 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
ex: `&layout=horizontal` |
-| height |  | Change the height of the card _Only on horizontal layout_
ex: `&height=400`
Default: `300` |
-| width |  | Change the width of the card _Only on vertical layout_
ex: `&width=TypeScript`
Default: `500` |
-| title |  | Change the title of the card
ex: `&title=History` |
-| days_count |  | Change the number of days shown
ex: `&days_count=7`
Default: `14` |
-| reverse_order |  | Reverse the order of the days
ex: `&reverse_order` |
-| hide |  | Hide specifics languages and put them in Others
ex: `&hide=TypeScript` |
-| language_count |  | Change the number of languages shown before going to Others
ex: `&language_count=3`
defaults: `8` |
-| text_color |  | change the text colors
ex: `&text_color=654321` |
+| Option Name | Description |
+| -------------- | ----------------------------------------------------------------------------------------------------------- |
+| layout | Change the layout to the horizontal one
ex: `&layout=horizontal` |
+| height | Change the height of the card _Only on horizontal layout_
ex: `&height=400`
Default: `300` |
+| width | Change the width of the card _Only on vertical layout_
ex: `&width=TypeScript`
Default: `500` |
+| title | Change the title of the card
ex: `&title=History` |
+| days_count | Change the number of days shown
ex: `&days_count=7`
Default: `14` |
+| reverse_order | Reverse the order of the days
ex: `&reverse_order` |
+| hide | Hide specifics languages and put them in Others
ex: `&hide=TypeScript` |
+| language_count | Change the number of languages shown before going to Others
ex: `&language_count=3`
defaults: `8` |
+| text_color | Change the text colors
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
ex: `&hide=TypeScript` or `&hide=TypeScript,TypeScript%20(JSX)` |
+| language_count | Change the number of languages shown before going to Others
ex: `&language_count=3`
defaults: `8` |
+| card_width | Hide the rank circle
ex: `&card_width=600`
defaults: `300` |
+| layout | Make the layout more compact
ex: `&layout=compact` |
+| text_color | Cange the text colors
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
ex: `&hide=TypeScript` or `&hide=TypeScript,TypeScript%20(JSX)` |
-| language_count |  | Change the number of languages shown before going to Others
ex: `&language_count=3`
defaults: `8` |
-| card_width |  | hide the rank circle
ex: `&card_width=600`
defaults: `300` |
-| layout |  | make the layout more compact
ex: `&layout=compact` |
-| text_color |  | change the text colors
ex: `&text_color=654321` |
# Common Options
-| Options Name | Preview | Description |
-| ------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| title_color |  | Change the title color
ex: `&title_color=654321` |
-| bg_color |  | Change the background color
ex: `&bg_color=654321` |
-| hide_border |  | Hide the border
ex: `&hide_border` |
-| hide_title |  | Hide the title
ex: `&hide_border` |
-| theme |  | See [#themes](Themes) |
-| cache_seconds |  | set the cache header manually _(min: 1800, max: 86400)_
ex: `&cache_seconds=86400`
Default: `1800` or 30 minutes |
+| Options Name | Description |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| title_color | Change the title color
ex: `&title_color=654321` |
+| bg_color | Change the background color
ex: `&bg_color=654321` |
+| hide_border | Hide the border
ex: `&hide_border` |
+| hide_title | Hide the title
ex: `&hide_border` |
+| theme | See [#themes](Themes) |
+| cache_seconds | set the cache header manually _(min: 1800, max: 86400)_
ex: `&cache_seconds=86400`
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
-
- 
-
-
- 
-
+```shell
+docker build . --tag your-tag
+docker run your-tag
```
-## Deploy on your own Server
+## NPM
-
-
-
-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!
-
-
-
----
-
-Contributions are welcomed! <3
-
-Made with :heart: and Typescript.
+```shell
+npm ci
+npm run build
+npm run start
+```
diff --git a/api/index.ts b/api/profile.ts
similarity index 97%
rename from api/index.ts
rename to api/profile.ts
index 6716429..4f013d1 100644
--- a/api/index.ts
+++ b/api/profile.ts
@@ -15,6 +15,7 @@ export interface query {
icon_color?: string
text_color?: string
cache_seconds?: string
+ title?: string
// Mater
bg_color?: string
@@ -34,6 +35,7 @@ export default async (req: Request, res: Respo
icon_color,
text_color,
cache_seconds,
+ title,
// Master
bg_color,
@@ -59,11 +61,12 @@ export default async (req: Request, res: Respo
hide_border: parseBoolean(hide_border),
hide_rank: parseBoolean(hide_rank),
line_height: parseNumber(line_height),
+ title,
title_color,
icon_color,
text_color,
bg_color,
- theme
+ theme,
}).render()
))
} catch (err) {
diff --git a/api/top-langs.ts b/api/top-langs.ts
index e53ab88..c616678 100644
--- a/api/top-langs.ts
+++ b/api/top-langs.ts
@@ -20,6 +20,7 @@ export interface query {
theme?: keyof typeof themes
cache_seconds?: string
layout?: string
+ title?: string
}
export default async (req: Request, res: Response) => {
@@ -35,7 +36,8 @@ export default async (req: Request, res: Respo
language_count,
theme,
cache_seconds,
- layout
+ layout,
+ title,
} = req.query
prepareResponse(res)
@@ -53,6 +55,7 @@ export default async (req: Request, res: Respo
layout,
text_color,
theme,
+ title,
title_color,
bg_color,
hide_border: parseBoolean(hide_border),
diff --git a/assets/history.svg b/assets/history.svg
new file mode 100644
index 0000000..9c1f362
--- /dev/null
+++ b/assets/history.svg
@@ -0,0 +1,43 @@
+
\ No newline at end of file
diff --git a/assets/profile.svg b/assets/profile.svg
new file mode 100644
index 0000000..da5234c
--- /dev/null
+++ b/assets/profile.svg
@@ -0,0 +1,73 @@
+
\ No newline at end of file
diff --git a/assets/toplang.svg b/assets/toplang.svg
new file mode 100644
index 0000000..f0d7555
--- /dev/null
+++ b/assets/toplang.svg
@@ -0,0 +1,31 @@
+
\ No newline at end of file
diff --git a/index.ts b/index.ts
index ab7a657..77a38c1 100644
--- a/index.ts
+++ b/index.ts
@@ -1,17 +1,18 @@
import express from 'express'
-import api from './api'
+import api from './api/profile'
import history from './api/history'
import topLangs from './api/top-langs'
+import profile from './api/profile'
const app = express()
-app.use('/api', api)
-app.use('/api/history', history)
-app.use('/api/top-langs', topLangs)
+app.use('/profile', profile)
+app.use('/history', history)
+app.use('/toplang', topLangs)
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, () => {
diff --git a/src/cards/ProfileCard.tsx b/src/cards/ProfileCard.tsx
index ea8e5ab..ee73724 100644
--- a/src/cards/ProfileCard.tsx
+++ b/src/cards/ProfileCard.tsx
@@ -18,6 +18,7 @@ interface ProfileCardOptions extends CardOptions {
line_height?: number
icon_color?: string
text_color?: string
+ title?: string
}
export default class ProfileCard extends Card {
@@ -39,9 +40,8 @@ export default class ProfileCard extends Card {
private recentXp: number,
private options: ProfileCardOptions
) {
- super(
- options
- )
+
+ super(options)
// This Element
this.stats = {
@@ -64,7 +64,7 @@ export default class ProfileCard extends Card {
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'
} Code::Stats Profile`
diff --git a/src/cards/TopLanguagesCard.tsx b/src/cards/TopLanguagesCard.tsx
index eaaa2da..5dee9f6 100644
--- a/src/cards/TopLanguagesCard.tsx
+++ b/src/cards/TopLanguagesCard.tsx
@@ -10,6 +10,7 @@ interface TopLanguagesOptions extends CardOptions {
card_width?: number
layout?: string
text_color?: string
+ title?: string
}
export default class TopLanguagesCard extends Card {
@@ -21,12 +22,10 @@ export default class TopLanguagesCard extends Card {
) {
super(options)
-
this.langs = this.langs
.filter((item) => !(options.hide || []).includes(item.name))
.slice(0, options.language_count || 5)
-
this.height = 45 + (this.langs.length + 1) * 40
this.width = 300
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)
- this.title = 'Most Used Languages'
+ this.title = this.options.title ?? 'Most Used Languages'
this.css = CompactTextNode.getCSS(textColor as string)
}
diff --git a/themes/themes.json b/themes/themes.json
index 2e35323..9d211d3 100644
--- a/themes/themes.json
+++ b/themes/themes.json
@@ -214,5 +214,11 @@
"icon_color": "61dafb",
"text_color": "ffffff",
"bg_color": "20232a"
+ },
+ "snownight": {
+ "title_color": "ffffff",
+ "icon_color": "ffffff",
+ "text_color": "ffffff",
+ "bg_color": "000000a0"
}
}