feat: added repo card hide border option (anuraghazra#488)

* 🚀 Prettier config

* 🚀 hide_border for Repo Card

* fix: wrong total commits (anuraghazra#490)

* chore: run prettier on all files

* chore: lol lets add the trailing commas

Co-authored-by: Anurag Hazra <[email protected]>

.github/FUNDING.yml

@@ -9,4 +9,7 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ["https://www.paypal.me/anuraghazra", "https://www.buymeacoffee.com/anuraghazra"] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+custom: [
+    "https://www.paypal.me/anuraghazra",
+    "https://www.buymeacoffee.com/anuraghazra",
+  ] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/test.yml

@@ -26,7 +26,8 @@ jobs:
           cache-name: cache-node-modules
         with:
           path: ~/.npm
-          key: ${{ runner.os }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
+          key:
+            ${{ runner.os }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-npm-cache-
 

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+*.json
+*.md
+coverage
+.vercel

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "useTabs": false,
+  "endOfLine": "auto",
+  "proseWrap": "always"
+}

api/index.js

@@ -40,13 +40,13 @@ module.exports = async (req, res) => {
     stats = await fetchStats(
       username,
       parseBoolean(count_private),
-      parseBoolean(include_all_commits)
+      parseBoolean(include_all_commits),
     );
 
     const cacheSeconds = clampValue(
       parseInt(cache_seconds || CONSTANTS.TWO_HOURS, 10),
       CONSTANTS.TWO_HOURS,
-      CONSTANTS.ONE_DAY
+      CONSTANTS.ONE_DAY,
     );
 
     res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`);
@@ -65,7 +65,7 @@ module.exports = async (req, res) => {
         text_color,
         bg_color,
         theme,
-      })
+      }),
     );
   } catch (err) {
     return res.send(renderError(err.message, err.secondaryMessage));

api/pin.js

@@ -13,6 +13,7 @@ module.exports = async (req, res) => {
   const {
     username,
     repo,
+    hide_border,
     title_color,
     icon_color,
     text_color,
@@ -36,7 +37,7 @@ module.exports = async (req, res) => {
     let cacheSeconds = clampValue(
       parseInt(cache_seconds || CONSTANTS.TWO_HOURS, 10),
       CONSTANTS.TWO_HOURS,
-      CONSTANTS.ONE_DAY
+      CONSTANTS.ONE_DAY,
     );
 
     /*
@@ -56,13 +57,14 @@ module.exports = async (req, res) => {
 
     return res.send(
       renderRepoCard(repoData, {
+        hide_border,
         title_color,
         icon_color,
         text_color,
         bg_color,
         theme,
         show_owner: parseBoolean(show_owner),
-      })
+      }),
     );
   } catch (err) {
     return res.send(renderError(err.message, err.secondaryMessage));

api/top-langs.js

@@ -39,7 +39,7 @@ module.exports = async (req, res) => {
     const cacheSeconds = clampValue(
       parseInt(cache_seconds || CONSTANTS.TWO_HOURS, 10),
       CONSTANTS.TWO_HOURS,
-      CONSTANTS.ONE_DAY
+      CONSTANTS.ONE_DAY,
     );
 
     res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`);
@@ -55,7 +55,7 @@ module.exports = async (req, res) => {
         bg_color,
         theme,
         layout,
-      })
+      }),
     );
   } catch (err) {
     return res.send(renderError(err.message, err.secondaryMessage));

api/wakatime.js

@@ -31,7 +31,7 @@ module.exports = async (req, res) => {
     let cacheSeconds = clampValue(
       parseInt(cache_seconds || CONSTANTS.TWO_HOURS, 10),
       CONSTANTS.TWO_HOURS,
-      CONSTANTS.ONE_DAY
+      CONSTANTS.ONE_DAY,
     );
 
     if (!cache_seconds) {
@@ -51,7 +51,7 @@ module.exports = async (req, res) => {
         bg_color,
         theme,
         hide_progress,
-      })
+      }),
     );
   } catch (err) {
     return res.send(renderError(err.message, err.secondaryMessage));

readme.md

@@ -133,6 +133,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
 - `text_color` - Body text color _(hex color)_
 - `icon_color` - Icons color if available _(hex color)_
 - `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)
 - `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_
 
@@ -168,14 +169,13 @@ You can provide multiple comma-separated values in bg_color option to render a g
 - `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)  
+> :warning: **Important:**
+> Language names should be uri-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding)
 > (i.e: `c++` should become `c%2B%2B`, `jupyter notebook` should become `jupyter%20notebook`, etc.)
 
 #### Wakatime Card Exclusive Options:
 
 - `hide_title` - _(boolean)_
-- `hide_border` - _(boolean)_
 - `line_height` - Sets the line-height between text _(number)_
 - `hide_progress` - Hides the progress bar and percentage _(boolean)_
 
@@ -342,16 +342,16 @@ NOTE: Since [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) we
  <summary><b> Guide on setting up Vercel  🔨 </b></summary>
 
 1. Go to [vercel.com](https://vercel.com/)
-1. Click on `Log in`  
+1. Click on `Log in`
    ![](https://files.catbox.moe/tct1wg.png)
-1. Sign in with GitHub by pressing `Continue with GitHub`  
+1. Sign in with GitHub by pressing `Continue with GitHub`
    ![](https://files.catbox.moe/btd78j.jpeg)
 1. Sign into GitHub and allow access to all repositories, if prompted
 1. Fork this repo
 1. Go back to your [Vercel dashboard](https://vercel.com/dashboard)
-1. Select `Import Project`  
+1. Select `Import Project`
    ![](https://files.catbox.moe/qckos0.png)
-1. Select `Import Git Repository`  
+1. Select `Import Git Repository`
    ![](https://files.catbox.moe/pqub9q.png)
 1. Select root and keep everything as is, just add your environment variable named PAT_1 (as shown), which will contain a personal access token (PAT), which you can easily create [here](https://github.com/settings/tokens/new) (leave everything as is, just name it something, it can be anything you want)
    ![](https://files.catbox.moe/0ez4g7.png)

scripts/generate-theme-doc.js

@@ -66,7 +66,7 @@ const createTableItem = ({ link, label, isRepoCard }) => {
 const generateTable = ({ isRepoCard }) => {
   const rows = [];
   const themes = Object.keys(theme).filter(
-    (name) => name !== (!isRepoCard ? "default_repocard" : "default")
+    (name) => name !== (!isRepoCard ? "default_repocard" : "default"),
   );
 
   for (let i = 0; i < themes.length; i += 3) {

scripts/preview-theme.js

@@ -55,7 +55,7 @@ async function run() {
       return;
     }
     colors = colors.map((color) =>
-      color.replace(/.*\:\s/, "").replace(/\"/g, "")
+      color.replace(/.*\:\s/, "").replace(/\"/g, ""),
     );
 
     let titleColor = colors[0];

src/cards/repo-card.js

@@ -21,6 +21,7 @@ const renderRepoCard = (repo, options = {}) => {
     forkCount,
   } = repo;
   const {
+    hide_border = false,
     title_color,
     icon_color,
     text_color,
@@ -118,7 +119,7 @@ const renderRepoCard = (repo, options = {}) => {
   });
 
   card.disableAnimations();
-  card.setHideBorder(false);
+  card.setHideBorder(hide_border);
   card.setHideTitle(false);
   card.setCSS(`
     .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
@@ -147,7 +148,7 @@ const renderRepoCard = (repo, options = {}) => {
       ${svgLanguage}
 
       <g
-        data-testid="star-fork-group" 
+        data-testid="star-fork-group"
         transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 0)"
       >
         ${starAndForkCount}

src/cards/stats-card.js

@@ -124,14 +124,14 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         index,
         showIcons: show_icons,
         shiftValuePos: !include_all_commits,
-      })
+      }),
     );
 
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
   let height = Math.max(
     45 + (statItems.length + 1) * lheight,
-    hide_rank ? 0 : 150
+    hide_rank ? 0 : 150,
   );
 
   // Conditionally rendered elements

src/cards/wakatime-card.js

@@ -116,7 +116,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     `
     ${cssStyles}
     .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-    `
+    `,
   );
 
   return card.render(`

src/common/retryer.js

@@ -9,7 +9,7 @@ const retryer = async (fetcher, variables, retries = 0) => {
     let response = await fetcher(
       variables,
       process.env[`PAT_${retries + 1}`],
-      retries
+      retries,
     );
 
     // prettier-ignore

src/common/utils.js

@@ -37,7 +37,7 @@ function kFormatter(num) {
 
 function isValidHexColor(hexColor) {
   return new RegExp(
-    /^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4})$/
+    /^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4})$/,
   ).test(hexColor);
 }
 
@@ -124,19 +124,19 @@ function getCardColors({
   // finally if both colors are invalid fallback to default theme
   const titleColor = fallbackColor(
     title_color || selectedTheme.title_color,
-    "#" + defaultTheme.title_color
+    "#" + defaultTheme.title_color,
   );
   const iconColor = fallbackColor(
     icon_color || selectedTheme.icon_color,
-    "#" + defaultTheme.icon_color
+    "#" + defaultTheme.icon_color,
   );
   const textColor = fallbackColor(
     text_color || selectedTheme.text_color,
-    "#" + defaultTheme.text_color
+    "#" + defaultTheme.text_color,
   );
   const bgColor = fallbackColor(
     bg_color || selectedTheme.bg_color,
-    "#" + defaultTheme.bg_color
+    "#" + defaultTheme.bg_color,
   );
 
   return { titleColor, iconColor, textColor, bgColor };

src/fetchers/repo-fetcher.js

@@ -39,7 +39,7 @@ const fetcher = (variables, token) => {
     },
     {
       Authorization: `bearer ${token}`,
-    }
+    },
   );
 };
 

src/fetchers/stats-fetcher.js

@@ -45,7 +45,7 @@ const fetcher = (variables, token) => {
     },
     {
       Authorization: `bearer ${token}`,
-    }
+    },
   );
 };
 
@@ -86,7 +86,7 @@ const totalCommitsFetcher = async (username) => {
 async function fetchStats(
   username,
   count_private = false,
-  include_all_commits = false
+  include_all_commits = false,
 ) {
   if (!username) throw Error("Invalid username");
 
@@ -106,7 +106,7 @@ async function fetchStats(
     logger.error(res.data.errors);
     throw new CustomError(
       res.data.errors[0].message || "Could not fetch user",
-      CustomError.USER_NOT_FOUND
+      CustomError.USER_NOT_FOUND,
     );
   }
 

src/fetchers/top-languages-fetcher.js

@@ -29,7 +29,7 @@ const fetcher = (variables, token) => {
     },
     {
       Authorization: `bearer ${token}`,
-    }
+    },
   );
 };
 

src/fetchers/wakatime-fetcher.js

@@ -2,7 +2,7 @@ const axios = require("axios");
 
 const fetchLast7Days = async ({ username }) => {
   const { data } = await axios.get(
-    `https://wakatime.com/api/v1/users/${username}/stats/last_7_days?is_including_today=true`
+    `https://wakatime.com/api/v1/users/${username}/stats/last_7_days?is_including_today=true`,
   );
 
   return data.data;

tests/api.test.js

@@ -97,8 +97,8 @@ describe("Test /api/", () => {
     expect(res.send).toBeCalledWith(
       renderError(
         error.errors[0].message,
-        "Make sure the provided username is not an organization"
-      )
+        "Make sure the provided username is not an organization",
+      ),
     );
   });
 
@@ -115,7 +115,7 @@ describe("Test /api/", () => {
         text_color: "fff",
         bg_color: "fff",
       },
-      data
+      data,
     );
 
     await api(req, res);
@@ -131,7 +131,7 @@ describe("Test /api/", () => {
         icon_color: "fff",
         text_color: "fff",
         bg_color: "fff",
-      })
+      }),
     );
   });
 
@@ -196,7 +196,7 @@ describe("Test /api/", () => {
         username: "anuraghazra",
         count_private: true,
       },
-      data
+      data,
     );
 
     await api(req, res);
@@ -217,8 +217,8 @@ describe("Test /api/", () => {
             issues: stats.totalIssues,
           }),
         },
-        {}
-      )
+        {},
+      ),
     );
   });
 });

tests/calculateRank.test.js

@@ -12,7 +12,7 @@ describe("Test calculateRank", () => {
         stargazers: 400,
         prs: 300,
         issues: 200,
-      })
+      }),
     ).toStrictEqual({ level: "A+", score: 49.16605417270399 });
   });
 });