feat: improved top lang fetching & changed title

Co-authored-by: Github Readme Stats Bot <hazru.anurag@gmail.com>

.github/FUNDING.yml

@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ["https://www.paypal.me/anuraghazra"] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+custom: ["https://www.paypal.me/anuraghazra", "https://www.buymeacoffee.com/anuraghazra"] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/generate-theme-doc.yml

@@ -0,0 +1,35 @@
+name: Generate Theme Readme
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "themes/index.js"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+
+      - name: npm install, generate readme
+        run: |
+          npm install
+          npm run theme-readme-gen
+        env:
+          CI: true
+
+      - name: Run Script
+        uses: skx/github-action-tester@master
+        with:
+          script: ./scripts/push-theme-readme.sh
+        env:
+          CI: true
+          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
+          GH_REPO: ${{ secrets.GH_REPO }}

.gitignore

@@ -2,4 +2,6 @@
 .env
 node_modules
 package-lock.json
+*.lock
+.vscode/
 coverage

CONTRIBUTING.md

@@ -0,0 +1,75 @@
+# Contributing to [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
+
+We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
+
+- Reporting a issue
+- Discussing the current state of the code
+- Submitting a fix
+- Proposing new features
+- Becoming a maintainer
+
+## All Changes Happen Through Pull Requests
+
+Pull requests are the best way to propose changes. We actively welcome your pull requests:
+
+1. Fork the repo and create your branch from `master`.
+1. If you've added code that should be tested, add some tests' example.
+1. If you've changed APIs, update the documentation.
+1. Issue that pull request!
+
+## Local Development
+
+To run & test github-readme-stats you need to follow few simple steps :-
+_(make sure you already have a [vercel](https://vercel.com/) account)_
+
+1. Install [Vercel CLI](https://vercel.com/download)
+1. Fork the repository and clone the code to your local machine
+1. Run the command "vercel" in the root and follow the steps there
+1. Create a `.env` file in the root of the directory
+1. In the .env file add a new variable named "PAT" with your [github Personal access token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token)
+1. Run the command "vercel dev" to start a development server at https://localhost:3000
+
+## Themes Contribution
+
+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.
+
+While creating the Pull request to add a new theme **don't forget to add a screenshot of how your theme looks**, you can also test how it looks using custom url parameters like `title_color`, `icon_color`, `bg_color`, `text_color`
+
+> NOTE: If you are contributing your theme just because you are using it personally, then you can [customize the looks](./readme.md#customization) of your card with URL params instead.
+
+## Any contributions you make will be under the MIT Software License
+
+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)
+
+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!
+
+### Bug Reports
+
+**Great Bug Reports** tend to have:
+
+- A quick summary and/or background
+- Steps to reproduce
+  - Be specific!
+  - Share the snapshot, if possible.
+  - 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)
+
+People _love_ thorough bug reports. I'm not even kidding.
+
+### Feature Request
+
+**Great Feature Requests** tend to have:
+
+- A quick idea summary
+- What & why you wanted to add the specific feature
+- Additional Context like images, links to resources to implement the feature etc etc.
+
+## License
+
+By contributing, you agree that your contributions will be licensed under its [MIT License](./LICENSE).

api/index.js

@@ -2,6 +2,7 @@ require("dotenv").config();
 const {
   renderError,
   parseBoolean,
+  parseArray,
   clampValue,
   CONSTANTS,
 } = require("../src/utils");
@@ -16,6 +17,7 @@ module.exports = async (req, res) => {
     hide_border,
     hide_rank,
     show_icons,
+    count_private,
     line_height,
     title_color,
     icon_color,
@@ -29,9 +31,14 @@ module.exports = async (req, res) => {
   res.setHeader("Content-Type", "image/svg+xml");
 
   try {
-    stats = await fetchStats(username);
+    stats = await fetchStats(username, parseBoolean(count_private));
   } catch (err) {
-    return res.send(renderError(err.message));
+    return res.send(
+      renderError(
+        err.message,
+        "Make sure the provided username is not an organization"
+      )
+    );
   }
 
   const cacheSeconds = clampValue(
@@ -44,7 +51,7 @@ module.exports = async (req, res) => {
 
   res.send(
     renderStatsCard(stats, {
-      hide: JSON.parse(hide || "[]"),
+      hide: parseArray(hide),
       show_icons: parseBoolean(show_icons),
       hide_title: parseBoolean(hide_title),
       hide_border: parseBoolean(hide_border),

api/pin.js

@@ -4,6 +4,7 @@ const {
   parseBoolean,
   clampValue,
   CONSTANTS,
+  logger,
 } = require("../src/utils");
 const fetchRepo = require("../src/fetchRepo");
 const renderRepoCard = require("../src/renderRepoCard");
@@ -28,7 +29,7 @@ module.exports = async (req, res) => {
   try {
     repoData = await fetchRepo(username, repo);
   } catch (err) {
-    console.log(err);
+    logger.error(err);
     return res.send(renderError(err.message));
   }
 

api/top-langs.js

@@ -3,6 +3,7 @@ const {
   renderError,
   clampValue,
   parseBoolean,
+  parseArray,
   CONSTANTS,
 } = require("../src/utils");
 const fetchTopLanguages = require("../src/fetchTopLanguages");
@@ -11,7 +12,7 @@ const renderTopLanguages = require("../src/renderTopLanguages");
 module.exports = async (req, res) => {
   const {
     username,
-    hide_langs_below,
+    hide,
     hide_title,
     card_width,
     title_color,
@@ -19,6 +20,7 @@ module.exports = async (req, res) => {
     bg_color,
     theme,
     cache_seconds,
+    layout
   } = req.query;
   let topLangs;
 
@@ -43,11 +45,12 @@ module.exports = async (req, res) => {
       theme,
       hide_title: parseBoolean(hide_title),
       card_width: parseInt(card_width, 10),
-      hide_langs_below: parseFloat(hide_langs_below, 10),
+      hide: parseArray(hide),
       title_color,
       text_color,
       bg_color,
       theme,
+      layout
     })
   );
 };

codecov.yml

@@ -7,4 +7,7 @@ coverage:
   range: "70...100"
 
   status:
+    project:
+      default:
+        threshold: 5
     patch: false

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "jest --coverage",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "theme-readme-gen": "node scripts/generate-theme-doc"
   },
   "author": "Anurag Hazra",
   "license": "MIT",
@@ -15,9 +16,17 @@
     "axios": "^0.19.2",
     "axios-mock-adapter": "^1.18.1",
     "css-to-object": "^1.1.0",
+    "husky": "^4.2.5",
     "jest": "^26.1.0"
   },
   "dependencies": {
-    "dotenv": "^8.2.0"
+    "dotenv": "^8.2.0",
+    "emoji-name-map": "^1.2.8",
+    "word-wrap": "^1.2.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm test"
+    }
   }
 }

readme.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">Get dynamically generated GitHub stats on your readmes!</p>
 </p>
@@ -22,9 +22,9 @@
   <p align="center">
     <a href="#demo">View Demo</a>
     ·
-    <a href="https://github.com/anuraghazra/github-readme-stats/issues">Report Bug</a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues/new/choose">Report Bug</a>
     ·
-    <a href="https://github.com/anuraghazra/github-readme-stats/issues">Request Feature</a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues/new/choose">Request Feature</a>
   </p>
   <p align="center">
     <a href="readme_cn.md">简体中文</a>
@@ -57,12 +57,24 @@ _Note: Ranks are calculated based on user's stats, see [src/calculateRank.js](./
 
 ### Hiding individual stats
 
-To hide any specific stats, you can pass a query parameter `?hide=` with an array of items you wanna hide.
+To hide any specific stats, you can pass a query parameter `?hide=` with comma separated values.
 
-> Options: `&hide=["stars","commits","prs","issues","contribs"]`
+> Options: `&hide=stars,commits,prs,issues,contribs`
 
 ```md
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","prs"])
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,prs)
+```
+
+### Adding private contributions count to total commits count
+
+You can add the count of all your private contributions to the total commits count by using the query parameter `?count_private=true`.
+
+_Note: If you are deploying this project yourself, the private contributions will be counted by default otherwise you need to chose to share your private contribution counts._
+
+> Options: `&count_private=true`
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&count_private=true)
 ```
 
 ### Showing icons
@@ -97,21 +109,23 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
 
 Customization 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_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'                  |
-| hide_langs_below | number    | hide langs below certain threshold (lang card) | N/A                  | N/A                 | undefined               |
+| 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"               |
 
 > 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
 
@@ -155,18 +169,30 @@ Endpoint: `api/top-langs?username=anuraghazra`
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
-### Hide languages below certain threshold
+### Hide individual languages
 
-You can use `?hide_langs_below=NUMBER` parameter to hide languages below a specified threshold percentage.
+You can use `?hide=language1,language2` parameter to hide individual languages.
 
 ```md
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide_langs_below=1)](https://github.com/anuraghazra/github-readme-stats)
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide=javascript,html)](https://github.com/anuraghazra/github-readme-stats)
+```
+
+### Compact Language Card Layout
+
+You can use the `&layout=compact` option to change the card design.
+
+```md
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Demo
 
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 
+- Compact layout
+
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+
 ---
 
 ### All Demos
@@ -177,11 +203,11 @@ You can use `?hide_langs_below=NUMBER` parameter to hide languages below a speci
 
 - Hiding specific stats
 
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","issues"])
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,issues)
 
 - Showing icons
 
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=issues&show_icons=true)
 
 - Themes
 
@@ -242,6 +268,7 @@ NOTE: Since [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) we
 1. Select root and keep everything as is, just add your environment variable named PAT_1 (as shown), which will contain a personal access token (PAT), which you can easily create [here](https://github.com/settings/tokens/new) (leave everything as is, just name it something, it can be anything you want)
    ![](https://files.catbox.moe/0ez4g7.png)
 1. Click deploy, and you're good to go. See your domains to use the API!
+
 </details>
 
 ## :sparkling_heart: Support the project

readme_cn.md

@@ -1,13 +1,16 @@
 <p align="center">
  <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 align="center">在你的 README 中获取动态生成的 GitHub 统计信息！</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" />
     </a>
+    <a href="https://codecov.io/gh/anuraghazra/github-readme-stats">
+      <img src="https://codecov.io/gh/anuraghazra/github-readme-stats/branch/master/graph/badge.svg" />
+    </a>
     <a href="https://github.com/anuraghazra/github-readme-stats/issues">
       <img alt="Issues" src="https://img.shields.io/github/issues/anuraghazra/github-readme-stats?color=0088ff" />
     </a>
@@ -19,9 +22,14 @@
   <p align="center">
     <a href="#demo">查看 Demo</a>
     ·
-    <a href="https://github.com/anuraghazra/github-readme-stats/issues">报告 bug</a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues/new/choose">报告 bug</a>
     ·
-    <a href="https://github.com/anuraghazra/github-readme-stats/issues">请求增加功能</a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues/new/choose">请求增加功能</a>
+  </p>
+  <p align="center">
+    <a href="readme.md">English</a>
+    ·
+    <a href="readme_es.md">Español</a>
   </p>
 </p>
 <p align="center">喜欢这个项目？请考虑<a href="https://www.paypal.me/anuraghazra">捐赠</a>来帮助它完善！
@@ -30,6 +38,7 @@
 
 - [GitHub 统计卡片](#GitHub-统计卡片)
 - [GitHub 更多置顶](#GitHub-更多置顶)
+- [热门语言卡片](#热门语言卡片)
 - [主题](#主题)
 - [自定义](#自定义)
 - [自己部署](#自己部署)
@@ -37,22 +46,35 @@
 # GitHub 统计卡片
 
 将这行代码复制到你的 markdown 文件中，简单如此！
+
 更改 `?username=` 的值为你的 GitHub 用户名。
 
 ```md
 [![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
-_Note: 排名基于用户的统计信息计算得出，详见 [src/calculateRank.js](./src/calculateRank.js)_
+_注: 排名基于用户的统计信息计算得出，详见 [src/calculateRank.js](./src/calculateRank.js)_
 
-### 隐藏个人统计信息
+### 隐藏个别统计项
 
-想要隐藏某项统计信息，你可以调用参数 `?hide=`，并调用 你想要隐藏的项目 组成的数组。
+想要隐藏指定统计信息，你可以调用参数 `?hide=`，其值用 `,` 分隔。
 
-> 选项：`&hide=["stars","prs","issues","contribs"]`
+> 选项：`&hide=stars,commits,prs,issues,contribs`
 
 ```md
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","prs"])
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,prs)
+```
+
+### 把私人贡献计数添加到总提交计数中
+
+你可以用参数 `?count_private=true` 把私人贡献计数添加到总提交计数中。
+
+_注：如果你是自己部署本项目，私人贡献将会默认被计数，如果不是自己部署，你需要分享你的私人贡献计数。_
+
+> Options: `&count_private=true`
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&count_private=true)
 ```
 
 ### 显示图标
@@ -64,6 +86,7 @@ _Note: 排名基于用户的统计信息计算得出，详见 [src/calculateRank
 ```
 
 ### 主题
+
 你可以通过现有的主题进行卡片个性化，省去[手动自定义](#自定义)的麻烦。
 
 调用 `?theme=THEME_NAME` 参数，如下：
@@ -72,7 +95,7 @@ _Note: 排名基于用户的统计信息计算得出，详见 [src/calculateRank
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
 ```
 
-#### 所有现有主题：
+#### 所有现有主题
 
 dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
 
@@ -86,51 +109,26 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 
 自定义选项：
 
-| Option      | type      | description                          | Stats Card (default) | Repo Card (default) |
-| ----------- | --------- | ------------------------------------ | -------------------- | ------------------- |
-| title_color | hex color | 标题颜色                              | 2f80ed               | 2f80ed              |
-| text_color  | hex color | 字体颜色                              | 333                  | 333                 |
-| icon_color  | hex color | 图标颜色                              | 4c71f2               | 586069              |
-| bg_color    | hex color | 卡片背景颜色                           | FFFEFE               | FFFEFE              |
-| line_height | number    | 文字行高                              | 30                   | N/A                 |
-| hide_rank   | boolean   | 隐藏评分等级                           | false                | N/A                 |
-| hide_title  | boolean   | 隐藏卡片标题                           | false                | N/A                 |
-| hide_border | boolean   | 隐藏卡片边框                           | false                | N/A                 |
-| show_owner  | boolean   | 显示 Repo 卡片所属账户用户名             | N/A                  | false               |
-| show_icons  | boolean   | 显示图标                              | false                | N/A                 |
-| theme       | string    | 设置主题                              | 'default'            | 'default_repocard'  |
+| 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'          |
 
----
 
-### Demo
-
-- 默认
-
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
-
-- 隐藏特定数据
-
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","issues"])
-
-- 显示图标
-
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)
-
-- 主题
-
-从 [默认主题](#主题) 中进行选择
-
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
-
-- 自定义添加卡片
-
-![Anurag's github stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
-
-- 自定义 Repo 卡片
-
-![Customized Card](https://github-readme-stats.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&title_color=fff&icon_color=f9f9f9&text_color=9f9f9f&bg_color=151515)
-
----
+> 注意缓存：Repo 卡片默认缓存 30 分钟，如果 fork 数和 star 数小于 1k ，则默认为 2小时。缓存被限制为最少30分钟，最长24小时。
 
 # GitHub 更多置顶
 
@@ -156,6 +154,82 @@ 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&show_owner=true)](https://github.com/anuraghazra/github-readme-stats)
 
+# 热门语言卡片
+
+热门语言卡片显示了Github用户常用的编程语言。
+
+*注意：热门语言并不表示我的技能水平或类似的水平，它是用户在Github上拥有最多代码的一项指标，它是github-readme-stats的新功能*
+
+### 使用细则
+
+将此代码复制粘贴到您的`README.md`文件中，并改变链接。
+
+Endpoint: `api/top-langs?username=anuraghazra`
+
+```md
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
+```
+
+### 隐藏特定语言
+
+可以使用`?hide=语言1,语言2`参数来隐藏指定的语言。
+
+```md
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide=语言1,语言2)](https://github.com/anuraghazra/github-readme-stats)
+```
+
+### 紧凑的语言卡片布局
+
+你可以使用 `&layout=compact` 参数来改变卡片的样式。
+
+```md
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+```
+
+### Demo
+
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
+
+- 紧凑布局
+
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+
+---
+
+### 全部Demo
+
+- 默认
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
+
+- 隐藏特定数据
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,issues)
+
+- 显示图标
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=issues&show_icons=true)
+
+- 主题
+
+从 [默认主题](#主题) 中进行选择
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
+
+- 自定义统计卡片
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
+
+- 自定义代码库卡片
+
+![Customized Card](https://github-readme-stats.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&title_color=fff&icon_color=f9f9f9&text_color=9f9f9f&bg_color=151515)
+
+- 热门语言
+
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
+
+---
+
 ### 提示 (对齐 Repo 卡片)
 
 你通常无法将图片靠边显示。为此，您可以使用以下方法：
@@ -196,6 +270,7 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
 1. 选择 root 并将所有内容保持不变，并且只需添加名为 PAT_1 的环境变量（如图所示），其中将包含一个个人访问令牌（PAT），你可以在[这里](https://github.com/settings/tokens/new)轻松创建（保留默认，并且只需要命名下，名字随便）
    ![](https://files.catbox.moe/caem5b.png)
 1. 点击 deploy，这就完成了，查看你的域名就可使用 API 了！
+
 </details>
 
 ## :sparkling_heart: 支持这个项目

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>
@@ -19,9 +19,9 @@
   <p align="center">
     <a href="#ejemplo">Ve un ejemplo</a>
     ·
-    <a href="https://github.com/anuraghazra/github-readme-stats/issues">Reporta un bug</a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues/new/choose">Reporta un bug</a>
     ·
-    <a href="https://github.com/anuraghazra/github-readme-stats/issues">Solicita una mejora</a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues/new/choose">Solicita una mejora</a>
   </p>
 </p>
 <p align="center">¿Te gusta este proyecto? ¡Por favor considera <a href="https://www.paypal.me/anuraghazra">donar</a> para ayudar a mejorarlo!
@@ -56,6 +56,18 @@ Para ocultar alguna estadística específica, puedes utilizar el parámetro `?hi
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","prs"])
 ```
 
+### Agregar contribuciones privadas al total de commits contados
+
+Puede agregar el recuento de todas sus contribuciones privadas al recuento total de confirmaciones utilizando el parámetro de consulta `?count_private=true`.
+
+_Nota: Si está desplegando este proyecto usted mismo, las contribuciones privadas se contarán de manera predeterminada; de lo contrario, deberá elegir compartir sus recuentos de contribuciones privadas._
+
+> Opciones: `&count_private=true`
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&count_private=true)
+```
+
 ### Mostrar íconos
 
 Para habilitar los íconos, puedes utilizar `show_icons=true` como parámetro, de esta manera:
@@ -74,7 +86,7 @@ Utiliza el parámetro `?theme=THEME_NAME`, de esta manera:
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
 ```
 
-#### Todos los temas incorporados:
+#### Todos los temas incorporados
 
 dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
 
@@ -197,6 +209,7 @@ Nota: debido a esto [#58](https://github.com/anuraghazra/github-readme-stats/pul
 1. Selecciona "root" y matén todo como está, simplemente añade tu variable de entorno llamada PAT_1 (como se muestra), la cual contendrá un token de acceso personal (PAT), el cual puedes crear fácilmente [aquí](https://github.com/settings/tokens/new) (mantén todo como está, simplemente asígnale un nombre, puede ser cualquiera que desees)
    ![](https://files.catbox.moe/caem5b.png)
 1. Clickea "Deploy" y ya está listo. ¡Ve tus dominios para usar la API!
+
 </details>
 
 ## :sparkling_heart: Apoya al proyecto

scripts/generate-theme-doc.js

@@ -0,0 +1,115 @@
+const theme = require("../themes/index");
+const fs = require("fs");
+
+const TARGET_FILE = "./themes/README.md";
+const REPO_CARD_LINKS_FLAG = "<!-- REPO_CARD_LINKS -->";
+const STAT_CARD_LINKS_FLAG = "<!-- STATS_CARD_LINKS -->";
+
+const STAT_CARD_TABLE_FLAG = "<!-- STATS_CARD_TABLE -->";
+const REPO_CARD_TABLE_FLAG = "<!-- REPO_CARD_TABLE -->";
+
+const THEME_TEMPLATE = `## Available Themes
+
+<!-- DO NOT EDIT THIS FILE DIRECTLY -->
+
+With inbuilt themes you can customize the look of the card without doing any manual customization.
+
+Use \`?theme=THEME_NAME\` parameter like so :-
+
+\`\`\`md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark&show_icons=true)
+\`\`\`
+
+## Stats
+
+> These themes work both for the Stats Card and Repo Card.
+
+| | | |
+| :--: | :--: | :--: |
+${STAT_CARD_TABLE_FLAG}
+
+## Repo Card
+
+> These themes work both for the Stats Card and Repo Card.
+
+| | | |
+| :--: | :--: | :--: |
+${REPO_CARD_TABLE_FLAG}
+
+${STAT_CARD_LINKS_FLAG}
+
+${REPO_CARD_LINKS_FLAG}
+
+
+[add-theme]: https://github.com/anuraghazra/github-readme-stats/edit/master/themes/index.js
+
+Wanted to add a new theme? Consider reading the [contribution guidelines](../CONTRIBUTING.md#themes-contribution) :D
+`;
+
+const createRepoMdLink = (theme) => {
+  return `\n[${theme}_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=${theme}`;
+};
+const createStatMdLink = (theme) => {
+  return `\n[${theme}]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=${theme}`;
+};
+
+const generateLinks = (fn) => {
+  return Object.keys(theme)
+    .map((name) => fn(name))
+    .join("");
+};
+
+const createTableItem = ({ link, label, isRepoCard }) => {
+  if (!link || !label) return "";
+  return `\`${label}\` ![${link}][${link}${isRepoCard ? "_repo" : ""}]`;
+};
+const generateTable = ({ isRepoCard }) => {
+  const rows = [];
+  const themes = Object.keys(theme).filter(
+    (name) => name !== (!isRepoCard ? "default_repocard" : "default")
+  );
+
+  for (let i = 0; i < themes.length; i += 3) {
+    const one = themes[i];
+    const two = themes[i + 1];
+    const three = themes[i + 2];
+
+    let tableItem1 = createTableItem({ link: one, label: one, isRepoCard });
+    let tableItem2 = createTableItem({ link: two, label: two, isRepoCard });
+    let tableItem3 = createTableItem({ link: three, label: three, isRepoCard });
+
+    if (three === undefined) {
+      tableItem3 = `[Add your theme][add-theme]`;
+    }
+    rows.push(`| ${tableItem1} | ${tableItem2} | ${tableItem3} |`);
+
+    // if it's the last row & the row has no empty space push a new row
+    if (three && i + 3 === themes.length) {
+      rows.push(`| [Add your theme][add-theme] | | |`);
+    }
+  }
+
+  return rows.join("\n");
+};
+
+const buildReadme = () => {
+  return THEME_TEMPLATE.split("\n")
+    .map((line) => {
+      if (line.includes(REPO_CARD_LINKS_FLAG)) {
+        return generateLinks(createRepoMdLink);
+      }
+      if (line.includes(STAT_CARD_LINKS_FLAG)) {
+        return generateLinks(createStatMdLink);
+      }
+      if (line.includes(REPO_CARD_TABLE_FLAG)) {
+        return generateTable({ isRepoCard: true });
+      }
+      if (line.includes(STAT_CARD_TABLE_FLAG)) {
+        return generateTable({ isRepoCard: false });
+      }
+      return line;
+    })
+    .join("\n");
+};
+
+fs.writeFileSync(TARGET_FILE, buildReadme());

scripts/push-theme-readme.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+set -x
+set -e
+
+export BRANCH_NAME=updated-theme-readme
+git --version
+git config --global user.email "no-reply@githubreadmestats.com"
+git config --global user.name "Github Readme Stats Bot"
+git branch -d $BRANCH_NAME || true
+git checkout -b $BRANCH_NAME
+git add --all
+git commit --message "docs(theme): Auto update theme readme" || exit 0
+git remote add origin-$BRANCH_NAME https://${PERSONAL_TOKEN}@github.com/${GH_REPO}.git
+git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME

src/fetchRepo.js

@@ -10,6 +10,7 @@ const fetcher = (variables, token) => {
         nameWithOwner
         isPrivate
         isArchived
+        isTemplate
         stargazers {
           totalCount
         }

src/fetchStats.js

@@ -1,4 +1,4 @@
-const { request } = require("./utils");
+const { request, logger } = require("./utils");
 const retryer = require("./retryer");
 const calculateRank = require("./calculateRank");
 require("dotenv").config();
@@ -13,6 +13,7 @@ const fetcher = (variables, token) => {
           login
           contributionsCollection {
             totalCommitContributions
+            restrictedContributionsCount
           }
           repositoriesContributedTo(first: 1, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
             totalCount
@@ -45,7 +46,7 @@ const fetcher = (variables, token) => {
   );
 };
 
-async function fetchStats(username) {
+async function fetchStats(username, count_private = false) {
   if (!username) throw Error("Invalid username");
 
   const stats = {
@@ -61,15 +62,23 @@ async function fetchStats(username) {
   let res = await retryer(fetcher, { login: username });
 
   if (res.data.errors) {
-    console.log(res.data.errors);
+    logger.error(res.data.errors);
     throw Error(res.data.errors[0].message || "Could not fetch user");
   }
 
   const user = res.data.data.user;
+  const contributionCount = user.contributionsCollection;
 
   stats.name = user.name || user.login;
   stats.totalIssues = user.issues.totalCount;
-  stats.totalCommits = user.contributionsCollection.totalCommitContributions;
+
+  stats.totalCommits = contributionCount.totalCommitContributions;
+  if (count_private) {
+    stats.totalCommits =
+      contributionCount.totalCommitContributions +
+      contributionCount.restrictedContributionsCount;
+  }
+
   stats.totalPRs = user.pullRequests.totalCount;
   stats.contributedTo = user.repositoriesContributedTo.totalCount;
 

src/fetchTopLanguages.js

@@ -1,4 +1,4 @@
-const { request } = require("./utils");
+const { request, logger } = require("./utils");
 const retryer = require("./retryer");
 require("dotenv").config();
 
@@ -8,9 +8,10 @@ const fetcher = (variables, token) => {
       query: `
       query userInfo($login: String!) {
         user(login: $login) {
-          repositories(isFork: false, first: 100) {
+          # fetch only owner repos & not forks
+          repositories(ownerAffiliations: OWNER, isFork: false, first: 100) {
             nodes {
-              languages(first: 1) {
+              languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
                 edges {
                   size
                   node {
@@ -38,7 +39,7 @@ async function fetchTopLanguages(username) {
   let res = await retryer(fetcher, { login: username });
 
   if (res.data.errors) {
-    console.log(res.data.errors);
+    logger.error(res.data.errors);
     throw Error(res.data.errors[0].message || "Could not fetch user");
   }
 
@@ -49,18 +50,13 @@ async function fetchTopLanguages(username) {
     .filter((node) => {
       return node.languages.edges.length > 0;
     })
-    .sort((a, b) => {
-      return b.languages.edges[0].size - a.languages.edges[0].size;
-    })
-    .map((node) => {
-      return node.languages.edges[0];
-    })
+    .reduce((acc, curr) => curr.languages.edges.concat(acc), [])
+    .sort((a, b) => b.size - a.size)
     .reduce((acc, prev) => {
       let langSize = prev.size;
       if (acc[prev.node.name] && prev.node.name === acc[prev.node.name].name) {
         langSize = prev.size + acc[prev.node.name].size;
       }
-
       return {
         ...acc,
         [prev.node.name]: {

src/renderRepoCard.js

@@ -3,8 +3,10 @@ const {
   encodeHTML,
   getCardColors,
   FlexLayout,
+  wrapTextMultiline,
 } = require("../src/utils");
 const icons = require("./icons");
+const toEmoji = require("emoji-name-map");
 
 const renderRepoCard = (repo, options = {}) => {
   const {
@@ -14,6 +16,7 @@ const renderRepoCard = (repo, options = {}) => {
     primaryLanguage,
     stargazers,
     isArchived,
+    isTemplate,
     forkCount,
   } = repo;
   const {
@@ -26,16 +29,24 @@ const renderRepoCard = (repo, options = {}) => {
   } = options;
 
   const header = show_owner ? nameWithOwner : name;
-  const langName = primaryLanguage ? primaryLanguage.name : "Unspecified";
-  const langColor = primaryLanguage ? primaryLanguage.color : "#333";
+  const langName = (primaryLanguage && primaryLanguage.name) || "Unspecified";
+  const langColor = (primaryLanguage && primaryLanguage.color) || "#333";
 
-  const height = 120;
   const shiftText = langName.length > 15 ? 0 : 30;
 
   let desc = description || "No description provided";
-  if (desc.length > 55) {
-    desc = `${description.slice(0, 55)}..`;
-  }
+
+  // parse emojis to unicode
+  desc = desc.replace(/:\w+:/gm, (emoji) => {
+    return toEmoji.get(emoji) || "";
+  });
+
+  const multiLineDescription = wrapTextMultiline(desc);
+  const descriptionLines = multiLineDescription.length;
+  const lineHeight = 10;
+
+  const height =
+    (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
 
   // returns theme based colors with proper overrides and defaults
   const { titleColor, textColor, iconColor, bgColor } = getCardColors({
@@ -49,22 +60,30 @@ const renderRepoCard = (repo, options = {}) => {
   const totalStars = kFormatter(stargazers.totalCount);
   const totalForks = kFormatter(forkCount);
 
-  const archiveBadge = isArchived
-    ? `
-    <g data-testid="archive-badge" class="archive-badge" transform="translate(320, 38)">
+  const getBadgeSVG = (label) => `
+    <g data-testid="badge" class="badge" transform="translate(320, 38)">
       <rect stroke="${textColor}" stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
-      <text fill="${textColor}">Archived</text>
+      <text
+        x="23" y="-5"
+        alignment-baseline="central"
+        dominant-baseline="central"
+        text-anchor="middle"
+        fill="${textColor}"
+      >
+        ${label}
+      </text>
+    </g>
+  `;
+
+  const svgLanguage = primaryLanguage
+    ? `
+    <g data-testid="primary-lang" transform="translate(30, 0)">
+      <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
+      <text data-testid="lang-name" class="gray" x="15">${langName}</text>
     </g>
     `
     : "";
 
-  const svgLanguage = `
-    <g transform="translate(30, 100)">
-      <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
-      <text data-testid="lang" class="gray" x="15">${langName}</text>
-    </g>
-  `;
-
   const svgStars =
     stargazers.totalCount > 0 &&
     `
@@ -90,25 +109,41 @@ const renderRepoCard = (repo, options = {}) => {
       .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} }
-      .archive-badge { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; }
-      .archive-badge rect { opacity: 0.2 }
+      .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
+      .badge rect { opacity: 0.2 }
       </style>
+
       <rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${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>
 
-      ${archiveBadge}
-
       <text x="50" y="38" class="header">${header}</text>
-      <text class="description" x="25" y="70">${encodeHTML(desc)}</text>
-      
-      ${svgLanguage}
-      
-      <g transform="translate(${155 - shiftText}, 100)">
-        ${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
-      </g>
 
+      ${
+        isTemplate
+          ? getBadgeSVG("Template")
+          : isArchived
+          ? getBadgeSVG("Archived")
+          : ""
+      }
+
+      <text class="description" x="25" y="50">
+        ${multiLineDescription
+          .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
+          .join("")}
+      </text>
+
+      <g transform="translate(0, ${height - 20})">
+        ${svgLanguage}
+
+        <g 
+          data-testid="star-fork-group" 
+          transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 0)"
+        >
+          ${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
+        </g>
+      </g>
     </svg>
   `;
 };

src/renderStatsCard.js

@@ -1,4 +1,9 @@
-const { kFormatter, getCardColors, FlexLayout } = require("../src/utils");
+const {
+  kFormatter,
+  getCardColors,
+  FlexLayout,
+  encodeHTML,
+} = require("../src/utils");
 const getStyles = require("./getStyles");
 const icons = require("./icons");
 
@@ -128,11 +133,9 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s";
   const title = hide_title
     ? ""
-    : `<text x="25" y="35" class="header">${name}'${apostrophe} GitHub Stats</text>`;
+    : `<text x="25" y="35" class="header">${encodeHTML(name)}'${apostrophe} GitHub Stats</text>`;
 
-  const border = hide_border
-    ? ""
-    : `
+  const border = `
     <rect 
       data-testid="card-bg"
       x="0.5"
@@ -142,6 +145,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
       rx="4.5"
       fill="${bgColor}"
       stroke="#E4E2E2"
+      stroke-opacity="${hide_border ? 0 : 1}"
     />
   `;
 

src/renderTopLanguages.js

@@ -11,11 +11,11 @@ const createProgressNode = ({ width, color, name, progress }) => {
     <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
     <svg width="${progressWidth}">
       <rect rx="5" ry="5" x="0" y="25" width="${progressWidth}" height="8" fill="#ddd"></rect>
-      <rect 
-        height="8" 
+      <rect
+        height="8"
         fill="${color}"
-        rx="5" ry="5" x="0" y="25" 
-        data-testid="lang-progress" 
+        rx="5" ry="5" x="0" y="25"
+        data-testid="lang-progress"
         width="${progressPercentage}%"
       >
       </rect>
@@ -23,6 +23,43 @@ const createProgressNode = ({ width, color, name, progress }) => {
   `;
 };
 
+const createCompactLangNode = ({ lang, totalSize, x, y }) => {
+  const percentage = ((lang.size / totalSize) * 100).toFixed(2);
+  const color = lang.color || "#858585";
+
+  return `
+    <g transform="translate(${x}, ${y})">
+      <circle cx="5" cy="6" r="5" fill="${color}" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
+        ${lang.name} ${percentage}%
+      </text>
+    </g>
+  `;
+};
+
+const createLanguageTextNode = ({ langs, totalSize, x, y }) => {
+  return langs.map((lang, index) => {
+    if (index % 2 === 0) {
+      return createCompactLangNode({
+        lang,
+        x,
+        y: 12.5 * index + y,
+        totalSize,
+        index,
+      });
+    }
+    return createCompactLangNode({
+      lang,
+      x: 150,
+      y: 12.5 + 12.5 * index,
+      totalSize,
+      index,
+    });
+  });
+};
+
+const lowercaseTrim = (name) => name.toLowerCase().trim();
+
 const renderTopLanguages = (topLangs, options = {}) => {
   const {
     hide_title,
@@ -30,24 +67,33 @@ const renderTopLanguages = (topLangs, options = {}) => {
     title_color,
     text_color,
     bg_color,
-    hide_langs_below,
+    hide,
     theme,
+    layout,
   } = options;
 
   let langs = Object.values(topLangs);
+  let langsToHide = {};
 
-  const totalSize = langs.reduce((acc, curr) => {
-    return acc + curr.size;
-  }, 0);
+  // populate langsToHide map for quick lookup
+  // while filtering out
+  if (hide) {
+    hide.forEach((langName) => {
+      langsToHide[lowercaseTrim(langName)] = true;
+    });
+  }
 
-  // hide langs
+  // filter out langauges to be hidden
   langs = langs
     .sort((a, b) => b.size - a.size)
     .filter((lang) => {
-      if (!hide_langs_below) return true;
-      return (lang.size / totalSize) * 100 > hide_langs_below;
+      return !langsToHide[lowercaseTrim(lang.name)];
     });
 
+  const totalLanguageSize = langs.reduce((acc, curr) => {
+    return acc + curr.size;
+  }, 0);
+
   // returns theme based colors with proper overrides and defaults
   const { titleColor, textColor, bgColor } = getCardColors({
     title_color,
@@ -56,12 +102,78 @@ const renderTopLanguages = (topLangs, options = {}) => {
     theme,
   });
 
-  const width = isNaN(card_width) ? 300 : card_width;
+  let width = isNaN(card_width) ? 300 : card_width;
   let height = 45 + (langs.length + 1) * 40;
 
+  let finalLayout = "";
+
+  // RENDER COMPACT LAYOUT
+  if (layout === "compact") {
+    width = width + 50;
+    height = 30 + (langs.length / 2 + 1) * 40;
+
+    // progressOffset holds the previous language's width and used to offset the next language
+    // so that we can stack them one after another, like this: [--][----][---]
+    let progressOffset = 0;
+    const compactProgressBar = langs
+      .map((lang) => {
+        const percentage = (
+          (lang.size / totalLanguageSize) *
+          (width - 50)
+        ).toFixed(2);
+
+        const progress =
+          percentage < 10 ? parseFloat(percentage) + 10 : percentage;
+
+        const output = `
+          <rect
+            mask="url(#rect-mask)" 
+            data-testid="lang-progress"
+            x="${progressOffset}" 
+            y="0"
+            width="${progress}" 
+            height="8"
+            fill="${lang.color || "#858585"}"
+          />
+        `;
+        progressOffset += parseFloat(percentage);
+        return output;
+      })
+      .join("");
+
+    finalLayout = `
+      <mask id="rect-mask">
+        <rect x="0" y="0" width="${
+          width - 50
+        }" height="8" fill="white" rx="5" />
+      </mask>
+      ${compactProgressBar}
+      ${createLanguageTextNode({
+        x: 0,
+        y: 25,
+        langs,
+        totalSize: totalLanguageSize,
+      }).join("")}
+    `;
+  } else {
+    finalLayout = FlexLayout({
+      items: langs.map((lang) => {
+        return createProgressNode({
+          width: width,
+          name: lang.name,
+          color: lang.color || "#858585",
+          progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
+        });
+      }),
+      gap: 40,
+      direction: "column",
+    }).join("");
+  }
+
   if (hide_title) {
     height -= 30;
   }
+
   return `
     <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
       <style>
@@ -70,26 +182,14 @@ const renderTopLanguages = (topLangs, options = {}) => {
       </style>
       <rect data-testid="card-bg" x="0.5" y="0.5" width="99.7%" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
 
-      
       ${
         hide_title
           ? ""
-          : `<text data-testid="header" x="25" y="35" class="header">Top Languages</text>`
+          : `<text data-testid="header" x="25" y="35" class="header">Most Used Languages</text>`
       }
 
       <svg data-testid="lang-items" x="25" y="${hide_title ? 25 : 55}">
-      ${FlexLayout({
-        items: langs.map((lang) => {
-          return createProgressNode({
-            width: width,
-            name: lang.name,
-            color: lang.color || "#858585",
-            progress: ((lang.size / totalSize) * 100).toFixed(2),
-          });
-        }),
-        gap: 40,
-        direction: "column",
-      }).join("")}
+        ${finalLayout}
       </svg>
     </svg>
   `;

src/retryer.js

@@ -1,9 +1,11 @@
+const { logger } = require("./utils");
+
 const retryer = async (fetcher, variables, retries = 0) => {
   if (retries > 7) {
     throw new Error("Maximum retries exceeded");
   }
   try {
-    console.log(`Trying PAT_${retries + 1}`);
+    logger.log(`Trying PAT_${retries + 1}`);
 
     // try to fetch with the first token since RETRIES is 0 index i'm adding +1
     let response = await fetcher(
@@ -18,7 +20,7 @@ const retryer = async (fetcher, variables, retries = 0) => {
     // if rate limit is hit increase the RETRIES and recursively call the retryer
     // with username, and current RETRIES
     if (isRateExceeded) {
-      console.log(`PAT_${retries + 1} Failed`);
+      logger.log(`PAT_${retries + 1} Failed`);
       retries++;
       // directly return from the function
       return retryer(fetcher, variables, retries);
@@ -32,7 +34,7 @@ const retryer = async (fetcher, variables, retries = 0) => {
     const isBadCredential = err.response.data && err.response.data.message === "Bad credentials";
 
     if (isBadCredential) {
-      console.log(`PAT_${retries + 1} Failed`);
+      logger.log(`PAT_${retries + 1} Failed`);
       retries++;
       // directly return from the function
       return retryer(fetcher, variables, retries);

src/utils.js

@@ -1,25 +1,32 @@
 const axios = require("axios");
+const wrap = require("word-wrap");
 const themes = require("../themes");
 
-const renderError = (message) => {
+const renderError = (message, secondaryMessage = "") => {
   return `
-    <svg width="495" height="100" viewBox="0 0 495 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="495" height="120" viewBox="0 0 495 120" fill="none" xmlns="http://www.w3.org/2000/svg">
     <style>
     .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
     .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #252525 }
+    .gray { fill: #858585 }
     </style>
     <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 id="message" x="25" y="65" class="text small">${message}</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">${message}</tspan>
+      <tspan x="25" dy="18"  class="gray">${secondaryMessage}</tspan>
+    </text>
     </svg>
   `;
 };
 
 // https://stackoverflow.com/a/48073476/10629172
 function encodeHTML(str) {
-  return str.replace(/[\u00A0-\u9999<>&](?!#)/gim, function (i) {
-    return "&#" + i.charCodeAt(0) + ";";
-  });
+  return str
+    .replace(/[\u00A0-\u9999<>&](?!#)/gim, (i) => {
+      return "&#" + i.charCodeAt(0) + ";";
+    })
+    .replace(/\u0008/gim, "");
 }
 
 function kFormatter(num) {
@@ -44,6 +51,11 @@ function parseBoolean(value) {
   }
 }
 
+function parseArray(str) {
+  if (!str) return [];
+  return str.split(",");
+}
+
 function clampValue(number, min, max) {
   return Math.max(min, Math.min(number, max));
 }
@@ -116,6 +128,28 @@ function getCardColors({
   return { titleColor, iconColor, textColor, bgColor };
 }
 
+function wrapTextMultiline(text, width = 60, maxLines = 3) {
+  const wrapped = wrap(encodeHTML(text), { width })
+    .split("\n") // Split wrapped lines to get an array of lines
+    .map((line) => line.trim()); // Remove leading and trailing whitespace of each line
+
+  const lines = wrapped.slice(0, maxLines); // Only consider maxLines lines
+
+  // Add "..." to the last line if the text exceeds maxLines
+  if (wrapped.length > maxLines) {
+    lines[maxLines - 1] += "...";
+  }
+
+  // Remove empty lines if text fits in less than maxLines lines
+  const multiLineText = lines.filter(Boolean);
+  return multiLineText;
+}
+
+const noop = () => {};
+// return console instance based on the environment
+const logger =
+  process.env.NODE_ENV !== "test" ? console : { log: noop, error: noop };
+
 const CONSTANTS = {
   THIRTY_MINUTES: 1800,
   TWO_HOURS: 7200,
@@ -128,10 +162,13 @@ module.exports = {
   encodeHTML,
   isValidHexColor,
   request,
+  parseArray,
   parseBoolean,
   fallbackColor,
   FlexLayout,
   getCardColors,
   clampValue,
+  wrapTextMultiline,
+  logger,
   CONSTANTS,
 };

tests/api.test.js

@@ -30,7 +30,10 @@ const data = {
     user: {
       name: stats.name,
       repositoriesContributedTo: { totalCount: stats.contributedTo },
-      contributionsCollection: { totalCommitContributions: stats.totalCommits },
+      contributionsCollection: {
+        totalCommitContributions: stats.totalCommits,
+        restrictedContributionsCount: 100,
+      },
       pullRequests: { totalCount: stats.totalPRs },
       issues: { totalCount: stats.totalIssues },
       followers: { totalCount: 0 },
@@ -91,14 +94,19 @@ describe("Test /api/", () => {
     await api(req, res);
 
     expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toBeCalledWith(renderError(error.errors[0].message));
+    expect(res.send).toBeCalledWith(
+      renderError(
+        error.errors[0].message,
+        "Make sure the provided username is not an organization"
+      )
+    );
   });
 
   it("should get the query options", async () => {
     const { req, res } = faker(
       {
         username: "anuraghazra",
-        hide: `["issues","prs","contribs"]`,
+        hide: "issues,prs,contribs",
         show_icons: true,
         hide_border: true,
         line_height: 100,
@@ -181,4 +189,36 @@ describe("Test /api/", () => {
       ]);
     }
   });
+
+  it("should add private contributions", async () => {
+    const { req, res } = faker(
+      {
+        username: "anuraghazra",
+        count_private: true,
+      },
+      data
+    );
+
+    await api(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(
+      renderStatsCard(
+        {
+          ...stats,
+          totalCommits: stats.totalCommits + 100,
+          rank: calculateRank({
+            totalCommits: stats.totalCommits + 100,
+            totalRepos: 1,
+            followers: 0,
+            contributions: stats.contributedTo,
+            stargazers: stats.totalStars,
+            prs: stats.totalPRs,
+            issues: stats.totalIssues,
+          }),
+        },
+        {}
+      )
+    );
+  });
 });

tests/fetchStats.test.js

@@ -9,7 +9,7 @@ const data = {
     user: {
       name: "Anurag Hazra",
       repositoriesContributedTo: { totalCount: 61 },
-      contributionsCollection: { totalCommitContributions: 100 },
+      contributionsCollection: { totalCommitContributions: 100, restrictedContributionsCount: 50 },
       pullRequests: { totalCount: 300 },
       issues: { totalCount: 200 },
       followers: { totalCount: 100 },
@@ -77,4 +77,29 @@ describe("Test fetchStats", () => {
       "Could not resolve to a User with the login of 'noname'."
     );
   });
-});
+
+  it("should fetch and add private contributions", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data);
+
+    let stats = await fetchStats("anuraghazra", true);
+    const rank = calculateRank({
+      totalCommits: 150,
+      totalRepos: 5,
+      followers: 100,
+      contributions: 61,
+      stargazers: 400,
+      prs: 300,
+      issues: 200,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 150,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalStars: 400,
+      rank,
+    });
+  });
+});

tests/pin.test.js

@@ -17,6 +17,7 @@ const data_repo = {
       name: "TypeScript",
     },
     forkCount: 100,
+    isTemplate: false
   },
 };
 

tests/renderRepoCard.test.js

@@ -29,11 +29,11 @@ describe("Test renderRepoCard", () => {
     expect(header).toHaveTextContent("convoychat");
     expect(header).not.toHaveTextContent("anuraghazra");
     expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
-      "Help us take over the world! React + TS + GraphQL Chat .."
+      "Help us take over the world! React + TS + GraphQL Chat App"
     );
     expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
     expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
-    expect(queryByTestId(document.body, "lang")).toHaveTextContent(
+    expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
       "TypeScript"
     );
     expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
@@ -55,12 +55,16 @@ describe("Test renderRepoCard", () => {
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
       description:
-        "Very long long long long long long long long text it should trim it",
+        "The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
     });
 
-    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
-      "Very long long long long long long long long text it sh.."
-    );
+    expect(
+      document.getElementsByClassName("description")[0].children[0].textContent
+    ).toBe("The quick brown fox jumps over the lazy dog is an");
+
+    expect(
+      document.getElementsByClassName("description")[0].children[1].textContent
+    ).toBe("English-language pangram—a sentence that contains all");
 
     // Should not trim
     document.body.innerHTML = renderRepoCard({
@@ -73,6 +77,18 @@ describe("Test renderRepoCard", () => {
     );
   });
 
+  it("should render emojis", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description: "This is a text with a :poop: poo emoji",
+    });
+
+    // poop emoji may not show in all editors but it's there between "a" and "poo"
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "This is a text with a 💩 poo emoji"
+    );
+  });
+
   it("should shift the text position depending on language length", () => {
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
@@ -82,9 +98,10 @@ describe("Test renderRepoCard", () => {
       },
     });
 
-    expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
+    expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
+    expect(queryByTestId(document.body, "star-fork-group")).toHaveAttribute(
       "transform",
-      "translate(155, 100)"
+      "translate(155, 0)"
     );
 
     // Small lang
@@ -96,9 +113,33 @@ describe("Test renderRepoCard", () => {
       },
     });
 
-    expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
+    expect(queryByTestId(document.body, "star-fork-group")).toHaveAttribute(
       "transform",
-      "translate(125, 100)"
+      "translate(125, 0)"
+    );
+  });
+
+  it("should hide language if primaryLanguage is null & fallback to correct values", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      primaryLanguage: null,
+    });
+
+    expect(queryByTestId(document.body, "primary-lang")).toBeNull();
+
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      primaryLanguage: { color: null, name: null },
+    });
+
+    expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
+    expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
+      "fill",
+      "#333"
+    );
+
+    expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
+      "Unspecified"
     );
   });
 
@@ -117,7 +158,7 @@ describe("Test renderRepoCard", () => {
     expect(iconClassStyles.fill).toBe("#586069");
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#FFFEFE"
+      "#fffefe"
     );
   });
 
@@ -217,17 +258,6 @@ describe("Test renderRepoCard", () => {
     );
   });
 
-  it("should render archive badge if repo is archived", () => {
-    document.body.innerHTML = renderRepoCard({
-      ...data_repo.repository,
-      isArchived: true,
-    });
-
-    expect(queryByTestId(document.body, "archive-badge")).toHaveTextContent(
-      "Archived"
-    );
-  });
-
   it("should not render star count or fork count if either of the are zero", () => {
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
@@ -235,7 +265,7 @@ describe("Test renderRepoCard", () => {
     });
 
     expect(queryByTestId(document.body, "stargazers")).toBeNull();
-    expect(queryByTestId(document.body, "forkcount")).toBeDefined();
+    expect(queryByTestId(document.body, "forkcount")).toBeInTheDocument();
 
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
@@ -243,7 +273,7 @@ describe("Test renderRepoCard", () => {
       forkCount: 0,
     });
 
-    expect(queryByTestId(document.body, "stargazers")).toBeDefined();
+    expect(queryByTestId(document.body, "stargazers")).toBeInTheDocument();
     expect(queryByTestId(document.body, "forkcount")).toBeNull();
 
     document.body.innerHTML = renderRepoCard({
@@ -255,4 +285,26 @@ describe("Test renderRepoCard", () => {
     expect(queryByTestId(document.body, "stargazers")).toBeNull();
     expect(queryByTestId(document.body, "forkcount")).toBeNull();
   });
+
+  it("should render badges", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      isArchived: true,
+    });
+
+    expect(queryByTestId(document.body, "badge")).toHaveTextContent("Archived");
+
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      isTemplate: true,
+    });
+    expect(queryByTestId(document.body, "badge")).toHaveTextContent("Template");
+  });
+
+  it("should not render template", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+    });
+    expect(queryByTestId(document.body, "badge")).toBeNull();
+  });
 });

tests/renderStatsCard.test.js

@@ -55,7 +55,7 @@ describe("Test renderStatsCard", () => {
 
   it("should hide individual stats", () => {
     document.body.innerHTML = renderStatsCard(stats, {
-      hide: "['issues', 'prs', 'contribs']",
+      hide: ["issues", "prs", "contribs"],
     });
 
     expect(
@@ -71,8 +71,16 @@ describe("Test renderStatsCard", () => {
 
   it("should hide_border", () => {
     document.body.innerHTML = renderStatsCard(stats, { hide_border: true });
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "stroke-opacity",
+      "0"
+    );
 
-    expect(queryByTestId(document.body, "card-bg")).not.toBeInTheDocument();
+    document.body.innerHTML = renderStatsCard(stats, { hide_border: false });
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "stroke-opacity",
+      "1"
+    );
   });
 
   it("should hide_rank", () => {
@@ -96,7 +104,7 @@ describe("Test renderStatsCard", () => {
     expect(iconClassStyles.fill).toBe("#4c71f2");
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#FFFEFE"
+      "#fffefe"
     );
   });
 

tests/renderTopLanguages.test.js

@@ -32,7 +32,7 @@ describe("Test renderTopLanguages", () => {
     document.body.innerHTML = renderTopLanguages(langs);
 
     expect(queryByTestId(document.body, "header")).toHaveTextContent(
-      "Top Languages"
+      "Most Used Languages"
     );
 
     expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
@@ -58,18 +58,26 @@ describe("Test renderTopLanguages", () => {
     );
   });
 
-  it("should hide_langs_below", () => {
+  it("should hide languages when hide is passed", () => {
     document.body.innerHTML = renderTopLanguages(langs, {
-      hide_langs_below: 34,
+      hide: ["HTML"],
     });
-
     expect(queryAllByTestId(document.body, "lang-name")[0]).toBeInTheDocument(
-      "HTML"
-    );
-    expect(queryAllByTestId(document.body, "lang-name")[1]).toBeInTheDocument(
       "javascript"
     );
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toBeInTheDocument(
+      "css"
+    );
     expect(queryAllByTestId(document.body, "lang-name")[2]).not.toBeDefined();
+
+    // multiple languages passed
+    document.body.innerHTML = renderTopLanguages(langs, {
+      hide: ["HTML","css"],
+    });
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toBeInTheDocument(
+      "javascript"
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[1]).not.toBeDefined();
   });
 
   it("should resize the height correctly depending on langs", () => {
@@ -131,7 +139,7 @@ describe("Test renderTopLanguages", () => {
     expect(langNameStyles.fill).toBe("#333");
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#FFFEFE"
+      "#fffefe"
     );
   });
 
@@ -199,4 +207,19 @@ describe("Test renderTopLanguages", () => {
       );
     });
   });
+
+  it('should render with layout compact', () => {
+    document.body.innerHTML = renderTopLanguages(langs, {layout: 'compact'});
+
+    expect(queryByTestId(document.body, "header")).toHaveTextContent("Most Used Languages");
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent("HTML 40.00%");
+    expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute("width","120.00");
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent("javascript 40.00%");
+    expect(queryAllByTestId(document.body, "lang-progress")[1]).toHaveAttribute("width","120.00");
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent("css 20.00%");
+    expect(queryAllByTestId(document.body, "lang-progress")[2]).toHaveAttribute("width","60.00");
+  })
 });

tests/retryer.test.js

@@ -1,8 +1,9 @@
 require("@testing-library/jest-dom");
 const retryer = require("../src/retryer");
+const { logger } = require("../src/utils");
 
 const fetcher = jest.fn((variables, token) => {
-  console.log(variables, token);
+  logger.log(variables, token);
   return new Promise((res, rej) => res({ data: "ok" }));
 });
 

tests/top-langs.test.js

@@ -12,7 +12,7 @@ const data_langs = {
         nodes: [
           {
             languages: {
-              edges: [{ size: 100, node: { color: "#0f0", name: "HTML" } }],
+              edges: [{ size: 150, node: { color: "#0f0", name: "HTML" } }],
             },
           },
           {
@@ -55,7 +55,7 @@ const langs = {
   HTML: {
     color: "#0f0",
     name: "HTML",
-    size: 200,
+    size: 250,
   },
   javascript: {
     color: "#0ff",

tests/utils.test.js

@@ -1,11 +1,15 @@
+require("@testing-library/jest-dom");
 const {
   kFormatter,
   encodeHTML,
   renderError,
   FlexLayout,
   getCardColors,
+  wrapTextMultiline,
 } = require("../src/utils");
 
+const { queryByTestId } = require("@testing-library/dom");
+
 describe("Test utils.js", () => {
   it("should test kFormatter", () => {
     expect(kFormatter(1)).toBe(1);
@@ -25,9 +29,19 @@ describe("Test utils.js", () => {
 
   it("should test renderError", () => {
     document.body.innerHTML = renderError("Something went wrong");
-    expect(document.getElementById("message").textContent).toBe(
-      "Something went wrong"
+    expect(
+      queryByTestId(document.body, "message").children[0]
+    ).toHaveTextContent(/Something went wrong/gim);
+    expect(queryByTestId(document.body, "message").children[1]).toBeEmpty(2);
+
+    // Secondary message
+    document.body.innerHTML = renderError(
+      "Something went wrong",
+      "Secondary Message"
     );
+    expect(
+      queryByTestId(document.body, "message").children[1]
+    ).toHaveTextContent(/Secondary Message/gim);
   });
 
   it("should test FlexLayout", () => {
@@ -82,7 +96,7 @@ describe("Test utils.js", () => {
       bgColor: "#fff",
     });
   });
-  
+
   it("getCardColors: should fallback to specified theme colors if is not defined", () => {
     let colors = getCardColors({
       theme: "dark",
@@ -95,3 +109,28 @@ describe("Test utils.js", () => {
     });
   });
 });
+
+describe("wrapTextMultiline", () => {
+  it("should not wrap small texts", () => {
+    {
+      let multiLineText = wrapTextMultiline("Small text should not wrap");
+      expect(multiLineText).toEqual(["Small text should not wrap"]);
+    }
+  });
+  it("should wrap large texts", () => {
+    let multiLineText = wrapTextMultiline(
+      "Hello world long long long text",
+      20,
+      3
+    );
+    expect(multiLineText).toEqual(["Hello world long", "long long text"]);
+  });
+  it("should wrap large texts and limit max lines", () => {
+    let multiLineText = wrapTextMultiline(
+      "Hello world long long long text",
+      10,
+      2
+    );
+    expect(multiLineText).toEqual(["Hello", "world long..."]);
+  });
+});

themes/README.md

@@ -1,68 +1,90 @@
 ## Available Themes
 
+<!-- DO NOT EDIT THIS FILE DIRECTLY -->
+
 With inbuilt themes you can customize the look of the card without doing any manual customization.
 
 Use `?theme=THEME_NAME` parameter like so :-
 
 ```md
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark&show_icons=true
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark&show_icons=true)
 ```
 
 ## Stats
 
 > These themes work both for the Stats Card and Repo Card.
 
-|                               |                                        |                                              |
-| :---------------------------: | :------------------------------------: | :------------------------------------------: |
-| `default` ![default][default] |     `radical` ![radical][radical]      |           `merko` ![merko][merko]            |
-| `gruvbox` ![gruvbox][gruvbox] | `tokyonight` ![tokyonight][tokyonight] |        `onedark` ![onedark][onedark]         |
-|  `cobalt` ![cobalt][cobalt]   |  `synthwave` ![synthwave][synthwave]   | `highcontrast` ![highcontrast][highcontrast] |
-| `dracula` ![dracula][dracula] |          `dark` ![dark][dark]          |      `prussian` ![prussian][prussian]        |
-| [Add your theme][add-theme]   |||
+| | | |
+| :--: | :--: | :--: |
+| `default` ![default][default] | `dark` ![dark][dark] | `radical` ![radical][radical] |
+| `merko` ![merko][merko] | `gruvbox` ![gruvbox][gruvbox] | `tokyonight` ![tokyonight][tokyonight] |
+| `onedark` ![onedark][onedark] | `cobalt` ![cobalt][cobalt] | `synthwave` ![synthwave][synthwave] |
+| `highcontrast` ![highcontrast][highcontrast] | `dracula` ![dracula][dracula] | `prussian` ![prussian][prussian] |
+| `monokai` ![monokai][monokai] | `vue` ![vue][vue] | `shades-of-purple` ![shades-of-purple][shades-of-purple] |
+| `nightowl` ![nightowl][nightowl] | `buefy` ![buefy][buefy] | `blue-green` ![blue-green][blue-green] |
+| `algolia` ![algolia][algolia] | `great-gatsby` ![great-gatsby][great-gatsby] | [Add your theme][add-theme] |
 
 ## Repo Card
 
 > These themes work both for the Stats Card and Repo Card.
 
-|                                                          |                                                 |                                                       |
-| :------------------------------------------------------: | :---------------------------------------------: | :---------------------------------------------------: |
-| `default_repocard` ![default_repocard][default_repocard] |     `radical` ![radical][radical_repocard]      |           `merko` ![merko][merko_repocard]            |
-|          `gruvbox` ![gruvbox][gruvbox_repocard]          | `tokyonight` ![tokyonight][tokyonight_repocard] |        `onedark` ![onedark][onedark_repocard]         |
-|           `cobalt` ![cobalt][cobalt_repocard]            |  `synthwave` ![synthwave][synthwave_repocard]   | `highcontrast` ![highcontrast][highcontrast_repocard] |
-|          `dracula` ![dracula][dracula_repocard]          |     `dark` ![dark_repocard][dark_repocard]      |  `prussian` ![prussian_repocard][prussian_repocard]         |
-| [Add your theme][add-theme]   |||
+| | | |
+| :--: | :--: | :--: |
+| `default_repocard` ![default_repocard][default_repocard_repo] | `dark` ![dark][dark_repo] | `radical` ![radical][radical_repo] |
+| `merko` ![merko][merko_repo] | `gruvbox` ![gruvbox][gruvbox_repo] | `tokyonight` ![tokyonight][tokyonight_repo] |
+| `onedark` ![onedark][onedark_repo] | `cobalt` ![cobalt][cobalt_repo] | `synthwave` ![synthwave][synthwave_repo] |
+| `highcontrast` ![highcontrast][highcontrast_repo] | `dracula` ![dracula][dracula_repo] | `prussian` ![prussian][prussian_repo] |
+| `monokai` ![monokai][monokai_repo] | `vue` ![vue][vue_repo] | `shades-of-purple` ![shades-of-purple][shades-of-purple_repo] |
+| `nightowl` ![nightowl][nightowl_repo] | `buefy` ![buefy][buefy_repo] | `blue-green` ![blue-green][blue-green_repo] |
+| `algolia` ![algolia][algolia_repo] | `great-gatsby` ![great-gatsby][great-gatsby_repo] | [Add your theme][add-theme] |
 
 
-<!-- Repo Card Theme previews -->
+[default]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=default
+[default_repocard]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=default_repocard
+[dark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=dark
+[radical]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=radical
+[merko]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=merko
+[gruvbox]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=gruvbox
+[tokyonight]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=tokyonight
+[onedark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=onedark
+[cobalt]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=cobalt
+[synthwave]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=synthwave
+[highcontrast]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=highcontrast
+[dracula]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=dracula
+[prussian]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=prussian
+[monokai]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=monokai
+[vue]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=vue
+[shades-of-purple]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=shades-of-purple
+[nightowl]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=nightowl
+[buefy]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=buefy
+[blue-green]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=blue-green
+[algolia]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=algolia
+[great-gatsby]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=great-gatsby
 
-[default_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=default_repocard
-[dark_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dark
-[radical_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=radical
-[merko_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=merko
-[gruvbox_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=gruvbox
-[cobalt_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=cobalt
-[dark_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dark
-[dracula_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dracula
-[tokyonight_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=tokyonight
-[synthwave_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=synthwave
-[onedark_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=onedark
-[highcontrast_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=highcontrast
-[prussian_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=prussian
 
-<!-- Stats Theme previews -->
-
-[default]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=default&hide=["contribs","prs"]&cache_seconds=86400
-[dark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark&hide=["contribs","prs"]&cache_seconds=86400
-[radical]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=radical&hide=["contribs","prs"]&cache_seconds=86400
-[merko]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=merko&hide=["contribs","prs"]&cache_seconds=86400
-[gruvbox]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=gruvbox&hide=["contribs","prs"]&cache_seconds=86400
-[tokyonight]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=tokyonight&hide=["contribs","prs"]&cache_seconds=86400
-[onedark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=onedark&hide=["contribs","prs"]&cache_seconds=86400
-[cobalt]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=cobalt&hide=["contribs","prs"]&cache_seconds=86400
-[synthwave]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=synthwave&hide=["contribs","prs"]&cache_seconds=86400
-[highcontrast]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=highcontrast&hide=["contribs","prs"]&cache_seconds=86400
-[dracula]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dracula&hide=["contribs","prs"]&cache_seconds=86400
-[prussian]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=prussian&hide=["contribs","prs"]&cache_seconds=86400
+[default_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=default
+[default_repocard_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=default_repocard
+[dark_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dark
+[radical_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=radical
+[merko_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=merko
+[gruvbox_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=gruvbox
+[tokyonight_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=tokyonight
+[onedark_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=onedark
+[cobalt_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=cobalt
+[synthwave_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=synthwave
+[highcontrast_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=highcontrast
+[dracula_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dracula
+[prussian_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=prussian
+[monokai_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=monokai
+[vue_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=vue
+[shades-of-purple_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=shades-of-purple
+[nightowl_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=nightowl
+[buefy_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=buefy
+[blue-green_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=blue-green
+[algolia_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=algolia
+[great-gatsby_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=great-gatsby
 
 
 [add-theme]: https://github.com/anuraghazra/github-readme-stats/edit/master/themes/index.js
+
+Wanted to add a new theme? Consider reading the [contribution guidelines](../CONTRIBUTING.md#themes-contribution) :D

themes/index.js

@@ -3,13 +3,13 @@ const themes = {
     title_color: "2f80ed",
     icon_color: "4c71f2",
     text_color: "333",
-    bg_color: "FFFEFE",
+    bg_color: "fffefe",
   },
   default_repocard: {
     title_color: "2f80ed",
     icon_color: "586069", // icon color is different
     text_color: "333",
-    bg_color: "FFFEFE",
+    bg_color: "fffefe",
   },
   dark: {
     title_color: "fff",
@@ -77,6 +77,54 @@ const themes = {
     text_color: "6e93b5",
     bg_color: "172f45",
   },
+  monokai: {
+    title_color: "eb1f6a",
+    icon_color: "e28905",
+    text_color: "f1f1eb",
+    bg_color: "272822",
+  },
+  vue: {
+    title_color: "41b883",
+    icon_color: "41b883",
+    text_color: "273849",
+    bg_color: "fffefe",
+  },
+  "shades-of-purple": {
+    title_color: "fad000",
+    icon_color: "b362ff",
+    text_color: "a599e9",
+    bg_color: "2d2b55",
+  },
+  nightowl: {
+    title_color: "c792ea",
+    icon_color: "ffeb95",
+    text_color: "7fdbca",
+    bg_color: "011627",
+  },
+  buefy: {
+    title_color: "7957d5",
+    icon_color: "ff3860",
+    text_color: "363636",
+    bg_color: "ffffff",
+  },
+  "blue-green": {
+    title_color: "2f97c1",
+    icon_color: "f5b700",
+    text_color: "0cf574",
+    bg_color: "040f0f",
+  },
+  "algolia": {
+    title_color: "00AEFF",
+    icon_color: "2DDE98",
+    text_color: "FFFFFF",
+    bg_color: "050F2C",
+  },
+  "great-gatsby":{
+    title_color: "ffa726",
+    icon_color: "ffb74d",
+    text_color: "ffd95b",
+    bg_color: "000000",
+  },
 };
 
 module.exports = themes;