Unverified Commit e9019c14 authored by Benjamin Ashbaugh's avatar Benjamin Ashbaugh Committed by GitHub
Browse files

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: default avataranuraghazra <hazru.anurag@gmail.com>
parent 0f3bed51

.gitignore

+1 −0
Original line number Diff line number Diff line
@@ -4,4 +4,5 @@ node_modules 
package-lock.json

*.lock

.vscode/

.idea/

coverage

api/top-langs.js

+2 −1
Original line number Diff line number Diff line
@@ -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

+10 −1
Original line number Diff line number Diff line
@@ -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

+1 −1
Original line number Diff line number Diff line
@@ -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

+6 −4
Original line number Diff line number Diff line 
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;

CRA Git | Maintained and supported by SUSTech CRA and CCSE