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

* 🚀 Prettier config

* 🚀 hide_border for Repo Card

* fix: wrong total commits (#490)

* chore: run prettier on all files

* chore: lol lets add the trailing commas

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

.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)_
 
@@ -175,7 +176,6 @@ You can provide multiple comma-separated values in bg_color option to render a g
 #### 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)_
 

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} }

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 });
   });
 });

tests/card.test.js

@@ -13,7 +13,7 @@ describe("Card", () => {
     document.body.innerHTML = card.render(``);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "stroke-opacity",
-      "0"
+      "0",
     );
   });
 
@@ -24,7 +24,7 @@ describe("Card", () => {
     document.body.innerHTML = card.render(``);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "stroke-opacity",
-      "1"
+      "1",
     );
   });
 
@@ -63,11 +63,11 @@ describe("Card", () => {
     document.body.innerHTML = card.render(``);
     expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
       "height",
-      "200"
+      "200",
     );
     expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
       "height",
-      "200"
+      "200",
     );
   });
 
@@ -78,7 +78,7 @@ describe("Card", () => {
     document.body.innerHTML = card.render(``);
     expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
       "height",
-      "170"
+      "170",
     );
   });
 
@@ -87,7 +87,7 @@ describe("Card", () => {
     document.body.innerHTML = card.render(``);
     expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute(
       "transform",
-      "translate(0, 55)"
+      "translate(0, 55)",
     );
   });
 
@@ -98,7 +98,7 @@ describe("Card", () => {
     document.body.innerHTML = card.render(``);
     expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute(
       "transform",
-      "translate(0, 25)"
+      "translate(0, 25)",
     );
   });
 
@@ -130,7 +130,7 @@ describe("Card", () => {
     expect(headerClassStyles.fill).toBe("#f00");
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#fff"
+      "#fff",
     );
   });
   it("should render gradient backgrounds", () => {
@@ -154,20 +154,20 @@ describe("Card", () => {
     document.body.innerHTML = card.render(``);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "url(#gradient)"
+      "url(#gradient)",
     );
     expect(document.querySelector("defs linearGradient")).toHaveAttribute(
       "gradientTransform",
-      "rotate(90)"
+      "rotate(90)",
     );
     expect(
-      document.querySelector("defs linearGradient stop:nth-child(1)")
+      document.querySelector("defs linearGradient stop:nth-child(1)"),
     ).toHaveAttribute("stop-color", "#fff");
     expect(
-      document.querySelector("defs linearGradient stop:nth-child(2)")
+      document.querySelector("defs linearGradient stop:nth-child(2)"),
     ).toHaveAttribute("stop-color", "#000");
     expect(
-      document.querySelector("defs linearGradient stop:nth-child(3)")
+      document.querySelector("defs linearGradient stop:nth-child(3)"),
     ).toHaveAttribute("stop-color", "#f00");
   });
 });

tests/fetchRepo.test.js

@@ -57,7 +57,7 @@ describe("Test fetchRepo", () => {
       .reply(200, { data: { user: { repository: null }, organization: null } });
 
     await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
-      "User Repository Not found"
+      "User Repository Not found",
     );
   });
 
@@ -67,7 +67,7 @@ describe("Test fetchRepo", () => {
       .reply(200, { data: { user: null, organization: { repository: null } } });
 
     await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
-      "Organization Repository Not found"
+      "Organization Repository Not found",
     );
   });
 
@@ -77,7 +77,7 @@ describe("Test fetchRepo", () => {
       .reply(200, { data: { user: null, organization: null } });
 
     await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
-      "Not found"
+      "Not found",
     );
   });
 
@@ -90,7 +90,7 @@ describe("Test fetchRepo", () => {
     });
 
     await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
-      "User Repository Not found"
+      "User Repository Not found",
     );
   });
 });

tests/fetchStats.test.js

@@ -77,7 +77,7 @@ describe("Test fetchStats", () => {
     mock.onPost("https://api.github.com/graphql").reply(200, error);
 
     await expect(fetchStats("anuraghazra")).rejects.toThrow(
-      "Could not resolve to a User with the login of 'noname'."
+      "Could not resolve to a User with the login of 'noname'.",
     );
   });
 

tests/fetchTopLanguages.test.js

@@ -91,7 +91,7 @@ describe("FetchTopLanguages", () => {
     mock.onPost("https://api.github.com/graphql").reply(200, error);
 
     await expect(fetchTopLanguages("anuraghazra")).rejects.toThrow(
-      "Could not resolve to a User with the login of 'noname'."
+      "Could not resolve to a User with the login of 'noname'.",
     );
   });
 });

tests/fetchWakatime.test.js

@@ -105,7 +105,7 @@ describe("Wakatime fetcher", () => {
     const username = "anuraghazra";
     mock
       .onGet(
-        `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`,
       )
       .reply(200, wakaTimeData);
 
@@ -207,7 +207,7 @@ describe("Wakatime fetcher", () => {
     mock.onGet(/\/https:\/\/wakatime\.com\/api/).reply(404, wakaTimeData);
 
     await expect(fetchLast7Days("noone")).rejects.toThrow(
-      "Request failed with status code 404"
+      "Request failed with status code 404",
     );
   });
 });

tests/pin.test.js

@@ -76,7 +76,7 @@ describe("Test /api/pin", () => {
 
     expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
     expect(res.send).toBeCalledWith(
-      renderRepoCard(data_repo.repository, { ...req.query })
+      renderRepoCard(data_repo.repository, { ...req.query }),
     );
   });
 
@@ -120,7 +120,7 @@ describe("Test /api/pin", () => {
 
     expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
     expect(res.send).toBeCalledWith(
-      renderError("Organization Repository Not found")
+      renderError("Organization Repository Not found"),
     );
   });
 });

tests/renderRepoCard.test.js

@@ -29,16 +29,16 @@ describe("Test renderRepoCard", () => {
     expect(header).toHaveTextContent("convoychat");
     expect(header).not.toHaveTextContent("anuraghazra");
     expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
-      "Help us take over the world! React + TS + GraphQL Chat App"
+      "Help us take over the world! React + TS + GraphQL Chat App",
     );
     expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
     expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
     expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
-      "TypeScript"
+      "TypeScript",
     );
     expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
       "fill",
-      "#2b7489"
+      "#2b7489",
     );
   });
 
@@ -47,7 +47,7 @@ describe("Test renderRepoCard", () => {
       show_owner: true,
     });
     expect(document.getElementsByClassName("header")[0]).toHaveTextContent(
-      "anuraghazra/convoychat"
+      "anuraghazra/convoychat",
     );
   });
 
@@ -59,11 +59,11 @@ describe("Test renderRepoCard", () => {
     });
 
     expect(
-      document.getElementsByClassName("description")[0].children[0].textContent
+      document.getElementsByClassName("description")[0].children[0].textContent,
     ).toBe("The quick brown fox jumps over the lazy dog is an");
 
     expect(
-      document.getElementsByClassName("description")[0].children[1].textContent
+      document.getElementsByClassName("description")[0].children[1].textContent,
     ).toBe("English-language pangram—a sentence that contains all");
 
     // Should not trim
@@ -73,7 +73,7 @@ describe("Test renderRepoCard", () => {
     });
 
     expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
-      "Small text should not trim"
+      "Small text should not trim",
     );
   });
 
@@ -85,7 +85,7 @@ describe("Test renderRepoCard", () => {
 
     // poop emoji may not show in all editors but it's there between "a" and "poo"
     expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
-      "This is a text with a 💩 poo emoji"
+      "This is a text with a 💩 poo emoji",
     );
   });
 
@@ -101,7 +101,7 @@ describe("Test renderRepoCard", () => {
     expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
     expect(queryByTestId(document.body, "star-fork-group")).toHaveAttribute(
       "transform",
-      "translate(155, 0)"
+      "translate(155, 0)",
     );
 
     // Small lang
@@ -115,7 +115,7 @@ describe("Test renderRepoCard", () => {
 
     expect(queryByTestId(document.body, "star-fork-group")).toHaveAttribute(
       "transform",
-      "translate(125, 0)"
+      "translate(125, 0)",
     );
   });
 
@@ -135,11 +135,11 @@ describe("Test renderRepoCard", () => {
     expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
     expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
       "fill",
-      "#333"
+      "#333",
     );
 
     expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
-      "Unspecified"
+      "Unspecified",
     );
   });
 
@@ -158,7 +158,7 @@ describe("Test renderRepoCard", () => {
     expect(iconClassStyles.fill).toBe("#586069");
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#fffefe"
+      "#fffefe",
     );
   });
 
@@ -186,7 +186,7 @@ describe("Test renderRepoCard", () => {
     expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#252525"
+      "#252525",
     );
   });
 
@@ -208,7 +208,7 @@ describe("Test renderRepoCard", () => {
       expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`);
       expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
         "fill",
-        `#${themes[name].bg_color}`
+        `#${themes[name].bg_color}`,
       );
     });
   });
@@ -231,7 +231,7 @@ describe("Test renderRepoCard", () => {
     expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      `#${themes.radical.bg_color}`
+      `#${themes.radical.bg_color}`,
     );
   });
 
@@ -254,7 +254,7 @@ describe("Test renderRepoCard", () => {
     expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      `#${themes.radical.bg_color}`
+      `#${themes.radical.bg_color}`,
     );
   });
 

tests/renderStatsCard.test.js

@@ -24,11 +24,11 @@ describe("Test renderStatsCard", () => {
     document.body.innerHTML = renderStatsCard(stats);
 
     expect(document.getElementsByClassName("header")[0].textContent).toBe(
-      "Anurag Hazra's GitHub Stats"
+      "Anurag Hazra's GitHub Stats",
     );
 
     expect(
-      document.body.getElementsByTagName("svg")[0].getAttribute("height")
+      document.body.getElementsByTagName("svg")[0].getAttribute("height"),
     ).toBe("195");
     expect(getByTestId(document.body, "stars").textContent).toBe("100");
     expect(getByTestId(document.body, "commits").textContent).toBe("200");
@@ -43,13 +43,13 @@ describe("Test renderStatsCard", () => {
     document.body.innerHTML = renderStatsCard({ ...stats, name: "Anil Das" });
 
     expect(document.getElementsByClassName("header")[0].textContent).toBe(
-      "Anil Das' GitHub Stats"
+      "Anil Das' GitHub Stats",
     );
 
     document.body.innerHTML = renderStatsCard({ ...stats, name: "Felix" });
 
     expect(document.getElementsByClassName("header")[0].textContent).toBe(
-      "Felix' GitHub Stats"
+      "Felix' GitHub Stats",
     );
   });
 
@@ -59,7 +59,7 @@ describe("Test renderStatsCard", () => {
     });
 
     expect(
-      document.body.getElementsByTagName("svg")[0].getAttribute("height")
+      document.body.getElementsByTagName("svg")[0].getAttribute("height"),
     ).toBe("150"); // height should be 150 because we clamped it.
 
     expect(queryByTestId(document.body, "stars")).toBeDefined();
@@ -90,7 +90,7 @@ describe("Test renderStatsCard", () => {
     expect(iconClassStyles.fill).toBe("#4c71f2");
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#fffefe"
+      "#fffefe",
     );
   });
 
@@ -116,7 +116,7 @@ describe("Test renderStatsCard", () => {
     expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#252525"
+      "#252525",
     );
   });
 
@@ -138,7 +138,7 @@ describe("Test renderStatsCard", () => {
     expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      `#${themes.radical.bg_color}`
+      `#${themes.radical.bg_color}`,
     );
   });
 
@@ -160,7 +160,7 @@ describe("Test renderStatsCard", () => {
       expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`);
       expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
         "fill",
-        `#${themes[name].bg_color}`
+        `#${themes[name].bg_color}`,
       );
     });
   });
@@ -184,7 +184,7 @@ describe("Test renderStatsCard", () => {
     expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      `#${themes.radical.bg_color}`
+      `#${themes.radical.bg_color}`,
     );
   });
 
@@ -196,7 +196,7 @@ describe("Test renderStatsCard", () => {
     expect(queryAllByTestId(document.body, "icon")[0]).toBeDefined();
     expect(queryByTestId(document.body, "stars")).toBeDefined();
     expect(
-      queryByTestId(document.body, "stars").previousElementSibling // the label
+      queryByTestId(document.body, "stars").previousElementSibling, // the label
     ).toHaveAttribute("x", "25");
   });
 
@@ -206,7 +206,7 @@ describe("Test renderStatsCard", () => {
     expect(queryAllByTestId(document.body, "icon")[0]).not.toBeDefined();
     expect(queryByTestId(document.body, "stars")).toBeDefined();
     expect(
-      queryByTestId(document.body, "stars").previousElementSibling // the label
+      queryByTestId(document.body, "stars").previousElementSibling, // the label
     ).not.toHaveAttribute("x");
   });
 });

tests/renderTopLanguages.test.js

@@ -28,29 +28,29 @@ describe("Test renderTopLanguages", () => {
     document.body.innerHTML = renderTopLanguages(langs);
 
     expect(queryByTestId(document.body, "header")).toHaveTextContent(
-      "Most Used Languages"
+      "Most Used Languages",
     );
 
     expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
-      "HTML"
+      "HTML",
     );
     expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
-      "javascript"
+      "javascript",
     );
     expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
-      "css"
+      "css",
     );
     expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute(
       "width",
-      "40%"
+      "40%",
     );
     expect(queryAllByTestId(document.body, "lang-progress")[1]).toHaveAttribute(
       "width",
-      "40%"
+      "40%",
     );
     expect(queryAllByTestId(document.body, "lang-progress")[2]).toHaveAttribute(
       "width",
-      "20%"
+      "20%",
     );
   });
 
@@ -59,10 +59,10 @@ describe("Test renderTopLanguages", () => {
       hide: ["HTML"],
     });
     expect(queryAllByTestId(document.body, "lang-name")[0]).toBeInTheDocument(
-      "javascript"
+      "javascript",
     );
     expect(queryAllByTestId(document.body, "lang-name")[1]).toBeInTheDocument(
-      "css"
+      "css",
     );
     expect(queryAllByTestId(document.body, "lang-name")[2]).not.toBeDefined();
 
@@ -71,7 +71,7 @@ describe("Test renderTopLanguages", () => {
       hide: ["HTML", "css"],
     });
     expect(queryAllByTestId(document.body, "lang-name")[0]).toBeInTheDocument(
-      "javascript"
+      "javascript",
     );
     expect(queryAllByTestId(document.body, "lang-name")[1]).not.toBeDefined();
   });
@@ -89,7 +89,7 @@ describe("Test renderTopLanguages", () => {
           size: 100,
         },
       },
-      {}
+      {},
     );
     expect(document.querySelector("svg")).toHaveAttribute("height", "245");
   });
@@ -116,7 +116,7 @@ describe("Test renderTopLanguages", () => {
     expect(langNameStyles.fill).toBe("#333");
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#fffefe"
+      "#fffefe",
     );
   });
 
@@ -140,7 +140,7 @@ describe("Test renderTopLanguages", () => {
     expect(langNameStyles.fill).toBe(`#${customColors.text_color}`);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      "#252525"
+      "#252525",
     );
   });
 
@@ -160,7 +160,7 @@ describe("Test renderTopLanguages", () => {
     expect(langNameStyles.fill).toBe(`#${themes.radical.text_color}`);
     expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
-      `#${themes.radical.bg_color}`
+      `#${themes.radical.bg_color}`,
     );
   });
 
@@ -180,7 +180,7 @@ describe("Test renderTopLanguages", () => {
       expect(langNameStyles.fill).toBe(`#${themes[name].text_color}`);
       expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
         "fill",
-        `#${themes[name].bg_color}`
+        `#${themes[name].bg_color}`,
       );
     });
   });
@@ -189,31 +189,31 @@ describe("Test renderTopLanguages", () => {
     document.body.innerHTML = renderTopLanguages(langs, { layout: "compact" });
 
     expect(queryByTestId(document.body, "header")).toHaveTextContent(
-      "Most Used Languages"
+      "Most Used Languages",
     );
 
     expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
-      "HTML 40.00%"
+      "HTML 40.00%",
     );
     expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute(
       "width",
-      "120.00"
+      "120.00",
     );
 
     expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
-      "javascript 40.00%"
+      "javascript 40.00%",
     );
     expect(queryAllByTestId(document.body, "lang-progress")[1]).toHaveAttribute(
       "width",
-      "120.00"
+      "120.00",
     );
 
     expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
-      "css 20.00%"
+      "css 20.00%",
     );
     expect(queryAllByTestId(document.body, "lang-progress")[2]).toHaveAttribute(
       "width",
-      "60.00"
+      "60.00",
     );
   });
 });

tests/retryer.test.js

@@ -9,7 +9,7 @@ const fetcher = jest.fn((variables, token) => {
 
 const fetcherFail = jest.fn(() => {
   return new Promise((res, rej) =>
-    res({ data: { errors: [{ type: "RATE_LIMITED" }] } })
+    res({ data: { errors: [{ type: "RATE_LIMITED" }] } }),
   );
 });
 

tests/top-langs.test.js

@@ -118,7 +118,7 @@ describe("Test /api/top-langs", () => {
         icon_color: "fff",
         text_color: "fff",
         bg_color: "fff",
-      })
+      }),
     );
   });
 

tests/utils.test.js

@@ -23,24 +23,24 @@ describe("Test utils.js", () => {
 
   it("should test encodeHTML", () => {
     expect(encodeHTML(`<html>hello world<,.#4^&^@%!))`)).toBe(
-      "&#60;html&#62;hello world&#60;,.#4^&#38;^@%!))"
+      "&#60;html&#62;hello world&#60;,.#4^&#38;^@%!))",
     );
   });
 
   it("should test renderError", () => {
     document.body.innerHTML = renderError("Something went wrong");
     expect(
-      queryByTestId(document.body, "message").children[0]
+      queryByTestId(document.body, "message").children[0],
     ).toHaveTextContent(/Something went wrong/gim);
     expect(queryByTestId(document.body, "message").children[1]).toBeEmpty(2);
 
     // Secondary message
     document.body.innerHTML = renderError(
       "Something went wrong",
-      "Secondary Message"
+      "Secondary Message",
     );
     expect(
-      queryByTestId(document.body, "message").children[1]
+      queryByTestId(document.body, "message").children[1],
     ).toHaveTextContent(/Secondary Message/gim);
   });
 
@@ -51,7 +51,7 @@ describe("Test utils.js", () => {
     }).join("");
 
     expect(layout).toBe(
-      `<g transform=\"translate(0, 0)\"><text>1</text></g><g transform=\"translate(60, 0)\"><text>2</text></g>`
+      `<g transform=\"translate(0, 0)\"><text>1</text></g><g transform=\"translate(60, 0)\"><text>2</text></g>`,
     );
 
     const columns = FlexLayout({
@@ -61,7 +61,7 @@ describe("Test utils.js", () => {
     }).join("");
 
     expect(columns).toBe(
-      `<g transform=\"translate(0, 0)\"><text>1</text></g><g transform=\"translate(0, 60)\"><text>2</text></g>`
+      `<g transform=\"translate(0, 0)\"><text>1</text></g><g transform=\"translate(0, 60)\"><text>2</text></g>`,
     );
   });
 
@@ -121,7 +121,7 @@ describe("wrapTextMultiline", () => {
     let multiLineText = wrapTextMultiline(
       "Hello world long long long text",
       20,
-      3
+      3,
     );
     expect(multiLineText).toEqual(["Hello world long", "long long text"]);
   });
@@ -129,7 +129,7 @@ describe("wrapTextMultiline", () => {
     let multiLineText = wrapTextMultiline(
       "Hello world long long long text",
       10,
-      2
+      2,
     );
     expect(multiLineText).toEqual(["Hello", "world long..."]);
   });

themes/index.js

@@ -89,7 +89,7 @@ const themes = {
     text_color: "273849",
     bg_color: "fffefe",
   },
-  'vue-dark': {
+  "vue-dark": {
     title_color: "41b883",
     icon_color: "41b883",
     text_color: "fffefe",
@@ -161,13 +161,13 @@ const themes = {
     text_color: "fff",
     bg_color: "000",
   },
-  "nord": {
+  nord: {
     title_color: "81a1c1",
     text_color: "d8dee9",
     icon_color: "88c0d0",
     bg_color: "2e3440",
   },
-  "gotham": {
+  gotham: {
     title_color: "2aa889",
     icon_color: "599cab",
     text_color: "99d1ce",
@@ -179,7 +179,7 @@ const themes = {
     text_color: "a6accd",
     bg_color: "292d3e",
   },
-  "graywhite": {
+  graywhite: {
     title_color: "24292e",
     icon_color: "24292e",
     text_color: "24292e",