resolve merge conflict

CONTRIBUTING.md

@@ -31,7 +31,7 @@ _(make sure you already have a [vercel](https://vercel.com/) account)_
 
 ## Themes Contribution
 
-Github readme stats supports custom theming and you can also contribute new themes!
+GitHub Readme Stats supports custom theming and you can also contribute new themes!
 
 All you need to do is edit [themes/index.js](./themes/index.js) file and add your theme at the end of the file.
 
@@ -43,7 +43,7 @@ While creating the Pull request to add a new theme **don't forget to add a scree
 
 In short, when you submit changes, your submissions are understood to be under the same [MIT License](http://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern.
 
-## Report issues/bugs using Github's [issues](https://github.com/anuraghazra/github-readme-stats/issues)
+## Report issues/bugs using GitHub's [issues](https://github.com/anuraghazra/github-readme-stats/issues)
 
 We use GitHub issues to track public bugs. Report a bug by [opening a new issue](https://github.com/anuraghazra/github-readme-stats/issues/new/choose); it's that easy!
 
@@ -55,7 +55,7 @@ We use GitHub issues to track public bugs. Report a bug by [opening a new issue]
 - Steps to reproduce
   - Be specific!
   - Share the snapshot, if possible.
-  - Github Readme Stats' live link
+  - GitHub Readme Stats' live link
 - What actually happens
 - What you expected would happen
 - Notes (possibly including why you think this might be happening, or stuff you tried that didn't work)

api/top-langs.js

@@ -14,13 +14,14 @@ module.exports = async (req, res) => {
     username,
     hide,
     hide_title,
+    hide_border,
     card_width,
     title_color,
     text_color,
     bg_color,
     theme,
     cache_seconds,
-    layout
+    layout,
   } = req.query;
   let topLangs;
 
@@ -42,15 +43,15 @@ module.exports = async (req, res) => {
 
   res.send(
     renderTopLanguages(topLangs, {
-      theme,
       hide_title: parseBoolean(hide_title),
+      hide_border: parseBoolean(hide_border),
       card_width: parseInt(card_width, 10),
       hide: parseArray(hide),
       title_color,
       text_color,
       bg_color,
       theme,
-      layout
+      layout,
     })
   );
 };

readme.md

@@ -1,9 +1,8 @@
 <p align="center">
- <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="Github Readme Stats" />
+ <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="GitHub Readme Stats" />
  <h2 align="center">GitHub Readme Stats</h2>
  <p align="center">Get dynamically generated GitHub stats on your readmes!</p>
 </p>
-
   <p align="center">
     <a href="https://github.com/anuraghazra/github-readme-stats/actions">
       <img alt="Tests Passing" src="https://github.com/anuraghazra/github-readme-stats/workflows/Test/badge.svg" />
@@ -17,6 +16,14 @@
     <a href="https://github.com/anuraghazra/github-readme-stats/pulls">
       <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/anuraghazra/github-readme-stats?color=0088ff" />
     </a>
+    <br />
+    <br />
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
+      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
+    </a>
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
+      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
+    </a>
   </p>
 
   <p align="center">
@@ -103,7 +110,7 @@ Use `?theme=THEME_NAME` parameter like so :-
 
 dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
 
-<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="Github Readme Stat Themes" width="600px"/>
+<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="GitHub Readme Stat Themes" width="600px"/>
 
 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
 
@@ -111,28 +118,43 @@ You can look at a preview for [all available themes](./themes/README.md) or chec
 
 You can customize the appearance of your `Stats Card` or `Repo Card` however you want with URL params.
 
-Customization Options:
+#### Common Options:
 
-| Option        | type      | description                                 | Stats Card (default) | Repo Card (default) | Top Lang Card (default) |
-| ------------- | --------- | ------------------------------------------- | -------------------- | ------------------- | ----------------------- |
-| title_color   | hex color | title color                                 | 2f80ed               | 2f80ed              | 2f80ed                  |
-| text_color    | hex color | body color                                  | 333                  | 333                 | 333                     |
-| icon_color    | hex color | icon color                                  | 4c71f2               | 586069              | 586069                  |
-| bg_color      | hex color | card bg color                               | FFFEFE               | FFFEFE              | FFFEFE                  |
-| line_height   | number    | control the line-height between text        | 30                   | N/A                 | N/A                     |
-| hide          | CSV       | hides the items specified                   | undefined            | N/A                 | undefined               |
-| hide_rank     | boolean   | hides the ranking                           | false                | N/A                 | N/A                     |
-| hide_title    | boolean   | hides the stats title                       | false                | N/A                 | false                   |
-| hide_border   | boolean   | hides the stats card border                 | false                | N/A                 | N/A                     |
-| show_owner    | boolean   | shows owner name in repo card               | N/A                  | false               | N/A                     |
-| show_icons    | boolean   | shows icons                                 | false                | N/A                 | N/A                     |
-| theme         | string    | sets inbuilt theme                          | 'default'            | 'default_repocard'  | 'default'               |
-| cache_seconds | number    | manually set custom cache control           | 1800                 | 1800                | '1800'                  |
-| count_private | boolean   | counts private contributions too if enabled | false                | N/A                 | N/A                     |
-| layout        | string    | choose a layout option                      | N/A                  | N/A                 | "default"               |
+- `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)_
+- `theme` - name of the theme, choose from [all available themes](./themes/README.md)
+- `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_
 
 > Note on cache: Repo cards have default cache of 30mins (1800 seconds) if the fork count & star count is less than 1k otherwise it's 2hours (7200). Also note that cache is clamped to minimum of 30min and maximum of 24hours
 
+#### Stats Card Exclusive Options:
+
+- `hide` - Hide's the specified items from stats _(Comma seperated values)_
+- `hide_title` - _(boolean)_
+- `hide_rank` - _(boolean)_
+- `show_icons` - _(boolean)_
+- `count_private` - Count private commits _(boolean)_
+- `line_height` - Sets the line-height betweent text _(number)_
+
+#### Repo Card Exclusive Options:
+
+- `show_owner` - Show the owner name of the repo _(boolean)_
+
+#### Language Card Exclusive Options:
+
+- `hide` - Hide the languages specified from the card _(Comma seperated 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.)
+
+---
+
 # GitHub Extra Pins
 
 GitHub extra pins allow you to pin more than 6 repositories in your profile using a GitHub readme profile.

readme_cn.md

@@ -1,5 +1,5 @@
 <p align="center">
- <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="Github Readme Stats" />
+ <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="GitHub Readme Stats" />
  <h2 align="center">GitHub Readme Stats</h2>
  <p align="center">在你的 README 中获取动态生成的 GitHub 统计信息！</p>
 </p>
@@ -17,6 +17,14 @@
     <a href="https://github.com/anuraghazra/github-readme-stats/pulls">
       <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/anuraghazra/github-readme-stats?color=0088ff" />
     </a>
+    <br />
+    <br />
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
+      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
+    </a>
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
+      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
+    </a>
   </p>
 
   <p align="center">
@@ -101,7 +109,7 @@ _注：如果你是自己部署本项目，私人贡献将会默认被计数，
 
 dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
 
-<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="Github Readme Stat Themes" width="600px"/>
+<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="GitHub Readme Stat Themes" width="600px"/>
 
 在 [theme config 文件](./themes/index.js) 中查看更多主题，或者 **贡献新的主题** :D
 
@@ -111,26 +119,25 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 
 自定义选项：
 
-| Option      | type      | description               | Stats Card (default) | Repo Card (default) | Top Lang Card (default) |
-| ----------- | --------- | --------------------------| -------------------- | ------------------- | -------------------  |
-| title_color | hex color | 标题颜色                   | 2f80ed               | 2f80ed              | 2f80ed              |
-| text_color  | hex color | 字体颜色                   | 333                  | 333                 | 333                 |
-| icon_color  | hex color | 图标颜色                   | 4c71f2               | 586069              | 586069              |
-| bg_color    | hex color | 卡片背景颜色                | FFFEFE               | FFFEFE              | FFFEFE              |
-| line_height | number    | 文字行高                   | 30                   | N/A                 | N/A                 |
-| hide        | CSV       | 隐藏指定统计项              | undfined             | N/A                 | undefined          |
-| hide_rank   | boolean   | 隐藏评分等级                | false                | N/A                 | N/A                 |
-| hide_title  | boolean   | 隐藏卡片标题                | false                | N/A                 | false               |
-| hide_border | boolean   | 隐藏卡片边框                | false                | N/A                 | N/A                 |
-| show_owner  | boolean   | 显示 Repo 卡片所属账户用户名  | N/A                  | false               | N/A                |
-| show_icons  | boolean   | 显示图标                   | false                | N/A                 | N/A                 |
-| theme       | string    | 设置主题                   | 'default'            | 'default_repocard'  | 'default'          |
-| cache_seconds | number  | 手动设置自定义缓存控制        | 1800                 | 1800               |'1800'            |
-| count_private | boolean   | 统计私人贡献计数           | false                | N/A                 | N/A                |
-| layout        | string    | 布局方式                  | N/A                  | N/A                 | 'default'          |
+| Option        | type      | description                  | Stats Card (default) | Repo Card (default) | Top Lang Card (default) |
+| ------------- | --------- | ---------------------------- | -------------------- | ------------------- | ----------------------- |
+| title_color   | hex color | 标题颜色                     | 2f80ed               | 2f80ed              | 2f80ed                  |
+| text_color    | hex color | 字体颜色                     | 333                  | 333                 | 333                     |
+| icon_color    | hex color | 图标颜色                     | 4c71f2               | 586069              | 586069                  |
+| bg_color      | hex color | 卡片背景颜色                 | FFFEFE               | FFFEFE              | FFFEFE                  |
+| line_height   | number    | 文字行高                     | 30                   | N/A                 | N/A                     |
+| hide          | CSV       | 隐藏指定统计项               | undfined             | N/A                 | undefined               |
+| hide_rank     | boolean   | 隐藏评分等级                 | false                | N/A                 | N/A                     |
+| hide_title    | boolean   | 隐藏卡片标题                 | false                | N/A                 | false                   |
+| hide_border   | boolean   | 隐藏卡片边框                 | false                | N/A                 | N/A                     |
+| show_owner    | boolean   | 显示 Repo 卡片所属账户用户名 | N/A                  | false               | N/A                     |
+| show_icons    | boolean   | 显示图标                     | false                | N/A                 | N/A                     |
+| theme         | string    | 设置主题                     | 'default'            | 'default_repocard'  | 'default'               |
+| cache_seconds | number    | 手动设置自定义缓存控制       | 1800                 | 1800                | 1800                    |
+| count_private | boolean   | 统计私人贡献计数             | false                | N/A                 | N/A                     |
+| layout        | string    | 布局方式                     | N/A                  | N/A                 | 'default'               |
 
-
-> 注意缓存：Repo 卡片默认缓存 30 分钟，如果 fork 数和 star 数小于 1k ，则默认为 2小时。缓存被限制为最少30分钟，最长24小时。
+> 注意缓存：Repo 卡片默认缓存 30 分钟，如果 fork 数和 star 数小于 1k ，则默认为 2 小时。缓存被限制为最少 30 分钟，最长 24 小时。
 
 # GitHub 更多置顶
 
@@ -158,9 +165,9 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
 
 # 热门语言卡片
 
-热门语言卡片显示了Github用户常用的编程语言。
+热门语言卡片显示了 GitHub 用户常用的编程语言。
 
-*注意：热门语言并不表示我的技能水平或类似的水平，它是用户在Github上拥有最多代码的一项指标，它是github-readme-stats的新功能*
+_注意：热门语言并不表示我的技能水平或类似的水平，它是用户在 GitHub 上拥有最多代码的一项指标，它是 github-readme-stats 的新功能_
 
 ### 使用细则
 
@@ -198,7 +205,7 @@ Endpoint: `api/top-langs?username=anuraghazra`
 
 ---
 
-### 全部Demo
+### 全部 Demo
 
 - 默认
 
@@ -250,7 +257,7 @@ Endpoint: `api/top-langs?username=anuraghazra`
 因为 GitHub 的 API 每个小时只允许 5 千次请求，我的 `https://github-readme-stats.vercel.app/api` 很有可能会触发限制
 如果你将其托管在自己的 Vercel 服务器上，那么你就不必为此担心。点击 deploy 按钮来开始你的部署！
 
-注意: 从 [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 开始，我们应该能够处理超过 5千 的请求，并且不会出现宕机问题 :D
+注意: 从 [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 开始，我们应该能够处理超过 5 千 的请求，并且不会出现宕机问题 :D
 
 [![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/anuraghazra/github-readme-stats)
 

readme_de.md

@@ -1,5 +1,5 @@
 <p align="center">
- <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="Github Readme Stats" /> 
+ <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="GitHub Readme Stats" /> 
  <h2 align="center">GitHub Readme Stats</h2>
  <p align="center">Zeige dynamisch generierte GitHub-Statistiken in deinen Readmes!</p>
 </p>
@@ -17,6 +17,14 @@
     <a href="https://github.com/anuraghazra/github-readme-stats/pulls">
       <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/anuraghazra/github-readme-stats?color=0088ff" />
     </a>
+    <br />
+    <br />
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
+      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
+    </a>
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
+      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
+    </a>
   </p>
 
   <p align="center">
@@ -82,7 +90,7 @@ Benutze den `?theme=THEME_NAME`-Parameter wie folgt :-
 
 dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
 
-<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="Github Readme Stat Themes" width="600px"/>
+<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="GitHub Readme Stat Themes" width="600px"/>
 
 Du kannst dir eine Vorschau [aller verfügbaren Themes](./themes/README.md) ansehen oder die [theme config Datei](./themes/index.js) auschecken.
 Außerdem **kannst du neue Themes beisteuern** wenn du möchtest, contributions sind gern gesehen :D
@@ -93,21 +101,21 @@ Du kannst das Erscheinungsbild deiner `Stats Card` oder `Repo Card`, mithilfe vo
 
 Anpassungsoptionen:
 
-| Option           | Type      | Beschreibung                                         | Statistiken (default) | Repo (default)      | Top Programmiersprachen (default)  |
-| ---------------- | --------- | -----------------------------------------------------| --------------------- | ------------------- | ----------------------- |
-| title_color      | hex color | Titelfarbe                                          | 2f80ed                | 2f80ed              | 2f80ed                  |
-| text_color       | hex color | Textkörperfarbe                                     | 333                   | 333                 | 333                     |
-| icon_color       | hex color | Iconfarbe                                           | 4c71f2                | 586069              | 586069                  |
-| bg_color         | hex color | Hintergrundfarbe                                     | FFFEFE                | FFFEFE              | FFFEFE                  |
-| line_height      | number    | kontrolliert die Zeilenhöhe zwischen dem Text        | 30                    | N/A                 | N/A                     |
-| hide_rank        | boolean   | blendet das Ranking aus                              | false                 | N/A                 | N/A                     |
-| hide_title       | boolean   | blendet den Statistik-Titel aus                      | false                 | N/A                 | false                   |
-| hide_border      | boolean   | blendet den Rahmen aus                               | false                 | N/A                 | N/A                     |
-| show_owner       | boolean   | zeigt den Namen des Besitzers in der Repo-Karte      | N/A                   | false               | N/A                     |
-| show_icons       | boolean   | zeige Icons an                                       | false                 | N/A                 | N/A                     |
-| theme            | string    | setze eingebaute themes                              | 'default'             | 'default_repocard'  | 'default'               |
-| cache_seconds    | number    | manuelles setzen der Cachezeiten                     | 1800                  | 1800                | '1800'                  |
-| hide_langs_below | number    | verberge Sprachen unter einem bestimmten Schwellwert | N/A                   | N/A                 | undefined               |
+| Option           | Type      | Beschreibung                                         | Statistiken (default) | Repo (default)     | Top Programmiersprachen (default) |
+| ---------------- | --------- | ---------------------------------------------------- | --------------------- | ------------------ | --------------------------------- |
+| title_color      | hex color | Titelfarbe                                           | 2f80ed                | 2f80ed             | 2f80ed                            |
+| text_color       | hex color | Textkörperfarbe                                      | 333                   | 333                | 333                               |
+| icon_color       | hex color | Iconfarbe                                            | 4c71f2                | 586069             | 586069                            |
+| bg_color         | hex color | Hintergrundfarbe                                     | FFFEFE                | FFFEFE             | FFFEFE                            |
+| line_height      | number    | kontrolliert die Zeilenhöhe zwischen dem Text        | 30                    | N/A                | N/A                               |
+| hide_rank        | boolean   | blendet das Ranking aus                              | false                 | N/A                | N/A                               |
+| hide_title       | boolean   | blendet den Statistik-Titel aus                      | false                 | N/A                | false                             |
+| hide_border      | boolean   | blendet den Rahmen aus                               | false                 | N/A                | N/A                               |
+| show_owner       | boolean   | zeigt den Namen des Besitzers in der Repo-Karte      | N/A                   | false              | N/A                               |
+| show_icons       | boolean   | zeige Icons an                                       | false                 | N/A                | N/A                               |
+| theme            | string    | setze eingebaute themes                              | 'default'             | 'default_repocard' | 'default'                         |
+| cache_seconds    | number    | manuelles setzen der Cachezeiten                     | 1800                  | 1800               | 1800                              |
+| hide_langs_below | number    | verberge Sprachen unter einem bestimmten Schwellwert | N/A                   | N/A                | undefined                         |
 
 > Hinweis bzgl. des Caches: Wenn die Anzahl der Forks und Stars geringer als 1Tsd ist, haben die Repo-Cards eine default Cachezeit von 30 Minuten (1800 Sekunden), ansonsten beträgt diese 2 Stunden (7200 Sekunden). Außerdem ist der Cache auf eine Minimum von 30 Minuten und ein Maximum von 24 Stunden begrenzt.
 

readme_es.md

@@ -1,5 +1,5 @@
 <p align="center">
- <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="Github Readme Stats" />
+ <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="GitHub Readme Stats" />
  <h2 align="center">GitHub Readme Stats</h2>
  <p align="center">¡Obtén tus estadísticas de GitHub generadas dinámicamente en tu README!</p>
 </p>
@@ -14,6 +14,14 @@
     <a href="https://github.com/anuraghazra/github-readme-stats/pulls">
       <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/anuraghazra/github-readme-stats?color=0088ff" />
     </a>
+    <br />
+    <br />
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
+      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
+    </a>
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
+      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
+    </a>
   </p>
 
   <p align="center">
@@ -97,7 +105,7 @@ Utiliza el parámetro `?theme=THEME_NAME`, de esta manera:
 
 dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
 
-<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="Github Readme Stat Themes" width="600px"/>
+<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="GitHub Readme Stat Themes" width="600px"/>
 
 Puedes ver una vista previa de [todos los temas disponibles](./themes/README.md) o ver el [archivo de configuración](./themes/index.js) del tema y también **puedes contribuir con nuevos temas** si lo deseas: D
 

readme_ja.md

@@ -1,5 +1,5 @@
 <p align="center">
- <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="Github Readme Stats" />
+ <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="GitHub Readme Stats" />
  <h2 align="center">GitHub Readme Stats</h2>
  <p align="center">あなたのREADMEに動的に生成されたGitHubの統計情報を載せましょう！</p>
 </p>
@@ -17,6 +17,14 @@
     <a href="https://github.com/anuraghazra/github-readme-stats/pulls">
       <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/anuraghazra/github-readme-stats?color=0088ff" />
     </a>
+    <br />
+    <br />
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
+      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
+    </a>
+    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
+      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
+    </a>
   </p>
 
   <p align="center">
@@ -47,7 +55,7 @@
 
 # GitHub Stats Card
 
-以下の構文をコピーして、あなたのMarkdownファイルに貼り付けるだけです。
+以下の構文をコピーして、あなたの Markdown ファイルに貼り付けるだけです。
 簡単ですね！
 
 `?username=` の値は、あなたの GitHub アカウントのユーザー名に変更してください。
@@ -102,7 +110,7 @@ _Note: このプロジェクトを自分でデプロイしている場合、デ
 
 dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
 
-<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="Github Readme Stat Themes" width="600px"/>
+<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="GitHub Readme Stat Themes" width="600px"/>
 
 用意されている全てのテーマの[プレビュー](./themes/README.md)や[設定ファイル](./themes/index.js)を見ることができます。もしよろしければ、**新しいテーマを投稿してみてください** (´∀` )
 
@@ -112,31 +120,31 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 
 Customization Options:
 
-| Option        | type      | description                                 | Stats Card (default) | Repo Card (default) | Top Lang Card (default) |
-| ------------- | --------- | ------------------------------------------- | -------------------- | ------------------- | ----------------------- |
+| Option        | type      | description                                  | Stats Card (default) | Repo Card (default) | Top Lang Card (default) |
+| ------------- | --------- | -------------------------------------------- | -------------------- | ------------------- | ----------------------- |
 | title_color   | hex color | タイトルの色                                 | 2f80ed               | 2f80ed              | 2f80ed                  |
 | text_color    | hex color | 文字の色                                     | 333                  | 333                 | 333                     |
 | icon_color    | hex color | アイコンの色                                 | 4c71f2               | 586069              | 586069                  |
 | bg_color      | hex color | カードの背景色                               | FFFEFE               | FFFEFE              | FFFEFE                  |
 | line_height   | number    | 字間距離                                     | 30                   | N/A                 | N/A                     |
 | hide          | CSV       | 項目の非表示                                 | undefined            | N/A                 | undefined               |
-| hide_rank     | boolean   | rankingの非表示                              | false                | N/A                 | N/A                     |
+| hide_rank     | boolean   | ranking の非表示                             | false                | N/A                 | N/A                     |
 | hide_title    | boolean   | タイトルの非表示                             | false                | N/A                 | false                   |
 | hide_border   | boolean   | 枠線の非表示                                 | false                | N/A                 | N/A                     |
 | show_owner    | boolean   | オーナー名の表示                             | N/A                  | false               | N/A                     |
 | show_icons    | boolean   | アイコンの表示                               | false                | N/A                 | N/A                     |
-| theme         | string    | 用意されているテーマ                          | 'default'            | 'default_repocard'  | 'default'               |
-| cache_seconds | number    | キャッシュコントロール                        | 1800                 | 1800                | '1800'                  |
-| count_private | boolean   | private contributions 数をコミット総数に追加  | false                | N/A                 | N/A                     |
-| layout        | string    | レイアウトのオプション選択                    | N/A                  | N/A                 | "default"               |
+| theme         | string    | 用意されているテーマ                         | 'default'            | 'default_repocard'  | 'default'               |
+| cache_seconds | number    | キャッシュコントロール                       | 1800                 | 1800                | 1800                    |
+| count_private | boolean   | private contributions 数をコミット総数に追加 | false                | N/A                 | N/A                     |
+| layout        | string    | レイアウトのオプション選択                   | N/A                  | N/A                 | 'default'               |
 
-> キャッシュに関する注意点: Repo cards のデフォルトのキャッシュは、フォーク数とスター数が 1k 未満の場合は 30分(1800秒) で、それ以外の場合は 2時間(7200) です。また、キャッシュは最低でも 30分、最大でも 24時間に制限されていることに注意してください。
+> キャッシュに関する注意点: Repo cards のデフォルトのキャッシュは、フォーク数とスター数が 1k 未満の場合は 30 分(1800 秒) で、それ以外の場合は 2 時間(7200) です。また、キャッシュは最低でも 30 分、最大でも 24 時間に制限されていることに注意してください。
 
 # GitHub Extra Pins
 
-GitHub extra pins を使うと、GitHub の readme プロフィールを使って、自分のプロフィールに 6つ以上のリポジトリをピン留めすることができます。
+GitHub extra pins を使うと、GitHub の readme プロフィールを使って、自分のプロフィールに 6 つ以上のリポジトリをピン留めすることができます。
 
-イェーイ! もはや6つのピン留めされたリポジトリに制限されることはありません。
+イェーイ! もはや 6 つのピン留めされたリポジトリに制限されることはありません。
 
 ### Usage
 
@@ -152,7 +160,7 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
 
 [![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)
 
-リポジトリのオーナーのユーザー名を含める場合は、show_owner変数を使用します。
+リポジトリのオーナーのユーザー名を含める場合は、show_owner 変数を使用します。
 
 [![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_owner=true)](https://github.com/anuraghazra/github-readme-stats)
 
@@ -160,7 +168,7 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
 
 Top languages card には、その GitHub ユーザーが最も利用している Top languages が表示されます。
 
-_NOTE: Top languagesは、ユーザのスキルレベルを示すものではなく、GitHub上でどの言語で最も多くのコードを書いているかを示すGitHubの指標です。_
+_NOTE: Top languages は、ユーザのスキルレベルを示すものではなく、GitHub 上でどの言語で最も多くのコードを書いているかを示す GitHub の指標です。_
 
 ### Usage
 
@@ -249,7 +257,7 @@ Endpoint: `api/top-langs?username=anuraghazra`
 
 GitHub API は 1 時間あたり 5k リクエストしか受け付けていないので、私の `https://github-readme-stats.vercel.app/api` がレートリミッターを超えてしまう可能性があります。自分の Vercel サーバーでホストしているのであれば、何も心配する必要はありません。デプロイボタンをクリックして始めましょう！
 
-NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降は5k以上のリクエストに対応できるようになり、ダウンタイムの問題もなくなりました (´∀` )
+NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降は 5k 以上のリクエストに対応できるようになり、ダウンタイムの問題もなくなりました (´∀` )
 
 [![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/anuraghazra/github-readme-stats)
 
@@ -259,7 +267,7 @@ NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降
 1. [vercel.com](https://vercel.com/)に行きます。
 1. `Log in`をクリックします。  
    ![](https://files.catbox.moe/tct1wg.png)
-1. `Continue with GitHub` を押してGitHubにサインインします。  
+1. `Continue with GitHub` を押して GitHub にサインインします。  
    ![](https://files.catbox.moe/btd78j.jpeg)
 1. GitHub にサインインし、すべてのリポジトリへのアクセスを許可します。
 1. このリポジトリをフォークします。
@@ -270,7 +278,7 @@ NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降
    ![](https://files.catbox.moe/pqub9q.png)
 1. root を選択して、すべてをそのままにしておき、PAT_1 という名前の環境変数を（下図のように）追加します。これには個人アクセストークン (PAT) が含まれており、[ここ](https://github.com/settings/tokens/new)で簡単に作成することができます (すべてをそのままにしておいて、何かに名前を付けてください。)
    ![](https://files.catbox.moe/0ez4g7.png)
-1. デプロイをクリックすれば完了です。APIを使用するためにあなたのドメインを参照してください!
+1. デプロイをクリックすれば完了です。API を使用するためにあなたのドメインを参照してください!
 
 </details>
 
@@ -283,7 +291,7 @@ NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降
 
 - あなたの readme で github-readme-stats を使用して適切なクレジットを付与し、それにリンクします (´∀` )
 - 主演とプロジェクトの共有 :rocket:
-- [![paypal.me/anuraghazra](https://ionicabizau.github.io/badges/paypal.svg)](https://www.paypal.me/anuraghazra) - PayPalを介して1回限りの寄付を行うことができます。私はおそらく ~~コーヒー~~ お茶買うでしょう。 :tea:
+- [![paypal.me/anuraghazra](https://ionicabizau.github.io/badges/paypal.svg)](https://www.paypal.me/anuraghazra) - PayPal を介して 1 回限りの寄付を行うことができます。私はおそらく ~~コーヒー~~ お茶買うでしょう。 :tea:
 
 Thanks! :heart:
 

src/Card.js

@@ -0,0 +1,146 @@
+const { FlexLayout } = require("./utils");
+const { getAnimations } = require("./getStyles");
+
+class Card {
+  constructor({
+    width = 100,
+    height = 100,
+    colors = {},
+    title = "",
+    titlePrefixIcon,
+  }) {
+    this.width = width;
+    this.height = height;
+
+    this.hideBorder = false;
+    this.hideTitle = false;
+
+    // returns theme based colors with proper overrides and defaults
+    this.colors = colors;
+    this.title = title;
+    this.css = "";
+
+    this.paddingX = 25;
+    this.paddingY = 35;
+    this.titlePrefixIcon = titlePrefixIcon;
+    this.animations = true;
+  }
+
+  disableAnimations() {
+    this.animations = false;
+  }
+
+  setCSS(value) {
+    this.css = value;
+  }
+
+  setHideBorder(value) {
+    this.hideBorder = value;
+  }
+
+  setHideTitle(value) {
+    this.hideTitle = value;
+    if (value) {
+      this.height -= 30;
+    }
+  }
+
+  setTitle(text) {
+    this.title = text;
+  }
+
+  renderTitle() {
+    const titleText = `
+      <text
+        x="0"
+        y="0"
+        class="header"
+        data-testid="header"
+      >${this.title}</text>
+    `;
+
+    const prefixIcon = `
+      <svg
+        class="icon"
+        x="0"
+        y="-13"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        height="16"
+      >
+        ${this.titlePrefixIcon}
+      </svg>
+    `;
+    return `
+      <g
+        data-testid="card-title"
+        transform="translate(${this.paddingX}, ${this.paddingY})"
+      >
+        ${FlexLayout({
+          items: [this.titlePrefixIcon && prefixIcon, titleText],
+          gap: 25,
+        }).join("")}
+      </g>
+    `;
+  }
+
+  render(body) {
+    return `
+      <svg
+        width="${this.width}"
+        height="${this.height}"
+        viewBox="0 0 ${this.width} ${this.height}"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: ${this.colors.titleColor};
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          ${this.css}
+
+          ${
+            process.env.NODE_ENV === "test" || !this.animations
+              ? ""
+              : getAnimations()
+          }
+        </style>
+
+        ${typeof this.colors.bgColor == 'object' ? `<defs>
+          <linearGradient id="gradient" gradientTransform="rotate(${this.colors.bgColor[0]})">
+            <stop offset="0%"  stop-color="#${this.colors.bgColor[1]}" />
+            <stop offset="100%" stop-color="#${this.colors.bgColor[2]}" />
+          </linearGradient>
+        </defs>` : ""}
+
+        <rect
+          data-testid="card-bg"
+          x="0.5"
+          y="0.5"
+          rx="4.5"
+          height="99%"
+          stroke="#E4E2E2"
+          width="${this.width - 1}"
+          fill="${typeof this.colors.bgColor == 'object' ? "url(#gradient)" : this.colors.bgColor}"
+          stroke-opacity="${this.hideBorder ? 0 : 1}"
+        />
+
+        ${this.hideTitle ? "" : this.renderTitle()}
+
+        <g
+          data-testid="main-card-body"
+          transform="translate(0, ${
+            this.hideTitle ? this.paddingX : this.paddingY + 20
+          })"
+        >
+          ${body}
+        </g>
+      </svg>
+    `;
+  }
+}
+
+module.exports = Card;

src/getStyles.js

@@ -9,10 +9,23 @@ const calculateCircleProgress = (value) => {
   return percentage;
 };
 
-const getAnimations = ({ progress }) => {
+const getProgressAnimation = ({ progress }) => {
+  return `
+    @keyframes rankAnimation {
+      from {
+        stroke-dashoffset: ${calculateCircleProgress(0)};
+      }
+      to {
+        stroke-dashoffset: ${calculateCircleProgress(progress)};
+      }
+    }
+  `;
+};
+
+const getAnimations = () => {
   return `
     /* Animations */
-    @keyframes scaleIn {
+    @keyframes scaleInAnimation {
       from {
         transform: translate(-5px, 5px) scale(0);
       }
@@ -20,7 +33,7 @@ const getAnimations = ({ progress }) => {
         transform: translate(-5px, 5px) scale(1);
       }
     }
-    @keyframes fadeIn {
+    @keyframes fadeInAnimation {
       from {
         opacity: 0;
       }
@@ -28,14 +41,6 @@ const getAnimations = ({ progress }) => {
         opacity: 1;
       }
     }
-    @keyframes rankAnimation {
-      from {
-        stroke-dashoffset: ${calculateCircleProgress(0)};
-      }
-      to {
-        stroke-dashoffset: ${calculateCircleProgress(progress)};
-      }
-    }
   `;
 };
 
@@ -47,20 +52,16 @@ const getStyles = ({
   progress,
 }) => {
   return `
-    .header {
-      font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor}; 
-      animation: fadeIn 0.8s ease-in-out forwards;
-    }
-    .stat { 
+    .stat {
       font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
     }
-    .stagger { 
+    .stagger {
       opacity: 0;
-      animation: fadeIn 0.3s ease-in-out forwards;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
     }
-    .rank-text { 
+    .rank-text {
       font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; 
-      animation: scaleIn 0.3s ease-in-out forwards;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
     }
     
     .bold { font-weight: 700 }
@@ -86,9 +87,8 @@ const getStyles = ({
       transform: rotate(-90deg);
       animation: rankAnimation 1s forwards ease-in-out;
     }
-
-    ${process.env.NODE_ENV === "test" ? "" : getAnimations({ progress })}
+    ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })}
   `;
 };
 
-module.exports = getStyles;
+module.exports = { getStyles, getAnimations };

src/renderRepoCard.js

@@ -7,6 +7,7 @@ const {
 } = require("../src/utils");
 const icons = require("./icons");
 const toEmoji = require("emoji-name-map");
+const Card = require("./Card");
 
 const renderRepoCard = (repo, options = {}) => {
   const {
@@ -90,68 +91,75 @@ const renderRepoCard = (repo, options = {}) => {
     `
     : "";
 
+  const iconWithLabel = (icon, label, testid) => {
+    return `
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        ${icon}
+      </svg>
+      <text data-testid="${testid}" class="gray" x="25">${label}</text>
+    `;
+  };
   const svgStars =
     stargazers.totalCount > 0 &&
-    `
-    <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-      ${icons.star}
-    </svg>
-    <text data-testid="stargazers" class="gray" x="25">${totalStars}</text>
-  `;
-
+    iconWithLabel(icons.star, totalStars, "stargazers");
   const svgForks =
-    forkCount > 0 &&
-    `
-    <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-      ${icons.fork}
-    </svg>
-    <text data-testid="forkcount" class="gray" x="25">${totalForks}</text>
-  `;
+    forkCount > 0 && iconWithLabel(icons.fork, totalForks, "forkcount");
 
-  return `
-    <svg version="1.1" width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <style>
-      .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
-      .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-      .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-      .icon { fill: ${iconColor} }
-      .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
-      .badge rect { opacity: 0.2 }
-      </style>
-      ${isGradient ? gradient : ""}
-      <rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${isGradient ? "url('#gradient')" : bgColor}" stroke="#E4E2E2"/>
-      <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-        ${icons.contribs}
-      </svg>
+  const starAndForkCount = FlexLayout({
+    items: [svgStars, svgForks],
+    gap: 65,
+  }).join("");
 
-      <text x="50" y="38" class="header">${header}</text>
+  const card = new Card({
+    title: header,
+    titlePrefixIcon: icons.contribs,
+    width: 400,
+    height,
+    colors: {
+      titleColor,
+      textColor,
+      iconColor,
+      bgColor,
+    },
+  });
 
-      ${
-        isTemplate
-          ? getBadgeSVG("Template")
-          : isArchived
-          ? getBadgeSVG("Archived")
-          : ""
-      }
+  card.disableAnimations();
+  card.setHideBorder(false);
+  card.setHideTitle(false);
+  card.setCSS(`
+    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+    .icon { fill: ${iconColor} }
+    .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
+    .badge rect { opacity: 0.2 }
+  `);
 
-      <text class="description" x="25" y="50">
-        ${multiLineDescription
-          .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
-          .join("")}
-      </text>
+  return card.render(`
+    ${
+      isTemplate
+        ? getBadgeSVG("Template")
+        : isArchived
+        ? getBadgeSVG("Archived")
+        : ""
+    }
 
-      <g transform="translate(0, ${height - 20})">
-        ${svgLanguage}
+    <text class="description" x="25" y="-5">
+      ${multiLineDescription
+        .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
+        .join("")}
+    </text>
 
-        <g 
-          data-testid="star-fork-group" 
-          transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 0)"
-        >
-          ${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
-        </g>
+    <g transform="translate(0, ${height - 75})">
+      ${svgLanguage}
+
+      <g
+        data-testid="star-fork-group" 
+        transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 0)"
+      >
+        ${starAndForkCount}
       </g>
-    </svg>
-  `;
+    </g>
+  `);
 };
 
 module.exports = renderRepoCard;

src/renderStatsCard.js

@@ -4,8 +4,9 @@ const {
   FlexLayout,
   encodeHTML,
 } = require("../src/utils");
-const getStyles = require("./getStyles");
+const { getStyles } = require("./getStyles");
 const icons = require("./icons");
+const Card = require("./Card");
 
 const createTextNode = ({ icon, label, value, id, index, showIcons }) => {
   const kValue = kFormatter(value);
@@ -52,7 +53,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     theme = "default",
   } = options;
 
-  const lheight = parseInt(line_height);
+  const lheight = parseInt(line_height, 10);
 
 
   // returns theme based colors with proper overrides and defaults
@@ -118,52 +119,11 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     hide_rank ? 0 : 150
   );
 
-  // the better user's score the the rank will be closer to zero so
-  // subtracting 100 to get the progress in 100%
-  const progress = 100 - rank.score;
-
-  const styles = getStyles({
-    titleColor,
-    textColor,
-    iconColor,
-    show_icons,
-    progress,
-  });
-
   // Conditionally rendered elements
-
-  const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s";
-  const title = hide_title
-    ? ""
-    : `<text x="25" y="35" class="header">${encodeHTML(name)}'${apostrophe} GitHub Stats</text>`;
-
-  const border = `
-    <rect 
-      data-testid="card-bg"
-      x="0.5"
-      y="0.5"
-      width="494"
-      height="99%"
-      rx="4.5"
-      fill="${isGradient ? "url('#gradient')" : bgColor}"
-      stroke="#E4E2E2"
-      stroke-opacity="${hide_border ? 0 : 1}"
-    />
-  `;
-
-  const gradient = isGradient ? `
-    <defs>
-      <linearGradient id="gradient" gradientTransform="rotate(${bgColor[0]})">
-        <stop offset="0%"  stop-color="#${bgColor[1]}" />
-        <stop offset="100%" stop-color="#${bgColor[2]}" />
-      </linearGradient>
-    </defs>`
-    : undefined
   const rankCircle = hide_rank
     ? ""
-    : `<g data-testid="rank-circle" transform="translate(400, ${
-        height / 1.85
-      })">
+    : `<g data-testid="rank-circle" 
+          transform="translate(400, ${height / 2 - 50})">
         <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
         <g class="rank-text">
@@ -179,35 +139,45 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         </g>
       </g>`;
 
-  if (hide_title) {
-    height -= 30;
-  }
+  // the better user's score the the rank will be closer to zero so
+  // subtracting 100 to get the progress in 100%
+  const progress = 100 - rank.score;
+  const cssStyles = getStyles({
+    titleColor,
+    textColor,
+    iconColor,
+    show_icons,
+    progress,
+  });
 
-  return `
-    <svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <style>
-        ${styles}
-      </style>
-      
-      ${isGradient ? gradient : ""}
-      ${border}
-      ${title}
+  const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s";
+  const card = new Card({
+    title: `${encodeHTML(name)}'${apostrophe} GitHub Stats`,
+    width: 495,
+    height,
+    colors: {
+      titleColor,
+      textColor,
+      iconColor,
+      bgColor,
+    },
+  });
 
-      <g data-testid="card-body-content" transform="translate(0, ${
-        hide_title ? -30 : 0
-      })">
-        ${rankCircle}
+  card.setHideBorder(hide_border);
+  card.setHideTitle(hide_title);
+  card.setCSS(cssStyles);
 
-        <svg x="0" y="55">
-          ${FlexLayout({
-            items: statItems,
-            gap: lheight,
-            direction: "column",
-          }).join("")}
-        </svg>
-      </g>
-    </svg>
-  `;
+  return card.render(`
+    ${rankCircle}
+
+    <svg x="0" y="0">
+      ${FlexLayout({
+        items: statItems,
+        gap: lheight,
+        direction: "column",
+      }).join("")}
+    </svg> 
+  `);
 };
 
 module.exports = renderStatsCard;

src/renderTopLanguages.js

@@ -1,4 +1,5 @@
 const { getCardColors, FlexLayout, clampValue } = require("../src/utils");
+const Card = require("./Card");
 
 const createProgressNode = ({ width, color, name, progress }) => {
   const paddingRight = 95;
@@ -63,6 +64,7 @@ const lowercaseTrim = (name) => name.toLowerCase().trim();
 const renderTopLanguages = (topLangs, options = {}) => {
   const {
     hide_title,
+    hide_border,
     card_width,
     title_color,
     text_color,
@@ -169,37 +171,29 @@ const renderTopLanguages = (topLangs, options = {}) => {
     }).join("");
   }
 
-  if (hide_title) {
-    height -= 30;
-  }
-  const gradient = isGradient ? `
-  <defs>
-    <linearGradient id="gradient" gradientTransform="rotate(${bgColor[0]})">
-      <stop offset="0%"  stop-color="#${bgColor[1]}" />
-      <stop offset="100%" stop-color="#${bgColor[2]}" />
-    </linearGradient>
-  </defs>`
-  : undefined
-  return `
-    <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <style>
-        .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
-        .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-      </style>
-      ${isGradient ? gradient : ""}
-      <rect data-testid="card-bg" x="0.5" y="0.5" width="99.7%" height="99%" rx="4.5" fill="${isGradient ? "url('#gradient')" : bgColor}" stroke="#E4E2E2"/>
+  const card = new Card({
+    title: "Most Used Languages",
+    width,
+    height,
+    colors: {
+      titleColor,
+      textColor,
+      bgColor,
+    },
+  });
 
-      ${
-        hide_title
-          ? ""
-          : `<text data-testid="header" x="25" y="35" class="header">Most Used Languages</text>`
-      }
+  card.disableAnimations();
+  card.setHideBorder(hide_border);
+  card.setHideTitle(hide_title);
+  card.setCSS(`
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+  `);
 
-      <svg data-testid="lang-items" x="25" y="${hide_title ? 25 : 55}">
-        ${finalLayout}
-      </svg>
+  return card.render(`
+    <svg data-testid="lang-items" x="25">
+      ${finalLayout}
     </svg>
-  `;
+  `);
 };
 
 module.exports = renderTopLanguages;

src/utils.js

@@ -13,7 +13,7 @@ const renderError = (message, secondaryMessage = "") => {
     <rect x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
     <text x="25" y="45" class="text">Something went wrong! file an issue at https://git.io/JJmN9</text>
     <text data-testid="message" x="25" y="55" class="text small">
-      <tspan x="25" dy="18">${message}</tspan>
+      <tspan x="25" dy="18">${encodeHTML(message)}</tspan>
       <tspan x="25" dy="18"  class="gray">${secondaryMessage}</tspan>
     </text>
     </svg>

tests/card.test.js

@@ -0,0 +1,136 @@
+require("@testing-library/jest-dom");
+const cssToObject = require("css-to-object");
+const Card = require("../src/Card");
+const icons = require("../src/icons");
+const { getCardColors } = require("../src/utils");
+const { queryByTestId } = require("@testing-library/dom");
+
+describe("Card", () => {
+  it("should hide border", () => {
+    const card = new Card({});
+    card.setHideBorder(true);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "stroke-opacity",
+      "0"
+    );
+  });
+
+  it("should not hide border", () => {
+    const card = new Card({});
+    card.setHideBorder(false);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "stroke-opacity",
+      "1"
+    );
+  });
+
+  it("should hide title", () => {
+    const card = new Card({});
+    card.setHideTitle(true);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-title")).toBeNull();
+  });
+
+  it("should not hide title", () => {
+    const card = new Card({});
+    card.setHideTitle(false);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-title")).toBeInTheDocument();
+  });
+
+  it("title should have prefix icon", () => {
+    const card = new Card({ title: "ok", titlePrefixIcon: icons.contribs });
+
+    document.body.innerHTML = card.render(``);
+    expect(document.getElementsByClassName("icon")[0]).toBeInTheDocument();
+  });
+
+  it("title should not have prefix icon", () => {
+    const card = new Card({ title: "ok" });
+
+    document.body.innerHTML = card.render(``);
+    expect(document.getElementsByClassName("icon")[0]).toBeUndefined();
+  });
+
+  it("should have proper height, width", () => {
+    const card = new Card({ height: 200, width: 200, title: "ok" });
+    document.body.innerHTML = card.render(``);
+    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
+      "height",
+      "200"
+    );
+    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
+      "height",
+      "200"
+    );
+  });
+
+  it("should have less height after title is hidden", () => {
+    const card = new Card({ height: 200, title: "ok" });
+    card.setHideTitle(true);
+
+    document.body.innerHTML = card.render(``);
+    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
+      "height",
+      "170"
+    );
+  });
+
+  it("main-card-body should have proper when title is visible", () => {
+    const card = new Card({ height: 200 });
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute(
+      "transform",
+      "translate(0, 55)"
+    );
+  });
+
+  it("main-card-body should have proper position after title is hidden", () => {
+    const card = new Card({ height: 200 });
+    card.setHideTitle(true);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute(
+      "transform",
+      "translate(0, 25)"
+    );
+  });
+
+  it("should render with correct colors", () => {
+    // returns theme based colors with proper overrides and defaults
+    const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+      title_color: "f00",
+      icon_color: "0f0",
+      text_color: "00f",
+      bg_color: "fff",
+      theme: "default",
+    });
+
+    const card = new Card({
+      height: 200,
+      colors: {
+        titleColor,
+        textColor,
+        iconColor,
+        bgColor,
+      },
+    });
+    document.body.innerHTML = card.render(``);
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+    const headerClassStyles = stylesObject[".header"];
+
+    expect(headerClassStyles.fill).toBe("#f00");
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#fff"
+    );
+  });
+});

tests/renderStatsCard.test.js

@@ -69,20 +69,6 @@ describe("Test renderStatsCard", () => {
     expect(queryByTestId(document.body, "contribs")).toBeNull();
   });
 
-  it("should hide_border", () => {
-    document.body.innerHTML = renderStatsCard(stats, { hide_border: true });
-    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
-      "stroke-opacity",
-      "0"
-    );
-
-    document.body.innerHTML = renderStatsCard(stats, { hide_border: false });
-    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
-      "stroke-opacity",
-      "1"
-    );
-  });
-
   it("should hide_rank", () => {
     document.body.innerHTML = renderStatsCard(stats, { hide_rank: true });
 
@@ -202,35 +188,6 @@ describe("Test renderStatsCard", () => {
     );
   });
 
-  it("should hide the title", () => {
-    document.body.innerHTML = renderStatsCard(stats, {
-      hide_title: true,
-    });
-
-    expect(document.getElementsByClassName("header")[0]).toBeUndefined();
-    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
-      "height",
-      "165"
-    );
-    expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute(
-      "transform",
-      "translate(0, -30)"
-    );
-  });
-
-  it("should not hide the title", () => {
-    document.body.innerHTML = renderStatsCard(stats, {});
-
-    expect(document.getElementsByClassName("header")[0]).toBeDefined();
-    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
-      "height",
-      "195"
-    );
-    expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute(
-      "transform",
-      "translate(0, 0)"
-    );
-  });
 
   it("should render icons correctly", () => {
     document.body.innerHTML = renderStatsCard(stats, {

tests/renderTopLanguages.test.js

@@ -98,25 +98,6 @@ describe("Test renderTopLanguages", () => {
     expect(document.querySelector("svg")).toHaveAttribute("height", "245");
   });
 
-  it("should hide_title", () => {
-    document.body.innerHTML = renderTopLanguages(langs, { hide_title: false });
-    expect(document.querySelector("svg")).toHaveAttribute("height", "205");
-    expect(queryByTestId(document.body, "lang-items")).toHaveAttribute(
-      "y",
-      "55"
-    );
-
-    // Lets hide now
-    document.body.innerHTML = renderTopLanguages(langs, { hide_title: true });
-    expect(document.querySelector("svg")).toHaveAttribute("height", "175");
-
-    expect(queryByTestId(document.body, "header")).not.toBeInTheDocument();
-    expect(queryByTestId(document.body, "lang-items")).toHaveAttribute(
-      "y",
-      "25"
-    );
-  });
-
   it("should render with custom width set", () => {
     document.body.innerHTML = renderTopLanguages(langs, {});