[pull] master from anuraghazra:master (#22)

* docs: add `npm install` step to CONTRIBUTING.md (anuraghazra#1015)

* fix: apply parseBoolean to hide_border in pin.js (anuraghazra#1014)

* feat: limit langs shown on wakatime card (anuraghazra#988)

* fix: hide in top_languages interfering with number of languages displayed (anuraghazra#959)

* added a dark theme like the github dark theme

* fixed hide in top_languages interfering with number of languages displayed

* fixed hide in top_languages interfering with number of languages displayed

* fixed hide in top_languages interfering with number of languages displayed

* fixed misplaced function argument

* style(themes): Add GitHub dark theme (anuraghazra#758)

This styling falls in line with the recently released GitHub dark mode

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

* docs: add covid fund link (anuraghazra#1019)

* docs: add `npm install` step to CONTRIBUTING.md (anuraghazra#1015)

* fix: apply parseBoolean to hide_border in pin.js (anuraghazra#1014)

* feat: limit langs shown on wakatime card (anuraghazra#988)

* fix: fixed javascript oof moment

Co-authored-by: Issy <48881813+issy@users.noreply.github.com>
Co-authored-by: Anurag Hazra <hazru.anurag@gmail.com>
Co-authored-by: Mike Beaton <mjsbeaton@gmail.com>
Co-authored-by: Florian Bussmann <hallo@florian-bussmann.de>

* fix: remove extra github dark theme

* docs: update readme_kr.md (anuraghazra#1007)

Correct typos

* feat: added border_color option (anuraghazra#1000)

* feat: Allow customization of border color

* docs: Update readme

Co-authored-by: Mike Beaton <mjsbeaton@gmail.com>
Co-authored-by: Florian Bussmann <hallo@florian-bussmann.de>
Co-authored-by: Mohammed Mushahid Qureshi <mushahidq@gmail.com>
Co-authored-by: Issy <48881813+issy@users.noreply.github.com>
Co-authored-by: Anurag Hazra <hazru.anurag@gmail.com>
Co-authored-by: Jaime <lcalmsky@gmail.com>
Co-authored-by: Rishi Suresh <rishi9632@gmail.com>

CONTRIBUTING.md

@@ -24,6 +24,7 @@ _(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 `npm install` in the repository root
 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_1" with your [github Personal access token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token)
@@ -35,7 +36,7 @@ GitHub Readme Stats supports custom theming and you can also contribute new them
 
 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`
+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`, `border_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.
 

api/index.js

@@ -32,6 +32,7 @@ module.exports = async (req, res) => {
     locale,
     disable_animations,
     border_radius,
+    border_color,
   } = req.query;
   let stats;
 
@@ -76,6 +77,7 @@ module.exports = async (req, res) => {
         theme,
         custom_title,
         border_radius,
+        border_color,
         locale: locale ? locale.toLowerCase() : null,
         disable_animations: parseBoolean(disable_animations),
       }),

api/pin.js

@@ -24,6 +24,7 @@ module.exports = async (req, res) => {
     cache_seconds,
     locale,
     border_radius,
+    border_color,
   } = req.query;
 
   let repoData;
@@ -64,13 +65,14 @@ module.exports = async (req, res) => {
 
     return res.send(
       renderRepoCard(repoData, {
-        hide_border,
+        hide_border: parseBoolean(hide_border),
         title_color,
         icon_color,
         text_color,
         bg_color,
         theme,
         border_radius,
+        border_color,
         show_owner: parseBoolean(show_owner),
         locale: locale ? locale.toLowerCase() : null,
       }),

api/top-langs.js

@@ -28,7 +28,8 @@ module.exports = async (req, res) => {
     exclude_repo,
     custom_title,
     locale,
-    border_radius
+    border_radius,
+    border_color,
   } = req.query;
   let topLangs;
 
@@ -47,6 +48,7 @@ module.exports = async (req, res) => {
       username,
       langs_count,
       parseArray(exclude_repo),
+      parseArray(hide),
     );
 
     const cacheSeconds = clampValue(
@@ -70,6 +72,7 @@ module.exports = async (req, res) => {
         theme,
         layout,
         border_radius,
+        border_color,
         locale: locale ? locale.toLowerCase() : null,
       }),
     );

api/wakatime.js

@@ -25,9 +25,11 @@ module.exports = async (req, res) => {
     custom_title,
     locale,
     layout,
+    langs_count,
     api_domain,
     range,
     border_radius,
+    border_color,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -64,8 +66,10 @@ module.exports = async (req, res) => {
         theme,
         hide_progress,
         border_radius,
+        border_color,
         locale: locale ? locale.toLowerCase() : null,
         layout,
+        langs_count,
       }),
     );
   } catch (err) {

docs/readme_de.md

@@ -174,6 +174,7 @@ Du kannst mehrere, mit Kommas separierte, Werte in der bg_color Option angeben,
 - `hide_progress` - Verbirgt die Fortschrittanzeige und Prozentzahl _(boolean)_
 - `custom_title` - Legt einen benutzerdefinierten Titel fest
 - `layout` - Wechselt zwischen zwei verschiedenen Layouts: `default` & `compact`
+- `langs_count` - Begrenzt die Anzahl der angezeigten Sprachen auf der Karte
 - `api_domain` - Legt eine benutzerdefinierte API Domain fest, z.B. für [Hakatime](https://github.com/mujx/hakatime) oder [Wakapi](https://github.com/muety/wakapi)
 - `range` – Fragt eine eine Zeitspanne an, als die standardmäßig in WakaTime hinterlegte, z.B. `last_7_days`. Siehe [WakaTime API Dokumentation](https://wakatime.com/developers#stats).
 

docs/readme_es.md

@@ -192,6 +192,7 @@ Puedes pasar mútliples valores separados por coma en la opción `bg_color` para
 - `hide_progress` - Oculta la barra de progreso y el porcentaje _(booleano)_
 - `custom_title` - Establece un título personalizado
 - `layout` - Cambia entre los dos diseños disponibles `default` & `compact`
+- `langs_count` - Limita el número de idiomas que aparecen en el mapa
 - `api_domain` - Establece un dominio de API personalizado para la tarjeta
 
 ---

docs/readme_kr.md

@@ -424,7 +424,7 @@ GitHub API 가 시간 당 요청 개수를 5,000회로 제한한 뒤로,
 만족하시거나, 제가 이런 요소들을 만드는 데에 도움을 주고 싶으시다면,
 여러분께서 도와주실 수 있는 것들이 있어요!
 
-- github-readme-stats 를 README 에 표시하실 때 확실한 도움을 주세요! 이 저장소로 링크를 걸어주시면 되요! :D
+- github-readme-stats 를 README 에 표시하실 때 확실한 도움을 주세요! 이 저장소로 링크를 걸어주시면 돼요! :D
 - 이 프로젝트를 많이 공유해주시고, 즐겨찾기 해주세요! :rocket:
 - [![paypal.me/anuraghazra](https://ionicabizau.github.io/badges/paypal.svg)](https://www.paypal.me/anuraghazra) - PayPal 을 이용해 1회성 도네이션을 해주실 수 있어요. 아마도 전 ~~커피, 아... 아니~~ 차를 사서 마시겠죠? ㅎ; :tea:
 

readme.md

@@ -156,6 +156,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
 - `title_color` - Card's title color _(hex color)_
 - `text_color` - Body text color _(hex color)_
 - `icon_color` - Icons color if available _(hex color)_
+- `border_color` - Card's border color _(hex color)_. (Does not apply when `hide_border` is enabled)
 - `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_
 - `hide_border` - Hides the card's border _(boolean)_
 - `theme` - name of the theme, choose from [all available themes](./themes/README.md)
@@ -211,6 +212,7 @@ You can provide multiple comma-separated values in bg_color option to render a g
 - `hide_progress` - Hides the progress bar and percentage _(boolean)_
 - `custom_title` - Sets a custom title for the card
 - `layout` - Switch between two available layouts `default` & `compact`
+- `langs_count` - Limit number of languages on the card, defaults to all reported langauges
 - `api_domain` - Set a custom API domain for the card, e.g. to use services like [Hakatime](https://github.com/mujx/hakatime) or [Wakapi](https://github.com/muety/wakapi)
 - `range` – Request a range different from your WakaTime default, e.g. `last_7_days`. See [WakaTime API docs](https://wakatime.com/developers#stats) for list of available options.
 
@@ -330,6 +332,10 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
 
 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=issues&show_icons=true)
 
+- Customize Border Color
+
+![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&border_color=2e4058)
+
 - Include All Commits
 
 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&include_all_commits=true)

src/cards/repo-card.js

@@ -31,6 +31,7 @@ const renderRepoCard = (repo, options = {}) => {
     show_owner,
     theme = "default_repocard",
     border_radius,
+    border_color,
     locale,
   } = options;
 
@@ -60,11 +61,12 @@ const renderRepoCard = (repo, options = {}) => {
   });
 
   // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+  const { titleColor, textColor, iconColor, bgColor, borderColor } = getCardColors({
     title_color,
     icon_color,
     text_color,
     bg_color,
+    border_color,
     theme,
   });
 
@@ -125,6 +127,7 @@ const renderRepoCard = (repo, options = {}) => {
       textColor,
       iconColor,
       bgColor,
+      borderColor,
     },
   });
 

src/cards/stats-card.js

@@ -70,18 +70,20 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     theme = "default",
     custom_title,
     border_radius,
+    border_color,
     locale,
     disable_animations = false,
   } = options;
 
   const lheight = parseInt(line_height, 10);
 
   // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+  const { titleColor, textColor, iconColor, bgColor, borderColor } = getCardColors({
     title_color,
     icon_color,
     text_color,
     bg_color,
+    border_color,
     theme,
   });
 
@@ -207,6 +209,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
       textColor,
       iconColor,
       bgColor,
+      borderColor,
     },
   });
 

src/cards/top-languages-card.js

@@ -73,7 +73,8 @@ const renderTopLanguages = (topLangs, options = {}) => {
     layout,
     custom_title,
     locale,
-    border_radius
+    border_radius,
+    border_color,
   } = options;
 
   const i18n = new I18n({
@@ -104,10 +105,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
   }, 0);
 
   // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, bgColor } = getCardColors({
+  const { titleColor, textColor, bgColor, borderColor } = getCardColors({
     title_color,
     text_color,
     bg_color,
+    border_color,
     theme,
   });
 
@@ -189,6 +191,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
       titleColor,
       textColor,
       bgColor,
+      borderColor,
     },
   });
 

src/cards/wakatime-card.js

@@ -2,7 +2,7 @@ const Card = require("../common/Card");
 const I18n = require("../common/I18n");
 const { getStyles } = require("../getStyles");
 const { wakatimeCardLocales } = require("../translations");
-const { getCardColors, FlexLayout } = require("../common/utils");
+const { clampValue, getCardColors, FlexLayout } = require("../common/utils");
 const { createProgressNode } = require("../common/createProgressNode");
 const languageColors = require("../common/languageColors.json");
 
@@ -99,7 +99,9 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     custom_title,
     locale,
     layout,
-    border_radius
+    langs_count = languages ? languages.length : 0,
+    border_radius,
+    border_color,
   } = options;
 
   const i18n = new I18n({
@@ -109,18 +111,28 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 
   const lheight = parseInt(line_height, 10);
 
+  langsCount = clampValue(parseInt(langs_count), 1, langs_count);
+
   // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+  const {
+    titleColor,
+    textColor,
+    iconColor,
+    bgColor,
+    borderColor,
+  } = getCardColors({
     title_color,
     icon_color,
     text_color,
     bg_color,
+    border_color,
     theme,
   });
 
   const statItems = languages
     ? languages
         .filter((language) => language.hours || language.minutes)
+        .slice(0, langsCount)
         .map((language) => {
           return createTextNode({
             id: language.name,
@@ -217,6 +229,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
       textColor,
       iconColor,
       bgColor,
+      borderColor,
     },
   });
 

src/common/Card.js

@@ -147,7 +147,7 @@ class Card {
           y="0.5"
           rx="${this.border_radius}"
           height="99%"
-          stroke="#E4E2E2"
+          stroke="${this.colors.borderColor}"
           width="${this.width - 1}"
           fill="${
             typeof this.colors.bgColor === "object"

src/common/utils.js

@@ -115,10 +115,12 @@ function getCardColors({
   icon_color,
   bg_color,
   theme,
+  border_color,
   fallbackTheme = "default",
 }) {
   const defaultTheme = themes[fallbackTheme];
   const selectedTheme = themes[theme] || defaultTheme;
+  const defaultBorderColor = selectedTheme.border_color || defaultTheme.border_color;
 
   // get the color provided by the user else the theme color
   // finally if both colors are invalid fallback to default theme
@@ -139,7 +141,12 @@ function getCardColors({
     "#" + defaultTheme.bg_color,
   );
 
-  return { titleColor, iconColor, textColor, bgColor };
+  const borderColor = fallbackColor(
+    border_color || defaultBorderColor,
+    "#" + defaultBorderColor,
+  );
+
+  return { titleColor, iconColor, textColor, bgColor, borderColor };
 }
 
 function wrapTextMultiline(text, width = 60, maxLines = 3) {

src/fetchers/top-languages-fetcher.js

@@ -34,10 +34,15 @@ const fetcher = (variables, token) => {
   );
 };
 
-async function fetchTopLanguages(username, langsCount = 5, exclude_repo = []) {
+async function fetchTopLanguages(
+  username,
+  langsCount = 5,
+  exclude_repo = [],
+  hide = [],
+) {
   if (!username) throw Error("Invalid username");
-
-  langsCount = clampValue(parseInt(langsCount), 1, 10);
+  langsCount = parseInt(langsCount) + hide.length;
+  langsCount = clampValue(langsCount, 1, 10 + hide.length);
 
   const res = await retryer(fetcher, { login: username });
 

tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -69,7 +69,7 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
           y=\\"0.5\\"
           rx=\\"4.5\\"
           height=\\"99%\\"
-          stroke=\\"#E4E2E2\\"
+          stroke=\\"#e4e2e2\\"
           width=\\"494\\"
           fill=\\"#fffefe\\"
           stroke-opacity=\\"1\\"
@@ -220,7 +220,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
           y=\\"0.5\\"
           rx=\\"4.5\\"
           height=\\"99%\\"
-          stroke=\\"#E4E2E2\\"
+          stroke=\\"#e4e2e2\\"
           width=\\"494\\"
           fill=\\"#fffefe\\"
           stroke-opacity=\\"1\\"