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>
2024-11-27 05:30:32 +08:00 · 2020-09-24 18:08:14 +02:00 · 2020-09-24 18:08:14 +02:00 · 8aea1e3c35
commit 8aea1e3c35
parent 3c6c142c75
35 changed files with 152 additions and 134 deletions
--- a/.github/FUNDING.yml
+++ b/.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']
--- a/.github/workflows/test.yml
+++ b/.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-

--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,5 @@
+node_modules
+*.json
+*.md
+coverage
+.vercel
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "useTabs": false,
+  "endOfLine": "auto",
+  "proseWrap": "always"
+}
--- a/api/index.js
+++ b/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));
--- a/api/pin.js
+++ b/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));
--- a/api/top-langs.js
+++ b/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));
--- a/api/wakatime.js
+++ b/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));
--- a/readme.md
+++ b/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)_

--- a/scripts/generate-theme-doc.js
+++ b/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) {
--- a/scripts/preview-theme.js
+++ b/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];
--- a/src/cards/repo-card.js
+++ b/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} }
--- a/src/cards/stats-card.js
+++ b/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
--- a/src/cards/wakatime-card.js
+++ b/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(`
--- a/src/common/retryer.js
+++ b/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
--- a/src/common/utils.js
+++ b/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 };
--- a/src/fetchers/repo-fetcher.js
+++ b/src/fetchers/repo-fetcher.js
@ -39,7 +39,7 @@ const fetcher = (variables, token) => {
    },
    {
      Authorization: `bearer ${token}`,
-    }
+    },
  );
 };

--- a/src/fetchers/stats-fetcher.js
+++ b/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,
    );
  }

--- a/src/fetchers/top-languages-fetcher.js
+++ b/src/fetchers/top-languages-fetcher.js
@ -29,7 +29,7 @@ const fetcher = (variables, token) => {
    },
    {
      Authorization: `bearer ${token}`,
-    }
+    },
  );
 };

--- a/src/fetchers/wakatime-fetcher.js
+++ b/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;
--- a/tests/api.test.js
+++ b/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,
          }),
        },
-        {}
-      )
+        {},
+      ),
    );
  });
 });
--- a/tests/calculateRank.test.js
+++ b/tests/calculateRank.test.js
@ -12,7 +12,7 @@ describe("Test calculateRank", () => {
        stargazers: 400,
        prs: 300,
        issues: 200,
-      })
+      }),
    ).toStrictEqual({ level: "A+", score: 49.16605417270399 });
  });
 });
--- a/tests/card.test.js
+++ b/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");
  });
 });
--- a/tests/fetchRepo.test.js
+++ b/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",
    );
  });
 });
--- a/tests/fetchStats.test.js
+++ b/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'.",
    );
  });

--- a/tests/fetchTopLanguages.test.js
+++ b/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'.",
    );
  });
 });
--- a/tests/fetchWakatime.test.js
+++ b/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",
    );
  });
 });
--- a/tests/pin.test.js
+++ b/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"),
    );
  });
 });
--- a/tests/renderRepoCard.test.js
+++ b/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}`,
    );
  });

--- a/tests/renderStatsCard.test.js
+++ b/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");
  });
 });
--- a/tests/renderTopLanguages.test.js
+++ b/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",
    );
  });
 });
--- a/tests/retryer.test.js
+++ b/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" }] } }),
  );
 });

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

--- a/tests/utils.test.js
+++ b/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..."]);
  });
--- a/themes/index.js
+++ b/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",
@ -197,7 +197,7 @@ const themes = {
    text_color: "c7c8c2",
    bg_color: "1f2430",
  },
-  "midnight-purple":{
+  "midnight-purple": {
    title_color: "9745f5",
    icon_color: "9f4bff",
    text_color: "ffffff",