Upload 34 files

src/calculateRank.js

@@ -0,0 +1,87 @@
+/**
+ * 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 };
+export default calculateRank;

src/cards/gist.js

@@ -0,0 +1,152 @@
+// @ts-check
+
+import {
+  measureText,
+  flexLayout,
+  iconWithLabel,
+  createLanguageNode,
+} from "../common/render.js";
+import 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 { parseEmojis } from "../common/ops.js";
+
+/** Import language colors.
+ *
+ * @description Here we use the workaround found in
+ * https://stackoverflow.com/questions/66726365/how-should-i-import-json-in-node
+ * since vercel is using v16.14.0 which does not yet support json imports without the
+ * --experimental-json-modules flag.
+ */
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const languageColors = require("../common/languageColors.json"); // now works
+
+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,
+    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, HEADER_MAX_LENGTH };
+export default renderGistCard;

src/cards/index.js

@@ -0,0 +1,4 @@
+export { renderRepoCard } from "./repo.js";
+export { renderStatsCard } from "./stats.js";
+export { renderTopLanguages } from "./top-languages.js";
+export { renderWakatimeCard } from "./wakatime.js";

src/cards/repo.js

@@ -0,0 +1,193 @@
+// @ts-check
+
+import { 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 { I18n } from "../common/I18n.js";
+import { icons } from "../common/icons.js";
+import { clampValue, parseEmojis } from "../common/ops.js";
+import {
+  flexLayout,
+  measureText,
+  iconWithLabel,
+  createLanguageNode,
+} from "../common/render.js";
+import { repoCardLocales } from "../translations.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) => `
+  <g data-testid="badge" class="badge" transform="translate(320, -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,
+  } = repo;
+  const {
+    hide_border = false,
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    show_owner = false,
+    theme = "default_repocard",
+    border_radius,
+    border_color,
+    locale,
+    description_lines_count,
+  } = options;
+
+  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,
+    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 height =
+    (descriptionLinesCount > 1 ? 120 : 110) +
+    descriptionLinesCount * lineHeight;
+
+  const i18n = new I18n({
+    locale,
+    translations: repoCardLocales,
+  });
+
+  // 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("");
+
+  const card = new Card({
+    defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header,
+    titlePrefixIcon: icons.contribs,
+    width: 400,
+    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} }
+    .icon { fill: ${colors.iconColor} }
+    .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
+    .badge rect { opacity: 0.2 }
+  `);
+
+  return card.render(`
+    ${
+      isTemplate
+        ? // @ts-ignore
+          getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
+        : isArchived
+          ? // @ts-ignore
+            getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
+          : ""
+    }
+
+    <text class="description" x="25" y="-5">
+      ${descriptionSvg}
+    </text>
+
+    <g transform="translate(30, ${height - 75})">
+      ${starAndForkCount}
+    </g>
+  `);
+};
+
+export { renderRepoCard };
+export default renderRepoCard;

src/cards/stats.js

@@ -0,0 +1,602 @@
+// @ts-check
+
+import { Card } from "../common/Card.js";
+import { getCardColors } from "../common/color.js";
+import { CustomError } from "../common/error.js";
+import { kFormatter } from "../common/fmt.js";
+import { I18n } from "../common/I18n.js";
+import { icons, rankIcon } from "../common/icons.js";
+import { 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.
+ * @returns {string} The stats card text item SVG object.
+ */
+const createTextNode = ({
+  icon,
+  label,
+  value,
+  id,
+  unitSymbol,
+  index,
+  showIcons,
+  shiftValuePos,
+  bold,
+  numberFormat,
+  numberPrecision,
+}) => {
+  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="25"` : "";
+  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)">
+      ${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) + shiftValuePos}"
+        y="12.5"
+        data-testid="${id}"
+      >${kValue}${unitSymbol ? ` ${unitSymbol}` : ""}</text>
+    </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;
+    }
+    ${process.env.NODE_ENV === "test" ? "" : 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 = {}) => {
+  const {
+    name,
+    totalStars,
+    totalCommits,
+    totalIssues,
+    totalPRs,
+    totalPRsMerged,
+    mergedPRsPercentage,
+    totalReviews,
+    totalDiscussionsStarted,
+    totalDiscussionsAnswered,
+    contributedTo,
+    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",
+    };
+  }
+
+  STATS.contribs = {
+    icon: icons.contribs,
+    label: i18n.t("statcard.contribs"),
+    value: contributedTo,
+    id: "contribs",
+  };
+
+  // @ts-ignore
+  const isLongLocale = locale ? LONG_LOCALES.includes(locale) : false;
+
+  // 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: 79.01 + (isLongLocale ? 50 : 0),
+        bold: text_bold,
+        numberFormat: number_format,
+        numberPrecision: number_precision,
+      });
+    });
+
+  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)
+      ? defaultCardWidth
+      : card_width
+    : defaultCardWidth;
+  if (width < minCardWidth) {
+    width = 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 };
+export default renderStatsCard;

src/cards/top-languages.js

@@ -0,0 +1,965 @@
+// @ts-check
+
+import { Card } from "../common/Card.js";
+import { getCardColors } from "../common/color.js";
+import { formatBytes } from "../common/fmt.js";
+import { I18n } from "../common/I18n.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.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,
+  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: "#ddd",
+        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 {string} statsFormat Stats format.
+ * @returns {string} Normal layout card SVG object.
+ */
+const renderNormalLayout = (langs, width, totalLanguageSize, 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,
+      });
+    }),
+    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 = 0;
+
+  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,
+    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,
+      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,
+};

src/cards/types.d.ts

@@ -0,0 +1,67 @@
+type ThemeNames = keyof typeof import("../../themes/index.js");
+type RankIcon = "default" | "github" | "percentile";
+
+export type 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: 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: string[];
+};
+
+export type RepoCardOptions = CommonOptions & {
+  show_owner: boolean;
+  description_lines_count: number;
+};
+
+export type TopLangOptions = CommonOptions & {
+  hide_title: boolean;
+  card_width: number;
+  hide: string[];
+  layout: "compact" | "normal" | "donut" | "donut-vertical" | "pie";
+  custom_title: string;
+  langs_count: number;
+  disable_animations: boolean;
+  hide_progress: boolean;
+  stats_format: "percentages" | "bytes";
+};
+
+export type WakaTimeOptions = CommonOptions & {
+  hide_title: boolean;
+  hide: 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;
+};

src/cards/wakatime.js

@@ -0,0 +1,481 @@
+// @ts-check
+
+import { Card } from "../common/Card.js";
+import { getCardColors } from "../common/color.js";
+import { I18n } from "../common/I18n.js";
+import { clampValue, lowercaseTrim } from "../common/ops.js";
+import { createProgressNode, flexLayout } from "../common/render.js";
+import { wakatimeCardLocales } from "../translations.js";
+
+/** Import language colors.
+ *
+ * @description Here we use the workaround found in
+ * https://stackoverflow.com/questions/66726365/how-should-i-import-json-in-node
+ * since vercel is using v16.14.0 which does not yet support json imports without the
+ * --experimental-json-modules flag.
+ */
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const languageColors = require("../common/languageColors.json"); // now works
+
+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,
+              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 };
+export default renderWakatimeCard;

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}
+
+          ${process.env.NODE_ENV === "test" ? "" : 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;

src/common/I18n.js

@@ -0,0 +1,43 @@
+// @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 };
+export default I18n;

src/common/access.js

@@ -0,0 +1,69 @@
+// @ts-check
+
+import { renderError } from "./render.js";
+import { blacklist } from "./blacklist.js";
+import { whitelist, gistWhitelist } from "./envs.js";
+
+const NOT_WHITELISTED_USERNAME_MESSAGE = "This username is not whitelisted";
+const NOT_WHITELISTED_GIST_MESSAGE = "This gist ID is not whitelisted";
+const BLACKLISTED_MESSAGE = "This username is blacklisted";
+
+/**
+ * Guards access using whitelist/blacklist.
+ *
+ * @param {Object} args The parameters object.
+ * @param {any} args.res The response object.
+ * @param {string} args.id Resource identifier (username or gist id).
+ * @param {"username"|"gist"|"wakatime"} args.type The type of identifier.
+ * @param {{ title_color?: string, text_color?: string, bg_color?: string, border_color?: string, theme?: string }} args.colors Color options for the error card.
+ * @returns {{ isPassed: boolean, result?: any }} The result object indicating success or failure.
+ */
+const guardAccess = ({ res, id, type, colors }) => {
+  if (!["username", "gist", "wakatime"].includes(type)) {
+    throw new Error(
+      'Invalid type. Expected "username", "gist", or "wakatime".',
+    );
+  }
+
+  const currentWhitelist = type === "gist" ? gistWhitelist : whitelist;
+  const notWhitelistedMsg =
+    type === "gist"
+      ? NOT_WHITELISTED_GIST_MESSAGE
+      : NOT_WHITELISTED_USERNAME_MESSAGE;
+
+  if (Array.isArray(currentWhitelist) && !currentWhitelist.includes(id)) {
+    const result = res.send(
+      renderError({
+        message: notWhitelistedMsg,
+        secondaryMessage: "Please deploy your own instance",
+        renderOptions: {
+          ...colors,
+          show_repo_link: false,
+        },
+      }),
+    );
+    return { isPassed: false, result };
+  }
+
+  if (
+    type === "username" &&
+    currentWhitelist === undefined &&
+    blacklist.includes(id)
+  ) {
+    const result = res.send(
+      renderError({
+        message: BLACKLISTED_MESSAGE,
+        secondaryMessage: "Please deploy your own instance",
+        renderOptions: {
+          ...colors,
+          show_repo_link: false,
+        },
+      }),
+    );
+    return { isPassed: false, result };
+  }
+
+  return { isPassed: true };
+};
+
+export { guardAccess };

src/common/blacklist.js

@@ -0,0 +1,10 @@
+const blacklist = [
+  "renovate-bot",
+  "technote-space",
+  "sw-yx",
+  "YourUsername",
+  "[YourUsername]",
+];
+
+export { blacklist };
+export default blacklist;

src/common/cache.js

@@ -0,0 +1,153 @@
+// @ts-check
+
+import { clampValue } from "./ops.js";
+
+const MIN = 60;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
+
+/**
+ * Common durations in seconds.
+ */
+const DURATIONS = {
+  ONE_MINUTE: MIN,
+  FIVE_MINUTES: 5 * MIN,
+  TEN_MINUTES: 10 * MIN,
+  FIFTEEN_MINUTES: 15 * MIN,
+  THIRTY_MINUTES: 30 * MIN,
+
+  TWO_HOURS: 2 * HOUR,
+  FOUR_HOURS: 4 * HOUR,
+  SIX_HOURS: 6 * HOUR,
+  EIGHT_HOURS: 8 * HOUR,
+  TWELVE_HOURS: 12 * HOUR,
+
+  ONE_DAY: DAY,
+  TWO_DAY: 2 * DAY,
+  SIX_DAY: 6 * DAY,
+  TEN_DAY: 10 * DAY,
+};
+
+/**
+ * Common cache TTL values in seconds.
+ */
+const CACHE_TTL = {
+  STATS_CARD: {
+    DEFAULT: DURATIONS.ONE_DAY,
+    MIN: DURATIONS.TWELVE_HOURS,
+    MAX: DURATIONS.TWO_DAY,
+  },
+  TOP_LANGS_CARD: {
+    DEFAULT: DURATIONS.SIX_DAY,
+    MIN: DURATIONS.TWO_DAY,
+    MAX: DURATIONS.TEN_DAY,
+  },
+  PIN_CARD: {
+    DEFAULT: DURATIONS.TEN_DAY,
+    MIN: DURATIONS.ONE_DAY,
+    MAX: DURATIONS.TEN_DAY,
+  },
+  GIST_CARD: {
+    DEFAULT: DURATIONS.TWO_DAY,
+    MIN: DURATIONS.ONE_DAY,
+    MAX: DURATIONS.TEN_DAY,
+  },
+  WAKATIME_CARD: {
+    DEFAULT: DURATIONS.ONE_DAY,
+    MIN: DURATIONS.TWELVE_HOURS,
+    MAX: DURATIONS.TWO_DAY,
+  },
+  ERROR: DURATIONS.TEN_MINUTES,
+};
+
+/**
+ * Resolves the cache seconds based on the requested, default, min, and max values.
+ *
+ * @param {Object} args The parameters object.
+ * @param {number} args.requested The requested cache seconds.
+ * @param {number} args.def The default cache seconds.
+ * @param {number} args.min The minimum cache seconds.
+ * @param {number} args.max The maximum cache seconds.
+ * @returns {number} The resolved cache seconds.
+ */
+const resolveCacheSeconds = ({ requested, def, min, max }) => {
+  let cacheSeconds = clampValue(isNaN(requested) ? def : requested, min, max);
+
+  if (process.env.CACHE_SECONDS) {
+    const envCacheSeconds = parseInt(process.env.CACHE_SECONDS, 10);
+    if (!isNaN(envCacheSeconds)) {
+      cacheSeconds = envCacheSeconds;
+    }
+  }
+
+  return cacheSeconds;
+};
+
+/**
+ * Disables caching by setting appropriate headers on the response object.
+ *
+ * @param {any} res The response object.
+ */
+const disableCaching = (res) => {
+  // Disable caching for browsers, shared caches/CDNs, and GitHub Camo.
+  res.setHeader(
+    "Cache-Control",
+    "no-cache, no-store, must-revalidate, max-age=0, s-maxage=0",
+  );
+  res.setHeader("Pragma", "no-cache");
+  res.setHeader("Expires", "0");
+};
+
+/**
+ * Sets the Cache-Control headers on the response object.
+ *
+ * @param {any} res The response object.
+ * @param {number} cacheSeconds The cache seconds to set in the headers.
+ */
+const setCacheHeaders = (res, cacheSeconds) => {
+  if (cacheSeconds < 1 || process.env.NODE_ENV === "development") {
+    disableCaching(res);
+    return;
+  }
+
+  res.setHeader(
+    "Cache-Control",
+    `max-age=${cacheSeconds}, ` +
+      `s-maxage=${cacheSeconds}, ` +
+      `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
+  );
+};
+
+/**
+ * Sets the Cache-Control headers for error responses on the response object.
+ *
+ * @param {any} res The response object.
+ */
+const setErrorCacheHeaders = (res) => {
+  const envCacheSeconds = process.env.CACHE_SECONDS
+    ? parseInt(process.env.CACHE_SECONDS, 10)
+    : NaN;
+  if (
+    (!isNaN(envCacheSeconds) && envCacheSeconds < 1) ||
+    process.env.NODE_ENV === "development"
+  ) {
+    disableCaching(res);
+    return;
+  }
+
+  // Use lower cache period for errors.
+  res.setHeader(
+    "Cache-Control",
+    `max-age=${CACHE_TTL.ERROR}, ` +
+      `s-maxage=${CACHE_TTL.ERROR}, ` +
+      `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
+  );
+};
+
+export {
+  resolveCacheSeconds,
+  setCacheHeaders,
+  setErrorCacheHeaders,
+  DURATIONS,
+  CACHE_TTL,
+};

src/common/color.js

@@ -0,0 +1,144 @@
+// @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;
+
+  // @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 { isValidHexColor, isValidGradient, getCardColors };

src/common/envs.js

@@ -0,0 +1,15 @@
+// @ts-check
+
+const whitelist = process.env.WHITELIST
+  ? process.env.WHITELIST.split(",")
+  : undefined;
+
+const gistWhitelist = process.env.GIST_WHITELIST
+  ? process.env.GIST_WHITELIST.split(",")
+  : undefined;
+
+const excludeRepositories = process.env.EXCLUDE_REPO
+  ? process.env.EXCLUDE_REPO.split(",")
+  : [];
+
+export { whitelist, gistWhitelist, excludeRepositories };

src/common/error.js

@@ -0,0 +1,84 @@
+// @ts-check
+
+/**
+ * @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",
+};
+
+/**
+ * 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";
+}
+
+/**
+ * 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,
+};

src/common/fmt.js

@@ -0,0 +1,90 @@
+// @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 };

src/common/html.js

@@ -0,0 +1,19 @@
+// @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) + ";";
+    })
+    .replace(/\u0008/gim, "");
+};
+
+export { encodeHTML };

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

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" />`,
+  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 };
+export default icons;

src/common/index.js

@@ -0,0 +1,13 @@
+// @ts-check
+
+export { blacklist } from "./blacklist.js";
+export { Card } from "./Card.js";
+export { I18n } from "./I18n.js";
+export { icons } from "./icons.js";
+export { retryer } from "./retryer.js";
+export {
+  ERROR_CARD_LENGTH,
+  renderError,
+  flexLayout,
+  measureText,
+} from "./render.js";

src/common/languageColors.json

@@ -0,0 +1,651 @@
+{
+    "1C Enterprise": "#814CCC",
+    "2-Dimensional Array": "#38761D",
+    "4D": "#004289",
+    "ABAP": "#E8274B",
+    "ABAP CDS": "#555e25",
+    "AGS Script": "#B9D9FF",
+    "AIDL": "#34EB6B",
+    "AL": "#3AA2B5",
+    "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",
+    "ArkTS": "#0080ff",
+    "AsciiDoc": "#73a0c5",
+    "AspectJ": "#a957b0",
+    "Assembly": "#6E4C13",
+    "Astro": "#ff5a03",
+    "Asymptote": "#ff0000",
+    "Augeas": "#9CC134",
+    "AutoHotkey": "#6594b9",
+    "AutoIt": "#1C3552",
+    "Avro IDL": "#0040FF",
+    "Awk": "#c30e9b",
+    "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",
+    "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",
+    "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 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",
+    "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",
+    "KDL": "#ffb3b3",
+    "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",
+    "Lark": "#2980B9",
+    "Lasso": "#999999",
+    "Latte": "#f2a542",
+    "Leo": "#C4FFC2",
+    "Less": "#1d365d",
+    "Lex": "#DBCA00",
+    "LigoLANG": "#0e74ff",
+    "LilyPond": "#9ccc7c",
+    "Liquid": "#67b8de",
+    "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",
+    "Max": "#c4a79c",
+    "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",
+    "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",
+    "Survex data": "#ffcc99",
+    "Svelte": "#ff3e00",
+    "Sway": "#00F58C",
+    "Sweave": "#198ce7",
+    "Swift": "#F05138",
+    "SystemVerilog": "#DAE1C2",
+    "TI Program": "#A0AA87",
+    "TL-Verilog": "#C40023",
+    "TLA": "#4b0079",
+    "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"
+}

src/common/log.js

@@ -0,0 +1,14 @@
+// @ts-check
+
+const noop = () => {};
+
+/**
+ * Return console instance based on the environment.
+ *
+ * @type {Console | {log: () => void, error: () => void}}
+ */
+const logger =
+  process.env.NODE_ENV === "test" ? { log: noop, error: noop } : console;
+
+export { logger };
+export default logger;

src/common/ops.js

@@ -0,0 +1,124 @@
+// @ts-check
+
+import toEmoji from "emoji-name-map";
+
+/**
+ * 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));
+};
+
+export {
+  parseBoolean,
+  parseArray,
+  clampValue,
+  lowercaseTrim,
+  chunkArray,
+  parseEmojis,
+  dateDiff,
+};

src/common/render.js

@@ -0,0 +1,239 @@
+// @ts-check
+
+import { SECONDARY_ERROR_MESSAGES, TRY_AGAIN_LATER } from "./error.js";
+import { getCardColors } from "./color.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 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://tiny.one/readme-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 {
+  ERROR_CARD_LENGTH,
+  renderError,
+  createLanguageNode,
+  createProgressNode,
+  iconWithLabel,
+  flexLayout,
+  measureText,
+};

src/common/retryer.js

@@ -0,0 +1,97 @@
+// @ts-check
+
+import { CustomError } from "./error.js";
+import { logger } from "./log.js";
+
+// Script variables.
+
+// Count the number of GitHub API tokens available.
+const PATs = Object.keys(process.env).filter((key) =>
+  /PAT_\d*$/.exec(key),
+).length;
+const RETRIES = process.env.NODE_ENV === "test" ? 7 : PATs;
+
+/**
+ * @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 {number} retries How many times to retry.
+ * @returns {Promise<any>} The response from the fetcher function.
+ */
+const retryer = async (fetcher, variables, retries = 0) => {
+  if (!RETRIES) {
+    throw new CustomError("No GitHub API tokens found", CustomError.NO_TOKENS);
+  }
+
+  if (retries > RETRIES) {
+    throw new CustomError(
+      "Downtime due to GitHub API rate limiting",
+      CustomError.MAX_RETRY,
+    );
+  }
+
+  try {
+    // try to fetch with the first token since RETRIES is 0 index i'm adding +1
+    let response = await fetcher(
+      variables,
+      // @ts-ignore
+      process.env[`PAT_${retries + 1}`],
+      // 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 rate limit is hit increase the RETRIES and recursively call the retryer
+    // with username, and current RETRIES
+    if (isRateLimited) {
+      logger.log(`PAT_${retries + 1} Failed`);
+      retries++;
+      // directly return from the function
+      return retryer(fetcher, variables, retries);
+    }
+
+    // finally return the response
+    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(`PAT_${retries + 1} Failed`);
+      retries++;
+      // directly return from the function
+      return retryer(fetcher, variables, retries);
+    }
+
+    // HTTP error with a response → return it for caller-side handling
+    return e.response;
+  }
+};
+
+export { retryer, RETRIES };
+export default retryer;

src/fetchers/gist.js

@@ -0,0 +1,114 @@
+// @ts-check
+
+import { retryer } from "../common/retryer.js";
+import { MissingParamError } from "../common/error.js";
+import { request } from "../common/http.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.
+ * @returns {Promise<GistData>} Gist data.
+ */
+const fetchGist = async (id) => {
+  if (!id) {
+    throw new MissingParamError(["id"], "/api/gist?id=GIST_ID");
+  }
+  const res = await retryer(fetcher, { gistName: id });
+  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 };
+export default fetchGist;

src/fetchers/repo.js

@@ -0,0 +1,118 @@
+// @ts-check
+
+import { MissingParamError } from "../common/error.js";
+import { request } from "../common/http.js";
+import { retryer } from "../common/retryer.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) => {
+  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: username, repo: reponame });
+
+  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");
+    }
+    return {
+      ...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");
+    }
+    return {
+      ...data.organization.repository,
+      starCount: data.organization.repository.stargazers.totalCount,
+    };
+  }
+
+  throw new Error("Unexpected behavior");
+};
+
+export { fetchRepo };
+export default fetchRepo;

src/fetchers/stats.js

@@ -0,0 +1,340 @@
+// @ts-check
+
+import axios from "axios";
+import * as dotenv from "dotenv";
+import githubUsernameRegex from "github-username-regex";
+import { calculateRank } from "../calculateRank.js";
+import { retryer } from "../common/retryer.js";
+import { logger } from "../common/log.js";
+import { excludeRepositories } from "../common/envs.js";
+import { CustomError, MissingParamError } from "../common/error.js";
+import { wrapTextMultiline } from "../common/fmt.js";
+import { request } from "../common/http.js";
+
+dotenv.config();
+
+// GraphQL queries.
+const GRAPHQL_REPOS_FIELD = `
+  repositories(first: 100, ownerAffiliations: OWNER, orderBy: {direction: DESC, field: STARGAZERS}, after: $after) {
+    totalCount
+    nodes {
+      name
+      stargazers {
+        totalCount
+      }
+    }
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
+`;
+
+const GRAPHQL_REPOS_QUERY = `
+  query userInfo($login: String!, $after: String) {
+    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) {
+    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.
+ * @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.
+ */
+const statsFetcher = async ({
+  username,
+  includeMergedPullRequests,
+  includeDiscussions,
+  includeDiscussionsAnswers,
+  startTime,
+}) => {
+  let stats;
+  let hasNextPage = true;
+  let endCursor = null;
+  while (hasNextPage) {
+    const variables = {
+      login: username,
+      first: 100,
+      after: endCursor,
+      includeMergedPullRequests,
+      includeDiscussions,
+      includeDiscussionsAnswers,
+      startTime,
+    };
+    let res = await retryer(fetcher, variables);
+    if (res.data.errors) {
+      return res;
+    }
+
+    // Store stats data.
+    const repoNodes = res.data.data.user.repositories.nodes;
+    if (stats) {
+      stats.data.data.user.repositories.nodes.push(...repoNodes);
+    } else {
+      stats = res;
+    }
+
+    // Disable multi page fetching on public Vercel instance due to rate limits.
+    const repoNodesWithStars = repoNodes.filter(
+      (node) => node.stargazers.totalCount !== 0,
+    );
+    hasNextPage =
+      process.env.FETCH_MULTI_PAGE_STARS === "true" &&
+      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 fetchTotalCommits = (variables, token) => {
+  return axios({
+    method: "get",
+    url: `https://api.github.com/search/commits?q=author:${variables.login}`,
+    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 totalCommitsFetcher = async (username) => {
+  if (!githubUsernameRegex.test(username)) {
+    logger.log("Invalid username provided.");
+    throw new Error("Invalid username provided.");
+  }
+
+  let res;
+  try {
+    res = await retryer(fetchTotalCommits, { login: username });
+  } catch (err) {
+    logger.log(err);
+    throw new Error(err);
+  }
+
+  const totalCount = res.data.total_count;
+  if (!totalCount || isNaN(totalCount)) {
+    throw new CustomError(
+      "Could not fetch total commits.",
+      CustomError.GITHUB_REST_API_ERROR,
+    );
+  }
+  return totalCount;
+};
+
+/**
+ * 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
+ * @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,
+) => {
+  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,
+    rank: { level: "C", percentile: 100 },
+  };
+
+  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,
+  });
+
+  // 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 totalCommitsFetcher(username);
+  } else {
+    stats.totalCommits = user.commits.totalCommitContributions;
+  }
+
+  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, ...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 };
+export default fetchStats;

src/fetchers/top-languages.js

@@ -0,0 +1,162 @@
+// @ts-check
+
+import { retryer } from "../common/retryer.js";
+import { logger } from "../common/log.js";
+import { excludeRepositories } from "../common/envs.js";
+import { CustomError, MissingParamError } from "../common/error.js";
+import { wrapTextMultiline } from "../common/fmt.js";
+import { request } from "../common/http.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!) {
+        user(login: $login) {
+          # fetch only owner repos & not forks
+          repositories(ownerAffiliations: OWNER, 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.
+ * @param {number} size_weight Weightage to be given to size.
+ * @param {number} count_weight Weightage to be given to count.
+ * @returns {Promise<TopLangData>} Top languages data.
+ */
+const fetchTopLanguages = async (
+  username,
+  exclude_repo = [],
+  size_weight = 1,
+  count_weight = 0,
+) => {
+  if (!username) {
+    throw new MissingParamError(["username"]);
+  }
+
+  const res = await retryer(fetcher, { login: username });
+
+  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, ...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 };
+export default fetchTopLanguages;

src/fetchers/types.d.ts

@@ -0,0 +1,118 @@
+export type GistData = {
+  name: string;
+  nameWithOwner: string;
+  description: string | null;
+  language: string | null;
+  starsCount: number;
+  forksCount: number;
+};
+
+export type 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;
+};
+
+export type StatsData = {
+  name: string;
+  totalPRs: number;
+  totalPRsMerged: number;
+  mergedPRsPercentage: number;
+  totalReviews: number;
+  totalCommits: number;
+  totalIssues: number;
+  totalStars: number;
+  totalDiscussionsStarted: number;
+  totalDiscussionsAnswered: number;
+  contributedTo: number;
+  rank: { level: string; percentile: number };
+};
+
+export type Lang = {
+  name: string;
+  color: string;
+  size: number;
+};
+
+export type TopLangData = Record<string, Lang>;
+
+export type WakaTimeData = {
+  categories: {
+    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: {
+    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: {
+    digital: string;
+    hours: number;
+    minutes: number;
+    name: string;
+    percent: number;
+    text: string;
+    total_seconds: number;
+  }[];
+  operating_systems: {
+    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 type WakaTimeLang = {
+  name: string;
+  text: string;
+  percent: number;
+};

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 };
+export default fetchWakatimeStats;

src/index.js

@@ -0,0 +1,2 @@
+export * from "./common/index.js";
+export * from "./cards/index.js";

src/translations.js

@@ -0,0 +1,1105 @@
+// @ts-check
+
+import { encodeHTML } from "./common/html.js";
+
+/**
+ * Retrieves stat card labels in the available locales.
+ *
+ * @param {object} props Function arguments.
+ * @param {string} props.name The name of the locale.
+ * @param {string} props.apostrophe Whether to use apostrophe or not.
+ * @returns {object} The locales object.
+ *
+ * @see https://www.andiamo.co.uk/resources/iso-language-codes/ for language codes.
+ */
+const statCardLocales = ({ name, apostrophe }) => {
+  const encodedName = encodeHTML(name);
+  return {
+    "statcard.title": {
+      en: `${encodedName}'${apostrophe} GitHub Stats`,
+      ar: `${encodedName} إحصائيات جيت هاب`,
+      az: `${encodedName}'${apostrophe} Hesabının GitHub Statistikası`,
+      ca: `Estadístiques de GitHub de ${encodedName}`,
+      cn: `${encodedName} 的 GitHub 统计数据`,
+      "zh-tw": `${encodedName} 的 GitHub 統計資料`,
+      cs: `GitHub statistiky uživatele ${encodedName}`,
+      de: `${encodedName + apostrophe} GitHub-Statistiken`,
+      sw: `GitHub Stats za ${encodedName}`,
+      ur: `${encodedName} کے گٹ ہب کے اعداد و شمار`,
+      bg: `GitHub статистика на потребител ${encodedName}`,
+      bn: `${encodedName} এর GitHub পরিসংখ্যান`,
+      es: `Estadísticas de GitHub de ${encodedName}`,
+      fa: `آمار گیت‌هاب ${encodedName}`,
+      fi: `${encodedName}:n GitHub-tilastot`,
+      fr: `Statistiques GitHub de ${encodedName}`,
+      hi: `${encodedName} के GitHub आँकड़े`,
+      sa: `${encodedName} इत्यस्य GitHub सांख्यिकी`,
+      hu: `${encodedName} GitHub statisztika`,
+      it: `Statistiche GitHub di ${encodedName}`,
+      ja: `${encodedName}の GitHub 統計`,
+      kr: `${encodedName}의 GitHub 통계`,
+      nl: `${encodedName}'${apostrophe} GitHub-statistieken`,
+      "pt-pt": `Estatísticas do GitHub de ${encodedName}`,
+      "pt-br": `Estatísticas do GitHub de ${encodedName}`,
+      np: `${encodedName}'${apostrophe} गिटहब तथ्याङ्क`,
+      el: `Στατιστικά GitHub του ${encodedName}`,
+      ro: `Statisticile GitHub ale lui ${encodedName}`,
+      ru: `Статистика GitHub пользователя ${encodedName}`,
+      "uk-ua": `Статистика GitHub користувача ${encodedName}`,
+      id: `Statistik GitHub ${encodedName}`,
+      ml: `${encodedName}'${apostrophe} ഗിറ്റ്ഹബ് സ്ഥിതിവിവരക്കണക്കുകൾ`,
+      my: `${encodedName} ရဲ့ GitHub အခြေအနေများ`,
+      ta: `${encodedName} கிட்ஹப் புள்ளிவிவரங்கள்`,
+      sk: `GitHub štatistiky používateľa ${encodedName}`,
+      tr: `${encodedName} Hesabının GitHub İstatistikleri`,
+      pl: `Statystyki GitHub użytkownika ${encodedName}`,
+      uz: `${encodedName}ning GitHub'dagi statistikasi`,
+      vi: `Thống Kê GitHub ${encodedName}`,
+      se: `GitHubstatistik för ${encodedName}`,
+      he: `סטטיסטיקות הגיטהאב של ${encodedName}`,
+      fil: `Mga Stats ng GitHub ni ${encodedName}`,
+      th: `สถิติ GitHub ของ ${encodedName}`,
+      sr: `GitHub статистика корисника ${encodedName}`,
+      "sr-latn": `GitHub statistika korisnika ${encodedName}`,
+      no: `GitHub-statistikk for ${encodedName}`,
+    },
+    "statcard.ranktitle": {
+      en: `${encodedName}'${apostrophe} GitHub Rank`,
+      ar: `${encodedName} إحصائيات جيت هاب`,
+      az: `${encodedName}'${apostrophe} Hesabının GitHub Statistikası`,
+      ca: `Estadístiques de GitHub de ${encodedName}`,
+      cn: `${encodedName} 的 GitHub 统计数据`,
+      "zh-tw": `${encodedName} 的 GitHub 統計資料`,
+      cs: `GitHub statistiky uživatele ${encodedName}`,
+      de: `${encodedName + apostrophe} GitHub-Statistiken`,
+      sw: `GitHub Rank ya ${encodedName}`,
+      ur: `${encodedName} کی گٹ ہب رینک`,
+      bg: `GitHub ранг на ${encodedName}`,
+      bn: `${encodedName} এর GitHub পরিসংখ্যান`,
+      es: `Estadísticas de GitHub de ${encodedName}`,
+      fa: `رتبه گیت‌هاب ${encodedName}`,
+      fi: `${encodedName}:n GitHub-sijoitus`,
+      fr: `Statistiques GitHub de ${encodedName}`,
+      hi: `${encodedName} का GitHub स्थान`,
+      sa: `${encodedName} इत्यस्य GitHub स्थानम्`,
+      hu: `${encodedName} GitHub statisztika`,
+      it: `Statistiche GitHub di ${encodedName}`,
+      ja: `${encodedName} の GitHub ランク`,
+      kr: `${encodedName}의 GitHub 통계`,
+      nl: `${encodedName}'${apostrophe} GitHub-statistieken`,
+      "pt-pt": `Estatísticas do GitHub de ${encodedName}`,
+      "pt-br": `Estatísticas do GitHub de ${encodedName}`,
+      np: `${encodedName}'${apostrophe} गिटहब तथ्याङ्क`,
+      el: `Στατιστικά GitHub του ${encodedName}`,
+      ro: `Rankul GitHub al lui ${encodedName}`,
+      ru: `Рейтинг GitHub пользователя ${encodedName}`,
+      "uk-ua": `Рейтинг GitHub користувача ${encodedName}`,
+      id: `Statistik GitHub ${encodedName}`,
+      ml: `${encodedName}'${apostrophe} ഗിറ്റ്ഹബ് സ്ഥിതിവിവരക്കണക്കുകൾ`,
+      my: `${encodedName} ရဲ့ GitHub အဆင့်`,
+      ta: `${encodedName} கிட்ஹப் தரவரிசை`,
+      sk: `GitHub štatistiky používateľa ${encodedName}`,
+      tr: `${encodedName} Hesabının GitHub Yıldızları`,
+      pl: `Statystyki GitHub użytkownika ${encodedName}`,
+      uz: `${encodedName}ning GitHub'dagi statistikasi`,
+      vi: `Thống Kê GitHub ${encodedName}`,
+      se: `GitHubstatistik för ${encodedName}`,
+      he: `דרגת הגיטהאב של ${encodedName}`,
+      fil: `Ranggo ng GitHub ni ${encodedName}`,
+      th: `อันดับ GitHub ของ ${encodedName}`,
+      sr: `Ранк корисника ${encodedName}`,
+      "sr-latn": `Rank korisnika ${encodedName}`,
+      no: `GitHub-statistikk for ${encodedName}`,
+    },
+    "statcard.totalstars": {
+      en: "Total Stars Earned",
+      ar: "مجموع النجوم",
+      az: "Ümumi Ulduz",
+      ca: "Total d'estrelles",
+      cn: "获标星数",
+      "zh-tw": "得標星星數量（Star）",
+      cs: "Celkem hvězd",
+      de: "Insgesamt erhaltene Sterne",
+      sw: "Medali(stars) ulizojishindia",
+      ur: "کل ستارے حاصل کیے",
+      bg: "Получени звезди",
+      bn: "সর্বমোট Star",
+      es: "Estrellas totales",
+      fa: "مجموع ستاره‌های دریافت‌شده",
+      fi: "Ansaitut tähdet yhteensä",
+      fr: "Total d'étoiles",
+      hi: "कुल अर्जित सितारे",
+      sa: "अर्जिताः कुल-तारकाः",
+      hu: "Csillagok",
+      it: "Stelle totali",
+      ja: "スターされた数",
+      kr: "받은 스타 수",
+      nl: "Totaal Sterren Ontvangen",
+      "pt-pt": "Total de estrelas",
+      "pt-br": "Total de estrelas",
+      np: "कुल ताराहरू",
+      el: "Σύνολο Αστεριών",
+      ro: "Total de stele câștigate",
+      ru: "Всего звёзд",
+      "uk-ua": "Всього зірок",
+      id: "Total Bintang",
+      ml: "ആകെ നക്ഷത്രങ്ങൾ",
+      my: "စုစုပေါင်းကြယ်များ",
+      ta: "சம்பாதித்த மொத்த நட்சத்திரங்கள்",
+      sk: "Hviezdy",
+      tr: "Toplam Yıldız",
+      pl: "Liczba otrzymanych gwiazdek",
+      uz: "Yulduzchalar",
+      vi: "Tổng Số Sao",
+      se: "Antal intjänade stjärnor",
+      he: "סך כל הכוכבים שהושגו",
+      fil: "Kabuuang Nakuhang Bituin",
+      th: "ดาวทั้งหมดที่ได้รับ",
+      sr: "Број освојених звездица",
+      "sr-latn": "Broj osvojenih zvezdica",
+      no: "Totalt antall stjerner",
+    },
+    "statcard.commits": {
+      en: "Total Commits",
+      ar: "مجموع المساهمات",
+      az: "Ümumi Commit",
+      ca: "Commits totals",
+      cn: "累计提交总数",
+      "zh-tw": "累計提交數量（Commit）",
+      cs: "Celkem commitů",
+      de: "Anzahl Commits",
+      sw: "Matendo yako yote",
+      ur: "کل کمٹ",
+      bg: "Общо ангажименти",
+      bn: "সর্বমোট Commit",
+      es: "Commits totales",
+      fa: "مجموع کامیت‌ها",
+      fi: "Yhteensä committeja",
+      fr: "Total des Commits",
+      hi: "कुल commits",
+      sa: "कुल-समिन्चयः",
+      hu: "Összes commit",
+      it: "Commit totali",
+      ja: "合計コミット数",
+      kr: "전체 커밋 수",
+      nl: "Aantal commits",
+      "pt-pt": "Total de Commits",
+      "pt-br": "Total de Commits",
+      np: "कुल Commits",
+      el: "Σύνολο Commits",
+      ro: "Total Commit-uri",
+      ru: "Всего коммитов",
+      "uk-ua": "Всього комітів",
+      id: "Total Komitmen",
+      ml: "ആകെ കമ്മിറ്റുകൾ",
+      my: "စုစုပေါင်း Commit များ",
+      ta: `மொத்த கமிட்கள்`,
+      sk: "Všetky commity",
+      tr: "Toplam Commit",
+      pl: "Wszystkie commity",
+      uz: "'Commit'lar",
+      vi: "Tổng Số Cam Kết",
+      se: "Totalt antal commits",
+      he: "סך כל ה־commits",
+      fil: "Kabuuang Commits",
+      th: "Commit ทั้งหมด",
+      sr: "Укупно commit-ова",
+      "sr-latn": "Ukupno commit-ova",
+      no: "Totalt antall commits",
+    },
+    "statcard.prs": {
+      en: "Total PRs",
+      ar: "مجموع طلبات السحب",
+      az: "Ümumi PR",
+      ca: "PRs totals",
+      cn: "发起的 PR 总数",
+      "zh-tw": "拉取請求數量���PR）",
+      cs: "Celkem PRs",
+      de: "PRs Insgesamt",
+      sw: "PRs Zote",
+      ur: "کل پی آرز",
+      bg: "Заявки за изтегляния",
+      bn: "সর্বমোট PR",
+      es: "PRs totales",
+      fa: "مجموع Pull Request",
+      fi: "Yhteensä PR:t",
+      fr: "Total des PRs",
+      hi: "कुल PR",
+      sa: "कुल-पीआर",
+      hu: "Összes PR",
+      it: "PR totali",
+      ja: "合計 PR",
+      kr: "PR 횟수",
+      nl: "Aantal PR's",
+      "pt-pt": "Total de PRs",
+      "pt-br": "Total de PRs",
+      np: "कुल PRs",
+      el: "Σύνολο PRs",
+      ro: "Total PR-uri",
+      ru: "Всего запросов изменений",
+      "uk-ua": "Всього запитів на злиття",
+      id: "Total Permintaan Tarik",
+      ml: "ആകെ പുൾ അഭ്യർത്ഥനകൾ",
+      my: "စုစုပေါင်း PR များ",
+      ta: `மொத்த இழுக்கும் கோரிக்கைகள்`,
+      sk: "Všetky PR",
+      tr: "Toplam PR",
+      pl: "Wszystkie PR-y",
+      uz: "'Pull Request'lar",
+      vi: "Tổng Số PR",
+      se: "Totalt antal PR",
+      he: "סך כל ה־PRs",
+      fil: "Kabuuang PRs",
+      th: "PR ทั้งหมด",
+      sr: "Укупно PR-ова",
+      "sr-latn": "Ukupno PR-ova",
+      no: "Totalt antall PR",
+    },
+    "statcard.issues": {
+      en: "Total Issues",
+      ar: "مجموع التحسينات",
+      az: "Ümumi Problem",
+      ca: "Issues totals",
+      cn: "提出的 issue 总数",
+      "zh-tw": "提出問題數量（Issue）",
+      cs: "Celkem problémů",
+      de: "Anzahl Issues",
+      sw: "Masuala Ibuka",
+      ur: "کل مسائل",
+      bg: "Брой въпроси",
+      bn: "সর্বমোট Issue",
+      es: "Issues totales",
+      fa: "مجموع مسائل",
+      fi: "Yhteensä ongelmat",
+      fr: "Nombre total d'incidents",
+      hi: "कुल मुद्दे(Issues)",
+      sa: "कुल-समस्याः",
+      hu: "Összes hibajegy",
+      it: "Segnalazioni totali",
+      ja: "合計 issue",
+      kr: "이슈 개수",
+      nl: "Aantal kwesties",
+      "pt-pt": "Total de Issues",
+      "pt-br": "Total de Issues",
+      np: "कुल मुद्दाहरू",
+      el: "Σύνολο Ζητημάτων",
+      ro: "Total Issue-uri",
+      ru: "Всего вопросов",
+      "uk-ua": "Всього питань",
+      id: "Total Masalah Dilaporkan",
+      ml: "ആകെ പ്രശ്നങ്ങൾ",
+      my: "စုစုပေါင်းပြဿနာများ",
+      ta: `மொத்த சிக்கல்கள்`,
+      sk: "Všetky problémy",
+      tr: "Toplam Hata",
+      pl: "Wszystkie problemy",
+      uz: "'Issue'lar",
+      vi: "Tổng Số Vấn Đề",
+      se: "Total antal issues",
+      he: "סך כל ה־issues",
+      fil: "Kabuuang mga Isyu",
+      th: "Issue ทั้งหมด",
+      sr: "Укупно пријављених проблема",
+      "sr-latn": "Ukupno prijavljenih problema",
+      no: "Totalt antall issues",
+    },
+    "statcard.contribs": {
+      en: "Contributed to (last year)",
+      ar: "ساهم في (العام الماضي)",
+      az: "Töhfə verdi (ötən il)",
+      ca: "Contribucions (l'any passat)",
+      cn: "贡献的项目数（去年）",
+      "zh-tw": "參與項目數量（去年）",
+      cs: "Přispěl k (minulý rok)",
+      de: "Beigetragen zu (letztes Jahr)",
+      sw: "Idadi ya michango (mwaka mzima)",
+      ur: "پچھلے سال میں تعاون کیا",
+      bg: "Приноси (за изминалата година)",
+      bn: "অবদান (গত বছর)",
+      es: "Contribuciones en (el año pasado)",
+      fa: "مشارکت در (سال گذشته)",
+      fi: "Osallistunut (viime vuonna)",
+      fr: "Contribué à (l'année dernière)",
+      hi: "(पिछले वर्ष) में योगदान दिया",
+      sa: "(गते वर्षे) योगदानम् कृतम्",
+      hu: "Hozzájárulások (tavaly)",
+      it: "Ha contribuito a (l'anno scorso)",
+      ja: "貢献したリポジトリ （昨年）",
+      kr: "(작년) 기여",
+      nl: "Bijgedragen aan (vorig jaar)",
+      "pt-pt": "Contribuiu em (ano passado)",
+      "pt-br": "Contribuiu para (ano passado)",
+      np: "कुल योगदानहरू (गत वर्ष)",
+      el: "Συνεισφέρθηκε σε (πέρυσι)",
+      ro: "Total Contribuiri",
+      ru: "Внесено вклада (за прошлый год)",
+      "uk-ua": "Зроблено внесок (за минулий рік)",
+      id: "Berkontribusi ke (tahun lalu)",
+      ml: "(കഴിഞ്ഞ വർഷത്തെ)ആകെ സംഭാവനകൾ ",
+      my: "အကူအညီပေးခဲ့သည် (ပြီးခဲ့သည့်နှစ်)",
+      ta: "(கடந்த ஆண்டு) பங்களித்தது",
+      sk: "Účasti (minulý rok)",
+      tr: "Katkı Verildi (geçen yıl)",
+      pl: "Kontrybucje (w zeszłym roku)",
+      uz: "Hissa qoʻshgan (o'tgan yili)",
+      vi: "Đã Đóng Góp (năm ngoái)",
+      se: "Bidragit till (förra året)",
+      he: "תרם ל... (שנה שעברה)",
+      fil: "Nag-ambag sa (nakaraang taon)",
+      th: "มีส่วนร่วมใน (ปีที่แล้ว)",
+      sr: "Доприноси (прошла година)",
+      "sr-latn": "Doprinosi (prošla godina)",
+      no: "Bidro til (i fjor)",
+    },
+    "statcard.reviews": {
+      en: "Total PRs Reviewed",
+      ar: "طلبات السحب التي تم مراجعتها",
+      az: "Nəzərdən Keçirilən Ümumi PR",
+      ca: "Total de PRs revisats",
+      cn: "审查的 PR 总数",
+      "zh-tw": "審核的 PR 總計",
+      cs: "Celkový počet PR",
+      de: "Insgesamt überprüfte PRs",
+      sw: "Idadi ya PRs zilizopitiliwa upya",
+      ur: "کل پی آرز کا جائزہ لیا",
+      bg: "Разгледани заявки за изтегляне",
+      bn: "সর্বমোট পুনরালোচনা করা PR",
+      es: "PR totales revisados",
+      fa: "مجموع درخواست‌های ادغام بررسی‌شده",
+      fi: "Yhteensä tarkastettuja PR:itä",
+      fr: "Nombre total de PR examinés",
+      hi: "कुल PRs की समीक्षा की गई",
+      sa: "समीक्षिताः कुल-पीआर",
+      hu: "Összes ellenőrzött PR",
+      it: "PR totali esaminati",
+      ja: "レビューされた PR の総数",
+      kr: "검토된 총 PR",
+      nl: "Totaal beoordeelde PR's",
+      "pt-pt": "Total de PRs revistos",
+      "pt-br": "Total de PRs revisados",
+      np: "कुल पीआर समीक्षित",
+      el: "Σύνολο Αναθεωρημένων PR",
+      ro: "Total PR-uri Revizuite",
+      ru: "Всего запросов проверено",
+      "uk-ua": "Всього запитів перевірено",
+      id: "Total PR yang Direview",
+      ml: "ആകെ പുൾ അവലോകനങ്ങൾ",
+      my: "စုစုပေါင်း PR များကို ပြန်လည်သုံးသပ်ခဲ့မှု",
+      ta: "மதிப்பாய்வு செய்யப்பட்ட மொத்த இழுத்தல் கோரிக்கைகள்",
+      sk: "Celkový počet PR",
+      tr: "İncelenen toplam PR",
+      pl: "Łącznie sprawdzonych PR",
+      uz: "Koʻrib chiqilgan PR-lar soni",
+      vi: "Tổng Số PR Đã Xem Xét",
+      se: "Totalt antal granskade PR",
+      he: "סך כל ה־PRs שנסרקו",
+      fil: "Kabuuang PR na Na-review",
+      th: "รีวิว PR แล้วทั้งหมด",
+      sr: "Укупно прегледаних PR-ова",
+      "sr-latn": "Ukupno pregledanih PR-ova",
+      no: "Totalt antall vurderte PR",
+    },
+    "statcard.discussions-started": {
+      en: "Total Discussions Started",
+      ar: "مجموع المناقشات التي بدأها",
+      az: "Başladılan Ümumi Müzakirə",
+      ca: "Discussions totals iniciades",
+      cn: "发起的讨论总数",
+      "zh-tw": "發起的討論總數",
+      cs: "Celkem zahájených diskusí",
+      de: "Gesamt gestartete Diskussionen",
+      sw: "Idadi ya majadiliano yaliyoanzishwa",
+      ur: "کل مباحثے شروع کیے",
+      bg: "Започнати дискусии",
+      bn: "সর্বমোট আলোচনা শুরু",
+      es: "Discusiones totales iniciadas",
+      fa: "مجموع بحث‌های آغازشده",
+      fi: "Aloitetut keskustelut yhteensä",
+      fr: "Nombre total de discussions lancées",
+      hi: "कुल चर्चाएँ शुरू हुईं",
+      sa: "प्रारब्धाः कुल-चर्चाः",
+      hu: "Összes megkezdett megbeszélés",
+      it: "Discussioni totali avviate",
+      ja: "開始されたディスカッションの総数",
+      kr: "시작된 토론 총 수",
+      nl: "Totaal gestarte discussies",
+      "pt-pt": "Total de Discussões Iniciadas",
+      "pt-br": "Total de Discussões Iniciadas",
+      np: "कुल चर्चा सुरु",
+      el: "Σύνολο Συζητήσεων που Ξεκίνησαν",
+      ro: "Total Discuții Începute",
+      ru: "Всего начатых обсуждений",
+      "uk-ua": "Всього розпочатих дискусій",
+      id: "Total Diskusi Dimulai",
+      ml: "ആരംഭിച്ച ആലോചനകൾ",
+      my: "စုစုပေါင်း စတင်ခဲ့သော ဆွေးနွေးမှုများ",
+      ta: "மொத்த விவாதங்கள் தொடங்கின",
+      sk: "Celkový počet začatých diskusií",
+      tr: "Başlatılan Toplam Tartışma",
+      pl: "Łącznie rozpoczętych dyskusji",
+      uz: "Boshlangan muzokaralar soni",
+      vi: "Tổng Số Thảo Luận Bắt Đầu",
+      se: "Totalt antal diskussioner startade",
+      he: "סך כל הדיונים שהותחלו",
+      fil: "Kabuuang mga Diskusyon na Sinimulan",
+      th: "เริ่มหัวข้อสนทนาทั้งหมด",
+      sr: "Укупно покренутих дискусија",
+      "sr-latn": "Ukupno pokrenutih diskusija",
+      no: "Totalt antall startede diskusjoner",
+    },
+    "statcard.discussions-answered": {
+      en: "Total Discussions Answered",
+      ar: "مجموع المناقشات المُجابة",
+      az: "Cavablandırılan Ümumi Müzakirə",
+      ca: "Discussions totals respostes",
+      cn: "回复的讨论总数",
+      "zh-tw": "回覆討論總計",
+      cs: "Celkem zodpovězených diskusí",
+      de: "Gesamt beantwortete Diskussionen",
+      sw: "Idadi ya majadiliano yaliyojibiwa",
+      ur: "کل مباحثے جواب دیے",
+      bg: "Отговорени дискусии",
+      bn: "সর্বমোট আলোচনা উত্তর",
+      es: "Discusiones totales respondidas",
+      fa: "مجموع بحث‌های پاسخ‌داده‌شده",
+      fi: "Vastatut keskustelut yhteensä",
+      fr: "Nombre total de discussions répondues",
+      hi: "कुल चर्चाओं के उत्तर",
+      sa: "उत्तरिताः कुल-चर्चाः",
+      hu: "Összes megválaszolt megbeszélés",
+      it: "Discussioni totali risposte",
+      ja: "回答されたディスカッションの総数",
+      kr: "답변된 토론 총 수",
+      nl: "Totaal beantwoorde discussies",
+      "pt-pt": "Total de Discussões Respondidas",
+      "pt-br": "Total de Discussões Respondidas",
+      np: "कुल चर्चा उत्तर",
+      el: "Σύνολο Συζητήσεων που Απαντήθηκαν",
+      ro: "Total Răspunsuri La Discuții",
+      ru: "Всего отвеченных обсуждений",
+      "uk-ua": "Всього відповідей на дискусії",
+      id: "Total Diskusi Dibalas",
+      ml: "ഉത്തരം നൽകിയ ആലോചനകൾ",
+      my: "စုစုပေါင်း ပြန်လည်ဖြေကြားခဲ့သော ဆွေးနွေးမှုများ",
+      ta: "பதிலளிக்கப்பட்ட மொத்த விவாதங்கள்",
+      sk: "Celkový počet zodpovedaných diskusií",
+      tr: "Toplam Cevaplanan Tartışma",
+      pl: "Łącznie odpowiedzianych dyskusji",
+      uz: "Javob berilgan muzokaralar soni",
+      vi: "Tổng Số Thảo Luận Đã Trả Lời",
+      se: "Totalt antal diskussioner besvarade",
+      he: "סך כל הדיונים שנענו",
+      fil: "Kabuuang mga Diskusyon na Sinagot",
+      th: "ตอบกลับหัวข้อสนทนาทั้งหมด",
+      sr: "Укупно одговорених дискусија",
+      "sr-latn": "Ukupno odgovorenih diskusija",
+      no: "Totalt antall besvarte diskusjoner",
+    },
+    "statcard.prs-merged": {
+      en: "Total PRs Merged",
+      ar: "مجموع طلبات السحب المُدمجة",
+      az: "Birləşdirilmiş Ümumi PR",
+      ca: "PRs totals fusionats",
+      cn: "合并的 PR 总数",
+      "zh-tw": "合併的 PR 總計",
+      cs: "Celkem sloučených PR",
+      de: "Insgesamt zusammengeführte PRs",
+      sw: "Idadi ya PRs zilizounganishwa",
+      ur: "کل پی آرز ضم کیے",
+      bg: "Сляти заявки за изтегляния",
+      bn: "সর্বমোট PR একত্রীকৃত",
+      es: "PR totales fusionados",
+      fa: "مجموع درخواست‌های ادغام شده",
+      fi: "Yhteensä yhdistetyt PR:t",
+      fr: "Nombre total de PR fusionnés",
+      hi: "कुल PR का विलय",
+      sa: "विलीनाः कुल-पीआर",
+      hu: "Összes egyesített PR",
+      it: "PR totali uniti",
+      ja: "マージされた PR の総数",
+      kr: "병합된 총 PR",
+      nl: "Totaal samengevoegde PR's",
+      "pt-pt": "Total de PRs Fundidos",
+      "pt-br": "Total de PRs Integrados",
+      np: "कुल विलयित PRs",
+      el: "Σύνολο Συγχωνευμένων PR",
+      ro: "Total PR-uri Fuzionate",
+      ru: "Всего объединённых запросов",
+      "uk-ua": "Всього об'єднаних запитів",
+      id: "Total PR Digabungkan",
+      my: "စုစုပေါင်း ပေါင်းစည်းခဲ့သော PR များ",
+      ta: "இணைக்கப்பட்ட மொத்த PRகள்",
+      sk: "Celkový počet zlúčených PR",
+      tr: "Toplam Birleştirilmiş PR",
+      pl: "Łącznie połączonych PR",
+      uz: "Birlangan PR-lar soni",
+      vi: "Tổng Số PR Đã Hợp Nhất",
+      se: "Totalt antal sammanfogade PR",
+      he: "סך כל ה־PRs ששולבו",
+      fil: "Kabuuang mga PR na Pinagsama",
+      th: "PR ที่ถูก Merged แล้วทั้งหมด",
+      sr: "Укупно спојених PR-ова",
+      "sr-latn": "Ukupno spojenih PR-ova",
+      no: "Totalt antall sammenslåtte PR",
+    },
+    "statcard.prs-merged-percentage": {
+      en: "Merged PRs Percentage",
+      ar: "نسبة طلبات السحب المُدمجة",
+      az: "Birləşdirilmiş PR-ların Faizi",
+      ca: "Percentatge de PRs fusionats",
+      cn: "被合并的 PR 占比",
+      "zh-tw": "合併的 PR 百分比",
+      cs: "Sloučené PRs v procentech",
+      de: "Zusammengeführte PRs in Prozent",
+      sw: "Asilimia ya PRs zilizounganishwa",
+      ur: "ضم کیے گئے پی آرز کی شرح",
+      bg: "Процент сляти заявки за изтегляния",
+      bn: "PR একত্রীকরণের শতাংশ",
+      es: "Porcentaje de PR fusionados",
+      fa: "درصد درخواست‌های ادغام‌شده",
+      fi: "Yhdistettyjen PR:ien prosentti",
+      fr: "Pourcentage de PR fusionnés",
+      hi: "मर्ज किए गए PRs प्रतिशत",
+      sa: "विलीन-पीआर प्रतिशतम्",
+      hu: "Egyesített PR-k százaléka",
+      it: "Percentuale di PR uniti",
+      ja: "マージされた PR の割合",
+      kr: "병합된 PR의 비율",
+      nl: "Percentage samengevoegde PR's",
+      "pt-pt": "Percentagem de PRs Fundidos",
+      "pt-br": "Porcentagem de PRs Integrados",
+      np: "PR मर्ज गरिएको प्रतिशत",
+      el: "Ποσοστό Συγχωνευμένων PR",
+      ro: "Procentaj PR-uri Fuzionate",
+      ru: "Процент объединённых запросов",
+      "uk-ua": "Відсоток об'єднаних запитів",
+      id: "Persentase PR Digabungkan",
+      my: "PR များကို ပေါင်းစည်းခဲ့သော ရာခိုင်နှုန်း",
+      ta: "இணைக்கப்பட்ட PRகள் சதவீதம்",
+      sk: "Percento zlúčených PR",
+      tr: "Birleştirilmiş PR Yüzdesi",
+      pl: "Procent połączonych PR",
+      uz: "Birlangan PR-lar foizi",
+      vi: "Tỷ Lệ PR Đã Hợp Nhất",
+      se: "Procent av sammanfogade PR",
+      he: "אחוז ה־PRs ששולבו",
+      fil: "Porsyento ng mga PR na Pinagsama",
+      th: "เปอร์เซ็นต์ PR ที่ถูก Merged แล้วทั้งหมด",
+      sr: "Проценат спојених PR-ова",
+      "sr-latn": "Procenat spojenih PR-ova",
+      no: "Prosentandel sammenslåtte PR",
+    },
+  };
+};
+
+const repoCardLocales = {
+  "repocard.template": {
+    en: "Template",
+    ar: "قالب",
+    az: "Şablon",
+    bg: "Шаблон",
+    bn: "টেমপ্লেট",
+    ca: "Plantilla",
+    cn: "模板",
+    "zh-tw": "模板",
+    cs: "Šablona",
+    de: "Vorlage",
+    sw: "Kigezo",
+    ur: "سانچہ",
+    es: "Plantilla",
+    fa: "الگو",
+    fi: "Malli",
+    fr: "Modèle",
+    hi: "खाका",
+    sa: "प्रारूपम्",
+    hu: "Sablon",
+    it: "Template",
+    ja: "テンプレート",
+    kr: "템플릿",
+    nl: "Sjabloon",
+    "pt-pt": "Modelo",
+    "pt-br": "Modelo",
+    np: "टेम्पलेट",
+    el: "Πρότυπο",
+    ro: "Șablon",
+    ru: "Шаблон",
+    "uk-ua": "Шаблон",
+    id: "Pola",
+    ml: "ടെംപ്ലേറ്റ്",
+    my: "ပုံစံ",
+    ta: `டெம்ப்ளேட்`,
+    sk: "Šablóna",
+    tr: "Şablon",
+    pl: "Szablony",
+    uz: "Shablon",
+    vi: "Mẫu",
+    se: "Mall",
+    he: "תבנית",
+    fil: "Suleras",
+    th: "เทมเพลต",
+    sr: "Шаблон",
+    "sr-latn": "Šablon",
+    no: "Mal",
+  },
+  "repocard.archived": {
+    en: "Archived",
+    ar: "مُؤرشف",
+    az: "Arxiv",
+    bg: "Архивирани",
+    bn: "আর্কাইভড",
+    ca: "Arxivats",
+    cn: "已归档",
+    "zh-tw": "已封存",
+    cs: "Archivováno",
+    de: "Archiviert",
+    sw: "Hifadhiwa kwenye kumbukumbu",
+    ur: "محفوظ شدہ",
+    es: "Archivados",
+    fa: "بایگانی‌شده",
+    fi: "Arkistoitu",
+    fr: "Archivé",
+    hi: "संग्रहीत",
+    sa: "संगृहीतम्",
+    hu: "Archivált",
+    it: "Archiviata",
+    ja: "アーカイブ済み",
+    kr: "보관됨",
+    nl: "Gearchiveerd",
+    "pt-pt": "Arquivados",
+    "pt-br": "Arquivados",
+    np: "अभिलेख राखियो",
+    el: "Αρχειοθετημένα",
+    ro: "Arhivat",
+    ru: "Архивирован",
+    "uk-ua": "Архивований",
+    id: "Arsip",
+    ml: "ശേഖരിച്ചത്",
+    my: "သိုလှောင်ပြီး",
+    ta: `காப்பகப்படுத்தப்பட்டது`,
+    sk: "Archivované",
+    tr: "Arşiv",
+    pl: "Zarchiwizowano",
+    uz: "Arxivlangan",
+    vi: "Đã Lưu Trữ",
+    se: "Arkiverade",
+    he: "גנוז",
+    fil: "Naka-arkibo",
+    th: "เก็บถาวร",
+    sr: "Архивирано",
+    "sr-latn": "Arhivirano",
+    no: "Arkivert",
+  },
+};
+
+const langCardLocales = {
+  "langcard.title": {
+    en: "Most Used Languages",
+    ar: "أكثر اللغات استخدامًا",
+    az: "Ən Çox İstifadə Olunan Dillər",
+    ca: "Llenguatges més utilitzats",
+    cn: "最常用的语言",
+    "zh-tw": "最常用的語言",
+    cs: "Nejpoužívanější jazyky",
+    de: "Meist verwendete Sprachen",
+    bg: "Най-използвани езици",
+    bn: "সর্বাধিক ব্যবহৃত ভাষা সমূহ",
+    sw: "Lugha zilizotumika zaidi",
+    ur: "سب سے زیادہ استعمال شدہ زبانیں",
+    es: "Lenguajes más usados",
+    fa: "زبان‌های پرکاربرد",
+    fi: "Käytetyimmät kielet",
+    fr: "Langages les plus utilisés",
+    hi: "सर्वाधिक प्रयुक्त भाषा",
+    sa: "सर्वाधिक-प्रयुक्ताः भाषाः",
+    hu: "Leggyakrabban használt nyelvek",
+    it: "Linguaggi più utilizzati",
+    ja: "最もよく使っている言語",
+    kr: "가장 많이 사용된 언어",
+    nl: "Meest gebruikte talen",
+    "pt-pt": "Linguagens mais usadas",
+    "pt-br": "Linguagens mais usadas",
+    np: "अधिक प्रयोग गरिएको भाषाहरू",
+    el: "Οι περισσότερο χρησιμοποιούμενες γλώσσες",
+    ro: "Cele Mai Folosite Limbaje",
+    ru: "Наиболее используемые языки",
+    "uk-ua": "Найбільш використовувані мови",
+    id: "Bahasa Yang Paling Banyak Digunakan",
+    ml: "കൂടുതൽ ഉപയോഗിച്ച ഭാഷകൾ",
+    my: "အများဆုံးအသုံးပြုသောဘာသာစကားများ",
+    ta: `அதிகம் பயன்படுத்தப்படும் மொழிகள்`,
+    sk: "Najviac používané jazyky",
+    tr: "En Çok Kullanılan Diller",
+    pl: "Najczęściej używane języki",
+    uz: "Eng koʻp ishlatiladigan tillar",
+    vi: "Ngôn Ngữ Thường Sử Dụng",
+    se: "Mest använda språken",
+    he: "השפות הכי משומשות",
+    fil: "Mga Pinakamadalas na Ginagamit na Wika",
+    th: "ภาษาที่ใช้บ่อยที่สุด",
+    sr: "Најкоришћенији језици",
+    "sr-latn": "Najkorišćeniji jezici",
+    no: "Mest brukte språk",
+  },
+  "langcard.nodata": {
+    en: "No languages data.",
+    ar: "لا توجد بيانات للغات.",
+    az: "Dil məlumatı yoxdur.",
+    ca: "Sense dades d'idiomes",
+    cn: "没有语言数据。",
+    "zh-tw": "沒有語言資料。",
+    cs: "Žádné jazykové údaje.",
+    de: "Keine Sprachdaten.",
+    bg: "Няма данни за езици",
+    bn: "কোন ভাষার ডেটা নেই।",
+    sw: "Hakuna kumbukumbu ya lugha zozote",
+    ur: "کوئی زبان کا ڈیٹا نہیں۔",
+    es: "Sin datos de idiomas.",
+    fa: "داده‌ای برای زبان‌ها وجود ندارد.",
+    fi: "Ei kielitietoja.",
+    fr: "Aucune donnée sur les langues.",
+    hi: "कोई भाषा डेटा नहीं",
+    sa: "भाषा-विवरणं नास्ति।",
+    hu: "Nincsenek nyelvi adatok.",
+    it: "Nessun dato sulle lingue.",
+    ja: "言語データがありません。",
+    kr: "언어 데이터가 없습니다.",
+    nl: "Ingen sprogdata.",
+    "pt-pt": "Sem dados de linguagens.",
+    "pt-br": "Sem dados de linguagens.",
+    np: "कुनै भाषा डाटा छैन।",
+    el: "Δεν υπάρχουν δεδομένα γλωσσών.",
+    ro: "Lipsesc date despre limbă.",
+    ru: "Нет данных о языках.",
+    "uk-ua": "Немає даних про мови.",
+    id: "Tidak ada data bahasa.",
+    ml: "ഭാഷാ ഡാറ്റയില്ല.",
+    my: "ဒေတာ မရှိပါ။",
+    ta: `மொழி தரவு இல்லை.`,
+    sk: "Žiadne údaje o jazykoch.",
+    tr: "Dil verisi yok.",
+    pl: "Brak danych dotyczących języków.",
+    uz: "Til haqida ma'lumot yo'q.",
+    vi: "Không có dữ liệu ngôn ngữ.",
+    se: "Inga språkdata.",
+    he: "אין נתוני שפות",
+    fil: "Walang datos ng lenggwahe.",
+    th: "ไม่มีข้อมูลภาษา",
+    sr: "Нема података о језицима.",
+    "sr-latn": "Nema podataka o jezicima.",
+    no: "Ingen språkdata.",
+  },
+};
+
+const wakatimeCardLocales = {
+  "wakatimecard.title": {
+    en: "WakaTime Stats",
+    ar: "إحصائيات واكا تايم",
+    az: "WakaTime Statistikası",
+    ca: "Estadístiques de WakaTime",
+    cn: "WakaTime 周统计",
+    "zh-tw": "WakaTime 周統計",
+    cs: "Statistiky WakaTime",
+    de: "WakaTime Status",
+    sw: "Takwimu ya WakaTime",
+    ur: "وکاٹائم کے اعداد و شمار",
+    bg: "WakaTime статистика",
+    bn: "WakaTime স্ট্যাটাস",
+    es: "Estadísticas de WakaTime",
+    fa: "آمار WakaTime",
+    fi: "WakaTime-tilastot",
+    fr: "Statistiques de WakaTime",
+    hi: "वाकाटाइम आँकड़े",
+    sa: "WakaTime सांख्यिकी",
+    hu: "WakaTime statisztika",
+    it: "Statistiche WakaTime",
+    ja: "WakaTime ワカタイム統計",
+    kr: "WakaTime 주간 통계",
+    nl: "WakaTime-statistieken",
+    "pt-pt": "Estatísticas WakaTime",
+    "pt-br": "Estatísticas WakaTime",
+    np: "WakaTime तथ्या .्क",
+    el: "Στατιστικά WakaTime",
+    ro: "Statistici WakaTime",
+    ru: "Статистика WakaTime",
+    "uk-ua": "Статистика WakaTime",
+    id: "Status WakaTime",
+    ml: "വാകടൈം സ്ഥിതിവിവരക്കണക്കുകൾ",
+    my: "WakaTime အချက်အလက်များ",
+    ta: `WakaTime புள்ளிவிவரங்கள்`,
+    sk: "WakaTime štatistika",
+    tr: "WakaTime İstatistikler",
+    pl: "Statystyki WakaTime",
+    uz: "WakaTime statistikasi",
+    vi: "Thống Kê WakaTime",
+    se: "WakaTime statistik",
+    he: "סטטיסטיקות WakaTime",
+    fil: "Mga Estadistika ng WakaTime",
+    th: "สถิติ WakaTime",
+    sr: "WakaTime статистика",
+    "sr-latn": "WakaTime statistika",
+    no: "WakaTime-statistikk",
+  },
+  "wakatimecard.lastyear": {
+    en: "last year",
+    ar: "العام الماضي",
+    az: "Ötən il",
+    ca: "L'any passat",
+    cn: "去年",
+    "zh-tw": "去年",
+    cs: "Minulý rok",
+    de: "Letztes Jahr",
+    sw: "Mwaka uliopita",
+    ur: "پچھلا سال",
+    bg: "миналата год.",
+    bn: "গত বছর",
+    es: "El año pasado",
+    fa: "سال گذشته",
+    fi: "Viime vuosi",
+    fr: "L'année dernière",
+    hi: "पिछले साल",
+    sa: "गतवर्षे",
+    hu: "Tavaly",
+    it: "L'anno scorso",
+    ja: "昨年",
+    kr: "작년",
+    nl: "Vorig jaar",
+    "pt-pt": "Ano passado",
+    "pt-br": "Ano passado",
+    np: "गत वर्ष",
+    el: "Πέρυσι",
+    ro: "Anul trecut",
+    ru: "За прошлый год",
+    "uk-ua": "За минулий рік",
+    id: "Tahun lalu",
+    ml: "കഴിഞ്ഞ വർഷം",
+    my: "မနှစ်က",
+    ta: `கடந்த ஆண்டு`,
+    sk: "Minulý rok",
+    tr: "Geçen yıl",
+    pl: "W zeszłym roku",
+    uz: "O'tgan yil",
+    vi: "Năm ngoái",
+    se: "Förra året",
+    he: "שנה שעברה",
+    fil: "Nakaraang Taon",
+    th: "ปีที่แล้ว",
+    sr: "Прошла год.",
+    "sr-latn": "Prošla god.",
+    no: "I fjor",
+  },
+  "wakatimecard.last7days": {
+    en: "last 7 days",
+    ar: "آخر 7 أيام",
+    az: "Son 7 gün",
+    ca: "Ultims 7 dies",
+    cn: "最近 7 天",
+    "zh-tw": "最近 7 天",
+    cs: "Posledních 7 dní",
+    de: "Letzte 7 Tage",
+    sw: "Siku 7 zilizopita",
+    ur: "پچھلے 7 دن",
+    bg: "последните 7 дни",
+    bn: "গত ৭ দিন",
+    es: "Últimos 7 días",
+    fa: "هفت روز گذشته",
+    fi: "Viimeiset 7 päivää",
+    fr: "7 derniers jours",
+    hi: "पिछले 7 दिन",
+    sa: "विगतसप्तदिनेषु",
+    hu: "Elmúlt 7 nap",
+    it: "Ultimi 7 giorni",
+    ja: "過去 7 日間",
+    kr: "지난 7 일",
+    nl: "Afgelopen 7 dagen",
+    "pt-pt": "Últimos 7 dias",
+    "pt-br": "Últimos 7 dias",
+    np: "गत ७ दिन",
+    el: "Τελευταίες 7 ημέρες",
+    ro: "Ultimele 7 zile",
+    ru: "Последние 7 дней",
+    "uk-ua": "Останні 7 днів",
+    id: "7 hari terakhir",
+    ml: "കഴിഞ്ഞ 7 ദിവസം",
+    my: "7 ရက်အတွင်း",
+    ta: `கடந்த 7 நாட்கள்`,
+    sk: "Posledných 7 dní",
+    tr: "Son 7 gün",
+    pl: "Ostatnie 7 dni",
+    uz: "O'tgan 7 kun",
+    vi: "7 ngày qua",
+    se: "Senaste 7 dagarna",
+    he: "ב־7 הימים האחרונים",
+    fil: "Huling 7 Araw",
+    th: "7 วันที่ผ่านมา",
+    sr: "Претходних 7 дана",
+    "sr-latn": "Prethodnih 7 dana",
+    no: "Siste 7 dager",
+  },
+  "wakatimecard.notpublic": {
+    en: "WakaTime user profile not public",
+    ar: "ملف مستخدم واكا تايم شخصي",
+    az: "WakaTime istifadəçi profili ictimai deyil",
+    ca: "Perfil d'usuari de WakaTime no públic",
+    cn: "WakaTime 用户个人资料未公开",
+    "zh-tw": "WakaTime 使用者個人資料未公開",
+    cs: "Profil uživatele WakaTime není veřejný",
+    de: "WakaTime-Benutzerprofil nicht öffentlich",
+    sw: "Maelezo ya mtumizi wa WakaTime si ya watu wote(umma)",
+    ur: "وکاٹائم صارف کا پروفائل عوامی نہیں",
+    bg: "Потребителски профил в WakaTime не е общодостъпен",
+    bn: "WakaTime ব্যবহারকারীর প্রোফাইল প্রকাশ্য নয়",
+    es: "Perfil de usuario de WakaTime no público",
+    fa: "پروفایل کاربری WakaTime عمومی نیست",
+    fi: "WakaTime-käyttäjäprofiili ei ole julkinen",
+    fr: "Profil utilisateur WakaTime non public",
+    hi: "WakaTime उपयोगकर्ता प्रोफ़ाइल सार्वजनिक नहीं है",
+    sa: "WakaTime उपयोगकर्ता-प्रोफ़ाइल सार्वजनिकं नास्ति",
+    hu: "A WakaTime felhasználói profilja nem nyilvános",
+    it: "Profilo utente WakaTime non pubblico",
+    ja: "WakaTime ユーザープロファイルは公開されていません",
+    kr: "WakaTime 사용자 프로필이 공개되지 않았습니다",
+    nl: "WakaTime gebruikersprofiel niet openbaar",
+    "pt-pt": "Perfil de utilizador WakaTime não público",
+    "pt-br": "Perfil de usuário WakaTime não público",
+    np: "WakaTime प्रयोगकर्ता प्रोफाइल सार्वजनिक छैन",
+    el: "Το προφίλ χρήστη WakaTime δεν είναι δημόσιο",
+    ro: "Profilul utilizatorului de Wakatime nu este public",
+    ru: "Профиль пользователя WakaTime не общедоступный",
+    "uk-ua": "Профіль користувача WakaTime не публічний",
+    id: "Profil pengguna WakaTime tidak publik",
+    ml: "WakaTime ഉപയോക്തൃ പ്രൊഫൈൽ പൊതുവായി പ്രസിദ്ധീകരിക്കപ്പെടാത്തതാണ്",
+    my: "Public Profile မဟုတ်ပါ။",
+    ta: `WakaTime பயனர் சுயவிவரம் பொதுவில் இல்லை.`,
+    sk: "Profil používateľa WakaTime nie je verejný",
+    tr: "WakaTime kullanıcı profili herkese açık değil",
+    pl: "Profil użytkownika WakaTime nie jest publiczny",
+    uz: "WakaTime foydalanuvchi profili ochiq emas",
+    vi: "Hồ sơ người dùng WakaTime không công khai",
+    se: "WakaTime användarprofil inte offentlig",
+    he: "פרופיל משתמש WakaTime לא פומבי",
+    fil: "Hindi pampubliko ang profile ng gumagamit ng WakaTime",
+    th: "โปรไฟล์ผู้ใช้ WakaTime ไม่ได้เป็นสาธารณะ",
+    sr: "WakaTime профил корисника није јаван",
+    "sr-latn": "WakaTime profil korisnika nije javan",
+    no: "WakaTime brukerprofil ikke offentlig",
+  },
+  "wakatimecard.nocodedetails": {
+    en: "User doesn't publicly share detailed code statistics",
+    ar: "المستخدم لا يشارك المعلومات التفصيلية",
+    az: "İstifadəçi kod statistikalarını ictimai şəkildə paylaşmır",
+    ca: "L'usuari no comparteix dades públiques del seu codi",
+    cn: "用户不公开分享详细的代码统计信息",
+    "zh-tw": "使用者不公開分享詳細的程式碼統計資訊",
+    cs: "Uživatel nesdílí podrobné statistiky kódu",
+    de: "Benutzer teilt keine detaillierten Code-Statistiken",
+    sw: "Mtumizi hagawi kila kitu au takwimu na umma",
+    ur: "صارف عوامی طور پر تفصیلی کوڈ کے اعداد و شمار شیئر نہیں کرتا",
+    bg: "Потребителят не споделя подробна статистика за код",
+    bn: "ব্যবহারকারী বিস্তারিত কোড পরিসংখ্যান প্রকাশ করেন না",
+    es: "El usuario no comparte públicamente estadísticas detalladas de código",
+    fa: "کاربر آمار کد تفصیلی را به‌صورت عمومی به اشتراک نمی‌گذارد",
+    fi: "Käyttäjä ei jaa julkisesti tarkkoja kooditilastoja",
+    fr: "L'utilisateur ne partage pas publiquement de statistiques de code détaillées",
+    hi: "उपयोगकर्ता विस्तृत कोड आँकड़े सार्वजनिक रूप से साझा नहीं करता है",
+    sa: "उपयोगकर्ता विस्तृत-कोड-सांख्यिकीं सार्वजनिकरूपेण न दर्शयति",
+    hu: "A felhasználó nem osztja meg nyilvánosan a részletes kódstatisztikákat",
+    it: "L'utente non condivide pubblicamente statistiche dettagliate sul codice",
+    ja: "ユーザーは詳細なコード統計を公開しません",
+    kr: "사용자는 자세한 코드 통계를 공개하지 않습니다",
+    nl: "Gebruiker deelt geen gedetailleerde code-statistieken",
+    "pt-pt":
+      "O utilizador não partilha publicamente estatísticas detalhadas de código",
+    "pt-br":
+      "O usuário não compartilha publicamente estatísticas detalhadas de código",
+    np: "प्रयोगकर्ता सार्वजनिक रूपमा विस्तृत कोड तथ्याङ्क स���झा गर्दैन",
+    el: "Ο χρήστης δεν δημοσιεύει δημόσια λεπτομερείς στατιστικές κώδικα",
+    ro: "Utilizatorul nu își publică statisticile detaliate ale codului",
+    ru: "Пользователь не делится подробной статистикой кода",
+    "uk-ua": "Користувач не публікує детальну статистику коду",
+    id: "Pengguna tidak membagikan statistik kode terperinci secara publik",
+    ml: "ഉപയോക്താവ് പൊതുവായി വിശദീകരിച്ച കോഡ് സ്റ്റാറ്റിസ്റ്റിക്സ് പങ്കിടുന്നില്ല",
+    my: "အသုံးပြုသူသည် အသေးစိတ် ကုဒ် စာရင်းအင်းများကို အများသို့ မမျှဝေပါ။",
+    ta: `பயனர் விரிவான குறியீட்டு புள்ளிவிவரங்களைப் பொதுவில் பகிர்வதில்லை.`,
+    sk: "Používateľ neposkytuje verejne podrobné štatistiky kódu",
+    tr: "Kullanıcı ayrıntılı kod istatistiklerini herkese açık olarak paylaşmıyor",
+    pl: "Użytkownik nie udostępnia publicznie szczegółowych statystyk kodu",
+    uz: "Foydalanuvchi umumiy ko`d statistikasini ochiq ravishda almashmaydi",
+    vi: "Người dùng không chia sẻ thống kê mã chi tiết công khai",
+    se: "Användaren delar inte offentligt detaljerad kodstatistik",
+    he: "משתמש לא מפרסם פומבית סטטיסטיקות קוד מפורטות",
+    fil: "Hindi ibinabahagi ng gumagamit ang detalyadong estadistika ng code nang pampubliko",
+    th: "ผู้ใช้ไม่ได้แชร์สถิติโค้ดแบบสาธารณะ",
+    sr: "Корисник не дели јавно детаљну статистику кода",
+    "sr-latn": "Korisnik ne deli javno detaljnu statistiku koda",
+    no: "Brukeren deler ikke detaljert kodestatistikk offentlig",
+  },
+  "wakatimecard.nocodingactivity": {
+    en: "No coding activity this week",
+    ar: "لا يوجد نشاط برمجي لهذا الأسبوع",
+    az: "Bu həftə heç bir kodlaşdırma fəaliyyəti olmayıb",
+    ca: "No hi ha activitat de codificació aquesta setmana",
+    cn: "本周没有编程活动",
+    "zh-tw": "本周沒有編程活動",
+    cs: "Tento týden žádná aktivita v kódování",
+    de: "Keine Aktivitäten in dieser Woche",
+    sw: "Hakuna matukio yoyote ya kusimba wiki hii",
+    ur: "اس ہفتے کوئی کوڈنگ سرگرمی نہیں",
+    bg: "Няма активност при кодирането тази седмица",
+    bn: "এই সপ্তাহে কোন কোডিং অ্যাক্টিভিটি নেই",
+    es: "No hay actividad de codificación esta semana",
+    fa: "فعالیت کدنویسی در این هفته وجود ندارد",
+    fi: "Ei koodaustoimintaa tällä viikolla",
+    fr: "Aucune activité de codage cette semaine",
+    hi: "इस सप्ताह कोई कोडिंग गतिविधि नहीं ",
+    sa: "अस्मिन् सप्ताहे कोडिङ्-कार्यं नास्ति",
+    hu: "Nem volt aktivitás ezen a héten",
+    it: "Nessuna attività in questa settimana",
+    ja: "今週のコーディング活動はありません",
+    kr: "이번 주 작업내역 없음",
+    nl: "Geen programmeeractiviteit deze week",
+    "pt-pt": "Sem atividade esta semana",
+    "pt-br": "Nenhuma atividade de codificação esta semana",
+    np: "यस हप्ता कुनै कोडिंग गतिविधि छैन",
+    el: "Δεν υπάρχει δραστηριότητα κώδικα γι' αυτή την εβδομάδα",
+    ro: "Nicio activitate de programare săptămâna aceasta",
+    ru: "На этой неделе не было активности",
+    "uk-ua": "Цього тижня не було активності",
+    id: "Tidak ada aktivitas perkodingan minggu ini",
+    ml: "ഈ ആഴ്ച കോഡിംഗ് പ്രവർത്തനങ്ങളൊന്നുമില്ല",
+    my: "ဒီအပတ်မှာ ကုဒ်ရေးခြင်း မရှိပါ။",
+    ta: `இந்த வாரம் குறியீட்டு செயல்பாடு இல்லை.`,
+    sk: "Žiadna kódovacia aktivita tento týždeň",
+    tr: "Bu hafta herhangi bir kod yazma aktivitesi olmadı",
+    pl: "Brak aktywności w tym tygodniu",
+    uz: "Bu hafta faol bo'lmadi",
+    vi: "Không Có Hoạt Động Trong Tuần Này",
+    se: "Ingen aktivitet denna vecka",
+    he: "אין פעילות תכנותית השבוע",
+    fil: "Walang aktibidad sa pag-code ngayong linggo",
+    th: "ไม่มีกิจกรรมการเขียนโค้ดในสัปดาห์นี้",
+    sr: "Током ове недеље није било никаквих активности",
+    "sr-latn": "Tokom ove nedelje nije bilo nikakvih aktivnosti",
+    no: "Ingen kodeaktivitet denne uken",
+  },
+};
+
+const availableLocales = Object.keys(repoCardLocales["repocard.archived"]);
+
+/**
+ * Checks whether the locale is available or not.
+ *
+ * @param {string} locale The locale to check.
+ * @returns {boolean} Boolean specifying whether the locale is available or not.
+ */
+const isLocaleAvailable = (locale) => {
+  return availableLocales.includes(locale.toLowerCase());
+};
+
+export {
+  availableLocales,
+  isLocaleAvailable,
+  langCardLocales,
+  repoCardLocales,
+  statCardLocales,
+  wakatimeCardLocales,
+};