diff --git a/.gitignore b/.gitignore index b8b9cf0c2b16a..0ecfbc229afc5 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ node_modules package-lock.json *.lock .vscode/ +.idea/ coverage diff --git a/api/top-langs.js b/api/top-langs.js index 9810c52631964..59692cd2a81be 100644 --- a/api/top-langs.js +++ b/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), diff --git a/readme.md b/readme.md index 3ccc0ea9a3ae3..3a6181d449750 100644 --- a/readme.md +++ b/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. diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 5b43261a1cc1e..03a750a49bc09 100644 --- a/src/cards/top-languages-card.js +++ b/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: [--][----][---] diff --git a/src/fetchers/top-languages-fetcher.js b/src/fetchers/top-languages-fetcher.js index f4cf788473a99..51ed8a87b12b4 100644 --- a/src/fetchers/top-languages-fetcher.js +++ b/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; diff --git a/tests/fetchTopLanguages.test.js b/tests/fetchTopLanguages.test.js index 852a0b0fa7177..d8817ae24d8ec 100644 --- a/tests/fetchTopLanguages.test.js +++ b/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);