feat: added border_color option (anuraghazra#1000)

* feat: Allow customization of border color

* docs: Update readme

CONTRIBUTING.md

@@ -36,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;
@@ -71,6 +72,7 @@ module.exports = async (req, res) => {
         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;
 
@@ -71,6 +72,7 @@ module.exports = async (req, res) => {
         theme,
         layout,
         border_radius,
+        border_color,
         locale: locale ? locale.toLowerCase() : null,
       }),
     );

api/wakatime.js

@@ -29,6 +29,7 @@ module.exports = async (req, res) => {
     api_domain,
     range,
     border_radius,
+    border_color,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -65,6 +66,7 @@ module.exports = async (req, res) => {
         theme,
         hide_progress,
         border_radius,
+        border_color,
         locale: locale ? locale.toLowerCase() : null,
         layout,
         langs_count,

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)
@@ -331,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

@@ -100,7 +100,8 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     locale,
     layout,
     langs_count = languages ? languages.length : 0,
-    border_radius
+    border_radius,
+    border_color,
   } = options;
 
   const i18n = new I18n({
@@ -113,11 +114,18 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   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,
   });
 
@@ -221,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) {

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\\"

tests/utils.test.js

@@ -71,13 +71,15 @@ describe("Test utils.js", () => {
       text_color: "0f0",
       icon_color: "00f",
       bg_color: "fff",
+      border_color: "fff",
       theme: "dark",
     });
     expect(colors).toStrictEqual({
       titleColor: "#f00",
       textColor: "#0f0",
       iconColor: "#00f",
       bgColor: "#fff",
+      borderColor: "#fff",
     });
   });
 
@@ -87,13 +89,15 @@ describe("Test utils.js", () => {
       text_color: "0f0",
       icon_color: "00f",
       bg_color: "fff",
+      border_color: "invalidColor",
       theme: "dark",
     });
     expect(colors).toStrictEqual({
       titleColor: "#2f80ed",
       textColor: "#0f0",
       iconColor: "#00f",
       bgColor: "#fff",
+      borderColor: "#e4e2e2",
     });
   });
 
@@ -106,6 +110,7 @@ describe("Test utils.js", () => {
       textColor: "#9f9f9f",
       iconColor: "#79ff97",
       bgColor: "#151515",
+      borderColor: "#e4e2e2",
     });
   });
 });

themes/index.js

@@ -4,6 +4,7 @@ const themes = {
     icon_color: "4c71f2",
     text_color: "333",
     bg_color: "fffefe",
+    border_color: "e4e2e2",
   },
   default_repocard: {
     title_color: "2f80ed",