extract "core" package, small improvements (#137)

This PR mainly refactors the code by extracting a "core" package which
is then used by the "backend" and "frontend" apps.

Apart from this the PR also contains several smaller changes like fixing
dependabot, upgrading dependencies, aligned "package.json" files, added
tests, ...

addresses step 1 of #32 
closes #136

---------

Co-authored-by: Marco Pasqualetti <marco.pasqualetti@live.com>

packages/core/codecov.yml

@@ -0,0 +1,13 @@
+codecov:
+  require_ci_to_pass: yes
+
+coverage:
+  precision: 2
+  round: down
+  range: "70...100"
+
+  status:
+    project:
+      default:
+        threshold: 5
+    patch: false

packages/core/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@stats-organization/github-readme-stats-core",
+  "version": "2.0.0",
+  "type": "module",
+  "homepage": "https://github-stats-extended.vercel.app/frontend",
+  "bugs": {
+    "url": "https://github.com/stats-organization/github-stats-extended/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stats-organization/github-stats-extended.git",
+    "directory": "packages/core"
+  },
+  "author": {
+    "name": "Anurag Hazra",
+    "url": "https://github.com/anuraghazra/"
+  },
+  "contributors": [
+    {
+      "name": "Rick Staa",
+      "url": "https://github.com/rickstaa"
+    },
+    {
+      "name": "Alexandr Garbuzov",
+      "url": "https://github.com/qwerty541"
+    },
+    {
+      "name": "Abhijit Gupta",
+      "url": "https://github.com/avgupta456"
+    },
+    {
+      "name": "Marco Pasqualetti",
+      "url": "https://github.com/marcalexiei"
+    },
+    {
+      "name": "martin-mfg",
+      "url": "https://github.com/martin-mfg"
+    }
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": "24.x"
+  },
+  "description": "Dynamically generate stats for your GitHub readme",
+  "keywords": [
+    "github-readme-stats",
+    "readme-stats",
+    "cards",
+    "card-generator",
+    "github-stats",
+    "github-stats-extended",
+    "github-readme-stats-extended"
+  ],
+  "main": "./build/index.js",
+  "exports": {
+    ".": {
+      "@stats/source": "./src/index.ts",
+      "default": "./build/index.js"
+    }
+  },
+  "files": [
+    "build",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest",
+    "test:update:snapshot": "vitest -u",
+    "test:e2e": "vitest --config vitest.config.e2e.ts",
+    "bench": "vitest bench --run --config vitest.config.bench.ts",
+    "lint": "eslint",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "theme-readme-gen": "node scripts/generate-theme-doc",
+    "generate-langs-json": "node scripts/generate-langs-json"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@uppercod/css-to-object": "1.1.1",
+    "axios-mock-adapter": "2.1.0",
+    "js-yaml": "4.1.1",
+    "jsdom": "28.1.0",
+    "vitest": "catalog:default"
+  },
+  "dependencies": {
+    "axios": "^1.13.5",
+    "emoji-name-map": "^2.0.3",
+    "github-username-regex": "^1.0.0",
+    "word-wrap": "^1.2.5"
+  }
+}

packages/core/scripts/generate-langs-json.js

@@ -0,0 +1,30 @@
+import fs from "fs";
+
+import axios from "axios";
+import { default as jsYaml } from "js-yaml";
+import * as prettier from "prettier";
+
+const LANGS_FILEPATH = "./src/common/languageColors.json";
+
+// Retrieve languages from github linguist repository yaml file
+const response = await axios.get(
+  "https://raw.githubusercontent.com/github/linguist/master/lib/linguist/languages.yml",
+);
+
+// and convert them to a JS Object
+const languages = jsYaml.load(response.data);
+
+const languageColors = {};
+
+// Filter only language colors from the whole file
+Object.keys(languages).forEach((lang) => {
+  languageColors[lang] = languages[lang].color;
+});
+
+// Debug Print
+// console.dir(languageColors);
+const jsonString = JSON.stringify(languageColors);
+fs.writeFileSync(
+  LANGS_FILEPATH,
+  await prettier.format(jsonString, { parser: "json" }),
+);

packages/core/scripts/generate-theme-doc.js

@@ -0,0 +1,106 @@
+import fs from "fs";
+
+import { themes } from "../src/themes/index.js";
+
+const TARGET_FILE = "./src/themes/README.md";
+const REPO_CARD_LINKS_FLAG = "<!-- REPO_CARD_LINKS -->";
+const STAT_CARD_LINKS_FLAG = "<!-- STATS_CARD_LINKS -->";
+
+const STAT_CARD_TABLE_FLAG = "<!-- STATS_CARD_TABLE -->";
+const REPO_CARD_TABLE_FLAG = "<!-- REPO_CARD_TABLE -->";
+
+const THEME_TEMPLATE = `## Available Themes
+
+<!-- DO NOT EDIT THIS FILE DIRECTLY -->
+
+With inbuilt themes, you can customize the look of the card without doing any manual customization.
+
+Use \`?theme=THEME_NAME\` parameter like so:
+
+\`\`\`md
+![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&theme=dark&show_icons=true)
+\`\`\`
+
+## Stats
+
+> These themes work with all five of our cards: Stats Card, Repo Card, Gist Card, Top Languages Card, and WakaTime Card.
+
+| | | |
+| :--: | :--: | :--: |
+${STAT_CARD_TABLE_FLAG}
+
+## Repo Card
+
+> These themes work with all five of our cards: Stats Card, Repo Card, Gist Card, Top Languages Card, and WakaTime Card.
+
+| | | |
+| :--: | :--: | :--: |
+${REPO_CARD_TABLE_FLAG}
+
+${STAT_CARD_LINKS_FLAG}
+
+${REPO_CARD_LINKS_FLAG}
+`;
+
+const createRepoMdLink = (theme) => {
+  return `\n[${theme}_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=${theme}`;
+};
+const createStatMdLink = (theme) => {
+  return `\n[${theme}]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=${theme}`;
+};
+
+const generateLinks = (fn) => {
+  return Object.keys(themes)
+    .map((name) => fn(name))
+    .join("");
+};
+
+const createTableItem = ({ link, label, isRepoCard }) => {
+  if (!link || !label) {
+    return "";
+  }
+  return `\`${label}\` ![${link}][${link}${isRepoCard ? "_repo" : ""}]`;
+};
+
+const generateTable = ({ isRepoCard }) => {
+  const rows = [];
+  const themesFiltered = Object.keys(themes).filter(
+    (name) => name !== (isRepoCard ? "default" : "default_repocard"),
+  );
+
+  for (let i = 0; i < themesFiltered.length; i += 3) {
+    const one = themesFiltered[i];
+    const two = themesFiltered[i + 1];
+    const three = themesFiltered[i + 2];
+
+    let tableItem1 = createTableItem({ link: one, label: one, isRepoCard });
+    let tableItem2 = createTableItem({ link: two, label: two, isRepoCard });
+    let tableItem3 = createTableItem({ link: three, label: three, isRepoCard });
+
+    rows.push(`| ${tableItem1} | ${tableItem2} | ${tableItem3} |`);
+  }
+
+  return rows.join("\n");
+};
+
+const buildReadme = () => {
+  return THEME_TEMPLATE.split("\n")
+    .map((line) => {
+      if (line.includes(REPO_CARD_LINKS_FLAG)) {
+        return generateLinks(createRepoMdLink);
+      }
+      if (line.includes(STAT_CARD_LINKS_FLAG)) {
+        return generateLinks(createStatMdLink);
+      }
+      if (line.includes(REPO_CARD_TABLE_FLAG)) {
+        return generateTable({ isRepoCard: true });
+      }
+      if (line.includes(STAT_CARD_TABLE_FLAG)) {
+        return generateTable({ isRepoCard: false });
+      }
+      return line;
+    })
+    .join("\n");
+};
+
+fs.writeFileSync(TARGET_FILE, buildReadme());

packages/core/src/api/gist.js

@@ -0,0 +1,97 @@
+// @ts-check
+
+import { renderGistCard } from "../cards/gist.js";
+import {
+  MissingParamError,
+  retrieveSecondaryMessage,
+} from "../common/error.js";
+import { parseBoolean } from "../common/ops.js";
+import { renderError } from "../common/render.js";
+import { fetchGist } from "../fetchers/gist.js";
+import { isLocaleAvailable } from "../translations.js";
+
+// @ts-ignore
+export default async (
+  {
+    id,
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme,
+    locale,
+    border_radius,
+    border_color,
+    show_owner,
+    hide_border,
+  },
+  pat = null,
+) => {
+  if (locale && !isLocaleAvailable(locale)) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage: "Language not found",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  try {
+    const gistData = await fetchGist(id, pat);
+
+    return {
+      status: "success",
+      content: renderGistCard(gistData, {
+        title_color,
+        icon_color,
+        text_color,
+        bg_color,
+        theme,
+        border_radius,
+        border_color,
+        locale: locale ? locale.toLowerCase() : null,
+        show_owner: parseBoolean(show_owner),
+        hide_border: parseBoolean(hide_border),
+      }),
+    };
+  } catch (err) {
+    if (err instanceof Error) {
+      return {
+        status: "error - temporary",
+        content: renderError({
+          message: err.message,
+          secondaryMessage: retrieveSecondaryMessage(err),
+          renderOptions: {
+            title_color,
+            text_color,
+            bg_color,
+            border_color,
+            theme,
+            show_repo_link: !(err instanceof MissingParamError),
+          },
+        }),
+      };
+    }
+    return {
+      status: "error - temporary",
+      content: renderError({
+        message: "An unknown error occurred",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+};

packages/core/src/api/index.js

@@ -0,0 +1,185 @@
+// @ts-check
+
+import { renderStatsCard } from "../cards/stats.js";
+import {
+  MissingParamError,
+  retrieveSecondaryMessage,
+} from "../common/error.js";
+import { parseArray, parseBoolean } from "../common/ops.js";
+import { renderError } from "../common/render.js";
+import { fetchStats } from "../fetchers/stats.js";
+import { isLocaleAvailable } from "../translations.js";
+
+// @ts-ignore
+export default async (
+  {
+    username,
+    repo,
+    owner,
+    hide,
+    hide_title,
+    hide_border,
+    card_width,
+    hide_rank,
+    show_icons,
+    include_all_commits,
+    commits_year,
+    line_height,
+    title_color,
+    ring_color,
+    icon_color,
+    text_color,
+    text_bold,
+    bg_color,
+    theme,
+    exclude_repo,
+    custom_title,
+    locale,
+    disable_animations,
+    border_radius,
+    number_format,
+    role,
+    number_precision,
+    border_color,
+    rank_icon,
+    show,
+  },
+  pat = null,
+) => {
+  if (locale && !isLocaleAvailable(locale)) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage: "Language not found",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  const safePattern = /^[-\w/.,]+$/;
+  if (
+    (username && !safePattern.test(username)) ||
+    (repo && !safePattern.test(repo)) ||
+    (owner && !safePattern.test(owner))
+  ) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage:
+          "Username, repository or owner contains unsafe characters",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  try {
+    const showStats = parseArray(show);
+    const repoOwner = parseArray(owner);
+    let repository = parseArray(repo);
+    repository = repository.map((repo) =>
+      repo.includes("/") ? repo : `${username}/${repo}`,
+    );
+
+    const stats = await fetchStats(
+      username,
+      parseBoolean(include_all_commits),
+      parseArray(exclude_repo),
+      showStats.includes("prs_merged") ||
+        showStats.includes("prs_merged_percentage"),
+      showStats.includes("discussions_started"),
+      showStats.includes("discussions_answered"),
+      parseInt(commits_year, 10),
+      repository,
+      repoOwner,
+      showStats.includes("prs_authored"),
+      showStats.includes("prs_commented"),
+      showStats.includes("prs_reviewed"),
+      showStats.includes("issues_authored"),
+      showStats.includes("issues_commented"),
+      parseArray(role),
+      pat,
+    );
+
+    return {
+      status: "success",
+      content: renderStatsCard(
+        stats,
+        {
+          hide: parseArray(hide),
+          show_icons: parseBoolean(show_icons),
+          hide_title: parseBoolean(hide_title),
+          hide_border: parseBoolean(hide_border),
+          card_width: parseInt(card_width, 10),
+          hide_rank: parseBoolean(hide_rank),
+          include_all_commits: parseBoolean(include_all_commits),
+          commits_year: parseInt(commits_year, 10),
+          line_height,
+          title_color,
+          ring_color,
+          icon_color,
+          text_color,
+          text_bold: parseBoolean(text_bold),
+          bg_color,
+          theme,
+          custom_title,
+          border_radius,
+          border_color,
+          number_format,
+          number_precision: parseInt(number_precision, 10),
+          locale: locale ? locale.toLowerCase() : null,
+          disable_animations: parseBoolean(disable_animations),
+          rank_icon,
+          show: showStats,
+        },
+        username,
+        repository,
+        repoOwner,
+      ),
+    };
+  } catch (err) {
+    if (err instanceof Error) {
+      return {
+        status: "error - temporary",
+        content: renderError({
+          message: err.message,
+          secondaryMessage: retrieveSecondaryMessage(err),
+          renderOptions: {
+            title_color,
+            text_color,
+            bg_color,
+            border_color,
+            theme,
+            show_repo_link: !(err instanceof MissingParamError),
+          },
+        }),
+      };
+    }
+    return {
+      status: "error - temporary",
+      content: renderError({
+        message: "An unknown error occurred",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+};

packages/core/src/api/pin.js

@@ -0,0 +1,144 @@
+// @ts-check
+
+import { renderRepoCard } from "../cards/repo.js";
+import {
+  MissingParamError,
+  retrieveSecondaryMessage,
+} from "../common/error.js";
+import { parseArray, parseBoolean } from "../common/ops.js";
+import { renderError } from "../common/render.js";
+import { fetchRepo } from "../fetchers/repo.js";
+import { isLocaleAvailable } from "../translations.js";
+
+// @ts-ignore
+export default async (
+  {
+    username,
+    repo,
+    hide_border,
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    card_width,
+    theme,
+    show_owner,
+    show,
+    show_icons,
+    number_format,
+    text_bold,
+    line_height,
+    locale,
+    border_radius,
+    border_color,
+    description_lines_count,
+  },
+  pat = null,
+) => {
+  if (locale && !isLocaleAvailable(locale)) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage: "Language not found",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  const safePattern = /^[-\w/.,]+$/;
+  if (
+    (username && !safePattern.test(username)) ||
+    (repo && !safePattern.test(repo))
+  ) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage: "Username or repository contains unsafe characters",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  try {
+    const showStats = parseArray(show);
+    const repoData = await fetchRepo(
+      username,
+      repo,
+      showStats.includes("prs_authored"),
+      showStats.includes("prs_commented"),
+      showStats.includes("prs_reviewed"),
+      showStats.includes("issues_authored"),
+      showStats.includes("issues_commented"),
+      pat,
+    );
+
+    return {
+      status: "success",
+      content: renderRepoCard(repoData, {
+        hide_border: parseBoolean(hide_border),
+        title_color,
+        icon_color,
+        text_color,
+        bg_color,
+        theme,
+        border_radius,
+        border_color,
+        card_width_input: parseInt(card_width, 10),
+        show_owner: parseBoolean(show_owner),
+        show: showStats,
+        show_icons: parseBoolean(show_icons),
+        number_format,
+        text_bold: parseBoolean(text_bold),
+        line_height,
+        username,
+        locale: locale ? locale.toLowerCase() : null,
+        description_lines_count,
+      }),
+    };
+  } catch (err) {
+    if (err instanceof Error) {
+      return {
+        status: "error - temporary",
+        content: renderError({
+          message: err.message,
+          secondaryMessage: retrieveSecondaryMessage(err),
+          renderOptions: {
+            title_color,
+            text_color,
+            bg_color,
+            border_color,
+            theme,
+            show_repo_link: !(err instanceof MissingParamError),
+          },
+        }),
+      };
+    }
+    return {
+      status: "error - temporary",
+      content: renderError({
+        message: "An unknown error occurred",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+};

packages/core/src/api/top-langs.js

@@ -0,0 +1,166 @@
+// @ts-check
+
+import { renderTopLanguages } from "../cards/top-languages.js";
+import {
+  MissingParamError,
+  retrieveSecondaryMessage,
+} from "../common/error.js";
+import { parseArray, parseBoolean } from "../common/ops.js";
+import { renderError } from "../common/render.js";
+import { fetchTopLanguages } from "../fetchers/top-languages.js";
+import { isLocaleAvailable } from "../translations.js";
+
+// @ts-ignore
+export default async (
+  {
+    username,
+    hide,
+    hide_title,
+    hide_border,
+    card_width,
+    title_color,
+    text_color,
+    bg_color,
+    prog_bar_bg_color,
+    theme,
+    layout,
+    langs_count,
+    exclude_repo,
+    size_weight,
+    count_weight,
+    custom_title,
+    locale,
+    border_radius,
+    border_color,
+    role,
+    disable_animations,
+    hide_progress,
+    stats_format,
+  },
+  pat = null,
+) => {
+  if (locale && !isLocaleAvailable(locale)) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage: "Locale not found",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  if (
+    layout !== undefined &&
+    (typeof layout !== "string" ||
+      !["compact", "normal", "donut", "donut-vertical", "pie"].includes(layout))
+  ) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage: "Incorrect layout input",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  if (
+    stats_format !== undefined &&
+    (typeof stats_format !== "string" ||
+      !["bytes", "percentages"].includes(stats_format))
+  ) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage: "Incorrect stats_format input",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  try {
+    const topLangs = await fetchTopLanguages(
+      username,
+      parseArray(exclude_repo),
+      size_weight,
+      count_weight,
+      parseArray(role),
+      pat,
+    );
+
+    return {
+      status: "success",
+      content: renderTopLanguages(topLangs, {
+        custom_title,
+        hide_title: parseBoolean(hide_title),
+        hide_border: parseBoolean(hide_border),
+        card_width: parseInt(card_width, 10),
+        hide: parseArray(hide),
+        title_color,
+        text_color,
+        bg_color,
+        prog_bar_bg_color,
+        theme,
+        layout,
+        langs_count,
+        border_radius,
+        border_color,
+        locale: locale ? locale.toLowerCase() : null,
+        disable_animations: parseBoolean(disable_animations),
+        hide_progress: parseBoolean(hide_progress),
+        stats_format,
+      }),
+    };
+  } catch (err) {
+    if (err instanceof Error) {
+      return {
+        status: "error - temporary",
+        content: renderError({
+          message: err.message,
+          secondaryMessage: retrieveSecondaryMessage(err),
+          renderOptions: {
+            title_color,
+            text_color,
+            bg_color,
+            border_color,
+            theme,
+            show_repo_link: !(err instanceof MissingParamError),
+          },
+        }),
+      };
+    }
+    return {
+      status: "error - temporary",
+      content: renderError({
+        message: "An unknown error occurred",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+};

packages/core/src/api/wakatime.js

@@ -0,0 +1,113 @@
+// @ts-check
+
+import { renderWakatimeCard } from "../cards/wakatime.js";
+import {
+  MissingParamError,
+  retrieveSecondaryMessage,
+} from "../common/error.js";
+import { parseArray, parseBoolean } from "../common/ops.js";
+import { renderError } from "../common/render.js";
+import { fetchWakatimeStats } from "../fetchers/wakatime.js";
+import { isLocaleAvailable } from "../translations.js";
+
+// @ts-ignore
+export default async ({
+  username,
+  title_color,
+  icon_color,
+  hide_border,
+  card_width,
+  line_height,
+  text_color,
+  bg_color,
+  theme,
+  hide_title,
+  hide_progress,
+  custom_title,
+  locale,
+  layout,
+  langs_count,
+  hide,
+  api_domain,
+  border_radius,
+  border_color,
+  display_format,
+  disable_animations,
+}) => {
+  if (locale && !isLocaleAvailable(locale)) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage: "Language not found",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  try {
+    const stats = await fetchWakatimeStats({ username, api_domain });
+
+    return {
+      status: "success",
+      content: renderWakatimeCard(stats, {
+        custom_title,
+        hide_title: parseBoolean(hide_title),
+        hide_border: parseBoolean(hide_border),
+        card_width: parseInt(card_width, 10),
+        hide: parseArray(hide),
+        line_height,
+        title_color,
+        icon_color,
+        text_color,
+        bg_color,
+        theme,
+        hide_progress,
+        border_radius,
+        border_color,
+        locale: locale ? locale.toLowerCase() : null,
+        layout,
+        langs_count,
+        display_format,
+        disable_animations: parseBoolean(disable_animations),
+      }),
+    };
+  } catch (err) {
+    if (err instanceof Error) {
+      return {
+        status: "error - temporary",
+        content: renderError({
+          message: err.message,
+          secondaryMessage: retrieveSecondaryMessage(err),
+          renderOptions: {
+            title_color,
+            text_color,
+            bg_color,
+            border_color,
+            theme,
+            show_repo_link: !(err instanceof MissingParamError),
+          },
+        }),
+      };
+    }
+    return {
+      status: "error - temporary",
+      content: renderError({
+        message: "An unknown error occurred",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+};

packages/core/src/calculateRank.js

@@ -0,0 +1,86 @@
+/**
+ * Calculates the exponential cdf.
+ *
+ * @param {number} x The value.
+ * @returns {number} The exponential cdf.
+ */
+function exponential_cdf(x) {
+  return 1 - 2 ** -x;
+}
+
+/**
+ * Calculates the log normal cdf.
+ *
+ * @param {number} x The value.
+ * @returns {number} The log normal cdf.
+ */
+function log_normal_cdf(x) {
+  // approximation
+  return x / (1 + x);
+}
+
+/**
+ * Calculates the users rank.
+ *
+ * @param {object} params Parameters on which the user's rank depends.
+ * @param {boolean} params.all_commits Whether `include_all_commits` was used.
+ * @param {number} params.commits Number of commits.
+ * @param {number} params.prs The number of pull requests.
+ * @param {number} params.issues The number of issues.
+ * @param {number} params.reviews The number of reviews.
+ * @param {number} params.repos Total number of repos.
+ * @param {number} params.stars The number of stars.
+ * @param {number} params.followers The number of followers.
+ * @returns {{ level: string, percentile: number }} The users rank.
+ */
+function calculateRank({
+  all_commits,
+  commits,
+  prs,
+  issues,
+  reviews,
+  // eslint-disable-next-line no-unused-vars
+  repos, // unused
+  stars,
+  followers,
+}) {
+  const COMMITS_MEDIAN = all_commits ? 1000 : 250,
+    COMMITS_WEIGHT = 2;
+  const PRS_MEDIAN = 50,
+    PRS_WEIGHT = 3;
+  const ISSUES_MEDIAN = 25,
+    ISSUES_WEIGHT = 1;
+  const REVIEWS_MEDIAN = 2,
+    REVIEWS_WEIGHT = 1;
+  const STARS_MEDIAN = 50,
+    STARS_WEIGHT = 4;
+  const FOLLOWERS_MEDIAN = 10,
+    FOLLOWERS_WEIGHT = 1;
+
+  const TOTAL_WEIGHT =
+    COMMITS_WEIGHT +
+    PRS_WEIGHT +
+    ISSUES_WEIGHT +
+    REVIEWS_WEIGHT +
+    STARS_WEIGHT +
+    FOLLOWERS_WEIGHT;
+
+  const THRESHOLDS = [1, 12.5, 25, 37.5, 50, 62.5, 75, 87.5, 100];
+  const LEVELS = ["S", "A+", "A", "A-", "B+", "B", "B-", "C+", "C"];
+
+  const rank =
+    1 -
+    (COMMITS_WEIGHT * exponential_cdf(commits / COMMITS_MEDIAN) +
+      PRS_WEIGHT * exponential_cdf(prs / PRS_MEDIAN) +
+      ISSUES_WEIGHT * exponential_cdf(issues / ISSUES_MEDIAN) +
+      REVIEWS_WEIGHT * exponential_cdf(reviews / REVIEWS_MEDIAN) +
+      STARS_WEIGHT * log_normal_cdf(stars / STARS_MEDIAN) +
+      FOLLOWERS_WEIGHT * log_normal_cdf(followers / FOLLOWERS_MEDIAN)) /
+      TOTAL_WEIGHT;
+
+  const level = LEVELS[THRESHOLDS.findIndex((t) => rank * 100 <= t)];
+
+  return { level, percentile: rank * 100 };
+}
+
+export { calculateRank };

packages/core/src/cards/gist.js

@@ -0,0 +1,141 @@
+// @ts-check
+
+import { default as Card } from "../common/Card.js";
+import { getCardColors } from "../common/color.js";
+import { kFormatter, wrapTextMultiline } from "../common/fmt.js";
+import { encodeHTML } from "../common/html.js";
+import { icons } from "../common/icons.js";
+import languageColors from "../common/languageColors.json" with { type: "json" };
+import { parseEmojis } from "../common/ops.js";
+import {
+  createLanguageNode,
+  flexLayout,
+  iconWithLabel,
+  measureText,
+} from "../common/render.js";
+
+const ICON_SIZE = 16;
+const CARD_DEFAULT_WIDTH = 400;
+const HEADER_MAX_LENGTH = 35;
+
+/**
+ * @typedef {import('./types').GistCardOptions} GistCardOptions Gist card options.
+ * @typedef {import('../fetchers/types').GistData} GistData Gist data.
+ */
+
+/**
+ * Render gist card.
+ *
+ * @param {GistData} gistData Gist data.
+ * @param {Partial<GistCardOptions>} options Gist card options.
+ * @returns {string} Gist card.
+ */
+const renderGistCard = (gistData, options = {}) => {
+  const { name, nameWithOwner, description, language, starsCount, forksCount } =
+    gistData;
+  const {
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme = "default_repocard",
+    border_radius,
+    border_color,
+    show_owner = false,
+    hide_border = false,
+  } = options;
+
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, textColor, iconColor, bgColor, borderColor } =
+    getCardColors({
+      title_color,
+      icon_color,
+      text_color,
+      bg_color,
+      border_color,
+      theme,
+    });
+
+  const lineWidth = 59;
+  const linesLimit = 10;
+  const desc = parseEmojis(description || "No description provided");
+  const multiLineDescription = wrapTextMultiline(desc, lineWidth, linesLimit);
+  const descriptionLines = multiLineDescription.length;
+  const descriptionSvg = multiLineDescription
+    .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
+    .join("");
+
+  const lineHeight = descriptionLines > 3 ? 12 : 10;
+  const height =
+    (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
+
+  const totalStars = kFormatter(starsCount);
+  const totalForks = kFormatter(forksCount);
+  const svgStars = iconWithLabel(
+    icons.star,
+    totalStars,
+    "starsCount",
+    ICON_SIZE,
+  );
+  const svgForks = iconWithLabel(
+    icons.fork,
+    totalForks,
+    "forksCount",
+    ICON_SIZE,
+  );
+
+  const languageName = language || "Unspecified";
+  // @ts-ignore
+  const languageColor = languageColors[languageName] || "#858585";
+
+  const svgLanguage = createLanguageNode(languageName, languageColor);
+
+  const starAndForkCount = flexLayout({
+    items: [svgLanguage, svgStars, svgForks],
+    sizes: [
+      measureText(languageName, 12),
+      ICON_SIZE + measureText(`${totalStars}`, 12),
+      ICON_SIZE + measureText(`${totalForks}`, 12),
+    ],
+    gap: 25,
+  }).join("");
+
+  const header = show_owner ? nameWithOwner : name;
+
+  const card = new Card({
+    defaultTitle:
+      header.length > HEADER_MAX_LENGTH
+        ? `${header.slice(0, HEADER_MAX_LENGTH)}...`
+        : header,
+    titlePrefixIcon: icons.gist,
+    width: CARD_DEFAULT_WIDTH,
+    height,
+    border_radius,
+    colors: {
+      titleColor,
+      textColor,
+      iconColor,
+      bgColor,
+      borderColor,
+    },
+  });
+
+  card.setCSS(`
+    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+    .icon { fill: ${iconColor} }
+  `);
+  card.setHideBorder(hide_border);
+
+  return card.render(`
+    <text class="description" x="25" y="-5">
+        ${descriptionSvg}
+    </text>
+
+    <g transform="translate(30, ${height - 75})">
+        ${starAndForkCount}
+    </g>
+  `);
+};
+
+export { renderGistCard };

packages/core/src/cards/repo.js

@@ -0,0 +1,324 @@
+// @ts-check
+
+import { Card } from "../common/Card.js";
+import { I18n } from "../common/I18n.js";
+import { getCardColors } from "../common/color.js";
+import { kFormatter, wrapTextMultiline } from "../common/fmt.js";
+import { encodeHTML } from "../common/html.js";
+import { icons } from "../common/icons.js";
+import { buildSearchFilter, clampValue, parseEmojis } from "../common/ops.js";
+import {
+  createLanguageNode,
+  flexLayout,
+  iconWithLabel,
+  measureText,
+} from "../common/render.js";
+import { repoCardLocales } from "../translations.js";
+
+import { createTextNode } from "./stats.js";
+
+const ICON_SIZE = 16;
+const DESCRIPTION_LINE_WIDTH = 59;
+const DESCRIPTION_MAX_LINES = 3;
+
+/**
+ * Retrieves the repository description and wraps it to fit the card width.
+ *
+ * @param {string} label The repository description.
+ * @param {string} textColor The color of the text.
+ * @returns {string} Wrapped repo description SVG object.
+ */
+const getBadgeSVG = (label, textColor, xOffset = 0) => `
+  <g data-testid="badge" class="badge" transform="translate(${320 + xOffset}, -18)">
+    <rect stroke="${textColor}" stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
+    <text
+      x="23" y="-5"
+      alignment-baseline="central"
+      dominant-baseline="central"
+      text-anchor="middle"
+      fill="${textColor}"
+    >
+      ${label}
+    </text>
+  </g>
+`;
+
+/**
+ * @typedef {import("../fetchers/types").RepositoryData} RepositoryData Repository data.
+ * @typedef {import("./types").RepoCardOptions} RepoCardOptions Repo card options.
+ */
+
+/**
+ * Renders repository card details.
+ *
+ * @param {RepositoryData} repo Repository data.
+ * @param {Partial<RepoCardOptions>} options Card options.
+ * @returns {string} Repository card SVG object.
+ */
+const renderRepoCard = (repo, options = {}) => {
+  const {
+    name,
+    nameWithOwner,
+    description,
+    primaryLanguage,
+    isArchived,
+    isTemplate,
+    starCount,
+    forkCount,
+    totalPRsAuthored,
+    totalPRsCommented,
+    totalPRsReviewed,
+    totalIssuesAuthored,
+    totalIssuesCommented,
+  } = repo;
+  const {
+    hide_border = false,
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    card_width_input,
+    show_owner = false,
+    show = [],
+    show_icons = true,
+    number_format = "short",
+    text_bold = false,
+    line_height = 22,
+    username,
+    theme = "default_repocard",
+    border_radius,
+    border_color,
+    locale,
+    description_lines_count,
+  } = options;
+
+  const card_width =
+    card_width_input && !isNaN(card_width_input)
+      ? card_width_input
+      : show.length >= 2
+        ? 430
+        : 400;
+
+  const i18n = new I18n({
+    locale,
+    translations: repoCardLocales,
+  });
+
+  let repoFilter = encodeURIComponent(buildSearchFilter([nameWithOwner], []));
+  const STATS = {};
+  if (show.includes("prs_authored")) {
+    STATS.prs_authored = {
+      icon: icons.prs,
+      label: i18n.t("repocard.prs-authored"),
+      value: totalPRsAuthored,
+      id: "prs_authored",
+      link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=pullrequests`,
+    };
+  }
+  if (show.includes("prs_commented")) {
+    STATS.prs_commented = {
+      icon: icons.comments,
+      label: i18n.t("repocard.prs-commented"),
+      value: totalPRsCommented,
+      id: "prs_commented",
+      link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+    };
+  }
+  if (show.includes("prs_reviewed")) {
+    STATS.prs_reviewed = {
+      icon: icons.reviews,
+      label: i18n.t("repocard.prs-reviewed"),
+      value: totalPRsReviewed,
+      id: "prs_reviewed",
+      link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+    };
+  }
+  if (show.includes("issues_authored")) {
+    STATS.issues_authored = {
+      icon: icons.issues,
+      label: i18n.t("repocard.issues-authored"),
+      value: totalIssuesAuthored,
+      id: "issues_authored",
+      link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=issues`,
+    };
+  }
+  if (show.includes("issues_commented")) {
+    STATS.issues_commented = {
+      icon: icons.discussions_started,
+      label: i18n.t("repocard.issues-commented"),
+      value: totalIssuesCommented,
+      id: "issues_commented",
+      link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=issues`,
+    };
+  }
+
+  const statItems = Object.keys(STATS).map((key, index) =>
+    // create the text nodes, and pass index so that we can calculate the line spacing
+    createTextNode({
+      icon: STATS[key].icon,
+      label: STATS[key].label,
+      value: STATS[key].value,
+      id: STATS[key].id,
+      unitSymbol: STATS[key].unitSymbol,
+      index,
+      showIcons: show_icons,
+      shiftValuePos: 14.01,
+      bold: text_bold,
+      numberFormat: number_format,
+      link: STATS[key].link,
+      labelXOffset: 23,
+    }),
+  );
+
+  const extraLHeight = parseInt(String(line_height), 10);
+  const lineHeight = 10;
+  const header = show_owner ? nameWithOwner : name;
+  const langName = (primaryLanguage && primaryLanguage.name) || "Unspecified";
+  const langColor = (primaryLanguage && primaryLanguage.color) || "#333";
+  const descriptionMaxLines = description_lines_count
+    ? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
+    : DESCRIPTION_MAX_LINES;
+
+  const desc = parseEmojis(description || "No description provided");
+  const multiLineDescription = wrapTextMultiline(
+    desc,
+    Math.round((card_width - 400) / 5.93 + DESCRIPTION_LINE_WIDTH),
+    descriptionMaxLines,
+  );
+  const descriptionLinesCount = description_lines_count
+    ? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
+    : multiLineDescription.length;
+
+  const descriptionSvg = multiLineDescription
+    .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
+    .join("");
+
+  const extraHeight = Object.keys(STATS).length
+    ? -7 + (Math.ceil(statItems.length / 2) + 1) * extraLHeight
+    : 0;
+  const height =
+    (descriptionLinesCount > 1 ? 120 : 110) +
+    descriptionLinesCount * lineHeight +
+    extraHeight;
+
+  // returns theme based colors with proper overrides and defaults
+  const colors = getCardColors({
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    border_color,
+    theme,
+  });
+
+  const svgLanguage = primaryLanguage
+    ? createLanguageNode(langName, langColor)
+    : "";
+
+  const totalStars = kFormatter(starCount);
+  const totalForks = kFormatter(forkCount);
+  const svgStars = iconWithLabel(
+    icons.star,
+    totalStars,
+    "stargazers",
+    ICON_SIZE,
+  );
+  const svgForks = iconWithLabel(
+    icons.fork,
+    totalForks,
+    "forkcount",
+    ICON_SIZE,
+  );
+
+  const starAndForkCount = flexLayout({
+    items: [svgLanguage, svgStars, svgForks],
+    sizes: [
+      measureText(langName, 12),
+      ICON_SIZE + measureText(`${totalStars}`, 12),
+      ICON_SIZE + measureText(`${totalForks}`, 12),
+    ],
+    gap: 25,
+  }).join("");
+
+  let extraRows = [];
+  for (let i = 0; i < statItems.length; i += 2) {
+    extraRows.push(
+      flexLayout({
+        items: statItems.slice(i, i + 2),
+        gap: 210,
+        direction: "row",
+      }).join(""),
+    );
+  }
+  const extraItems = `
+  <svg x="0" y="0"><g transform="translate(-3, ${height - 52 - extraHeight})">
+      ${flexLayout({
+        items: extraRows,
+        gap: extraLHeight,
+        direction: "column",
+      }).join("")}
+    </g></svg>
+    `;
+
+  const card = new Card({
+    defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header,
+    titlePrefixIcon: icons.contribs,
+    width: card_width,
+    height,
+    border_radius,
+    colors,
+  });
+
+  card.disableAnimations();
+  card.setHideBorder(hide_border);
+  card.setHideTitle(false);
+  card.setCSS(`
+    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
+    .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
+    .badge rect { opacity: 0.2 }
+    
+    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+    .icon {
+      fill: ${colors.iconColor};
+      display: block;
+    }
+  `);
+
+  return card.render(`
+    ${
+      isTemplate
+        ? // @ts-ignore
+          getBadgeSVG(
+            i18n.t("repocard.template"),
+            colors.textColor,
+            card_width - 400,
+          )
+        : isArchived
+          ? // @ts-ignore
+            getBadgeSVG(
+              i18n.t("repocard.archived"),
+              colors.textColor,
+              card_width - 400,
+            )
+          : ""
+    }
+
+    <text class="description" x="25" y="-5">
+      ${descriptionSvg}
+    </text>
+
+    <g transform="translate(30, ${height - 75 - extraHeight})">
+      ${starAndForkCount}
+    </g>
+    ${extraItems}
+  `);
+};
+
+export { renderRepoCard };

packages/core/src/cards/stats.js

@@ -0,0 +1,673 @@
+// @ts-check
+
+import { Card } from "../common/Card.js";
+import { I18n } from "../common/I18n.js";
+import { getCardColors } from "../common/color.js";
+import { CustomError } from "../common/error.js";
+import { kFormatter } from "../common/fmt.js";
+import { icons, rankIcon } from "../common/icons.js";
+import { buildSearchFilter, clampValue } from "../common/ops.js";
+import { flexLayout, measureText } from "../common/render.js";
+import { statCardLocales, wakatimeCardLocales } from "../translations.js";
+
+const CARD_MIN_WIDTH = 287;
+const CARD_DEFAULT_WIDTH = 287;
+const RANK_CARD_MIN_WIDTH = 420;
+const RANK_CARD_DEFAULT_WIDTH = 450;
+const RANK_ONLY_CARD_MIN_WIDTH = 290;
+const RANK_ONLY_CARD_DEFAULT_WIDTH = 290;
+
+/**
+ * Long locales that need more space for text. Keep sorted alphabetically.
+ *
+ * @type {(keyof typeof wakatimeCardLocales["wakatimecard.title"])[]}
+ */
+const LONG_LOCALES = [
+  "az",
+  "bg",
+  "cs",
+  "de",
+  "el",
+  "es",
+  "fil",
+  "fi",
+  "fr",
+  "hu",
+  "id",
+  "ja",
+  "ml",
+  "my",
+  "nl",
+  "pl",
+  "pt-br",
+  "pt-pt",
+  "ru",
+  "sr",
+  "sr-latn",
+  "sw",
+  "ta",
+  "uk-ua",
+  "uz",
+  "zh-tw",
+];
+
+/**
+ * Create a stats card text item.
+ *
+ * @param {object} params Object that contains the createTextNode parameters.
+ * @param {string} params.icon The icon to display.
+ * @param {string} params.label The label to display.
+ * @param {number} params.value The value to display.
+ * @param {string} params.id The id of the stat.
+ * @param {string=} params.unitSymbol The unit symbol of the stat.
+ * @param {number} params.index The index of the stat.
+ * @param {boolean} params.showIcons Whether to show icons.
+ * @param {number} params.shiftValuePos Number of pixels the value has to be shifted to the right.
+ * @param {boolean} params.bold Whether to bold the label.
+ * @param {string} params.numberFormat The format of numbers on card.
+ * @param {number=} params.numberPrecision The precision of numbers on card.
+ * @param {string} params.link Url to link to.
+ * @param {number} params.labelXOffset horizontal offset for label.
+ * @returns {string} The stats card text item SVG object.
+ */
+const createTextNode = ({
+  icon,
+  label,
+  value,
+  id,
+  unitSymbol,
+  index,
+  showIcons,
+  shiftValuePos,
+  bold,
+  numberFormat,
+  numberPrecision,
+  link,
+  labelXOffset = 25,
+}) => {
+  const precision =
+    typeof numberPrecision === "number" && !isNaN(numberPrecision)
+      ? clampValue(numberPrecision, 0, 2)
+      : undefined;
+  const kValue =
+    numberFormat.toLowerCase() === "long" || id === "prs_merged_percentage"
+      ? value
+      : kFormatter(value, precision);
+  const staggerDelay = (index + 3) * 150;
+
+  const labelOffset = showIcons ? `x="${labelXOffset}"` : "";
+  const iconSvg = showIcons
+    ? `
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      ${icon}
+    </svg>
+  `
+    : "";
+  return (
+    `
+    <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">` +
+    (link ? `<a href="${link}">` : "") +
+    `
+      ${iconSvg}
+      <text class="stat ${
+        bold ? " bold" : "not_bold"
+      }" ${labelOffset} y="12.5">${label}:</text>
+      <text
+        class="stat ${bold ? " bold" : "not_bold"}"
+        x="${(showIcons ? 140 : 120) + (bold ? 5 : 0) + shiftValuePos}"
+        y="12.5"
+        data-testid="${id}"
+      >${kValue}${unitSymbol ? ` ${unitSymbol}` : ""}</text>` +
+    (link ? "</a>" : "") +
+    `
+    </g>
+  `
+  );
+};
+
+/**
+ * Calculates progress along the boundary of the circle, i.e. its circumference.
+ *
+ * @param {number} value The rank value to calculate progress for.
+ * @returns {number} Progress value.
+ */
+const calculateCircleProgress = (value) => {
+  const radius = 40;
+  const c = Math.PI * (radius * 2);
+
+  if (value < 0) {
+    value = 0;
+  }
+  if (value > 100) {
+    value = 100;
+  }
+
+  return ((100 - value) / 100) * c;
+};
+
+/**
+ * Retrieves the animation to display progress along the circumference of circle
+ * from the beginning to the given value in a clockwise direction.
+ *
+ * @param {{progress: number}} progress The progress value to animate to.
+ * @returns {string} Progress animation css.
+ */
+const getProgressAnimation = ({ progress }) => {
+  return `
+    @keyframes rankAnimation {
+      from {
+        stroke-dashoffset: ${calculateCircleProgress(0)};
+      }
+      to {
+        stroke-dashoffset: ${calculateCircleProgress(progress)};
+      }
+    }
+  `;
+};
+
+/**
+ * Retrieves CSS styles for a card.
+ *
+ * @param {Object} colors The colors to use for the card.
+ * @param {string} colors.titleColor The title color.
+ * @param {string} colors.textColor The text color.
+ * @param {string} colors.iconColor The icon color.
+ * @param {string} colors.ringColor The ring color.
+ * @param {boolean} colors.show_icons Whether to show icons.
+ * @param {number} colors.progress The progress value to animate to.
+ * @returns {string} Card CSS styles.
+ */
+const getStyles = ({
+  // eslint-disable-next-line no-unused-vars
+  titleColor,
+  textColor,
+  iconColor,
+  ringColor,
+  show_icons,
+  progress,
+}) => {
+  return `
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .rank-text {
+      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+    .rank-percentile-header {
+      font-size: 14px;
+    }
+    .rank-percentile-text {
+      font-size: 16px;
+    }
+    
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+    .icon {
+      fill: ${iconColor};
+      display: ${show_icons ? "block" : "none"};
+    }
+
+    .rank-circle-rim {
+      stroke: ${ringColor};
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: ${ringColor};
+      stroke-dasharray: 250;
+      fill: none;
+      stroke-width: 6;
+      stroke-linecap: round;
+      opacity: 0.8;
+      transform-origin: -10px 8px;
+      transform: rotate(-90deg);
+      animation: rankAnimation 1s forwards ease-in-out;
+    }
+    ${getProgressAnimation({ progress })}
+  `;
+};
+
+/**
+ * Return the label for commits according to the selected options
+ *
+ * @param {boolean} include_all_commits Option to include all years
+ * @param {number|undefined} commits_year Option to include only selected year
+ * @param {I18n} i18n The I18n instance.
+ * @returns {string} The label corresponding to the options.
+ */
+const getTotalCommitsYearLabel = (include_all_commits, commits_year, i18n) =>
+  include_all_commits
+    ? ""
+    : commits_year
+      ? ` (${commits_year})`
+      : ` (${i18n.t("wakatimecard.lastyear")})`;
+
+/**
+ * @typedef {import('../fetchers/types').StatsData} StatsData
+ * @typedef {import('./types').StatCardOptions} StatCardOptions
+ */
+
+/**
+ * Renders the stats card.
+ *
+ * @param {StatsData} stats The stats data.
+ * @param {Partial<StatCardOptions>} options The card options.
+ * @returns {string} The stats card SVG object.
+ */
+const renderStatsCard = (
+  stats,
+  options = {},
+  username,
+  repo = [],
+  owner = [],
+) => {
+  const {
+    name,
+    totalStars,
+    totalCommits,
+    totalIssues,
+    totalPRs,
+    totalPRsMerged,
+    mergedPRsPercentage,
+    totalReviews,
+    totalDiscussionsStarted,
+    totalDiscussionsAnswered,
+    contributedTo,
+    totalPRsAuthored,
+    totalPRsCommented,
+    totalPRsReviewed,
+    totalIssuesAuthored,
+    totalIssuesCommented,
+    rank,
+  } = stats;
+  const {
+    hide = [],
+    show_icons = false,
+    hide_title = false,
+    hide_border = false,
+    card_width,
+    hide_rank = false,
+    include_all_commits = false,
+    commits_year,
+    line_height = 25,
+    title_color,
+    ring_color,
+    icon_color,
+    text_color,
+    text_bold = true,
+    bg_color,
+    theme = "default",
+    custom_title,
+    border_radius,
+    border_color,
+    number_format = "short",
+    number_precision,
+    locale,
+    disable_animations = false,
+    rank_icon = "default",
+    show = [],
+  } = options;
+
+  const lheight = parseInt(String(line_height), 10);
+
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, iconColor, textColor, bgColor, borderColor, ringColor } =
+    getCardColors({
+      title_color,
+      text_color,
+      icon_color,
+      bg_color,
+      border_color,
+      ring_color,
+      theme,
+    });
+
+  const apostrophe = /s$/i.test(name.trim()) ? "" : "s";
+  const i18n = new I18n({
+    locale,
+    translations: {
+      ...statCardLocales({ name, apostrophe }),
+      ...wakatimeCardLocales,
+    },
+  });
+
+  // Meta data for creating text nodes with createTextNode function
+  const STATS = {};
+
+  STATS.stars = {
+    icon: icons.star,
+    label: i18n.t("statcard.totalstars"),
+    value: totalStars,
+    id: "stars",
+  };
+  STATS.commits = {
+    icon: icons.commits,
+    label: `${i18n.t("statcard.commits")}${getTotalCommitsYearLabel(
+      include_all_commits,
+      commits_year,
+      i18n,
+    )}`,
+    value: totalCommits,
+    id: "commits",
+  };
+  STATS.prs = {
+    icon: icons.prs,
+    label: i18n.t("statcard.prs"),
+    value: totalPRs,
+    id: "prs",
+  };
+
+  if (show.includes("prs_merged")) {
+    STATS.prs_merged = {
+      icon: icons.prs_merged,
+      label: i18n.t("statcard.prs-merged"),
+      value: totalPRsMerged,
+      id: "prs_merged",
+    };
+  }
+
+  if (show.includes("prs_merged_percentage")) {
+    STATS.prs_merged_percentage = {
+      icon: icons.prs_merged_percentage,
+      label: i18n.t("statcard.prs-merged-percentage"),
+      value: mergedPRsPercentage.toFixed(
+        typeof number_precision === "number" && !isNaN(number_precision)
+          ? clampValue(number_precision, 0, 2)
+          : 2,
+      ),
+      id: "prs_merged_percentage",
+      unitSymbol: "%",
+    };
+  }
+
+  if (show.includes("reviews")) {
+    STATS.reviews = {
+      icon: icons.reviews,
+      label: i18n.t("statcard.reviews"),
+      value: totalReviews,
+      id: "reviews",
+    };
+  }
+
+  STATS.issues = {
+    icon: icons.issues,
+    label: i18n.t("statcard.issues"),
+    value: totalIssues,
+    id: "issues",
+  };
+
+  if (show.includes("discussions_started")) {
+    STATS.discussions_started = {
+      icon: icons.discussions_started,
+      label: i18n.t("statcard.discussions-started"),
+      value: totalDiscussionsStarted,
+      id: "discussions_started",
+    };
+  }
+  if (show.includes("discussions_answered")) {
+    STATS.discussions_answered = {
+      icon: icons.discussions_answered,
+      label: i18n.t("statcard.discussions-answered"),
+      value: totalDiscussionsAnswered,
+      id: "discussions_answered",
+    };
+  }
+
+  let repoFilter = encodeURIComponent(buildSearchFilter(repo, owner));
+  if (show.includes("prs_authored")) {
+    STATS.prs_authored = {
+      icon: icons.prs,
+      label: i18n.t("statcard.prs-authored"),
+      value: totalPRsAuthored,
+      id: "prs_authored",
+      link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=pullrequests`,
+    };
+  }
+  if (show.includes("prs_commented")) {
+    STATS.prs_commented = {
+      icon: icons.comments,
+      label: i18n.t("statcard.prs-commented"),
+      value: totalPRsCommented,
+      id: "prs_commented",
+      link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+    };
+  }
+  if (show.includes("prs_reviewed")) {
+    STATS.prs_reviewed = {
+      icon: icons.reviews,
+      label: i18n.t("statcard.prs-reviewed"),
+      value: totalPRsReviewed,
+      id: "prs_reviewed",
+      link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+    };
+  }
+  if (show.includes("issues_authored")) {
+    STATS.issues_authored = {
+      icon: icons.issues,
+      label: i18n.t("statcard.issues-authored"),
+      value: totalIssuesAuthored,
+      id: "issues_authored",
+      link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=issues`,
+    };
+  }
+  if (show.includes("issues_commented")) {
+    STATS.issues_commented = {
+      icon: icons.discussions_started,
+      label: i18n.t("statcard.issues-commented"),
+      value: totalIssuesCommented,
+      id: "issues_commented",
+      link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=issues`,
+    };
+  }
+
+  STATS.contribs = {
+    icon: icons.contribs,
+    label: i18n.t("statcard.contribs"),
+    value: contributedTo,
+    id: "contribs",
+  };
+
+  // @ts-ignore
+  const isLongLocale = locale ? LONG_LOCALES.includes(locale) : false;
+
+  // check if all used labels are short
+  const longLabels =
+    Object.keys(STATS)
+      .filter((key) => !hide.includes(key))
+      .filter((key) => STATS[key].label.length > 18).length > 0;
+
+  // filter out hidden stats defined by user & create the text nodes
+  const statItems = Object.keys(STATS)
+    .filter((key) => !hide.includes(key))
+    .map((key, index) => {
+      // @ts-ignore
+      const stats = STATS[key];
+
+      // create the text nodes, and pass index so that we can calculate the line spacing
+      return createTextNode({
+        icon: stats.icon,
+        label: stats.label,
+        value: stats.value,
+        id: stats.id,
+        unitSymbol: stats.unitSymbol,
+        index,
+        showIcons: show_icons,
+        shiftValuePos: 29.01 + (longLabels ? 50 : 0) + (isLongLocale ? 50 : 0),
+        bold: text_bold,
+        numberFormat: number_format,
+        numberPrecision: number_precision,
+        link: STATS[key].link,
+      });
+    });
+
+  if (statItems.length === 0 && hide_rank) {
+    throw new CustomError(
+      "Could not render stats card.",
+      "Either stats or rank are required.",
+    );
+  }
+
+  // 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 : statItems.length ? 150 : 180,
+  );
+
+  // the lower the user's percentile the better
+  const progress = 100 - rank.percentile;
+  const cssStyles = getStyles({
+    titleColor,
+    ringColor,
+    textColor,
+    iconColor,
+    show_icons,
+    progress,
+  });
+
+  const calculateTextWidth = () => {
+    return measureText(
+      custom_title
+        ? custom_title
+        : statItems.length
+          ? i18n.t("statcard.title")
+          : i18n.t("statcard.ranktitle"),
+    );
+  };
+
+  /*
+    When hide_rank=true, the minimum card width is 270 px + the title length and padding.
+    When hide_rank=false, the minimum card_width is 340 px + the icon width (if show_icons=true).
+    Numbers are picked by looking at existing dimensions on production.
+  */
+  const iconWidth = show_icons && statItems.length ? 16 + /* padding */ 1 : 0;
+  const minCardWidth =
+    (hide_rank
+      ? clampValue(
+          50 /* padding */ + calculateTextWidth() * 2,
+          CARD_MIN_WIDTH,
+          Infinity,
+        )
+      : statItems.length
+        ? RANK_CARD_MIN_WIDTH
+        : RANK_ONLY_CARD_MIN_WIDTH) + iconWidth;
+  const defaultCardWidth =
+    (hide_rank
+      ? CARD_DEFAULT_WIDTH
+      : statItems.length
+        ? RANK_CARD_DEFAULT_WIDTH
+        : RANK_ONLY_CARD_DEFAULT_WIDTH) + iconWidth;
+  let width = card_width
+    ? isNaN(card_width)
+      ? Math.max(defaultCardWidth, minCardWidth)
+      : card_width
+    : Math.max(defaultCardWidth, minCardWidth);
+
+  const card = new Card({
+    customTitle: custom_title,
+    defaultTitle: statItems.length
+      ? i18n.t("statcard.title")
+      : i18n.t("statcard.ranktitle"),
+    width,
+    height,
+    border_radius,
+    colors: {
+      titleColor,
+      textColor,
+      iconColor,
+      bgColor,
+      borderColor,
+    },
+  });
+
+  card.setHideBorder(hide_border);
+  card.setHideTitle(hide_title);
+  card.setCSS(cssStyles);
+
+  if (disable_animations) {
+    card.disableAnimations();
+  }
+
+  /**
+   * Calculates the right rank circle translation values such that the rank circle
+   * keeps respecting the following padding:
+   *
+   * width > RANK_CARD_DEFAULT_WIDTH: The default right padding of 70 px will be used.
+   * width < RANK_CARD_DEFAULT_WIDTH: The left and right padding will be enlarged
+   *   equally from a certain minimum at RANK_CARD_MIN_WIDTH.
+   *
+   * @returns {number} - Rank circle translation value.
+   */
+  const calculateRankXTranslation = () => {
+    if (statItems.length) {
+      const minXTranslation = RANK_CARD_MIN_WIDTH + iconWidth - 70;
+      if (width > RANK_CARD_DEFAULT_WIDTH) {
+        const xMaxExpansion = minXTranslation + (450 - minCardWidth) / 2;
+        return xMaxExpansion + width - RANK_CARD_DEFAULT_WIDTH;
+      } else {
+        return minXTranslation + (width - minCardWidth) / 2;
+      }
+    } else {
+      return width / 2 + 20 - 10;
+    }
+  };
+
+  // Conditionally rendered elements
+  const rankCircle = hide_rank
+    ? ""
+    : `<g data-testid="rank-circle"
+          transform="translate(${calculateRankXTranslation()}, ${
+            height / 2 - 50
+          })">
+        <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+        <circle class="rank-circle" cx="-10" cy="8" r="40" />
+        <g class="rank-text">
+          ${rankIcon(rank_icon, rank?.level, rank?.percentile)}
+        </g>
+      </g>`;
+
+  // Accessibility Labels
+  const labels = Object.keys(STATS)
+    .filter((key) => !hide.includes(key))
+    .map((key) => {
+      // @ts-ignore
+      const stats = STATS[key];
+      if (key === "commits") {
+        return `${i18n.t("statcard.commits")} ${getTotalCommitsYearLabel(
+          include_all_commits,
+          commits_year,
+          i18n,
+        )} : ${stats.value}`;
+      }
+      return `${stats.label}: ${stats.value}`;
+    })
+    .join(", ");
+
+  card.setAccessibilityLabel({
+    title: `${card.title}, Rank: ${rank.level}`,
+    desc: labels,
+  });
+
+  return card.render(`
+    ${rankCircle}
+    <svg x="0" y="0">
+      ${flexLayout({
+        items: statItems,
+        gap: lheight,
+        direction: "column",
+      }).join("")}
+    </svg>
+  `);
+};
+
+export { renderStatsCard, createTextNode };

packages/core/src/cards/top-languages.js

@@ -0,0 +1,977 @@
+// @ts-check
+
+import { Card } from "../common/Card.js";
+import { I18n } from "../common/I18n.js";
+import { fallbackColor, getCardColors } from "../common/color.js";
+import { formatBytes } from "../common/fmt.js";
+import { chunkArray, clampValue, lowercaseTrim } from "../common/ops.js";
+import {
+  createProgressNode,
+  flexLayout,
+  measureText,
+} from "../common/render.js";
+import { langCardLocales } from "../translations.js";
+
+const DEFAULT_CARD_WIDTH = 300;
+const MIN_CARD_WIDTH = 280;
+const DEFAULT_LANG_COLOR = "#858585";
+const CARD_PADDING = 25;
+const COMPACT_LAYOUT_BASE_HEIGHT = 90;
+const MAXIMUM_LANGS_COUNT = 20;
+
+const NORMAL_LAYOUT_DEFAULT_LANGS_COUNT = 5;
+const COMPACT_LAYOUT_DEFAULT_LANGS_COUNT = 6;
+const DONUT_LAYOUT_DEFAULT_LANGS_COUNT = 5;
+const PIE_LAYOUT_DEFAULT_LANGS_COUNT = 6;
+const DONUT_VERTICAL_LAYOUT_DEFAULT_LANGS_COUNT = 6;
+
+/**
+ * @typedef {import("../fetchers/types").Lang} Lang
+ */
+
+/**
+ * Retrieves the programming language whose name is the longest.
+ *
+ * @param {Lang[]} arr Array of programming languages.
+ * @returns {{ name: string, size: number, color: string }} Longest programming language object.
+ */
+const getLongestLang = (arr) =>
+  arr.reduce(
+    (savedLang, lang) =>
+      lang.name.length > savedLang.name.length ? lang : savedLang,
+    { name: "", size: 0, color: "" },
+  );
+
+/**
+ * Convert degrees to radians.
+ *
+ * @param {number} angleInDegrees Angle in degrees.
+ * @returns {number} Angle in radians.
+ */
+const degreesToRadians = (angleInDegrees) => angleInDegrees * (Math.PI / 180.0);
+
+/**
+ * Convert radians to degrees.
+ *
+ * @param {number} angleInRadians Angle in radians.
+ * @returns {number} Angle in degrees.
+ */
+const radiansToDegrees = (angleInRadians) => angleInRadians / (Math.PI / 180.0);
+
+/**
+ * Convert polar coordinates to cartesian coordinates.
+ *
+ * @param {number} centerX Center x coordinate.
+ * @param {number} centerY Center y coordinate.
+ * @param {number} radius Radius of the circle.
+ * @param {number} angleInDegrees Angle in degrees.
+ * @returns {{x: number, y: number}} Cartesian coordinates.
+ */
+const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+  const rads = degreesToRadians(angleInDegrees);
+  return {
+    x: centerX + radius * Math.cos(rads),
+    y: centerY + radius * Math.sin(rads),
+  };
+};
+
+/**
+ * Convert cartesian coordinates to polar coordinates.
+ *
+ * @param {number} centerX Center x coordinate.
+ * @param {number} centerY Center y coordinate.
+ * @param {number} x Point x coordinate.
+ * @param {number} y Point y coordinate.
+ * @returns {{radius: number, angleInDegrees: number}} Polar coordinates.
+ */
+const cartesianToPolar = (centerX, centerY, x, y) => {
+  const radius = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
+  let angleInDegrees = radiansToDegrees(Math.atan2(y - centerY, x - centerX));
+  if (angleInDegrees < 0) {
+    angleInDegrees += 360;
+  }
+  return { radius, angleInDegrees };
+};
+
+/**
+ * Calculates length of circle.
+ *
+ * @param {number} radius Radius of the circle.
+ * @returns {number} The length of the circle.
+ */
+const getCircleLength = (radius) => {
+  return 2 * Math.PI * radius;
+};
+
+/**
+ * Calculates height for the compact layout.
+ *
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Card height.
+ */
+const calculateCompactLayoutHeight = (totalLangs) => {
+  return COMPACT_LAYOUT_BASE_HEIGHT + Math.round(totalLangs / 2) * 25;
+};
+
+/**
+ * Calculates height for the normal layout.
+ *
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Card height.
+ */
+const calculateNormalLayoutHeight = (totalLangs) => {
+  return 45 + (totalLangs + 1) * 40;
+};
+
+/**
+ * Calculates height for the donut layout.
+ *
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Card height.
+ */
+const calculateDonutLayoutHeight = (totalLangs) => {
+  return 215 + Math.max(totalLangs - 5, 0) * 32;
+};
+
+/**
+ * Calculates height for the donut vertical layout.
+ *
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Card height.
+ */
+const calculateDonutVerticalLayoutHeight = (totalLangs) => {
+  return 300 + Math.round(totalLangs / 2) * 25;
+};
+
+/**
+ * Calculates height for the pie layout.
+ *
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Card height.
+ */
+const calculatePieLayoutHeight = (totalLangs) => {
+  return 300 + Math.round(totalLangs / 2) * 25;
+};
+
+/**
+ * Calculates the center translation needed to keep the donut chart centred.
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Donut center translation.
+ */
+const donutCenterTranslation = (totalLangs) => {
+  return -45 + Math.max(totalLangs - 5, 0) * 16;
+};
+
+/**
+ * Trim top languages to lang_count while also hiding certain languages.
+ *
+ * @param {Record<string, Lang>} topLangs Top languages.
+ * @param {number} langs_count Number of languages to show.
+ * @param {string[]=} hide Languages to hide.
+ * @returns {{ langs: Lang[], totalLanguageSize: number }} Trimmed top languages and total size.
+ */
+const trimTopLanguages = (topLangs, langs_count, hide) => {
+  let langs = Object.values(topLangs);
+  let langsToHide = {};
+  let langsCount = clampValue(langs_count, 1, MAXIMUM_LANGS_COUNT);
+
+  // populate langsToHide map for quick lookup
+  // while filtering out
+  if (hide) {
+    hide.forEach((langName) => {
+      // @ts-ignore
+      langsToHide[lowercaseTrim(langName)] = true;
+    });
+  }
+
+  // filter out languages to be hidden
+  langs = langs
+    .sort((a, b) => b.size - a.size)
+    .filter((lang) => {
+      // @ts-ignore
+      return !langsToHide[lowercaseTrim(lang.name)];
+    })
+    .slice(0, langsCount);
+
+  const totalLanguageSize = langs.reduce((acc, curr) => acc + curr.size, 0);
+
+  return { langs, totalLanguageSize };
+};
+
+/**
+ * Get display value corresponding to the format.
+ *
+ * @param {number} size Bytes size.
+ * @param {number} percentages Percentage value.
+ * @param {string} format Format of the stats.
+ * @returns {string} Display value.
+ */
+const getDisplayValue = (size, percentages, format) => {
+  return format === "bytes" ? formatBytes(size) : `${percentages.toFixed(2)}%`;
+};
+
+/**
+ * Create progress bar text item for a programming language.
+ *
+ * @param {object} props Function properties.
+ * @param {number} props.width The card width
+ * @param {string} props.color Color of the programming language.
+ * @param {string} props.progBarBgColor Color of the background of progress bar.
+ * @param {string} props.name Name of the programming language.
+ * @param {number} props.size Size of the programming language.
+ * @param {number} props.totalSize Total size of all languages.
+ * @param {string} props.statsFormat Stats format.
+ * @param {number} props.index Index of the programming language.
+ * @returns {string} Programming language SVG node.
+ */
+const createProgressTextNode = ({
+  width,
+  color,
+  progBarBgColor,
+  name,
+  size,
+  totalSize,
+  statsFormat,
+  index,
+}) => {
+  const staggerDelay = (index + 3) * 150;
+  const paddingRight = 95;
+  const progressTextX = width - paddingRight + 10;
+  const progressWidth = width - paddingRight;
+
+  const progress = (size / totalSize) * 100;
+  const displayValue = getDisplayValue(size, progress, statsFormat);
+
+  return `
+    <g class="stagger" style="animation-delay: ${staggerDelay}ms">
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
+      <text x="${progressTextX}" y="34" class="lang-name">${displayValue}</text>
+      ${createProgressNode({
+        x: 0,
+        y: 25,
+        color,
+        width: progressWidth,
+        progress,
+        progressBarBackgroundColor: progBarBgColor,
+        delay: staggerDelay + 300,
+      })}
+    </g>
+  `;
+};
+
+/**
+ * Creates compact text item for a programming language.
+ *
+ * @param {object} props Function properties.
+ * @param {Lang} props.lang Programming language object.
+ * @param {number} props.totalSize Total size of all languages.
+ * @param {boolean=} props.hideProgress Whether to hide percentage.
+ * @param {string=} props.statsFormat Stats format
+ * @param {number} props.index Index of the programming language.
+ * @returns {string} Compact layout programming language SVG node.
+ */
+const createCompactLangNode = ({
+  lang,
+  totalSize,
+  hideProgress,
+  statsFormat = "percentages",
+  index,
+}) => {
+  const percentages = (lang.size / totalSize) * 100;
+  const displayValue = getDisplayValue(lang.size, percentages, statsFormat);
+
+  const staggerDelay = (index + 3) * 150;
+  const color = lang.color || "#858585";
+
+  return `
+    <g class="stagger" style="animation-delay: ${staggerDelay}ms">
+      <circle cx="5" cy="6" r="5" fill="${color}" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
+        ${lang.name} ${hideProgress ? "" : displayValue}
+      </text>
+    </g>
+  `;
+};
+
+/**
+ * Create compact languages text items for all programming languages.
+ *
+ * @param {object} props Function properties.
+ * @param {Lang[]} props.langs Array of programming languages.
+ * @param {number} props.totalSize Total size of all languages.
+ * @param {boolean=} props.hideProgress Whether to hide percentage.
+ * @param {string=} props.statsFormat Stats format
+ * @returns {string} Programming languages SVG node.
+ */
+const createLanguageTextNode = ({
+  langs,
+  totalSize,
+  hideProgress,
+  statsFormat,
+}) => {
+  const longestLang = getLongestLang(langs);
+  const chunked = chunkArray(langs, langs.length / 2);
+  const layouts = chunked.map((array) => {
+    // @ts-ignore
+    const items = array.map((lang, index) =>
+      createCompactLangNode({
+        lang,
+        totalSize,
+        hideProgress,
+        statsFormat,
+        index,
+      }),
+    );
+    return flexLayout({
+      items,
+      gap: 25,
+      direction: "column",
+    }).join("");
+  });
+
+  const percent = ((longestLang.size / totalSize) * 100).toFixed(2);
+  const minGap = 150;
+  const maxGap = 20 + measureText(`${longestLang.name} ${percent}%`, 11);
+  return flexLayout({
+    items: layouts,
+    gap: maxGap < minGap ? minGap : maxGap,
+  }).join("");
+};
+
+/**
+ * Create donut languages text items for all programming languages.
+ *
+ * @param {object} props Function properties.
+ * @param {Lang[]} props.langs Array of programming languages.
+ * @param {number} props.totalSize Total size of all languages.
+ * @param {string} props.statsFormat Stats format
+ * @returns {string} Donut layout programming language SVG node.
+ */
+const createDonutLanguagesNode = ({ langs, totalSize, statsFormat }) => {
+  return flexLayout({
+    items: langs.map((lang, index) => {
+      return createCompactLangNode({
+        lang,
+        totalSize,
+        hideProgress: false,
+        statsFormat,
+        index,
+      });
+    }),
+    gap: 32,
+    direction: "column",
+  }).join("");
+};
+
+/**
+ * Renders the default language card layout.
+ *
+ * @param {Lang[]} langs Array of programming languages.
+ * @param {number} width Card width.
+ * @param {number} totalLanguageSize Total size of all languages.
+ * @param progBarBgColor Color of the background of progress bar.
+ * @param {string} statsFormat Stats format.
+ * @returns {string} Normal layout card SVG object.
+ */
+const renderNormalLayout = (
+  langs,
+  width,
+  totalLanguageSize,
+  progBarBgColor,
+  statsFormat,
+) => {
+  return flexLayout({
+    items: langs.map((lang, index) => {
+      return createProgressTextNode({
+        width,
+        name: lang.name,
+        color: lang.color || DEFAULT_LANG_COLOR,
+        size: lang.size,
+        totalSize: totalLanguageSize,
+        statsFormat,
+        index,
+        progBarBgColor,
+      });
+    }),
+    gap: 40,
+    direction: "column",
+  }).join("");
+};
+
+/**
+ * Renders the compact language card layout.
+ *
+ * @param {Lang[]} langs Array of programming languages.
+ * @param {number} width Card width.
+ * @param {number} totalLanguageSize Total size of all languages.
+ * @param {boolean=} hideProgress Whether to hide progress bar.
+ * @param {string} statsFormat Stats format.
+ * @returns {string} Compact layout card SVG object.
+ */
+const renderCompactLayout = (
+  langs,
+  width,
+  totalLanguageSize,
+  hideProgress,
+  statsFormat = "percentages",
+) => {
+  const paddingRight = 50;
+  const offsetWidth = width - paddingRight;
+  // progressOffset holds the previous language's width and used to offset the next language
+  // so that we can stack them one after another, like this: [--][----][---]
+  let progressOffset = 0;
+  const compactProgressBar = langs
+    .map((lang) => {
+      const percentage = parseFloat(
+        ((lang.size / totalLanguageSize) * offsetWidth).toFixed(2),
+      );
+
+      const progress = percentage < 10 ? percentage + 10 : percentage;
+
+      const output = `
+        <rect
+          mask="url(#rect-mask)"
+          data-testid="lang-progress"
+          x="${progressOffset}"
+          y="0"
+          width="${progress}"
+          height="8"
+          fill="${lang.color || "#858585"}"
+        />
+      `;
+      progressOffset += percentage;
+      return output;
+    })
+    .join("");
+
+  return `
+  ${
+    hideProgress
+      ? ""
+      : `
+      <mask id="rect-mask">
+          <rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5"/>
+        </mask>
+        ${compactProgressBar}
+      `
+  }
+    <g transform="translate(0, ${hideProgress ? "0" : "25"})">
+      ${createLanguageTextNode({
+        langs,
+        totalSize: totalLanguageSize,
+        hideProgress,
+        statsFormat,
+      })}
+    </g>
+  `;
+};
+
+/**
+ * Renders donut vertical layout to display user's most frequently used programming languages.
+ *
+ * @param {Lang[]} langs Array of programming languages.
+ * @param {number} totalLanguageSize Total size of all languages.
+ * @param {string} statsFormat Stats format.
+ * @returns {string} Compact layout card SVG object.
+ */
+const renderDonutVerticalLayout = (langs, totalLanguageSize, statsFormat) => {
+  // Donut vertical chart radius and total length
+  const radius = 80;
+  const totalCircleLength = getCircleLength(radius);
+
+  // SVG circles
+  let circles = [];
+
+  // Start indent for donut vertical chart parts
+  let indent = 0;
+
+  // Start delay coefficient for donut vertical chart parts
+  let startDelayCoefficient = 1;
+
+  // Generate each donut vertical chart part
+  for (const lang of langs) {
+    const percentage = (lang.size / totalLanguageSize) * 100;
+    const circleLength = totalCircleLength * (percentage / 100);
+    const delay = startDelayCoefficient * 100;
+
+    circles.push(`
+      <g class="stagger" style="animation-delay: ${delay}ms">
+        <circle 
+          cx="150"
+          cy="100"
+          r="${radius}"
+          fill="transparent"
+          stroke="${lang.color}"
+          stroke-width="25"
+          stroke-dasharray="${totalCircleLength}"
+          stroke-dashoffset="${indent}"
+          size="${percentage}"
+          data-testid="lang-donut"
+        />
+      </g>
+    `);
+
+    // Update the indent for the next part
+    indent += circleLength;
+    // Update the start delay coefficient for the next part
+    startDelayCoefficient += 1;
+  }
+
+  return `
+    <svg data-testid="lang-items">
+      <g transform="translate(0, 0)">
+        <svg data-testid="donut">
+          ${circles.join("")}
+        </svg>
+      </g>
+      <g transform="translate(0, 220)">
+        <svg data-testid="lang-names" x="${CARD_PADDING}">
+          ${createLanguageTextNode({
+            langs,
+            totalSize: totalLanguageSize,
+            hideProgress: false,
+            statsFormat,
+          })}
+        </svg>
+      </g>
+    </svg>
+  `;
+};
+
+/**
+ * Renders pie layout to display user's most frequently used programming languages.
+ *
+ * @param {Lang[]} langs Array of programming languages.
+ * @param {number} totalLanguageSize Total size of all languages.
+ * @param {string} statsFormat Stats format.
+ * @returns {string} Compact layout card SVG object.
+ */
+const renderPieLayout = (langs, totalLanguageSize, statsFormat) => {
+  // Pie chart radius and center coordinates
+  const radius = 90;
+  const centerX = 150;
+  const centerY = 100;
+
+  // Start angle for the pie chart parts
+  let startAngle = 0;
+
+  // Start delay coefficient for the pie chart parts
+  let startDelayCoefficient = 1;
+
+  // SVG paths
+  const paths = [];
+
+  // Generate each pie chart part
+  for (const lang of langs) {
+    if (langs.length === 1) {
+      paths.push(`
+        <circle
+          cx="${centerX}"
+          cy="${centerY}"
+          r="${radius}"
+          stroke="none"
+          fill="${lang.color}"
+          data-testid="lang-pie"
+          size="100"
+        />
+      `);
+      break;
+    }
+
+    const langSizePart = lang.size / totalLanguageSize;
+    const percentage = langSizePart * 100;
+    // Calculate the angle for the current part
+    const angle = langSizePart * 360;
+
+    // Calculate the end angle
+    const endAngle = startAngle + angle;
+
+    // Calculate the coordinates of the start and end points of the arc
+    const startPoint = polarToCartesian(centerX, centerY, radius, startAngle);
+    const endPoint = polarToCartesian(centerX, centerY, radius, endAngle);
+
+    // Determine the large arc flag based on the angle
+    const largeArcFlag = angle > 180 ? 1 : 0;
+
+    // Calculate delay
+    const delay = startDelayCoefficient * 100;
+
+    // SVG arc markup
+    paths.push(`
+      <g class="stagger" style="animation-delay: ${delay}ms">
+        <path
+          data-testid="lang-pie"
+          size="${percentage}"
+          d="M ${centerX} ${centerY} L ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endPoint.x} ${endPoint.y} Z"
+          fill="${lang.color}"
+        />
+      </g>
+    `);
+
+    // Update the start angle for the next part
+    startAngle = endAngle;
+    // Update the start delay coefficient for the next part
+    startDelayCoefficient += 1;
+  }
+
+  return `
+    <svg data-testid="lang-items">
+      <g transform="translate(0, 0)">
+        <svg data-testid="pie">
+          ${paths.join("")}
+        </svg>
+      </g>
+      <g transform="translate(0, 220)">
+        <svg data-testid="lang-names" x="${CARD_PADDING}">
+          ${createLanguageTextNode({
+            langs,
+            totalSize: totalLanguageSize,
+            hideProgress: false,
+            statsFormat,
+          })}
+        </svg>
+      </g>
+    </svg>
+  `;
+};
+
+/**
+ * Creates the SVG paths for the language donut chart.
+ *
+ * @param {number} cx Donut center x-position.
+ * @param {number} cy Donut center y-position.
+ * @param {number} radius Donut arc Radius.
+ * @param {number[]} percentages Array with donut section percentages.
+ * @returns {{d: string, percent: number}[]}  Array of svg path elements
+ */
+const createDonutPaths = (cx, cy, radius, percentages) => {
+  const paths = [];
+  let startAngle = 0;
+  let endAngle;
+
+  const totalPercent = percentages.reduce((acc, curr) => acc + curr, 0);
+  for (let i = 0; i < percentages.length; i++) {
+    const tmpPath = {};
+
+    let percent = parseFloat(
+      ((percentages[i] / totalPercent) * 100).toFixed(2),
+    );
+
+    endAngle = 3.6 * percent + startAngle;
+    const startPoint = polarToCartesian(cx, cy, radius, endAngle - 90); // rotate donut 90 degrees counter-clockwise.
+    const endPoint = polarToCartesian(cx, cy, radius, startAngle - 90); // rotate donut 90 degrees counter-clockwise.
+    const largeArc = endAngle - startAngle <= 180 ? 0 : 1;
+
+    tmpPath.percent = percent;
+    tmpPath.d = `M ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArc} 0 ${endPoint.x} ${endPoint.y}`;
+
+    paths.push(tmpPath);
+    startAngle = endAngle;
+  }
+
+  return paths;
+};
+
+/**
+ * Renders the donut language card layout.
+ *
+ * @param {Lang[]} langs Array of programming languages.
+ * @param {number} width Card width.
+ * @param {number} totalLanguageSize Total size of all languages.
+ * @param {string} statsFormat Stats format.
+ * @returns {string} Donut layout card SVG object.
+ */
+const renderDonutLayout = (langs, width, totalLanguageSize, statsFormat) => {
+  const centerX = width / 3;
+  const centerY = width / 3;
+  const radius = centerX - 60;
+  const strokeWidth = 12;
+
+  const colors = langs.map((lang) => lang.color);
+  const langsPercents = langs.map((lang) =>
+    parseFloat(((lang.size / totalLanguageSize) * 100).toFixed(2)),
+  );
+
+  const langPaths = createDonutPaths(centerX, centerY, radius, langsPercents);
+
+  const donutPaths =
+    langs.length === 1
+      ? `<circle cx="${centerX}" cy="${centerY}" r="${radius}" stroke="${colors[0]}" fill="none" stroke-width="${strokeWidth}" data-testid="lang-donut" size="100"/>`
+      : langPaths
+          .map((section, index) => {
+            const staggerDelay = (index + 3) * 100;
+            const delay = staggerDelay + 300;
+
+            const output = `
+       <g class="stagger" style="animation-delay: ${delay}ms">
+        <path
+          data-testid="lang-donut"
+          size="${section.percent}"
+          d="${section.d}"
+          stroke="${colors[index]}"
+          fill="none"
+          stroke-width="${strokeWidth}">
+        </path>
+      </g>
+      `;
+
+            return output;
+          })
+          .join("");
+
+  const donut = `<svg width="${width}" height="${width}">${donutPaths}</svg>`;
+
+  return `
+    <g transform="translate(0, 0)">
+      <g transform="translate(0, 0)">
+        ${createDonutLanguagesNode({ langs, totalSize: totalLanguageSize, statsFormat })}
+      </g>
+
+      <g transform="translate(125, ${donutCenterTranslation(langs.length)})">
+        ${donut}
+      </g>
+    </g>
+  `;
+};
+
+/**
+ * @typedef {import("./types").TopLangOptions} TopLangOptions
+ * @typedef {TopLangOptions["layout"]} Layout
+ */
+
+/**
+ * Creates the no languages data SVG node.
+ *
+ * @param {object} props Object with function properties.
+ * @param {string} props.color No languages data text color.
+ * @param {string} props.text No languages data translated text.
+ * @param {Layout | undefined} props.layout Card layout.
+ * @returns {string} No languages data SVG node string.
+ */
+const noLanguagesDataNode = ({ color, text, layout }) => {
+  return `
+    <text x="${
+      layout === "pie" || layout === "donut-vertical" ? CARD_PADDING : 0
+    }" y="11" class="stat bold" fill="${color}">${text}</text>
+  `;
+};
+
+/**
+ * Get default languages count for provided card layout.
+ *
+ * @param {object} props Function properties.
+ * @param {Layout=} props.layout Input layout string.
+ * @param {boolean=} props.hide_progress Input hide_progress parameter value.
+ * @returns {number} Default languages count for input layout.
+ */
+const getDefaultLanguagesCountByLayout = ({ layout, hide_progress }) => {
+  if (layout === "compact" || hide_progress === true) {
+    return COMPACT_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else if (layout === "donut") {
+    return DONUT_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else if (layout === "donut-vertical") {
+    return DONUT_VERTICAL_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else if (layout === "pie") {
+    return PIE_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else {
+    return NORMAL_LAYOUT_DEFAULT_LANGS_COUNT;
+  }
+};
+
+/**
+ * @typedef {import('../fetchers/types').TopLangData} TopLangData
+ */
+
+/**
+ * Renders card that display user's most frequently used programming languages.
+ *
+ * @param {TopLangData} topLangs User's most frequently used programming languages.
+ * @param {Partial<TopLangOptions>} options Card options.
+ * @returns {string} Language card SVG object.
+ */
+const renderTopLanguages = (topLangs, options = {}) => {
+  const {
+    hide_title = false,
+    hide_border = false,
+    card_width,
+    title_color,
+    text_color,
+    bg_color,
+    prog_bar_bg_color,
+    hide,
+    hide_progress,
+    theme,
+    layout,
+    custom_title,
+    locale,
+    langs_count = getDefaultLanguagesCountByLayout({ layout, hide_progress }),
+    border_radius,
+    border_color,
+    disable_animations,
+    stats_format = "percentages",
+  } = options;
+
+  const i18n = new I18n({
+    locale,
+    translations: langCardLocales,
+  });
+
+  const { langs, totalLanguageSize } = trimTopLanguages(
+    topLangs,
+    langs_count,
+    hide,
+  );
+
+  let width = card_width
+    ? isNaN(card_width)
+      ? DEFAULT_CARD_WIDTH
+      : card_width < MIN_CARD_WIDTH
+        ? MIN_CARD_WIDTH
+        : card_width
+    : DEFAULT_CARD_WIDTH;
+  let height = calculateNormalLayoutHeight(langs.length);
+
+  // returns theme based colors with proper overrides and defaults
+  const colors = getCardColors({
+    title_color,
+    text_color,
+    bg_color,
+    border_color,
+    theme,
+  });
+
+  let finalLayout;
+  if (langs.length === 0) {
+    height = COMPACT_LAYOUT_BASE_HEIGHT;
+    finalLayout = noLanguagesDataNode({
+      color: colors.textColor,
+      text: i18n.t("langcard.nodata"),
+      layout,
+    });
+  } else if (layout === "pie") {
+    height = calculatePieLayoutHeight(langs.length);
+    finalLayout = renderPieLayout(langs, totalLanguageSize, stats_format);
+  } else if (layout === "donut-vertical") {
+    height = calculateDonutVerticalLayoutHeight(langs.length);
+    finalLayout = renderDonutVerticalLayout(
+      langs,
+      totalLanguageSize,
+      stats_format,
+    );
+  } else if (layout === "compact" || hide_progress == true) {
+    height =
+      calculateCompactLayoutHeight(langs.length) + (hide_progress ? -25 : 0);
+
+    finalLayout = renderCompactLayout(
+      langs,
+      width,
+      totalLanguageSize,
+      hide_progress,
+      stats_format,
+    );
+  } else if (layout === "donut") {
+    height = calculateDonutLayoutHeight(langs.length);
+    width = width + 50; // padding
+    finalLayout = renderDonutLayout(
+      langs,
+      width,
+      totalLanguageSize,
+      stats_format,
+    );
+  } else {
+    finalLayout = renderNormalLayout(
+      langs,
+      width,
+      totalLanguageSize,
+      fallbackColor(prog_bar_bg_color, "#ddd"),
+      stats_format,
+    );
+  }
+
+  const card = new Card({
+    customTitle: custom_title,
+    defaultTitle: i18n.t("langcard.title"),
+    width,
+    height,
+    border_radius,
+    colors,
+  });
+
+  if (disable_animations) {
+    card.disableAnimations();
+  }
+
+  card.setHideBorder(hide_border);
+  card.setHideTitle(hide_title);
+  card.setCSS(
+    `
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${colors.textColor};
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .bold { font-weight: 700 }
+    .lang-name {
+      font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: ${colors.textColor};
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    `,
+  );
+
+  if (layout === "pie" || layout === "donut-vertical") {
+    return card.render(finalLayout);
+  }
+
+  return card.render(`
+    <svg data-testid="lang-items" x="${CARD_PADDING}">
+      ${finalLayout}
+    </svg>
+  `);
+};
+
+export {
+  getLongestLang,
+  degreesToRadians,
+  radiansToDegrees,
+  polarToCartesian,
+  cartesianToPolar,
+  getCircleLength,
+  calculateCompactLayoutHeight,
+  calculateNormalLayoutHeight,
+  calculateDonutLayoutHeight,
+  calculateDonutVerticalLayoutHeight,
+  calculatePieLayoutHeight,
+  donutCenterTranslation,
+  trimTopLanguages,
+  renderTopLanguages,
+  MIN_CARD_WIDTH,
+  getDefaultLanguagesCountByLayout,
+};

packages/core/src/cards/types.d.ts

@@ -0,0 +1,75 @@
+type ThemeNames = keyof typeof import("../themes/index.ts");
+type RankIcon = "default" | "github" | "percentile";
+
+interface CommonOptions {
+  title_color: string;
+  icon_color: string;
+  text_color: string;
+  bg_color: string;
+  theme: ThemeNames;
+  border_radius: number;
+  border_color: string;
+  locale: string;
+  hide_border: boolean;
+}
+
+export type StatCardOptions = CommonOptions & {
+  hide: Array<string>;
+  show_icons: boolean;
+  hide_title: boolean;
+  card_width: number;
+  hide_rank: boolean;
+  include_all_commits: boolean;
+  commits_year: number;
+  line_height: number | string;
+  custom_title: string;
+  disable_animations: boolean;
+  number_format: string;
+  number_precision: number;
+  ring_color: string;
+  text_bold: boolean;
+  rank_icon: RankIcon;
+  show: Array<string>;
+};
+
+export type RepoCardOptions = CommonOptions & {
+  show_owner: boolean;
+  description_lines_count: number;
+  card_width_input;
+  show: Array<string>;
+  show_icons: boolean;
+  number_format: string;
+  text_bold: boolean;
+  line_height: number | string;
+  username;
+};
+
+export type TopLangOptions = CommonOptions & {
+  hide_title: boolean;
+  card_width: number;
+  hide: Array<string>;
+  layout: "compact" | "normal" | "donut" | "donut-vertical" | "pie";
+  custom_title: string;
+  langs_count: number;
+  disable_animations: boolean;
+  hide_progress: boolean;
+  prog_bar_bg_color: string;
+  stats_format: "percentages" | "bytes";
+};
+
+export type WakaTimeOptions = CommonOptions & {
+  hide_title: boolean;
+  hide: Array<string>;
+  card_width: number;
+  line_height: string;
+  hide_progress: boolean;
+  custom_title: string;
+  layout: "compact" | "normal";
+  langs_count: number;
+  display_format: "time" | "percent";
+  disable_animations: boolean;
+};
+
+export type GistCardOptions = CommonOptions & {
+  show_owner: boolean;
+};

packages/core/src/cards/wakatime.js

@@ -0,0 +1,471 @@
+// @ts-check
+
+import { Card } from "../common/Card.js";
+import { I18n } from "../common/I18n.js";
+import { getCardColors } from "../common/color.js";
+import languageColors from "../common/languageColors.json" with { type: "json" };
+import { clampValue, lowercaseTrim } from "../common/ops.js";
+import { createProgressNode, flexLayout } from "../common/render.js";
+import { wakatimeCardLocales } from "../translations.js";
+
+const DEFAULT_CARD_WIDTH = 495;
+const MIN_CARD_WIDTH = 250;
+const COMPACT_LAYOUT_MIN_WIDTH = 400;
+const DEFAULT_LINE_HEIGHT = 25;
+const PROGRESSBAR_PADDING = 130;
+const HIDDEN_PROGRESSBAR_PADDING = 170;
+const COMPACT_LAYOUT_PROGRESSBAR_PADDING = 25;
+const TOTAL_TEXT_WIDTH = 275;
+
+/**
+ * Creates the no coding activity SVG node.
+ *
+ * @param {object} props The function properties.
+ * @param {string} props.color No coding activity text color.
+ * @param {string} props.text No coding activity translated text.
+ * @returns {string} No coding activity SVG node string.
+ */
+const noCodingActivityNode = ({ color, text }) => {
+  return `
+    <text x="25" y="11" class="stat bold" fill="${color}">${text}</text>
+  `;
+};
+
+/**
+ * @typedef {import('../fetchers/types').WakaTimeLang} WakaTimeLang
+ */
+
+/**
+ * Format language value.
+ *
+ * @param {Object} args The function arguments.
+ * @param {WakaTimeLang} args.lang The language object.
+ * @param {"time" | "percent"} args.display_format The display format of the language node.
+ * @returns {string} The formatted language value.
+ */
+const formatLanguageValue = ({ display_format, lang }) => {
+  return display_format === "percent"
+    ? `${lang.percent.toFixed(2).toString()} %`
+    : lang.text;
+};
+
+/**
+ * Create compact WakaTime layout.
+ *
+ * @param {Object} args The function arguments.
+ * @param {WakaTimeLang} args.lang The languages array.
+ * @param {number} args.x The x position of the language node.
+ * @param {number} args.y The y position of the language node.
+ * @param {"time" | "percent"} args.display_format The display format of the language node.
+ * @returns {string} The compact layout language SVG node.
+ */
+const createCompactLangNode = ({ lang, x, y, display_format }) => {
+  // @ts-ignore
+  const color = languageColors[lang.name] || "#858585";
+  const value = formatLanguageValue({ display_format, lang });
+
+  return `
+    <g transform="translate(${x}, ${y})">
+      <circle cx="5" cy="6" r="5" fill="${color}" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
+        ${lang.name} - ${value}
+      </text>
+    </g>
+  `;
+};
+
+/**
+ * Create WakaTime language text node item.
+ *
+ * @param {Object} args The function arguments.
+ * @param {WakaTimeLang[]} args.langs The language objects.
+ * @param {number} args.y The y position of the language node.
+ * @param {"time" | "percent"} args.display_format The display format of the language node.
+ * @param {number} args.card_width Width in px of the card.
+ * @returns {string[]} The language text node items.
+ */
+const createLanguageTextNode = ({ langs, y, display_format, card_width }) => {
+  const LEFT_X = 25;
+  const RIGHT_X_BASE = 230;
+  const rightOffset = (card_width - DEFAULT_CARD_WIDTH) / 2;
+  const RIGHT_X = RIGHT_X_BASE + rightOffset;
+
+  return langs.map((lang, index) => {
+    const isLeft = index % 2 === 0;
+    return createCompactLangNode({
+      lang,
+      x: isLeft ? LEFT_X : RIGHT_X,
+      y: y + DEFAULT_LINE_HEIGHT * Math.floor(index / 2),
+      display_format,
+    });
+  });
+};
+
+/**
+ * Create WakaTime text item.
+ *
+ * @param {Object} args The function arguments.
+ * @param {string} args.id The id of the text node item.
+ * @param {string} args.label The label of the text node item.
+ * @param {string} args.value The value of the text node item.
+ * @param {number} args.index The index of the text node item.
+ * @param {number} args.percent Percentage of the text node item.
+ * @param {boolean=} args.hideProgress Whether to hide the progress bar.
+ * @param {string} args.progressBarColor The color of the progress bar.
+ * @param {string} args.progressBarBackgroundColor The color of the progress bar background.
+ * @param {number} args.progressBarWidth The width of the progress bar.
+ * @returns {string} The text SVG node.
+ */
+const createTextNode = ({
+  id,
+  label,
+  value,
+  index,
+  percent,
+  hideProgress,
+  progressBarColor,
+  progressBarBackgroundColor,
+  progressBarWidth,
+}) => {
+  const staggerDelay = (index + 3) * 150;
+  const cardProgress = hideProgress
+    ? null
+    : createProgressNode({
+        x: 110,
+        y: 4,
+        progress: percent,
+        color: progressBarColor,
+        width: progressBarWidth,
+        // @ts-ignore
+        name: label,
+        progressBarBackgroundColor,
+        delay: staggerDelay + 300,
+      });
+
+  return `
+    <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="${id}">${label}:</text>
+      <text
+        class="stat"
+        x="${hideProgress ? HIDDEN_PROGRESSBAR_PADDING : PROGRESSBAR_PADDING + progressBarWidth}"
+        y="12.5"
+      >${value}</text>
+      ${cardProgress}
+    </g>
+  `;
+};
+
+/**
+ * Recalculating percentages so that, compact layout's progress bar does not break when
+ * hiding languages.
+ *
+ * @param {WakaTimeLang[]} languages The languages array.
+ * @returns {void} The recalculated languages array.
+ */
+const recalculatePercentages = (languages) => {
+  const totalSum = languages.reduce(
+    (totalSum, language) => totalSum + language.percent,
+    0,
+  );
+  const weight = +(100 / totalSum).toFixed(2);
+  languages.forEach((language) => {
+    language.percent = +(language.percent * weight).toFixed(2);
+  });
+};
+
+/**
+ * Retrieves CSS styles for a card.
+ *
+ * @param {Object} colors The colors to use for the card.
+ * @param {string} colors.titleColor The title color.
+ * @param {string} colors.textColor The text color.
+ * @returns {string} Card CSS styles.
+ */
+const getStyles = ({
+  // eslint-disable-next-line no-unused-vars
+  titleColor,
+  textColor,
+}) => {
+  return `
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  `;
+};
+
+/**
+ * Normalize incoming width (string or number) and clamp to minimum.
+ *
+ * @param {Object} args The function arguments.
+ * @param {WakaTimeOptions["layout"] | undefined} args.layout The incoming layout value.
+ * @param {number|undefined} args.value The incoming width value.
+ * @returns {number} The normalized width value.
+ */
+const normalizeCardWidth = ({ value, layout }) => {
+  if (value === undefined || value === null || isNaN(value)) {
+    return DEFAULT_CARD_WIDTH;
+  }
+  return Math.max(
+    layout === "compact" ? COMPACT_LAYOUT_MIN_WIDTH : MIN_CARD_WIDTH,
+    value,
+  );
+};
+
+/**
+ * @typedef {import('../fetchers/types').WakaTimeData} WakaTimeData
+ * @typedef {import('./types').WakaTimeOptions} WakaTimeOptions
+ */
+
+/**
+ * Renders WakaTime card.
+ *
+ * @param {Partial<WakaTimeData>} stats WakaTime stats.
+ * @param {Partial<WakaTimeOptions>} options Card options.
+ * @returns {string} WakaTime card SVG.
+ */
+const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
+  let { languages = [] } = stats;
+  const {
+    hide_title = false,
+    hide_border = false,
+    card_width,
+    hide,
+    line_height = DEFAULT_LINE_HEIGHT,
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme = "default",
+    hide_progress,
+    custom_title,
+    locale,
+    layout,
+    langs_count = languages.length,
+    border_radius,
+    border_color,
+    display_format = "time",
+    disable_animations,
+  } = options;
+
+  const normalizedWidth = normalizeCardWidth({ value: card_width, layout });
+
+  const shouldHideLangs = Array.isArray(hide) && hide.length > 0;
+  if (shouldHideLangs) {
+    const languagesToHide = new Set(hide.map((lang) => lowercaseTrim(lang)));
+    languages = languages.filter(
+      (lang) => !languagesToHide.has(lowercaseTrim(lang.name)),
+    );
+  }
+
+  // Since the percentages are sorted in descending order, we can just
+  // slice from the beginning without sorting.
+  languages = languages.slice(0, langs_count);
+  recalculatePercentages(languages);
+
+  const i18n = new I18n({
+    locale,
+    translations: wakatimeCardLocales,
+  });
+
+  const lheight = parseInt(String(line_height), 10);
+
+  const langsCount = clampValue(langs_count, 1, langs_count);
+
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, textColor, iconColor, bgColor, borderColor } =
+    getCardColors({
+      title_color,
+      icon_color,
+      text_color,
+      bg_color,
+      border_color,
+      theme,
+    });
+
+  const filteredLanguages = languages
+    .filter((language) => language.hours || language.minutes)
+    .slice(0, langsCount);
+
+  // 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 + (filteredLanguages.length + 1) * lheight, 150);
+
+  const cssStyles = getStyles({
+    titleColor,
+    textColor,
+  });
+
+  let finalLayout;
+
+  // RENDER COMPACT LAYOUT
+  if (layout === "compact") {
+    const width = normalizedWidth - 5;
+    height =
+      90 + Math.round(filteredLanguages.length / 2) * DEFAULT_LINE_HEIGHT;
+
+    // progressOffset holds the previous language's width and used to offset the next language
+    // so that we can stack them one after another, like this: [--][----][---]
+    let progressOffset = 0;
+    const compactProgressBar = filteredLanguages
+      .map((language) => {
+        const progress =
+          ((width - COMPACT_LAYOUT_PROGRESSBAR_PADDING) * language.percent) /
+          100;
+
+        // @ts-ignore
+        const languageColor = languageColors[language.name] || "#858585";
+
+        const output = `
+          <rect
+            mask="url(#rect-mask)"
+            data-testid="lang-progress"
+            x="${progressOffset}"
+            y="0"
+            width="${progress}"
+            height="8"
+            fill="${languageColor}"
+          />
+        `;
+        progressOffset += progress;
+        return output;
+      })
+      .join("");
+
+    finalLayout = `
+      <mask id="rect-mask">
+      <rect x="${COMPACT_LAYOUT_PROGRESSBAR_PADDING}" y="0" width="${width - 2 * COMPACT_LAYOUT_PROGRESSBAR_PADDING}" height="8" fill="white" rx="5" />
+      </mask>
+      ${compactProgressBar}
+      ${
+        filteredLanguages.length
+          ? createLanguageTextNode({
+              y: 25,
+              langs: filteredLanguages,
+              display_format,
+              card_width: normalizedWidth,
+            }).join("")
+          : noCodingActivityNode({
+              // @ts-ignore
+              color: textColor,
+              text: stats.is_coding_activity_visible
+                ? stats.is_other_usage_visible
+                  ? i18n.t("wakatimecard.nocodingactivity")
+                  : i18n.t("wakatimecard.nocodedetails")
+                : i18n.t("wakatimecard.notpublic"),
+            })
+      }
+    `;
+  } else {
+    finalLayout = flexLayout({
+      items: filteredLanguages.length
+        ? filteredLanguages.map((language, index) => {
+            return createTextNode({
+              id: language.name,
+              label: language.name,
+              value: formatLanguageValue({ display_format, lang: language }),
+              index,
+              percent: language.percent,
+              // @ts-ignore
+              progressBarColor: titleColor,
+              // @ts-ignore
+              progressBarBackgroundColor:
+                textColor === titleColor ? bgColor : textColor,
+              hideProgress: hide_progress,
+              progressBarWidth: normalizedWidth - TOTAL_TEXT_WIDTH,
+            });
+          })
+        : [
+            noCodingActivityNode({
+              // @ts-ignore
+              color: textColor,
+              text: stats.is_coding_activity_visible
+                ? stats.is_other_usage_visible
+                  ? i18n.t("wakatimecard.nocodingactivity")
+                  : i18n.t("wakatimecard.nocodedetails")
+                : i18n.t("wakatimecard.notpublic"),
+            }),
+          ],
+      gap: lheight,
+      direction: "column",
+    }).join("");
+  }
+
+  // Get title range text
+  let titleText = i18n.t("wakatimecard.title");
+  switch (stats.range) {
+    case "last_7_days":
+      titleText += ` (${i18n.t("wakatimecard.last7days")})`;
+      break;
+    case "last_year":
+      titleText += ` (${i18n.t("wakatimecard.lastyear")})`;
+      break;
+  }
+
+  const card = new Card({
+    customTitle: custom_title,
+    defaultTitle: titleText,
+    width: normalizedWidth,
+    height,
+    border_radius,
+    colors: {
+      titleColor,
+      textColor,
+      iconColor,
+      bgColor,
+      borderColor,
+    },
+  });
+
+  if (disable_animations) {
+    card.disableAnimations();
+  }
+
+  card.setHideBorder(hide_border);
+  card.setHideTitle(hide_title);
+  card.setCSS(
+    `
+    ${cssStyles}
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    `,
+  );
+
+  return card.render(`
+    <svg x="0" y="0" width="100%">
+      ${finalLayout}
+    </svg>
+  `);
+};
+
+export { renderWakatimeCard };

packages/core/src/common/Card.js

@@ -0,0 +1,275 @@
+// @ts-check
+
+import { encodeHTML } from "./html.js";
+import { flexLayout } from "./render.js";
+
+class Card {
+  /**
+   * Creates a new card instance.
+   *
+   * @param {object} args Card arguments.
+   * @param {number=} args.width Card width.
+   * @param {number=} args.height Card height.
+   * @param {number=} args.border_radius Card border radius.
+   * @param {string=} args.customTitle Card custom title.
+   * @param {string=} args.defaultTitle Card default title.
+   * @param {string=} args.titlePrefixIcon Card title prefix icon.
+   * @param {object} [args.colors={}] Card colors arguments.
+   * @param {string=} args.colors.titleColor Card title color.
+   * @param {string=} args.colors.textColor Card text color.
+   * @param {string=} args.colors.iconColor Card icon color.
+   * @param {string|string[]=} args.colors.bgColor Card background color.
+   * @param {string=} args.colors.borderColor Card border color.
+   */
+  constructor({
+    width = 100,
+    height = 100,
+    border_radius = 4.5,
+    colors = {},
+    customTitle,
+    defaultTitle = "",
+    titlePrefixIcon,
+  }) {
+    this.width = width;
+    this.height = height;
+
+    this.hideBorder = false;
+    this.hideTitle = false;
+
+    this.border_radius = border_radius;
+
+    // returns theme based colors with proper overrides and defaults
+    this.colors = colors;
+    this.title =
+      customTitle === undefined
+        ? encodeHTML(defaultTitle)
+        : encodeHTML(customTitle);
+
+    this.css = "";
+
+    this.paddingX = 25;
+    this.paddingY = 35;
+    this.titlePrefixIcon = titlePrefixIcon;
+    this.animations = true;
+    this.a11yTitle = "";
+    this.a11yDesc = "";
+  }
+
+  /**
+   * @returns {void}
+   */
+  disableAnimations() {
+    this.animations = false;
+  }
+
+  /**
+   * @param {Object} props The props object.
+   * @param {string} props.title Accessibility title.
+   * @param {string} props.desc Accessibility description.
+   * @returns {void}
+   */
+  setAccessibilityLabel({ title, desc }) {
+    this.a11yTitle = title;
+    this.a11yDesc = desc;
+  }
+
+  /**
+   * @param {string} value The CSS to add to the card.
+   * @returns {void}
+   */
+  setCSS(value) {
+    this.css = value;
+  }
+
+  /**
+   * @param {boolean} value Whether to hide the border or not.
+   * @returns {void}
+   */
+  setHideBorder(value) {
+    this.hideBorder = value;
+  }
+
+  /**
+   * @param {boolean} value Whether to hide the title or not.
+   * @returns {void}
+   */
+  setHideTitle(value) {
+    this.hideTitle = value;
+    if (value) {
+      this.height -= 30;
+    }
+  }
+
+  /**
+   * @param {string} text The title to set.
+   * @returns {void}
+   */
+  setTitle(text) {
+    this.title = text;
+  }
+
+  /**
+   * @returns {string} The rendered card title.
+   */
+  renderTitle() {
+    const titleText = `
+      <text
+        x="0"
+        y="0"
+        class="header"
+        data-testid="header"
+      >${this.title}</text>
+    `;
+
+    const prefixIcon = `
+      <svg
+        class="icon"
+        x="0"
+        y="-13"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        height="16"
+      >
+        ${this.titlePrefixIcon}
+      </svg>
+    `;
+    return `
+      <g
+        data-testid="card-title"
+        transform="translate(${this.paddingX}, ${this.paddingY})"
+      >
+        ${flexLayout({
+          items: [this.titlePrefixIcon ? prefixIcon : "", titleText],
+          gap: 25,
+        }).join("")}
+      </g>
+    `;
+  }
+
+  /**
+   * @returns {string} The rendered card gradient.
+   */
+  renderGradient() {
+    if (typeof this.colors.bgColor !== "object") {
+      return "";
+    }
+
+    const gradients = this.colors.bgColor.slice(1);
+    return typeof this.colors.bgColor === "object"
+      ? `
+        <defs>
+          <linearGradient
+            id="gradient"
+            gradientTransform="rotate(${this.colors.bgColor[0]})"
+            gradientUnits="userSpaceOnUse"
+          >
+            ${gradients.map((grad, index) => {
+              let offset = (index * 100) / (gradients.length - 1);
+              return `<stop offset="${offset}%" stop-color="#${grad}" />`;
+            })}
+          </linearGradient>
+        </defs>
+        `
+      : "";
+  }
+
+  /**
+   * Retrieves css animations for a card.
+   *
+   * @returns {string} Animation css.
+   */
+  getAnimations = () => {
+    return `
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    `;
+  };
+
+  /**
+   * @param {string} body The inner body of the card.
+   * @returns {string} The rendered card.
+   */
+  render(body) {
+    return `
+      <svg
+        width="${this.width}"
+        height="${this.height}"
+        viewBox="0 0 ${this.width} ${this.height}"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-labelledby="descId"
+      >
+        <title id="titleId">${this.a11yTitle}</title>
+        <desc id="descId">${this.a11yDesc}</desc>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: ${this.colors.titleColor};
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          ${this.css}
+
+          ${this.getAnimations()}
+          ${
+            this.animations === false
+              ? `* { animation-duration: 0s !important; animation-delay: 0s !important; }`
+              : ""
+          }
+        </style>
+
+        ${this.renderGradient()}
+
+        <rect
+          data-testid="card-bg"
+          x="0.5"
+          y="0.5"
+          rx="${this.border_radius}"
+          height="99%"
+          stroke="${this.colors.borderColor}"
+          width="${this.width - 1}"
+          fill="${
+            typeof this.colors.bgColor === "object"
+              ? "url(#gradient)"
+              : this.colors.bgColor
+          }"
+          stroke-opacity="${this.hideBorder ? 0 : 1}"
+        />
+
+        ${this.hideTitle ? "" : this.renderTitle()}
+
+        <g
+          data-testid="main-card-body"
+          transform="translate(0, ${
+            this.hideTitle ? this.paddingX : this.paddingY + 20
+          })"
+        >
+          ${body}
+        </g>
+      </svg>
+    `;
+  }
+}
+
+export { Card };
+export default Card;

packages/core/src/common/I18n.js

@@ -0,0 +1,42 @@
+// @ts-check
+
+const FALLBACK_LOCALE = "en";
+
+/**
+ * I18n translation class.
+ */
+class I18n {
+  /**
+   * Constructor.
+   *
+   * @param {Object} options Options.
+   * @param {string=} options.locale Locale.
+   * @param {any} options.translations Translations.
+   */
+  constructor({ locale, translations }) {
+    this.locale = locale || FALLBACK_LOCALE;
+    this.translations = translations;
+  }
+
+  /**
+   * Get translation.
+   *
+   * @param {string} str String to translate.
+   * @returns {string} Translated string.
+   */
+  t(str) {
+    if (!this.translations[str]) {
+      throw new Error(`${str} Translation string not found`);
+    }
+
+    if (!this.translations[str][this.locale]) {
+      throw new Error(
+        `'${str}' translation not found for locale '${this.locale}'`,
+      );
+    }
+
+    return this.translations[str][this.locale];
+  }
+}
+
+export { I18n };

packages/core/src/common/color.js

@@ -0,0 +1,145 @@
+// @ts-check
+
+import { themes } from "../themes/index.js";
+
+/**
+ * Checks if a string is a valid hex color.
+ *
+ * @param {string} hexColor String to check.
+ * @returns {boolean} True if the given string is a valid hex color.
+ */
+const 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})$/,
+  ).test(hexColor);
+};
+
+/**
+ * Check if the given string is a valid gradient.
+ *
+ * @param {string[]} colors Array of colors.
+ * @returns {boolean} True if the given string is a valid gradient.
+ */
+const isValidGradient = (colors) => {
+  return (
+    colors.length > 2 &&
+    colors.slice(1).every((color) => isValidHexColor(color))
+  );
+};
+
+/**
+ * Retrieves a gradient if color has more than one valid hex codes else a single color.
+ *
+ * @param {string} color The color to parse.
+ * @param {string | string[]} fallbackColor The fallback color.
+ * @returns {string | string[]} The gradient or color.
+ */
+const fallbackColor = (color, fallbackColor) => {
+  let gradient = null;
+
+  let colors = color ? color.split(",") : [];
+  if (colors.length > 1 && isValidGradient(colors)) {
+    gradient = colors;
+  }
+
+  return (
+    (gradient ? gradient : isValidHexColor(color) && `#${color}`) ||
+    fallbackColor
+  );
+};
+
+/**
+ * Object containing card colors.
+ * @typedef {{
+ *  titleColor: string;
+ *  iconColor: string;
+ *  textColor: string;
+ *  bgColor: string | string[];
+ *  borderColor: string;
+ *  ringColor: string;
+ * }} CardColors
+ */
+
+/**
+ * Returns theme based colors with proper overrides and defaults.
+ *
+ * @param {Object} args Function arguments.
+ * @param {string=} args.title_color Card title color.
+ * @param {string=} args.text_color Card text color.
+ * @param {string=} args.icon_color Card icon color.
+ * @param {string=} args.bg_color Card background color.
+ * @param {string=} args.border_color Card border color.
+ * @param {string=} args.ring_color Card ring color.
+ * @param {string=} args.theme Card theme.
+ * @returns {CardColors} Card colors.
+ */
+const getCardColors = ({
+  title_color,
+  text_color,
+  icon_color,
+  bg_color,
+  border_color,
+  ring_color,
+  theme,
+}) => {
+  const defaultTheme = themes["default"];
+  const isThemeProvided =
+    theme !== null && theme !== undefined && theme in themes;
+
+  // @ts-ignore
+  const selectedTheme = isThemeProvided ? themes[theme] : defaultTheme;
+
+  const defaultBorderColor =
+    "border_color" in selectedTheme
+      ? selectedTheme.border_color
+      : // @ts-ignore
+        defaultTheme.border_color;
+
+  // get the color provided by the user else the theme color
+  // finally if both colors are invalid fallback to default theme
+  const titleColor = fallbackColor(
+    title_color || selectedTheme.title_color,
+    "#" + defaultTheme.title_color,
+  );
+
+  // get the color provided by the user else the theme color
+  // finally if both colors are invalid we use the titleColor
+  const ringColor = fallbackColor(
+    // @ts-ignore
+    ring_color || selectedTheme.ring_color,
+    titleColor,
+  );
+  const iconColor = fallbackColor(
+    icon_color || selectedTheme.icon_color,
+    "#" + defaultTheme.icon_color,
+  );
+  const textColor = fallbackColor(
+    text_color || selectedTheme.text_color,
+    "#" + defaultTheme.text_color,
+  );
+  const bgColor = fallbackColor(
+    bg_color || selectedTheme.bg_color,
+    "#" + defaultTheme.bg_color,
+  );
+
+  const borderColor = fallbackColor(
+    border_color || defaultBorderColor,
+    "#" + defaultBorderColor,
+  );
+
+  if (
+    typeof titleColor !== "string" ||
+    typeof textColor !== "string" ||
+    typeof ringColor !== "string" ||
+    typeof iconColor !== "string" ||
+    typeof borderColor !== "string"
+  ) {
+    throw new Error(
+      "Unexpected behavior, all colors except background should be string.",
+    );
+  }
+
+  return { titleColor, iconColor, textColor, bgColor, borderColor, ringColor };
+};
+
+export { fallbackColor, getCardColors };

packages/core/src/common/config.js

@@ -0,0 +1,78 @@
+// @ts-check
+
+/**
+ * @param {string | undefined} value Comma-separated string.
+ * @returns {string[] | undefined} Parsed string values.
+ */
+const parseCsv = (value) => {
+  if (!value) {
+    return undefined;
+  }
+  return value.split(",");
+};
+
+/**
+ * @param {Record<string, string | undefined>} env Environment variables to inspect.
+ * @returns {{name: string, value: string}[]} Personal access tokens found in the environment.
+ */
+const parsePATsFromEnv = (env) => {
+  return Object.keys(env)
+    .filter((key) => /PAT_\d*$/.exec(key))
+    .map((name) => ({
+      name,
+      value: env[name],
+    }));
+};
+
+/**
+ * @returns {Record<string, string | undefined>} `process.env` if available, otherwise `{}`.
+ */
+const getDefaultEnv = () => {
+  if (typeof process !== "undefined" && process?.env) {
+    return process.env;
+  }
+  return {};
+};
+
+/**
+ * @param {Partial<ReturnType<typeof loadConfigFromEnv>>} config (Partial) config values to normalize.
+ * @returns {{
+ *   whitelist: string[] | undefined,
+ *   gistWhitelist: string[] | undefined,
+ *   excludeRepositories: string[],
+ *   fetchMultiPageStars: string | undefined,
+ *   pats: {name: string, value: string}[],
+ * }} Normalized config object with defaults applied.
+ */
+const normalizeConfig = (config = {}) => {
+  return {
+    whitelist: config.whitelist,
+    gistWhitelist: config.gistWhitelist,
+    excludeRepositories: config.excludeRepositories || [],
+    fetchMultiPageStars: config.fetchMultiPageStars,
+    pats: config.pats || [],
+  };
+};
+
+let currentConfig;
+
+/**
+ * @param {Record<string, string | undefined>} env Environment variables used to build the runtime config.
+ */
+export const loadConfigFromEnv = (env = getDefaultEnv()) => {
+  const whitelist = parseCsv(env.WHITELIST);
+  const gistWhitelist = parseCsv(env.GIST_WHITELIST);
+  const excludeRepositories = parseCsv(env.EXCLUDE_REPO) || [];
+
+  currentConfig = normalizeConfig({
+    whitelist,
+    gistWhitelist,
+    excludeRepositories,
+    fetchMultiPageStars: env.FETCH_MULTI_PAGE_STARS,
+    pats: parsePATsFromEnv(env),
+  });
+};
+
+loadConfigFromEnv();
+
+export const getConfig = () => currentConfig;

packages/core/src/common/constants.js

@@ -0,0 +1,9 @@
+// @ts-check
+
+/**
+ * Valid owner affiliations for GitHub API queries.
+ * @type {Array<string>}
+ */
+const OWNER_AFFILIATIONS = ["OWNER", "COLLABORATOR", "ORGANIZATION_MEMBER"];
+
+export { OWNER_AFFILIATIONS };

packages/core/src/common/error.js

@@ -0,0 +1,90 @@
+// @ts-check
+
+import { OWNER_AFFILIATIONS } from "./constants.js";
+
+/**
+ * @type {string} A general message to ask user to try again later.
+ */
+const TRY_AGAIN_LATER = "Please try again later";
+
+/**
+ * @type {Object<string, string>} A map of error types to secondary error messages.
+ */
+const SECONDARY_ERROR_MESSAGES = {
+  MAX_RETRY:
+    "You can deploy own instance or wait until public will be no longer limited",
+  NO_TOKENS:
+    "Please add an env variable called PAT_1 with your GitHub API token in vercel",
+  USER_NOT_FOUND: "Make sure the provided username is not an organization",
+  GRAPHQL_ERROR: TRY_AGAIN_LATER,
+  GITHUB_REST_API_ERROR: TRY_AGAIN_LATER,
+  WAKATIME_USER_NOT_FOUND: "Make sure you have a public WakaTime profile",
+  INVALID_AFFILIATION: `Invalid owner affiliations. Valid values are: ${OWNER_AFFILIATIONS.join(
+    ", ",
+  )}`,
+};
+
+/**
+ * Custom error class to handle custom GRS errors.
+ */
+class CustomError extends Error {
+  /**
+   * Custom error constructor.
+   *
+   * @param {string} message Error message.
+   * @param {string} type Error type.
+   */
+  constructor(message, type) {
+    super(message);
+    this.type = type;
+    this.secondaryMessage = SECONDARY_ERROR_MESSAGES[type] || type;
+  }
+
+  static MAX_RETRY = "MAX_RETRY";
+  static NO_TOKENS = "NO_TOKENS";
+  static USER_NOT_FOUND = "USER_NOT_FOUND";
+  static GRAPHQL_ERROR = "GRAPHQL_ERROR";
+  static GITHUB_REST_API_ERROR = "GITHUB_REST_API_ERROR";
+  static WAKATIME_ERROR = "WAKATIME_ERROR";
+  static INVALID_AFFILIATION = "INVALID_AFFILIATION";
+}
+
+/**
+ * Missing query parameter class.
+ */
+class MissingParamError extends Error {
+  /**
+   * Missing query parameter error constructor.
+   *
+   * @param {string[]} missedParams An array of missing parameters names.
+   * @param {string=} secondaryMessage Optional secondary message to display.
+   */
+  constructor(missedParams, secondaryMessage) {
+    const msg = `Missing params ${missedParams
+      .map((p) => `"${p}"`)
+      .join(", ")} make sure you pass the parameters in URL`;
+    super(msg);
+    this.missedParams = missedParams;
+    this.secondaryMessage = secondaryMessage;
+  }
+}
+
+/**
+ * Retrieve secondary message from an error object.
+ *
+ * @param {Error} err The error object.
+ * @returns {string|undefined} The secondary message if available, otherwise undefined.
+ */
+const retrieveSecondaryMessage = (err) => {
+  return "secondaryMessage" in err && typeof err.secondaryMessage === "string"
+    ? err.secondaryMessage
+    : undefined;
+};
+
+export {
+  CustomError,
+  MissingParamError,
+  SECONDARY_ERROR_MESSAGES,
+  TRY_AGAIN_LATER,
+  retrieveSecondaryMessage,
+};

packages/core/src/common/fmt.js

@@ -0,0 +1,91 @@
+// @ts-check
+
+import wrap from "word-wrap";
+
+import { encodeHTML } from "./html.js";
+
+/**
+ * Retrieves num with suffix k(thousands) precise to given decimal places.
+ *
+ * @param {number} num The number to format.
+ * @param {number=} precision The number of decimal places to include.
+ * @returns {string|number} The formatted number.
+ */
+const kFormatter = (num, precision) => {
+  const abs = Math.abs(num);
+  const sign = Math.sign(num);
+
+  if (typeof precision === "number" && !isNaN(precision)) {
+    return (sign * (abs / 1000)).toFixed(precision) + "k";
+  }
+
+  if (abs < 1000) {
+    return sign * abs;
+  }
+
+  return sign * parseFloat((abs / 1000).toFixed(1)) + "k";
+};
+
+/**
+ * Convert bytes to a human-readable string representation.
+ *
+ * @param {number} bytes The number of bytes to convert.
+ * @returns {string} The human-readable representation of bytes.
+ * @throws {Error} If bytes is negative or too large.
+ */
+const formatBytes = (bytes) => {
+  if (bytes < 0) {
+    throw new Error("Bytes must be a non-negative number");
+  }
+
+  if (bytes === 0) {
+    return "0 B";
+  }
+
+  const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
+  const base = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(base));
+
+  if (i >= sizes.length) {
+    throw new Error("Bytes is too large to convert to a human-readable string");
+  }
+
+  return `${(bytes / Math.pow(base, i)).toFixed(1)} ${sizes[i]}`;
+};
+
+/**
+ * Split text over multiple lines based on the card width.
+ *
+ * @param {string} text Text to split.
+ * @param {number} width Line width in number of characters.
+ * @param {number} maxLines Maximum number of lines.
+ * @returns {string[]} Array of lines.
+ */
+const wrapTextMultiline = (text, width = 59, maxLines = 3) => {
+  const fullWidthComma = "，";
+  const encoded = encodeHTML(text);
+  const isChinese = encoded.includes(fullWidthComma);
+
+  let wrapped;
+
+  if (isChinese) {
+    wrapped = encoded.split(fullWidthComma); // Chinese full punctuation
+  } else {
+    wrapped = wrap(encoded, {
+      width,
+    }).split("\n"); // Split wrapped lines to get an array of lines
+  }
+
+  const lines = wrapped.map((line) => line.trim()).slice(0, maxLines); // Only consider maxLines lines
+
+  // Add "..." to the last line if the text exceeds maxLines
+  if (wrapped.length > maxLines) {
+    lines[maxLines - 1] += "...";
+  }
+
+  // Remove empty lines if text fits in less than maxLines lines
+  const multiLineText = lines.filter(Boolean);
+  return multiLineText;
+};
+
+export { kFormatter, formatBytes, wrapTextMultiline };

packages/core/src/common/html.js

@@ -0,0 +1,22 @@
+// @ts-check
+
+/**
+ * Encode string as HTML.
+ *
+ * @see https://stackoverflow.com/a/48073476/10629172
+ *
+ * @param {string} str String to encode.
+ * @returns {string} Encoded string.
+ */
+const encodeHTML = (str) => {
+  return (
+    str
+      .replace(/[\u00A0-\u9999<>&](?!#)/gim, (i) => {
+        return "&#" + i.charCodeAt(0) + ";";
+      })
+      // eslint-disable-next-line no-control-regex
+      .replace(/\u0008/gim, "")
+  );
+};
+
+export { encodeHTML };

packages/core/src/common/http.js

@@ -0,0 +1,21 @@
+// @ts-check
+
+import axios from "axios";
+
+/**
+ * Send GraphQL request to GitHub API.
+ *
+ * @param {import('axios').AxiosRequestConfig['data']} data Request data.
+ * @param {import('axios').AxiosRequestConfig['headers']} headers Request headers.
+ * @returns {Promise<any>} Request response.
+ */
+const request = (data, headers) => {
+  return axios({
+    url: "https://api.github.com/graphql",
+    method: "post",
+    headers,
+    data,
+  });
+};
+
+export { request };

packages/core/src/common/icons.js

@@ -0,0 +1,55 @@
+// @ts-check
+
+const icons = {
+  star: `<path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>`,
+  commits: `<path fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"/>`,
+  prs: `<path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/>`,
+  prs_merged: `<path fill-rule="evenodd" d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z" />`,
+  prs_merged_percentage: `<path fill-rule="evenodd" d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0zM4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />`,
+  issues: `<path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/>`,
+  icon: `<path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/>`,
+  contribs: `<path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/>`,
+  fork: `<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>`,
+  reviews: `<path fill-rule="evenodd" d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"/>`,
+  discussions_started: `<path fill-rule="evenodd" d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z" />`,
+  discussions_answered: `<path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" />`,
+  comments: `<path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />`,
+  gist: `<path fill-rule="evenodd" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z" />`,
+};
+
+/**
+ * Get rank icon
+ *
+ * @param {string} rankIcon - The rank icon type.
+ * @param {string} rankLevel - The rank level.
+ * @param {number} percentile - The rank percentile.
+ * @returns {string} - The SVG code of the rank icon
+ */
+const rankIcon = (rankIcon, rankLevel, percentile) => {
+  switch (rankIcon) {
+    case "github":
+      return `
+        <svg x="-38" y="-30" height="66" width="66" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" data-testid="github-rank-icon">
+          <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+        </svg>
+      `;
+    case "percentile":
+      return `
+        <text x="-5" y="-12" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="percentile-top-header" class="rank-percentile-header">
+          Top
+        </text>
+        <text x="-5" y="12" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="percentile-rank-value" class="rank-percentile-text">
+          ${percentile.toFixed(1)}%
+        </text>
+      `;
+    case "default":
+    default:
+      return `
+        <text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="level-rank-icon">
+          ${rankLevel}
+        </text>
+      `;
+  }
+};
+
+export { icons, rankIcon };

packages/core/src/common/languageColors.json

@@ -0,0 +1,666 @@
+{
+  "1C Enterprise": "#814CCC",
+  "2-Dimensional Array": "#38761D",
+  "4D": "#004289",
+  "ABAP": "#E8274B",
+  "ABAP CDS": "#555e25",
+  "AGS Script": "#B9D9FF",
+  "AIDL": "#34EB6B",
+  "AL": "#3AA2B5",
+  "ALGOL": "#D1E0DB",
+  "AMPL": "#E6EFBB",
+  "ANTLR": "#9DC3FF",
+  "API Blueprint": "#2ACCA8",
+  "APL": "#5A8164",
+  "ASP.NET": "#9400ff",
+  "ATS": "#1ac620",
+  "ActionScript": "#882B0F",
+  "Ada": "#02f88c",
+  "Adblock Filter List": "#800000",
+  "Adobe Font Metrics": "#fa0f00",
+  "Agda": "#315665",
+  "Aiken": "#640ff8",
+  "Alloy": "#64C800",
+  "Alpine Abuild": "#0D597F",
+  "Altium Designer": "#A89663",
+  "AngelScript": "#C7D7DC",
+  "Answer Set Programming": "#A9CC29",
+  "Ant Build System": "#A9157E",
+  "Antlers": "#ff269e",
+  "ApacheConf": "#d12127",
+  "Apex": "#1797c0",
+  "Apollo Guidance Computer": "#0B3D91",
+  "AppleScript": "#101F1F",
+  "Arc": "#aa2afe",
+  "AsciiDoc": "#73a0c5",
+  "AspectJ": "#a957b0",
+  "Assembly": "#6E4C13",
+  "Astro": "#ff5a03",
+  "Asymptote": "#ff0000",
+  "Augeas": "#9CC134",
+  "AutoHotkey": "#6594b9",
+  "AutoIt": "#1C3552",
+  "Avro IDL": "#0040FF",
+  "Awk": "#c30e9b",
+  "B (Formal Method)": "#8aa8c5",
+  "B4X": "#00e4ff",
+  "BASIC": "#ff0000",
+  "BQN": "#2b7067",
+  "Ballerina": "#FF5000",
+  "Batchfile": "#C1F12E",
+  "Beef": "#a52f4e",
+  "Berry": "#15A13C",
+  "BibTeX": "#778899",
+  "Bicep": "#519aba",
+  "Bikeshed": "#5562ac",
+  "Bison": "#6A463F",
+  "BitBake": "#00bce4",
+  "Blade": "#f7523f",
+  "BlitzBasic": "#00FFAE",
+  "BlitzMax": "#cd6400",
+  "Bluespec": "#12223c",
+  "Bluespec BH": "#12223c",
+  "Boo": "#d4bec1",
+  "Boogie": "#c80fa0",
+  "Brainfuck": "#2F2530",
+  "BrighterScript": "#66AABB",
+  "Brightscript": "#662D91",
+  "Browserslist": "#ffd539",
+  "Bru": "#F4AA41",
+  "BuildStream": "#006bff",
+  "C": "#555555",
+  "C#": "#178600",
+  "C++": "#f34b7d",
+  "C3": "#2563eb",
+  "CAP CDS": "#0092d1",
+  "CLIPS": "#00A300",
+  "CMake": "#DA3434",
+  "COLLADA": "#F1A42B",
+  "CQL": "#006091",
+  "CSON": "#244776",
+  "CSS": "#663399",
+  "CSV": "#237346",
+  "CUE": "#5886E1",
+  "CWeb": "#00007a",
+  "Cabal Config": "#483465",
+  "Caddyfile": "#22b638",
+  "Cadence": "#00ef8b",
+  "Cairo": "#ff4a48",
+  "Cairo Zero": "#ff4a48",
+  "CameLIGO": "#3be133",
+  "Cangjie": "#00868B",
+  "Cap'n Proto": "#c42727",
+  "Carbon": "#222222",
+  "Ceylon": "#dfa535",
+  "Chapel": "#8dc63f",
+  "ChucK": "#3f8000",
+  "Circom": "#707575",
+  "Cirru": "#ccccff",
+  "Clarion": "#db901e",
+  "Clarity": "#5546ff",
+  "Classic ASP": "#6a40fd",
+  "Clean": "#3F85AF",
+  "Click": "#E4E6F3",
+  "Clojure": "#db5855",
+  "Closure Templates": "#0d948f",
+  "Cloud Firestore Security Rules": "#FFA000",
+  "Clue": "#0009b5",
+  "CodeQL": "#140f46",
+  "CoffeeScript": "#244776",
+  "ColdFusion": "#ed2cd6",
+  "ColdFusion CFC": "#ed2cd6",
+  "Common Lisp": "#3fb68b",
+  "Common Workflow Language": "#B5314C",
+  "Component Pascal": "#B0CE4E",
+  "Cooklang": "#E15A29",
+  "Crystal": "#000100",
+  "Csound": "#1a1a1a",
+  "Csound Document": "#1a1a1a",
+  "Csound Score": "#1a1a1a",
+  "Cuda": "#3A4E3A",
+  "Curry": "#531242",
+  "Cylc": "#00b3fd",
+  "Cypher": "#34c0eb",
+  "Cython": "#fedf5b",
+  "D": "#ba595e",
+  "D2": "#526ee8",
+  "DM": "#447265",
+  "Dafny": "#FFEC25",
+  "Darcs Patch": "#8eff23",
+  "Dart": "#00B4AB",
+  "Daslang": "#d3d3d3",
+  "DataWeave": "#003a52",
+  "Debian Package Control File": "#D70751",
+  "DenizenScript": "#FBEE96",
+  "Dhall": "#dfafff",
+  "DirectX 3D File": "#aace60",
+  "Dockerfile": "#384d54",
+  "Dogescript": "#cca760",
+  "Dotenv": "#e5d559",
+  "Dune": "#89421e",
+  "Dylan": "#6c616e",
+  "E": "#ccce35",
+  "ECL": "#8a1267",
+  "ECLiPSe": "#001d9d",
+  "EJS": "#a91e50",
+  "EQ": "#a78649",
+  "Earthly": "#2af0ff",
+  "Easybuild": "#069406",
+  "Ecere Projects": "#913960",
+  "Ecmarkup": "#eb8131",
+  "Edge": "#0dffe0",
+  "EdgeQL": "#31A7FF",
+  "EditorConfig": "#fff1f2",
+  "Eiffel": "#4d6977",
+  "Elixir": "#6e4a7e",
+  "Elm": "#60B5CC",
+  "Elvish": "#55BB55",
+  "Elvish Transcript": "#55BB55",
+  "Emacs Lisp": "#c065db",
+  "EmberScript": "#FFF4F3",
+  "Erlang": "#B83998",
+  "Euphoria": "#FF790B",
+  "F#": "#b845fc",
+  "F*": "#572e30",
+  "FIGlet Font": "#FFDDBB",
+  "FIRRTL": "#2f632f",
+  "FLUX": "#88ccff",
+  "Factor": "#636746",
+  "Fancy": "#7b9db4",
+  "Fantom": "#14253c",
+  "Faust": "#c37240",
+  "Fennel": "#fff3d7",
+  "Filebench WML": "#F6B900",
+  "FlatBuffers": "#ed284a",
+  "Flix": "#d44a45",
+  "Fluent": "#ffcc33",
+  "Forth": "#341708",
+  "Fortran": "#4d41b1",
+  "Fortran Free Form": "#4d41b1",
+  "FreeBASIC": "#141AC9",
+  "FreeMarker": "#0050b2",
+  "Frege": "#00cafe",
+  "Futhark": "#5f021f",
+  "G-code": "#D08CF2",
+  "GAML": "#FFC766",
+  "GAMS": "#f49a22",
+  "GAP": "#0000cc",
+  "GCC Machine Description": "#FFCFAB",
+  "GDScript": "#355570",
+  "GDShader": "#478CBF",
+  "GEDCOM": "#003058",
+  "GLSL": "#5686a5",
+  "GSC": "#FF6800",
+  "Game Maker Language": "#71b417",
+  "Gemfile.lock": "#701516",
+  "Gemini": "#ff6900",
+  "Genero 4gl": "#63408e",
+  "Genero per": "#d8df39",
+  "Genie": "#fb855d",
+  "Genshi": "#951531",
+  "Gentoo Ebuild": "#9400ff",
+  "Gentoo Eclass": "#9400ff",
+  "Gerber Image": "#d20b00",
+  "Gherkin": "#5B2063",
+  "Git Attributes": "#F44D27",
+  "Git Commit": "#F44D27",
+  "Git Config": "#F44D27",
+  "Git Revision List": "#F44D27",
+  "Gleam": "#ffaff3",
+  "Glimmer JS": "#F5835F",
+  "Glimmer TS": "#3178c6",
+  "Glyph": "#c1ac7f",
+  "Gnuplot": "#f0a9f0",
+  "Go": "#00ADD8",
+  "Go Checksums": "#00ADD8",
+  "Go Module": "#00ADD8",
+  "Go Template": "#00ADD8",
+  "Go Workspace": "#00ADD8",
+  "Godot Resource": "#355570",
+  "Golo": "#88562A",
+  "Gosu": "#82937f",
+  "Grace": "#615f8b",
+  "Gradle": "#02303a",
+  "Gradle Kotlin DSL": "#02303a",
+  "Grammatical Framework": "#ff0000",
+  "GraphQL": "#e10098",
+  "Graphviz (DOT)": "#2596be",
+  "Groovy": "#4298b8",
+  "Groovy Server Pages": "#4298b8",
+  "HAProxy": "#106da9",
+  "HCL": "#844FBA",
+  "HIP": "#4F3A4F",
+  "HLSL": "#aace60",
+  "HOCON": "#9ff8ee",
+  "HTML": "#e34c26",
+  "HTML+ECR": "#2e1052",
+  "HTML+EEX": "#6e4a7e",
+  "HTML+ERB": "#701516",
+  "HTML+PHP": "#4f5d95",
+  "HTML+Razor": "#512be4",
+  "HTTP": "#005C9C",
+  "HXML": "#f68712",
+  "Hack": "#878787",
+  "Haml": "#ece2a9",
+  "Handlebars": "#f7931e",
+  "Harbour": "#0e60e3",
+  "Hare": "#9d7424",
+  "Haskell": "#5e5086",
+  "Haxe": "#df7900",
+  "HiveQL": "#dce200",
+  "HolyC": "#ffefaf",
+  "Hosts File": "#308888",
+  "Hurl": "#FF0288",
+  "Hy": "#7790B2",
+  "IDL": "#a3522f",
+  "IGOR Pro": "#0000cc",
+  "INI": "#d1dbe0",
+  "ISPC": "#2D68B1",
+  "Idris": "#b30000",
+  "Ignore List": "#000000",
+  "ImageJ Macro": "#99AAFF",
+  "Imba": "#16cec6",
+  "Inno Setup": "#264b99",
+  "Io": "#a9188d",
+  "Ioke": "#078193",
+  "Isabelle": "#FEFE00",
+  "Isabelle ROOT": "#FEFE00",
+  "J": "#9EEDFF",
+  "JAR Manifest": "#b07219",
+  "JCL": "#d90e09",
+  "JFlex": "#DBCA00",
+  "JSON": "#292929",
+  "JSON with Comments": "#292929",
+  "JSON5": "#267CB9",
+  "JSONLD": "#0c479c",
+  "JSONiq": "#40d47e",
+  "Jac": "#FC792D",
+  "Jai": "#ab8b4b",
+  "Janet": "#0886a5",
+  "Jasmin": "#d03600",
+  "Java": "#b07219",
+  "Java Properties": "#2A6277",
+  "Java Server Pages": "#2A6277",
+  "Java Template Engine": "#2A6277",
+  "JavaScript": "#f1e05a",
+  "JavaScript+ERB": "#f1e05a",
+  "Jest Snapshot": "#15c213",
+  "JetBrains MPS": "#21D789",
+  "Jinja": "#a52a22",
+  "Jison": "#56b3cb",
+  "Jison Lex": "#56b3cb",
+  "Jolie": "#843179",
+  "Jsonnet": "#0064bd",
+  "Julia": "#a270ba",
+  "Julia REPL": "#a270ba",
+  "Jupyter Notebook": "#DA5B0B",
+  "Just": "#384d54",
+  "KCL": "#7ABABF",
+  "KDL": "#ffb3b3",
+  "KFramework": "#4195c5",
+  "KRL": "#28430A",
+  "Kaitai Struct": "#773b37",
+  "KakouneScript": "#6f8042",
+  "KerboScript": "#41adf0",
+  "KiCad Layout": "#2f4aab",
+  "KiCad Legacy Layout": "#2f4aab",
+  "KiCad Schematic": "#2f4aab",
+  "KoLmafia ASH": "#B9D9B9",
+  "Koka": "#215166",
+  "Kotlin": "#A97BFF",
+  "LFE": "#4C3023",
+  "LLVM": "#185619",
+  "LOLCODE": "#cc9900",
+  "LSL": "#3d9970",
+  "LabVIEW": "#fede06",
+  "Lambdapi": "#8027a3",
+  "Langium": "#2c8c87",
+  "Lark": "#2980B9",
+  "Lasso": "#999999",
+  "Latte": "#f2a542",
+  "Leo": "#C4FFC2",
+  "Less": "#1d365d",
+  "Lex": "#DBCA00",
+  "LigoLANG": "#0e74ff",
+  "LilyPond": "#9ccc7c",
+  "Liquid": "#67b8de",
+  "Liquidsoap": "#990066",
+  "Literate Agda": "#315665",
+  "Literate CoffeeScript": "#244776",
+  "Literate Haskell": "#5e5086",
+  "LiveCode Script": "#0c5ba5",
+  "LiveScript": "#499886",
+  "Logtalk": "#295b9a",
+  "LookML": "#652B81",
+  "Lua": "#000080",
+  "Luau": "#00A2FF",
+  "M3U": "#179C7D",
+  "MATLAB": "#e16737",
+  "MAXScript": "#00a6a6",
+  "MDX": "#fcb32c",
+  "MLIR": "#5EC8DB",
+  "MQL4": "#62A8D6",
+  "MQL5": "#4A76B8",
+  "MTML": "#b7e1f4",
+  "Macaulay2": "#d8ffff",
+  "Makefile": "#427819",
+  "Mako": "#7e858d",
+  "Markdown": "#083fa1",
+  "Marko": "#42bff2",
+  "Mask": "#f97732",
+  "Mathematical Programming System": "#0530ad",
+  "Max": "#c4a79c",
+  "MeTTa": "#6a5acd",
+  "Mercury": "#ff2b2b",
+  "Mermaid": "#ff3670",
+  "Meson": "#007800",
+  "Metal": "#8f14e9",
+  "MiniYAML": "#ff1111",
+  "MiniZinc": "#06a9e6",
+  "Mint": "#02b046",
+  "Mirah": "#c7a938",
+  "Modelica": "#de1d31",
+  "Modula-2": "#10253f",
+  "Modula-3": "#223388",
+  "Mojo": "#ff4c1f",
+  "Monkey C": "#8D6747",
+  "MoonBit": "#b92381",
+  "MoonScript": "#ff4585",
+  "Motoko": "#fbb03b",
+  "Motorola 68K Assembly": "#005daa",
+  "Move": "#4a137a",
+  "Mustache": "#724b3b",
+  "NCL": "#28431f",
+  "NMODL": "#00356B",
+  "NPM Config": "#cb3837",
+  "NWScript": "#111522",
+  "Nasal": "#1d2c4e",
+  "Nearley": "#990000",
+  "Nemerle": "#3d3c6e",
+  "NetLinx": "#0aa0ff",
+  "NetLinx+ERB": "#747faa",
+  "NetLogo": "#ff6375",
+  "NewLisp": "#87AED7",
+  "Nextflow": "#3ac486",
+  "Nginx": "#009639",
+  "Nickel": "#E0C3FC",
+  "Nim": "#ffc200",
+  "Nit": "#009917",
+  "Nix": "#7e7eff",
+  "Noir": "#2f1f49",
+  "Nu": "#c9df40",
+  "NumPy": "#9C8AF9",
+  "Nunjucks": "#3d8137",
+  "Nushell": "#4E9906",
+  "OASv2-json": "#85ea2d",
+  "OASv2-yaml": "#85ea2d",
+  "OASv3-json": "#85ea2d",
+  "OASv3-yaml": "#85ea2d",
+  "OCaml": "#ef7a08",
+  "OMNeT++ MSG": "#a0e0a0",
+  "OMNeT++ NED": "#08607c",
+  "ObjectScript": "#424893",
+  "Objective-C": "#438eff",
+  "Objective-C++": "#6866fb",
+  "Objective-J": "#ff0c5a",
+  "Odin": "#60AFFE",
+  "Omgrofl": "#cabbff",
+  "Opal": "#f7ede0",
+  "Open Policy Agent": "#7d9199",
+  "OpenAPI Specification v2": "#85ea2d",
+  "OpenAPI Specification v3": "#85ea2d",
+  "OpenCL": "#ed2e2d",
+  "OpenEdge ABL": "#5ce600",
+  "OpenQASM": "#AA70FF",
+  "OpenSCAD": "#e5cd45",
+  "Option List": "#476732",
+  "Org": "#77aa99",
+  "OverpassQL": "#cce2aa",
+  "Oxygene": "#cdd0e3",
+  "Oz": "#fab738",
+  "P4": "#7055b5",
+  "PDDL": "#0d00ff",
+  "PEG.js": "#234d6b",
+  "PHP": "#4F5D95",
+  "PLSQL": "#dad8d8",
+  "PLpgSQL": "#336790",
+  "POV-Ray SDL": "#6bac65",
+  "Pact": "#F7A8B8",
+  "Pan": "#cc0000",
+  "Papyrus": "#6600cc",
+  "Parrot": "#f3ca0a",
+  "Pascal": "#E3F171",
+  "Pawn": "#dbb284",
+  "Pep8": "#C76F5B",
+  "Perl": "#0298c3",
+  "PicoLisp": "#6067af",
+  "PigLatin": "#fcd7de",
+  "Pike": "#005390",
+  "Pip Requirements": "#FFD343",
+  "Pkl": "#6b9543",
+  "PlantUML": "#fbbd16",
+  "PogoScript": "#d80074",
+  "Polar": "#ae81ff",
+  "Portugol": "#f8bd00",
+  "PostCSS": "#dc3a0c",
+  "PostScript": "#da291c",
+  "PowerBuilder": "#8f0f8d",
+  "PowerShell": "#012456",
+  "Praat": "#c8506d",
+  "Prisma": "#0c344b",
+  "Processing": "#0096D8",
+  "Procfile": "#3B2F63",
+  "Prolog": "#74283c",
+  "Promela": "#de0000",
+  "Propeller Spin": "#7fa2a7",
+  "Pug": "#a86454",
+  "Puppet": "#302B6D",
+  "PureBasic": "#5a6986",
+  "PureScript": "#1D222D",
+  "Pyret": "#ee1e10",
+  "Python": "#3572A5",
+  "Python console": "#3572A5",
+  "Python traceback": "#3572A5",
+  "Q#": "#fed659",
+  "QML": "#44a51c",
+  "Qt Script": "#00b841",
+  "Quake": "#882233",
+  "QuakeC": "#975777",
+  "QuickBASIC": "#008080",
+  "R": "#198CE7",
+  "RAML": "#77d9fb",
+  "RAScript": "#2C97FA",
+  "RBS": "#701516",
+  "RDoc": "#701516",
+  "REXX": "#d90e09",
+  "RMarkdown": "#198ce7",
+  "RON": "#a62c00",
+  "ROS Interface": "#22314e",
+  "RPGLE": "#2BDE21",
+  "RUNOFF": "#665a4e",
+  "Racket": "#3c5caa",
+  "Ragel": "#9d5200",
+  "Raku": "#0000fb",
+  "Rascal": "#fffaa0",
+  "ReScript": "#ed5051",
+  "Reason": "#ff5847",
+  "ReasonLIGO": "#ff5847",
+  "Rebol": "#358a5b",
+  "Record Jar": "#0673ba",
+  "Red": "#f50000",
+  "Regular Expression": "#009a00",
+  "Ren'Py": "#ff7f7f",
+  "Rez": "#FFDAB3",
+  "Ring": "#2D54CB",
+  "Riot": "#A71E49",
+  "RobotFramework": "#00c0b5",
+  "Roc": "#7c38f5",
+  "Rocq Prover": "#d0b68c",
+  "Roff": "#ecdebe",
+  "Roff Manpage": "#ecdebe",
+  "Rouge": "#cc0088",
+  "RouterOS Script": "#DE3941",
+  "Ruby": "#701516",
+  "Rust": "#dea584",
+  "SAS": "#B34936",
+  "SCSS": "#c6538c",
+  "SPARQL": "#0C4597",
+  "SQF": "#3F3F3F",
+  "SQL": "#e38c00",
+  "SQLPL": "#e38c00",
+  "SRecode Template": "#348a34",
+  "STL": "#373b5e",
+  "SVG": "#ff9900",
+  "Sail": "#259dd5",
+  "SaltStack": "#646464",
+  "Sass": "#a53b70",
+  "Scala": "#c22d40",
+  "Scaml": "#bd181a",
+  "Scenic": "#fdc700",
+  "Scheme": "#1e4aec",
+  "Scilab": "#ca0f21",
+  "Self": "#0579aa",
+  "ShaderLab": "#222c37",
+  "Shell": "#89e051",
+  "ShellCheck Config": "#cecfcb",
+  "Shen": "#120F14",
+  "Simple File Verification": "#C9BFED",
+  "Singularity": "#64E6AD",
+  "Slang": "#1fbec9",
+  "Slash": "#007eff",
+  "Slice": "#003fa2",
+  "Slim": "#2b2b2b",
+  "Slint": "#2379F4",
+  "SmPL": "#c94949",
+  "Smalltalk": "#596706",
+  "Smarty": "#f0c040",
+  "Smithy": "#c44536",
+  "Snakemake": "#419179",
+  "Solidity": "#AA6746",
+  "SourcePawn": "#f69e1d",
+  "Squirrel": "#800000",
+  "Stan": "#b2011d",
+  "Standard ML": "#dc566d",
+  "Starlark": "#76d275",
+  "Stata": "#1a5f91",
+  "StringTemplate": "#3fb34f",
+  "Stylus": "#ff6347",
+  "SubRip Text": "#9e0101",
+  "SugarSS": "#2fcc9f",
+  "SuperCollider": "#46390b",
+  "SurrealQL": "#ff00a0",
+  "Survex data": "#ffcc99",
+  "Svelte": "#ff3e00",
+  "Sway": "#00F58C",
+  "Sweave": "#198ce7",
+  "Swift": "#F05138",
+  "SystemVerilog": "#DAE1C2",
+  "TI Program": "#A0AA87",
+  "TL-Verilog": "#C40023",
+  "TLA": "#4b0079",
+  "TMDL": "#f0c913",
+  "TOML": "#9c4221",
+  "TSQL": "#e38c00",
+  "TSV": "#237346",
+  "TSX": "#3178c6",
+  "TXL": "#0178b8",
+  "Tact": "#48b5ff",
+  "Talon": "#333333",
+  "Tcl": "#e4cc98",
+  "TeX": "#3D6117",
+  "Teal": "#00B1BC",
+  "Terra": "#00004c",
+  "Terraform Template": "#7b42bb",
+  "TextGrid": "#c8506d",
+  "TextMate Properties": "#df66e4",
+  "Textile": "#ffe7ac",
+  "Thrift": "#D12127",
+  "Toit": "#c2c9fb",
+  "Tor Config": "#59316b",
+  "Tree-sitter Query": "#8ea64c",
+  "Turing": "#cf142b",
+  "Twig": "#c1d026",
+  "TypeScript": "#3178c6",
+  "TypeSpec": "#4A3665",
+  "Typst": "#239dad",
+  "Unified Parallel C": "#4e3617",
+  "Unity3D Asset": "#222c37",
+  "Uno": "#9933cc",
+  "UnrealScript": "#a54c4d",
+  "Untyped Plutus Core": "#36adbd",
+  "UrWeb": "#ccccee",
+  "V": "#4f87c4",
+  "VBA": "#867db1",
+  "VBScript": "#15dcdc",
+  "VCL": "#148AA8",
+  "VHDL": "#adb2cb",
+  "Vala": "#a56de2",
+  "Valve Data Format": "#f26025",
+  "Velocity Template Language": "#507cff",
+  "Vento": "#ff0080",
+  "Verilog": "#b2b7f8",
+  "Vim Help File": "#199f4b",
+  "Vim Script": "#199f4b",
+  "Vim Snippet": "#199f4b",
+  "Visual Basic .NET": "#945db7",
+  "Visual Basic 6.0": "#2c6353",
+  "Volt": "#1F1F1F",
+  "Vue": "#41b883",
+  "Vyper": "#9F4CF2",
+  "WDL": "#42f1f4",
+  "WGSL": "#1a5e9a",
+  "Web Ontology Language": "#5b70bd",
+  "WebAssembly": "#04133b",
+  "WebAssembly Interface Type": "#6250e7",
+  "Whiley": "#d5c397",
+  "Wikitext": "#fc5757",
+  "Windows Registry Entries": "#52d5ff",
+  "Witcher Script": "#ff0000",
+  "Wolfram Language": "#dd1100",
+  "Wollok": "#a23738",
+  "World of Warcraft Addon Data": "#f7e43f",
+  "Wren": "#383838",
+  "X10": "#4B6BEF",
+  "XC": "#99DA07",
+  "XML": "#0060ac",
+  "XML Property List": "#0060ac",
+  "XQuery": "#5232e7",
+  "XSLT": "#EB8CEB",
+  "Xmake": "#22a079",
+  "Xojo": "#81bd41",
+  "Xonsh": "#285EEF",
+  "Xtend": "#24255d",
+  "YAML": "#cb171e",
+  "YARA": "#220000",
+  "YASnippet": "#32AB90",
+  "Yacc": "#4B6C4B",
+  "Yul": "#794932",
+  "ZAP": "#0d665e",
+  "ZIL": "#dc75e5",
+  "ZenScript": "#00BCD1",
+  "Zephir": "#118f9e",
+  "Zig": "#ec915c",
+  "Zimpl": "#d67711",
+  "Zmodel": "#ff7100",
+  "crontab": "#ead7ac",
+  "eC": "#913960",
+  "fish": "#4aae47",
+  "hoon": "#00b171",
+  "iCalendar": "#ec564c",
+  "jq": "#c7254e",
+  "kvlang": "#1da6e0",
+  "mIRC Script": "#3d57c3",
+  "mcfunction": "#E22837",
+  "mdsvex": "#5f9ea0",
+  "mupad": "#244963",
+  "nanorc": "#2d004d",
+  "nesC": "#94B0C7",
+  "ooc": "#b0b77e",
+  "q": "#0040cd",
+  "reStructuredText": "#141414",
+  "sed": "#64b970",
+  "templ": "#66D0DD",
+  "vCard": "#ee2647",
+  "wisp": "#7582D1",
+  "xBase": "#403a40"
+}

packages/core/src/common/log.js

@@ -0,0 +1,9 @@
+// @ts-check
+/**
+ * Return console instance based on the environment.
+ *
+ * @type {Console | {log: () => void, error: () => void}}
+ */
+const logger = console;
+
+export { logger };

packages/core/src/common/ops.js

@@ -0,0 +1,172 @@
+// @ts-check
+
+import toEmoji from "emoji-name-map";
+
+import { OWNER_AFFILIATIONS } from "./constants.js";
+import { CustomError } from "./error.js";
+
+/**
+ * Returns boolean if value is either "true" or "false" else the value as it is.
+ *
+ * @param {string | boolean} value The value to parse.
+ * @returns {boolean | undefined } The parsed value.
+ */
+const parseBoolean = (value) => {
+  if (typeof value === "boolean") {
+    return value;
+  }
+
+  if (typeof value === "string") {
+    if (value.toLowerCase() === "true") {
+      return true;
+    } else if (value.toLowerCase() === "false") {
+      return false;
+    }
+  }
+  return undefined;
+};
+
+/**
+ * Parse string to array of strings.
+ *
+ * @param {string} str The string to parse.
+ * @returns {string[]} The array of strings.
+ */
+const parseArray = (str) => {
+  if (!str) {
+    return [];
+  }
+  return str.split(",");
+};
+
+/**
+ * Clamp the given number between the given range.
+ *
+ * @param {number} number The number to clamp.
+ * @param {number} min The minimum value.
+ * @param {number} max The maximum value.
+ * @returns {number} The clamped number.
+ */
+const clampValue = (number, min, max) => {
+  // @ts-ignore
+  if (Number.isNaN(parseInt(number, 10))) {
+    return min;
+  }
+  return Math.max(min, Math.min(number, max));
+};
+
+/**
+ * Lowercase and trim string.
+ *
+ * @param {string} name String to lowercase and trim.
+ * @returns {string} Lowercased and trimmed string.
+ */
+const lowercaseTrim = (name) => name.toLowerCase().trim();
+
+/**
+ * Split array of languages in two columns.
+ *
+ * @template T Language object.
+ * @param {Array<T>} arr Array of languages.
+ * @param {number} perChunk Number of languages per column.
+ * @returns {Array<T>} Array of languages split in two columns.
+ */
+const chunkArray = (arr, perChunk) => {
+  return arr.reduce((resultArray, item, index) => {
+    const chunkIndex = Math.floor(index / perChunk);
+
+    if (!resultArray[chunkIndex]) {
+      // @ts-ignore
+      resultArray[chunkIndex] = []; // start a new chunk
+    }
+
+    // @ts-ignore
+    resultArray[chunkIndex].push(item);
+
+    return resultArray;
+  }, []);
+};
+
+/**
+ * Parse emoji from string.
+ *
+ * @param {string} str String to parse emoji from.
+ * @returns {string} String with emoji parsed.
+ */
+const parseEmojis = (str) => {
+  if (!str) {
+    throw new Error("[parseEmoji]: str argument not provided");
+  }
+  return str.replace(/:\w+:/gm, (emoji) => {
+    return toEmoji.get(emoji) || "";
+  });
+};
+
+/**
+ * Get diff in minutes between two dates.
+ *
+ * @param {Date} d1 First date.
+ * @param {Date} d2 Second date.
+ * @returns {number} Number of minutes between the two dates.
+ */
+const dateDiff = (d1, d2) => {
+  const date1 = new Date(d1);
+  const date2 = new Date(d2);
+  const diff = date1.getTime() - date2.getTime();
+  return Math.round(diff / (1000 * 60));
+};
+
+/**
+ * Parse owner affiliations.
+ *
+ * @param {string[]} affiliations input affiliations to be parsed.
+ * @returns {string[]} Parsed affiliations.
+ *
+ * @throws {CustomError} If affiliations contains invalid values.
+ */
+const parseOwnerAffiliations = (affiliations) => {
+  // Set default value for ownerAffiliations.
+  // NOTE: Done here since parseArray() will always return an empty array even nothing
+  //was specified.
+  affiliations =
+    affiliations && affiliations.length > 0
+      ? affiliations.map((affiliation) => affiliation.toUpperCase())
+      : ["OWNER"];
+
+  // Check if ownerAffiliations contains valid values.
+  if (
+    affiliations.some(
+      (affiliation) => !OWNER_AFFILIATIONS.includes(affiliation),
+    )
+  ) {
+    throw new CustomError(
+      "Invalid query parameter",
+      CustomError.INVALID_AFFILIATION,
+    );
+  }
+  return affiliations;
+};
+
+const buildSearchFilter = (repos = [], owners = []) => {
+  let repoFilter =
+    Array.isArray(repos) && repos.length > 0
+      ? repos.map((r) => `repo:${r} `).join("")
+      : "";
+  let orgFilter =
+    Array.isArray(owners) && owners.length > 0
+      ? owners.map((o) => `owner:${o} `).join("")
+      : "";
+  return repoFilter + orgFilter;
+};
+
+export {
+  parseBoolean,
+  parseArray,
+  clampValue,
+  lowercaseTrim,
+  chunkArray,
+  parseEmojis,
+  dateDiff,
+  parseOwnerAffiliations,
+  buildSearchFilter,
+};

packages/core/src/common/render.js

@@ -0,0 +1,238 @@
+// @ts-check
+
+import { getCardColors } from "./color.js";
+import { SECONDARY_ERROR_MESSAGES, TRY_AGAIN_LATER } from "./error.js";
+import { encodeHTML } from "./html.js";
+import { clampValue } from "./ops.js";
+
+/**
+ * Auto layout utility, allows us to layout things vertically or horizontally with
+ * proper gaping.
+ *
+ * @param {object} props Function properties.
+ * @param {string[]} props.items Array of items to layout.
+ * @param {number} props.gap Gap between items.
+ * @param {"column" | "row"=} props.direction Direction to layout items.
+ * @param {number[]=} props.sizes Array of sizes for each item.
+ * @returns {string[]} Array of items with proper layout.
+ */
+const flexLayout = ({ items, gap, direction, sizes = [] }) => {
+  let lastSize = 0;
+  // filter() for filtering out empty strings
+  return items.filter(Boolean).map((item, i) => {
+    const size = sizes[i] || 0;
+    let transform = `translate(${lastSize}, 0)`;
+    if (direction === "column") {
+      transform = `translate(0, ${lastSize})`;
+    }
+    lastSize += size + gap;
+    return `<g transform="${transform}">${item}</g>`;
+  });
+};
+
+/**
+ * Creates a node to display the primary programming language of the repository/gist.
+ *
+ * @param {string} langName Language name.
+ * @param {string} langColor Language color.
+ * @returns {string} Language display SVG object.
+ */
+const createLanguageNode = (langName, langColor) => {
+  return `
+    <g data-testid="primary-lang">
+      <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
+      <text data-testid="lang-name" class="gray" x="15">${langName}</text>
+    </g>
+    `;
+};
+
+/**
+ * Create a node to indicate progress in percentage along a horizontal line.
+ *
+ * @param {Object} params Object that contains the createProgressNode parameters.
+ * @param {number} params.x X-axis position.
+ * @param {number} params.y Y-axis position.
+ * @param {number} params.width Width of progress bar.
+ * @param {string} params.color Progress color.
+ * @param {number} params.progress Progress value.
+ * @param {string} params.progressBarBackgroundColor Progress bar bg color.
+ * @param {number} params.delay Delay before animation starts.
+ * @returns {string} Progress node.
+ */
+const createProgressNode = ({
+  x,
+  y,
+  width,
+  color,
+  progress,
+  progressBarBackgroundColor,
+  delay,
+}) => {
+  const progressPercentage = clampValue(progress, 2, 100);
+
+  return `
+    <svg width="${width}" x="${x}" y="${y}">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
+      <svg data-testid="lang-progress" width="${progressPercentage}%">
+        <rect
+            height="8"
+            fill="${color}"
+            rx="5" ry="5" x="0" y="0"
+            class="lang-progress"
+            style="animation-delay: ${delay}ms;"
+        />
+      </svg>
+    </svg>
+  `;
+};
+
+/**
+ * Creates an icon with label to display repository/gist stats like forks, stars, etc.
+ *
+ * @param {string} icon The icon to display.
+ * @param {number|string} label The label to display.
+ * @param {string} testid The testid to assign to the label.
+ * @param {number} iconSize The size of the icon.
+ * @returns {string} Icon with label SVG object.
+ */
+const iconWithLabel = (icon, label, testid, iconSize) => {
+  if (typeof label === "number" && label <= 0) {
+    return "";
+  }
+  const iconSvg = `
+      <svg
+        class="icon"
+        y="-12"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="${iconSize}"
+        height="${iconSize}"
+      >
+        ${icon}
+      </svg>
+    `;
+  const text = `<text data-testid="${testid}" class="gray">${label}</text>`;
+  return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
+};
+
+// Script parameters.
+const ERROR_CARD_LENGTH = 576.5;
+
+const UPSTREAM_API_ERRORS = [
+  TRY_AGAIN_LATER,
+  SECONDARY_ERROR_MESSAGES.MAX_RETRY,
+];
+
+/**
+ * Renders error message on the card.
+ *
+ * @param {object} args Function arguments.
+ * @param {string} args.message Main error message.
+ * @param {string} [args.secondaryMessage=""] The secondary error message.
+ * @param {object} [args.renderOptions={}] Render options.
+ * @param {string=} args.renderOptions.title_color Card title color.
+ * @param {string=} args.renderOptions.text_color Card text color.
+ * @param {string=} args.renderOptions.bg_color Card background color.
+ * @param {string=} args.renderOptions.border_color Card border color.
+ * @param {Parameters<typeof getCardColors>[0]["theme"]=} args.renderOptions.theme Card theme.
+ * @param {boolean=} args.renderOptions.show_repo_link Whether to show repo link or not.
+ * @returns {string} The SVG markup.
+ */
+const renderError = ({
+  message,
+  secondaryMessage = "",
+  renderOptions = {},
+}) => {
+  const {
+    title_color,
+    text_color,
+    bg_color,
+    border_color,
+    theme = "default",
+    show_repo_link = true,
+  } = renderOptions;
+
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, textColor, bgColor, borderColor } = getCardColors({
+    title_color,
+    text_color,
+    icon_color: "",
+    bg_color,
+    border_color,
+    ring_color: "",
+    theme,
+  });
+
+  return `
+    <svg width="${ERROR_CARD_LENGTH}"  height="120" viewBox="0 0 ${ERROR_CARD_LENGTH} 120" fill="${bgColor}" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="${
+      ERROR_CARD_LENGTH - 1
+    }" height="99%" rx="4.5" fill="${bgColor}" stroke="${borderColor}"/>
+    <text x="25" y="45" class="text">Something went wrong!${
+      UPSTREAM_API_ERRORS.includes(secondaryMessage) || !show_repo_link
+        ? ""
+        : " file an issue at https://tinyurl.com/github-stats"
+    }</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">${encodeHTML(message)}</tspan>
+      <tspan x="25" dy="18" class="gray">${secondaryMessage}</tspan>
+    </text>
+    </svg>
+  `;
+};
+
+/**
+ * Retrieve text length.
+ *
+ * @see https://stackoverflow.com/a/48172630/10629172
+ * @param {string} str String to measure.
+ * @param {number} fontSize Font size.
+ * @returns {number} Text length.
+ */
+const measureText = (str, fontSize = 10) => {
+  // prettier-ignore
+  const widths = [
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0.2796875, 0.2765625,
+    0.3546875, 0.5546875, 0.5546875, 0.8890625, 0.665625, 0.190625,
+    0.3328125, 0.3328125, 0.3890625, 0.5828125, 0.2765625, 0.3328125,
+    0.2765625, 0.3015625, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
+    0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
+    0.2765625, 0.2765625, 0.584375, 0.5828125, 0.584375, 0.5546875,
+    1.0140625, 0.665625, 0.665625, 0.721875, 0.721875, 0.665625,
+    0.609375, 0.7765625, 0.721875, 0.2765625, 0.5, 0.665625,
+    0.5546875, 0.8328125, 0.721875, 0.7765625, 0.665625, 0.7765625,
+    0.721875, 0.665625, 0.609375, 0.721875, 0.665625, 0.94375,
+    0.665625, 0.665625, 0.609375, 0.2765625, 0.3546875, 0.2765625,
+    0.4765625, 0.5546875, 0.3328125, 0.5546875, 0.5546875, 0.5,
+    0.5546875, 0.5546875, 0.2765625, 0.5546875, 0.5546875, 0.221875,
+    0.240625, 0.5, 0.221875, 0.8328125, 0.5546875, 0.5546875,
+    0.5546875, 0.5546875, 0.3328125, 0.5, 0.2765625, 0.5546875,
+    0.5, 0.721875, 0.5, 0.5, 0.5, 0.3546875, 0.259375, 0.353125, 0.5890625,
+  ];
+
+  const avg = 0.5279276315789471;
+  return (
+    str
+      .split("")
+      .map((c) =>
+        c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg,
+      )
+      .reduce((cur, acc) => acc + cur) * fontSize
+  );
+};
+
+export {
+  renderError,
+  createLanguageNode,
+  createProgressNode,
+  iconWithLabel,
+  flexLayout,
+  measureText,
+};

packages/core/src/common/retryer.js

@@ -0,0 +1,104 @@
+// @ts-check
+
+import { getConfig } from "./config.js";
+import { CustomError } from "./error.js";
+import { logger } from "./log.js";
+
+/**
+ * Returns a random integer from 0 (inclusive) to `max` (exclusive).
+ *
+ * The value is generated using `Math.random()` and uniformly distributed
+ * across the range.
+ *
+ * @param {number} max The upper bound (exclusive). Must be a positive number.
+ *
+ * @returns {number} A random integer `n` such that `0 <= n < max`.
+ */
+function getRandomInt(max) {
+  return Math.floor(Math.random() * max);
+}
+
+/**
+ * @typedef {import("axios").AxiosResponse} AxiosResponse Axios response.
+ * @typedef {(variables: any, token: string, retriesForTests?: number) => Promise<AxiosResponse>} FetcherFunction Fetcher function.
+ */
+
+/**
+ * Try to execute the fetcher function until it succeeds or the max number of retries is reached.
+ *
+ * @param {FetcherFunction} fetcher The fetcher function.
+ * @param {any} variables Object with arguments to pass to the fetcher function.
+ * @param {string | null} pat Optional PAT override.
+ * @returns {Promise<any>} The response from the fetcher function.
+ */
+const retryer = async (fetcher, variables, pat = null) => {
+  let PATs;
+  if (pat) {
+    PATs = [{ name: "user PAT from database", value: pat }];
+  } else {
+    PATs = getConfig().pats;
+  }
+
+  if (!PATs.length) {
+    throw new CustomError("No GitHub API tokens found", CustomError.NO_TOKENS);
+  }
+  const startPAT = getRandomInt(PATs.length);
+
+  for (let retries = 0; retries < PATs.length; retries++) {
+    const currentPAT = PATs[(startPAT + retries) % PATs.length];
+
+    try {
+      let response = await fetcher(
+        variables,
+        // @ts-ignore
+        currentPAT.value,
+        // used in tests for faking rate limit
+        retries,
+      );
+
+      // react on both type and message-based rate-limit signals.
+      // https://github.com/anuraghazra/github-readme-stats/issues/4425
+      const errors = response?.data?.errors;
+      const errorType = errors?.[0]?.type;
+      const errorMsg = errors?.[0]?.message || "";
+      const isRateLimited =
+        (errors && errorType === "RATE_LIMITED") ||
+        /rate limit/i.test(errorMsg);
+
+      if (isRateLimited) {
+        logger.log(`${currentPAT.name} Failed due to rate limiting`);
+      } else {
+        return response;
+      }
+    } catch (err) {
+      /** @type {any} */
+      const e = err;
+
+      // network/unexpected error → let caller treat as failure
+      if (!e?.response) {
+        throw e;
+      }
+
+      // prettier-ignore
+      // also checking for bad credentials if any tokens gets invalidated
+      const isBadCredential =
+        e?.response?.data?.message === "Bad credentials";
+      const isAccountSuspended =
+        e?.response?.data?.message === "Sorry. Your account was suspended.";
+
+      if (isBadCredential || isAccountSuspended) {
+        logger.log(`${currentPAT.name} Failed due to bad credentials`);
+      } else {
+        // HTTP error with a response → return it for caller-side handling
+        return e.response;
+      }
+    }
+  }
+
+  throw new CustomError(
+    "Downtime due to GitHub API rate limiting",
+    CustomError.MAX_RETRY,
+  );
+};
+
+export { retryer };

packages/core/src/fetchers/gist.js

@@ -0,0 +1,114 @@
+// @ts-check
+
+import { MissingParamError } from "../common/error.js";
+import { request } from "../common/http.js";
+import { retryer } from "../common/retryer.js";
+
+const QUERY = `
+query gistInfo($gistName: String!) {
+    viewer {
+        gist(name: $gistName) {
+            description
+            owner {
+                login
+            }
+            stargazerCount
+            forks {
+                totalCount
+            }
+            files {
+                name
+                language {
+                    name
+                }
+                size
+            }
+        }
+    }
+}
+`;
+
+/**
+ * Gist data fetcher.
+ *
+ * @param {object} variables Fetcher variables.
+ * @param {string} token GitHub token.
+ * @returns {Promise<import('axios').AxiosResponse>} The response.
+ */
+const fetcher = async (variables, token) => {
+  return await request(
+    { query: QUERY, variables },
+    { Authorization: `token ${token}` },
+  );
+};
+
+/**
+ * @typedef {{ name: string; language: { name: string; }, size: number }} GistFile Gist file.
+ */
+
+/**
+ * This function calculates the primary language of a gist by files size.
+ *
+ * @param {GistFile[]} files Files.
+ * @returns {string} Primary language.
+ */
+const calculatePrimaryLanguage = (files) => {
+  /** @type {Record<string, number>} */
+  const languages = {};
+
+  for (const file of files) {
+    if (file.language) {
+      if (languages[file.language.name]) {
+        languages[file.language.name] += file.size;
+      } else {
+        languages[file.language.name] = file.size;
+      }
+    }
+  }
+
+  let primaryLanguage = Object.keys(languages)[0];
+  for (const language in languages) {
+    if (languages[language] > languages[primaryLanguage]) {
+      primaryLanguage = language;
+    }
+  }
+
+  return primaryLanguage;
+};
+
+/**
+ * @typedef {import('./types').GistData} GistData Gist data.
+ */
+
+/**
+ * Fetch GitHub gist information by given username and ID.
+ *
+ * @param {string} id GitHub gist ID.
+ * @param {string | null} pat Optional PAT override.
+ * @returns {Promise<GistData>} Gist data.
+ */
+const fetchGist = async (id, pat = null) => {
+  if (!id) {
+    throw new MissingParamError(["id"], "/api/gist?id=GIST_ID");
+  }
+  const res = await retryer(fetcher, { gistName: id }, pat);
+  if (res.data.errors) {
+    throw new Error(res.data.errors[0].message);
+  }
+  if (!res.data.data.viewer.gist) {
+    throw new Error("Gist not found");
+  }
+  const data = res.data.data.viewer.gist;
+  return {
+    name: data.files[Object.keys(data.files)[0]].name,
+    nameWithOwner: `${data.owner.login}/${
+      data.files[Object.keys(data.files)[0]].name
+    }`,
+    description: data.description,
+    language: calculatePrimaryLanguage(data.files),
+    starsCount: data.stargazerCount,
+    forksCount: data.forks.totalCount,
+  };
+};
+
+export { fetchGist };

packages/core/src/fetchers/repo.js

@@ -0,0 +1,165 @@
+// @ts-check
+
+import { MissingParamError } from "../common/error.js";
+import { request } from "../common/http.js";
+import { retryer } from "../common/retryer.js";
+
+import { fetchRepoUserStats } from "./stats.js";
+
+/**
+ * Repo data fetcher.
+ *
+ * @param {object} variables Fetcher variables.
+ * @param {string} token GitHub token.
+ * @returns {Promise<import('axios').AxiosResponse>} The response.
+ */
+const fetcher = (variables, token) => {
+  return request(
+    {
+      query: `
+      fragment RepoInfo on Repository {
+        name
+        nameWithOwner
+        isPrivate
+        isArchived
+        isTemplate
+        stargazers {
+          totalCount
+        }
+        description
+        primaryLanguage {
+          color
+          id
+          name
+        }
+        forkCount
+      }
+      query getRepo($login: String!, $repo: String!) {
+        user(login: $login) {
+          repository(name: $repo) {
+            ...RepoInfo
+          }
+        }
+        organization(login: $login) {
+          repository(name: $repo) {
+            ...RepoInfo
+          }
+        }
+      }
+    `,
+      variables,
+    },
+    {
+      Authorization: `token ${token}`,
+    },
+  );
+};
+
+const urlExample = "/api/pin?username=USERNAME&amp;repo=REPO_NAME";
+
+/**
+ * @typedef {import("./types").RepositoryData} RepositoryData Repository data.
+ */
+
+/**
+ * Fetch repository data.
+ *
+ * @param {string} username GitHub username.
+ * @param {string} reponame GitHub repository name.
+ * @returns {Promise<RepositoryData>} Repository data.
+ */
+const fetchRepo = async (
+  username,
+  reponame,
+  include_prs_authored = false,
+  include_prs_commented = false,
+  include_prs_reviewed = false,
+  include_issues_authored = false,
+  include_issues_commented = false,
+  pat = null,
+) => {
+  let owner = username;
+  if (reponame && reponame.includes("/")) {
+    const [parsed_owner, parsed_repo] = reponame.split("/");
+    owner = parsed_owner;
+    reponame = parsed_repo;
+  }
+
+  if (owner && !username) {
+    username = owner;
+  }
+  if (username && !owner) {
+    owner = username;
+  }
+  if (!username && !reponame) {
+    throw new MissingParamError(["username", "repo"], urlExample);
+  }
+  if (!username) {
+    throw new MissingParamError(["username"], urlExample);
+  }
+  if (!reponame) {
+    throw new MissingParamError(["repo"], urlExample);
+  }
+
+  let res = await retryer(fetcher, { login: owner, repo: reponame }, pat);
+
+  const data = res.data.data;
+
+  if (!data.user && !data.organization) {
+    throw new Error("Not found");
+  }
+
+  const isUser = data.organization === null && data.user;
+  const isOrg = data.user === null && data.organization;
+
+  if (isUser) {
+    if (!data.user.repository || data.user.repository.isPrivate) {
+      throw new Error("User Repository Not found");
+    }
+    let repoUserStats = await fetchRepoUserStats(
+      username,
+      [owner + "/" + reponame],
+      [],
+      include_prs_authored,
+      include_prs_commented,
+      include_prs_reviewed,
+      include_issues_authored,
+      include_issues_commented,
+      pat,
+    );
+    return {
+      ...repoUserStats,
+      ...data.user.repository,
+      starCount: data.user.repository.stargazers.totalCount,
+    };
+  }
+
+  if (isOrg) {
+    if (
+      !data.organization.repository ||
+      data.organization.repository.isPrivate
+    ) {
+      throw new Error("Organization Repository Not found");
+    }
+    let repoUserStats = await fetchRepoUserStats(
+      username,
+      [owner + "/" + reponame],
+      [],
+      include_prs_authored,
+      include_prs_commented,
+      include_prs_reviewed,
+      include_issues_authored,
+      include_issues_commented,
+      pat,
+    );
+    return {
+      ...repoUserStats,
+      ...data.organization.repository,
+      starCount: data.organization.repository.stargazers.totalCount,
+    };
+  }
+
+  throw new Error("Unexpected behavior");
+};
+
+export { fetchRepo };

packages/core/src/fetchers/stats.js

@@ -0,0 +1,478 @@
+// @ts-check
+
+import axios from "axios";
+import githubUsernameRegex from "github-username-regex";
+
+import { calculateRank } from "../calculateRank.js";
+import { getConfig } from "../common/config.js";
+import { CustomError, MissingParamError } from "../common/error.js";
+import { wrapTextMultiline } from "../common/fmt.js";
+import { request } from "../common/http.js";
+import { logger } from "../common/log.js";
+import { buildSearchFilter, parseOwnerAffiliations } from "../common/ops.js";
+import { retryer } from "../common/retryer.js";
+
+// GraphQL queries.
+const GRAPHQL_REPOS_FIELD = `
+  repositories(first: 100, after: $after, ownerAffiliations: $ownerAffiliations, orderBy: {direction: DESC, field: STARGAZERS}) {
+    totalCount
+    nodes {
+      name
+      stargazers {
+        totalCount
+      }
+    }
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
+`;
+
+const GRAPHQL_REPOS_QUERY = `
+  query userInfo($login: String!, $after: String, $ownerAffiliations: [RepositoryAffiliation]) {
+    user(login: $login) {
+      ${GRAPHQL_REPOS_FIELD}
+    }
+  }
+`;
+
+const GRAPHQL_STATS_QUERY = `
+  query userInfo($login: String!, $after: String, $includeMergedPullRequests: Boolean!, $includeDiscussions: Boolean!, $includeDiscussionsAnswers: Boolean!, $startTime: DateTime = null, $ownerAffiliations: [RepositoryAffiliation]) {
+    user(login: $login) {
+      name
+      login
+      commits: contributionsCollection (from: $startTime) {
+        totalCommitContributions,
+      }
+      reviews: contributionsCollection {
+        totalPullRequestReviewContributions
+      }
+      repositoriesContributedTo(first: 1, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
+        totalCount
+      }
+      pullRequests(first: 1) {
+        totalCount
+      }
+      mergedPullRequests: pullRequests(states: MERGED) @include(if: $includeMergedPullRequests) {
+        totalCount
+      }
+      openIssues: issues(states: OPEN) {
+        totalCount
+      }
+      closedIssues: issues(states: CLOSED) {
+        totalCount
+      }
+      followers {
+        totalCount
+      }
+      repositoryDiscussions @include(if: $includeDiscussions) {
+        totalCount
+      }
+      repositoryDiscussionComments(onlyAnswers: true) @include(if: $includeDiscussionsAnswers) {
+        totalCount
+      }
+      ${GRAPHQL_REPOS_FIELD}
+    }
+  }
+`;
+
+/**
+ * Stats fetcher object.
+ *
+ * @param {object & { after: string | null }} variables Fetcher variables.
+ * @param {string} token GitHub token.
+ * @returns {Promise<import('axios').AxiosResponse>} Axios response.
+ */
+const fetcher = (variables, token) => {
+  const query = variables.after ? GRAPHQL_REPOS_QUERY : GRAPHQL_STATS_QUERY;
+  return request(
+    {
+      query,
+      variables,
+    },
+    {
+      Authorization: `bearer ${token}`,
+    },
+  );
+};
+
+/**
+ * Fetch stats information for a given username.
+ *
+ * @param {object} variables Fetcher variables.
+ * @param {string} variables.username GitHub username.
+ * @param {boolean} variables.includeMergedPullRequests Include merged pull requests.
+ * @param {boolean} variables.includeDiscussions Include discussions.
+ * @param {boolean} variables.includeDiscussionsAnswers Include discussions answers.
+ * @param {string|undefined} variables.startTime Time to start the count of total commits.
+ * @param {string[]} variables.ownerAffiliations The owner affiliations to filter by. Default: OWNER.
+ * @param {string | null} variables.pat PAT override or null.
+ * @returns {Promise<import('axios').AxiosResponse>} Axios response.
+ *
+ * @description This function supports multi-page fetching if the 'FETCH_MULTI_PAGE_STARS' environment variable is set to true or a limit of fetches.
+ */
+const statsFetcher = async ({
+  username,
+  includeMergedPullRequests,
+  includeDiscussions,
+  includeDiscussionsAnswers,
+  startTime,
+  ownerAffiliations,
+  pat,
+}) => {
+  let stats;
+  let hasNextPage = true;
+  let endCursor = null;
+  let fetchedPages = 0;
+  while (hasNextPage) {
+    const variables = {
+      login: username,
+      first: 100,
+      after: endCursor,
+      includeMergedPullRequests,
+      includeDiscussions,
+      includeDiscussionsAnswers,
+      startTime,
+      ownerAffiliations,
+    };
+    let res = await retryer(fetcher, variables, pat);
+    if (res.data.errors) {
+      return res;
+    }
+
+    // Store stats data.
+    const repoNodes = res.data.data.user.repositories.nodes;
+    if (stats) {
+      if (fetchedPages === 1) {
+        // make deep copy of relevant stats fields to avoid altering the cached response object in frontend
+        stats = structuredClone({
+          data: stats.data,
+          statusText: stats.statusText,
+        });
+      }
+      stats.data.data.user.repositories.nodes.push(...repoNodes);
+    } else {
+      stats = res;
+    }
+
+    // Disable multi page fetching on public Vercel instance due to rate limits.
+    fetchedPages++;
+    const repoNodesWithStars = repoNodes.filter(
+      (node) => node.stargazers.totalCount !== 0,
+    );
+
+    hasNextPage =
+      (getConfig().fetchMultiPageStars === "true" ||
+        getConfig().fetchMultiPageStars > fetchedPages) &&
+      repoNodes.length === repoNodesWithStars.length &&
+      res.data.data.user.repositories.pageInfo.hasNextPage;
+
+    endCursor = res.data.data.user.repositories.pageInfo.endCursor;
+  }
+
+  return stats;
+};
+
+/**
+ * Fetch total commits using the REST API.
+ *
+ * @param {object} variables Fetcher variables.
+ * @param {string} token GitHub token.
+ * @returns {Promise<import('axios').AxiosResponse>} Axios response.
+ *
+ * @see https://developer.github.com/v3/search/#search-commits
+ */
+const fetchTotalItems = (variables, token) => {
+  return axios({
+    method: "get",
+    url:
+      `https://api.github.com/search/` +
+      variables.type +
+      `?per_page=1&q=` +
+      buildSearchFilter(variables.repo, variables.owner).replaceAll(" ", "+") +
+      variables.filter,
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/vnd.github.cloak-preview",
+      Authorization: `token ${token}`,
+    },
+  });
+};
+
+/**
+ * Fetch all the commits for all the repositories of a given username.
+ *
+ * @param {string} username GitHub username.
+ * @returns {Promise<number>} Total commits.
+ *
+ * @description Done like this because the GitHub API does not provide a way to fetch all the commits. See
+ * #92#issuecomment-661026467 and #211 for more information.
+ */
+const totalItemsFetcher = async (username, repo, owner, type, filter, pat) => {
+  if (!githubUsernameRegex.test(username)) {
+    logger.log("Invalid username provided.");
+    throw new Error("Invalid username provided.");
+  }
+
+  let res;
+  try {
+    res = await retryer(
+      fetchTotalItems,
+      {
+        login: username,
+        repo,
+        owner,
+        type,
+        filter,
+      },
+      pat,
+    );
+  } catch (err) {
+    logger.log(err);
+    throw err;
+  }
+
+  const totalCount = res.data.total_count;
+  if (isNaN(totalCount)) {
+    logger.error("GitHub error: " + JSON.stringify(res.data));
+    throw new CustomError(
+      "Could not fetch data from GitHub REST API.",
+      CustomError.GITHUB_REST_API_ERROR,
+    );
+  }
+  return totalCount;
+};
+
+const fetchRepoUserStats = async (
+  username,
+  repo,
+  owner,
+  include_prs_authored,
+  include_prs_commented,
+  include_prs_reviewed,
+  include_issues_authored,
+  include_issues_commented,
+  pat,
+) => {
+  let stats = {};
+  if (include_prs_authored) {
+    stats.totalPRsAuthored = await totalItemsFetcher(
+      username,
+      repo,
+      owner,
+      "issues",
+      `author:${username}+type:pr`,
+      pat,
+    );
+  }
+  if (include_prs_commented) {
+    stats.totalPRsCommented = await totalItemsFetcher(
+      username,
+      repo,
+      owner,
+      "issues",
+      `commenter:${username}+-author:${username}+type:pr`,
+      pat,
+    );
+  }
+  if (include_prs_reviewed) {
+    stats.totalPRsReviewed = await totalItemsFetcher(
+      username,
+      repo,
+      owner,
+      "issues",
+      `reviewed-by:${username}+-author:${username}+type:pr`,
+      pat,
+    );
+  }
+  if (include_issues_authored) {
+    stats.totalIssuesAuthored = await totalItemsFetcher(
+      username,
+      repo,
+      owner,
+      "issues",
+      `author:${username}+type:issue`,
+      pat,
+    );
+  }
+  if (include_issues_commented) {
+    stats.totalIssuesCommented = await totalItemsFetcher(
+      username,
+      repo,
+      owner,
+      "issues",
+      `commenter:${username}+-author:${username}+type:issue`,
+      pat,
+    );
+  }
+  return stats;
+};
+
+/**
+ * Fetch stats for a given username.
+ *
+ * @param {string} username GitHub username.
+ * @param {boolean} include_all_commits Include all commits.
+ * @param {string[]} exclude_repo Repositories to exclude.
+ * @param {boolean} include_merged_pull_requests Include merged pull requests.
+ * @param {boolean} include_discussions Include discussions.
+ * @param {boolean} include_discussions_answers Include discussions answers.
+ * @param {number|undefined} commits_year Year to count total commits
+ * @param {string[]} ownerAffiliations Owner affiliations. Default: OWNER.
+ * @returns {Promise<import("./types").StatsData>} Stats data.
+ */
+const fetchStats = async (
+  username,
+  include_all_commits = false,
+  exclude_repo = [],
+  include_merged_pull_requests = false,
+  include_discussions = false,
+  include_discussions_answers = false,
+  commits_year,
+  repo = [],
+  owner = [],
+  include_prs_authored = false,
+  include_prs_commented = false,
+  include_prs_reviewed = false,
+  include_issues_authored = false,
+  include_issues_commented = false,
+  ownerAffiliations = [],
+  pat = null,
+) => {
+  if (!username) {
+    throw new MissingParamError(["username"]);
+  }
+
+  const stats = {
+    name: "",
+    totalPRs: 0,
+    totalPRsMerged: 0,
+    mergedPRsPercentage: 0,
+    totalReviews: 0,
+    totalCommits: 0,
+    totalIssues: 0,
+    totalStars: 0,
+    totalDiscussionsStarted: 0,
+    totalDiscussionsAnswered: 0,
+    contributedTo: 0,
+    totalPRsAuthored: 0,
+    totalPRsCommented: 0,
+    totalPRsReviewed: 0,
+    totalIssuesAuthored: 0,
+    totalIssuesCommented: 0,
+    rank: { level: "C", percentile: 100 },
+  };
+  ownerAffiliations = parseOwnerAffiliations(ownerAffiliations);
+
+  let res = await statsFetcher(
+    {
+      username,
+      includeMergedPullRequests: include_merged_pull_requests,
+      includeDiscussions: include_discussions,
+      includeDiscussionsAnswers: include_discussions_answers,
+      startTime: commits_year ? `${commits_year}-01-01T00:00:00Z` : undefined,
+      ownerAffiliations,
+    },
+    pat,
+  );
+
+  // Catch GraphQL errors.
+  if (res.data.errors) {
+    logger.error(res.data.errors);
+    if (res.data.errors[0].type === "NOT_FOUND") {
+      throw new CustomError(
+        res.data.errors[0].message || "Could not fetch user.",
+        CustomError.USER_NOT_FOUND,
+      );
+    }
+    if (res.data.errors[0].message) {
+      throw new CustomError(
+        wrapTextMultiline(res.data.errors[0].message, 90, 1)[0],
+        res.statusText,
+      );
+    }
+    throw new CustomError(
+      "Something went wrong while trying to retrieve the stats data using the GraphQL API.",
+      CustomError.GRAPHQL_ERROR,
+    );
+  }
+
+  const user = res.data.data.user;
+
+  stats.name = user.name || user.login;
+
+  // if include_all_commits, fetch all commits using the REST API.
+  if (include_all_commits) {
+    stats.totalCommits = await totalItemsFetcher(
+      username,
+      repo,
+      owner,
+      "commits",
+      `author:${username}`,
+      pat,
+    );
+  } else {
+    stats.totalCommits = user.commits.totalCommitContributions;
+  }
+  let repoUserStats = await fetchRepoUserStats(
+    username,
+    repo,
+    owner,
+    include_prs_authored,
+    include_prs_commented,
+    include_prs_reviewed,
+    include_issues_authored,
+    include_issues_commented,
+    pat,
+  );
+  Object.assign(stats, repoUserStats);
+
+  stats.totalPRs = user.pullRequests.totalCount;
+  if (include_merged_pull_requests) {
+    stats.totalPRsMerged = user.mergedPullRequests.totalCount;
+    stats.mergedPRsPercentage =
+      (user.mergedPullRequests.totalCount / user.pullRequests.totalCount) *
+        100 || 0;
+  }
+  stats.totalReviews = user.reviews.totalPullRequestReviewContributions;
+  stats.totalIssues = user.openIssues.totalCount + user.closedIssues.totalCount;
+  if (include_discussions) {
+    stats.totalDiscussionsStarted = user.repositoryDiscussions.totalCount;
+  }
+  if (include_discussions_answers) {
+    stats.totalDiscussionsAnswered =
+      user.repositoryDiscussionComments.totalCount;
+  }
+  stats.contributedTo = user.repositoriesContributedTo.totalCount;
+
+  // Retrieve stars while filtering out repositories to be hidden.
+  const allExcludedRepos = [
+    ...exclude_repo,
+    ...getConfig().excludeRepositories,
+  ];
+  let repoToHide = new Set(allExcludedRepos);
+
+  stats.totalStars = user.repositories.nodes
+    .filter((data) => {
+      return !repoToHide.has(data.name);
+    })
+    .reduce((prev, curr) => {
+      return prev + curr.stargazers.totalCount;
+    }, 0);
+
+  stats.rank = calculateRank({
+    all_commits: include_all_commits,
+    commits: stats.totalCommits,
+    prs: stats.totalPRs,
+    reviews: stats.totalReviews,
+    issues: stats.totalIssues,
+    repos: user.repositories.totalCount,
+    stars: stats.totalStars,
+    followers: user.followers.totalCount,
+  });
+
+  return stats;
+};
+
+export { fetchStats, fetchRepoUserStats };

packages/core/src/fetchers/top-languages.js

@@ -0,0 +1,177 @@
+// @ts-check
+
+import { getConfig } from "../common/config.js";
+import { CustomError, MissingParamError } from "../common/error.js";
+import { wrapTextMultiline } from "../common/fmt.js";
+import { request } from "../common/http.js";
+import { logger } from "../common/log.js";
+import { parseOwnerAffiliations } from "../common/ops.js";
+import { retryer } from "../common/retryer.js";
+
+/**
+ * Top languages fetcher object.
+ *
+ * @param {any} variables Fetcher variables.
+ * @param {string} token GitHub token.
+ * @returns {Promise<import("axios").AxiosResponse>} Languages fetcher response.
+ */
+const fetcher = (variables, token) => {
+  return request(
+    {
+      query: `
+      query userInfo($login: String!, $ownerAffiliations: [RepositoryAffiliation]) {
+        user(login: $login) {
+          # do not fetch forks
+          repositories(ownerAffiliations: $ownerAffiliations, isFork: false, first: 100) {
+            nodes {
+              name
+              languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
+                edges {
+                  size
+                  node {
+                    color
+                    name
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      `,
+      variables,
+    },
+    {
+      Authorization: `token ${token}`,
+    },
+  );
+};
+
+/**
+ * @typedef {import("./types").TopLangData} TopLangData Top languages data.
+ */
+
+/**
+ * Fetch top languages for a given username.
+ *
+ * @param {string} username GitHub username.
+ * @param {string[]} exclude_repo List of repositories to exclude. Default: [].
+ * @param {number} size_weight Weightage to be given to size.
+ * @param {number} count_weight Weightage to be given to count.
+ * @param {string[]} ownerAffiliations The owner affiliations to filter by. Default: OWNER.
+ * @param {string|null} pat Optional PAT override.
+ * @returns {Promise<TopLangData>} Top languages data.
+ */
+const fetchTopLanguages = async (
+  username,
+  exclude_repo = [],
+  size_weight = 1,
+  count_weight = 0,
+  ownerAffiliations = [],
+  pat = null,
+) => {
+  if (!username) {
+    throw new MissingParamError(["username"]);
+  }
+  ownerAffiliations = parseOwnerAffiliations(ownerAffiliations);
+
+  const res = await retryer(
+    fetcher,
+    {
+      login: username,
+      ownerAffiliations,
+    },
+    pat,
+  );
+
+  if (res.data.errors) {
+    logger.error(res.data.errors);
+    if (res.data.errors[0].type === "NOT_FOUND") {
+      throw new CustomError(
+        res.data.errors[0].message || "Could not fetch user.",
+        CustomError.USER_NOT_FOUND,
+      );
+    }
+    if (res.data.errors[0].message) {
+      throw new CustomError(
+        wrapTextMultiline(res.data.errors[0].message, 90, 1)[0],
+        res.statusText,
+      );
+    }
+    throw new CustomError(
+      "Something went wrong while trying to retrieve the language data using the GraphQL API.",
+      CustomError.GRAPHQL_ERROR,
+    );
+  }
+
+  let repoNodes = res.data.data.user.repositories.nodes;
+  /** @type {Record<string, boolean>} */
+  let repoToHide = {};
+  const allExcludedRepos = [
+    ...exclude_repo,
+    ...getConfig().excludeRepositories,
+  ];
+
+  // populate repoToHide map for quick lookup
+  // while filtering out
+  if (allExcludedRepos) {
+    allExcludedRepos.forEach((repoName) => {
+      repoToHide[repoName] = true;
+    });
+  }
+
+  // filter out repositories to be hidden
+  repoNodes = repoNodes
+    .sort((a, b) => b.size - a.size)
+    .filter((name) => !repoToHide[name.name]);
+
+  let repoCount = 0;
+
+  repoNodes = repoNodes
+    .filter((node) => node.languages.edges.length > 0)
+    // flatten the list of language nodes
+    .reduce((acc, curr) => curr.languages.edges.concat(acc), [])
+    .reduce((acc, prev) => {
+      // get the size of the language (bytes)
+      let langSize = prev.size;
+
+      // if we already have the language in the accumulator
+      // & the current language name is same as previous name
+      // add the size to the language size and increase repoCount.
+      if (acc[prev.node.name] && prev.node.name === acc[prev.node.name].name) {
+        langSize = prev.size + acc[prev.node.name].size;
+        repoCount += 1;
+      } else {
+        // reset repoCount to 1
+        // language must exist in at least one repo to be detected
+        repoCount = 1;
+      }
+      return {
+        ...acc,
+        [prev.node.name]: {
+          name: prev.node.name,
+          color: prev.node.color,
+          size: langSize,
+          count: repoCount,
+        },
+      };
+    }, {});
+
+  Object.keys(repoNodes).forEach((name) => {
+    // comparison index calculation
+    repoNodes[name].size =
+      Math.pow(repoNodes[name].size, size_weight) *
+      Math.pow(repoNodes[name].count, count_weight);
+  });
+
+  const topLangs = Object.keys(repoNodes)
+    .sort((a, b) => repoNodes[b].size - repoNodes[a].size)
+    .reduce((result, key) => {
+      result[key] = repoNodes[key];
+      return result;
+    }, {});
+
+  return topLangs;
+};
+
+export { fetchTopLanguages };

packages/core/src/fetchers/types.d.ts

@@ -0,0 +1,128 @@
+export interface GistData {
+  name: string;
+  nameWithOwner: string;
+  description: string | null;
+  language: string | null;
+  starsCount: number;
+  forksCount: number;
+}
+
+export interface RepositoryData {
+  name: string;
+  nameWithOwner: string;
+  isPrivate: boolean;
+  isArchived: boolean;
+  isTemplate: boolean;
+  stargazers: { totalCount: number };
+  description: string;
+  primaryLanguage: {
+    color: string;
+    id: string;
+    name: string;
+  };
+  forkCount: number;
+  starCount: number;
+  totalPRsAuthored: number;
+  totalPRsCommented: number;
+  totalPRsReviewed: number;
+  totalIssuesAuthored: number;
+  totalIssuesCommented: number;
+}
+
+export interface StatsData {
+  name: string;
+  totalPRs: number;
+  totalPRsMerged: number;
+  mergedPRsPercentage: number;
+  totalReviews: number;
+  totalCommits: number;
+  totalIssues: number;
+  totalStars: number;
+  totalDiscussionsStarted: number;
+  totalDiscussionsAnswered: number;
+  contributedTo: number;
+  totalPRsAuthored: number;
+  totalPRsCommented: number;
+  totalPRsReviewed: number;
+  totalIssuesAuthored: number;
+  totalIssuesCommented: number;
+  rank: { level: string; percentile: number };
+}
+
+export interface Lang {
+  name: string;
+  color: string;
+  size: number;
+}
+
+export type TopLangData = Record<string, Lang>;
+
+export interface WakaTimeData {
+  categories: Array<{
+    digital: string;
+    hours: number;
+    minutes: number;
+    name: string;
+    percent: number;
+    text: string;
+    total_seconds: number;
+  }>;
+  daily_average: number;
+  daily_average_including_other_language: number;
+  days_including_holidays: number;
+  days_minus_holidays: number;
+  editors: Array<{
+    digital: string;
+    hours: number;
+    minutes: number;
+    name: string;
+    percent: number;
+    text: string;
+    total_seconds: number;
+  }>;
+  holidays: number;
+  human_readable_daily_average: string;
+  human_readable_daily_average_including_other_language: string;
+  human_readable_total: string;
+  human_readable_total_including_other_language: string;
+  id: string;
+  is_already_updating: boolean;
+  is_coding_activity_visible: boolean;
+  is_including_today: boolean;
+  is_other_usage_visible: boolean;
+  is_stuck: boolean;
+  is_up_to_date: boolean;
+  languages: Array<{
+    digital: string;
+    hours: number;
+    minutes: number;
+    name: string;
+    percent: number;
+    text: string;
+    total_seconds: number;
+  }>;
+  operating_systems: Array<{
+    digital: string;
+    hours: number;
+    minutes: number;
+    name: string;
+    percent: number;
+    text: string;
+    total_seconds: number;
+  }>;
+  percent_calculated: number;
+  range: string;
+  status: string;
+  timeout: number;
+  total_seconds: number;
+  total_seconds_including_other_language: number;
+  user_id: string;
+  username: string;
+  writes_only: boolean;
+}
+
+export interface WakaTimeLang {
+  name: string;
+  text: string;
+  percent: number;
+}

packages/core/src/fetchers/wakatime.js

@@ -0,0 +1,37 @@
+// @ts-check
+
+import axios from "axios";
+
+import { CustomError, MissingParamError } from "../common/error.js";
+
+/**
+ * WakaTime data fetcher.
+ *
+ * @param {{username: string, api_domain: string }} props Fetcher props.
+ * @returns {Promise<import("./types").WakaTimeData>} WakaTime data response.
+ */
+const fetchWakatimeStats = async ({ username, api_domain }) => {
+  if (!username) {
+    throw new MissingParamError(["username"]);
+  }
+
+  try {
+    const { data } = await axios.get(
+      `https://${
+        api_domain ? api_domain.replace(/\/$/gi, "") : "wakatime.com"
+      }/api/v1/users/${username}/stats?is_including_today=true`,
+    );
+
+    return data.data;
+  } catch (err) {
+    if (err.response.status < 200 || err.response.status > 299) {
+      throw new CustomError(
+        `Could not resolve to a User with the login of '${username}'`,
+        "WAKATIME_USER_NOT_FOUND",
+      );
+    }
+    throw err;
+  }
+};
+
+export { fetchWakatimeStats };

packages/core/src/index.ts

@@ -0,0 +1,25 @@
+/**
+ * We need this file to be in ts to allow custom conditions to work
+ * The package will be converted
+ *
+ * @todo https://github.com/stats-organization/github-stats-extended/issues/140
+ */
+export { fetchWakatimeStats } from "./fetchers/wakatime.js";
+export { retryer } from "./common/retryer.js";
+
+export { renderError } from "./common/render.js";
+
+export { dateDiff, clampValue } from "./common/ops.js";
+
+export { logger } from "./common/log.js";
+export { request } from "./common/http.js";
+
+export { default as gist } from "./api/gist.js";
+export { default as api } from "./api/index.js";
+export { default as pin } from "./api/pin.js";
+export { default as topLangs } from "./api/top-langs.js";
+export { default as wakatime } from "./api/wakatime.js";
+
+export { getConfig } from "./common/config.js";
+
+export { themes } from "./themes/index.js";

packages/core/src/themes/README.md

@@ -0,0 +1,229 @@
+## Available Themes
+
+<!-- DO NOT EDIT THIS FILE DIRECTLY -->
+
+With inbuilt themes, you can customize the look of the card without doing any manual customization.
+
+Use `?theme=THEME_NAME` parameter like so:
+
+```md
+![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&theme=dark&show_icons=true)
+```
+
+## Stats
+
+> These themes work with all five of our cards: Stats Card, Repo Card, Gist Card, Top Languages Card, and WakaTime Card.
+
+| | | |
+| :--: | :--: | :--: |
+| `default` ![default][default] | `transparent` ![transparent][transparent] | `shadow_red` ![shadow_red][shadow_red] |
+| `shadow_green` ![shadow_green][shadow_green] | `shadow_blue` ![shadow_blue][shadow_blue] | `dark` ![dark][dark] |
+| `radical` ![radical][radical] | `merko` ![merko][merko] | `gruvbox` ![gruvbox][gruvbox] |
+| `gruvbox_light` ![gruvbox_light][gruvbox_light] | `tokyonight` ![tokyonight][tokyonight] | `onedark` ![onedark][onedark] |
+| `cobalt` ![cobalt][cobalt] | `synthwave` ![synthwave][synthwave] | `highcontrast` ![highcontrast][highcontrast] |
+| `dracula` ![dracula][dracula] | `prussian` ![prussian][prussian] | `monokai` ![monokai][monokai] |
+| `vue` ![vue][vue] | `vue-dark` ![vue-dark][vue-dark] | `shades-of-purple` ![shades-of-purple][shades-of-purple] |
+| `nightowl` ![nightowl][nightowl] | `buefy` ![buefy][buefy] | `blue-green` ![blue-green][blue-green] |
+| `algolia` ![algolia][algolia] | `great-gatsby` ![great-gatsby][great-gatsby] | `darcula` ![darcula][darcula] |
+| `bear` ![bear][bear] | `solarized-dark` ![solarized-dark][solarized-dark] | `solarized-light` ![solarized-light][solarized-light] |
+| `chartreuse-dark` ![chartreuse-dark][chartreuse-dark] | `nord` ![nord][nord] | `gotham` ![gotham][gotham] |
+| `material-palenight` ![material-palenight][material-palenight] | `graywhite` ![graywhite][graywhite] | `vision-friendly-dark` ![vision-friendly-dark][vision-friendly-dark] |
+| `ayu-mirage` ![ayu-mirage][ayu-mirage] | `midnight-purple` ![midnight-purple][midnight-purple] | `calm` ![calm][calm] |
+| `flag-india` ![flag-india][flag-india] | `omni` ![omni][omni] | `react` ![react][react] |
+| `jolly` ![jolly][jolly] | `maroongold` ![maroongold][maroongold] | `yeblu` ![yeblu][yeblu] |
+| `blueberry` ![blueberry][blueberry] | `slateorange` ![slateorange][slateorange] | `kacho_ga` ![kacho_ga][kacho_ga] |
+| `outrun` ![outrun][outrun] | `ocean_dark` ![ocean_dark][ocean_dark] | `city_lights` ![city_lights][city_lights] |
+| `github_dark` ![github_dark][github_dark] | `github_dark_dimmed` ![github_dark_dimmed][github_dark_dimmed] | `discord_old_blurple` ![discord_old_blurple][discord_old_blurple] |
+| `aura_dark` ![aura_dark][aura_dark] | `panda` ![panda][panda] | `noctis_minimus` ![noctis_minimus][noctis_minimus] |
+| `cobalt2` ![cobalt2][cobalt2] | `swift` ![swift][swift] | `aura` ![aura][aura] |
+| `apprentice` ![apprentice][apprentice] | `moltack` ![moltack][moltack] | `codeSTACKr` ![codeSTACKr][codeSTACKr] |
+| `rose_pine` ![rose_pine][rose_pine] | `catppuccin_latte` ![catppuccin_latte][catppuccin_latte] | `catppuccin_mocha` ![catppuccin_mocha][catppuccin_mocha] |
+| `date_night` ![date_night][date_night] | `one_dark_pro` ![one_dark_pro][one_dark_pro] | `rose` ![rose][rose] |
+| `holi` ![holi][holi] | `neon` ![neon][neon] | `blue_navy` ![blue_navy][blue_navy] |
+| `calm_pink` ![calm_pink][calm_pink] | `ambient_gradient` ![ambient_gradient][ambient_gradient] |  |
+
+## Repo Card
+
+> These themes work with all five of our cards: Stats Card, Repo Card, Gist Card, Top Languages Card, and WakaTime Card.
+
+| | | |
+| :--: | :--: | :--: |
+| `default_repocard` ![default_repocard][default_repocard_repo] | `transparent` ![transparent][transparent_repo] | `shadow_red` ![shadow_red][shadow_red_repo] |
+| `shadow_green` ![shadow_green][shadow_green_repo] | `shadow_blue` ![shadow_blue][shadow_blue_repo] | `dark` ![dark][dark_repo] |
+| `radical` ![radical][radical_repo] | `merko` ![merko][merko_repo] | `gruvbox` ![gruvbox][gruvbox_repo] |
+| `gruvbox_light` ![gruvbox_light][gruvbox_light_repo] | `tokyonight` ![tokyonight][tokyonight_repo] | `onedark` ![onedark][onedark_repo] |
+| `cobalt` ![cobalt][cobalt_repo] | `synthwave` ![synthwave][synthwave_repo] | `highcontrast` ![highcontrast][highcontrast_repo] |
+| `dracula` ![dracula][dracula_repo] | `prussian` ![prussian][prussian_repo] | `monokai` ![monokai][monokai_repo] |
+| `vue` ![vue][vue_repo] | `vue-dark` ![vue-dark][vue-dark_repo] | `shades-of-purple` ![shades-of-purple][shades-of-purple_repo] |
+| `nightowl` ![nightowl][nightowl_repo] | `buefy` ![buefy][buefy_repo] | `blue-green` ![blue-green][blue-green_repo] |
+| `algolia` ![algolia][algolia_repo] | `great-gatsby` ![great-gatsby][great-gatsby_repo] | `darcula` ![darcula][darcula_repo] |
+| `bear` ![bear][bear_repo] | `solarized-dark` ![solarized-dark][solarized-dark_repo] | `solarized-light` ![solarized-light][solarized-light_repo] |
+| `chartreuse-dark` ![chartreuse-dark][chartreuse-dark_repo] | `nord` ![nord][nord_repo] | `gotham` ![gotham][gotham_repo] |
+| `material-palenight` ![material-palenight][material-palenight_repo] | `graywhite` ![graywhite][graywhite_repo] | `vision-friendly-dark` ![vision-friendly-dark][vision-friendly-dark_repo] |
+| `ayu-mirage` ![ayu-mirage][ayu-mirage_repo] | `midnight-purple` ![midnight-purple][midnight-purple_repo] | `calm` ![calm][calm_repo] |
+| `flag-india` ![flag-india][flag-india_repo] | `omni` ![omni][omni_repo] | `react` ![react][react_repo] |
+| `jolly` ![jolly][jolly_repo] | `maroongold` ![maroongold][maroongold_repo] | `yeblu` ![yeblu][yeblu_repo] |
+| `blueberry` ![blueberry][blueberry_repo] | `slateorange` ![slateorange][slateorange_repo] | `kacho_ga` ![kacho_ga][kacho_ga_repo] |
+| `outrun` ![outrun][outrun_repo] | `ocean_dark` ![ocean_dark][ocean_dark_repo] | `city_lights` ![city_lights][city_lights_repo] |
+| `github_dark` ![github_dark][github_dark_repo] | `github_dark_dimmed` ![github_dark_dimmed][github_dark_dimmed_repo] | `discord_old_blurple` ![discord_old_blurple][discord_old_blurple_repo] |
+| `aura_dark` ![aura_dark][aura_dark_repo] | `panda` ![panda][panda_repo] | `noctis_minimus` ![noctis_minimus][noctis_minimus_repo] |
+| `cobalt2` ![cobalt2][cobalt2_repo] | `swift` ![swift][swift_repo] | `aura` ![aura][aura_repo] |
+| `apprentice` ![apprentice][apprentice_repo] | `moltack` ![moltack][moltack_repo] | `codeSTACKr` ![codeSTACKr][codeSTACKr_repo] |
+| `rose_pine` ![rose_pine][rose_pine_repo] | `catppuccin_latte` ![catppuccin_latte][catppuccin_latte_repo] | `catppuccin_mocha` ![catppuccin_mocha][catppuccin_mocha_repo] |
+| `date_night` ![date_night][date_night_repo] | `one_dark_pro` ![one_dark_pro][one_dark_pro_repo] | `rose` ![rose][rose_repo] |
+| `holi` ![holi][holi_repo] | `neon` ![neon][neon_repo] | `blue_navy` ![blue_navy][blue_navy_repo] |
+| `calm_pink` ![calm_pink][calm_pink_repo] | `ambient_gradient` ![ambient_gradient][ambient_gradient_repo] |  |
+
+
+[default]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=default
+[default_repocard]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=default_repocard
+[transparent]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=transparent
+[shadow_red]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=shadow_red
+[shadow_green]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=shadow_green
+[shadow_blue]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=shadow_blue
+[dark]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=dark
+[radical]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=radical
+[merko]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=merko
+[gruvbox]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=gruvbox
+[gruvbox_light]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=gruvbox_light
+[tokyonight]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=tokyonight
+[onedark]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=onedark
+[cobalt]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=cobalt
+[synthwave]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=synthwave
+[highcontrast]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=highcontrast
+[dracula]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=dracula
+[prussian]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=prussian
+[monokai]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=monokai
+[vue]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=vue
+[vue-dark]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=vue-dark
+[shades-of-purple]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=shades-of-purple
+[nightowl]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=nightowl
+[buefy]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=buefy
+[blue-green]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=blue-green
+[algolia]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=algolia
+[great-gatsby]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=great-gatsby
+[darcula]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=darcula
+[bear]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=bear
+[solarized-dark]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=solarized-dark
+[solarized-light]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=solarized-light
+[chartreuse-dark]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=chartreuse-dark
+[nord]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=nord
+[gotham]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=gotham
+[material-palenight]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=material-palenight
+[graywhite]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=graywhite
+[vision-friendly-dark]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=vision-friendly-dark
+[ayu-mirage]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=ayu-mirage
+[midnight-purple]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=midnight-purple
+[calm]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=calm
+[flag-india]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=flag-india
+[omni]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=omni
+[react]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=react
+[jolly]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=jolly
+[maroongold]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=maroongold
+[yeblu]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=yeblu
+[blueberry]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=blueberry
+[slateorange]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=slateorange
+[kacho_ga]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=kacho_ga
+[outrun]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=outrun
+[ocean_dark]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=ocean_dark
+[city_lights]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=city_lights
+[github_dark]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=github_dark
+[github_dark_dimmed]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=github_dark_dimmed
+[discord_old_blurple]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=discord_old_blurple
+[aura_dark]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=aura_dark
+[panda]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=panda
+[noctis_minimus]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=noctis_minimus
+[cobalt2]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=cobalt2
+[swift]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=swift
+[aura]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=aura
+[apprentice]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=apprentice
+[moltack]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=moltack
+[codeSTACKr]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=codeSTACKr
+[rose_pine]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=rose_pine
+[catppuccin_latte]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=catppuccin_latte
+[catppuccin_mocha]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=catppuccin_mocha
+[date_night]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=date_night
+[one_dark_pro]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=one_dark_pro
+[rose]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=rose
+[holi]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=holi
+[neon]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=neon
+[blue_navy]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=blue_navy
+[calm_pink]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=calm_pink
+[ambient_gradient]: https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=ambient_gradient
+
+
+[default_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=default
+[default_repocard_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=default_repocard
+[transparent_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=transparent
+[shadow_red_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=shadow_red
+[shadow_green_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=shadow_green
+[shadow_blue_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=shadow_blue
+[dark_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dark
+[radical_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=radical
+[merko_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=merko
+[gruvbox_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=gruvbox
+[gruvbox_light_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=gruvbox_light
+[tokyonight_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=tokyonight
+[onedark_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=onedark
+[cobalt_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=cobalt
+[synthwave_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=synthwave
+[highcontrast_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=highcontrast
+[dracula_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dracula
+[prussian_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=prussian
+[monokai_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=monokai
+[vue_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=vue
+[vue-dark_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=vue-dark
+[shades-of-purple_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=shades-of-purple
+[nightowl_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=nightowl
+[buefy_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=buefy
+[blue-green_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=blue-green
+[algolia_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=algolia
+[great-gatsby_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=great-gatsby
+[darcula_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=darcula
+[bear_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=bear
+[solarized-dark_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=solarized-dark
+[solarized-light_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=solarized-light
+[chartreuse-dark_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=chartreuse-dark
+[nord_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=nord
+[gotham_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=gotham
+[material-palenight_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=material-palenight
+[graywhite_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=graywhite
+[vision-friendly-dark_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=vision-friendly-dark
+[ayu-mirage_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=ayu-mirage
+[midnight-purple_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=midnight-purple
+[calm_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=calm
+[flag-india_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=flag-india
+[omni_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=omni
+[react_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=react
+[jolly_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=jolly
+[maroongold_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=maroongold
+[yeblu_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=yeblu
+[blueberry_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=blueberry
+[slateorange_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=slateorange
+[kacho_ga_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=kacho_ga
+[outrun_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=outrun
+[ocean_dark_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=ocean_dark
+[city_lights_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=city_lights
+[github_dark_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=github_dark
+[github_dark_dimmed_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=github_dark_dimmed
+[discord_old_blurple_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=discord_old_blurple
+[aura_dark_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=aura_dark
+[panda_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=panda
+[noctis_minimus_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=noctis_minimus
+[cobalt2_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=cobalt2
+[swift_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=swift
+[aura_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=aura
+[apprentice_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=apprentice
+[moltack_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=moltack
+[codeSTACKr_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=codeSTACKr
+[rose_pine_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=rose_pine
+[catppuccin_latte_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=catppuccin_latte
+[catppuccin_mocha_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=catppuccin_mocha
+[date_night_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=date_night
+[one_dark_pro_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=one_dark_pro
+[rose_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=rose
+[holi_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=holi
+[neon_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=neon
+[blue_navy_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=blue_navy
+[calm_pink_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=calm_pink
+[ambient_gradient_repo]: https://github-stats-extended.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=ambient_gradient

packages/core/src/themes/index.ts

@@ -0,0 +1,476 @@
+interface Theme {
+  title_color: string;
+  icon_color: string;
+  text_color: string;
+  bg_color: string;
+  border_color?: string;
+}
+
+/**
+ * Collection of available themes.
+ */
+export const themes = {
+  default: {
+    title_color: "2f80ed",
+    icon_color: "4c71f2",
+    text_color: "434d58",
+    bg_color: "fffefe",
+    border_color: "e4e2e2",
+  },
+  default_repocard: {
+    title_color: "2f80ed",
+    icon_color: "586069", // icon color is different
+    text_color: "434d58",
+    bg_color: "fffefe",
+  },
+  transparent: {
+    title_color: "006AFF",
+    icon_color: "0579C3",
+    text_color: "417E87",
+    bg_color: "ffffff00",
+  },
+  shadow_red: {
+    title_color: "9A0000",
+    text_color: "444",
+    icon_color: "4F0000",
+    border_color: "4F0000",
+    bg_color: "ffffff00",
+  },
+  shadow_green: {
+    title_color: "007A00",
+    text_color: "444",
+    icon_color: "003D00",
+    border_color: "003D00",
+    bg_color: "ffffff00",
+  },
+  shadow_blue: {
+    title_color: "00779A",
+    text_color: "444",
+    icon_color: "004450",
+    border_color: "004490",
+    bg_color: "ffffff00",
+  },
+  dark: {
+    title_color: "fff",
+    icon_color: "79ff97",
+    text_color: "9f9f9f",
+    bg_color: "151515",
+  },
+  radical: {
+    title_color: "fe428e",
+    icon_color: "f8d847",
+    text_color: "a9fef7",
+    bg_color: "141321",
+  },
+  merko: {
+    title_color: "abd200",
+    icon_color: "b7d364",
+    text_color: "68b587",
+    bg_color: "0a0f0b",
+  },
+  gruvbox: {
+    title_color: "fabd2f",
+    icon_color: "fe8019",
+    text_color: "8ec07c",
+    bg_color: "282828",
+  },
+  gruvbox_light: {
+    title_color: "b57614",
+    icon_color: "af3a03",
+    text_color: "427b58",
+    bg_color: "fbf1c7",
+  },
+  tokyonight: {
+    title_color: "70a5fd",
+    icon_color: "bf91f3",
+    text_color: "38bdae",
+    bg_color: "1a1b27",
+  },
+  onedark: {
+    title_color: "e4bf7a",
+    icon_color: "8eb573",
+    text_color: "df6d74",
+    bg_color: "282c34",
+  },
+  cobalt: {
+    title_color: "e683d9",
+    icon_color: "0480ef",
+    text_color: "75eeb2",
+    bg_color: "193549",
+  },
+  synthwave: {
+    title_color: "e2e9ec",
+    icon_color: "ef8539",
+    text_color: "e5289e",
+    bg_color: "2b213a",
+  },
+  highcontrast: {
+    title_color: "e7f216",
+    icon_color: "00ffff",
+    text_color: "fff",
+    bg_color: "000",
+  },
+  dracula: {
+    title_color: "ff6e96",
+    icon_color: "79dafa",
+    text_color: "f8f8f2",
+    bg_color: "282a36",
+  },
+  prussian: {
+    title_color: "bddfff",
+    icon_color: "38a0ff",
+    text_color: "6e93b5",
+    bg_color: "172f45",
+  },
+  monokai: {
+    title_color: "eb1f6a",
+    icon_color: "e28905",
+    text_color: "f1f1eb",
+    bg_color: "272822",
+  },
+  vue: {
+    title_color: "41b883",
+    icon_color: "41b883",
+    text_color: "273849",
+    bg_color: "fffefe",
+  },
+  "vue-dark": {
+    title_color: "41b883",
+    icon_color: "41b883",
+    text_color: "fffefe",
+    bg_color: "273849",
+  },
+  "shades-of-purple": {
+    title_color: "fad000",
+    icon_color: "b362ff",
+    text_color: "a599e9",
+    bg_color: "2d2b55",
+  },
+  nightowl: {
+    title_color: "c792ea",
+    icon_color: "ffeb95",
+    text_color: "7fdbca",
+    bg_color: "011627",
+  },
+  buefy: {
+    title_color: "7957d5",
+    icon_color: "ff3860",
+    text_color: "363636",
+    bg_color: "ffffff",
+  },
+  "blue-green": {
+    title_color: "2f97c1",
+    icon_color: "f5b700",
+    text_color: "0cf574",
+    bg_color: "040f0f",
+  },
+  algolia: {
+    title_color: "00AEFF",
+    icon_color: "2DDE98",
+    text_color: "FFFFFF",
+    bg_color: "050F2C",
+  },
+  "great-gatsby": {
+    title_color: "ffa726",
+    icon_color: "ffb74d",
+    text_color: "ffd95b",
+    bg_color: "000000",
+  },
+  darcula: {
+    title_color: "BA5F17",
+    icon_color: "84628F",
+    text_color: "BEBEBE",
+    bg_color: "242424",
+  },
+  bear: {
+    title_color: "e03c8a",
+    icon_color: "00AEFF",
+    text_color: "bcb28d",
+    bg_color: "1f2023",
+  },
+  "solarized-dark": {
+    title_color: "268bd2",
+    icon_color: "b58900",
+    text_color: "859900",
+    bg_color: "002b36",
+  },
+  "solarized-light": {
+    title_color: "268bd2",
+    icon_color: "b58900",
+    text_color: "859900",
+    bg_color: "fdf6e3",
+  },
+  "chartreuse-dark": {
+    title_color: "7fff00",
+    icon_color: "00AEFF",
+    text_color: "fff",
+    bg_color: "000",
+  },
+  nord: {
+    title_color: "81a1c1",
+    text_color: "d8dee9",
+    icon_color: "88c0d0",
+    bg_color: "2e3440",
+  },
+  gotham: {
+    title_color: "2aa889",
+    icon_color: "599cab",
+    text_color: "99d1ce",
+    bg_color: "0c1014",
+  },
+  "material-palenight": {
+    title_color: "c792ea",
+    icon_color: "89ddff",
+    text_color: "a6accd",
+    bg_color: "292d3e",
+  },
+  graywhite: {
+    title_color: "24292e",
+    icon_color: "24292e",
+    text_color: "24292e",
+    bg_color: "ffffff",
+  },
+  "vision-friendly-dark": {
+    title_color: "ffb000",
+    icon_color: "785ef0",
+    text_color: "ffffff",
+    bg_color: "000000",
+  },
+  "ayu-mirage": {
+    title_color: "f4cd7c",
+    icon_color: "73d0ff",
+    text_color: "c7c8c2",
+    bg_color: "1f2430",
+  },
+  "midnight-purple": {
+    title_color: "9745f5",
+    icon_color: "9f4bff",
+    text_color: "ffffff",
+    bg_color: "000000",
+  },
+  calm: {
+    title_color: "e07a5f",
+    icon_color: "edae49",
+    text_color: "ebcfb2",
+    bg_color: "373f51",
+  },
+  "flag-india": {
+    title_color: "ff8f1c",
+    icon_color: "250E62",
+    text_color: "509E2F",
+    bg_color: "ffffff",
+  },
+  omni: {
+    title_color: "FF79C6",
+    icon_color: "e7de79",
+    text_color: "E1E1E6",
+    bg_color: "191622",
+  },
+  react: {
+    title_color: "61dafb",
+    icon_color: "61dafb",
+    text_color: "ffffff",
+    bg_color: "20232a",
+  },
+  jolly: {
+    title_color: "ff64da",
+    icon_color: "a960ff",
+    text_color: "ffffff",
+    bg_color: "291B3E",
+  },
+  maroongold: {
+    title_color: "F7EF8A",
+    icon_color: "F7EF8A",
+    text_color: "E0AA3E",
+    bg_color: "260000",
+  },
+  yeblu: {
+    title_color: "ffff00",
+    icon_color: "ffff00",
+    text_color: "ffffff",
+    bg_color: "002046",
+  },
+  blueberry: {
+    title_color: "82aaff",
+    icon_color: "89ddff",
+    text_color: "27e8a7",
+    bg_color: "242938",
+  },
+  slateorange: {
+    title_color: "faa627",
+    icon_color: "faa627",
+    text_color: "ffffff",
+    bg_color: "36393f",
+  },
+  kacho_ga: {
+    title_color: "bf4a3f",
+    icon_color: "a64833",
+    text_color: "d9c8a9",
+    bg_color: "402b23",
+  },
+  outrun: {
+    title_color: "ffcc00",
+    icon_color: "ff1aff",
+    text_color: "8080ff",
+    bg_color: "141439",
+  },
+  ocean_dark: {
+    title_color: "8957B2",
+    icon_color: "FFFFFF",
+    text_color: "92D534",
+    bg_color: "151A28",
+  },
+  city_lights: {
+    title_color: "5D8CB3",
+    icon_color: "4798FF",
+    text_color: "718CA1",
+    bg_color: "1D252C",
+  },
+  github_dark: {
+    title_color: "58A6FF",
+    icon_color: "1F6FEB",
+    text_color: "C3D1D9",
+    bg_color: "0D1117",
+  },
+  github_dark_dimmed: {
+    title_color: "539bf5",
+    icon_color: "539bf5",
+    text_color: "ADBAC7",
+    bg_color: "24292F",
+    border_color: "373E47",
+  },
+  discord_old_blurple: {
+    title_color: "7289DA",
+    icon_color: "7289DA",
+    text_color: "FFFFFF",
+    bg_color: "2C2F33",
+  },
+  aura_dark: {
+    title_color: "ff7372",
+    icon_color: "6cffd0",
+    text_color: "dbdbdb",
+    bg_color: "252334",
+  },
+  panda: {
+    title_color: "19f9d899",
+    icon_color: "19f9d899",
+    text_color: "FF75B5",
+    bg_color: "31353a",
+  },
+  noctis_minimus: {
+    title_color: "d3b692",
+    icon_color: "72b7c0",
+    text_color: "c5cdd3",
+    bg_color: "1b2932",
+  },
+  cobalt2: {
+    title_color: "ffc600",
+    icon_color: "ffffff",
+    text_color: "0088ff",
+    bg_color: "193549",
+  },
+  swift: {
+    title_color: "000000",
+    icon_color: "f05237",
+    text_color: "000000",
+    bg_color: "f7f7f7",
+  },
+  aura: {
+    title_color: "a277ff",
+    icon_color: "ffca85",
+    text_color: "61ffca",
+    bg_color: "15141b",
+  },
+  apprentice: {
+    title_color: "ffffff",
+    icon_color: "ffffaf",
+    text_color: "bcbcbc",
+    bg_color: "262626",
+  },
+  moltack: {
+    title_color: "86092C",
+    icon_color: "86092C",
+    text_color: "574038",
+    bg_color: "F5E1C0",
+  },
+  codeSTACKr: {
+    title_color: "ff652f",
+    icon_color: "FFE400",
+    text_color: "ffffff",
+    bg_color: "09131B",
+    border_color: "0c1a25",
+  },
+  rose_pine: {
+    title_color: "9ccfd8",
+    icon_color: "ebbcba",
+    text_color: "e0def4",
+    bg_color: "191724",
+  },
+  catppuccin_latte: {
+    title_color: "137980",
+    icon_color: "8839ef",
+    text_color: "4c4f69",
+    bg_color: "eff1f5",
+  },
+  catppuccin_mocha: {
+    title_color: "94e2d5",
+    icon_color: "cba6f7",
+    text_color: "cdd6f4",
+    bg_color: "1e1e2e",
+  },
+  date_night: {
+    title_color: "DA7885",
+    text_color: "E1B2A2",
+    icon_color: "BB8470",
+    border_color: "170F0C",
+    bg_color: "170F0C",
+  },
+  one_dark_pro: {
+    title_color: "61AFEF",
+    text_color: "E5C06E",
+    icon_color: "C678DD",
+    border_color: "3B4048",
+    bg_color: "23272E",
+  },
+  rose: {
+    title_color: "8d192b",
+    text_color: "862931",
+    icon_color: "B71F36",
+    border_color: "e9d8d4",
+    bg_color: "e9d8d4",
+  },
+  holi: {
+    title_color: "5FABEE",
+    text_color: "D6E7FF",
+    icon_color: "5FABEE",
+    border_color: "85A4C0",
+    bg_color: "030314",
+  },
+  neon: {
+    title_color: "00EAD3",
+    text_color: "FF449F",
+    icon_color: "00EAD3",
+    border_color: "ffffff",
+    bg_color: "000000",
+  },
+  blue_navy: {
+    title_color: "82AAFF",
+    text_color: "82AAFF",
+    icon_color: "82AAFF",
+    border_color: "ffffff",
+    bg_color: "000000",
+  },
+  calm_pink: {
+    title_color: "e07a5f",
+    text_color: "edae49",
+    icon_color: "ebcfb2",
+    border_color: "e1bc29",
+    bg_color: "2b2d40",
+  },
+  ambient_gradient: {
+    title_color: "ffffff",
+    text_color: "ffffff",
+    icon_color: "ffffff",
+    bg_color: "35,4158d0,c850c0,ffcc70",
+  },
+} as const satisfies Record<string, Theme>;

packages/core/tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -0,0 +1,693 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test Render WakaTime Card > should render correctly 1`] = `
+"
+      <svg
+        width="495"
+        height="150"
+        viewBox="0 0 495 150"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-labelledby="descId"
+      >
+        <title id="titleId"></title>
+        <desc id="descId"></desc>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect
+          data-testid="card-bg"
+          x="0.5"
+          y="0.5"
+          rx="4.5"
+          height="99%"
+          stroke="#e4e2e2"
+          width="494"
+          fill="#fffefe"
+          stroke-opacity="1"
+        />
+
+        
+      <g
+        data-testid="card-title"
+        transform="translate(25, 35)"
+      >
+        <g transform="translate(0, 0)">
+      <text
+        x="0"
+        y="0"
+        class="header"
+        data-testid="header"
+      >WakaTime Stats (last 7 days)</text>
+    </g>
+      </g>
+    
+
+        <g
+          data-testid="main-card-body"
+          transform="translate(0, 55)"
+        >
+          
+    <svg x="0" y="0" width="100%">
+      <g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="Other">Other:</text>
+      <text
+        class="stat"
+        x="350"
+        y="12.5"
+      >19 mins</text>
+      
+    <svg width="220" x="110" y="4">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
+      <svg data-testid="lang-progress" width="89.38%">
+        <rect
+            height="8"
+            fill="#2f80ed"
+            rx="5" ry="5" x="0" y="0"
+            class="lang-progress"
+            style="animation-delay: 750ms;"
+        />
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 25)">
+    <g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="TypeScript">TypeScript:</text>
+      <text
+        class="stat"
+        x="350"
+        y="12.5"
+      >1 min</text>
+      
+    <svg width="220" x="110" y="4">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
+      <svg data-testid="lang-progress" width="6.25%">
+        <rect
+            height="8"
+            fill="#2f80ed"
+            rx="5" ry="5" x="0" y="0"
+            class="lang-progress"
+            style="animation-delay: 900ms;"
+        />
+      </svg>
+    </svg>
+  
+    </g>
+  </g>
+    </svg>
+  
+        </g>
+      </svg>
+    "
+`;
+
+exports[`Test Render WakaTime Card > should render correctly with compact layout 1`] = `
+"
+      <svg
+        width="495"
+        height="115"
+        viewBox="0 0 495 115"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-labelledby="descId"
+      >
+        <title id="titleId"></title>
+        <desc id="descId"></desc>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect
+          data-testid="card-bg"
+          x="0.5"
+          y="0.5"
+          rx="4.5"
+          height="99%"
+          stroke="#e4e2e2"
+          width="494"
+          fill="#fffefe"
+          stroke-opacity="1"
+        />
+
+        
+      <g
+        data-testid="card-title"
+        transform="translate(25, 35)"
+      >
+        <g transform="translate(0, 0)">
+      <text
+        x="0"
+        y="0"
+        class="header"
+        data-testid="header"
+      >WakaTime Stats (last 7 days)</text>
+    </g>
+      </g>
+    
+
+        <g
+          data-testid="main-card-body"
+          transform="translate(0, 55)"
+        >
+          
+    <svg x="0" y="0" width="100%">
+      
+      <mask id="rect-mask">
+      <rect x="25" y="0" width="440" height="8" fill="white" rx="5" />
+      </mask>
+      
+          <rect
+            mask="url(#rect-mask)"
+            data-testid="lang-progress"
+            x="0"
+            y="0"
+            width="415.61699999999996"
+            height="8"
+            fill="#858585"
+          />
+        
+          <rect
+            mask="url(#rect-mask)"
+            data-testid="lang-progress"
+            x="415.61699999999996"
+            y="0"
+            width="29.0625"
+            height="8"
+            fill="#3178c6"
+          />
+        
+      
+    <g transform="translate(25, 25)">
+      <circle cx="5" cy="6" r="5" fill="#858585" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
+        Other - 19 mins
+      </text>
+    </g>
+  
+    <g transform="translate(230, 25)">
+      <circle cx="5" cy="6" r="5" fill="#3178c6" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
+        TypeScript - 1 min
+      </text>
+    </g>
+  
+    
+    </svg>
+  
+        </g>
+      </svg>
+    "
+`;
+
+exports[`Test Render WakaTime Card > should render correctly with compact layout when langs_count is set 1`] = `
+"
+      <svg
+        width="495"
+        height="115"
+        viewBox="0 0 495 115"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-labelledby="descId"
+      >
+        <title id="titleId"></title>
+        <desc id="descId"></desc>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect
+          data-testid="card-bg"
+          x="0.5"
+          y="0.5"
+          rx="4.5"
+          height="99%"
+          stroke="#e4e2e2"
+          width="494"
+          fill="#fffefe"
+          stroke-opacity="1"
+        />
+
+        
+      <g
+        data-testid="card-title"
+        transform="translate(25, 35)"
+      >
+        <g transform="translate(0, 0)">
+      <text
+        x="0"
+        y="0"
+        class="header"
+        data-testid="header"
+      >WakaTime Stats (last 7 days)</text>
+    </g>
+      </g>
+    
+
+        <g
+          data-testid="main-card-body"
+          transform="translate(0, 55)"
+        >
+          
+    <svg x="0" y="0" width="100%">
+      
+      <mask id="rect-mask">
+      <rect x="25" y="0" width="440" height="8" fill="white" rx="5" />
+      </mask>
+      
+          <rect
+            mask="url(#rect-mask)"
+            data-testid="lang-progress"
+            x="0"
+            y="0"
+            width="436.4025"
+            height="8"
+            fill="#858585"
+          />
+        
+          <rect
+            mask="url(#rect-mask)"
+            data-testid="lang-progress"
+            x="436.4025"
+            y="0"
+            width="30.503999999999998"
+            height="8"
+            fill="#3178c6"
+          />
+        
+      
+    <g transform="translate(25, 25)">
+      <circle cx="5" cy="6" r="5" fill="#858585" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
+        Other - 19 mins
+      </text>
+    </g>
+  
+    <g transform="translate(230, 25)">
+      <circle cx="5" cy="6" r="5" fill="#3178c6" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
+        TypeScript - 1 min
+      </text>
+    </g>
+  
+    
+    </svg>
+  
+        </g>
+      </svg>
+    "
+`;
+
+exports[`Test Render WakaTime Card > should render correctly with percent display format 1`] = `
+"
+      <svg
+        width="495"
+        height="150"
+        viewBox="0 0 495 150"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-labelledby="descId"
+      >
+        <title id="titleId"></title>
+        <desc id="descId"></desc>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect
+          data-testid="card-bg"
+          x="0.5"
+          y="0.5"
+          rx="4.5"
+          height="99%"
+          stroke="#e4e2e2"
+          width="494"
+          fill="#fffefe"
+          stroke-opacity="1"
+        />
+
+        
+      <g
+        data-testid="card-title"
+        transform="translate(25, 35)"
+      >
+        <g transform="translate(0, 0)">
+      <text
+        x="0"
+        y="0"
+        class="header"
+        data-testid="header"
+      >WakaTime Stats (last 7 days)</text>
+    </g>
+      </g>
+    
+
+        <g
+          data-testid="main-card-body"
+          transform="translate(0, 55)"
+        >
+          
+    <svg x="0" y="0" width="100%">
+      <g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="Other">Other:</text>
+      <text
+        class="stat"
+        x="350"
+        y="12.5"
+      >47.39 %</text>
+      
+    <svg width="220" x="110" y="4">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
+      <svg data-testid="lang-progress" width="47.39%">
+        <rect
+            height="8"
+            fill="#2f80ed"
+            rx="5" ry="5" x="0" y="0"
+            class="lang-progress"
+            style="animation-delay: 750ms;"
+        />
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 25)">
+    <g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="TypeScript">TypeScript:</text>
+      <text
+        class="stat"
+        x="350"
+        y="12.5"
+      >50.48 %</text>
+      
+    <svg width="220" x="110" y="4">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
+      <svg data-testid="lang-progress" width="50.48%">
+        <rect
+            height="8"
+            fill="#2f80ed"
+            rx="5" ry="5" x="0" y="0"
+            class="lang-progress"
+            style="animation-delay: 900ms;"
+        />
+      </svg>
+    </svg>
+  
+    </g>
+  </g>
+    </svg>
+  
+        </g>
+      </svg>
+    "
+`;

packages/core/tests/_setup.js

@@ -0,0 +1,7 @@
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { expect } from "vitest";
+
+expect.extend(matchers);
+
+process.env.PAT_1 = "dummyPAT1";
+process.env.PAT_2 = "dummyPAT2";

packages/core/tests/calculateRank.test.js

@@ -0,0 +1,124 @@
+import { describe, expect, it } from "vitest";
+
+import { calculateRank } from "../src/calculateRank.js";
+
+import { approxNumber } from "./utils.js";
+
+describe("Test calculateRank", () => {
+  it("new user gets C rank", () => {
+    expect(
+      calculateRank({
+        all_commits: false,
+        commits: 0,
+        prs: 0,
+        issues: 0,
+        reviews: 0,
+        repos: 0,
+        stars: 0,
+        followers: 0,
+      }),
+    ).toStrictEqual({ level: "C", percentile: 100 });
+  });
+
+  it("beginner user gets B- rank", () => {
+    expect(
+      calculateRank({
+        all_commits: false,
+        commits: 125,
+        prs: 25,
+        issues: 10,
+        reviews: 5,
+        repos: 0,
+        stars: 25,
+        followers: 5,
+      }),
+    ).toStrictEqual({
+      level: "B-",
+      percentile: approxNumber(65.02918514848255),
+    });
+  });
+
+  it("median user gets B+ rank", () => {
+    expect(
+      calculateRank({
+        all_commits: false,
+        commits: 250,
+        prs: 50,
+        issues: 25,
+        reviews: 10,
+        repos: 0,
+        stars: 50,
+        followers: 10,
+      }),
+    ).toStrictEqual({ level: "B+", percentile: approxNumber(46.09375) });
+  });
+
+  it("average user gets B+ rank (include_all_commits)", () => {
+    expect(
+      calculateRank({
+        all_commits: true,
+        commits: 1000,
+        prs: 50,
+        issues: 25,
+        reviews: 10,
+        repos: 0,
+        stars: 50,
+        followers: 10,
+      }),
+    ).toStrictEqual({ level: "B+", percentile: approxNumber(46.09375) });
+  });
+
+  it("advanced user gets A rank", () => {
+    expect(
+      calculateRank({
+        all_commits: false,
+        commits: 500,
+        prs: 100,
+        issues: 50,
+        reviews: 20,
+        repos: 0,
+        stars: 200,
+        followers: 40,
+      }),
+    ).toStrictEqual({
+      level: "A",
+      percentile: approxNumber(20.841471354166664),
+    });
+  });
+
+  it("expert user gets A+ rank", () => {
+    expect(
+      calculateRank({
+        all_commits: false,
+        commits: 1000,
+        prs: 200,
+        issues: 100,
+        reviews: 40,
+        repos: 0,
+        stars: 800,
+        followers: 160,
+      }),
+    ).toStrictEqual({
+      level: "A+",
+      percentile: approxNumber(5.575988339442828),
+    });
+  });
+
+  it("sindresorhus gets S rank", () => {
+    expect(
+      calculateRank({
+        all_commits: false,
+        commits: 1300,
+        prs: 1500,
+        issues: 4500,
+        reviews: 1000,
+        repos: 0,
+        stars: 600000,
+        followers: 50000,
+      }),
+    ).toStrictEqual({
+      level: "S",
+      percentile: approxNumber(0.4578556547153667),
+    });
+  });
+});

packages/core/tests/card.test.js

@@ -0,0 +1,196 @@
+import { queryByTestId } from "@testing-library/dom";
+import { cssToObject } from "@uppercod/css-to-object";
+import { describe, expect, it } from "vitest";
+
+import { Card } from "../src/common/Card.js";
+import { getCardColors } from "../src/common/color.js";
+import { icons } from "../src/common/icons.js";
+
+describe("Card", () => {
+  it("should hide border", () => {
+    const card = new Card({});
+    card.setHideBorder(true);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "stroke-opacity",
+      "0",
+    );
+  });
+
+  it("should not hide border", () => {
+    const card = new Card({});
+    card.setHideBorder(false);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "stroke-opacity",
+      "1",
+    );
+  });
+
+  it("should have a custom title", () => {
+    const card = new Card({
+      customTitle: "custom title",
+      defaultTitle: "default title",
+    });
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-title")).toHaveTextContent(
+      "custom title",
+    );
+  });
+
+  it("should set custom title", () => {
+    const card = new Card({});
+    card.setTitle("custom title");
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-title")).toHaveTextContent(
+      "custom title",
+    );
+  });
+
+  it("should hide title", () => {
+    const card = new Card({});
+    card.setHideTitle(true);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-title")).toBeNull();
+  });
+
+  it("should not hide title", () => {
+    const card = new Card({});
+    card.setHideTitle(false);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-title")).toBeInTheDocument();
+  });
+
+  it("title should have prefix icon", () => {
+    const card = new Card({ title: "ok", titlePrefixIcon: icons.contribs });
+
+    document.body.innerHTML = card.render(``);
+    expect(document.getElementsByClassName("icon")[0]).toBeInTheDocument();
+  });
+
+  it("title should not have prefix icon", () => {
+    const card = new Card({ title: "ok" });
+
+    document.body.innerHTML = card.render(``);
+    expect(document.getElementsByClassName("icon")[0]).toBeUndefined();
+  });
+
+  it("should have proper height, width", () => {
+    const card = new Card({ height: 200, width: 200, title: "ok" });
+    document.body.innerHTML = card.render(``);
+    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
+      "height",
+      "200",
+    );
+    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
+      "width",
+      "200",
+    );
+  });
+
+  it("should have less height after title is hidden", () => {
+    const card = new Card({ height: 200, title: "ok" });
+    card.setHideTitle(true);
+
+    document.body.innerHTML = card.render(``);
+    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
+      "height",
+      "170",
+    );
+  });
+
+  it("main-card-body should have proper when title is visible", () => {
+    const card = new Card({ height: 200 });
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute(
+      "transform",
+      "translate(0, 55)",
+    );
+  });
+
+  it("main-card-body should have proper position after title is hidden", () => {
+    const card = new Card({ height: 200 });
+    card.setHideTitle(true);
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute(
+      "transform",
+      "translate(0, 25)",
+    );
+  });
+
+  it("should render with correct colors", () => {
+    // returns theme based colors with proper overrides and defaults
+    const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+      title_color: "f00",
+      icon_color: "0f0",
+      text_color: "00f",
+      bg_color: "fff",
+      theme: "default",
+    });
+
+    const card = new Card({
+      height: 200,
+      colors: {
+        titleColor,
+        textColor,
+        iconColor,
+        bgColor,
+      },
+    });
+    document.body.innerHTML = card.render(``);
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+    const headerClassStyles = stylesObject[":host"][".header "];
+
+    expect(headerClassStyles["fill"].trim()).toBe("#f00");
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#fff",
+    );
+  });
+  it("should render gradient backgrounds", () => {
+    const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+      title_color: "f00",
+      icon_color: "0f0",
+      text_color: "00f",
+      bg_color: "90,fff,000,f00",
+      theme: "default",
+    });
+
+    const card = new Card({
+      height: 200,
+      colors: {
+        titleColor,
+        textColor,
+        iconColor,
+        bgColor,
+      },
+    });
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "url(#gradient)",
+    );
+    expect(document.querySelector("defs #gradient")).toHaveAttribute(
+      "gradientTransform",
+      "rotate(90)",
+    );
+    expect(
+      document.querySelector("defs #gradient stop:nth-child(1)"),
+    ).toHaveAttribute("stop-color", "#fff");
+    expect(
+      document.querySelector("defs #gradient stop:nth-child(2)"),
+    ).toHaveAttribute("stop-color", "#000");
+    expect(
+      document.querySelector("defs #gradient stop:nth-child(3)"),
+    ).toHaveAttribute("stop-color", "#f00");
+  });
+});

packages/core/tests/color.test.js

@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest";
+
+import { getCardColors } from "../src/common/color";
+
+describe("Test color.js", () => {
+  it("getCardColors: should return expected values", () => {
+    let colors = getCardColors({
+      title_color: "f00",
+      text_color: "0f0",
+      ring_color: "0000ff",
+      icon_color: "00f",
+      bg_color: "fff",
+      border_color: "fff",
+      theme: "dark",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#f00",
+      textColor: "#0f0",
+      iconColor: "#00f",
+      ringColor: "#0000ff",
+      bgColor: "#fff",
+      borderColor: "#fff",
+    });
+  });
+
+  it("getCardColors: should fallback to default colors if color is invalid", () => {
+    let colors = getCardColors({
+      title_color: "invalidcolor",
+      text_color: "0f0",
+      icon_color: "00f",
+      bg_color: "fff",
+      border_color: "invalidColor",
+      theme: "dark",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#2f80ed",
+      textColor: "#0f0",
+      iconColor: "#00f",
+      ringColor: "#2f80ed",
+      bgColor: "#fff",
+      borderColor: "#e4e2e2",
+    });
+  });
+
+  it("getCardColors: should fallback to specified theme colors if is not defined", () => {
+    let colors = getCardColors({
+      theme: "dark",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#fff",
+      textColor: "#9f9f9f",
+      ringColor: "#fff",
+      iconColor: "#79ff97",
+      bgColor: "#151515",
+      borderColor: "#e4e2e2",
+    });
+  });
+
+  it("getCardColors: should return ring color equal to title color if not ring color is defined", () => {
+    let colors = getCardColors({
+      title_color: "f00",
+      text_color: "0f0",
+      icon_color: "00f",
+      bg_color: "fff",
+      border_color: "fff",
+      theme: "dark",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#f00",
+      textColor: "#0f0",
+      iconColor: "#00f",
+      ringColor: "#f00",
+      bgColor: "#fff",
+      borderColor: "#fff",
+    });
+  });
+
+  it("getCardColors: should fallback to default theme if theme is invalid", () => {
+    let colors = getCardColors({
+      theme: "invalidTheme",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#2f80ed",
+      textColor: "#434d58",
+      iconColor: "#4c71f2",
+      ringColor: "#2f80ed",
+      bgColor: "#fffefe",
+      borderColor: "#e4e2e2",
+    });
+  });
+});

packages/core/tests/fetchGist.test.js

@@ -0,0 +1,117 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { fetchGist } from "../src/fetchers/gist.js";
+
+const gist_data = {
+  data: {
+    viewer: {
+      gist: {
+        description:
+          "List of countries and territories in English and Spanish: name, continent, capital, dial code, country codes, TLD, and area in sq km. Lista de países y territorios en Inglés y Español: nombre, continente, capital, código de teléfono, códigos de país, dominio y área en km cuadrados. Updated 2023",
+        owner: {
+          login: "Yizack",
+        },
+        stargazerCount: 33,
+        forks: {
+          totalCount: 11,
+        },
+        files: [
+          {
+            name: "countries.json",
+            language: {
+              name: "JSON",
+            },
+            size: 85858,
+          },
+          {
+            name: "territories.txt",
+            language: {
+              name: "Text",
+            },
+            size: 87858,
+          },
+          {
+            name: "countries_spanish.json",
+            language: {
+              name: "JSON",
+            },
+            size: 85858,
+          },
+          {
+            name: "territories_spanish.txt",
+            language: {
+              name: "Text",
+            },
+            size: 87858,
+          },
+        ],
+      },
+    },
+  },
+};
+
+const gist_not_found_data = {
+  data: {
+    viewer: {
+      gist: null,
+    },
+  },
+};
+
+const gist_errors_data = {
+  errors: [
+    {
+      message: "Some test GraphQL error",
+    },
+  ],
+};
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+describe("Test fetchGist", () => {
+  it("should fetch gist correctly", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, gist_data);
+
+    let gist = await fetchGist("bbfce31e0217a3689c8d961a356cb10d");
+
+    expect(gist).toStrictEqual({
+      name: "countries.json",
+      nameWithOwner: "Yizack/countries.json",
+      description:
+        "List of countries and territories in English and Spanish: name, continent, capital, dial code, country codes, TLD, and area in sq km. Lista de países y territorios en Inglés y Español: nombre, continente, capital, código de teléfono, códigos de país, dominio y área en km cuadrados. Updated 2023",
+      language: "Text",
+      starsCount: 33,
+      forksCount: 11,
+    });
+  });
+
+  it("should throw correct error if gist not found", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, gist_not_found_data);
+
+    await expect(fetchGist("bbfce31e0217a3689c8d961a356cb10d")).rejects.toThrow(
+      "Gist not found",
+    );
+  });
+
+  it("should throw error if response contains them", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, gist_errors_data);
+
+    await expect(fetchGist("bbfce31e0217a3689c8d961a356cb10d")).rejects.toThrow(
+      "Some test GraphQL error",
+    );
+  });
+
+  it("should throw error if id is not provided", async () => {
+    await expect(fetchGist()).rejects.toThrow(
+      'Missing params "id" make sure you pass the parameters in URL',
+    );
+  });
+});

packages/core/tests/fetchRepo.test.js

@@ -0,0 +1,105 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { fetchRepo } from "../src/fetchers/repo.js";
+
+const data_repo = {
+  repository: {
+    name: "convoychat",
+    stargazers: { totalCount: 38000 },
+    description: "Help us take over the world! React + TS + GraphQL Chat App",
+    primaryLanguage: {
+      color: "#2b7489",
+      id: "MDg6TGFuZ3VhZ2UyODc=",
+      name: "TypeScript",
+    },
+    forkCount: 100,
+  },
+};
+
+const data_user = {
+  data: {
+    user: { repository: data_repo.repository },
+    organization: null,
+  },
+};
+
+const data_org = {
+  data: {
+    user: null,
+    organization: { repository: data_repo.repository },
+  },
+};
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+describe("Test fetchRepo", () => {
+  it("should fetch correct user repo", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
+
+    let repo = await fetchRepo("anuraghazra", "convoychat");
+
+    expect(repo).toStrictEqual({
+      ...data_repo.repository,
+      starCount: data_repo.repository.stargazers.totalCount,
+    });
+  });
+
+  it("should fetch correct org repo", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_org);
+
+    let repo = await fetchRepo("anuraghazra", "convoychat");
+    expect(repo).toStrictEqual({
+      ...data_repo.repository,
+      starCount: data_repo.repository.stargazers.totalCount,
+    });
+  });
+
+  it("should throw error if user is found but repo is null", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: { repository: null }, organization: null } });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "User Repository Not found",
+    );
+  });
+
+  it("should throw error if org is found but repo is null", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: null, organization: { repository: null } } });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "Organization Repository Not found",
+    );
+  });
+
+  it("should throw error if both user & org data not found", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: null, organization: null } });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "Not found",
+    );
+  });
+
+  it("should throw error if repository is private", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, {
+      data: {
+        user: { repository: { ...data_repo, isPrivate: true } },
+        organization: null,
+      },
+    });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "User Repository Not found",
+    );
+  });
+});

packages/core/tests/fetchStats.test.js

@@ -0,0 +1,573 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { calculateRank } from "../src/calculateRank.js";
+import { loadConfigFromEnv } from "../src/common/config.js";
+import { fetchStats } from "../src/fetchers/stats.js";
+
+// Test parameters.
+const data_stats = {
+  data: {
+    user: {
+      name: "Anurag Hazra",
+      repositoriesContributedTo: { totalCount: 61 },
+      commits: {
+        totalCommitContributions: 100,
+      },
+      reviews: {
+        totalPullRequestReviewContributions: 50,
+      },
+      pullRequests: { totalCount: 300 },
+      mergedPullRequests: { totalCount: 240 },
+      openIssues: { totalCount: 100 },
+      closedIssues: { totalCount: 100 },
+      followers: { totalCount: 100 },
+      repositoryDiscussions: { totalCount: 10 },
+      repositoryDiscussionComments: { totalCount: 40 },
+      repositories: {
+        totalCount: 5,
+        nodes: [
+          { name: "test-repo-1", stargazers: { totalCount: 100 } },
+          { name: "test-repo-2", stargazers: { totalCount: 100 } },
+          { name: "test-repo-3", stargazers: { totalCount: 100 } },
+        ],
+        pageInfo: {
+          hasNextPage: true,
+          endCursor: "cursor",
+        },
+      },
+    },
+  },
+};
+
+const data_year2003 = JSON.parse(JSON.stringify(data_stats));
+data_year2003.data.user.commits.totalCommitContributions = 428;
+
+const data_without_pull_requests = {
+  data: {
+    user: {
+      ...data_stats.data.user,
+      pullRequests: { totalCount: 0 },
+      mergedPullRequests: { totalCount: 0 },
+    },
+  },
+};
+
+const data_repo = {
+  data: {
+    user: {
+      repositories: {
+        nodes: [
+          { name: "test-repo-4", stargazers: { totalCount: 50 } },
+          { name: "test-repo-5", stargazers: { totalCount: 50 } },
+        ],
+        pageInfo: {
+          hasNextPage: false,
+          endCursor: "cursor",
+        },
+      },
+    },
+  },
+};
+
+const data_repo_zero_stars = {
+  data: {
+    user: {
+      repositories: {
+        nodes: [
+          { name: "test-repo-1", stargazers: { totalCount: 100 } },
+          { name: "test-repo-2", stargazers: { totalCount: 100 } },
+          { name: "test-repo-3", stargazers: { totalCount: 100 } },
+          { name: "test-repo-4", stargazers: { totalCount: 0 } },
+          { name: "test-repo-5", stargazers: { totalCount: 0 } },
+        ],
+        pageInfo: {
+          hasNextPage: true,
+          endCursor: "cursor",
+        },
+      },
+    },
+  },
+};
+
+const error = {
+  errors: [
+    {
+      type: "NOT_FOUND",
+      path: ["user"],
+      locations: [],
+      message: "Could not resolve to a User with the login of 'noname'.",
+    },
+  ],
+};
+
+const mock = new MockAdapter(axios);
+
+beforeEach(() => {
+  process.env.FETCH_MULTI_PAGE_STARS = "false"; // Set to `false` to fetch only one page of stars.
+  loadConfigFromEnv();
+  mock.onPost("https://api.github.com/graphql").reply((cfg) => {
+    let req = JSON.parse(cfg.data);
+
+    if (
+      req.variables &&
+      req.variables.startTime &&
+      req.variables.startTime.startsWith("2003")
+    ) {
+      return [200, data_year2003];
+    }
+    return [
+      200,
+      req.query.includes("totalCommitContributions") ? data_stats : data_repo,
+    ];
+  });
+});
+
+afterEach(() => {
+  mock.reset();
+});
+
+describe("Test fetchStats", () => {
+  it("should fetch correct stats", async () => {
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      all_commits: false,
+      commits: 100,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 300,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 300,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      rank,
+    });
+  });
+
+  it("should stop fetching when there are repos with zero stars", async () => {
+    mock.reset();
+    mock
+      .onPost("https://api.github.com/graphql")
+      .replyOnce(200, data_stats)
+      .onPost("https://api.github.com/graphql")
+      .replyOnce(200, data_repo_zero_stars);
+
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      all_commits: false,
+      commits: 100,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 300,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 300,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      rank,
+    });
+  });
+
+  it("should throw error", async () => {
+    mock.reset();
+    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'.",
+    );
+  });
+
+  it("should fetch total commits", async () => {
+    mock
+      .onGet(
+        "https://api.github.com/search/commits?per_page=1&q=author:anuraghazra",
+      )
+      .reply(200, { total_count: 1000 });
+
+    let stats = await fetchStats("anuraghazra", true);
+    const rank = calculateRank({
+      all_commits: true,
+      commits: 1000,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 300,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 1000,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 300,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      rank,
+    });
+  });
+
+  it("should throw specific error when include_all_commits true and invalid username", async () => {
+    await expect(fetchStats("asdf///---", true)).rejects.toThrow(
+      "Invalid username provided.",
+    );
+  });
+
+  it("should throw specific error when include_all_commits true and API returns error", async () => {
+    mock
+      .onGet(
+        "https://api.github.com/search/commits?per_page=1&q=author:anuraghazra",
+      )
+      .reply(200, { error: "Some test error message" });
+
+    await expect(fetchStats("anuraghazra", true)).rejects.toThrow(
+      "Could not fetch data from GitHub REST API.",
+    );
+  });
+
+  it("should exclude stars of the `test-repo-1` repository", async () => {
+    mock
+      .onGet(
+        "https://api.github.com/search/commits?per_page=1&q=author:anuraghazra",
+      )
+      .reply(200, { total_count: 1000 });
+
+    let stats = await fetchStats("anuraghazra", true, ["test-repo-1"]);
+    const rank = calculateRank({
+      all_commits: true,
+      commits: 1000,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 200,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 1000,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 200,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      rank,
+    });
+  });
+
+  it("should fetch two pages of stars if 'FETCH_MULTI_PAGE_STARS' env variable is set to `true`", async () => {
+    process.env.FETCH_MULTI_PAGE_STARS = true;
+    loadConfigFromEnv();
+
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      all_commits: false,
+      commits: 100,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 400,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 400,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      rank,
+    });
+  });
+
+  it("should fetch one page of stars if 'FETCH_MULTI_PAGE_STARS' env variable is set to `false`", async () => {
+    process.env.FETCH_MULTI_PAGE_STARS = "false";
+    loadConfigFromEnv();
+
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      all_commits: false,
+      commits: 100,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 300,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 300,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      rank,
+    });
+  });
+
+  it("should fetch one page of stars if 'FETCH_MULTI_PAGE_STARS' env variable is not set", async () => {
+    process.env.FETCH_MULTI_PAGE_STARS = undefined;
+    loadConfigFromEnv();
+
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      all_commits: false,
+      commits: 100,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 300,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 300,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      rank,
+    });
+  });
+
+  it("should not fetch additional stats data when it not requested", async () => {
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      all_commits: false,
+      commits: 100,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 300,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 300,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      rank,
+    });
+  });
+
+  it("should fetch additional stats when it requested", async () => {
+    let stats = await fetchStats("anuraghazra", false, [], true, true, true);
+    const rank = calculateRank({
+      all_commits: false,
+      commits: 100,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 300,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 240,
+      mergedPRsPercentage: 80,
+      totalReviews: 50,
+      totalStars: 300,
+      totalDiscussionsStarted: 10,
+      totalDiscussionsAnswered: 40,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      rank,
+    });
+  });
+
+  it("should get commits of provided year", async () => {
+    let stats = await fetchStats(
+      "anuraghazra",
+      false,
+      [],
+      false,
+      false,
+      false,
+      2003,
+    );
+
+    const rank = calculateRank({
+      all_commits: false,
+      commits: 428,
+      prs: 300,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 300,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 428,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 300,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      rank,
+    });
+  });
+
+  it("should return correct data when user don't have any pull requests", async () => {
+    mock.reset();
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, data_without_pull_requests);
+    const stats = await fetchStats("anuraghazra", false, [], true);
+    const rank = calculateRank({
+      all_commits: false,
+      commits: 100,
+      prs: 0,
+      reviews: 50,
+      issues: 200,
+      repos: 5,
+      stars: 300,
+      followers: 100,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 0,
+      totalPRsMerged: 0,
+      mergedPRsPercentage: 0,
+      totalReviews: 50,
+      totalStars: 300,
+      totalDiscussionsStarted: 0,
+      totalDiscussionsAnswered: 0,
+      totalIssuesAuthored: 0,
+      totalIssuesCommented: 0,
+      totalPRsAuthored: 0,
+      totalPRsCommented: 0,
+      totalPRsReviewed: 0,
+      rank,
+    });
+  });
+});

packages/core/tests/fetchTopLanguages.test.js

@@ -0,0 +1,173 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { fetchTopLanguages } from "../src/fetchers/top-languages.js";
+
+import { approxNumber } from "./utils.js";
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+const data_langs = {
+  data: {
+    user: {
+      repositories: {
+        nodes: [
+          {
+            name: "test-repo-1",
+            languages: {
+              edges: [{ size: 100, node: { color: "#0f0", name: "HTML" } }],
+            },
+          },
+          {
+            name: "test-repo-2",
+            languages: {
+              edges: [{ size: 100, node: { color: "#0f0", name: "HTML" } }],
+            },
+          },
+          {
+            name: "test-repo-3",
+            languages: {
+              edges: [
+                { size: 100, node: { color: "#0ff", name: "javascript" } },
+              ],
+            },
+          },
+          {
+            name: "test-repo-4",
+            languages: {
+              edges: [
+                { size: 100, node: { color: "#0ff", name: "javascript" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const error = {
+  errors: [
+    {
+      type: "NOT_FOUND",
+      path: ["user"],
+      locations: [],
+      message: "Could not resolve to a User with the login of 'noname'.",
+    },
+  ],
+};
+
+describe("FetchTopLanguages", () => {
+  it("should fetch correct language data while using the new calculation", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
+
+    let repo = await fetchTopLanguages("anuraghazra", [], 0.5, 0.5);
+    expect(repo).toStrictEqual({
+      HTML: {
+        color: "#0f0",
+        count: 2,
+        name: "HTML",
+        size: approxNumber(20.0),
+      },
+      javascript: {
+        color: "#0ff",
+        count: 2,
+        name: "javascript",
+        size: approxNumber(20.0),
+      },
+    });
+  });
+
+  it("should fetch correct language data while excluding the 'test-repo-1' repository", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
+
+    let repo = await fetchTopLanguages("anuraghazra", ["test-repo-1"]);
+    expect(repo).toStrictEqual({
+      HTML: {
+        color: "#0f0",
+        count: 1,
+        name: "HTML",
+        size: 100,
+      },
+      javascript: {
+        color: "#0ff",
+        count: 2,
+        name: "javascript",
+        size: 200,
+      },
+    });
+  });
+
+  it("should fetch correct language data while using the old calculation", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
+
+    let repo = await fetchTopLanguages("anuraghazra", [], 1, 0);
+    expect(repo).toStrictEqual({
+      HTML: {
+        color: "#0f0",
+        count: 2,
+        name: "HTML",
+        size: 200,
+      },
+      javascript: {
+        color: "#0ff",
+        count: 2,
+        name: "javascript",
+        size: 200,
+      },
+    });
+  });
+
+  it("should rank languages by the number of repositories they appear in", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
+
+    let repo = await fetchTopLanguages("anuraghazra", [], 0, 1);
+    expect(repo).toStrictEqual({
+      HTML: {
+        color: "#0f0",
+        count: 2,
+        name: "HTML",
+        size: 2,
+      },
+      javascript: {
+        color: "#0ff",
+        count: 2,
+        name: "javascript",
+        size: 2,
+      },
+    });
+  });
+
+  it("should throw specific error when user not found", async () => {
+    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'.",
+    );
+  });
+
+  it("should throw other errors with their message", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, {
+      errors: [{ message: "Some test GraphQL error" }],
+    });
+
+    await expect(fetchTopLanguages("anuraghazra")).rejects.toThrow(
+      "Some test GraphQL error",
+    );
+  });
+
+  it("should throw error with specific message when error does not contain message property", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, {
+      errors: [{ type: "TEST" }],
+    });
+
+    await expect(fetchTopLanguages("anuraghazra")).rejects.toThrow(
+      "Something went wrong while trying to retrieve the language data using the GraphQL API.",
+    );
+  });
+});

packages/core/tests/fetchWakatime.test.js

@@ -0,0 +1,135 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { fetchWakatimeStats } from "../src/fetchers/wakatime.js";
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+const wakaTimeData = {
+  data: {
+    categories: [
+      {
+        digital: "22:40",
+        hours: 22,
+        minutes: 40,
+        name: "Coding",
+        percent: 100,
+        text: "22 hrs 40 mins",
+        total_seconds: 81643.570077,
+      },
+    ],
+    daily_average: 16095,
+    daily_average_including_other_language: 16329,
+    days_including_holidays: 7,
+    days_minus_holidays: 5,
+    editors: [
+      {
+        digital: "22:40",
+        hours: 22,
+        minutes: 40,
+        name: "VS Code",
+        percent: 100,
+        text: "22 hrs 40 mins",
+        total_seconds: 81643.570077,
+      },
+    ],
+    holidays: 2,
+    human_readable_daily_average: "4 hrs 28 mins",
+    human_readable_daily_average_including_other_language: "4 hrs 32 mins",
+    human_readable_total: "22 hrs 21 mins",
+    human_readable_total_including_other_language: "22 hrs 40 mins",
+    id: "random hash",
+    is_already_updating: false,
+    is_coding_activity_visible: true,
+    is_including_today: false,
+    is_other_usage_visible: true,
+    is_stuck: false,
+    is_up_to_date: true,
+    languages: [
+      {
+        digital: "0:19",
+        hours: 0,
+        minutes: 19,
+        name: "Other",
+        percent: 1.43,
+        text: "19 mins",
+        total_seconds: 1170.434361,
+      },
+      {
+        digital: "0:01",
+        hours: 0,
+        minutes: 1,
+        name: "TypeScript",
+        percent: 0.1,
+        text: "1 min",
+        total_seconds: 83.293809,
+      },
+      {
+        digital: "0:00",
+        hours: 0,
+        minutes: 0,
+        name: "YAML",
+        percent: 0.07,
+        text: "0 secs",
+        total_seconds: 54.975151,
+      },
+    ],
+    operating_systems: [
+      {
+        digital: "22:40",
+        hours: 22,
+        minutes: 40,
+        name: "Mac",
+        percent: 100,
+        text: "22 hrs 40 mins",
+        total_seconds: 81643.570077,
+      },
+    ],
+    percent_calculated: 100,
+    range: "last_7_days",
+    status: "ok",
+    timeout: 15,
+    total_seconds: 80473.135716,
+    total_seconds_including_other_language: 81643.570077,
+    user_id: "random hash",
+    username: "anuraghazra",
+    writes_only: false,
+  },
+};
+
+describe("WakaTime fetcher", () => {
+  it("should fetch correct WakaTime data", async () => {
+    const username = "anuraghazra";
+    mock
+      .onGet(
+        `https://wakatime.com/api/v1/users/${username}/stats?is_including_today=true`,
+      )
+      .reply(200, wakaTimeData);
+
+    const repo = await fetchWakatimeStats({ username });
+    expect(repo).toStrictEqual(wakaTimeData.data);
+  });
+
+  it("should throw error if username param missing", async () => {
+    mock.onGet(/\/https:\/\/wakatime\.com\/api/).reply(404, wakaTimeData);
+
+    await expect(fetchWakatimeStats("noone")).rejects.toThrow(
+      'Missing params "username" make sure you pass the parameters in URL',
+    );
+  });
+
+  it("should throw error if username is not found", async () => {
+    mock.onGet(/\/https:\/\/wakatime\.com\/api/).reply(404, wakaTimeData);
+
+    await expect(fetchWakatimeStats({ username: "noone" })).rejects.toThrow(
+      "Could not resolve to a User with the login of 'noone'",
+    );
+  });
+});
+
+export { wakaTimeData };

packages/core/tests/flexLayout.test.js

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+
+import { flexLayout } from "../src/common/render.js";
+
+describe("flexLayout", () => {
+  it("should work with row & col layouts", () => {
+    const layout = flexLayout({
+      items: ["<text>1</text>", "<text>2</text>"],
+      gap: 60,
+    });
+
+    expect(layout).toStrictEqual([
+      `<g transform="translate(0, 0)"><text>1</text></g>`,
+      `<g transform="translate(60, 0)"><text>2</text></g>`,
+    ]);
+
+    const columns = flexLayout({
+      items: ["<text>1</text>", "<text>2</text>"],
+      gap: 60,
+      direction: "column",
+    });
+
+    expect(columns).toStrictEqual([
+      `<g transform="translate(0, 0)"><text>1</text></g>`,
+      `<g transform="translate(0, 60)"><text>2</text></g>`,
+    ]);
+  });
+
+  it("should work with sizes", () => {
+    const layout = flexLayout({
+      items: [
+        "<text>1</text>",
+        "<text>2</text>",
+        "<text>3</text>",
+        "<text>4</text>",
+      ],
+      gap: 20,
+      sizes: [200, 100, 55, 25],
+    });
+
+    expect(layout).toStrictEqual([
+      `<g transform="translate(0, 0)"><text>1</text></g>`,
+      `<g transform="translate(220, 0)"><text>2</text></g>`,
+      `<g transform="translate(340, 0)"><text>3</text></g>`,
+      `<g transform="translate(415, 0)"><text>4</text></g>`,
+    ]);
+  });
+});

packages/core/tests/fmt.test.js

@@ -0,0 +1,105 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  formatBytes,
+  kFormatter,
+  wrapTextMultiline,
+} from "../src/common/fmt.js";
+
+describe("Test fmt.js", () => {
+  it("kFormatter: should format numbers correctly by default", () => {
+    expect(kFormatter(1)).toBe(1);
+    expect(kFormatter(-1)).toBe(-1);
+    expect(kFormatter(500)).toBe(500);
+    expect(kFormatter(1000)).toBe("1k");
+    expect(kFormatter(1200)).toBe("1.2k");
+    expect(kFormatter(10000)).toBe("10k");
+    expect(kFormatter(12345)).toBe("12.3k");
+    expect(kFormatter(99900)).toBe("99.9k");
+    expect(kFormatter(9900000)).toBe("9900k");
+  });
+
+  it("kFormatter: should format numbers correctly with 0 decimal precision", () => {
+    expect(kFormatter(1, 0)).toBe("0k");
+    expect(kFormatter(-1, 0)).toBe("-0k");
+    expect(kFormatter(500, 0)).toBe("1k");
+    expect(kFormatter(1000, 0)).toBe("1k");
+    expect(kFormatter(1200, 0)).toBe("1k");
+    expect(kFormatter(10000, 0)).toBe("10k");
+    expect(kFormatter(12345, 0)).toBe("12k");
+    expect(kFormatter(99000, 0)).toBe("99k");
+    expect(kFormatter(99900, 0)).toBe("100k");
+    expect(kFormatter(9900000, 0)).toBe("9900k");
+  });
+
+  it("kFormatter: should format numbers correctly with 1 decimal precision", () => {
+    expect(kFormatter(1, 1)).toBe("0.0k");
+    expect(kFormatter(-1, 1)).toBe("-0.0k");
+    expect(kFormatter(500, 1)).toBe("0.5k");
+    expect(kFormatter(1000, 1)).toBe("1.0k");
+    expect(kFormatter(1200, 1)).toBe("1.2k");
+    expect(kFormatter(10000, 1)).toBe("10.0k");
+    expect(kFormatter(12345, 1)).toBe("12.3k");
+    expect(kFormatter(99900, 1)).toBe("99.9k");
+    expect(kFormatter(9900000, 1)).toBe("9900.0k");
+  });
+
+  it("kFormatter: should format numbers correctly with 2 decimal precision", () => {
+    expect(kFormatter(1, 2)).toBe("0.00k");
+    expect(kFormatter(-1, 2)).toBe("-0.00k");
+    expect(kFormatter(500, 2)).toBe("0.50k");
+    expect(kFormatter(1000, 2)).toBe("1.00k");
+    expect(kFormatter(1200, 2)).toBe("1.20k");
+    expect(kFormatter(10000, 2)).toBe("10.00k");
+    expect(kFormatter(12345, 2)).toBe("12.35k");
+    expect(kFormatter(99900, 2)).toBe("99.90k");
+    expect(kFormatter(9900000, 2)).toBe("9900.00k");
+  });
+
+  it("formatBytes: should return expected values", () => {
+    expect(formatBytes(0)).toBe("0 B");
+    expect(formatBytes(100)).toBe("100.0 B");
+    expect(formatBytes(1024)).toBe("1.0 KB");
+    expect(formatBytes(1024 * 1024)).toBe("1.0 MB");
+    expect(formatBytes(1024 * 1024 * 1024)).toBe("1.0 GB");
+    expect(formatBytes(1024 * 1024 * 1024 * 1024)).toBe("1.0 TB");
+    expect(formatBytes(1024 * 1024 * 1024 * 1024 * 1024)).toBe("1.0 PB");
+    expect(formatBytes(1024 * 1024 * 1024 * 1024 * 1024 * 1024)).toBe("1.0 EB");
+
+    expect(formatBytes(1234 * 1024)).toBe("1.2 MB");
+    expect(formatBytes(123.4 * 1024)).toBe("123.4 KB");
+  });
+
+  it("wrapTextMultiline: should not wrap small texts", () => {
+    {
+      let multiLineText = wrapTextMultiline("Small text should not wrap");
+      expect(multiLineText).toEqual(["Small text should not wrap"]);
+    }
+  });
+
+  it("wrapTextMultiline: should wrap large texts", () => {
+    let multiLineText = wrapTextMultiline(
+      "Hello world long long long text",
+      20,
+      3,
+    );
+    expect(multiLineText).toEqual(["Hello world long", "long long text"]);
+  });
+
+  it("wrapTextMultiline: should wrap large texts and limit max lines", () => {
+    let multiLineText = wrapTextMultiline(
+      "Hello world long long long text",
+      10,
+      2,
+    );
+    expect(multiLineText).toEqual(["Hello", "world long..."]);
+  });
+
+  it("wrapTextMultiline: should wrap chinese by punctuation", () => {
+    let multiLineText = wrapTextMultiline(
+      "专门为刚开始刷题的同学准备的算法基地，没有最细只有更细，立志用动画将晦涩难懂的算法说的通俗易懂！",
+    );
+    expect(multiLineText.length).toEqual(3);
+    expect(multiLineText[0].length).toEqual(18 * 8); // &#xxxxx; x 8
+  });
+});

packages/core/tests/html.test.js

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+
+import { encodeHTML } from "../src/common/html.js";
+
+describe("Test html.js", () => {
+  it("should test encodeHTML", () => {
+    expect(encodeHTML(`<html>hello world<,.#4^&^@%!))`)).toBe(
+      "&#60;html&#62;hello world&#60;,.#4^&#38;^@%!))",
+    );
+  });
+});

packages/core/tests/i18n.test.js

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+
+import { I18n } from "../src/common/I18n.js";
+import { statCardLocales } from "../src/translations.js";
+
+describe("I18n", () => {
+  it("should return translated string", () => {
+    const i18n = new I18n({
+      locale: "en",
+      translations: statCardLocales({ name: "Anurag Hazra", apostrophe: "s" }),
+    });
+    expect(i18n.t("statcard.title")).toBe("Anurag Hazra's GitHub Stats");
+  });
+
+  it("should throw error if translation string not found", () => {
+    const i18n = new I18n({
+      locale: "en",
+      translations: statCardLocales({ name: "Anurag Hazra", apostrophe: "s" }),
+    });
+    expect(() => i18n.t("statcard.title1")).toThrow(
+      "statcard.title1 Translation string not found",
+    );
+  });
+
+  it("should throw error if translation not found for locale", () => {
+    const i18n = new I18n({
+      locale: "asdf",
+      translations: statCardLocales({ name: "Anurag Hazra", apostrophe: "s" }),
+    });
+    expect(() => i18n.t("statcard.title")).toThrow(
+      "'statcard.title' translation not found for locale 'asdf'",
+    );
+  });
+});

packages/core/tests/ops.test.js

@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  chunkArray,
+  clampValue,
+  dateDiff,
+  lowercaseTrim,
+  parseArray,
+  parseBoolean,
+  parseEmojis,
+} from "../src/common/ops.js";
+
+describe("Test ops.js", () => {
+  it("should test parseBoolean", () => {
+    expect(parseBoolean(true)).toBe(true);
+    expect(parseBoolean(false)).toBe(false);
+
+    expect(parseBoolean("true")).toBe(true);
+    expect(parseBoolean("false")).toBe(false);
+    expect(parseBoolean("True")).toBe(true);
+    expect(parseBoolean("False")).toBe(false);
+    expect(parseBoolean("TRUE")).toBe(true);
+    expect(parseBoolean("FALSE")).toBe(false);
+
+    expect(parseBoolean("1")).toBe(undefined);
+    expect(parseBoolean("0")).toBe(undefined);
+    expect(parseBoolean("")).toBe(undefined);
+    // @ts-ignore
+    expect(parseBoolean(undefined)).toBe(undefined);
+  });
+
+  it("should test parseArray", () => {
+    expect(parseArray("a,b,c")).toEqual(["a", "b", "c"]);
+    expect(parseArray("a, b, c")).toEqual(["a", " b", " c"]); // preserves spaces
+    expect(parseArray("")).toEqual([]);
+    // @ts-ignore
+    expect(parseArray(undefined)).toEqual([]);
+  });
+
+  it("should test clampValue", () => {
+    expect(clampValue(5, 1, 10)).toBe(5);
+    expect(clampValue(0, 1, 10)).toBe(1);
+    expect(clampValue(15, 1, 10)).toBe(10);
+
+    // string inputs are coerced numerically by Math.min/Math.max
+    // @ts-ignore
+    expect(clampValue("7", 1, 10)).toBe(7);
+
+    // non-numeric and NaN fall back to min
+    // @ts-ignore
+    expect(clampValue("abc", 1, 10)).toBe(1);
+    expect(clampValue(NaN, 2, 5)).toBe(2);
+  });
+
+  it("should test lowercaseTrim", () => {
+    expect(lowercaseTrim("  Hello World  ")).toBe("hello world");
+    expect(lowercaseTrim("already lower")).toBe("already lower");
+  });
+
+  it("should test chunkArray", () => {
+    expect(chunkArray([1, 2, 3, 4, 5], 2)).toEqual([[1, 2], [3, 4], [5]]);
+    expect(chunkArray([1, 2, 3, 4, 5], 1)).toEqual([[1], [2], [3], [4], [5]]);
+    expect(chunkArray([1, 2, 3, 4, 5], 10)).toEqual([[1, 2, 3, 4, 5]]);
+  });
+
+  it("should test parseEmojis", () => {
+    // unknown emoji name is stripped
+    expect(parseEmojis("Hello :nonexistent:")).toBe("Hello ");
+    // common emoji names should be replaced (at least token removed)
+    const out = parseEmojis("I :heart: OSS");
+    expect(out).not.toContain(":heart:");
+    expect(out.startsWith("I ")).toBe(true);
+    expect(out.endsWith(" OSS")).toBe(true);
+
+    expect(() => parseEmojis("")).toThrow(/parseEmoji/);
+    // @ts-ignore
+    expect(() => parseEmojis()).toThrow(/parseEmoji/);
+  });
+
+  it("should test dateDiff", () => {
+    const a = new Date("2020-01-01T00:10:00Z");
+    const b = new Date("2020-01-01T00:00:00Z");
+    expect(dateDiff(a, b)).toBe(10);
+
+    const c = new Date("2020-01-01T00:00:00Z");
+    const d = new Date("2020-01-01T00:10:30Z");
+    // rounds to nearest minute
+    expect(dateDiff(c, d)).toBe(-10);
+  });
+});

packages/core/tests/render.test.js

@@ -0,0 +1,27 @@
+// @ts-check
+
+import { queryByTestId } from "@testing-library/dom";
+import { describe, expect, it } from "vitest";
+
+import { renderError } from "../src/common/render.js";
+
+describe("Test render.js", () => {
+  it("should test renderError", () => {
+    document.body.innerHTML = renderError({ message: "Something went wrong" });
+    expect(
+      queryByTestId(document.body, "message")?.children[0],
+    ).toHaveTextContent(/Something went wrong/gim);
+    expect(
+      queryByTestId(document.body, "message")?.children[1],
+    ).toBeEmptyDOMElement();
+
+    // Secondary message
+    document.body.innerHTML = renderError({
+      message: "Something went wrong",
+      secondaryMessage: "Secondary Message",
+    });
+    expect(
+      queryByTestId(document.body, "message")?.children[1],
+    ).toHaveTextContent(/Secondary Message/gim);
+  });
+});

packages/core/tests/renderGistCard.test.js

@@ -0,0 +1,239 @@
+import { queryByTestId } from "@testing-library/dom";
+import { cssToObject } from "@uppercod/css-to-object";
+import { describe, expect, it } from "vitest";
+
+import { renderGistCard } from "../src/cards/gist.js";
+import { themes } from "../src/themes/index.js";
+
+/**
+ * @type {import("../src/fetchers/gist").GistData}
+ */
+const data = {
+  name: "test",
+  nameWithOwner: "anuraghazra/test",
+  description: "Small test repository with different Python programs.",
+  language: "Python",
+  starsCount: 163,
+  forksCount: 19,
+};
+
+describe("test renderGistCard", () => {
+  it("should render correctly", () => {
+    document.body.innerHTML = renderGistCard(data);
+
+    const [header] = document.getElementsByClassName("header");
+
+    expect(header).toHaveTextContent("test");
+    expect(header).not.toHaveTextContent("anuraghazra");
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Small test repository with different Python programs.",
+    );
+    expect(queryByTestId(document.body, "starsCount")).toHaveTextContent("163");
+    expect(queryByTestId(document.body, "forksCount")).toHaveTextContent("19");
+    expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
+      "Python",
+    );
+    expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
+      "fill",
+      "#3572A5",
+    );
+  });
+
+  it("should display username in title if show_owner is true", () => {
+    document.body.innerHTML = renderGistCard(data, { show_owner: true });
+    const [header] = document.getElementsByClassName("header");
+    expect(header).toHaveTextContent("anuraghazra/test");
+  });
+
+  it("should trim header if name is too long", () => {
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      name: "some-really-long-repo-name-for-test-purposes",
+    });
+    const [header] = document.getElementsByClassName("header");
+    expect(header).toHaveTextContent("some-really-long-repo-name-for-test...");
+  });
+
+  it("should trim description if description os too long", () => {
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      description:
+        "The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
+    });
+    expect(
+      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,
+    ).toBe("English-language pangram—a sentence that contains all");
+  });
+
+  it("should not trim description if it is short", () => {
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      description: "Small text should not trim",
+    });
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Small text should not trim",
+    );
+  });
+
+  it("should render emojis in description", () => {
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      description: "This is a test gist description with :heart: emoji.",
+    });
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "This is a test gist description with ❤️ emoji.",
+    );
+  });
+
+  it("should render custom colors properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      icon_color: "1b998b",
+      text_color: "9991",
+      bg_color: "252525",
+    };
+
+    document.body.innerHTML = renderGistCard(data, {
+      ...customColors,
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const descClassStyles = stylesObject[":host"][".description "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
+    expect(descClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#252525",
+    );
+  });
+
+  it("should render with all the themes", () => {
+    Object.keys(themes).forEach((name) => {
+      document.body.innerHTML = renderGistCard(data, {
+        theme: name,
+      });
+
+      const styleTag = document.querySelector("style");
+      const stylesObject = cssToObject(styleTag.innerHTML);
+
+      const headerClassStyles = stylesObject[":host"][".header "];
+      const descClassStyles = stylesObject[":host"][".description "];
+      const iconClassStyles = stylesObject[":host"][".icon "];
+
+      expect(headerClassStyles.fill.trim()).toBe(
+        `#${themes[name].title_color}`,
+      );
+      expect(descClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
+      expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
+      const backgroundElement = queryByTestId(document.body, "card-bg");
+      const backgroundElementFill = backgroundElement.getAttribute("fill");
+      expect([`#${themes[name].bg_color}`, "url(#gradient)"]).toContain(
+        backgroundElementFill,
+      );
+    });
+  });
+
+  it("should render custom colors with themes", () => {
+    document.body.innerHTML = renderGistCard(data, {
+      title_color: "5a0",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const descClassStyles = stylesObject[":host"][".description "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe("#5a0");
+    expect(descClassStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`,
+    );
+  });
+
+  it("should render custom colors with themes and fallback to default colors if invalid", () => {
+    document.body.innerHTML = renderGistCard(data, {
+      title_color: "invalid color",
+      text_color: "invalid color",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const descClassStyles = stylesObject[":host"][".description "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe(
+      `#${themes.default.title_color}`,
+    );
+    expect(descClassStyles.fill.trim()).toBe(`#${themes.default.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`,
+    );
+  });
+
+  it("should not render star count or fork count if either of the are zero", () => {
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      starsCount: 0,
+    });
+
+    expect(queryByTestId(document.body, "starsCount")).toBeNull();
+    expect(queryByTestId(document.body, "forksCount")).toBeInTheDocument();
+
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      starsCount: 1,
+      forksCount: 0,
+    });
+
+    expect(queryByTestId(document.body, "starsCount")).toBeInTheDocument();
+    expect(queryByTestId(document.body, "forksCount")).toBeNull();
+
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      starsCount: 0,
+      forksCount: 0,
+    });
+
+    expect(queryByTestId(document.body, "starsCount")).toBeNull();
+    expect(queryByTestId(document.body, "forksCount")).toBeNull();
+  });
+
+  it("should render without rounding", () => {
+    document.body.innerHTML = renderGistCard(data, {
+      border_radius: "0",
+    });
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "0");
+    document.body.innerHTML = renderGistCard(data, {});
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
+  });
+
+  it("should fallback to default description", () => {
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      description: undefined,
+    });
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "No description provided",
+    );
+  });
+});

packages/core/tests/renderRepoCard.test.js

@@ -0,0 +1,371 @@
+import { queryByTestId } from "@testing-library/dom";
+import { cssToObject } from "@uppercod/css-to-object";
+import { describe, expect, it } from "vitest";
+
+import { renderRepoCard } from "../src/cards/repo.js";
+import { themes } from "../src/themes/index.js";
+
+const data_repo = {
+  repository: {
+    nameWithOwner: "anuraghazra/convoychat",
+    name: "convoychat",
+    description: "Help us take over the world! React + TS + GraphQL Chat App",
+    primaryLanguage: {
+      color: "#2b7489",
+      id: "MDg6TGFuZ3VhZ2UyODc=",
+      name: "TypeScript",
+    },
+    starCount: 38000,
+    forkCount: 100,
+  },
+};
+
+describe("Test renderRepoCard", () => {
+  it("should render correctly", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository);
+
+    const [header] = document.getElementsByClassName("header");
+
+    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",
+    );
+    expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
+    expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
+    expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
+      "TypeScript",
+    );
+    expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
+      "fill",
+      "#2b7489",
+    );
+  });
+
+  it("should display username in title (full repo name)", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      show_owner: true,
+    });
+    expect(document.getElementsByClassName("header")[0]).toHaveTextContent(
+      "anuraghazra/convoychat",
+    );
+  });
+
+  it("should trim header", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      name: "some-really-long-repo-name-for-test-purposes",
+    });
+
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "some-really-long-repo-name-for-test...",
+    );
+  });
+
+  it("should trim description", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description:
+        "The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
+    });
+
+    expect(
+      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,
+    ).toBe("English-language pangram—a sentence that contains all");
+
+    // Should not trim
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description: "Small text should not trim",
+    });
+
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Small text should not trim",
+    );
+  });
+
+  it("should render emojis", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description: "This is a text with a :poop: poo emoji",
+    });
+
+    // 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",
+    );
+  });
+
+  it("should hide language if primaryLanguage is null & fallback to correct values", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      primaryLanguage: null,
+    });
+
+    expect(queryByTestId(document.body, "primary-lang")).toBeNull();
+
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      primaryLanguage: { color: null, name: null },
+    });
+
+    expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
+    expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
+      "fill",
+      "#333",
+    );
+
+    expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
+      "Unspecified",
+    );
+  });
+
+  it("should render default colors properly", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository);
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const descClassStyles = stylesObject[":host"][".description "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe("#2f80ed");
+    expect(descClassStyles.fill.trim()).toBe("#434d58");
+    expect(iconClassStyles.fill.trim()).toBe("#586069");
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#fffefe",
+    );
+  });
+
+  it("should render custom colors properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      icon_color: "1b998b",
+      text_color: "9991",
+      bg_color: "252525",
+    };
+
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      ...customColors,
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const descClassStyles = stylesObject[":host"][".description "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
+    expect(descClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#252525",
+    );
+  });
+
+  it("should render with all the themes", () => {
+    Object.keys(themes).forEach((name) => {
+      document.body.innerHTML = renderRepoCard(data_repo.repository, {
+        theme: name,
+      });
+
+      const styleTag = document.querySelector("style");
+      const stylesObject = cssToObject(styleTag.innerHTML);
+
+      const headerClassStyles = stylesObject[":host"][".header "];
+      const descClassStyles = stylesObject[":host"][".description "];
+      const iconClassStyles = stylesObject[":host"][".icon "];
+
+      expect(headerClassStyles.fill.trim()).toBe(
+        `#${themes[name].title_color}`,
+      );
+      expect(descClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
+      expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
+      const backgroundElement = queryByTestId(document.body, "card-bg");
+      const backgroundElementFill = backgroundElement.getAttribute("fill");
+      expect([`#${themes[name].bg_color}`, "url(#gradient)"]).toContain(
+        backgroundElementFill,
+      );
+    });
+  });
+
+  it("should render custom colors with themes", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      title_color: "5a0",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const descClassStyles = stylesObject[":host"][".description "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe("#5a0");
+    expect(descClassStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`,
+    );
+  });
+
+  it("should render custom colors with themes and fallback to default colors if invalid", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      title_color: "invalid color",
+      text_color: "invalid color",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const descClassStyles = stylesObject[":host"][".description "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe(
+      `#${themes.default.title_color}`,
+    );
+    expect(descClassStyles.fill.trim()).toBe(`#${themes.default.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`,
+    );
+  });
+
+  it("should not render star count or fork count if either of the are zero", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      starCount: 0,
+    });
+
+    expect(queryByTestId(document.body, "stargazers")).toBeNull();
+    expect(queryByTestId(document.body, "forkcount")).toBeInTheDocument();
+
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      starCount: 1,
+      forkCount: 0,
+    });
+
+    expect(queryByTestId(document.body, "stargazers")).toBeInTheDocument();
+    expect(queryByTestId(document.body, "forkcount")).toBeNull();
+
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      starCount: 0,
+      forkCount: 0,
+    });
+
+    expect(queryByTestId(document.body, "stargazers")).toBeNull();
+    expect(queryByTestId(document.body, "forkcount")).toBeNull();
+  });
+
+  it("should render badges", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      isArchived: true,
+    });
+
+    expect(queryByTestId(document.body, "badge")).toHaveTextContent("Archived");
+
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      isTemplate: true,
+    });
+    expect(queryByTestId(document.body, "badge")).toHaveTextContent("Template");
+  });
+
+  it("should not render template", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+    });
+    expect(queryByTestId(document.body, "badge")).toBeNull();
+  });
+
+  it("should render translated badges", () => {
+    document.body.innerHTML = renderRepoCard(
+      {
+        ...data_repo.repository,
+        isArchived: true,
+      },
+      {
+        locale: "cn",
+      },
+    );
+
+    expect(queryByTestId(document.body, "badge")).toHaveTextContent("已归档");
+
+    document.body.innerHTML = renderRepoCard(
+      {
+        ...data_repo.repository,
+        isTemplate: true,
+      },
+      {
+        locale: "cn",
+      },
+    );
+    expect(queryByTestId(document.body, "badge")).toHaveTextContent("模板");
+  });
+
+  it("should render without rounding", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      border_radius: "0",
+    });
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "0");
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {});
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
+  });
+
+  it("should fallback to default description", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description: undefined,
+      isArchived: true,
+    });
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "No description provided",
+    );
+  });
+
+  it("should have correct height with specified `description_lines_count` parameter", () => {
+    // Testing short description
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      description_lines_count: 1,
+    });
+    expect(document.querySelector("svg")).toHaveAttribute("height", "120");
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      description_lines_count: 3,
+    });
+    expect(document.querySelector("svg")).toHaveAttribute("height", "150");
+
+    // Testing long description
+    const longDescription =
+      "A tool that will make a lot of iPhone/iPad developers' life easier. It shares your app over-the-air in a WiFi network. Bonjour is used and no configuration is needed.";
+    document.body.innerHTML = renderRepoCard(
+      { ...data_repo.repository, description: longDescription },
+      {
+        description_lines_count: 3,
+      },
+    );
+    expect(document.querySelector("svg")).toHaveAttribute("height", "150");
+    document.body.innerHTML = renderRepoCard(
+      { ...data_repo.repository, description: longDescription },
+      {
+        description_lines_count: 1,
+      },
+    );
+    expect(document.querySelector("svg")).toHaveAttribute("height", "120");
+  });
+});

packages/core/tests/renderStatsCard.test.js

@@ -0,0 +1,466 @@
+import {
+  getByTestId,
+  queryAllByTestId,
+  queryByTestId,
+} from "@testing-library/dom";
+import { cssToObject } from "@uppercod/css-to-object";
+import { describe, expect, it } from "vitest";
+
+import { renderStatsCard } from "../src/cards/stats.js";
+import { CustomError } from "../src/common/error.js";
+import { themes } from "../src/themes/index.js";
+
+const stats = {
+  name: "Anurag Hazra",
+  totalStars: 100,
+  totalCommits: 200,
+  totalIssues: 300,
+  totalPRs: 400,
+  totalPRsMerged: 320,
+  mergedPRsPercentage: 80,
+  totalReviews: 50,
+  totalDiscussionsStarted: 10,
+  totalDiscussionsAnswered: 50,
+  contributedTo: 500,
+  rank: { level: "A+", percentile: 40 },
+};
+
+describe("Test renderStatsCard", () => {
+  it("should render correctly", () => {
+    document.body.innerHTML = renderStatsCard(stats);
+
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "Anurag Hazra's GitHub Stats",
+    );
+
+    expect(
+      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");
+    expect(getByTestId(document.body, "issues").textContent).toBe("300");
+    expect(getByTestId(document.body, "prs").textContent).toBe("400");
+    expect(getByTestId(document.body, "contribs").textContent).toBe("500");
+    expect(queryByTestId(document.body, "card-bg")).toBeInTheDocument();
+    expect(queryByTestId(document.body, "rank-circle")).toBeInTheDocument();
+
+    // Default hidden stats
+    expect(queryByTestId(document.body, "reviews")).not.toBeInTheDocument();
+    expect(
+      queryByTestId(document.body, "discussions_started"),
+    ).not.toBeInTheDocument();
+    expect(
+      queryByTestId(document.body, "discussions_answered"),
+    ).not.toBeInTheDocument();
+    expect(queryByTestId(document.body, "prs_merged")).not.toBeInTheDocument();
+    expect(
+      queryByTestId(document.body, "prs_merged_percentage"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should have proper name apostrophe", () => {
+    document.body.innerHTML = renderStatsCard({ ...stats, name: "Anil Das" });
+
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "Anil Das' GitHub Stats",
+    );
+
+    document.body.innerHTML = renderStatsCard({ ...stats, name: "Felix" });
+
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "Felix's GitHub Stats",
+    );
+  });
+
+  it("should hide individual stats", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      hide: ["issues", "prs", "contribs"],
+    });
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height"),
+    ).toBe("150"); // height should be 150 because we clamped it.
+
+    expect(queryByTestId(document.body, "stars")).toBeDefined();
+    expect(queryByTestId(document.body, "commits")).toBeDefined();
+    expect(queryByTestId(document.body, "issues")).toBeNull();
+    expect(queryByTestId(document.body, "prs")).toBeNull();
+    expect(queryByTestId(document.body, "contribs")).toBeNull();
+    expect(queryByTestId(document.body, "reviews")).toBeNull();
+    expect(queryByTestId(document.body, "discussions_started")).toBeNull();
+    expect(queryByTestId(document.body, "discussions_answered")).toBeNull();
+    expect(queryByTestId(document.body, "prs_merged")).toBeNull();
+    expect(queryByTestId(document.body, "prs_merged_percentage")).toBeNull();
+  });
+
+  it("should show additional stats", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      show: [
+        "reviews",
+        "discussions_started",
+        "discussions_answered",
+        "prs_merged",
+        "prs_merged_percentage",
+      ],
+    });
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height"),
+    ).toBe("320");
+
+    expect(queryByTestId(document.body, "stars")).toBeDefined();
+    expect(queryByTestId(document.body, "commits")).toBeDefined();
+    expect(queryByTestId(document.body, "issues")).toBeDefined();
+    expect(queryByTestId(document.body, "prs")).toBeDefined();
+    expect(queryByTestId(document.body, "contribs")).toBeDefined();
+    expect(queryByTestId(document.body, "reviews")).toBeDefined();
+    expect(queryByTestId(document.body, "discussions_started")).toBeDefined();
+    expect(queryByTestId(document.body, "discussions_answered")).toBeDefined();
+    expect(queryByTestId(document.body, "prs_merged")).toBeDefined();
+    expect(queryByTestId(document.body, "prs_merged_percentage")).toBeDefined();
+  });
+
+  it("should hide_rank", () => {
+    document.body.innerHTML = renderStatsCard(stats, { hide_rank: true });
+
+    expect(queryByTestId(document.body, "rank-circle")).not.toBeInTheDocument();
+  });
+
+  it("should render with custom width set", () => {
+    document.body.innerHTML = renderStatsCard(stats);
+    expect(document.querySelector("svg")).toHaveAttribute("width", "450");
+
+    document.body.innerHTML = renderStatsCard(stats, { card_width: 500 });
+    expect(document.querySelector("svg")).toHaveAttribute("width", "500");
+  });
+
+  it("should render with custom width set and limit minimum width", () => {
+    document.body.innerHTML = renderStatsCard(stats, { card_width: 1 });
+    expect(document.querySelector("svg")).toHaveAttribute("width", "1");
+
+    // Test default minimum card width without rank circle.
+    document.body.innerHTML = renderStatsCard(stats, {
+      card_width: 1,
+      hide_rank: true,
+    });
+    expect(document.querySelector("svg")).toHaveAttribute("width", "1");
+
+    // Test minimum card width with rank and icons.
+    document.body.innerHTML = renderStatsCard(stats, {
+      card_width: 1,
+      hide_rank: true,
+      show_icons: true,
+    });
+    expect(document.querySelector("svg")).toHaveAttribute("width", "1");
+
+    // Test minimum card width with icons but without rank.
+    document.body.innerHTML = renderStatsCard(stats, {
+      card_width: 1,
+      hide_rank: false,
+      show_icons: true,
+    });
+    expect(document.querySelector("svg")).toHaveAttribute("width", "1");
+
+    // Test minimum card width without icons or rank.
+    document.body.innerHTML = renderStatsCard(stats, {
+      card_width: 1,
+      hide_rank: false,
+      show_icons: false,
+    });
+    expect(document.querySelector("svg")).toHaveAttribute("width", "1");
+  });
+
+  it("should render default colors properly", () => {
+    document.body.innerHTML = renderStatsCard(stats);
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.textContent);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const statClassStyles = stylesObject[":host"][".stat "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe("#2f80ed");
+    expect(statClassStyles.fill.trim()).toBe("#434d58");
+    expect(iconClassStyles.fill.trim()).toBe("#4c71f2");
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#fffefe",
+    );
+  });
+
+  it("should render custom colors properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      icon_color: "1b998b",
+      text_color: "9991",
+      bg_color: "252525",
+    };
+
+    document.body.innerHTML = renderStatsCard(stats, { ...customColors });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const statClassStyles = stylesObject[":host"][".stat "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
+    expect(statClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#252525",
+    );
+  });
+
+  it("should render custom colors with themes", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      title_color: "5a0",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const statClassStyles = stylesObject[":host"][".stat "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe("#5a0");
+    expect(statClassStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`,
+    );
+  });
+
+  it("should render with all the themes", () => {
+    Object.keys(themes).forEach((name) => {
+      document.body.innerHTML = renderStatsCard(stats, {
+        theme: name,
+      });
+
+      const styleTag = document.querySelector("style");
+      const stylesObject = cssToObject(styleTag.innerHTML);
+
+      const headerClassStyles = stylesObject[":host"][".header "];
+      const statClassStyles = stylesObject[":host"][".stat "];
+      const iconClassStyles = stylesObject[":host"][".icon "];
+
+      expect(headerClassStyles.fill.trim()).toBe(
+        `#${themes[name].title_color}`,
+      );
+      expect(statClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
+      expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
+      const backgroundElement = queryByTestId(document.body, "card-bg");
+      const backgroundElementFill = backgroundElement.getAttribute("fill");
+      expect([`#${themes[name].bg_color}`, "url(#gradient)"]).toContain(
+        backgroundElementFill,
+      );
+    });
+  });
+
+  it("should render custom colors with themes and fallback to default colors if invalid", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      title_color: "invalid color",
+      text_color: "invalid color",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const statClassStyles = stylesObject[":host"][".stat "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+
+    expect(headerClassStyles.fill.trim()).toBe(
+      `#${themes.default.title_color}`,
+    );
+    expect(statClassStyles.fill.trim()).toBe(`#${themes.default.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`,
+    );
+  });
+
+  it("should render custom ring_color properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      ring_color: "0000ff",
+      icon_color: "1b998b",
+      text_color: "9991",
+      bg_color: "252525",
+    };
+
+    document.body.innerHTML = renderStatsCard(stats, { ...customColors });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const statClassStyles = stylesObject[":host"][".stat "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+    const rankCircleStyles = stylesObject[":host"][".rank-circle "];
+    const rankCircleRimStyles = stylesObject[":host"][".rank-circle-rim "];
+
+    expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
+    expect(statClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
+    expect(rankCircleStyles.stroke.trim()).toBe(`#${customColors.ring_color}`);
+    expect(rankCircleRimStyles.stroke.trim()).toBe(
+      `#${customColors.ring_color}`,
+    );
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#252525",
+    );
+  });
+
+  it("should render icons correctly", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      show_icons: true,
+    });
+
+    expect(queryAllByTestId(document.body, "icon")[0]).toBeDefined();
+    expect(queryByTestId(document.body, "stars")).toBeDefined();
+    expect(
+      queryByTestId(document.body, "stars").previousElementSibling, // the label
+    ).toHaveAttribute("x", "25");
+  });
+
+  it("should not have icons if show_icons is false", () => {
+    document.body.innerHTML = renderStatsCard(stats, { show_icons: false });
+
+    expect(queryAllByTestId(document.body, "icon")[0]).not.toBeDefined();
+    expect(queryByTestId(document.body, "stars")).toBeDefined();
+    expect(
+      queryByTestId(document.body, "stars").previousElementSibling, // the label
+    ).not.toHaveAttribute("x");
+  });
+
+  it("should auto resize if hide_rank is true", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      hide_rank: true,
+    });
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("width"),
+    ).toBe("305.81250000000006");
+  });
+
+  it("should auto resize if hide_rank is true & custom_title is set", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      hide_rank: true,
+      custom_title: "Hello world",
+    });
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("width"),
+    ).toBe("287");
+  });
+
+  it("should render translations", () => {
+    document.body.innerHTML = renderStatsCard(stats, { locale: "cn" });
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "Anurag Hazra 的 GitHub 统计数据",
+    );
+    expect(
+      document.querySelector(
+        'g[transform="translate(0, 0)"]>.stagger>.stat.bold',
+      ).textContent,
+    ).toMatchInlineSnapshot(`"获标星数:"`);
+    expect(
+      document.querySelector(
+        'g[transform="translate(0, 25)"]>.stagger>.stat.bold',
+      ).textContent,
+    ).toMatchInlineSnapshot(`"累计提交总数 (去年):"`);
+    expect(
+      document.querySelector(
+        'g[transform="translate(0, 50)"]>.stagger>.stat.bold',
+      ).textContent,
+    ).toMatchInlineSnapshot(`"发起的 PR 总数:"`);
+    expect(
+      document.querySelector(
+        'g[transform="translate(0, 75)"]>.stagger>.stat.bold',
+      ).textContent,
+    ).toMatchInlineSnapshot(`"提出的 issue 总数:"`);
+    expect(
+      document.querySelector(
+        'g[transform="translate(0, 100)"]>.stagger>.stat.bold',
+      ).textContent,
+    ).toMatchInlineSnapshot(`"贡献的项目数（去年）:"`);
+  });
+
+  it("should render without rounding", () => {
+    document.body.innerHTML = renderStatsCard(stats, { border_radius: "0" });
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "0");
+    document.body.innerHTML = renderStatsCard(stats, {});
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
+  });
+
+  it("should shorten values", () => {
+    stats["totalCommits"] = 1999;
+
+    document.body.innerHTML = renderStatsCard(stats);
+    expect(getByTestId(document.body, "commits").textContent).toBe("2k");
+    document.body.innerHTML = renderStatsCard(stats, { number_format: "long" });
+    expect(getByTestId(document.body, "commits").textContent).toBe("1999");
+    document.body.innerHTML = renderStatsCard(stats, { number_precision: 2 });
+    expect(getByTestId(document.body, "commits").textContent).toBe("2.00k");
+    document.body.innerHTML = renderStatsCard(stats, {
+      number_format: "long",
+      number_precision: 2,
+    });
+    expect(getByTestId(document.body, "commits").textContent).toBe("1999");
+  });
+
+  it("should render default rank icon with level A+", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      rank_icon: "default",
+    });
+    expect(queryByTestId(document.body, "level-rank-icon")).toBeDefined();
+    expect(
+      queryByTestId(document.body, "level-rank-icon").textContent.trim(),
+    ).toBe("A+");
+  });
+
+  it("should render github rank icon", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      rank_icon: "github",
+    });
+    expect(queryByTestId(document.body, "github-rank-icon")).toBeDefined();
+  });
+
+  it("should show the rank percentile", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      rank_icon: "percentile",
+    });
+    expect(queryByTestId(document.body, "percentile-top-header")).toBeDefined();
+    expect(
+      queryByTestId(document.body, "percentile-top-header").textContent.trim(),
+    ).toBe("Top");
+    expect(queryByTestId(document.body, "rank-percentile-text")).toBeDefined();
+    expect(
+      queryByTestId(document.body, "percentile-rank-value").textContent.trim(),
+    ).toBe(stats.rank.percentile.toFixed(1) + "%");
+  });
+
+  it("should throw error if all stats and rank icon are hidden", () => {
+    expect(() =>
+      renderStatsCard(stats, {
+        hide: ["stars", "commits", "prs", "issues", "contribs"],
+        hide_rank: true,
+      }),
+    ).toThrow(
+      new CustomError(
+        "Could not render stats card.",
+        "Either stats or rank are required.",
+      ),
+    );
+  });
+});

packages/core/tests/renderTopLanguagesCard.test.js

@@ -0,0 +1,912 @@
+import { queryAllByTestId, queryByTestId } from "@testing-library/dom";
+import { cssToObject } from "@uppercod/css-to-object";
+import { describe, expect, it } from "vitest";
+
+import {
+  MIN_CARD_WIDTH,
+  calculateCompactLayoutHeight,
+  calculateDonutLayoutHeight,
+  calculateDonutVerticalLayoutHeight,
+  calculateNormalLayoutHeight,
+  calculatePieLayoutHeight,
+  cartesianToPolar,
+  degreesToRadians,
+  donutCenterTranslation,
+  getCircleLength,
+  getDefaultLanguagesCountByLayout,
+  getLongestLang,
+  polarToCartesian,
+  radiansToDegrees,
+  renderTopLanguages,
+  trimTopLanguages,
+} from "../src/cards/top-languages.js";
+import { themes } from "../src/themes/index.js";
+
+import { approxNumber } from "./utils.js";
+
+const langs = {
+  HTML: {
+    color: "#0f0",
+    name: "HTML",
+    size: 200,
+  },
+  javascript: {
+    color: "#0ff",
+    name: "javascript",
+    size: 200,
+  },
+  css: {
+    color: "#ff0",
+    name: "css",
+    size: 100,
+  },
+};
+
+/**
+ * Retrieve number array from SVG path definition string.
+ *
+ * @param {string} d SVG path definition string.
+ * @returns {number[]} Resulting numbers array.
+ */
+const getNumbersFromSvgPathDefinitionAttribute = (d) => {
+  return d
+    .split(" ")
+    .filter((x) => !isNaN(x))
+    .map((x) => parseFloat(x));
+};
+
+/**
+ * Retrieve the language percentage from the donut chart SVG.
+ *
+ * @param {string} d The SVG path element.
+ * @param {number} centerX The center X coordinate of the donut chart.
+ * @param {number} centerY The center Y coordinate of the donut chart.
+ * @returns {number} The percentage of the language.
+ */
+const langPercentFromDonutLayoutSvg = (d, centerX, centerY) => {
+  const dTmp = getNumbersFromSvgPathDefinitionAttribute(d);
+  const endAngle =
+    cartesianToPolar(centerX, centerY, dTmp[0], dTmp[1]).angleInDegrees + 90;
+  let startAngle =
+    cartesianToPolar(centerX, centerY, dTmp[7], dTmp[8]).angleInDegrees + 90;
+  if (startAngle > endAngle) {
+    startAngle -= 360;
+  }
+  return (endAngle - startAngle) / 3.6;
+};
+
+/**
+ * Calculate language percentage for donut vertical chart SVG.
+ *
+ * @param {number} partLength Length of current chart part..
+ * @param {number} totalCircleLength Total length of circle.
+ * @returns {number} Chart part percentage.
+ */
+const langPercentFromDonutVerticalLayoutSvg = (
+  partLength,
+  totalCircleLength,
+) => {
+  return (partLength / totalCircleLength) * 100;
+};
+
+/**
+ * Retrieve the language percentage from the pie chart SVG.
+ *
+ * @param {string} d The SVG path element.
+ * @param {number} centerX The center X coordinate of the pie chart.
+ * @param {number} centerY The center Y coordinate of the pie chart.
+ * @returns {number} The percentage of the language.
+ */
+const langPercentFromPieLayoutSvg = (d, centerX, centerY) => {
+  const dTmp = getNumbersFromSvgPathDefinitionAttribute(d);
+  const startAngle = cartesianToPolar(
+    centerX,
+    centerY,
+    dTmp[2],
+    dTmp[3],
+  ).angleInDegrees;
+  let endAngle = cartesianToPolar(
+    centerX,
+    centerY,
+    dTmp[9],
+    dTmp[10],
+  ).angleInDegrees;
+  return ((endAngle - startAngle) / 360) * 100;
+};
+
+describe("Test renderTopLanguages helper functions", () => {
+  it("getLongestLang", () => {
+    const langArray = Object.values(langs);
+    expect(getLongestLang(langArray)).toBe(langs.javascript);
+  });
+
+  it("degreesToRadians", () => {
+    expect(degreesToRadians(0)).toBeCloseTo(0);
+    expect(degreesToRadians(90)).toBeCloseTo(Math.PI / 2);
+    expect(degreesToRadians(180)).toBeCloseTo(Math.PI);
+    expect(degreesToRadians(270)).toBeCloseTo((3 * Math.PI) / 2);
+    expect(degreesToRadians(360)).toBeCloseTo(2 * Math.PI);
+  });
+
+  it("radiansToDegrees", () => {
+    expect(radiansToDegrees(0)).toBeCloseTo(0);
+    expect(radiansToDegrees(Math.PI / 2)).toBeCloseTo(90);
+    expect(radiansToDegrees(Math.PI)).toBeCloseTo(180);
+    expect(radiansToDegrees((3 * Math.PI) / 2)).toBeCloseTo(270);
+    expect(radiansToDegrees(2 * Math.PI)).toBeCloseTo(360);
+  });
+
+  it("polarToCartesian", () => {
+    expect(polarToCartesian(100, 100, 60, 0)).toStrictEqual({
+      x: approxNumber(160),
+      y: approxNumber(100),
+    });
+    expect(polarToCartesian(100, 100, 60, 45)).toStrictEqual({
+      x: approxNumber(142.42640687119285),
+      y: approxNumber(142.42640687119285),
+    });
+    expect(polarToCartesian(100, 100, 60, 90)).toStrictEqual({
+      x: approxNumber(100),
+      y: approxNumber(160),
+    });
+    expect(polarToCartesian(100, 100, 60, 135)).toStrictEqual({
+      x: approxNumber(57.573593128807154),
+      y: approxNumber(142.42640687119285),
+    });
+    expect(polarToCartesian(100, 100, 60, 180)).toStrictEqual({
+      x: approxNumber(40),
+      y: approxNumber(100),
+    });
+    expect(polarToCartesian(100, 100, 60, 225)).toStrictEqual({
+      x: approxNumber(57.57359312880714),
+      y: approxNumber(57.573593128807154),
+    });
+    expect(polarToCartesian(100, 100, 60, 270)).toStrictEqual({
+      x: approxNumber(100),
+      y: approxNumber(40),
+    });
+    expect(polarToCartesian(100, 100, 60, 315)).toStrictEqual({
+      x: approxNumber(142.42640687119285),
+      y: approxNumber(57.57359312880714),
+    });
+    expect(polarToCartesian(100, 100, 60, 360)).toStrictEqual({
+      x: approxNumber(160),
+      y: approxNumber(100),
+    });
+  });
+
+  it("cartesianToPolar", () => {
+    expect(cartesianToPolar(100, 100, 160, 100)).toStrictEqual({
+      radius: approxNumber(60),
+      angleInDegrees: approxNumber(0),
+    });
+    expect(
+      cartesianToPolar(100, 100, 142.42640687119285, 142.42640687119285),
+    ).toStrictEqual({
+      radius: approxNumber(60),
+      angleInDegrees: approxNumber(45),
+    });
+    expect(cartesianToPolar(100, 100, 100, 160)).toStrictEqual({
+      radius: approxNumber(60),
+      angleInDegrees: approxNumber(90),
+    });
+    expect(
+      cartesianToPolar(100, 100, 57.573593128807154, 142.42640687119285),
+    ).toStrictEqual({
+      radius: approxNumber(60),
+      angleInDegrees: approxNumber(135),
+    });
+    expect(cartesianToPolar(100, 100, 40, 100.00000000000001)).toStrictEqual({
+      radius: approxNumber(60),
+      angleInDegrees: approxNumber(180),
+    });
+    expect(
+      cartesianToPolar(100, 100, 57.57359312880714, 57.573593128807154),
+    ).toStrictEqual({
+      radius: approxNumber(60),
+      angleInDegrees: approxNumber(225),
+    });
+    expect(cartesianToPolar(100, 100, 99.99999999999999, 40)).toStrictEqual({
+      radius: approxNumber(60),
+      angleInDegrees: approxNumber(270),
+    });
+    expect(
+      cartesianToPolar(100, 100, 142.42640687119285, 57.57359312880714),
+    ).toStrictEqual({
+      radius: approxNumber(60),
+      angleInDegrees: approxNumber(315),
+    });
+    expect(cartesianToPolar(100, 100, 160, 99.99999999999999)).toStrictEqual({
+      radius: approxNumber(60),
+      angleInDegrees: approxNumber(360),
+    });
+  });
+
+  it("calculateCompactLayoutHeight", () => {
+    expect(calculateCompactLayoutHeight(0)).toBe(90);
+    expect(calculateCompactLayoutHeight(1)).toBe(115);
+    expect(calculateCompactLayoutHeight(2)).toBe(115);
+    expect(calculateCompactLayoutHeight(3)).toBe(140);
+    expect(calculateCompactLayoutHeight(4)).toBe(140);
+    expect(calculateCompactLayoutHeight(5)).toBe(165);
+    expect(calculateCompactLayoutHeight(6)).toBe(165);
+    expect(calculateCompactLayoutHeight(7)).toBe(190);
+    expect(calculateCompactLayoutHeight(8)).toBe(190);
+    expect(calculateCompactLayoutHeight(9)).toBe(215);
+    expect(calculateCompactLayoutHeight(10)).toBe(215);
+  });
+
+  it("calculateNormalLayoutHeight", () => {
+    expect(calculateNormalLayoutHeight(0)).toBe(85);
+    expect(calculateNormalLayoutHeight(1)).toBe(125);
+    expect(calculateNormalLayoutHeight(2)).toBe(165);
+    expect(calculateNormalLayoutHeight(3)).toBe(205);
+    expect(calculateNormalLayoutHeight(4)).toBe(245);
+    expect(calculateNormalLayoutHeight(5)).toBe(285);
+    expect(calculateNormalLayoutHeight(6)).toBe(325);
+    expect(calculateNormalLayoutHeight(7)).toBe(365);
+    expect(calculateNormalLayoutHeight(8)).toBe(405);
+    expect(calculateNormalLayoutHeight(9)).toBe(445);
+    expect(calculateNormalLayoutHeight(10)).toBe(485);
+  });
+
+  it("calculateDonutLayoutHeight", () => {
+    expect(calculateDonutLayoutHeight(0)).toBe(215);
+    expect(calculateDonutLayoutHeight(1)).toBe(215);
+    expect(calculateDonutLayoutHeight(2)).toBe(215);
+    expect(calculateDonutLayoutHeight(3)).toBe(215);
+    expect(calculateDonutLayoutHeight(4)).toBe(215);
+    expect(calculateDonutLayoutHeight(5)).toBe(215);
+    expect(calculateDonutLayoutHeight(6)).toBe(247);
+    expect(calculateDonutLayoutHeight(7)).toBe(279);
+    expect(calculateDonutLayoutHeight(8)).toBe(311);
+    expect(calculateDonutLayoutHeight(9)).toBe(343);
+    expect(calculateDonutLayoutHeight(10)).toBe(375);
+  });
+
+  it("calculateDonutVerticalLayoutHeight", () => {
+    expect(calculateDonutVerticalLayoutHeight(0)).toBe(300);
+    expect(calculateDonutVerticalLayoutHeight(1)).toBe(325);
+    expect(calculateDonutVerticalLayoutHeight(2)).toBe(325);
+    expect(calculateDonutVerticalLayoutHeight(3)).toBe(350);
+    expect(calculateDonutVerticalLayoutHeight(4)).toBe(350);
+    expect(calculateDonutVerticalLayoutHeight(5)).toBe(375);
+    expect(calculateDonutVerticalLayoutHeight(6)).toBe(375);
+    expect(calculateDonutVerticalLayoutHeight(7)).toBe(400);
+    expect(calculateDonutVerticalLayoutHeight(8)).toBe(400);
+    expect(calculateDonutVerticalLayoutHeight(9)).toBe(425);
+    expect(calculateDonutVerticalLayoutHeight(10)).toBe(425);
+  });
+
+  it("calculatePieLayoutHeight", () => {
+    expect(calculatePieLayoutHeight(0)).toBe(300);
+    expect(calculatePieLayoutHeight(1)).toBe(325);
+    expect(calculatePieLayoutHeight(2)).toBe(325);
+    expect(calculatePieLayoutHeight(3)).toBe(350);
+    expect(calculatePieLayoutHeight(4)).toBe(350);
+    expect(calculatePieLayoutHeight(5)).toBe(375);
+    expect(calculatePieLayoutHeight(6)).toBe(375);
+    expect(calculatePieLayoutHeight(7)).toBe(400);
+    expect(calculatePieLayoutHeight(8)).toBe(400);
+    expect(calculatePieLayoutHeight(9)).toBe(425);
+    expect(calculatePieLayoutHeight(10)).toBe(425);
+  });
+
+  it("donutCenterTranslation", () => {
+    expect(donutCenterTranslation(0)).toBe(-45);
+    expect(donutCenterTranslation(1)).toBe(-45);
+    expect(donutCenterTranslation(2)).toBe(-45);
+    expect(donutCenterTranslation(3)).toBe(-45);
+    expect(donutCenterTranslation(4)).toBe(-45);
+    expect(donutCenterTranslation(5)).toBe(-45);
+    expect(donutCenterTranslation(6)).toBe(-29);
+    expect(donutCenterTranslation(7)).toBe(-13);
+    expect(donutCenterTranslation(8)).toBe(3);
+    expect(donutCenterTranslation(9)).toBe(19);
+    expect(donutCenterTranslation(10)).toBe(35);
+  });
+
+  it("getCircleLength", () => {
+    expect(getCircleLength(20)).toBeCloseTo(125.663);
+    expect(getCircleLength(30)).toBeCloseTo(188.495);
+    expect(getCircleLength(40)).toBeCloseTo(251.327);
+    expect(getCircleLength(50)).toBeCloseTo(314.159);
+    expect(getCircleLength(60)).toBeCloseTo(376.991);
+    expect(getCircleLength(70)).toBeCloseTo(439.822);
+    expect(getCircleLength(80)).toBeCloseTo(502.654);
+    expect(getCircleLength(90)).toBeCloseTo(565.486);
+    expect(getCircleLength(100)).toBeCloseTo(628.318);
+  });
+
+  it("trimTopLanguages", () => {
+    expect(trimTopLanguages([])).toStrictEqual({
+      langs: [],
+      totalLanguageSize: 0,
+    });
+    expect(trimTopLanguages([langs.javascript])).toStrictEqual({
+      langs: [langs.javascript],
+      totalLanguageSize: 200,
+    });
+    expect(trimTopLanguages([langs.javascript, langs.HTML], 5)).toStrictEqual({
+      langs: [langs.javascript, langs.HTML],
+      totalLanguageSize: 400,
+    });
+    expect(trimTopLanguages(langs, 5)).toStrictEqual({
+      langs: Object.values(langs),
+      totalLanguageSize: 500,
+    });
+    expect(trimTopLanguages(langs, 2)).toStrictEqual({
+      langs: Object.values(langs).slice(0, 2),
+      totalLanguageSize: 400,
+    });
+    expect(trimTopLanguages(langs, 5, ["javascript"])).toStrictEqual({
+      langs: [langs.HTML, langs.css],
+      totalLanguageSize: 300,
+    });
+  });
+
+  it("getDefaultLanguagesCountByLayout", () => {
+    expect(
+      getDefaultLanguagesCountByLayout({ layout: "normal" }),
+    ).toStrictEqual(5);
+    expect(getDefaultLanguagesCountByLayout({})).toStrictEqual(5);
+    expect(
+      getDefaultLanguagesCountByLayout({ layout: "compact" }),
+    ).toStrictEqual(6);
+    expect(
+      getDefaultLanguagesCountByLayout({ hide_progress: true }),
+    ).toStrictEqual(6);
+    expect(getDefaultLanguagesCountByLayout({ layout: "donut" })).toStrictEqual(
+      5,
+    );
+    expect(
+      getDefaultLanguagesCountByLayout({ layout: "donut-vertical" }),
+    ).toStrictEqual(6);
+    expect(getDefaultLanguagesCountByLayout({ layout: "pie" })).toStrictEqual(
+      6,
+    );
+  });
+});
+
+describe("Test renderTopLanguages", () => {
+  it("should render correctly", () => {
+    document.body.innerHTML = renderTopLanguages(langs);
+
+    expect(queryByTestId(document.body, "header")).toHaveTextContent(
+      "Most Used Languages",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML",
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript",
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css",
+    );
+    expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute(
+      "width",
+      "40%",
+    );
+    expect(queryAllByTestId(document.body, "lang-progress")[1]).toHaveAttribute(
+      "width",
+      "40%",
+    );
+    expect(queryAllByTestId(document.body, "lang-progress")[2]).toHaveAttribute(
+      "width",
+      "20%",
+    );
+  });
+
+  it("should hide languages when hide is passed", () => {
+    document.body.innerHTML = renderTopLanguages(langs, {
+      hide: ["HTML"],
+    });
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toBeInTheDocument(
+      "javascript",
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toBeInTheDocument(
+      "css",
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[2]).not.toBeDefined();
+
+    // multiple languages passed
+    document.body.innerHTML = renderTopLanguages(langs, {
+      hide: ["HTML", "css"],
+    });
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toBeInTheDocument(
+      "javascript",
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[1]).not.toBeDefined();
+  });
+
+  it("should resize the height correctly depending on langs", () => {
+    document.body.innerHTML = renderTopLanguages(langs, {});
+    expect(document.querySelector("svg")).toHaveAttribute("height", "205");
+
+    document.body.innerHTML = renderTopLanguages(
+      {
+        ...langs,
+        python: {
+          color: "#ff0",
+          name: "python",
+          size: 100,
+        },
+      },
+      {},
+    );
+    expect(document.querySelector("svg")).toHaveAttribute("height", "245");
+  });
+
+  it("should render with custom width set", () => {
+    document.body.innerHTML = renderTopLanguages(langs, {});
+
+    expect(document.querySelector("svg")).toHaveAttribute("width", "300");
+
+    document.body.innerHTML = renderTopLanguages(langs, { card_width: 400 });
+    expect(document.querySelector("svg")).toHaveAttribute("width", "400");
+  });
+
+  it("should render with min width", () => {
+    document.body.innerHTML = renderTopLanguages(langs, { card_width: 190 });
+
+    expect(document.querySelector("svg")).toHaveAttribute(
+      "width",
+      MIN_CARD_WIDTH.toString(),
+    );
+
+    document.body.innerHTML = renderTopLanguages(langs, { card_width: 100 });
+    expect(document.querySelector("svg")).toHaveAttribute(
+      "width",
+      MIN_CARD_WIDTH.toString(),
+    );
+  });
+
+  it("should render default colors properly", () => {
+    document.body.innerHTML = renderTopLanguages(langs);
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.textContent);
+
+    const headerStyles = stylesObject[":host"][".header "];
+    const langNameStyles = stylesObject[":host"][".lang-name "];
+
+    expect(headerStyles.fill.trim()).toBe("#2f80ed");
+    expect(langNameStyles.fill.trim()).toBe("#434d58");
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#fffefe",
+    );
+  });
+
+  it("should render custom colors properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      icon_color: "1b998b",
+      text_color: "9991",
+      bg_color: "252525",
+      prog_bar_bg_color: "444",
+    };
+
+    document.body.innerHTML = renderTopLanguages(langs, { ...customColors });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerStyles = stylesObject[":host"][".header "];
+    const langNameStyles = stylesObject[":host"][".lang-name "];
+
+    expect(headerStyles.fill.trim()).toBe(`#${customColors.title_color}`);
+    expect(langNameStyles.fill.trim()).toBe(`#${customColors.text_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#252525",
+    );
+
+    const progressBackgroundNodes = queryAllByTestId(
+      document.body,
+      "progress-background",
+    );
+    expect(progressBackgroundNodes.length).toBeGreaterThan(0);
+    progressBackgroundNodes.forEach((el) => {
+      expect(el).toHaveAttribute("fill", "#444");
+    });
+  });
+
+  it("should render custom colors with themes", () => {
+    document.body.innerHTML = renderTopLanguages(langs, {
+      title_color: "5a0",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerStyles = stylesObject[":host"][".header "];
+    const langNameStyles = stylesObject[":host"][".lang-name "];
+
+    expect(headerStyles.fill.trim()).toBe("#5a0");
+    expect(langNameStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`,
+    );
+  });
+
+  it("should render with all the themes", () => {
+    Object.keys(themes).forEach((name) => {
+      document.body.innerHTML = renderTopLanguages(langs, {
+        theme: name,
+      });
+
+      const styleTag = document.querySelector("style");
+      const stylesObject = cssToObject(styleTag.innerHTML);
+
+      const headerStyles = stylesObject[":host"][".header "];
+      const langNameStyles = stylesObject[":host"][".lang-name "];
+
+      expect(headerStyles.fill.trim()).toBe(`#${themes[name].title_color}`);
+      expect(langNameStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
+      const backgroundElement = queryByTestId(document.body, "card-bg");
+      const backgroundElementFill = backgroundElement.getAttribute("fill");
+      expect([`#${themes[name].bg_color}`, "url(#gradient)"]).toContain(
+        backgroundElementFill,
+      );
+    });
+  });
+
+  it("should render with layout compact", () => {
+    document.body.innerHTML = renderTopLanguages(langs, { layout: "compact" });
+
+    expect(queryByTestId(document.body, "header")).toHaveTextContent(
+      "Most Used Languages",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute(
+      "width",
+      "100",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-progress")[1]).toHaveAttribute(
+      "width",
+      "100",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css 20.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-progress")[2]).toHaveAttribute(
+      "width",
+      "50",
+    );
+  });
+
+  it("should render with layout donut", () => {
+    document.body.innerHTML = renderTopLanguages(langs, { layout: "donut" });
+
+    expect(queryByTestId(document.body, "header")).toHaveTextContent(
+      "Most Used Languages",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
+      "size",
+      "40",
+    );
+    const d = getNumbersFromSvgPathDefinitionAttribute(
+      queryAllByTestId(document.body, "lang-donut")[0].getAttribute("d"),
+    );
+    const center = { x: d[7], y: d[7] };
+    const HTMLLangPercent = langPercentFromDonutLayoutSvg(
+      queryAllByTestId(document.body, "lang-donut")[0].getAttribute("d"),
+      center.x,
+      center.y,
+    );
+    expect(HTMLLangPercent).toBeCloseTo(40);
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[1]).toHaveAttribute(
+      "size",
+      "40",
+    );
+    const javascriptLangPercent = langPercentFromDonutLayoutSvg(
+      queryAllByTestId(document.body, "lang-donut")[1].getAttribute("d"),
+      center.x,
+      center.y,
+    );
+    expect(javascriptLangPercent).toBeCloseTo(40);
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css 20.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[2]).toHaveAttribute(
+      "size",
+      "20",
+    );
+    const cssLangPercent = langPercentFromDonutLayoutSvg(
+      queryAllByTestId(document.body, "lang-donut")[2].getAttribute("d"),
+      center.x,
+      center.y,
+    );
+    expect(cssLangPercent).toBeCloseTo(20);
+
+    expect(HTMLLangPercent + javascriptLangPercent + cssLangPercent).toBe(100);
+
+    // Should render full donut (circle) if one language is 100%.
+    document.body.innerHTML = renderTopLanguages(
+      { HTML: langs.HTML },
+      { layout: "donut" },
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 100.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
+      "size",
+      "100",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")).toHaveLength(1);
+    expect(queryAllByTestId(document.body, "lang-donut")[0].tagName).toBe(
+      "circle",
+    );
+  });
+
+  it("should render with layout donut vertical", () => {
+    document.body.innerHTML = renderTopLanguages(langs, {
+      layout: "donut-vertical",
+    });
+
+    expect(queryByTestId(document.body, "header")).toHaveTextContent(
+      "Most Used Languages",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
+      "size",
+      "40",
+    );
+
+    const totalCircleLength = queryAllByTestId(
+      document.body,
+      "lang-donut",
+    )[0].getAttribute("stroke-dasharray");
+
+    const HTMLLangPercent = langPercentFromDonutVerticalLayoutSvg(
+      queryAllByTestId(document.body, "lang-donut")[1].getAttribute(
+        "stroke-dashoffset",
+      ) -
+        queryAllByTestId(document.body, "lang-donut")[0].getAttribute(
+          "stroke-dashoffset",
+        ),
+      totalCircleLength,
+    );
+    expect(HTMLLangPercent).toBeCloseTo(40);
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[1]).toHaveAttribute(
+      "size",
+      "40",
+    );
+    const javascriptLangPercent = langPercentFromDonutVerticalLayoutSvg(
+      queryAllByTestId(document.body, "lang-donut")[2].getAttribute(
+        "stroke-dashoffset",
+      ) -
+        queryAllByTestId(document.body, "lang-donut")[1].getAttribute(
+          "stroke-dashoffset",
+        ),
+      totalCircleLength,
+    );
+    expect(javascriptLangPercent).toBeCloseTo(40);
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css 20.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[2]).toHaveAttribute(
+      "size",
+      "20",
+    );
+    const cssLangPercent = langPercentFromDonutVerticalLayoutSvg(
+      totalCircleLength -
+        queryAllByTestId(document.body, "lang-donut")[2].getAttribute(
+          "stroke-dashoffset",
+        ),
+      totalCircleLength,
+    );
+    expect(cssLangPercent).toBeCloseTo(20);
+
+    expect(HTMLLangPercent + javascriptLangPercent + cssLangPercent).toBe(100);
+  });
+
+  it("should render with layout donut vertical full donut circle of one language is 100%", () => {
+    document.body.innerHTML = renderTopLanguages(
+      { HTML: langs.HTML },
+      { layout: "donut-vertical" },
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 100.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
+      "size",
+      "100",
+    );
+    const totalCircleLength = queryAllByTestId(
+      document.body,
+      "lang-donut",
+    )[0].getAttribute("stroke-dasharray");
+
+    const HTMLLangPercent = langPercentFromDonutVerticalLayoutSvg(
+      totalCircleLength -
+        queryAllByTestId(document.body, "lang-donut")[0].getAttribute(
+          "stroke-dashoffset",
+        ),
+      totalCircleLength,
+    );
+    expect(HTMLLangPercent).toBeCloseTo(100);
+  });
+
+  it("should render with layout pie", () => {
+    document.body.innerHTML = renderTopLanguages(langs, { layout: "pie" });
+
+    expect(queryByTestId(document.body, "header")).toHaveTextContent(
+      "Most Used Languages",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-pie")[0]).toHaveAttribute(
+      "size",
+      "40",
+    );
+
+    const d = getNumbersFromSvgPathDefinitionAttribute(
+      queryAllByTestId(document.body, "lang-pie")[0].getAttribute("d"),
+    );
+    const center = { x: d[0], y: d[1] };
+    const HTMLLangPercent = langPercentFromPieLayoutSvg(
+      queryAllByTestId(document.body, "lang-pie")[0].getAttribute("d"),
+      center.x,
+      center.y,
+    );
+    expect(HTMLLangPercent).toBeCloseTo(40);
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-pie")[1]).toHaveAttribute(
+      "size",
+      "40",
+    );
+    const javascriptLangPercent = langPercentFromPieLayoutSvg(
+      queryAllByTestId(document.body, "lang-pie")[1].getAttribute("d"),
+      center.x,
+      center.y,
+    );
+    expect(javascriptLangPercent).toBeCloseTo(40);
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css 20.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-pie")[2]).toHaveAttribute(
+      "size",
+      "20",
+    );
+    const cssLangPercent = langPercentFromPieLayoutSvg(
+      queryAllByTestId(document.body, "lang-pie")[2].getAttribute("d"),
+      center.x,
+      center.y,
+    );
+    expect(cssLangPercent).toBeCloseTo(20);
+
+    expect(HTMLLangPercent + javascriptLangPercent + cssLangPercent).toBe(100);
+
+    // Should render full pie (circle) if one language is 100%.
+    document.body.innerHTML = renderTopLanguages(
+      { HTML: langs.HTML },
+      { layout: "pie" },
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 100.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-pie")[0]).toHaveAttribute(
+      "size",
+      "100",
+    );
+    expect(queryAllByTestId(document.body, "lang-pie")).toHaveLength(1);
+    expect(queryAllByTestId(document.body, "lang-pie")[0].tagName).toBe(
+      "circle",
+    );
+  });
+
+  it("should render a translated title", () => {
+    document.body.innerHTML = renderTopLanguages(langs, { locale: "cn" });
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "最常用的语言",
+    );
+  });
+
+  it("should render without rounding", () => {
+    document.body.innerHTML = renderTopLanguages(langs, { border_radius: "0" });
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "0");
+    document.body.innerHTML = renderTopLanguages(langs, {});
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
+  });
+
+  it("should render langs with specified langs_count", () => {
+    const options = {
+      langs_count: 1,
+    };
+    document.body.innerHTML = renderTopLanguages(langs, { ...options });
+    expect(queryAllByTestId(document.body, "lang-name").length).toBe(
+      options.langs_count,
+    );
+  });
+
+  it("should render langs with specified langs_count even when hide is set", () => {
+    const options = {
+      hide: ["HTML"],
+      langs_count: 2,
+    };
+    document.body.innerHTML = renderTopLanguages(langs, { ...options });
+    expect(queryAllByTestId(document.body, "lang-name").length).toBe(
+      options.langs_count,
+    );
+  });
+
+  it('should show "No languages data." message instead of empty card when nothing to show', () => {
+    document.body.innerHTML = renderTopLanguages({});
+    expect(document.querySelector(".stat").textContent).toBe(
+      "No languages data.",
+    );
+  });
+
+  it("should show proper stats format", () => {
+    document.body.innerHTML = renderTopLanguages(langs, {
+      layout: "compact",
+      stats_format: "percentages",
+    });
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 40.00%",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript 40.00%",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css 20.00%",
+    );
+
+    document.body.innerHTML = renderTopLanguages(langs, {
+      layout: "compact",
+      stats_format: "bytes",
+    });
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 200.0 B",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript 200.0 B",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css 100.0 B",
+    );
+  });
+});

packages/core/tests/renderWakatimeCard.test.js

@@ -0,0 +1,93 @@
+import { queryByTestId } from "@testing-library/dom";
+import { describe, expect, it } from "vitest";
+
+import { renderWakatimeCard } from "../src/cards/wakatime.js";
+
+import { wakaTimeData } from "./fetchWakatime.test.js";
+
+describe("Test Render WakaTime Card", () => {
+  it("should render correctly", () => {
+    const card = renderWakatimeCard(wakaTimeData.data);
+    expect(card).toMatchSnapshot();
+  });
+
+  it("should render correctly with compact layout", () => {
+    const card = renderWakatimeCard(wakaTimeData.data, { layout: "compact" });
+
+    expect(card).toMatchSnapshot();
+  });
+
+  it("should render correctly with compact layout when langs_count is set", () => {
+    const card = renderWakatimeCard(wakaTimeData.data, {
+      layout: "compact",
+      langs_count: 2,
+    });
+
+    expect(card).toMatchSnapshot();
+  });
+
+  it("should hide languages when hide is passed", () => {
+    document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {
+      hide: ["YAML", "Other"],
+    });
+
+    expect(queryByTestId(document.body, /YAML/i)).toBeNull();
+    expect(queryByTestId(document.body, /Other/i)).toBeNull();
+    expect(queryByTestId(document.body, /TypeScript/i)).not.toBeNull();
+  });
+
+  it("should render translations", () => {
+    document.body.innerHTML = renderWakatimeCard({}, { locale: "cn" });
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "WakaTime 周统计",
+    );
+    expect(
+      document.querySelector('g[transform="translate(0, 0)"]>text.stat.bold')
+        .textContent,
+    ).toBe("WakaTime 用户个人资料未公开");
+  });
+
+  it("should render without rounding", () => {
+    document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {
+      border_radius: "0",
+    });
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "0");
+    document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {});
+    expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
+  });
+
+  it('should show "no coding activity this week" message when there has not been activity', () => {
+    document.body.innerHTML = renderWakatimeCard(
+      {
+        ...wakaTimeData.data,
+        languages: undefined,
+      },
+      {},
+    );
+    expect(document.querySelector(".stat").textContent).toBe(
+      "No coding activity this week",
+    );
+  });
+
+  it('should show "no coding activity this week" message when using compact layout and there has not been activity', () => {
+    document.body.innerHTML = renderWakatimeCard(
+      {
+        ...wakaTimeData.data,
+        languages: undefined,
+      },
+      {
+        layout: "compact",
+      },
+    );
+    expect(document.querySelector(".stat").textContent).toBe(
+      "No coding activity this week",
+    );
+  });
+
+  it("should render correctly with percent display format", () => {
+    const card = renderWakatimeCard(wakaTimeData.data, {
+      display_format: "percent",
+    });
+    expect(card).toMatchSnapshot();
+  });
+});

packages/core/tests/retryer.test.js

@@ -0,0 +1,96 @@
+// @ts-check
+
+import { describe, expect, it, vi } from "vitest";
+
+import { logger } from "../src/common/log.js";
+import { retryer } from "../src/common/retryer.js";
+
+const fetcher = vi.fn((variables, token) => {
+  logger.log(variables, token);
+  return new Promise((res) => res({ data: "ok" }));
+});
+
+const fetcherFail = vi.fn(() => {
+  return new Promise((res) =>
+    res({ data: { errors: [{ type: "RATE_LIMITED" }] } }),
+  );
+});
+
+const fetcherFailOnSecondTry = vi.fn((_vars, _token, retries) => {
+  return new Promise((res) => {
+    // faking rate limit
+    // @ts-ignore
+    if (retries < 1) {
+      return res({ data: { errors: [{ type: "RATE_LIMITED" }] } });
+    }
+    return res({ data: "ok" });
+  });
+});
+
+const fetcherFailWithMessageBasedRateLimitErr = vi.fn(
+  (_vars, _token, retries) => {
+    return new Promise((res) => {
+      // faking rate limit
+      // @ts-ignore
+      if (retries < 1) {
+        return res({
+          data: {
+            errors: [
+              {
+                type: "ASDF",
+                message: "API rate limit already exceeded for user ID 11111111",
+              },
+            ],
+          },
+        });
+      }
+      return res({ data: "ok" });
+    });
+  },
+);
+
+const customFetcher = vi.fn((variables, token) => {
+  logger.log(variables, token);
+  return Promise.resolve({ data: { token } });
+});
+
+describe("Test Retryer", () => {
+  it("retryer should return value and have zero retries on first try", async () => {
+    let res = await retryer(fetcher, {});
+
+    expect(fetcher).toHaveBeenCalledTimes(1);
+    expect(res).toStrictEqual({ data: "ok" });
+  });
+
+  it("retryer should return value and have 2 retries", async () => {
+    let res = await retryer(fetcherFailOnSecondTry, {});
+
+    expect(fetcherFailOnSecondTry).toHaveBeenCalledTimes(2);
+    expect(res).toStrictEqual({ data: "ok" });
+  });
+
+  it("retryer should return value and have 2 retries with message based rate limit error", async () => {
+    let res = await retryer(fetcherFailWithMessageBasedRateLimitErr, {});
+
+    expect(fetcherFailWithMessageBasedRateLimitErr).toHaveBeenCalledTimes(2);
+    expect(res).toStrictEqual({ data: "ok" });
+  });
+
+  it("retryer should throw specific error if maximum retries reached", async () => {
+    try {
+      await retryer(fetcherFail, {});
+    } catch (err) {
+      expect(fetcherFail).toHaveBeenCalledTimes(2);
+      // @ts-ignore
+      expect(err.message).toBe("Downtime due to GitHub API rate limiting");
+    }
+  });
+
+  it("retryer should use injected PATs when provided", async () => {
+    const res = await retryer(customFetcher, {}, "user-pat-token");
+
+    expect(customFetcher).toHaveBeenCalledTimes(1);
+    expect(customFetcher).toHaveBeenCalledWith({}, "user-pat-token", 0);
+    expect(res).toStrictEqual({ data: { token: "user-pat-token" } });
+  });
+});

packages/core/tests/utils.js

@@ -0,0 +1,41 @@
+// @ts-check
+
+/**
+ * Creates an asymmetric matcher for approximate numeric equality.
+ *
+ * This helper is intended for use in test frameworks (e.g., Jest) where
+ * values need to be compared within a configurable decimal precision
+ * instead of strict equality.
+ *
+ * The comparison succeeds when:
+ *
+ *   |actual - expected| < 10^(-precision)
+ *
+ * For example, with `precision = 3`, values must be within `0.001`.
+ *
+ * @param {number} expected The expected numeric value to compare against.
+ *
+ * @param {number} [precision=10]
+ *   The number of decimal places of tolerance. Higher values mean stricter
+ *   comparison. Internally converted to epsilon = 10^-precision.
+ *
+ * @returns {{
+ *   asymmetricMatch(actual: unknown): boolean,
+ *   toAsymmetricMatcher(): string
+ * }} An object implementing Jest-style asymmetric matcher methods.
+ *
+ */
+export function approxNumber(expected, precision = 10) {
+  return {
+    asymmetricMatch(actual) {
+      if (typeof actual !== "number" || typeof expected !== "number") {
+        return false;
+      }
+      const epsilon = Math.pow(10, -precision);
+      return Math.abs(actual - expected) < epsilon;
+    },
+    toAsymmetricMatcher() {
+      return `≈ ${expected} (precision ${precision})`;
+    },
+  };
+}

packages/core/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["./tsconfig.json"],
+  "include": ["src"],
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "customConditions": []
+  }
+}

packages/core/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": ["../../tsconfig.base.json"],
+  "include": ["src", "tests", "vitest.config.ts"],
+  "compilerOptions": {
+    /**
+     * This workspace contains a lot of type errors.
+     * We will add typecheck later:
+     * @see https://github.com/stats-organization/github-stats-extended/issues/140
+     *
+     * At the moment we just need to output `js` and `.d.ts` files
+     */
+    "noCheck": true,
+
+    "allowJs": true,
+    "checkJs": true,
+
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "outDir": "build"
+  }
+}

packages/core/tsconfig.typecheck.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["./tsconfig.json"],
+  "compilerOptions": {
+    "noEmit": true,
+    "customConditions": []
+  }
+}

packages/core/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineProject } from "vitest/config";
+
+export default defineProject({
+  test: {
+    environment: "jsdom",
+    include: ["./tests/*.test.{ts,js}"],
+    setupFiles: ["./tests/_setup.js"],
+  },
+});