feat: added number of languages param for top langs card (#445)

* feat: num_langs param for top langs

* fix: top-langs card bottom padding with num_langs param

* fix: clamp toplangs num_langs rather than throwing error

* feat: changed param name & fixed minor issues, added tests

Co-authored-by: anuraghazra <hazru.anurag@gmail.com>

.gitignore

@@ -4,4 +4,5 @@ node_modules
 package-lock.json
 *.lock
 .vscode/
+.idea/
 coverage

api/top-langs.js

@@ -23,6 +23,7 @@ module.exports = async (req, res) => {
     theme,
     cache_seconds,
     layout,
+    langs_count,
   } = req.query;
   let topLangs;
 
@@ -33,7 +34,7 @@ module.exports = async (req, res) => {
   }
 
   try {
-    topLangs = await fetchTopLanguages(username);
+    topLangs = await fetchTopLanguages(username, langs_count);
 
     const cacheSeconds = clampValue(
       parseInt(cache_seconds || CONSTANTS.TWO_HOURS, 10),

readme.md

@@ -165,6 +165,7 @@ You can provide multiple comma separated values in bg_color option to render a g
 - `hide_title` - _(boolean)_
 - `layout` - Switch between two available layouts `default` & `compact`
 - `card_width` - Set the card's width manually _(number)_
+- `langs_count` - Show more languages on the card, between 1-10, defaults to 5 _(number)_
 
 > :warning: **Important:**  
 > Language names should be uri-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding)  
@@ -200,7 +201,7 @@ Use [show_owner](#customization) variable to include the repo's owner username
 
 Top languages card shows github user's top languages which have been mostly used.
 
-_NOTE: Top languages does not indicate my skill level or something like that, it's a github metric of which languages i have the most code on github, it's a new feature of github-readme-stats_
+_NOTE: Top languages does not indicate my skill level or something like that, it's a github metric of which languages have the most code on github, it's a new feature of github-readme-stats_
 
 ### Usage
 
@@ -220,6 +221,14 @@ You can use `?hide=language1,language2` parameter to hide individual languages.
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide=javascript,html)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
+### Show more languages
+
+You can use the `&langs_count=` option to increase or decrease the number of languages shown on the card. Valid values are integers between 1 and 10 (inclusive), and the default is 5.
+
+```md
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&langs_count=8)](https://github.com/anuraghazra/github-readme-stats)
+```
+
 ### Compact Language Card Layout
 
 You can use the `&layout=compact` option to change the card design.

src/cards/top-languages-card.js

@@ -112,7 +112,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
   // RENDER COMPACT LAYOUT
   if (layout === "compact") {
     width = width + 50;
-    height = 30 + (langs.length / 2 + 1) * 40;
+    height = 90 + Math.round(langs.length / 2) * 25;
 
     // 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: [--][----][---]

src/fetchers/top-languages-fetcher.js

@@ -1,4 +1,4 @@
-const { request, logger } = require("../common/utils");
+const { request, logger, clampValue } = require("../common/utils");
 const retryer = require("../common/retryer");
 require("dotenv").config();
 
@@ -33,10 +33,12 @@ const fetcher = (variables, token) => {
   );
 };
 
-async function fetchTopLanguages(username) {
+async function fetchTopLanguages(username, langsCount = 5) {
   if (!username) throw Error("Invalid username");
 
-  let res = await retryer(fetcher, { login: username });
+  langsCount = clampValue(parseInt(langsCount), 1, 10);
+
+  const res = await retryer(fetcher, { login: username });
 
   if (res.data.errors) {
     logger.error(res.data.errors);
@@ -73,7 +75,7 @@ async function fetchTopLanguages(username) {
     }, {});
 
   const topLangs = Object.keys(repoNodes)
-    .slice(0, 5)
+    .slice(0, langsCount)
     .reduce((result, key) => {
       result[key] = repoNodes[key];
       return result;

tests/fetchTopLanguages.test.js

@@ -74,6 +74,19 @@ describe("FetchTopLanguages", () => {
     });
   });
 
+  it("should fetch langs with specified langs_count", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
+
+    let repo = await fetchTopLanguages("anuraghazra", 1);
+    expect(repo).toStrictEqual({
+      javascript: {
+        color: "#0ff",
+        name: "javascript",
+        size: 200,
+      },
+    });
+  });
+
   it("should throw error", async () => {
     mock.onPost("https://api.github.com/graphql").reply(200, error);