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

This PR mainly refactors the code by extracting a "core" package which is then used by the "backend" and "frontend" apps. Apart from this the PR also contains several smaller changes like fixing dependabot, upgrading dependencies, aligned "package.json" files, added tests, ... addresses step 1 of #32 closes #136 --------- Co-authored-by: Marco Pasqualetti <marco.pasqualetti@live.com>
2026-04-18 10:37:26 +02:00
parent 19c39f02af
commit d476f8cbe1
159 changed files with 6515 additions and 4424 deletions
@@ -7,7 +7,8 @@ To set up the project GitHub-Stats-Extended locally, run the following commands:
 ```bash
 ./vercel-preparation.sh
 pnpm install
-pnpm --filter frontend run build
+pnpm run build:packages
+pnpm run dev:frontend
 ```

 The easiest way to run and test the project is to deploy it to Vercel as described in the [deployment guide](../docs/deploy.md).
@@ -14,11 +14,11 @@ runs:

  steps:
    - name: Install pnpm
-      uses: pnpm/action-setup@v4
+      uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5

    - name: Setup Node.js (via input)
      if: ${{ inputs.node-version }}
-      uses: actions/setup-node@v6
+      uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
      with:
        node-version: ${{ inputs.node-version }}
        cache: "pnpm"
@@ -26,7 +26,7 @@ runs:

    - name: Setup Node.js (via .nvmrc)
      if: ${{ !inputs.node-version }}
-      uses: actions/setup-node@v6
+      uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
      with:
        node-version-file: ".nvmrc"
        cache: "pnpm"
@@ -4,9 +4,8 @@ updates:
  - package-ecosystem: npm
    directory: "/"
    schedule:
-      interval: cron
-      cronjob: every day at 5am
-    open-pull-requests-limit: 10
+      interval: daily
+    open-pull-requests-limit: 20
    commit-message:
      prefix: "build(deps)"
      prefix-development: "build(deps-dev)"
@@ -20,9 +19,8 @@ updates:
  - package-ecosystem: github-actions
    directory: "/"
    schedule:
-      interval: cron
-      cronjob: every day at 5am
-    open-pull-requests-limit: 10
+      interval: daily
+    open-pull-requests-limit: 20
    commit-message:
      prefix: "ci(deps)"
      prefix-development: "ci(deps-dev)"
@@ -33,9 +31,8 @@ updates:
  - package-ecosystem: devcontainers
    directory: "/"
    schedule:
-      interval: cron
-      cronjob: every day at 5am
-    open-pull-requests-limit: 10
+      interval: daily
+    open-pull-requests-limit: 20
    commit-message:
      prefix: "build(deps)"
      prefix-development: "build(deps-dev)"
@@ -31,7 +31,7 @@ jobs:

    steps:
      - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2

      - name: Run vercel-preparation.sh
        run: |
@@ -43,14 +43,14 @@ jobs:
        with:
          node-version: ${{ matrix.node }}

+      - name: Build packages
+        run: pnpm run build:packages
+
      - name: Build frontend
-        run: pnpm --filter frontend run build
+        run: pnpm run build:frontend

-      - name: Run frontend tests
-        run: pnpm --filter frontend run test
-
-      - name: Run backend tests
-        run: pnpm --filter github-readme-stats run test
+      - name: Run tests
+        run: pnpm run test --silent

  frontend-test-e2e:
    name: Frontend E2E test
@@ -64,21 +64,42 @@ jobs:

    steps:
      - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2

      - name: Install Dependencies
        uses: ./.github/actions/install-dependencies

-      - name: Run vercel-preparation.sh
-        run: |
-          chmod +x ./vercel-preparation.sh
-          ./vercel-preparation.sh
+      - name: Build packages
+        run: pnpm run build:packages

      - name: Install Playwright Browsers
        run: pnpm exec playwright install --with-deps

      - name: Run Playwright tests
-        run: pnpm --filter frontend run test:e2e
+        run: pnpm --filter ./apps/frontend/ run test:e2e
+
+  backend-test-e2e:
+    name: Backend E2E test
+
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+
+    continue-on-error: true
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Install Dependencies
+        uses: ./.github/actions/install-dependencies
+
+      - name: Build packages
+        run: pnpm run build:packages
+
+      - name: Run backend end-to-end tests
+        run: pnpm --filter ./apps/backend/ run test:e2e

  code-checks:
    name: Code checks
@@ -90,17 +111,7 @@ jobs:

    steps:
      - name: Checkout code
-        uses: actions/checkout@v6
-
-      # Heads up!
-      #
-      # 1. Execution of this script is needed to resolve `.vercel` folder from `apps/frontend/src/components/Card/SVG.js`
-      # 2. This scripts removes `apps/backend/node_modules` breaking ESLint’s module resolution.
-      #    Dependency installation must occur after running ./vercel-preparation.sh.
-      - name: Run vercel-preparation.sh
-        run: |
-          chmod +x ./vercel-preparation.sh
-          ./vercel-preparation.sh
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2

      - name: Install Dependencies
        uses: ./.github/actions/install-dependencies
@@ -4,7 +4,7 @@ on:
    branches:
      - master
    paths:
-      - "apps/backend/themes/index.js"
+      - "packages/core/src/themes/index.js"
  workflow_dispatch:

 permissions: {}
@@ -30,17 +30,17 @@ jobs:

    steps:
      - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2

      - name: Install Dependencies
        uses: ./.github/actions/install-dependencies

      - name: Generate readme
        run: |
-          pnpm --filter github-readme-stats run theme-readme-gen
+          pnpm --filter ./packages/core/ run theme-readme-gen

      - name: Create Pull Request if themes README has changed
-        uses: peter-evans/create-pull-request@v8
+        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8
        with:
          commit-message: "feat(backend): update themes README"
          branch: "update_themes_readme/patch"
@@ -0,0 +1,18 @@
+name: Update version tags
+on:
+  push:
+    branches-ignore:
+      - "**"
+    tags:
+      - "v*.*.*"
+
+permissions: {}
+
+jobs:
+  update-semver:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: haya14busa/action-update-semver@7d2c558640ea49e798d46539536190aff8c18715 # v1.5.1
@@ -20,7 +20,7 @@ jobs:
    steps:
      - name: Make Request
        id: myRequest
-        uses: fjogeleit/http-request-action@v2
+        uses: fjogeleit/http-request-action@551353b829c3646756b2ec2b3694f819d7957495 # v2
        with:
          url: "https://github-stats-extended.vercel.app/api/repeat-recent"
          method: "POST"
@@ -38,16 +38,16 @@ jobs:

    steps:
      - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2

      - name: Install Dependencies
        uses: ./.github/actions/install-dependencies

      - name: Run update-languages-json.js script
-        run: pnpm --filter github-readme-stats run generate-langs-json
+        run: pnpm --filter ./packages/core/ run generate-langs-json

      - name: Create Pull Request if upstream language file is changed
-        uses: peter-evans/create-pull-request@v8
+        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8
        with:
          commit-message: "feat(backend): update languages JSON"
          branch: "update_langs/patch"
@@ -1,18 +1,8 @@
 node_modules

-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
 # OS
 .DS_Store

-# Logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 # Project
 coverage

@@ -26,11 +16,12 @@ apps/backend/vercel_token
 apps/backend-copy

 apps/frontend/.env
-apps/frontend/src/backend
-apps/frontend/build

+
+.turbo
+build
 build-ts
-tsconfig.tsbuildinfo
+*.tsbuildinfo

 # IDE
 .idea/
@@ -1,4 +1,3 @@
 pnpm lint-staged
 pnpm run lint
-# TODO enable
-# npm test
+pnpm test
@@ -1,76 +0,0 @@
-/* eslint-disable import-x/no-unresolved */
-import { default as authenticate } from "./api-renamed/authenticate.js";
-import { default as deleteUser } from "./api-renamed/delete-user.js";
-import { default as downgrade } from "./api-renamed/downgrade.js";
-import { default as gist } from "./api-renamed/gist.js";
-import { default as api } from "./api-renamed/index.js";
-import { default as pin } from "./api-renamed/pin.js";
-import { default as repeatRecent } from "./api-renamed/repeat-recent.js";
-import { default as patInfo } from "./api-renamed/status/pat-info.js";
-import { default as statusUp } from "./api-renamed/status/up.js";
-import { default as topLangs } from "./api-renamed/top-langs.js";
-import { default as userAccess } from "./api-renamed/user-access.js";
-import { default as wakatimeProxy } from "./api-renamed/wakatime-proxy.js";
-import { default as wakatime } from "./api-renamed/wakatime.js";
-
-export default async (req, res) => {
-  // remaining code expects express.js-like request and response objects
-  res.send = function (data) {
-    if (typeof data === "object") {
-      res.setHeader("Content-Type", "application/json");
-      res.end(JSON.stringify(data));
-    } else if (typeof data === "string") {
-      res.end(data);
-    } else {
-      res.end(String(data));
-    }
-  };
-  const url = new URL(req.url, "https://localhost");
-  req.query = Object.fromEntries(url.searchParams.entries());
-
-  switch (url.pathname) {
-    case "/api":
-      await api(req, res);
-      break;
-    case "/api/gist":
-      await gist(req, res);
-      break;
-    case "/api/pin":
-      await pin(req, res);
-      break;
-    case "/api/top-langs":
-      await topLangs(req, res);
-      break;
-    case "/api/wakatime":
-      await wakatime(req, res);
-      break;
-    case "/api/wakatime-proxy":
-      await wakatimeProxy(req, res);
-      break;
-    case "/api/repeat-recent":
-      await repeatRecent(req, res);
-      break;
-    case "/api/status/pat-info":
-      await patInfo(req, res);
-      break;
-    case "/api/status/up":
-      await statusUp(req, res);
-      break;
-    case "/api/authenticate":
-      await authenticate(req, res);
-      break;
-    case "/api/delete-user":
-      await deleteUser(req, res);
-      break;
-    case "/api/user-access":
-      await userAccess(req, res);
-      break;
-    case "/api/downgrade":
-      await downgrade(req, res);
-      break;
-    default:
-      res.statusCode = 404;
-      res.end("Not Found");
-      break;
-  }
-};
@@ -1,4 +1,5 @@
-import { logger } from "../src/common/log.js";
+import { logger } from "@stats-organization/github-readme-stats-core";
+
 import { authenticate } from "../src/users.js";

 /**
@@ -1,5 +1,6 @@
+import { logger } from "@stats-organization/github-readme-stats-core";
+
 import { deleteUser } from "../src/common/database.js";
-import { logger } from "../src/common/log.js";

 /**
 * @param {any} req The request.
@@ -1,7 +1,7 @@
+import { logger } from "@stats-organization/github-readme-stats-core";
 import axios from "axios";

 import { deleteUser, getUserAccessByKey } from "../src/common/database.js";
-import { logger } from "../src/common/log.js";

 export default async (req, res) => {
  // We could optimize this method by doing both database operations in one statement, using "DELETE ... RETURNING ..."
@@ -1,129 +0,0 @@
-// @ts-check
-
-import { renderGistCard } from "../src/cards/gist.js";
-import { guardAccess } from "../src/common/access.js";
-import {
-  CACHE_TTL,
-  resolveCacheSeconds,
-  setCacheHeaders,
-  setErrorCacheHeaders,
-} from "../src/common/cache.js";
-import { storeRequest } from "../src/common/database.js";
-import {
-  MissingParamError,
-  retrieveSecondaryMessage,
-} from "../src/common/error.js";
-import { parseBoolean } from "../src/common/ops.js";
-import { renderError } from "../src/common/render.js";
-import { fetchGist } from "../src/fetchers/gist.js";
-import { isLocaleAvailable } from "../src/translations.js";
-
-// @ts-ignore
-export default async (req, res) => {
-  const {
-    id,
-    title_color,
-    icon_color,
-    text_color,
-    bg_color,
-    theme,
-    cache_seconds,
-    locale,
-    border_radius,
-    border_color,
-    show_owner,
-    hide_border,
-  } = req.query;
-
-  res.setHeader("Content-Type", "image/svg+xml");
-
-  const access = guardAccess({
-    res,
-    id,
-    type: "gist",
-    colors: {
-      title_color,
-      text_color,
-      bg_color,
-      border_color,
-      theme,
-    },
-  });
-  if (!access.isPassed) {
-    return access.result;
-  }
-
-  if (locale && !isLocaleAvailable(locale)) {
-    return res.send(
-      renderError({
-        message: "Something went wrong",
-        secondaryMessage: "Language not found",
-        renderOptions: {
-          title_color,
-          text_color,
-          bg_color,
-          border_color,
-          theme,
-        },
-      }),
-    );
-  }
-
-  try {
-    await storeRequest(req);
-    const gistData = await fetchGist(id);
-    const cacheSeconds = resolveCacheSeconds({
-      requested: parseInt(cache_seconds, 10),
-      def: CACHE_TTL.GIST_CARD.DEFAULT,
-      min: CACHE_TTL.GIST_CARD.MIN,
-      max: CACHE_TTL.GIST_CARD.MAX,
-    });
-
-    setCacheHeaders(res, cacheSeconds);
-
-    return res.send(
-      renderGistCard(gistData, {
-        title_color,
-        icon_color,
-        text_color,
-        bg_color,
-        theme,
-        border_radius,
-        border_color,
-        locale: locale ? locale.toLowerCase() : null,
-        show_owner: parseBoolean(show_owner),
-        hide_border: parseBoolean(hide_border),
-      }),
-    );
-  } catch (err) {
-    setErrorCacheHeaders(res);
-    if (err instanceof Error) {
-      return res.send(
-        renderError({
-          message: err.message,
-          secondaryMessage: retrieveSecondaryMessage(err),
-          renderOptions: {
-            title_color,
-            text_color,
-            bg_color,
-            border_color,
-            theme,
-            show_repo_link: !(err instanceof MissingParamError),
-          },
-        }),
-      );
-    }
-    return res.send(
-      renderError({
-        message: "An unknown error occurred",
-        renderOptions: {
-          title_color,
-          text_color,
-          bg_color,
-          border_color,
-          theme,
-        },
-      }),
-    );
-  }
-};
@@ -6,10 +6,12 @@
 *
 * @description This function is currently rate limited to 1 request per 3 minutes.
 */
-
-import { request } from "../../src/common/http.js";
-import { logger } from "../../src/common/log.js";
-import { dateDiff } from "../../src/common/ops.js";
+import {
+  dateDiff,
+  getConfig,
+  logger,
+  request,
+} from "@stats-organization/github-readme-stats-core";

 export const RATE_LIMIT_SECONDS = 60 * 3; // 1 request per 3 minutes

@@ -39,7 +41,7 @@ const uptimeFetcher = (variables, token) => {
 };

 const getAllPATs = () => {
-  return Object.keys(process.env).filter((key) => /PAT_\d*$/.exec(key));
+  return getConfig().pats;
 };

 /**
@@ -61,7 +63,7 @@ const getPATInfo = async (fetcher, variables) => {

  for (const pat of PATs) {
    try {
-      const response = await fetcher(variables, process.env[pat]);
+      const response = await fetcher(variables, pat.value);
      const errors = response.data.errors;
      const hasErrors = Boolean(errors);
      const errorType = errors?.[0]?.type;
@@ -71,7 +73,7 @@ const getPATInfo = async (fetcher, variables) => {

      // Store PATs with errors.
      if (hasErrors && errorType !== "RATE_LIMITED") {
-        details[pat] = {
+        details[pat.name] = {
          status: "error",
          error: {
            type: errors[0].type,
@@ -82,13 +84,13 @@ const getPATInfo = async (fetcher, variables) => {
      } else if (isRateLimited) {
        const date1 = new Date();
        const date2 = new Date(response.data?.data?.rateLimit?.resetAt);
-        details[pat] = {
+        details[pat.name] = {
          status: "exhausted",
          remaining: 0,
          resetIn: dateDiff(date2, date1) + " minutes",
        };
      } else {
-        details[pat] = {
+        details[pat.name] = {
          status: "valid",
          remaining: response.data.data.rateLimit.remaining,
        };
@@ -97,11 +99,11 @@ const getPATInfo = async (fetcher, variables) => {
      // Store the PAT if it is expired.
      const errorMessage = err.response?.data?.message?.toLowerCase();
      if (errorMessage === "bad credentials") {
-        details[pat] = {
+        details[pat.name] = {
          status: "expired",
        };
      } else if (errorMessage === "sorry. your account was suspended.") {
-        details[pat] = {
+        details[pat.name] = {
          status: "suspended",
        };
      } else {
@@ -7,9 +7,11 @@
 * @description This function is currently rate limited to 1 request per 3 minutes.
 */

-import { request } from "../../src/common/http.js";
-import { logger } from "../../src/common/log.js";
-import { default as retryer } from "../../src/common/retryer.js";
+import {
+  logger,
+  request,
+  retryer,
+} from "@stats-organization/github-readme-stats-core";

 export const RATE_LIMIT_SECONDS = 60 * 3; // 1 request per 3 minutes

@@ -87,7 +89,7 @@ export default async (req, res) => {
  try {
    let PATsValid = true;
    try {
-      await retryer(uptimeFetcher, null, {});
+      await retryer(uptimeFetcher, {});
    } catch (err) {
      // Resolve eslint no-unused-vars
      err;
@@ -1,5 +1,6 @@
+import { logger } from "@stats-organization/github-readme-stats-core";
+
 import { getUserAccessByKey } from "../src/common/database.js";
-import { logger } from "../src/common/log.js";

 /**
 * @param {any} req The request.
@@ -1,5 +1,7 @@
-import { logger } from "../src/common/log.js";
-import { fetchWakatimeStats } from "../src/fetchers/wakatime.js";
+import {
+  fetchWakatimeStats,
+  logger,
+} from "@stats-organization/github-readme-stats-core";

 /**
 * @param {any} req The request.
@@ -1,148 +0,0 @@
-// @ts-check
-
-import { renderWakatimeCard } from "../src/cards/wakatime.js";
-import { guardAccess } from "../src/common/access.js";
-import {
-  CACHE_TTL,
-  resolveCacheSeconds,
-  setCacheHeaders,
-  setErrorCacheHeaders,
-} from "../src/common/cache.js";
-import { storeRequest } from "../src/common/database.js";
-import {
-  MissingParamError,
-  retrieveSecondaryMessage,
-} from "../src/common/error.js";
-import { parseArray, parseBoolean } from "../src/common/ops.js";
-import { renderError } from "../src/common/render.js";
-import { fetchWakatimeStats } from "../src/fetchers/wakatime.js";
-import { isLocaleAvailable } from "../src/translations.js";
-
-// @ts-ignore
-export default async (req, res) => {
-  const {
-    username,
-    title_color,
-    icon_color,
-    hide_border,
-    card_width,
-    line_height,
-    text_color,
-    bg_color,
-    theme,
-    cache_seconds,
-    hide_title,
-    hide_progress,
-    custom_title,
-    locale,
-    layout,
-    langs_count,
-    hide,
-    api_domain,
-    border_radius,
-    border_color,
-    display_format,
-    disable_animations,
-  } = req.query;
-
-  res.setHeader("Content-Type", "image/svg+xml");
-
-  const access = guardAccess({
-    res,
-    id: username,
-    type: "wakatime",
-    colors: {
-      title_color,
-      text_color,
-      bg_color,
-      border_color,
-      theme,
-    },
-  });
-  if (!access.isPassed) {
-    return access.result;
-  }
-
-  if (locale && !isLocaleAvailable(locale)) {
-    return res.send(
-      renderError({
-        message: "Something went wrong",
-        secondaryMessage: "Language not found",
-        renderOptions: {
-          title_color,
-          text_color,
-          bg_color,
-          border_color,
-          theme,
-        },
-      }),
-    );
-  }
-
-  try {
-    await storeRequest(req);
-    const stats = await fetchWakatimeStats({ username, api_domain });
-    const cacheSeconds = resolveCacheSeconds({
-      requested: parseInt(cache_seconds, 10),
-      def: CACHE_TTL.WAKATIME_CARD.DEFAULT,
-      min: CACHE_TTL.WAKATIME_CARD.MIN,
-      max: CACHE_TTL.WAKATIME_CARD.MAX,
-    });
-
-    setCacheHeaders(res, cacheSeconds);
-
-    return res.send(
-      renderWakatimeCard(stats, {
-        custom_title,
-        hide_title: parseBoolean(hide_title),
-        hide_border: parseBoolean(hide_border),
-        card_width: parseInt(card_width, 10),
-        hide: parseArray(hide),
-        line_height,
-        title_color,
-        icon_color,
-        text_color,
-        bg_color,
-        theme,
-        hide_progress,
-        border_radius,
-        border_color,
-        locale: locale ? locale.toLowerCase() : null,
-        layout,
-        langs_count,
-        display_format,
-        disable_animations: parseBoolean(disable_animations),
-      }),
-    );
-  } catch (err) {
-    setErrorCacheHeaders(res);
-    if (err instanceof Error) {
-      return res.send(
-        renderError({
-          message: err.message,
-          secondaryMessage: retrieveSecondaryMessage(err),
-          renderOptions: {
-            title_color,
-            text_color,
-            bg_color,
-            border_color,
-            theme,
-            show_repo_link: !(err instanceof MissingParamError),
-          },
-        }),
-      );
-    }
-    return res.send(
-      renderError({
-        message: "An unknown error occurred",
-        renderOptions: {
-          title_color,
-          text_color,
-          bg_color,
-          border_color,
-          theme,
-        },
-      }),
-    );
-  }
-};
@@ -1,21 +1,10 @@
 import express from "express";

-import gistCard from "./api-renamed/gist.js";
-import statsCard from "./api-renamed/index.js";
-import repoCard from "./api-renamed/pin.js";
-import langCard from "./api-renamed/top-langs.js";
-import wakatimeCard from "./api-renamed/wakatime.js";
+import router from "./router.js";

 const app = express();
-const router = express.Router();

-router.get("/", statsCard);
-router.get("/pin", repoCard);
-router.get("/top-langs", langCard);
-router.get("/wakatime", wakatimeCard);
-router.get("/gist", gistCard);
-
-app.use("/api", router);
+app.use(router);

 const port = process.env.PORT || process.env.port || 9000;
 app.listen(port, "0.0.0.0", () => {
@@ -0,0 +1 @@
+export { default as router } from "./router.js";
@@ -1,52 +1,29 @@
 {
-  "name": "github-readme-stats",
-  "version": "1.0.0",
-  "description": "Dynamically generate stats for your GitHub readme",
-  "keywords": [
-    "github-readme-stats",
-    "readme-stats",
-    "cards",
-    "card-generator"
-  ],
-  "main": "src/index.js",
+  "name": "@stats-organization/github-readme-stats-backend",
  "type": "module",
-  "homepage": "https://github-stats-extended.vercel.app/frontend",
-  "bugs": {
-    "url": "https://github.com/stats-organization/github-stats-extended/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/stats-organization/github-stats-extended.git"
+  "license": "MIT",
+  "engines": {
+    "node": "24.x"
  },
+  "private": true,
+  "main": "index.js",
  "scripts": {
    "test": "vitest",
    "test:update:snapshot": "vitest -u",
    "test:e2e": "vitest --config vitest.config.e2e.ts",
-    "theme-readme-gen": "node scripts/generate-theme-doc",
-    "generate-langs-json": "node scripts/generate-langs-json",
-    "bench": "vitest bench --run --config vitest.config.bench.ts"
+    "bench": "vitest bench --run --config vitest.config.bench.ts",
+    "lint": "eslint",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
  },
-  "author": "Anurag Hazra",
-  "license": "MIT",
  "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@uppercod/css-to-object": "^1.1.1",
-    "@vitest/coverage-v8": "catalog:default",
-    "axios-mock-adapter": "^2.1.0",
-    "express": "^5.2.1",
-    "js-yaml": "^4.1.1",
+    "axios-mock-adapter": "2.1.0",
+    "express": "5.2.1",
    "jsdom": "28.1.0",
    "vitest": "catalog:default"
  },
  "dependencies": {
    "axios": "^1.13.5",
-    "emoji-name-map": "^2.0.3",
-    "github-username-regex": "^1.0.0",
-    "pg": "^8.18.0",
-    "word-wrap": "^1.2.5"
-  },
-  "engines": {
-    "node": "24.x"
+    "@stats-organization/github-readme-stats-core": "workspace:^",
+    "pg": "^8.18.0"
  }
 }
@@ -0,0 +1,225 @@
+import {
+  api,
+  gist,
+  pin,
+  topLangs,
+  wakatime,
+} from "@stats-organization/github-readme-stats-core";
+
+import { default as authenticate } from "./api-renamed/authenticate.js";
+import { default as deleteUser } from "./api-renamed/delete-user.js";
+import { default as downgrade } from "./api-renamed/downgrade.js";
+import { default as repeatRecent } from "./api-renamed/repeat-recent.js";
+import { default as patInfo } from "./api-renamed/status/pat-info.js";
+import { default as statusUp } from "./api-renamed/status/up.js";
+import { default as userAccess } from "./api-renamed/user-access.js";
+import { default as wakatimeProxy } from "./api-renamed/wakatime-proxy.js";
+import { guardAccess } from "./src/common/access.js";
+import {
+  CACHE_TTL,
+  resolveCacheSeconds,
+  setCacheHeaders,
+  setErrorCacheHeaders,
+} from "./src/common/cache.js";
+import { getUserAccessByName, storeRequest } from "./src/common/database.js";
+
+const getGuardResult = (query, type, id) => {
+  const access = guardAccess({
+    id,
+    type,
+    colors: {
+      title_color: query.title_color,
+      text_color: query.text_color,
+      bg_color: query.bg_color,
+      border_color: query.border_color,
+      theme: query.theme,
+    },
+  });
+
+  if (access.isPassed) {
+    return null;
+  }
+
+  return {
+    status: "error - permanent",
+    content: access.result,
+  };
+};
+
+const getUserPat = async (username) => {
+  if (!username) {
+    return null;
+  }
+
+  const userAccess = await getUserAccessByName(username);
+  if (!userAccess?.token) {
+    return null;
+  }
+
+  return userAccess.token;
+};
+
+export default async (req, res) => {
+  const url = new URL(req.url, "https://localhost");
+  if (res.send === undefined) {
+    // remaining code expects express.js-like request and response objects
+    res.send = function (data) {
+      if (typeof data === "object") {
+        res.setHeader("Content-Type", "application/json");
+        res.end(JSON.stringify(data));
+      } else if (typeof data === "string") {
+        res.end(data);
+      } else {
+        res.end(String(data));
+      }
+    };
+    req.query = Object.fromEntries(url.searchParams.entries());
+  }
+
+  let result;
+
+  switch (url.pathname) {
+    case "/api": {
+      result = getGuardResult(req.query, "username", req.query.username);
+      if (!result) {
+        const userPat = await getUserPat(req.query.username);
+        result = await api(req.query, userPat);
+      }
+      if (result.status === "error - temporary") {
+        setErrorCacheHeaders(res);
+      } else {
+        const cacheSeconds = resolveCacheSeconds({
+          requested: parseInt(req.query.cache_seconds, 10),
+          def: CACHE_TTL.STATS_CARD.DEFAULT,
+          min: CACHE_TTL.STATS_CARD.MIN,
+          max: CACHE_TTL.STATS_CARD.MAX,
+        });
+        setCacheHeaders(res, cacheSeconds);
+      }
+      res.setHeader("Content-Type", "image/svg+xml");
+      res.end(result.content);
+      if (result.status !== "error - permanent") {
+        await storeRequest(req);
+      }
+      break;
+    }
+    case "/api/gist":
+      result =
+        getGuardResult(req.query, "gist", req.query.id) ??
+        (await gist(req.query));
+      if (result.status === "error - temporary") {
+        setErrorCacheHeaders(res);
+      } else {
+        const cacheSeconds = resolveCacheSeconds({
+          requested: parseInt(req.query.cache_seconds, 10),
+          def: CACHE_TTL.GIST_CARD.DEFAULT,
+          min: CACHE_TTL.GIST_CARD.MIN,
+          max: CACHE_TTL.GIST_CARD.MAX,
+        });
+        setCacheHeaders(res, cacheSeconds);
+      }
+      res.setHeader("Content-Type", "image/svg+xml");
+      res.end(result.content);
+      if (result.status !== "error - permanent") {
+        await storeRequest(req);
+      }
+      break;
+    case "/api/pin": {
+      result = getGuardResult(req.query, "username", req.query.username);
+      if (!result) {
+        const userPat = await getUserPat(req.query.username);
+        result = await pin(req.query, userPat);
+      }
+      if (result.status === "error - temporary") {
+        setErrorCacheHeaders(res);
+      } else {
+        const cacheSeconds = resolveCacheSeconds({
+          requested: parseInt(req.query.cache_seconds, 10),
+          def: CACHE_TTL.PIN_CARD.DEFAULT,
+          min: CACHE_TTL.PIN_CARD.MIN,
+          max: CACHE_TTL.PIN_CARD.MAX,
+        });
+        setCacheHeaders(res, cacheSeconds);
+      }
+      res.setHeader("Content-Type", "image/svg+xml");
+      res.end(result.content);
+      if (result.status !== "error - permanent") {
+        await storeRequest(req);
+      }
+      break;
+    }
+    case "/api/top-langs": {
+      result = getGuardResult(req.query, "username", req.query.username);
+      if (!result) {
+        const userPat = await getUserPat(req.query.username);
+        result = await topLangs(req.query, userPat);
+      }
+      if (result.status === "error - temporary") {
+        setErrorCacheHeaders(res);
+      } else {
+        const cacheSeconds = resolveCacheSeconds({
+          requested: parseInt(req.query.cache_seconds, 10),
+          def: CACHE_TTL.TOP_LANGS_CARD.DEFAULT,
+          min: CACHE_TTL.TOP_LANGS_CARD.MIN,
+          max: CACHE_TTL.TOP_LANGS_CARD.MAX,
+        });
+        setCacheHeaders(res, cacheSeconds);
+      }
+      res.setHeader("Content-Type", "image/svg+xml");
+      res.end(result.content);
+      if (result.status !== "error - permanent") {
+        await storeRequest(req);
+      }
+      break;
+    }
+    case "/api/wakatime":
+      result =
+        getGuardResult(req.query, "wakatime", req.query.username) ??
+        (await wakatime(req.query));
+      if (result.status === "error - temporary") {
+        setErrorCacheHeaders(res);
+      } else {
+        const cacheSeconds = resolveCacheSeconds({
+          requested: parseInt(req.query.cache_seconds, 10),
+          def: CACHE_TTL.WAKATIME_CARD.DEFAULT,
+          min: CACHE_TTL.WAKATIME_CARD.MIN,
+          max: CACHE_TTL.WAKATIME_CARD.MAX,
+        });
+        setCacheHeaders(res, cacheSeconds);
+      }
+      res.setHeader("Content-Type", "image/svg+xml");
+      res.end(result.content);
+      if (result.status !== "error - permanent") {
+        await storeRequest(req);
+      }
+      break;
+    case "/api/wakatime-proxy":
+      await wakatimeProxy(req, res);
+      break;
+    case "/api/repeat-recent":
+      await repeatRecent(req, res);
+      break;
+    case "/api/status/pat-info":
+      await patInfo(req, res);
+      break;
+    case "/api/status/up":
+      await statusUp(req, res);
+      break;
+    case "/api/authenticate":
+      await authenticate(req, res);
+      break;
+    case "/api/delete-user":
+      await deleteUser(req, res);
+      break;
+    case "/api/user-access":
+      await userAccess(req, res);
+      break;
+    case "/api/downgrade":
+      await downgrade(req, res);
+      break;
+    default:
+      res.statusCode = 404;
+      res.end("Not Found");
+      break;
+  }
+};
@@ -1,4 +0,0 @@
-export { renderRepoCard } from "./repo.js";
-export { renderStatsCard } from "./stats.js";
-export { renderTopLanguages } from "./top-languages.js";
-export { renderWakatimeCard } from "./wakatime.js";
@@ -1,8 +1,11 @@
 // @ts-check

+import {
+  getConfig,
+  renderError,
+} from "@stats-organization/github-readme-stats-core";
+
 import { blacklist } from "./blacklist.js";
-import { gistWhitelist, whitelist } from "./envs.js";
-import { renderError } from "./render.js";

 const NOT_WHITELISTED_USERNAME_MESSAGE = "This username is not whitelisted";
 const NOT_WHITELISTED_GIST_MESSAGE = "This gist ID is not whitelisted";
@@ -12,36 +15,35 @@ 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 }) => {
+const guardAccess = ({ 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 config = getConfig();
+  const currentWhitelist =
+    type === "gist" ? config.gistWhitelist : config.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,
-        },
-      }),
-    );
+    const result = renderError({
+      message: notWhitelistedMsg,
+      secondaryMessage: "Please deploy your own instance",
+      renderOptions: {
+        ...colors,
+        show_repo_link: false,
+      },
+    });
    return { isPassed: false, result };
  }

@@ -50,16 +52,14 @@ const guardAccess = ({ res, id, type, colors }) => {
    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,
-        },
-      }),
-    );
+    const result = renderError({
+      message: BLACKLISTED_MESSAGE,
+      secondaryMessage: "Please deploy your own instance",
+      renderOptions: {
+        ...colors,
+        show_repo_link: false,
+      },
+    });
    return { isPassed: false, result };
  }

@@ -1,6 +1,6 @@
 // @ts-check

-import { clampValue } from "./ops.js";
+import { clampValue } from "@stats-organization/github-readme-stats-core";

 const MIN = 60;
 const HOUR = 60 * MIN;
@@ -106,7 +106,7 @@ const disableCaching = (res) => {
 * @param {number} cacheSeconds The cache seconds to set in the headers.
 */
 const setCacheHeaders = (res, cacheSeconds) => {
-  if (cacheSeconds < 1 || process.env.NODE_ENV === "development") {
+  if (cacheSeconds < 1) {
    disableCaching(res);
    return;
  }
@@ -128,10 +128,7 @@ 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"
-  ) {
+  if (!isNaN(envCacheSeconds) && envCacheSeconds < 1) {
    disableCaching(res);
    return;
  }
@@ -1,14 +1,10 @@
-/**
- * In the browser this has to be mocked to avoid runtime errors
- * @see apps/frontend/vite.config.ts
- */
-import { Pool } from "pg";
-
-export const pool = process.env.POSTGRES_URL
-  ? new Pool({
-      connectionString: process.env.POSTGRES_URL,
-    })
-  : null;
+export let pool = null;
+if (process.env.POSTGRES_URL) {
+  const { Pool } = await import("pg");
+  pool = new Pool({
+    connectionString: process.env.POSTGRES_URL,
+  });
+}

 /**
 * Creates all required tables if they do not exist.
@@ -1,15 +0,0 @@
-// @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 };
@@ -1,13 +0,0 @@
-// @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";
@@ -1,2 +0,0 @@
-export * from "./common/index.js";
-export * from "./cards/index.js";
@@ -80,6 +80,7 @@ async function githubAuthenticate(code, privateAccess) {
    return { userId, accessToken, needDowngrade };
  } catch (err) {
    if (err.response) {
+      // eslint-disable-next-line preserve-caught-error
      throw new Error(`OAuth Error: ${err.response.status}`);
    }
    throw err;
@@ -1,115 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Test /api/wakatime > should render error if user data is not accessible 1`] = `
-"
-      <svg
-        width="495"
-        height="150"
-        viewBox="0 0 495 150"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        role="img"
-        aria-labelledby="descId"
-      >
-        <title id="titleId"></title>
-        <desc id="descId"></desc>
-        <style>
-          .header {
-            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
-            fill: #2f80ed;
-            animation: fadeInAnimation 0.8s ease-in-out forwards;
-          }
-          @supports(-moz-appearance: auto) {
-            /* Selector detects Firefox */
-            .header { font-size: 15.5px; }
-          }
-          
-    
-    .stat {
-      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
-    }
-    @supports(-moz-appearance: auto) {
-      /* Selector detects Firefox */
-      .stat { font-size:12px; }
-    }
-    .stagger {
-      opacity: 0;
-      animation: fadeInAnimation 0.3s ease-in-out forwards;
-    }
-    .not_bold { font-weight: 400 }
-    .bold { font-weight: 700 }
-  
-    @keyframes slideInAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: calc(100%-100px);
-      }
-    }
-    @keyframes growWidthAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: 100%;
-      }
-    }
-    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
-    #rect-mask rect{
-      animation: slideInAnimation 1s ease-in-out forwards;
-    }
-    .lang-progress{
-      animation: growWidthAnimation 0.6s ease-in-out forwards;
-    }
-    
-
-          
-          
-        </style>
-
-        
-
-        <rect
-          data-testid="card-bg"
-          x="0.5"
-          y="0.5"
-          rx="4.5"
-          height="99%"
-          stroke="#e4e2e2"
-          width="494"
-          fill="#fffefe"
-          stroke-opacity="1"
-        />
-
-        
-      <g
-        data-testid="card-title"
-        transform="translate(25, 35)"
-      >
-        <g transform="translate(0, 0)">
-      <text
-        x="0"
-        y="0"
-        class="header"
-        data-testid="header"
-      >WakaTime Stats</text>
-    </g>
-      </g>
-    
-
-        <g
-          data-testid="main-card-body"
-          transform="translate(0, 55)"
-        >
-          
-    <svg x="0" y="0" width="100%">
-      <g transform="translate(0, 0)">
-    <text x="25" y="11" class="stat bold" fill="#434d58">WakaTime user profile not public</text>
-  </g>
-    </svg>
-  
-        </g>
-      </svg>
-    "
-`;
@@ -1,2 +0,0 @@
-process.env.GIST_WHITELIST = "bbfce31e0217a3689c8d961a356cb10d";
-process.env.WHITELIST = "anuraghazra";
@@ -1,345 +1,182 @@
 // @ts-check

-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";

-import api from "../api-renamed/index.js";
-import { calculateRank } from "../src/calculateRank.js";
-import { renderStatsCard } from "../src/cards/stats.js";
-import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
-import { renderError } from "../src/common/render.js";
+const mocks = vi.hoisted(() => ({
+  api: vi.fn(),
+  storeRequest: vi.fn(),
+  getUserAccessByName: vi.fn(),
+  config: {},
+}));

-import { data_stats, stats } from "./test-data/api-data.js";
-
-stats.rank = calculateRank({
-  all_commits: false,
-  commits: stats.totalCommits,
-  prs: stats.totalPRs,
-  reviews: stats.totalReviews,
-  issues: stats.totalIssues,
-  repos: 1,
-  stars: stats.totalStars,
-  followers: 0,
+vi.mock("@stats-organization/github-readme-stats-core", async () => {
+  const { mockCore } = await import("./utils.js");
+  return mockCore({ api: mocks.api, getConfig: () => mocks.config });
 });

-const error = {
-  errors: [
-    {
-      type: "NOT_FOUND",
-      path: ["user"],
-      locations: [],
-      message: "Could not fetch user",
-    },
-  ],
-};
+vi.mock("../src/common/database.js", () => ({
+  storeRequest: mocks.storeRequest,
+  getUserAccessByName: mocks.getUserAccessByName,
+}));

-const mock = new MockAdapter(axios);
+import router from "../router.js";
+import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";

-// @ts-ignore
-const faker = (query, data) => {
-  const req = {
-    query: {
-      username: "anuraghazra",
-      ...query,
-    },
-  };
-  const res = {
-    setHeader: vi.fn(),
-    send: vi.fn(),
-  };
-  mock.onPost("https://api.github.com/graphql").replyOnce(200, data);
+const createRequest = (search = "") => ({
+  headers: {},
+  url: `/api?${search}`,
+});

-  return { req, res };
-};
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+const defaultCacheHeader =
+  `max-age=${CACHE_TTL.STATS_CARD.DEFAULT}, ` +
+  `s-maxage=${CACHE_TTL.STATS_CARD.DEFAULT}, ` +
+  `stale-while-revalidate=${DURATIONS.ONE_DAY}`;
+
+const errorCacheHeader =
+  `max-age=${CACHE_TTL.ERROR}, ` +
+  `s-maxage=${CACHE_TTL.ERROR}, ` +
+  `stale-while-revalidate=${DURATIONS.ONE_DAY}`;

 beforeEach(() => {
-  process.env.CACHE_SECONDS = undefined;
+  mocks.api.mockReset();
+  mocks.storeRequest.mockReset().mockResolvedValue(undefined);
+  mocks.getUserAccessByName.mockReset().mockResolvedValue(null);
+  mocks.config = {};
+  // CACHE_SECONDS is not set here, this is just to safeguard against CACHE_SECONDS being set externally
+  delete process.env.CACHE_SECONDS;
 });

-afterEach(() => {
-  mock.reset();
-});
+describe("Test /api backend routing", () => {
+  it("happy path should pass query params and user PAT, respond with stats content and persist request", async () => {
+    mocks.getUserAccessByName.mockResolvedValue({ token: "user-pat" });
+    mocks.api.mockResolvedValue({
+      status: "success",
+      content: "mock-stats-svg",
+    });

-describe("Test /api/", () => {
-  it("should test the request", async () => {
-    const { req, res } = faker({}, data_stats);
-
-    await api(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderStatsCard(stats, { ...req.query }),
+    const req = createRequest(
+      "username=anuraghazra&theme=dark&hide=issues,prs,contribs",
    );
-  });
+    const res = createResponse();

-  it("should render error card on error", async () => {
-    const { req, res } = faker({}, error);
+    await router(req, res);

-    await api(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: error.errors[0].message,
-        secondaryMessage:
-          "Make sure the provided username is not an organization",
-      }),
-    );
-  });
-
-  it("should render error card in same theme as requested card", async () => {
-    const { req, res } = faker({ theme: "merko" }, error);
-
-    await api(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: error.errors[0].message,
-        secondaryMessage:
-          "Make sure the provided username is not an organization",
-        renderOptions: { theme: "merko" },
-      }),
-    );
-  });
-
-  it("should get the query options", async () => {
-    const { req, res } = faker(
+    expect(mocks.getUserAccessByName).toHaveBeenCalledWith("anuraghazra");
+    expect(mocks.api).toHaveBeenCalledWith(
      {
        username: "anuraghazra",
+        theme: "dark",
        hide: "issues,prs,contribs",
-        show_icons: true,
-        hide_border: true,
-        line_height: 100,
-        title_color: "fff",
-        icon_color: "fff",
-        text_color: "fff",
-        bg_color: "fff",
      },
-      data_stats,
+      "user-pat",
    );
-
-    await api(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderStatsCard(stats, {
-        hide: ["issues", "prs", "contribs"],
-        show_icons: true,
-        hide_border: true,
-        line_height: 100,
-        title_color: "fff",
-        icon_color: "fff",
-        text_color: "fff",
-        bg_color: "fff",
-      }),
-    );
-  });
-
-  it("should have proper cache", async () => {
-    const { req, res } = faker({}, data_stats);
-
-    await api(req, res);
-
+    expect(req.query).toEqual({
+      username: "anuraghazra",
+      theme: "dark",
+      hide: "issues,prs,contribs",
+    });
    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
      ["Content-Type", "image/svg+xml"],
-      [
-        "Cache-Control",
-        `max-age=${CACHE_TTL.STATS_CARD.DEFAULT}, ` +
-          `s-maxage=${CACHE_TTL.STATS_CARD.DEFAULT}, ` +
-          `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
-      ],
    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-stats-svg");
+    expect(mocks.storeRequest).toHaveBeenCalledExactlyOnceWith(req);
  });

-  it("should set proper cache", async () => {
-    const cache_seconds = DURATIONS.TWELVE_HOURS;
-    const { req, res } = faker({ cache_seconds }, data_stats);
-    await api(req, res);
+  it("should use the shorter error cache for temporary stats errors", async () => {
+    mocks.api.mockResolvedValue({
+      status: "error - temporary",
+      content: "temporary-error-svg",
+    });

-    expect(res.setHeader.mock.calls).toEqual([
-      ["Content-Type", "image/svg+xml"],
-      [
-        "Cache-Control",
-        `max-age=${cache_seconds}, ` +
-          `s-maxage=${cache_seconds}, ` +
-          `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
-      ],
-    ]);
-  });
+    const req = createRequest("username=anuraghazra");
+    const res = createResponse();

-  it("should set shorter cache when error", async () => {
-    const { req, res } = faker({}, error);
-    await api(req, res);
+    await router(req, res);

-    expect(res.setHeader.mock.calls).toEqual([
-      ["Content-Type", "image/svg+xml"],
-      [
-        "Cache-Control",
-        `max-age=${CACHE_TTL.ERROR}, ` +
-          `s-maxage=${CACHE_TTL.ERROR}, ` +
-          `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
-      ],
-    ]);
-  });
-
-  it("should properly set cache using CACHE_SECONDS env variable", async () => {
-    const cacheSeconds = "10000";
-    process.env.CACHE_SECONDS = cacheSeconds;
-
-    const { req, res } = faker({}, data_stats);
-    await api(req, res);
-
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Content-Type", "image/svg+xml"],
-      [
-        "Cache-Control",
-        `max-age=${cacheSeconds}, ` +
-          `s-maxage=${cacheSeconds}, ` +
-          `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
-      ],
-    ]);
-  });
-
-  it("should disable cache when CACHE_SECONDS is set to 0", async () => {
-    process.env.CACHE_SECONDS = "0";
-
-    const { req, res } = faker({}, data_stats);
-    await api(req, res);
-
-    expect(res.setHeader.mock.calls).toEqual([
-      ["Content-Type", "image/svg+xml"],
-      [
-        "Cache-Control",
-        "no-cache, no-store, must-revalidate, max-age=0, s-maxage=0",
-      ],
-      ["Pragma", "no-cache"],
-      ["Expires", "0"],
-    ]);
-  });
-
-  it("should set proper cache with clamped values", async () => {
-    {
-      let { req, res } = faker({ cache_seconds: 200_000 }, data_stats);
-      await api(req, res);
-
-      expect(res.setHeader.mock.calls).toEqual([
-        ["Content-Type", "image/svg+xml"],
-        [
-          "Cache-Control",
-          `max-age=${CACHE_TTL.STATS_CARD.MAX}, ` +
-            `s-maxage=${CACHE_TTL.STATS_CARD.MAX}, ` +
-            `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
-        ],
-      ]);
-    }
-
-    // note i'm using block scoped vars
-    {
-      let { req, res } = faker({ cache_seconds: 0 }, data_stats);
-      await api(req, res);
-
-      expect(res.setHeader.mock.calls).toEqual([
-        ["Content-Type", "image/svg+xml"],
-        [
-          "Cache-Control",
-          `max-age=${CACHE_TTL.STATS_CARD.MIN}, ` +
-            `s-maxage=${CACHE_TTL.STATS_CARD.MIN}, ` +
-            `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
-        ],
-      ]);
-    }
-
-    {
-      let { req, res } = faker({ cache_seconds: -10_000 }, data_stats);
-      await api(req, res);
-
-      expect(res.setHeader.mock.calls).toEqual([
-        ["Content-Type", "image/svg+xml"],
-        [
-          "Cache-Control",
-          `max-age=${CACHE_TTL.STATS_CARD.MIN}, ` +
-            `s-maxage=${CACHE_TTL.STATS_CARD.MIN}, ` +
-            `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
-        ],
-      ]);
-    }
-  });
-
-  it("should allow changing ring_color", async () => {
-    const { req, res } = faker(
+    expect(mocks.getUserAccessByName).toHaveBeenCalledWith("anuraghazra");
+    expect(mocks.api).toHaveBeenCalledWith(
      {
        username: "anuraghazra",
-        hide: "issues,prs,contribs",
-        show_icons: true,
-        hide_border: true,
-        line_height: 100,
-        title_color: "fff",
-        ring_color: "0000ff",
-        icon_color: "fff",
-        text_color: "fff",
-        bg_color: "fff",
      },
-      data_stats,
-    );
-
-    await api(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderStatsCard(stats, {
-        hide: ["issues", "prs", "contribs"],
-        show_icons: true,
-        hide_border: true,
-        line_height: 100,
-        title_color: "fff",
-        ring_color: "0000ff",
-        icon_color: "fff",
-        text_color: "fff",
-        bg_color: "fff",
-      }),
+      null,
    );
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", errorCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith("temporary-error-svg");
+    expect(mocks.storeRequest).toHaveBeenCalledExactlyOnceWith(req);
  });

-  it("should render error card when wrong locale is provided", async () => {
-    const { req, res } = faker({ locale: "asdf" }, data_stats);
+  it("should not persist permanent stats errors returned by core", async () => {
+    mocks.api.mockResolvedValue({
+      status: "error - permanent",
+      content: "permanent-error-svg",
+    });

-    await api(req, res);
+    const req = createRequest("username=anuraghazra");
+    const res = createResponse();

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "Something went wrong",
-        secondaryMessage: "Language not found",
-      }),
+    await router(req, res);
+
+    expect(mocks.getUserAccessByName).toHaveBeenCalledWith("anuraghazra");
+    expect(mocks.api).toHaveBeenCalledWith(
+      {
+        username: "anuraghazra",
+      },
+      null,
    );
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith("permanent-error-svg");
+    expect(mocks.storeRequest).not.toHaveBeenCalled();
  });

-  it("should render error card when include_all_commits true and upstream API fails", async () => {
-    mock
-      .onGet(
-        "https://api.github.com/search/commits?per_page=1&q=author:anuraghazra",
-      )
-      .reply(200, { error: "Some test error message" });
+  it("should reject blacklisted usernames before calling core logic", async () => {
+    const req = createRequest("username=renovate-bot");
+    const res = createResponse();

-    const { req, res } = faker(
-      { username: "anuraghazra", include_all_commits: true },
-      data_stats,
-    );
+    await router(req, res);

-    await api(req, res);
+    expect(mocks.api).not.toHaveBeenCalled();
+    expect(mocks.getUserAccessByName).not.toHaveBeenCalled();
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith(
+      "render-error:This username is blacklisted",
+    );
+    expect(mocks.storeRequest).not.toHaveBeenCalled();
+  });

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "Could not fetch data from GitHub REST API.",
-        secondaryMessage: "Please try again later",
-      }),
-    );
-    // Received SVG output should not contain string "https://tiny.one/readme-stats"
-    expect(res.send.mock.calls[0][0]).not.toContain(
-      "https://tiny.one/readme-stats",
+  it("should reject non-whitelisted usernames before calling core logic", async () => {
+    mocks.config = {
+      whitelist: ["allowed-user"],
+    };
+
+    const req = createRequest("username=blocked-user");
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(mocks.api).not.toHaveBeenCalled();
+    expect(mocks.getUserAccessByName).not.toHaveBeenCalled();
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith(
+      "render-error:This username is not whitelisted",
    );
+    expect(mocks.storeRequest).not.toHaveBeenCalled();
  });
 });
@@ -1,81 +1,40 @@
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { bench, describe, vi } from "vitest";
+import { beforeAll, bench, describe, vi } from "vitest";

-import api from "../../api-renamed/index.js";
-
-const stats = {
-  name: "Anurag Hazra",
-  totalStars: 100,
-  totalCommits: 200,
-  totalIssues: 300,
-  totalPRs: 400,
-  totalPRsMerged: 320,
-  mergedPRsPercentage: 80,
-  totalReviews: 50,
-  totalDiscussionsStarted: 10,
-  totalDiscussionsAnswered: 40,
-  contributedTo: 50,
-  rank: null,
-};
-
-const data_stats = {
-  data: {
-    user: {
-      name: stats.name,
-      repositoriesContributedTo: { totalCount: stats.contributedTo },
-      commits: {
-        totalCommitContributions: stats.totalCommits,
-      },
-      reviews: {
-        totalPullRequestReviewContributions: stats.totalReviews,
-      },
-      pullRequests: { totalCount: stats.totalPRs },
-      mergedPullRequests: { totalCount: stats.totalPRsMerged },
-      openIssues: { totalCount: stats.totalIssues },
-      closedIssues: { totalCount: 0 },
-      followers: { totalCount: 0 },
-      repositoryDiscussions: { totalCount: stats.totalDiscussionsStarted },
-      repositoryDiscussionComments: {
-        totalCount: stats.totalDiscussionsAnswered,
-      },
-      repositories: {
-        totalCount: 1,
-        nodes: [{ stargazers: { totalCount: 100 } }],
-        pageInfo: {
-          hasNextPage: false,
-          endCursor: "cursor",
-        },
-      },
-    },
-  },
-};
+import { data_stats } from "../utils.js";

 const mock = new MockAdapter(axios);

-const faker = (query, data) => {
-  const req = {
-    query: {
-      username: "anuraghazra",
-      ...query,
-    },
-  };
-  const res = {
-    setHeader: vi.fn(),
-    send: vi.fn(),
-  };
-  mock.onPost("https://api.github.com/graphql").replyOnce(200, data);
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});

-  return { req, res };
-};
+let router;

-describe("/api", () => {
+beforeAll(async () => {
+  vi.stubEnv("CACHE_SECONDS", "");
+  vi.stubEnv("GIST_WHITELIST", "");
+  vi.stubEnv("POSTGRES_URL", "");
+  vi.stubEnv("WHITELIST", "");
+
+  ({ default: router } = await import("../../router.js"));
+
+  mock.onPost("https://api.github.com/graphql").reply(200, data_stats);
+});
+
+describe("bench /api", () => {
  bench(
    "base",
    async () => {
-      const { req, res } = faker({}, data_stats);
+      const req = {
+        headers: {},
+        url: "/api?username=anuraghazra",
+      };
+      const res = createResponse();

-      await api(req, res);
+      await router(req, res);
    },
    { warmupIterations: 50 },
  );
@@ -1,22 +0,0 @@
-import { bench, describe } from "vitest";
-
-import { calculateRank } from "../../src/calculateRank.js";
-
-describe("calculateRank", () => {
-  bench(
-    "base",
-    async () => {
-      calculateRank({
-        all_commits: false,
-        commits: 1300,
-        prs: 1500,
-        issues: 4500,
-        reviews: 1000,
-        repos: 0,
-        stars: 600000,
-        followers: 50000,
-      });
-    },
-    { warmupIterations: 50 },
-  );
-});
@@ -1,54 +1,42 @@
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { bench, describe, vi } from "vitest";
+import { beforeAll, bench, describe, vi } from "vitest";

-import gist from "../../api-renamed/gist.js";
-
-const gist_data = {
-  data: {
-    viewer: {
-      gist: {
-        description:
-          "List of countries and territories in English and Spanish: name, continent, capital, dial code, country codes, TLD, and area in sq km. Lista de países y territorios en Inglés y Español: nombre, continente, capital, código de teléfono, códigos de país, dominio y área en km cuadrados. Updated 2023",
-        owner: {
-          login: "Yizack",
-        },
-        stargazerCount: 33,
-        forks: {
-          totalCount: 11,
-        },
-        files: [
-          {
-            name: "countries.json",
-            language: {
-              name: "JSON",
-            },
-            size: 85858,
-          },
-        ],
-      },
-    },
-  },
-};
+import { happy_path_gist_data } from "../utils.js";

 const mock = new MockAdapter(axios);
-mock.onPost("https://api.github.com/graphql").reply(200, gist_data);

-describe("test /api/gist", () => {
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+let router;
+
+beforeAll(async () => {
+  vi.stubEnv("CACHE_SECONDS", "");
+  vi.stubEnv("GIST_WHITELIST", "");
+  vi.stubEnv("POSTGRES_URL", "");
+  vi.stubEnv("WHITELIST", "");
+
+  ({ default: router } = await import("../../router.js"));
+
+  mock
+    .onPost("https://api.github.com/graphql")
+    .reply(200, happy_path_gist_data);
+});
+
+describe("bench /api/gist", () => {
  bench(
    "base",
    async () => {
      const req = {
-        query: {
-          id: "bbfce31e0217a3689c8d961a356cb10d",
-        },
-      };
-      const res = {
-        setHeader: vi.fn(),
-        send: vi.fn(),
+        headers: {},
+        url: "/api/gist?id=happy-gist-id",
      };
+      const res = createResponse();

-      await gist(req, res);
+      await router(req, res);
    },
    { warmupIterations: 50 },
  );
@@ -1,53 +1,40 @@
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { bench, describe, vi } from "vitest";
+import { beforeAll, bench, describe, vi } from "vitest";

-import pin from "../../api-renamed/pin.js";
-
-const data_repo = {
-  repository: {
-    username: "anuraghazra",
-    name: "convoychat",
-    stargazers: {
-      totalCount: 38000,
-    },
-    description: "Help us take over the world! React + TS + GraphQL Chat App",
-    primaryLanguage: {
-      color: "#2b7489",
-      id: "MDg6TGFuZ3VhZ2UyODc=",
-      name: "TypeScript",
-    },
-    forkCount: 100,
-    isTemplate: false,
-  },
-};
-
-const data_user = {
-  data: {
-    user: { repository: data_repo.repository },
-    organization: null,
-  },
-};
+import { data_user } from "../utils.js";

 const mock = new MockAdapter(axios);
-mock.onPost("https://api.github.com/graphql").reply(200, data_user);

-describe("/api/pin", () => {
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+let router;
+
+beforeAll(async () => {
+  vi.stubEnv("CACHE_SECONDS", "");
+  vi.stubEnv("GIST_WHITELIST", "");
+  vi.stubEnv("POSTGRES_URL", "");
+  vi.stubEnv("WHITELIST", "");
+
+  ({ default: router } = await import("../../router.js"));
+
+  mock.onPost("https://api.github.com/graphql").reply(200, data_user);
+});
+
+describe("bench /api/pin", () => {
  bench(
    "base",
    async () => {
      const req = {
-        query: {
-          username: "anuraghazra",
-          repo: "convoychat",
-        },
-      };
-      const res = {
-        setHeader: vi.fn(),
-        send: vi.fn(),
+        headers: {},
+        url: "/api/pin?username=anuraghazra&repo=convoychat",
      };
+      const res = createResponse();

-      await pin(req, res);
+      await router(req, res);
    },
    { warmupIterations: 50 },
  );
@@ -3,221 +3,343 @@
 */

 import axios from "axios";
-import { beforeAll, describe, expect, test } from "vitest";
-
-import { renderGistCard } from "../../src/cards/gist.js";
-import { renderRepoCard } from "../../src/cards/repo.js";
-import { renderStatsCard } from "../../src/cards/stats.js";
-import { renderTopLanguages } from "../../src/cards/top-languages.js";
-import { renderWakatimeCard } from "../../src/cards/wakatime.js";
+import MockAdapter from "axios-mock-adapter";
+import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";

 const REPO = "curly-fiesta";
 const USER = "catelinemnemosyne";
 const STATS_CARD_USER = "e2eninja";
 const GIST_ID = "372cef55fd897b31909fdeb3a7262758";

-const STATS_DATA = {
-  name: "CodeNinja",
-  totalPRs: 1,
-  totalReviews: 0,
-  totalCommits: 3,
-  totalIssues: 1,
-  totalStars: 1,
-  contributedTo: 0,
-  rank: {
-    level: "C",
-    percentile: 98.73972605284538,
+const STATS_MOCK_RESPONSE = {
+  data: {
+    user: {
+      name: "CodeNinja",
+      login: STATS_CARD_USER,
+      repositoriesContributedTo: { totalCount: 0 },
+      commits: {
+        totalCommitContributions: 3,
+      },
+      reviews: {
+        totalPullRequestReviewContributions: 0,
+      },
+      pullRequests: { totalCount: 1 },
+      openIssues: { totalCount: 1 },
+      closedIssues: { totalCount: 0 },
+      followers: { totalCount: 0 },
+      repositories: {
+        totalCount: 1,
+        nodes: [{ name: REPO, stargazers: { totalCount: 1 } }],
+        pageInfo: {
+          hasNextPage: false,
+          endCursor: "cursor",
+        },
+      },
+    },
  },
 };

-const LANGS_DATA = {
-  HTML: {
-    color: "#e34c26",
-    name: "HTML",
-    size: 1721,
-  },
-  CSS: {
-    color: "#663399",
-    name: "CSS",
-    size: 930,
-  },
-  JavaScript: {
-    color: "#f1e05a",
-    name: "JavaScript",
-    size: 1912,
+const COMMITS_SEARCH_MOCK_RESPONSE = {
+  total_count: 3,
+};
+
+const TOP_LANGS_MOCK_RESPONSE = {
+  data: {
+    user: {
+      repositories: {
+        nodes: [
+          {
+            name: REPO,
+            languages: {
+              edges: [
+                {
+                  size: 1721,
+                  node: {
+                    color: "#e34c26",
+                    name: "HTML",
+                  },
+                },
+                {
+                  size: 930,
+                  node: {
+                    color: "#663399",
+                    name: "CSS",
+                  },
+                },
+                {
+                  size: 1912,
+                  node: {
+                    color: "#f1e05a",
+                    name: "JavaScript",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
  },
 };

-const WAKATIME_DATA = {
-  human_readable_range: "last week",
-  is_already_updating: false,
-  is_coding_activity_visible: true,
-  is_including_today: false,
-  is_other_usage_visible: false,
-  is_stuck: false,
-  is_up_to_date: false,
-  is_up_to_date_pending_future: false,
-  percent_calculated: 0,
-  range: "all_time",
-  status: "pending_update",
-  timeout: 15,
-  username: USER,
-  writes_only: false,
+const WAKATIME_MOCK_RESPONSE = {
+  data: {
+    human_readable_range: "last week",
+    is_already_updating: false,
+    is_coding_activity_visible: true,
+    is_including_today: false,
+    is_other_usage_visible: false,
+    is_stuck: false,
+    is_up_to_date: false,
+    is_up_to_date_pending_future: false,
+    percent_calculated: 0,
+    range: "all_time",
+    status: "pending_update",
+    timeout: 15,
+    username: USER,
+    writes_only: false,
+  },
 };

-const REPOSITORY_DATA = {
-  name: REPO,
-  nameWithOwner: `${USER}/cra-test`,
-  isPrivate: false,
-  isArchived: false,
-  isTemplate: false,
-  stargazers: {
-    totalCount: 1,
+const REPO_MOCK_RESPONSE = {
+  data: {
+    user: {
+      repository: {
+        name: REPO,
+        nameWithOwner: `${USER}/cra-test`,
+        isPrivate: false,
+        isArchived: false,
+        isTemplate: false,
+        stargazers: {
+          totalCount: 1,
+        },
+        description: "Simple cra test repo.",
+        primaryLanguage: {
+          color: "#f1e05a",
+          id: "MDg6TGFuZ3VhZ2UxNDA=",
+          name: "JavaScript",
+        },
+        forkCount: 0,
+      },
+    },
+    organization: null,
  },
-  description: "Simple cra test repo.",
-  primaryLanguage: {
-    color: "#f1e05a",
-    id: "MDg6TGFuZ3VhZ2UxNDA=",
-    name: "JavaScript",
-  },
-  forkCount: 0,
-  starCount: 1,
 };

-/**
- * @typedef {import("../../src/fetchers/types").GistData} GistData Gist data type.
- */
-
-/**
- * @type {GistData}
- */
-const GIST_DATA = {
-  name: "link.txt",
-  nameWithOwner: "qwerty541/link.txt",
-  description:
-    "Trying to access this path on Windows 10 ver. 1803+ will breaks NTFS",
-  language: "Text",
-  starsCount: 1,
-  forksCount: 0,
+const GIST_MOCK_RESPONSE = {
+  data: {
+    viewer: {
+      gist: {
+        description:
+          "Trying to access this path on Windows 10 ver. 1803+ will breaks NTFS",
+        owner: {
+          login: "qwerty541",
+        },
+        stargazerCount: 1,
+        forks: {
+          totalCount: 0,
+        },
+        files: [
+          {
+            name: "link.txt",
+            language: {
+              name: "Text",
+            },
+            size: 1,
+          },
+        ],
+      },
+    },
+  },
 };

 const CACHE_BURST_STRING = `v=${new Date().getTime()}`;

-describe("Fetch Cards", () => {
-  let VERCEL_PREVIEW_URL = "https://github-stats-extended.vercel.app";
+const mock = new MockAdapter(axios, { onNoMatch: "passthrough" });

-  beforeAll(() => {
-    process.env.NODE_ENV = "development";
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+let router;
+
+/**
+ * Renders a card locally through the backend router.
+ * @param {string} url Card URL to render through the router.
+ * @returns {Promise<string>} Rendered SVG markup.
+ */
+async function getLocalSvg(url) {
+  const req = {
+    headers: {},
+    url,
+  };
+  const res = createResponse();
+
+  await router(req, res);
+
+  expect(res.end).toHaveBeenCalledOnce();
+  return res.end.mock.calls[0][0];
+}
+
+beforeAll(async () => {
+  vi.stubEnv("CACHE_SECONDS", "");
+  vi.stubEnv("GIST_WHITELIST", "");
+  vi.stubEnv("POSTGRES_URL", "");
+  vi.stubEnv("WHITELIST", "");
+
+  vi.stubEnv("PAT_1", "dummyPAT1");
+  vi.stubEnv("PAT_2", "dummyPAT2");
+
+  ({ default: router } = await import("../../router.js"));
+
+  mock.onPost("https://api.github.com/graphql").reply((config) => {
+    const { query, variables } = JSON.parse(config.data);
+
+    if (
+      query.includes("query userInfo") &&
+      variables?.login === STATS_CARD_USER
+    ) {
+      return [200, STATS_MOCK_RESPONSE];
+    }
+
+    if (query.includes("query userInfo") && variables?.login === USER) {
+      return [200, TOP_LANGS_MOCK_RESPONSE];
+    }
+
+    if (query.includes("query getRepo")) {
+      return [200, REPO_MOCK_RESPONSE];
+    }
+
+    if (query.includes("query gistInfo")) {
+      return [200, GIST_MOCK_RESPONSE];
+    }
+
+    return [500, { error: "Unhandled GraphQL request in e2e test" }];
  });

+  mock
+    .onGet(
+      `https://api.github.com/search/commits?per_page=1&q=author:${STATS_CARD_USER}`,
+    )
+    .reply(200, COMMITS_SEARCH_MOCK_RESPONSE);
+
+  mock
+    .onGet(
+      `https://wakatime.com/api/v1/users/${USER}/stats?is_including_today=true`,
+    )
+    .reply(200, WAKATIME_MOCK_RESPONSE);
+});
+
+afterAll(() => {
+  mock.restore();
+  vi.unstubAllEnvs();
+});
+
+describe("Fetch Cards", () => {
+  const VERCEL_PREVIEW_URL = "https://github-stats-extended-preview.vercel.app";
+
  test("retrieve stats card", async () => {
    expect(VERCEL_PREVIEW_URL).toBeDefined();

+    const cardPath = `/api?username=${STATS_CARD_USER}&include_all_commits=true&${CACHE_BURST_STRING}`;
+
    // Check if the Vercel preview instance stats card function is up and running.
    await expect(
-      axios.get(`${VERCEL_PREVIEW_URL}/api?username=${STATS_CARD_USER}`),
+      axios.get(`${VERCEL_PREVIEW_URL}${cardPath}`),
    ).resolves.not.toThrow();

    // Get local stats card.
-    const localStatsCardSVG = renderStatsCard(STATS_DATA, {
-      include_all_commits: true,
-    });
+    const localStatsCardSVG = await getLocalSvg(cardPath);

    // Get the Vercel preview stats card response.
-    const serverStatsSvg = await axios.get(
-      `${VERCEL_PREVIEW_URL}/api?username=${STATS_CARD_USER}&include_all_commits=true&${CACHE_BURST_STRING}`,
-    );
+    const serverStatsSvg = await axios.get(`${VERCEL_PREVIEW_URL}${cardPath}`);

    // Check if stats card from deployment matches the stats card from local.
    expect(serverStatsSvg.data).toEqual(localStatsCardSVG);
-  }, 15000);
+  }, 20000);

  test("retrieve language card", async () => {
    expect(VERCEL_PREVIEW_URL).toBeDefined();

+    const cardPath = `/api/top-langs?username=${USER}&${CACHE_BURST_STRING}`;
+
    // Check if the Vercel preview instance language card function is up and running.
-    console.log(
-      `${VERCEL_PREVIEW_URL}/api/top-langs/?username=${USER}&${CACHE_BURST_STRING}`,
-    );
    await expect(
-      axios.get(
-        `${VERCEL_PREVIEW_URL}/api/top-langs/?username=${USER}&${CACHE_BURST_STRING}`,
-      ),
+      axios.get(`${VERCEL_PREVIEW_URL}${cardPath}`),
    ).resolves.not.toThrow();

    // Get local language card.
-    const localLanguageCardSVG = renderTopLanguages(LANGS_DATA);
+    const localLanguageCardSVG = await getLocalSvg(cardPath);

    // Get the Vercel preview language card response.
-    const severLanguageSVG = await axios.get(
-      `${VERCEL_PREVIEW_URL}/api/top-langs/?username=${USER}&${CACHE_BURST_STRING}`,
+    const serverLanguageSVG = await axios.get(
+      `${VERCEL_PREVIEW_URL}${cardPath}`,
    );

    // Check if language card from deployment matches the local language card.
-    expect(severLanguageSVG.data).toEqual(localLanguageCardSVG);
-  }, 15000);
+    expect(serverLanguageSVG.data).toEqual(localLanguageCardSVG);
+  }, 20000);

  test("retrieve WakaTime card", async () => {
    expect(VERCEL_PREVIEW_URL).toBeDefined();

+    const cardPath = `/api/wakatime?username=${USER}&${CACHE_BURST_STRING}`;
+
    // Check if the Vercel preview instance WakaTime function is up and running.
    await expect(
-      axios.get(`${VERCEL_PREVIEW_URL}/api/wakatime?username=${USER}`),
+      axios.get(`${VERCEL_PREVIEW_URL}${cardPath}`),
    ).resolves.not.toThrow();

    // Get local WakaTime card.
-    const localWakaCardSVG = renderWakatimeCard(WAKATIME_DATA);
+    const localWakaCardSVG = await getLocalSvg(cardPath);

    // Get the Vercel preview WakaTime card response.
    const serverWakaTimeSvg = await axios.get(
-      `${VERCEL_PREVIEW_URL}/api/wakatime?username=${USER}&${CACHE_BURST_STRING}`,
+      `${VERCEL_PREVIEW_URL}${cardPath}`,
    );

    // Check if WakaTime card from deployment matches the local WakaTime card.
    expect(serverWakaTimeSvg.data).toEqual(localWakaCardSVG);
-  }, 15000);
+  }, 20000);

  test("retrieve repo card", async () => {
    expect(VERCEL_PREVIEW_URL).toBeDefined();

+    const cardPath = `/api/pin?username=${USER}&repo=${REPO}&${CACHE_BURST_STRING}`;
+
    // Check if the Vercel preview instance Repo function is up and running.
    await expect(
-      axios.get(
-        `${VERCEL_PREVIEW_URL}/api/pin/?username=${USER}&repo=${REPO}&${CACHE_BURST_STRING}`,
-      ),
+      axios.get(`${VERCEL_PREVIEW_URL}${cardPath}`),
    ).resolves.not.toThrow();

    // Get local repo card.
-    const localRepoCardSVG = renderRepoCard(REPOSITORY_DATA);
+    const localRepoCardSVG = await getLocalSvg(cardPath);

    // Get the Vercel preview repo card response.
-    const serverRepoSvg = await axios.get(
-      `${VERCEL_PREVIEW_URL}/api/pin/?username=${USER}&repo=${REPO}&${CACHE_BURST_STRING}`,
-    );
+    const serverRepoSvg = await axios.get(`${VERCEL_PREVIEW_URL}${cardPath}`);

    // Check if Repo card from deployment matches the local Repo card.
    expect(serverRepoSvg.data).toEqual(localRepoCardSVG);
-  }, 15000);
+  }, 20000);

  test("retrieve gist card", async () => {
    expect(VERCEL_PREVIEW_URL).toBeDefined();

+    const cardPath = `/api/gist?id=${GIST_ID}&${CACHE_BURST_STRING}`;
+
    // Check if the Vercel preview instance Gist function is up and running.
    await expect(
-      axios.get(
-        `${VERCEL_PREVIEW_URL}/api/gist?id=${GIST_ID}&${CACHE_BURST_STRING}`,
-      ),
+      axios.get(`${VERCEL_PREVIEW_URL}${cardPath}`),
    ).resolves.not.toThrow();

    // Get local gist card.
-    const localGistCardSVG = renderGistCard(GIST_DATA);
+    const localGistCardSVG = await getLocalSvg(cardPath);

    // Get the Vercel preview gist card response.
-    const serverGistSvg = await axios.get(
-      `${VERCEL_PREVIEW_URL}/api/gist?id=${GIST_ID}&${CACHE_BURST_STRING}`,
-    );
+    const serverGistSvg = await axios.get(`${VERCEL_PREVIEW_URL}${cardPath}`);

    // Check if Gist card from deployment matches the local Gist card.
    expect(serverGistSvg.data).toEqual(localGistCardSVG);
-  }, 15000);
+  }, 20000);
 });
@@ -1,161 +1,150 @@
 // @ts-check

-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";

-import gist from "../api-renamed/gist.js";
-import { renderGistCard } from "../src/cards/gist.js";
+const mocks = vi.hoisted(() => ({
+  gist: vi.fn(),
+  storeRequest: vi.fn(),
+  getUserAccessByName: vi.fn(),
+  config: {},
+}));
+
+vi.mock("@stats-organization/github-readme-stats-core", async () => {
+  const { mockCore } = await import("./utils.js");
+  return mockCore({ gist: mocks.gist, getConfig: () => mocks.config });
+});
+
+vi.mock("../src/common/database.js", () => ({
+  storeRequest: mocks.storeRequest,
+  getUserAccessByName: mocks.getUserAccessByName,
+}));
+
+import router from "../router.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
-import { renderError } from "../src/common/render.js";

-import { gist_data } from "./test-data/gist-data.js";
-
-import "@testing-library/jest-dom/vitest";
-
-const gist_not_found_data = {
-  data: {
-    viewer: {
-      gist: null,
-    },
-  },
-};
-
-const mock = new MockAdapter(axios);
-
-afterEach(() => {
-  mock.reset();
+const createRequest = (search) => ({
+  headers: {},
+  url: `/api/gist?${search}`,
 });

-describe("Test /api/gist", () => {
-  it("should test the request", async () => {
-    const req = {
-      query: {
-        id: "bbfce31e0217a3689c8d961a356cb10d",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, gist_data);
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});

-    await gist(req, res);
+const defaultCacheHeader =
+  `max-age=${CACHE_TTL.GIST_CARD.DEFAULT}, ` +
+  `s-maxage=${CACHE_TTL.GIST_CARD.DEFAULT}, ` +
+  `stale-while-revalidate=${DURATIONS.ONE_DAY}`;

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderGistCard({
-        name: gist_data.data.viewer.gist.files[0].name,
-        nameWithOwner: `${gist_data.data.viewer.gist.owner.login}/${gist_data.data.viewer.gist.files[0].name}`,
-        description: gist_data.data.viewer.gist.description,
-        language: gist_data.data.viewer.gist.files[0].language.name,
-        starsCount: gist_data.data.viewer.gist.stargazerCount,
-        forksCount: gist_data.data.viewer.gist.forks.totalCount,
-      }),
-    );
+const errorCacheHeader =
+  `max-age=${CACHE_TTL.ERROR}, ` +
+  `s-maxage=${CACHE_TTL.ERROR}, ` +
+  `stale-while-revalidate=${DURATIONS.ONE_DAY}`;
+
+beforeEach(() => {
+  mocks.gist.mockReset();
+  mocks.storeRequest.mockReset().mockResolvedValue(undefined);
+  mocks.getUserAccessByName.mockReset().mockResolvedValue(null);
+  mocks.config = {};
+  // CACHE_SECONDS is not set here, this is just to safeguard against CACHE_SECONDS being set externally
+  delete process.env.CACHE_SECONDS;
+});
+
+describe("Test /api/gist backend routing", () => {
+  it("happy path should pass query params, respond with gist content and persist request", async () => {
+    mocks.gist.mockResolvedValue({
+      status: "success",
+      content: "mock-gist-svg",
+    });
+
+    const req = createRequest("id=bbfce31e0217a3689c8d961a356cb10d&theme=dark");
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(mocks.gist).toHaveBeenCalledWith({
+      id: "bbfce31e0217a3689c8d961a356cb10d",
+      theme: "dark",
+    });
+    expect(mocks.getUserAccessByName).not.toHaveBeenCalled();
+    expect(req.query).toEqual({
+      id: "bbfce31e0217a3689c8d961a356cb10d",
+      theme: "dark",
+    });
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-gist-svg");
+    expect(mocks.storeRequest).toHaveBeenCalledExactlyOnceWith(req);
  });

-  it("should get the query options", async () => {
-    const req = {
-      query: {
-        id: "bbfce31e0217a3689c8d961a356cb10d",
-        title_color: "fff",
-        icon_color: "fff",
-        text_color: "fff",
-        bg_color: "fff",
-        show_owner: true,
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, gist_data);
+  it("should use the shorter error cache for temporary gist errors", async () => {
+    mocks.gist.mockResolvedValue({
+      status: "error - temporary",
+      content: "temporary-error-svg",
+    });

-    await gist(req, res);
+    const req = createRequest("id=bbfce31e0217a3689c8d961a356cb10d");
+    const res = createResponse();

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderGistCard(
-        {
-          name: gist_data.data.viewer.gist.files[0].name,
-          nameWithOwner: `${gist_data.data.viewer.gist.owner.login}/${gist_data.data.viewer.gist.files[0].name}`,
-          description: gist_data.data.viewer.gist.description,
-          language: gist_data.data.viewer.gist.files[0].language.name,
-          starsCount: gist_data.data.viewer.gist.stargazerCount,
-          forksCount: gist_data.data.viewer.gist.forks.totalCount,
-        },
-        { ...req.query },
-      ),
-    );
+    await router(req, res);
+
+    expect(mocks.gist).toHaveBeenCalledWith({
+      id: "bbfce31e0217a3689c8d961a356cb10d",
+    });
+    expect(mocks.getUserAccessByName).not.toHaveBeenCalled();
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", errorCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith("temporary-error-svg");
+    expect(mocks.storeRequest).toHaveBeenCalledExactlyOnceWith(req);
  });

-  it("should render error if gist is not found", async () => {
-    const req = {
-      query: {
-        id: "bbfce31e0217a3689c8d961a356cb10d",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock
-      .onPost("https://api.github.com/graphql")
-      .reply(200, gist_not_found_data);
+  it("should not persist permanent gist errors returned by core", async () => {
+    mocks.gist.mockResolvedValue({
+      status: "error - permanent",
+      content: "permanent-error-svg",
+    });

-    await gist(req, res);
+    const req = createRequest("id=bbfce31e0217a3689c8d961a356cb10d");
+    const res = createResponse();

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({ message: "Gist not found" }),
-    );
+    await router(req, res);
+
+    expect(mocks.gist).toHaveBeenCalledWith({
+      id: "bbfce31e0217a3689c8d961a356cb10d",
+    });
+    expect(mocks.getUserAccessByName).not.toHaveBeenCalled();
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith("permanent-error-svg");
+    expect(mocks.storeRequest).not.toHaveBeenCalled();
  });

-  it("should render error if wrong locale is provided", async () => {
-    const req = {
-      query: {
-        id: "bbfce31e0217a3689c8d961a356cb10d",
-        locale: "asdf",
-      },
+  it("should reject non-whitelisted gist ids before calling core logic", async () => {
+    mocks.config = {
+      gistWhitelist: ["allowed-gist-id"],
    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, gist_data);

-    await gist(req, res);
+    const req = createRequest("id=blocked-gist-id");
+    const res = createResponse();

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "Something went wrong",
-        secondaryMessage: "Language not found",
-      }),
-    );
-  });
+    await router(req, res);

-  it("should have proper cache", async () => {
-    const req = {
-      query: {
-        id: "bbfce31e0217a3689c8d961a356cb10d",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, gist_data);
-
-    await gist(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.setHeader).toHaveBeenCalledWith(
-      "Cache-Control",
-      `max-age=${CACHE_TTL.GIST_CARD.DEFAULT}, ` +
-        `s-maxage=${CACHE_TTL.GIST_CARD.DEFAULT}, ` +
-        `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
+    expect(mocks.gist).not.toHaveBeenCalled();
+    expect(mocks.getUserAccessByName).not.toHaveBeenCalled();
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith(
+      "render-error:This gist ID is not whitelisted",
    );
+    expect(mocks.storeRequest).not.toHaveBeenCalled();
  });
 });
@@ -6,8 +6,6 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";

-import patInfo, { RATE_LIMIT_SECONDS } from "../api-renamed/status/pat-info.js";
-
 const mock = new MockAdapter(axios);

 const successData = {
@@ -57,20 +55,26 @@ const bad_credentials_error = {
  message: "Bad credentials",
 };

+let RATE_LIMIT_SECONDS, patInfo;
+
+beforeAll(async () => {
+  vi.stubEnv("PAT_1", "testPAT1");
+  vi.stubEnv("PAT_2", "testPAT2");
+  vi.stubEnv("PAT_3", "testPAT3");
+  vi.stubEnv("PAT_4", "testPAT4");
+
+  ({ RATE_LIMIT_SECONDS, default: patInfo } =
+    await import("../api-renamed/status/pat-info.js"));
+});
+
 afterEach(() => {
  mock.reset();
+  vi.unstubAllEnvs();
+  // modules may cache environment variables, so we need to reset them
+  vi.resetModules();
 });

 describe("Test /api/status/pat-info", () => {
-  beforeAll(() => {
-    // reset patenv first so that they are not populated with local envs
-    process.env = {};
-    process.env.PAT_1 = "testPAT1";
-    process.env.PAT_2 = "testPAT2";
-    process.env.PAT_3 = "testPAT3";
-    process.env.PAT_4 = "testPAT4";
-  });
-
  it("should return only 'validPATs' if all PATs are valid", async () => {
    mock
      .onPost("https://api.github.com/graphql")
@@ -243,7 +247,6 @@ describe("Test /api/status/pat-info", () => {
  });

  it("should have proper cache when error is thrown", async () => {
-    mock.reset();
    mock.onPost("https://api.github.com/graphql").networkError();

    const { req, res } = faker({}, {});
@@ -1,175 +1,83 @@
 // @ts-check

-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";

-import pin from "../api-renamed/pin.js";
-import { renderRepoCard } from "../src/cards/repo.js";
+const mocks = vi.hoisted(() => ({
+  pin: vi.fn(),
+  storeRequest: vi.fn(),
+  getUserAccessByName: vi.fn(),
+}));
+
+vi.mock("@stats-organization/github-readme-stats-core", async () => {
+  const { mockCore } = await import("./utils.js");
+  return mockCore({ pin: mocks.pin });
+});
+
+vi.mock("../src/common/database.js", () => ({
+  storeRequest: mocks.storeRequest,
+  getUserAccessByName: mocks.getUserAccessByName,
+}));
+
+import router from "../router.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
-import { renderError } from "../src/common/render.js";

-import { data_repo, data_user } from "./test-data/pin-data.js";
-
-import "@testing-library/jest-dom/vitest";
-
-const mock = new MockAdapter(axios);
-
-afterEach(() => {
-  mock.reset();
+const createRequest = (search = "") => ({
+  headers: {},
+  url: `/api/pin?${search}`,
 });

-describe("Test /api/pin", () => {
-  it("should test the request", async () => {
-    const req = {
-      query: {
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+const defaultCacheHeader =
+  `max-age=${CACHE_TTL.PIN_CARD.DEFAULT}, ` +
+  `s-maxage=${CACHE_TTL.PIN_CARD.DEFAULT}, ` +
+  `stale-while-revalidate=${DURATIONS.ONE_DAY}`;
+
+beforeEach(() => {
+  mocks.pin.mockReset();
+  mocks.storeRequest.mockReset().mockResolvedValue(undefined);
+  mocks.getUserAccessByName.mockReset().mockResolvedValue(null);
+  // CACHE_SECONDS is not set here, this is just to safeguard against CACHE_SECONDS being set externally
+  delete process.env.CACHE_SECONDS;
+});
+
+describe("Test /api/pin backend routing", () => {
+  it("happy path should pass query params and user PAT, respond with pin content and persist request", async () => {
+    mocks.getUserAccessByName.mockResolvedValue({ token: "user-pat" });
+    mocks.pin.mockResolvedValue({
+      status: "success",
+      content: "mock-pin-svg",
+    });
+
+    const req = createRequest(
+      "username=anuraghazra&repo=convoychat&theme=dark",
+    );
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(mocks.getUserAccessByName).toHaveBeenCalledWith("anuraghazra");
+    expect(mocks.pin).toHaveBeenCalledWith(
+      {
        username: "anuraghazra",
        repo: "convoychat",
+        theme: "dark",
      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
-
-    await pin(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      // @ts-ignore
-      renderRepoCard({
-        ...data_repo.repository,
-        starCount: data_repo.repository.stargazers.totalCount,
-      }),
-    );
-  });
-
-  it("should get the query options", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-        repo: "convoychat",
-        title_color: "fff",
-        icon_color: "fff",
-        text_color: "fff",
-        bg_color: "fff",
-        full_name: "1",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
-
-    await pin(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderRepoCard(
-        // @ts-ignore
-        {
-          ...data_repo.repository,
-          starCount: data_repo.repository.stargazers.totalCount,
-        },
-        { ...req.query },
-      ),
-    );
-  });
-
-  it("should render error card if user repo not found", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-        repo: "convoychat",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock
-      .onPost("https://api.github.com/graphql")
-      .reply(200, { data: { user: { repository: null }, organization: null } });
-
-    await pin(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({ message: "User Repository Not found" }),
-    );
-  });
-
-  it("should render error card if org repo not found", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-        repo: "convoychat",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock
-      .onPost("https://api.github.com/graphql")
-      .reply(200, { data: { user: null, organization: { repository: null } } });
-
-    await pin(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({ message: "Organization Repository Not found" }),
-    );
-  });
-
-  it("should render error card if wrong locale provided", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-        repo: "convoychat",
-        locale: "asdf",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
-
-    await pin(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "Something went wrong",
-        secondaryMessage: "Language not found",
-      }),
-    );
-  });
-
-  it("should have proper cache", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-        repo: "convoychat",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
-
-    await pin(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.setHeader).toHaveBeenCalledWith(
-      "Cache-Control",
-      `max-age=${CACHE_TTL.PIN_CARD.DEFAULT}, ` +
-        `s-maxage=${CACHE_TTL.PIN_CARD.DEFAULT}, ` +
-        `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
+      "user-pat",
    );
+    expect(req.query).toEqual({
+      username: "anuraghazra",
+      repo: "convoychat",
+      theme: "dark",
+    });
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-pin-svg");
+    expect(mocks.storeRequest).toHaveBeenCalledExactlyOnceWith(req);
  });
 });
@@ -1,41 +0,0 @@
-// @ts-check
-
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import api from "../../api-renamed/index.js";
-import { renderError } from "../../src/common/render.js";
-import { data_stats } from "../test-data/api-data.js";
-
-const mock = new MockAdapter(axios);
-
-afterEach(() => {
-  mock.reset();
-});
-
-describe("Test /api/", () => {
-  it("should render error card if username not in whitelist", async () => {
-    const req = {
-      query: {
-        username: "renovate-bot",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").replyOnce(200, data_stats);
-
-    await api(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "This username is not whitelisted",
-        secondaryMessage: "Please deploy your own instance",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
-  });
-});
@@ -1,41 +0,0 @@
-// @ts-check
-
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import gist from "../../api-renamed/gist.js";
-import { renderError } from "../../src/common/render.js";
-import { gist_data } from "../test-data/gist-data.js";
-
-const mock = new MockAdapter(axios);
-
-afterEach(() => {
-  mock.reset();
-});
-
-describe("Test /api/gist with gist whitelist", () => {
-  it("should render error card if id not in whitelist", async () => {
-    const req = {
-      query: {
-        id: "9bae0392ee3a26bac5cc388a6c8b1469",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, gist_data);
-
-    await gist(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "This gist ID is not whitelisted",
-        secondaryMessage: "Please deploy your own instance",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
-  });
-});
@@ -1,64 +0,0 @@
-// @ts-check
-
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import pin from "../../api-renamed/pin.js";
-import { renderError } from "../../src/common/render.js";
-import { data_user } from "../test-data/pin-data.js";
-
-const mock = new MockAdapter(axios);
-
-afterEach(() => {
-  mock.reset();
-});
-
-describe("Test /api/pin", () => {
-  it("should render error card if username not in whitelist", async () => {
-    const req = {
-      query: {
-        username: "renovate-bot",
-        repo: "convoychat",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
-
-    await pin(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "This username is not whitelisted",
-        secondaryMessage: "Please deploy your own instance",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
-  });
-
-  it("should render error card if missing required parameters", async () => {
-    const req = {
-      query: {},
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
-
-    await pin(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "This username is not whitelisted",
-        secondaryMessage: "Please deploy your own instance",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
-  });
-});
@@ -1,41 +0,0 @@
-// @ts-check
-
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import topLangs from "../../api-renamed/top-langs.js";
-import { renderError } from "../../src/common/render.js";
-import { data_langs } from "../test-data/langs-data.js";
-
-const mock = new MockAdapter(axios);
-
-afterEach(() => {
-  mock.reset();
-});
-
-describe("Test /api/top-langs", () => {
-  it("should render error card if username not in whitelist", async () => {
-    const req = {
-      query: {
-        username: "renovate-bot",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
-
-    await topLangs(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "This username is not whitelisted",
-        secondaryMessage: "Please deploy your own instance",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
-  });
-});
@@ -0,0 +1,514 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test /api contract > should match the private missing-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is not whitelisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api contract > should match the public blacklisted-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is blacklisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api contract > should match the public happy-path response snapshot 1`] = `
+{
+  "content": "<svg width="450" height="195" viewBox="0 0 450 195" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId">Anurag Hazra's GitHub Stats, Rank: A+</title>
+        <desc id="descId">Total Stars Earned: 14099, Total Commits  (last year) : 200, Total PRs: 4000, Total Issues: 340, Contributed to (last year): 51</desc>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .rank-text {
+      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
+      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: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+    
+    @keyframes rankAnimation {
+      from {
+        stroke-dashoffset: 251.32741228718345;
+      }
+      to {
+        stroke-dashoffset: 25.665014275610705;
+      }
+    }
+  
+  
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="449" fill="#fffefe" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">Anurag Hazra's GitHub Stats</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    <g data-testid="rank-circle" transform="translate(365, 47.5)">
+        <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">
+          
+        <text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="level-rank-icon">
+          A+
+        </text>
+      
+        </g>
+      </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Total Stars Earned:</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="stars">14.1k</text>
+    </g>
+  </g><g transform="translate(0, 25)">
+    <g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Total Commits (last year):</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="commits">200</text>
+    </g>
+  </g><g transform="translate(0, 50)">
+    <g class="stagger" style="animation-delay: 750ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Total PRs:</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="prs">4k</text>
+    </g>
+  </g><g transform="translate(0, 75)">
+    <g class="stagger" style="animation-delay: 900ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Total Issues:</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="issues">340</text>
+    </g>
+  </g><g transform="translate(0, 100)">
+    <g class="stagger" style="animation-delay: 1050ms" transform="translate(25, 0)">
+      
+      <text class="stat  bold" y="12.5">Contributed to (last year):</text>
+      <text class="stat  bold" x="204.01" y="12.5" data-testid="contribs">51</text>
+    </g>
+  </g>
+    </svg>
+  
+        </g>
+      </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api contract > should match the public many-params response snapshot 1`] = `
+{
+  "content": "<svg width="540" height="365" viewBox="0 0 540 365" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId">a custom title, Rank: A+</title>
+        <desc id="descId">कुल अर्जित सितारे: 4100, कुल commits  (2024) : 200, कुल PR: 4000, कुल PR का विलय: 3200, मर्ज किए गए PRs प्रतिशत: 80.0, कुल PRs की समीक्षा की गई: 1234, कुल चर्चाएँ शुरू हुईं: 222, कुल चर्चाओं के उत्तर: 111, (पिछले वर्ष) में योगदान दिया: 51</desc>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #123456;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #abcdef;
+    }
+    @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: #abcdef;
+      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: #ff00aa;
+      display: block;
+    }
+
+    .rank-circle-rim {
+      stroke: #654321;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #654321;
+      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;
+    }
+    
+    @keyframes rankAnimation {
+      from {
+        stroke-dashoffset: 251.32741228718345;
+      }
+      to {
+        stroke-dashoffset: 26.378312814443284;
+      }
+    }
+  
+  
+
+          
+      /* 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;
+        }
+      }
+    
+          * { animation-duration: 0s !important; animation-delay: 0s !important; }
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="539" fill="#0f172a" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">a custom title</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    <g data-testid="rank-circle" transform="translate(463.5, 132.5)">
+        <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">
+          
+        <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"/>
+        </svg>
+      
+        </g>
+      </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)">
+      
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      <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"/>
+    </svg>
+  
+      <text class="stat not_bold" x="25" y="12.5">कुल अर्जित सितारे:</text>
+      <text class="stat not_bold" x="219.01" y="12.5" data-testid="stars">4100</text>
+    </g>
+  </g><g transform="translate(0, 32)">
+    <g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)">
+      
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      <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"/>
+    </svg>
+  
+      <text class="stat not_bold" x="25" y="12.5">कुल commits (2024):</text>
+      <text class="stat not_bold" x="219.01" y="12.5" data-testid="commits">200</text>
+    </g>
+  </g><g transform="translate(0, 64)">
+    <g class="stagger" style="animation-delay: 750ms" transform="translate(25, 0)">
+      
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      <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"/>
+    </svg>
+  
+      <text class="stat not_bold" x="25" y="12.5">कुल PR:</text>
+      <text class="stat not_bold" x="219.01" y="12.5" data-testid="prs">4000</text>
+    </g>
+  </g><g transform="translate(0, 96)">
+    <g class="stagger" style="animation-delay: 900ms" transform="translate(25, 0)">
+      
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      <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"/>
+    </svg>
+  
+      <text class="stat not_bold" x="25" y="12.5">कुल PR का विलय:</text>
+      <text class="stat not_bold" x="219.01" y="12.5" data-testid="prs_merged">3200</text>
+    </g>
+  </g><g transform="translate(0, 128)">
+    <g class="stagger" style="animation-delay: 1050ms" transform="translate(25, 0)">
+      
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      <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"/>
+    </svg>
+  
+      <text class="stat not_bold" x="25" y="12.5">मर्ज किए गए PRs प्रतिशत:</text>
+      <text class="stat not_bold" x="219.01" y="12.5" data-testid="prs_merged_percentage">80.0 %</text>
+    </g>
+  </g><g transform="translate(0, 160)">
+    <g class="stagger" style="animation-delay: 1200ms" transform="translate(25, 0)">
+      
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      <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"/>
+    </svg>
+  
+      <text class="stat not_bold" x="25" y="12.5">कुल PRs की समीक्षा की गई:</text>
+      <text class="stat not_bold" x="219.01" y="12.5" data-testid="reviews">1234</text>
+    </g>
+  </g><g transform="translate(0, 192)">
+    <g class="stagger" style="animation-delay: 1350ms" transform="translate(25, 0)">
+      
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      <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"/>
+    </svg>
+  
+      <text class="stat not_bold" x="25" y="12.5">कुल चर्चाएँ शुरू हुईं:</text>
+      <text class="stat not_bold" x="219.01" y="12.5" data-testid="discussions_started">222</text>
+    </g>
+  </g><g transform="translate(0, 224)">
+    <g class="stagger" style="animation-delay: 1500ms" transform="translate(25, 0)">
+      
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      <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"/>
+    </svg>
+  
+      <text class="stat not_bold" x="25" y="12.5">कुल चर्चाओं के उत्तर:</text>
+      <text class="stat not_bold" x="219.01" y="12.5" data-testid="discussions_answered">111</text>
+    </g>
+  </g><g transform="translate(0, 256)">
+    <g class="stagger" style="animation-delay: 1650ms" transform="translate(25, 0)">
+      
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      <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"/>
+    </svg>
+  
+      <text class="stat not_bold" x="25" y="12.5">(पिछले वर्ष) में योगदान दिया:</text>
+      <text class="stat not_bold" x="219.01" y="12.5" data-testid="contribs">51</text>
+    </g>
+  </g>
+    </svg>
+  
+        </g>
+      </svg>",
+  "graphqlRequest": "{"query":"\\n  query userInfo($login: String!, $after: String, $includeMergedPullRequests: Boolean!, $includeDiscussions: Boolean!, $includeDiscussionsAnswers: Boolean!, $startTime: DateTime = null, $ownerAffiliations: [RepositoryAffiliation]) {\\n    user(login: $login) {\\n      name\\n      login\\n      commits: contributionsCollection (from: $startTime) {\\n        totalCommitContributions,\\n      }\\n      reviews: contributionsCollection {\\n        totalPullRequestReviewContributions\\n      }\\n      repositoriesContributedTo(first: 1, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {\\n        totalCount\\n      }\\n      pullRequests(first: 1) {\\n        totalCount\\n      }\\n      mergedPullRequests: pullRequests(states: MERGED) @include(if: $includeMergedPullRequests) {\\n        totalCount\\n      }\\n      openIssues: issues(states: OPEN) {\\n        totalCount\\n      }\\n      closedIssues: issues(states: CLOSED) {\\n        totalCount\\n      }\\n      followers {\\n        totalCount\\n      }\\n      repositoryDiscussions @include(if: $includeDiscussions) {\\n        totalCount\\n      }\\n      repositoryDiscussionComments(onlyAnswers: true) @include(if: $includeDiscussionsAnswers) {\\n        totalCount\\n      }\\n      \\n  repositories(first: 100, after: $after, ownerAffiliations: $ownerAffiliations, orderBy: {direction: DESC, field: STARGAZERS}) {\\n    totalCount\\n    nodes {\\n      name\\n      stargazers {\\n        totalCount\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n\\n    }\\n  }\\n","variables":{"login":"anuraghazra","first":100,"after":null,"includeMergedPullRequests":true,"includeDiscussions":true,"includeDiscussionsAnswers":true,"startTime":"2024-01-01T00:00:00Z","ownerAffiliations":["OWNER","COLLABORATOR"]}}",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api contract > should match the public missing-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">Missing params "username" make sure you pass the parameters in URL</tspan>
+      <tspan x="25" dy="18" class="gray"/>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=600, s-maxage=600, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api contract > should render error card in same theme as requested card 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#0a0f0b" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abd200 }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #68b587 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#0a0f0b" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">Missing params "username" make sure you pass the parameters in URL</tspan>
+      <tspan x="25" dy="18" class="gray"/>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=600, s-maxage=600, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
@@ -0,0 +1,252 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test /api/gist contract > should match the private missing-id response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This gist ID is not whitelisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/gist contract > should match the public happy-path response snapshot 1`] = `
+{
+  "content": "<svg width="400" height="192" viewBox="0 0 400 192" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .icon { fill: #586069 }
+  
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="399" fill="#fffefe" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <svg class="icon" x="0" y="-13" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(25, 0)">
+      <text x="0" y="0" class="header" data-testid="header">countries.json</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    <text class="description" x="25" y="-5">
+        <tspan dy="1.2em" x="25">List of countries and territories in English and Spanish:</tspan><tspan dy="1.2em" x="25">name, continent, capital, dial code, country codes, TLD,</tspan><tspan dy="1.2em" x="25">and area in sq km. Lista de países y territorios en</tspan><tspan dy="1.2em" x="25">Inglés y Español: nombre, continente, capital,</tspan><tspan dy="1.2em" x="25">código de teléfono, códigos de país,</tspan><tspan dy="1.2em" x="25">dominio y área en km cuadrados. Updated 2023</tspan>
+    </text>
+
+    <g transform="translate(30, 117)">
+        <g transform="translate(0, 0)">
+    <g data-testid="primary-lang">
+      <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="#292929"/>
+      <text data-testid="lang-name" class="gray" x="15">JSON</text>
+    </g>
+    </g><g transform="translate(56.96875, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="starsCount" class="gray">33</text></g></g><g transform="translate(111.28125, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="forksCount" class="gray">11</text></g></g>
+    </g>
+  
+        </g>
+      </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/gist contract > should match the public many-params response snapshot 1`] = `
+{
+  "content": "<svg width="400" height="192" viewBox="0 0 400 192" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #123456;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .icon { fill: #ff00aa }
+  
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="399" fill="#0f172a" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <svg class="icon" x="0" y="-13" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(25, 0)">
+      <text x="0" y="0" class="header" data-testid="header">Yizack/countries.json</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    <text class="description" x="25" y="-5">
+        <tspan dy="1.2em" x="25">List of countries and territories in English and Spanish:</tspan><tspan dy="1.2em" x="25">name, continent, capital, dial code, country codes, TLD,</tspan><tspan dy="1.2em" x="25">and area in sq km. Lista de países y territorios en</tspan><tspan dy="1.2em" x="25">Inglés y Español: nombre, continente, capital,</tspan><tspan dy="1.2em" x="25">código de teléfono, códigos de país,</tspan><tspan dy="1.2em" x="25">dominio y área en km cuadrados. Updated 2023</tspan>
+    </text>
+
+    <g transform="translate(30, 117)">
+        <g transform="translate(0, 0)">
+    <g data-testid="primary-lang">
+      <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="#292929"/>
+      <text data-testid="lang-name" class="gray" x="15">JSON</text>
+    </g>
+    </g><g transform="translate(56.96875, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="starsCount" class="gray">33</text></g></g><g transform="translate(111.28125, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="forksCount" class="gray">11</text></g></g>
+    </g>
+  
+        </g>
+      </svg>",
+  "graphqlRequest": "{"query":"\\nquery gistInfo($gistName: String!) {\\n    viewer {\\n        gist(name: $gistName) {\\n            description\\n            owner {\\n                login\\n            }\\n            stargazerCount\\n            forks {\\n                totalCount\\n            }\\n            files {\\n                name\\n                language {\\n                    name\\n                }\\n                size\\n            }\\n        }\\n    }\\n}\\n","variables":{"gistName":"happy-gist-id"}}",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/gist contract > should match the public missing-id response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">Missing params "id" make sure you pass the parameters in URL</tspan>
+      <tspan x="25" dy="18" class="gray">/api/gist?id=GIST_ID</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=600, s-maxage=600, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
@@ -0,0 +1,406 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test /api/pin contract > should match the private missing-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is not whitelisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/pin contract > should match the private non-whitelisted username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is not whitelisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/pin contract > should match the public blacklisted-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is blacklisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/pin contract > should match the public happy-path response snapshot 1`] = `
+{
+  "content": "<svg width="400" height="150" viewBox="0 0 400 150" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
+    .badge rect { opacity: 0.2 }
+    
+    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+    .icon {
+      fill: #586069;
+      display: block;
+    }
+  
+
+          
+      /* 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;
+        }
+      }
+    
+          * { animation-duration: 0s !important; animation-delay: 0s !important; }
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="399" fill="#fffefe" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <svg class="icon" x="0" y="-13" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(25, 0)">
+      <text x="0" y="0" class="header" data-testid="header">convoychat</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    
+
+    <text class="description" x="25" y="-5">
+      <tspan dy="1.2em" x="25">Help us take over the world with a deeply customizable</tspan><tspan dy="1.2em" x="25">React, TypeScript and GraphQL chat app that has enough text</tspan><tspan dy="1.2em" x="25">to wrap across multiple lines in the repository card.</tspan>
+    </text>
+
+    <g transform="translate(30, 75)">
+      <g transform="translate(0, 0)">
+    <g data-testid="primary-lang">
+      <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="#2b7489"/>
+      <text data-testid="lang-name" class="gray" x="15">TypeScript</text>
+    </g>
+    </g><g transform="translate(82.24375, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="stargazers" class="gray">38k</text></g></g><g transform="translate(142.55625, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="forkcount" class="gray">100</text></g></g>
+    </g>
+    
+  <svg x="0" y="0"><g transform="translate(-3, 98)">
+      
+    </g></svg>
+    
+  
+        </g>
+      </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/pin contract > should match the public many-params response snapshot 1`] = `
+{
+  "content": "<svg width="560" height="233" viewBox="0 0 560 233" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #123456;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
+    .badge rect { opacity: 0.2 }
+    
+    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+    .icon {
+      fill: #ff00aa;
+      display: block;
+    }
+  
+
+          
+      /* 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;
+        }
+      }
+    
+          * { animation-duration: 0s !important; animation-delay: 0s !important; }
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="559" fill="#0f172a" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <svg class="icon" x="0" y="-13" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(25, 0)">
+      <text x="0" y="0" class="header" data-testid="header">anuraghazra/convoychat</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    
+
+    <text class="description" x="25" y="-5">
+      <tspan dy="1.2em" x="25">Help us take over the world with a deeply customizable React, TypeScript and GraphQL...</tspan>
+    </text>
+
+    <g transform="translate(30, 45)">
+      <g transform="translate(0, 0)">
+    <g data-testid="primary-lang">
+      <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="#2b7489"/>
+      <text data-testid="lang-name" class="gray" x="15">TypeScript</text>
+    </g>
+    </g><g transform="translate(82.24375, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="stargazers" class="gray">38k</text></g></g><g transform="translate(142.55625, 0)"><g transform="translate(0, 0)">
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        <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"/>
+      </svg>
+    </g><g transform="translate(20, 0)"><text data-testid="forkcount" class="gray">100</text></g></g>
+    </g>
+    
+  <svg x="0" y="0"><g transform="translate(-3, 68)">
+      <g transform="translate(0, 0)"><g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)"><a href="https://github.com/search?q=repo%3Aanuraghazra%2Fconvoychat%20author%3Aanuraghazra&amp;type=pullrequests">
+      
+      <text class="stat  bold" y="12.5">my created PRs:</text>
+      <text class="stat  bold" x="139.01" y="12.5" data-testid="prs_authored">1234</text></a>
+    </g>
+  </g><g transform="translate(210, 0)">
+    <g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)"><a href="https://github.com/search?q=repo%3Aanuraghazra%2Fconvoychat%20commenter%3Aanuraghazra+-author%3Aanuraghazra&amp;type=pullrequests">
+      
+      <text class="stat  bold" y="12.5">my commented PRs:</text>
+      <text class="stat  bold" x="139.01" y="12.5" data-testid="prs_commented">2345</text></a>
+    </g>
+  </g></g><g transform="translate(0, 30)"><g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 750ms" transform="translate(25, 0)"><a href="https://github.com/search?q=repo%3Aanuraghazra%2Fconvoychat%20reviewed-by%3Aanuraghazra+-author%3Aanuraghazra&amp;type=pullrequests">
+      
+      <text class="stat  bold" y="12.5">my reviewed PRs:</text>
+      <text class="stat  bold" x="139.01" y="12.5" data-testid="prs_reviewed">3456</text></a>
+    </g>
+  </g><g transform="translate(210, 0)">
+    <g class="stagger" style="animation-delay: 900ms" transform="translate(25, 0)"><a href="https://github.com/search?q=repo%3Aanuraghazra%2Fconvoychat%20author%3Aanuraghazra&amp;type=issues">
+      
+      <text class="stat  bold" y="12.5">my created issues:</text>
+      <text class="stat  bold" x="139.01" y="12.5" data-testid="issues_authored">4567</text></a>
+    </g>
+  </g></g><g transform="translate(0, 60)"><g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 1050ms" transform="translate(25, 0)"><a href="https://github.com/search?q=repo%3Aanuraghazra%2Fconvoychat%20commenter%3Aanuraghazra+-author%3Aanuraghazra&amp;type=issues">
+      
+      <text class="stat  bold" y="12.5">my commented issues:</text>
+      <text class="stat  bold" x="139.01" y="12.5" data-testid="issues_commented">5678</text></a>
+    </g>
+  </g></g>
+    </g></svg>
+    
+  
+        </g>
+      </svg>",
+  "graphqlRequest": "{"query":"\\n      fragment RepoInfo on Repository {\\n        name\\n        nameWithOwner\\n        isPrivate\\n        isArchived\\n        isTemplate\\n        stargazers {\\n          totalCount\\n        }\\n        description\\n        primaryLanguage {\\n          color\\n          id\\n          name\\n        }\\n        forkCount\\n      }\\n      query getRepo($login: String!, $repo: String!) {\\n        user(login: $login) {\\n          repository(name: $repo) {\\n            ...RepoInfo\\n          }\\n        }\\n        organization(login: $login) {\\n          repository(name: $repo) {\\n            ...RepoInfo\\n          }\\n        }\\n      }\\n    ","variables":{"login":"anuraghazra","repo":"convoychat"}}",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/pin contract > should match the public missing-params response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">Missing params "username", "repo" make sure you pass the parameters in URL</tspan>
+      <tspan x="25" dy="18" class="gray">/api/pin?username=USERNAME&amp;repo=REPO_NAME</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=600, s-maxage=600, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/pin contract > should render error card in same theme as requested card 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#0a0f0b" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abd200 }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #68b587 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#0a0f0b" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">Missing params "username", "repo" make sure you pass the parameters in URL</tspan>
+      <tspan x="25" dy="18" class="gray">/api/pin?username=USERNAME&amp;repo=REPO_NAME</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=600, s-maxage=600, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
@@ -0,0 +1,460 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test /api/top-langs contract > should match the private missing-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is not whitelisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/top-langs contract > should match the private non-whitelisted username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is not whitelisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/top-langs contract > should match the public blacklisted-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is blacklisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/top-langs contract > should match the public happy-path response snapshot 1`] = `
+{
+  "content": "<svg width="300" height="285" viewBox="0 0 300 285" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    @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: #434d58;
+    }
+    @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: #434d58;
+    }
+    .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;
+    }
+    
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="299" fill="#fffefe" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">Most Used Languages</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    <svg data-testid="lang-items" x="25">
+      <g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms">
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">Rust</text>
+      <text x="215" y="34" class="lang-name">70.92%</text>
+      
+    <svg width="205" x="0" y="25">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <svg data-testid="lang-progress" width="70.92198581560284%">
+        <rect height="8" fill="#dea584" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 750ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 40)">
+    <g class="stagger" style="animation-delay: 600ms">
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">HTML</text>
+      <text x="215" y="34" class="lang-name">12.77%</text>
+      
+    <svg width="205" x="0" y="25">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <svg data-testid="lang-progress" width="12.76595744680851%">
+        <rect height="8" fill="#0f0" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 900ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 80)">
+    <g class="stagger" style="animation-delay: 750ms">
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">JavaScript</text>
+      <text x="215" y="34" class="lang-name">8.51%</text>
+      
+    <svg width="205" x="0" y="25">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <svg data-testid="lang-progress" width="8.51063829787234%">
+        <rect height="8" fill="#0ff" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1050ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 120)">
+    <g class="stagger" style="animation-delay: 900ms">
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">TypeScript</text>
+      <text x="215" y="34" class="lang-name">6.38%</text>
+      
+    <svg width="205" x="0" y="25">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <svg data-testid="lang-progress" width="6.382978723404255%">
+        <rect height="8" fill="#3178c6" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1200ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 160)">
+    <g class="stagger" style="animation-delay: 1050ms">
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">Java</text>
+      <text x="215" y="34" class="lang-name">1.42%</text>
+      
+    <svg width="205" x="0" y="25">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
+      <svg data-testid="lang-progress" width="2%">
+        <rect height="8" fill="#f00" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1350ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g>
+    </svg>
+  
+        </g>
+      </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/top-langs contract > should match the public many-params response snapshot 1`] = `
+{
+  "content": "<svg width="420" height="110" viewBox="0 0 420 110" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #123456;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    @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: #abcdef;
+    }
+    @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: #abcdef;
+    }
+    .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;
+    }
+    
+
+          
+      /* 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;
+        }
+      }
+    
+          * { animation-duration: 0s !important; animation-delay: 0s !important; }
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="419" fill="#0f172a" stroke-opacity="0"/>
+
+        
+
+        <g data-testid="main-card-body" transform="translate(0, 25)">
+          
+    <svg data-testid="lang-items" x="25">
+      
+  
+      <mask id="rect-mask">
+          <rect x="0" y="0" width="370" height="8" fill="white" rx="5"/>
+        </mask>
+        
+        <rect mask="url(#rect-mask)" data-testid="lang-progress" x="0" y="0" width="256.98" height="8" fill="#3178c6"/>
+      
+        <rect mask="url(#rect-mask)" data-testid="lang-progress" x="256.98" y="0" width="60.57" height="8" fill="#f00"/>
+      
+        <rect mask="url(#rect-mask)" data-testid="lang-progress" x="317.55" y="0" width="52.45" height="8" fill="#00f"/>
+      
+      
+    <g transform="translate(0, 25)">
+      <g transform="translate(0, 0)"><g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms">
+      <circle cx="5" cy="6" r="5" fill="#3178c6"/>
+      <text data-testid="lang-name" x="15" y="10" class="lang-name">
+        TypeScript 19.0 B
+      </text>
+    </g>
+  </g><g transform="translate(0, 25)">
+    <g class="stagger" style="animation-delay: 600ms">
+      <circle cx="5" cy="6" r="5" fill="#f00"/>
+      <text data-testid="lang-name" x="15" y="10" class="lang-name">
+        Java 4.5 B
+      </text>
+    </g>
+  </g></g><g transform="translate(150, 0)"><g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms">
+      <circle cx="5" cy="6" r="5" fill="#00f"/>
+      <text data-testid="lang-name" x="15" y="10" class="lang-name">
+        Python 3.9 B
+      </text>
+    </g>
+  </g></g>
+    </g>
+  
+    </svg>
+  
+        </g>
+      </svg>",
+  "graphqlRequest": "{"query":"\\n      query userInfo($login: String!, $ownerAffiliations: [RepositoryAffiliation]) {\\n        user(login: $login) {\\n          # do not fetch forks\\n          repositories(ownerAffiliations: $ownerAffiliations, isFork: false, first: 100) {\\n            nodes {\\n              name\\n              languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {\\n                edges {\\n                  size\\n                  node {\\n                    color\\n                    name\\n                  }\\n                }\\n              }\\n            }\\n          }\\n        }\\n      }\\n      ","variables":{"login":"anuraghazra","ownerAffiliations":["OWNER","COLLABORATOR"]}}",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/top-langs contract > should match the public missing-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">Missing params "username" make sure you pass the parameters in URL</tspan>
+      <tspan x="25" dy="18" class="gray"/>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=600, s-maxage=600, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/top-langs contract > should render error card in same theme as requested card 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#0a0f0b" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abd200 }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #68b587 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#0a0f0b" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">Missing params "username" make sure you pass the parameters in URL</tspan>
+      <tspan x="25" dy="18" class="gray"/>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=600, s-maxage=600, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
@@ -0,0 +1,546 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test /api/wakatime contract > should match the private missing-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is not whitelisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/wakatime contract > should match the private non-whitelisted username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">This username is not whitelisted</tspan>
+      <tspan x="25" dy="18" class="gray">Please deploy your own instance</tspan>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/wakatime contract > should match the public happy-path response snapshot 1`] = `
+{
+  "content": "<svg width="495" height="195" viewBox="0 0 495 195" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="494" fill="#fffefe" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">WakaTime Stats (last 7 days)</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    <svg x="0" y="0" width="100%">
+      <g transform="translate(0, 0)">
+    <g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="TypeScript">TypeScript:</text>
+      <text class="stat" x="350" y="12.5">12 hrs</text>
+      
+    <svg width="220" x="110" y="4">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <svg data-testid="lang-progress" width="52%">
+        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 750ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 25)">
+    <g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="JavaScript">JavaScript:</text>
+      <text class="stat" x="350" y="12.5">6 hrs 30 mins</text>
+      
+    <svg width="220" x="110" y="4">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <svg data-testid="lang-progress" width="28%">
+        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 900ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 50)">
+    <g class="stagger" style="animation-delay: 750ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="Other">Other:</text>
+      <text class="stat" x="350" y="12.5">3 hrs</text>
+      
+    <svg width="220" x="110" y="4">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <svg data-testid="lang-progress" width="13%">
+        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1050ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 75)">
+    <g class="stagger" style="animation-delay: 900ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="YAML">YAML:</text>
+      <text class="stat" x="350" y="12.5">1 hr</text>
+      
+    <svg width="220" x="110" y="4">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <svg data-testid="lang-progress" width="4%">
+        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1200ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g><g transform="translate(0, 100)">
+    <g class="stagger" style="animation-delay: 1050ms" transform="translate(25, 0)">
+      <text class="stat bold" y="12.5" data-testid="JSON">JSON:</text>
+      <text class="stat" x="350" y="12.5">30 mins</text>
+      
+    <svg width="220" x="110" y="4">
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"/>
+      <svg data-testid="lang-progress" width="3%">
+        <rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: 1350ms;"/>
+      </svg>
+    </svg>
+  
+    </g>
+  </g>
+    </svg>
+  
+        </g>
+      </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/wakatime contract > should match the public inaccessible-profile response snapshot 1`] = `
+{
+  "content": "<svg width="495" height="150" viewBox="0 0 495 150" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #2f80ed;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="494" fill="#fffefe" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">WakaTime Stats</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    <svg x="0" y="0" width="100%">
+      <g transform="translate(0, 0)">
+    <text x="25" y="11" class="stat bold" fill="#434d58">WakaTime user profile not public</text>
+  </g>
+    </svg>
+  
+        </g>
+      </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/wakatime contract > should match the public many-params response snapshot 1`] = `
+{
+  "content": "<svg width="620" height="140" viewBox="0 0 620 140" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+        <title id="titleId"/>
+        <desc id="descId"/>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: #123456;
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          
+    
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #abcdef;
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    
+
+          
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    
+          * { animation-duration: 0s !important; animation-delay: 0s !important; }
+        </style>
+
+        
+
+        <rect data-testid="card-bg" x="0.5" y="0.5" rx="12" height="99%" stroke="#fedcba" width="619" fill="#0f172a" stroke-opacity="1"/>
+
+        
+      <g data-testid="card-title" transform="translate(25, 35)">
+        <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">a custom title</text>
+    </g>
+      </g>
+    
+
+        <g data-testid="main-card-body" transform="translate(0, 55)">
+          
+    <svg x="0" y="0" width="100%">
+      
+      <mask id="rect-mask">
+      <rect x="25" y="0" width="565" height="8" fill="white" rx="5"/>
+      </mask>
+      
+          <rect mask="url(#rect-mask)" data-testid="lang-progress" x="0" y="0" width="365.09200000000004" height="8" fill="#3178c6"/>
+        
+          <rect mask="url(#rect-mask)" data-testid="lang-progress" x="365.09200000000004" y="0" width="196.588" height="8" fill="#f1e05a"/>
+        
+          <rect mask="url(#rect-mask)" data-testid="lang-progress" x="561.6800000000001" y="0" width="28.084" height="8" fill="#cb171e"/>
+        
+      
+    <g transform="translate(25, 25)">
+      <circle cx="5" cy="6" r="5" fill="#3178c6"/>
+      <text data-testid="lang-name" x="15" y="10" class="lang-name">
+        TypeScript - 61.88 %
+      </text>
+    </g>
+  
+    <g transform="translate(292.5, 25)">
+      <circle cx="5" cy="6" r="5" fill="#f1e05a"/>
+      <text data-testid="lang-name" x="15" y="10" class="lang-name">
+        JavaScript - 33.32 %
+      </text>
+    </g>
+  
+    <g transform="translate(25, 50)">
+      <circle cx="5" cy="6" r="5" fill="#cb171e"/>
+      <text data-testid="lang-name" x="15" y="10" class="lang-name">
+        YAML - 4.76 %
+      </text>
+    </g>
+  
+    
+    </svg>
+  
+        </g>
+      </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=36000, s-maxage=36000, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/wakatime contract > should match the public missing-username response snapshot 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#fffefe" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#fffefe" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">Missing params "username" make sure you pass the parameters in URL</tspan>
+      <tspan x="25" dy="18" class="gray"/>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=600, s-maxage=600, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
+
+exports[`Test /api/wakatime contract > should render error card in same theme as requested card 1`] = `
+{
+  "content": "<svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="#0a0f0b" xmlns="http://www.w3.org/2000/svg">
+    <style>
+    .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abd200 }
+    .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #68b587 }
+    .gray { fill: #858585 }
+    </style>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#0a0f0b" stroke="#e4e2e2"/>
+    <text x="25" y="45" class="text">Something went wrong!</text>
+    <text data-testid="message" x="25" y="55" class="text small">
+      <tspan x="25" dy="18">Missing params "username" make sure you pass the parameters in URL</tspan>
+      <tspan x="25" dy="18" class="gray"/>
+    </text>
+    </svg>",
+  "headers": [
+    [
+      "Cache-Control",
+      "max-age=600, s-maxage=600, stale-while-revalidate=86400",
+    ],
+    [
+      "Content-Type",
+      "image/svg+xml",
+    ],
+  ],
+}
+`;
@@ -2,40 +2,176 @@

 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

-import api from "../../api-renamed/index.js";
-import { renderError } from "../../src/common/render.js";
-import { data_stats } from "../test-data/api-data.js";
+import { data_stats, normalizeSvg } from "../utils.js";

 const mock = new MockAdapter(axios);

+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+beforeEach(() => {
+  vi.stubEnv("CACHE_SECONDS", "");
+  vi.stubEnv("GIST_WHITELIST", "");
+  vi.stubEnv("POSTGRES_URL", "");
+  vi.stubEnv("WHITELIST", "");
+
+  mock.onPost("https://api.github.com/graphql").reply(200, data_stats);
+});
+
 afterEach(() => {
  mock.reset();
+  vi.unstubAllEnvs();
+  // modules may cache environment variables, so we need to reset them
+  vi.resetModules();
 });

-describe("Test /api/", () => {
-  it("should render error card if username in blacklist", async () => {
+describe("Test /api contract", () => {
+  it("should match the public happy-path response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
    const req = {
-      query: {
-        username: "renovate-bot",
-      },
+      headers: {},
+      url: "/api?username=anuraghazra",
    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public many-params response snapshot", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_stats);
+
+    const { default: router } = await import("../../router.js");
+
+    const params = new URLSearchParams({
+      username: "anuraghazra",
+      show_icons: "true",
+      card_width: "540",
+      line_height: "32",
+      title_color: "123456",
+      ring_color: "654321",
+      icon_color: "ff00aa",
+      text_color: "abcdef",
+      text_bold: "false",
+      bg_color: "0f172a",
+      exclude_repo: "repo-exclude-me",
+      custom_title: "a custom title",
+      locale: "hi",
+      disable_animations: "true",
+      border_radius: "12",
+      number_format: "long",
+      number_precision: "1",
+      border_color: "fedcba",
+      rank_icon: "github",
+      commits_year: "2024",
+      hide: "issues",
+      role: "OWNER,COLLABORATOR",
+      show: "reviews,prs_merged,prs_merged_percentage,discussions_started,discussions_answered",
+    });
+
+    const req = {
+      headers: {},
+      url: `/api?${params.toString()}`,
    };
-    mock.onPost("https://api.github.com/graphql").replyOnce(200, data_stats);
+    const res = createResponse();

-    await api(req, res);
+    await router(req, res);

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "This username is blacklisted",
-        secondaryMessage: "Please deploy your own instance",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      graphqlRequest: mock.history.post[0].data,
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public missing-username response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should render error card in same theme as requested card", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api?theme=merko",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public blacklisted-username response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api?username=renovate-bot",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the private missing-username response snapshot", async () => {
+    vi.stubEnv("WHITELIST", "anuraghazra");
+
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
  });
 });
@@ -2,38 +2,123 @@

 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

-import gist from "../../api-renamed/gist.js";
-import { renderError } from "../../src/common/render.js";
-import { gist_data } from "../test-data/gist-data.js";
+import { happy_path_gist_data, normalizeSvg } from "../utils.js";

 const mock = new MockAdapter(axios);

+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+beforeEach(() => {
+  vi.stubEnv("CACHE_SECONDS", "");
+  vi.stubEnv("GIST_WHITELIST", "");
+  vi.stubEnv("POSTGRES_URL", "");
+  vi.stubEnv("WHITELIST", "");
+
+  mock
+    .onPost("https://api.github.com/graphql")
+    .reply(200, happy_path_gist_data);
+});
+
 afterEach(() => {
  mock.reset();
+  vi.unstubAllEnvs();
+  // modules may cache environment variables, so we need to reset them
+  vi.resetModules();
 });

-describe("Test /api/gist", () => {
-  it("should render error if id is not provided", async () => {
+describe("Test /api/gist contract", () => {
+  it("should match the public happy-path response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
    const req = {
-      query: {},
+      headers: {},
+      url: "/api/gist?id=happy-gist-id",
    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public many-params response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const params = new URLSearchParams({
+      id: "happy-gist-id",
+      title_color: "123456",
+      icon_color: "ff00aa",
+      text_color: "abcdef",
+      bg_color: "0f172a",
+      border_radius: "12",
+      border_color: "fedcba",
+      show_owner: "true",
+    });
+
+    const req = {
+      headers: {},
+      url: `/api/gist?${params.toString()}`,
    };
-    mock.onPost("https://api.github.com/graphql").reply(200, gist_data);
+    const res = createResponse();

-    await gist(req, res);
+    await router(req, res);

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: 'Missing params "id" make sure you pass the parameters in URL',
-        secondaryMessage: "/api/gist?id=GIST_ID",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      graphqlRequest: mock.history.post[0].data,
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public missing-id response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/gist",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the private missing-id response snapshot", async () => {
+    vi.stubEnv("GIST_WHITELIST", "allowed-gist-id");
+
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/gist",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
  });
 });
@@ -2,64 +2,215 @@

 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

-import pin from "../../api-renamed/pin.js";
-import { renderError } from "../../src/common/render.js";
-import { data_user } from "../test-data/pin-data.js";
+import { data_user, normalizeSvg } from "../utils.js";

 const mock = new MockAdapter(axios);

+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+beforeEach(() => {
+  vi.stubEnv("CACHE_SECONDS", "");
+  vi.stubEnv("GIST_WHITELIST", "");
+  vi.stubEnv("POSTGRES_URL", "");
+  vi.stubEnv("WHITELIST", "");
+
+  mock.onPost("https://api.github.com/graphql").reply(200, data_user);
+});
+
 afterEach(() => {
  mock.reset();
+  vi.unstubAllEnvs();
+  // modules may cache environment variables, so we need to reset them
+  vi.resetModules();
 });

-describe("Test /api/pin", () => {
-  it("should render error card if username in blacklist", async () => {
+describe("Test /api/pin contract", () => {
+  it("should match the public happy-path response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
    const req = {
-      query: {
-        username: "renovate-bot",
-        repo: "convoychat",
-      },
+      headers: {},
+      url: "/api/pin?username=anuraghazra&repo=convoychat",
    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
+    const res = createResponse();

-    await pin(req, res);
+    await router(req, res);

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "This username is blacklisted",
-        secondaryMessage: "Please deploy your own instance",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
  });

-  it("should render error card if missing required parameters", async () => {
-    const req = {
-      query: {},
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
+  it("should match the public many-params response snapshot", async () => {
    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
+    mock
+      .onGet(
+        "https://api.github.com/search/issues?per_page=1&q=repo:anuraghazra/convoychat+author:anuraghazra+type:pr",
+      )
+      .reply(200, { total_count: 1234 });
+    mock
+      .onGet(
+        "https://api.github.com/search/issues?per_page=1&q=repo:anuraghazra/convoychat+commenter:anuraghazra+-author:anuraghazra+type:pr",
+      )
+      .reply(200, { total_count: 2345 });
+    mock
+      .onGet(
+        "https://api.github.com/search/issues?per_page=1&q=repo:anuraghazra/convoychat+reviewed-by:anuraghazra+-author:anuraghazra+type:pr",
+      )
+      .reply(200, { total_count: 3456 });
+    mock
+      .onGet(
+        "https://api.github.com/search/issues?per_page=1&q=repo:anuraghazra/convoychat+author:anuraghazra+type:issue",
+      )
+      .reply(200, { total_count: 4567 });
+    mock
+      .onGet(
+        "https://api.github.com/search/issues?per_page=1&q=repo:anuraghazra/convoychat+commenter:anuraghazra+-author:anuraghazra+type:issue",
+      )
+      .reply(200, { total_count: 5678 });

-    await pin(req, res);
+    const { default: router } = await import("../../router.js");

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message:
-          'Missing params "username", "repo" make sure you pass the parameters in URL',
-        secondaryMessage: "/api/pin?username=USERNAME&amp;repo=REPO_NAME",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
+    const params = new URLSearchParams({
+      username: "anuraghazra",
+      repo: "convoychat",
+      title_color: "123456",
+      icon_color: "ff00aa",
+      text_color: "abcdef",
+      bg_color: "0f172a",
+      card_width: "560",
+      show_owner: "true",
+      show: "prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented",
+      show_icons: "false",
+      number_format: "long",
+      text_bold: "true",
+      line_height: "30",
+      border_radius: "12",
+      border_color: "fedcba",
+      description_lines_count: "1",
+    });
+
+    const req = {
+      headers: {},
+      url: `/api/pin?${params.toString()}`,
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      graphqlRequest: mock.history.post[0].data,
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public missing-params response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/pin",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should render error card in same theme as requested card", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/pin?theme=merko",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public blacklisted-username response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/pin?username=renovate-bot&repo=convoychat",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the private non-whitelisted username response snapshot", async () => {
+    vi.stubEnv("WHITELIST", "anuraghazra");
+
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/pin?username=martin-mfg",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the private missing-username response snapshot", async () => {
+    vi.stubEnv("WHITELIST", "anuraghazra");
+
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/pin",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
  });
 });
@@ -2,40 +2,190 @@

 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

-import topLangs from "../../api-renamed/top-langs.js";
-import { renderError } from "../../src/common/render.js";
-import { data_langs } from "../test-data/langs-data.js";
+import { data_langs, normalizeSvg } from "../utils.js";

 const mock = new MockAdapter(axios);

+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+beforeEach(() => {
+  vi.stubEnv("CACHE_SECONDS", "");
+  vi.stubEnv("GIST_WHITELIST", "");
+  vi.stubEnv("POSTGRES_URL", "");
+  vi.stubEnv("WHITELIST", "");
+
+  mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
+});
+
 afterEach(() => {
  mock.reset();
+  vi.unstubAllEnvs();
+  // modules may cache environment variables, so we need to reset them
+  vi.resetModules();
 });

-describe("Test /api/top-langs", () => {
-  it("should render error card if username in blacklist", async () => {
+describe("Test /api/top-langs contract", () => {
+  it("should match the public happy-path response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
    const req = {
-      query: {
-        username: "renovate-bot",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
+      headers: {},
+      url: "/api/top-langs?username=anuraghazra",
    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public many-params response snapshot", async () => {
    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);

-    await topLangs(req, res);
+    const { default: router } = await import("../../router.js");

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "This username is blacklisted",
-        secondaryMessage: "Please deploy your own instance",
-        renderOptions: { show_repo_link: false },
-      }),
-    );
+    const params = new URLSearchParams({
+      username: "anuraghazra",
+      hide: "javascript,HTML",
+      hide_title: "true",
+      hide_border: "true",
+      card_width: "420",
+      title_color: "123456",
+      text_color: "abcdef",
+      bg_color: "0f172a",
+      layout: "compact",
+      langs_count: "3",
+      exclude_repo: "repo-hidden",
+      size_weight: "0.5",
+      count_weight: "1",
+      role: "OWNER,COLLABORATOR",
+      disable_animations: "true",
+      stats_format: "bytes",
+    });
+
+    const req = {
+      headers: {},
+      url: `/api/top-langs?${params.toString()}`,
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      graphqlRequest: mock.history.post[0].data,
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public missing-username response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/top-langs",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should render error card in same theme as requested card", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/top-langs?theme=merko",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public blacklisted-username response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/top-langs?username=renovate-bot",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the private non-whitelisted username response snapshot", async () => {
+    vi.stubEnv("WHITELIST", "anuraghazra");
+
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/top-langs?username=martin-mfg",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the private missing-username response snapshot", async () => {
+    vi.stubEnv("WHITELIST", "anuraghazra");
+
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/top-langs",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
  });
 });
@@ -0,0 +1,212 @@
+// @ts-check
+
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { normalizeSvg, wakaTimeData } from "../utils.js";
+
+const mock = new MockAdapter(axios);
+
+const wakaTimeProfileNotPublicData = {
+  data: {
+    viewer: {
+      gist: null,
+    },
+  },
+};
+
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});
+
+beforeEach(() => {
+  vi.stubEnv("CACHE_SECONDS", "");
+  vi.stubEnv("GIST_WHITELIST", "");
+  vi.stubEnv("POSTGRES_URL", "");
+  vi.stubEnv("WHITELIST", "");
+
+  mock
+    .onGet(
+      "https://wakatime.com/api/v1/users/anuraghazra/stats?is_including_today=true",
+    )
+    .reply(200, wakaTimeData);
+});
+
+afterEach(() => {
+  mock.reset();
+  vi.unstubAllEnvs();
+  // modules may cache environment variables, so we need to reset them
+  vi.resetModules();
+});
+
+describe("Test /api/wakatime contract", () => {
+  it("should match the public happy-path response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/wakatime?username=anuraghazra",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public many-params response snapshot", async () => {
+    mock.reset(); // to verify api_domain param is working
+    mock
+      .onGet(
+        "https://wakatime.local/api/v1/users/anuraghazra/stats?is_including_today=true",
+      )
+      .reply(200, wakaTimeData);
+
+    const { default: router } = await import("../../router.js");
+
+    const params = new URLSearchParams({
+      username: "anuraghazra",
+      title_color: "123456",
+      text_color: "abcdef",
+      bg_color: "0f172a",
+      card_width: "620",
+      custom_title: "a custom title",
+      layout: "compact",
+      langs_count: "3",
+      hide: "other",
+      api_domain: "wakatime.local",
+      border_radius: "12",
+      border_color: "fedcba",
+      display_format: "percent",
+      disable_animations: "true",
+    });
+
+    const req = {
+      headers: {},
+      url: `/api/wakatime?${params.toString()}`,
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public missing-username response snapshot", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/wakatime",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should render error card in same theme as requested card", async () => {
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/wakatime?theme=merko",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the public inaccessible-profile response snapshot", async () => {
+    mock.reset();
+    mock
+      .onGet(
+        "https://wakatime.com/api/v1/users/anuraghazra/stats?is_including_today=true",
+      )
+      .reply(200, wakaTimeProfileNotPublicData);
+
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/wakatime?username=anuraghazra",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the private non-whitelisted username response snapshot", async () => {
+    vi.stubEnv("WHITELIST", "anuraghazra");
+
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/wakatime?username=martin-mfg",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+
+  it("should match the private missing-username response snapshot", async () => {
+    vi.stubEnv("WHITELIST", "anuraghazra");
+
+    const { default: router } = await import("../../router.js");
+
+    const req = {
+      headers: {},
+      url: "/api/wakatime",
+    };
+    const res = createResponse();
+
+    await router(req, res);
+
+    expect(res.end).toHaveBeenCalledOnce();
+
+    expect({
+      headers: res.setHeader.mock.calls,
+      content: normalizeSvg(res.end.mock.calls[0][0]),
+    }).toMatchSnapshot();
+  });
+});
@@ -1,51 +0,0 @@
-// @ts-check
-
-/**
- * @type {import("../../src/fetchers/stats").StatsData}
- */
-export const stats = {
-  name: "Anurag Hazra",
-  totalStars: 100,
-  totalCommits: 200,
-  totalIssues: 300,
-  totalPRs: 400,
-  totalPRsMerged: 320,
-  mergedPRsPercentage: 80,
-  totalReviews: 50,
-  totalDiscussionsStarted: 10,
-  totalDiscussionsAnswered: 40,
-  contributedTo: 50,
-  rank: { level: "DEV", percentile: 0 },
-};
-
-export const data_stats = {
-  data: {
-    user: {
-      name: stats.name,
-      repositoriesContributedTo: { totalCount: stats.contributedTo },
-      commits: {
-        totalCommitContributions: stats.totalCommits,
-      },
-      reviews: {
-        totalPullRequestReviewContributions: stats.totalReviews,
-      },
-      pullRequests: { totalCount: stats.totalPRs },
-      mergedPullRequests: { totalCount: stats.totalPRsMerged },
-      openIssues: { totalCount: stats.totalIssues },
-      closedIssues: { totalCount: 0 },
-      followers: { totalCount: 0 },
-      repositoryDiscussions: { totalCount: stats.totalDiscussionsStarted },
-      repositoryDiscussionComments: {
-        totalCount: stats.totalDiscussionsAnswered,
-      },
-      repositories: {
-        totalCount: 1,
-        nodes: [{ stargazers: { totalCount: 100 } }],
-        pageInfo: {
-          hasNextPage: false,
-          endCursor: "cursor",
-        },
-      },
-    },
-  },
-};
@@ -1,28 +0,0 @@
-// @ts-check
-
-export const gist_data = {
-  data: {
-    viewer: {
-      gist: {
-        description:
-          "List of countries and territories in English and Spanish: name, continent, capital, dial code, country codes, TLD, and area in sq km. Lista de países y territorios en Inglés y Español: nombre, continente, capital, código de teléfono, códigos de país, dominio y área en km cuadrados. Updated 2023",
-        owner: {
-          login: "Yizack",
-        },
-        stargazerCount: 33,
-        forks: {
-          totalCount: 11,
-        },
-        files: [
-          {
-            name: "countries.json",
-            language: {
-              name: "JSON",
-            },
-            size: 85858,
-          },
-        ],
-      },
-    },
-  },
-};
@@ -1,36 +0,0 @@
-// @ts-check
-
-export const data_langs = {
-  data: {
-    user: {
-      repositories: {
-        nodes: [
-          {
-            languages: {
-              edges: [{ size: 150, node: { color: "#0f0", name: "HTML" } }],
-            },
-          },
-          {
-            languages: {
-              edges: [{ size: 100, node: { color: "#0f0", name: "HTML" } }],
-            },
-          },
-          {
-            languages: {
-              edges: [
-                { size: 100, node: { color: "#0ff", name: "javascript" } },
-              ],
-            },
-          },
-          {
-            languages: {
-              edges: [
-                { size: 100, node: { color: "#0ff", name: "javascript" } },
-              ],
-            },
-          },
-        ],
-      },
-    },
-  },
-};
@@ -1,26 +0,0 @@
-// @ts-check
-
-export const data_repo = {
-  repository: {
-    username: "anuraghazra",
-    name: "convoychat",
-    stargazers: {
-      totalCount: 38000,
-    },
-    description: "Help us take over the world! React + TS + GraphQL Chat App",
-    primaryLanguage: {
-      color: "#2b7489",
-      id: "MDg6TGFuZ3VhZ2UyODc=",
-      name: "TypeScript",
-    },
-    forkCount: 100,
-    isTemplate: false,
-  },
-};
-
-export const data_user = {
-  data: {
-    user: { repository: data_repo.repository },
-    organization: null,
-  },
-};
@@ -1,192 +1,83 @@
 // @ts-check

-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";

-import topLangs from "../api-renamed/top-langs.js";
-import { renderTopLanguages } from "../src/cards/top-languages.js";
+const mocks = vi.hoisted(() => ({
+  topLangs: vi.fn(),
+  storeRequest: vi.fn(),
+  getUserAccessByName: vi.fn(),
+}));
+
+vi.mock("@stats-organization/github-readme-stats-core", async () => {
+  const { mockCore } = await import("./utils.js");
+  return mockCore({ topLangs: mocks.topLangs });
+});
+
+vi.mock("../src/common/database.js", () => ({
+  storeRequest: mocks.storeRequest,
+  getUserAccessByName: mocks.getUserAccessByName,
+}));
+
+import router from "../router.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
-import { renderError } from "../src/common/render.js";

-import { data_langs } from "./test-data/langs-data.js";
-
-import "@testing-library/jest-dom/vitest";
-
-const error = {
-  errors: [
-    {
-      type: "NOT_FOUND",
-      path: ["user"],
-      locations: [],
-      message: "Could not fetch user",
-    },
-  ],
-};
-
-const langs = {
-  HTML: {
-    color: "#0f0",
-    name: "HTML",
-    size: 250,
-  },
-  javascript: {
-    color: "#0ff",
-    name: "javascript",
-    size: 200,
-  },
-};
-
-const mock = new MockAdapter(axios);
-
-afterEach(() => {
-  mock.reset();
+const createRequest = (search = "") => ({
+  headers: {},
+  url: `/api/top-langs?${search}`,
 });

-describe("Test /api/top-langs", () => {
-  it("should test the request", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});

-    await topLangs(req, res);
+const defaultCacheHeader =
+  `max-age=${CACHE_TTL.TOP_LANGS_CARD.DEFAULT}, ` +
+  `s-maxage=${CACHE_TTL.TOP_LANGS_CARD.DEFAULT}, ` +
+  `stale-while-revalidate=${DURATIONS.ONE_DAY}`;

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(renderTopLanguages(langs));
-  });
+beforeEach(() => {
+  mocks.topLangs.mockReset();
+  mocks.storeRequest.mockReset().mockResolvedValue(undefined);
+  mocks.getUserAccessByName.mockReset().mockResolvedValue(null);
+  // CACHE_SECONDS is not set here, this is just to safeguard against CACHE_SECONDS being set externally
+  delete process.env.CACHE_SECONDS;
+});

-  it("should work with the query options", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-        hide_title: true,
-        card_width: 100,
-        title_color: "fff",
-        icon_color: "fff",
-        text_color: "fff",
-        bg_color: "fff",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
+describe("Test /api/top-langs backend routing", () => {
+  it("happy path should pass query params and user PAT, respond with top languages content and persist request", async () => {
+    mocks.getUserAccessByName.mockResolvedValue({ token: "user-pat" });
+    mocks.topLangs.mockResolvedValue({
+      status: "success",
+      content: "mock-top-langs-svg",
+    });

-    await topLangs(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderTopLanguages(langs, {
-        hide_title: true,
-        card_width: 100,
-        title_color: "fff",
-        icon_color: "fff",
-        text_color: "fff",
-        bg_color: "fff",
-      }),
+    const req = createRequest(
+      "username=anuraghazra&layout=compact&langs_count=5",
    );
-  });
+    const res = createResponse();

-  it("should render error card on user data fetch error", async () => {
-    const req = {
-      query: {
+    await router(req, res);
+
+    expect(mocks.getUserAccessByName).toHaveBeenCalledWith("anuraghazra");
+    expect(mocks.topLangs).toHaveBeenCalledWith(
+      {
        username: "anuraghazra",
+        layout: "compact",
+        langs_count: "5",
      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, error);
-
-    await topLangs(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: error.errors[0].message,
-        secondaryMessage:
-          "Make sure the provided username is not an organization",
-      }),
-    );
-  });
-
-  it("should render error card on incorrect layout input", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-        layout: ["pie"],
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
-
-    await topLangs(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "Something went wrong",
-        secondaryMessage: "Incorrect layout input",
-      }),
-    );
-  });
-
-  it("should render error card if wrong locale provided", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-        locale: "asdf",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
-
-    await topLangs(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "Something went wrong",
-        secondaryMessage: "Locale not found",
-      }),
-    );
-  });
-
-  it("should have proper cache", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-      },
-    };
-    const res = {
-      setHeader: vi.fn(),
-      send: vi.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
-
-    await topLangs(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.setHeader).toHaveBeenCalledWith(
-      "Cache-Control",
-      `max-age=${CACHE_TTL.TOP_LANGS_CARD.DEFAULT}, ` +
-        `s-maxage=${CACHE_TTL.TOP_LANGS_CARD.DEFAULT}, ` +
-        `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
+      "user-pat",
    );
+    expect(req.query).toEqual({
+      username: "anuraghazra",
+      layout: "compact",
+      langs_count: "5",
+    });
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-top-langs-svg");
+    expect(mocks.storeRequest).toHaveBeenCalledExactlyOnceWith(req);
  });
 });
@@ -1,41 +1,288 @@
 // @ts-check

+export const data_stats = {
+  data: {
+    user: {
+      name: "Anurag Hazra",
+      login: "anuraghazra",
+      repositoriesContributedTo: { totalCount: 51 },
+      commits: {
+        totalCommitContributions: 200,
+      },
+      reviews: {
+        totalPullRequestReviewContributions: 1234,
+      },
+      pullRequests: { totalCount: 4000 },
+      mergedPullRequests: { totalCount: 3200 },
+      openIssues: { totalCount: 300 },
+      closedIssues: { totalCount: 40 },
+      followers: { totalCount: 150 },
+      repositoryDiscussions: { totalCount: 222 },
+      repositoryDiscussionComments: {
+        totalCount: 111,
+      },
+      repositories: {
+        totalCount: 3,
+        nodes: [
+          { name: "repo-keep-1", stargazers: { totalCount: 1500 } },
+          { name: "repo-exclude-me", stargazers: { totalCount: 9999 } },
+          { name: "repo-keep-2", stargazers: { totalCount: 2600 } },
+        ],
+        pageInfo: {
+          hasNextPage: false,
+          endCursor: "cursor",
+        },
+      },
+    },
+  },
+};
+
+export const happy_path_gist_data = {
+  data: {
+    viewer: {
+      gist: {
+        description:
+          "List of countries and territories in English and Spanish: name, continent, capital, dial code, country codes, TLD, and area in sq km. Lista de países y territorios en Inglés y Español: nombre, continente, capital, código de teléfono, códigos de país, dominio y área en km cuadrados. Updated 2023",
+        owner: {
+          login: "Yizack",
+        },
+        stargazerCount: 33,
+        forks: {
+          totalCount: 11,
+        },
+        files: [
+          {
+            name: "countries.json",
+            language: {
+              name: "JSON",
+            },
+            size: 85858,
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const data_user = {
+  data: {
+    user: {
+      repository: {
+        username: "anuraghazra",
+        name: "convoychat",
+        nameWithOwner: "anuraghazra/convoychat",
+        stargazers: {
+          totalCount: 38000,
+        },
+        description:
+          "Help us take over the world with a deeply customizable React, TypeScript and GraphQL chat app that has enough text to wrap across multiple lines in the repository card.",
+        primaryLanguage: {
+          color: "#2b7489",
+          id: "MDg6TGFuZ3VhZ2UyODc=",
+          name: "TypeScript",
+        },
+        forkCount: 100,
+        isTemplate: false,
+        isArchived: false,
+      },
+    },
+    organization: null,
+  },
+};
+
+export const data_langs = {
+  data: {
+    user: {
+      repositories: {
+        nodes: [
+          {
+            name: "repo-html",
+            languages: {
+              edges: [{ size: 180, node: { color: "#0f0", name: "HTML" } }],
+            },
+          },
+          {
+            name: "repo-javascript",
+            languages: {
+              edges: [
+                { size: 120, node: { color: "#0ff", name: "JavaScript" } },
+              ],
+            },
+          },
+          {
+            name: "repo-ts-1",
+            languages: {
+              edges: [
+                { size: 45, node: { color: "#3178c6", name: "TypeScript" } },
+              ],
+            },
+          },
+          {
+            name: "repo-ts-2",
+            languages: {
+              edges: [
+                { size: 45, node: { color: "#3178c6", name: "TypeScript" } },
+              ],
+            },
+          },
+          {
+            name: "repo-other-langs",
+            languages: {
+              edges: [
+                { size: 20, node: { color: "#f00", name: "Java" } },
+                { size: 10, node: { color: "#0f0", name: "Cobol" } },
+                { size: 15, node: { color: "#00f", name: "Python" } },
+              ],
+            },
+          },
+          {
+            name: "repo-hidden",
+            languages: {
+              edges: [{ size: 1000, node: { color: "#dea584", name: "Rust" } }],
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const wakaTimeData = {
+  data: {
+    categories: [
+      {
+        digital: "22:40",
+        hours: 22,
+        minutes: 40,
+        name: "Coding",
+        percent: 100,
+        text: "22 hrs 40 mins",
+        total_seconds: 81643.570077,
+      },
+    ],
+    daily_average: 16095,
+    daily_average_including_other_language: 16329,
+    days_including_holidays: 7,
+    days_minus_holidays: 5,
+    editors: [
+      {
+        digital: "22:40",
+        hours: 22,
+        minutes: 40,
+        name: "VS Code",
+        percent: 100,
+        text: "22 hrs 40 mins",
+        total_seconds: 81643.570077,
+      },
+    ],
+    holidays: 2,
+    human_readable_daily_average: "4 hrs 28 mins",
+    human_readable_daily_average_including_other_language: "4 hrs 32 mins",
+    human_readable_total: "22 hrs 21 mins",
+    human_readable_total_including_other_language: "22 hrs 40 mins",
+    id: "random hash",
+    is_already_updating: false,
+    is_coding_activity_visible: true,
+    is_including_today: false,
+    is_other_usage_visible: true,
+    is_stuck: false,
+    is_up_to_date: true,
+    languages: [
+      {
+        digital: "12:00",
+        hours: 12,
+        minutes: 0,
+        name: "TypeScript",
+        percent: 52,
+        text: "12 hrs",
+        total_seconds: 43200,
+      },
+      {
+        digital: "6:30",
+        hours: 6,
+        minutes: 30,
+        name: "JavaScript",
+        percent: 28,
+        text: "6 hrs 30 mins",
+        total_seconds: 23400,
+      },
+      {
+        digital: "3:00",
+        hours: 3,
+        minutes: 0,
+        name: "Other",
+        percent: 13,
+        text: "3 hrs",
+        total_seconds: 10800,
+      },
+      {
+        digital: "1:00",
+        hours: 1,
+        minutes: 0,
+        name: "YAML",
+        percent: 4,
+        text: "1 hr",
+        total_seconds: 3600,
+      },
+      {
+        digital: "0:30",
+        hours: 0,
+        minutes: 30,
+        name: "JSON",
+        percent: 3,
+        text: "30 mins",
+        total_seconds: 1800,
+      },
+    ],
+    operating_systems: [
+      {
+        digital: "22:40",
+        hours: 22,
+        minutes: 40,
+        name: "Mac",
+        percent: 100,
+        text: "22 hrs 40 mins",
+        total_seconds: 81643.570077,
+      },
+    ],
+    percent_calculated: 100,
+    range: "last_7_days",
+    status: "ok",
+    timeout: 15,
+    total_seconds: 80473.135716,
+    total_seconds_including_other_language: 81643.570077,
+    user_id: "random hash",
+    username: "anuraghazra",
+    writes_only: false,
+  },
+};
+
 /**
- * Creates an asymmetric matcher for approximate numeric equality.
- *
- * This helper is intended for use in test frameworks (e.g., Jest) where
- * values need to be compared within a configurable decimal precision
- * instead of strict equality.
- *
- * The comparison succeeds when:
- *
- *   |actual - expected| < 10^(-precision)
- *
- * For example, with `precision = 3`, values must be within `0.001`.
- *
- * @param {number} expected The expected numeric value to compare against.
- *
- * @param {number} [precision=10]
- *   The number of decimal places of tolerance. Higher values mean stricter
- *   comparison. Internally converted to epsilon = 10^-precision.
- *
- * @returns {{
- *   asymmetricMatch(actual: unknown): boolean,
- *   toAsymmetricMatcher(): string
- * }} An object implementing Jest-style asymmetric matcher methods.
- *
+ * Creates a mock module for @stats-organization/github-readme-stats-core.
+ * @param {any} mocks Mocked functions of the core module.
+ * @returns {any} Mocked core module.
 */
-export function approxNumber(expected, precision = 10) {
+export function mockCore(mocks) {
+  const noop = () => undefined;
+
  return {
-    asymmetricMatch(actual) {
-      if (typeof actual !== "number" || typeof expected !== "number") {
-        return false;
-      }
-      const epsilon = Math.pow(10, -precision);
-      return Math.abs(actual - expected) < epsilon;
-    },
-    toAsymmetricMatcher() {
-      return `≈ ${expected} (precision ${precision})`;
-    },
+    api: mocks.api ?? noop,
+    gist: mocks.gist ?? noop,
+    pin: mocks.pin ?? noop,
+    topLangs: mocks.topLangs ?? noop,
+    wakatime: mocks.wakatime ?? noop,
+    getConfig: mocks.getConfig ?? (() => mocks.config ?? {}),
+    renderError: ({ message }) => `render-error:${message}`,
+    clampValue: (value, min, max) => Math.min(Math.max(value, min), max),
  };
 }
+
+/**
+ * Normalizes SVG code for stable test comparisons.
+ * @param {string} svg SVG code to normalize.
+ * @returns {string} Normalized SVG code.
+ */
+export function normalizeSvg(svg) {
+  const document = new DOMParser().parseFromString(svg, "image/svg+xml");
+  return new XMLSerializer().serializeToString(document);
+}
@@ -1,195 +1,77 @@
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { afterEach, describe, expect, it, vi } from "vitest";
+// @ts-check

-import wakatime from "../api-renamed/wakatime.js";
-import { renderWakatimeCard } from "../src/cards/wakatime.js";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  wakatime: vi.fn(),
+  storeRequest: vi.fn(),
+  getUserAccessByName: vi.fn(),
+}));
+
+vi.mock("@stats-organization/github-readme-stats-core", async () => {
+  const { mockCore } = await import("./utils.js");
+  return mockCore({ wakatime: mocks.wakatime });
+});
+
+vi.mock("../src/common/database.js", () => ({
+  storeRequest: mocks.storeRequest,
+  getUserAccessByName: mocks.getUserAccessByName,
+}));
+
+import router from "../router.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
-import { renderError } from "../src/index.js";

-import "@testing-library/jest-dom/vitest";
-
-const wakaTimeData = {
-  data: {
-    categories: [
-      {
-        digital: "22:40",
-        hours: 22,
-        minutes: 40,
-        name: "Coding",
-        percent: 100,
-        text: "22 hrs 40 mins",
-        total_seconds: 81643.570077,
-      },
-    ],
-    daily_average: 16095,
-    daily_average_including_other_language: 16329,
-    days_including_holidays: 7,
-    days_minus_holidays: 5,
-    editors: [
-      {
-        digital: "22:40",
-        hours: 22,
-        minutes: 40,
-        name: "VS Code",
-        percent: 100,
-        text: "22 hrs 40 mins",
-        total_seconds: 81643.570077,
-      },
-    ],
-    holidays: 2,
-    human_readable_daily_average: "4 hrs 28 mins",
-    human_readable_daily_average_including_other_language: "4 hrs 32 mins",
-    human_readable_total: "22 hrs 21 mins",
-    human_readable_total_including_other_language: "22 hrs 40 mins",
-    id: "random hash",
-    is_already_updating: false,
-    is_coding_activity_visible: true,
-    is_including_today: false,
-    is_other_usage_visible: true,
-    is_stuck: false,
-    is_up_to_date: true,
-    languages: [
-      {
-        digital: "0:19",
-        hours: 0,
-        minutes: 19,
-        name: "Other",
-        percent: 1.43,
-        text: "19 mins",
-        total_seconds: 1170.434361,
-      },
-      {
-        digital: "0:01",
-        hours: 0,
-        minutes: 1,
-        name: "TypeScript",
-        percent: 0.1,
-        text: "1 min",
-        total_seconds: 83.293809,
-      },
-      {
-        digital: "0:00",
-        hours: 0,
-        minutes: 0,
-        name: "YAML",
-        percent: 0.07,
-        text: "0 secs",
-        total_seconds: 54.975151,
-      },
-    ],
-    operating_systems: [
-      {
-        digital: "22:40",
-        hours: 22,
-        minutes: 40,
-        name: "Mac",
-        percent: 100,
-        text: "22 hrs 40 mins",
-        total_seconds: 81643.570077,
-      },
-    ],
-    percent_calculated: 100,
-    range: "last_7_days",
-    status: "ok",
-    timeout: 15,
-    total_seconds: 80473.135716,
-    total_seconds_including_other_language: 81643.570077,
-    user_id: "random hash",
-    username: "anuraghazra",
-    writes_only: false,
-  },
-};
-
-const wakaTimeNotFoundData = {
-  data: {
-    viewer: {
-      gist: null,
-    },
-  },
-};
-
-const mock = new MockAdapter(axios);
-
-afterEach(() => {
-  mock.reset();
+const createRequest = (search = "") => ({
+  headers: {},
+  url: `/api/wakatime?${search}`,
 });

-describe("Test /api/wakatime", () => {
-  it("should test the request", async () => {
-    const username = "anuraghazra";
-    const req = { query: { username } };
-    const res = { setHeader: vi.fn(), send: vi.fn() };
-    mock
-      .onGet(
-        `https://wakatime.com/api/v1/users/${username}/stats?is_including_today=true`,
-      )
-      .reply(200, wakaTimeData);
+const createResponse = () => ({
+  end: vi.fn(),
+  setHeader: vi.fn(),
+});

-    await wakatime(req, res);
+const defaultCacheHeader =
+  `max-age=${CACHE_TTL.WAKATIME_CARD.DEFAULT}, ` +
+  `s-maxage=${CACHE_TTL.WAKATIME_CARD.DEFAULT}, ` +
+  `stale-while-revalidate=${DURATIONS.ONE_DAY}`;

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderWakatimeCard(wakaTimeData.data, {}),
-    );
-  });
+beforeEach(() => {
+  mocks.wakatime.mockReset();
+  mocks.storeRequest.mockReset().mockResolvedValue(undefined);
+  mocks.getUserAccessByName.mockReset().mockResolvedValue(null);
+  // CACHE_SECONDS is not set here, this is just to safeguard against CACHE_SECONDS being set externally
+  delete process.env.CACHE_SECONDS;
+});

-  it("should render error if wrong locale is provided", async () => {
-    const username = "anuraghazra";
-    const req = { query: { username, locale: "asdf" } };
-    const res = { setHeader: vi.fn(), send: vi.fn() };
-    mock
-      .onGet(
-        `https://wakatime.com/api/v1/users/${username}/stats?is_including_today=true`,
-      )
-      .reply(200, wakaTimeData);
+describe("Test /api/wakatime backend routing", () => {
+  it("happy path should pass query params, respond with wakatime content and persist request", async () => {
+    mocks.wakatime.mockResolvedValue({
+      status: "success",
+      content: "mock-wakatime-svg",
+    });

-    await wakatime(req, res);
+    const req = createRequest("username=anuraghazra&theme=dark&layout=compact");
+    const res = createResponse();

-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledWith(
-      renderError({
-        message: "Something went wrong",
-        secondaryMessage: "Language not found",
-      }),
-    );
-  });
+    await router(req, res);

-  it("should render error if user data is not accessible", async () => {
-    const username = "anuraghazra";
-    const req = { query: { username } };
-    const res = { setHeader: vi.fn(), send: vi.fn() };
-    mock
-      .onGet(
-        `https://wakatime.com/api/v1/users/${username}/stats?is_including_today=true`,
-      )
-      .reply(200, wakaTimeNotFoundData);
-
-    await wakatime(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.send).toHaveBeenCalledTimes(1);
-    expect(res.send.mock.calls[0][0]).toMatchSnapshot();
-  });
-
-  it("should have proper cache", async () => {
-    const username = "anuraghazra";
-    const req = { query: { username } };
-    const res = { setHeader: vi.fn(), send: vi.fn() };
-    mock
-      .onGet(
-        `https://wakatime.com/api/v1/users/${username}/stats?is_including_today=true`,
-      )
-      .reply(200, wakaTimeData);
-
-    await wakatime(req, res);
-
-    expect(res.setHeader).toHaveBeenCalledWith("Content-Type", "image/svg+xml");
-    expect(res.setHeader).toHaveBeenCalledWith(
-      "Cache-Control",
-      `max-age=${CACHE_TTL.WAKATIME_CARD.DEFAULT}, ` +
-        `s-maxage=${CACHE_TTL.WAKATIME_CARD.DEFAULT}, ` +
-        `stale-while-revalidate=${DURATIONS.ONE_DAY}`,
-    );
+    expect(mocks.wakatime).toHaveBeenCalledWith({
+      username: "anuraghazra",
+      theme: "dark",
+      layout: "compact",
+    });
+    expect(mocks.getUserAccessByName).not.toHaveBeenCalled();
+    expect(req.query).toEqual({
+      username: "anuraghazra",
+      theme: "dark",
+      layout: "compact",
+    });
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Cache-Control", defaultCacheHeader],
+      ["Content-Type", "image/svg+xml"],
+    ]);
+    expect(res.end).toHaveBeenCalledExactlyOnceWith("mock-wakatime-svg");
+    expect(mocks.storeRequest).toHaveBeenCalledExactlyOnceWith(req);
  });
 });
@@ -0,0 +1,7 @@
+{
+  "extends": ["./tsconfig.json"],
+  "compilerOptions": {
+    "noEmit": true,
+    "customConditions": []
+  }
+}
@@ -1,6 +1,6 @@
 {
  "$schema": "https://openapi.vercel.sh/vercel.json",
-  "buildCommand": "cd ../../ && git clean ./apps -fx && pnpm --filter ./apps/backend/ --legacy deploy ./apps/deployment/ && mv ./apps/deployment/node_modules/ ./apps/backend/node_modules/ && ./vercel-preparation.sh",
+  "buildCommand": "cd ../../ && git clean ./apps -fx && pnpm run build:packages && pnpm --filter ./apps/backend/ --legacy deploy ./apps/deployment/ && mv ./apps/deployment/node_modules/ ./apps/backend/node_modules/ && ./vercel-preparation.sh",
  "redirects": [
    {
      "source": "/",
@@ -1,6 +1,9 @@
 import { defineConfig } from "vitest/config";

 export default defineConfig({
+  resolve: {
+    conditions: ["@stats/source"],
+  },
  test: {
    dir: "./tests/bench",
    environment: "jsdom",
@@ -1,6 +1,9 @@
 import { defineConfig } from "vitest/config";

 export default defineConfig({
+  resolve: {
+    conditions: ["@stats/source"],
+  },
  test: {
    environment: "node",
    dir: "tests/e2e",
@@ -1,32 +1,15 @@
-import { defineConfig } from "vitest/config";
+import { defineProject } from "vitest/config";

-export default defineConfig({
+export default defineProject({
+  resolve: {
+    conditions: ["@stats/source"],
+  },
  test: {
-    coverage: {
-      enabled: true,
-    },
-    projects: [
-      {
-        test: {
-          name: "backend/public-instance",
-          environment: "jsdom",
-          dir: "tests",
-          include: ["./*.test.{ts,js}", "./public-instance/*.test.{ts,js}"],
-          setupFiles: ["./tests/_setup.js"],
-        },
-      },
-      {
-        test: {
-          name: "backend/private-instance",
-          environment: "jsdom",
-          dir: "tests",
-          include: ["./*.test.{ts,js}", "./private-instance/*.test.{ts,js}"],
-          setupFiles: [
-            "./tests/_setup.js",
-            "./tests/_setup.private-instance.js",
-          ],
-        },
-      },
+    environment: "jsdom",
+    include: [
+      "./tests/*.test.{ts,js}",
+      "./tests/public-instance/*.test.{ts,js}",
    ],
+    setupFiles: ["./tests/_setup.js"],
  },
 });
@@ -1,27 +1,35 @@
 {
-  "name": "frontend",
-  "version": "0.1.0",
-  "private": true,
+  "name": "@stats-organization/github-readme-stats-frontend",
  "type": "module",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:e2e": "playwright test",
+    "lint": "eslint",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
+  },
  "dependencies": {
-    "@reduxjs/toolkit": "2.11.2",
-    "@tailwindcss/vite": "4.2.1",
+    "@reduxjs/toolkit": "^2.11.2",
+    "@tailwindcss/vite": "^4.2.1",
    "axios": "^1",
    "axios-cache-interceptor": "^1",
-    "daisyui": "5.5.19",
-    "emoji-name-map": "^2.0.3",
-    "github-username-regex": "^1.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "daisyui": "^5.5.19",
+    "@stats-organization/github-readme-stats-backend": "workspace:^",
+    "@stats-organization/github-readme-stats-core": "workspace:^",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
    "react-icons": "^5.5.0",
    "react-loading-skeleton": "^3.3.1",
-    "react-redux": "9.2.0",
+    "react-redux": "^9.2.0",
    "react-spinners": "^0.17.0",
-    "react-toastify": "11.0.5",
-    "redux": "5.0.1",
+    "react-toastify": "^11.0.5",
+    "redux": "^5.0.1",
    "save-svg-as-png": "^1.4.17",
-    "uuid": "13.0.0",
-    "word-wrap": "^1.2.5"
+    "uuid": "^13.0.0"
  },
  "devDependencies": {
    "@types/react": "18.3.27",
@@ -30,19 +38,8 @@
    "clsx": "2.1.1",
    "tailwindcss": "4.2.1",
    "vite": "catalog:default",
-    "vite-plugin-node-polyfills": "0.25.0",
-    "vite-plugin-string-replace": "1.1.5",
    "vitest": "catalog:default"
  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "vitest",
-    "test:e2e": "playwright test",
-    "typecheck": "tsc --noEmit"
-  },
-  "homepage": "/frontend",
  "browserslist": {
    "production": [
      ">0.2%",
@@ -1,3 +1,5 @@
+// @ts-expect-error type info should be added later
+import { router } from "@stats-organization/github-readme-stats-backend";
 import axios from "axios";
 import { useEffect, useRef, useState } from "react";
 import type { JSX } from "react";
@@ -5,8 +7,6 @@ import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";

 import { setShouldMock } from "../../axios-override.js";
-// @ts-expect-error will be solved by npm package
-import { default as router } from "../../backend/.vercel/output/functions/api.func/router.js";
 import { createMockRequest, createMockResponse } from "../../mock-http.js";
 import {
  useIsAuthenticated,
@@ -13,10 +13,10 @@ const REDIRECT_URI = `https://${HOST}/frontend`;
 export const GITHUB_PRIVATE_AUTH_URL = `https://github.com/login/oauth/authorize?scope=user,repo&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}?mode=private`;
 export const GITHUB_PUBLIC_AUTH_URL = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}?mode=public`;

-export const DEMO_USER = "anuraghazra";
-export const DEMO_REPO = "anuraghazra/github-readme-stats";
-export const DEMO_GIST = "bbfce31e0217a3689c8d961a356cb10d";
-export const DEMO_WAKATIME_USER = "alan";
+export const DEMO_USER = "anuraghazra" as string;
+export const DEMO_REPO = "anuraghazra/github-readme-stats" as string;
+export const DEMO_GIST = "bbfce31e0217a3689c8d961a356cb10d" as string;
+export const DEMO_WAKATIME_USER = "alan" as string;

 window.process = {
  env: {
@@ -48,7 +48,7 @@ export function HomeScreen({ stage, setStage }: HomeScreenProps): JSX.Element {
  const dispatch = useDispatch();

  // for stage two
-  const [selectedUserId, setSelectedUserId] = useState<string>(userId);
+  const [selectedUserId, setSelectedUserId] = useState(userId);
  const [repo, setRepo] = useState(DEMO_REPO);
  const [gist, setGist] = useState(DEMO_GIST);
  const [wakatimeUser, setWakatimeUser] = useState(DEMO_WAKATIME_USER);
@@ -1,21 +1,8 @@
+import { themes } from "@stats-organization/github-readme-stats-core";
 import type { JSX } from "react";

-// @ts-expect-error this will be provided by the npm package
-import { themes } from "../../../backend/themes/index";
 import { Card } from "../../../components/Card/Card";

-// to be removed once npm package has been created
-type ThemeData = Record<
-  string,
-  {
-    title_color: string;
-    icon_color: string;
-    text_color: string;
-    bg_color: string;
-    border_color: string;
-  }
->;
-
 const excludedThemes = [
  "merko",
  "blue-green",
@@ -25,10 +12,9 @@ const excludedThemes = [
  "holi",
 ];

-const themeList = Object.keys(
-  /* Needed until themes is typed correctly and retrieved from npm package */
-  themes as ThemeData,
-).filter((myTheme) => !excludedThemes.includes(myTheme));
+const themeList = Object.keys(themes).filter(
+  (myTheme) => !excludedThemes.includes(myTheme),
+);

 interface ThemeStageProps {
  fullSuffix: string;
@@ -0,0 +1,7 @@
+{
+  "extends": ["./tsconfig.json"],
+  "compilerOptions": {
+    "noEmit": true,
+    "customConditions": []
+  }
+}
@@ -1,6 +1,6 @@
 {
  "$schema": "https://openapi.vercel.sh/vercel.json",
-  "installCommand": "cd ../../ && git clean ./apps -fx && pnpm install && rm -rf ./apps/frontend/node_modules && ./vercel-preparation.sh && pnpm --filter ./apps/frontend/ --legacy deploy ./apps/deployment/ && mv ./apps/deployment/node_modules/ ./apps/frontend/node_modules/",
+  "installCommand": "cd ../../ && git clean ./apps -fx && pnpm install && pnpm run build:packages && rm -rf ./apps/frontend/node_modules && pnpm --filter ./apps/frontend/ --legacy deploy ./apps/deployment/ && mv ./apps/deployment/node_modules/ ./apps/frontend/node_modules/",
  "buildCommand": "pnpm run build",
  "outputDirectory": "build"
 }
@@ -2,57 +2,12 @@ import path from "node:path";

 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react-swc";
-import { nodePolyfills } from "vite-plugin-node-polyfills";
-import StringReplace from "vite-plugin-string-replace";
-import { defineConfig } from "vitest/config";
+import { defineProject } from "vitest/config";

 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineProject({
  base: "/frontend/",
-  plugins: [
-    StringReplace([
-      {
-        search: "process.env",
-        replace: "window.process.env",
-        fileName: ".*backend.*",
-      },
-    ]),
-    nodePolyfills({
-      include: [
-        "path",
-        "querystring",
-        "url",
-        "http",
-        "util",
-        "stream",
-        "buffer",
-      ],
-      exclude: ["fs", "net"],
-    }),
-
-    react(),
-    tailwindcss(),
-
-    /**
-     * mock pg (postgres) package in the browser to avoid runtime errors
-     * @see apps/backend/src/common/database.js
-     */
-    {
-      name: "empty-pg-package",
-      resolveId(id) {
-        if (id === "pg") {
-          return id;
-        }
-        return undefined;
-      },
-      load(id) {
-        if (id === "pg") {
-          return "export class Pool { constructor(config) {} }";
-        }
-        return undefined;
-      },
-    },
-  ],
+  plugins: [react(), tailwindcss()],
  build: {
    outDir: "build",
    sourcemap: true,
@@ -61,6 +16,7 @@ export default defineConfig({
    chunkSizeWarningLimit: 800,
  },
  resolve: {
+    conditions: ["@stats/source"],
    alias: [
      {
        find: "../src/fetchers/wakatime.js",
@@ -72,7 +28,7 @@ export default defineConfig({
    ],
  },
  test: {
-    dir: "./src",
+    dir: path.join(import.meta.dirname, "./src"),
    exclude: ["**/backend/**"],
  },
 });
@@ -76,7 +76,7 @@ GitHub Stats Extended comes with several built-in themes (e.g. `dark`, `radical`

 <img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="GitHub Stats Extended Themes" width="600px"/>

-You can look at a preview for [all available themes](../backend/themes/README.md) or checkout the [theme config file](../backend/themes/index.js). Please note that we paused the addition of new themes to decrease maintenance efforts; all pull requests related to new themes will be closed.
+You can look at a preview for [all available themes](../packages/core/src/themes/README.md) or checkout the [theme config file](../packages/core/src/themes/index.js). Please note that we paused the addition of new themes to decrease maintenance efforts; all pull requests related to new themes will be closed.

 #### Responsive Card Theme

@@ -102,7 +102,7 @@ We have included a `transparent` theme that has a transparent background. This t

 ##### Add transparent alpha channel to a themes bg\_color

-You can use the `bg_color` parameter to make any of [the available themes](../backend/themes/README.md) transparent. This is done by setting the `bg_color` to a color with a transparent alpha channel (i.e. `bg_color=00000000`):
+You can use the `bg_color` parameter to make any of [the available themes](../packages/core/src/themes/README.md) transparent. This is done by setting the `bg_color` to a color with a transparent alpha channel (i.e. `bg_color=00000000`):

 ```md
 ![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000)
@@ -181,7 +181,7 @@ You can customize the appearance of all your cards however you wish with URL par
 | `border_color` | Card's border color. Does not apply when `hide_border` is enabled. | string (hex color) | `e4e2e2` |
 | `bg_color` | Card's background color. | string (hex color or a gradient in the form of *angle,start,end*) | `fffefe` |
 | `hide_border` | Hides the card's border. | boolean | `false` |
-| `theme` | Name of the theme, choose from [all available themes](../backend/themes/README.md). | enum | `default` |
+| `theme` | Name of the theme, choose from [all available themes](../packages/core/src/themes/README.md). | enum | `default` |
 | `cache_seconds` | Sets the cache header manually (min: 21600, max: 86400). | integer | `21600` |
 | `locale` | Sets the language in the card, you can check full list of available locales [here](#available-locales). | enum | `en` |
 | `border_radius` | Corner rounding on the card. | number | `4.5` |
@@ -123,6 +123,7 @@ Click on the deploy button to get started!
 13. optional: add an SQL database; by using e.g. the ["Nile" integration](https://vercel.com/marketplace/nile) or by manually setting the environment variable `POSTGRES_URL`
 14. optional: [create your own OAuth App](https://github.com/settings/developers) and set environment variables `OAUTH_REDIRECT_URI`, `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` on Vercel accordingly
 15. optional: in addition to the Vercel project based on the `apps/backend` folder, create a second project based on the `apps/frontend` folder. No environment variables needed.
+16. optional: set the environment variable `TURBO_PLATFORM_ENV_DISABLED` to `true` to disable the build-time warning from [turbo](https://turborepo.dev/) about environment variables missing from "turbo.json" - This warning is not relevant in our project.

 </details>

@@ -3,6 +3,7 @@ import { fileURLToPath } from "node:url";
 import { includeIgnoreFile } from "@eslint/compat";
 import js from "@eslint/js";
 import { defineConfig } from "eslint/config";
+import { createTypeScriptImportResolver } from "eslint-import-resolver-typescript";
 import { importX } from "eslint-plugin-import-x";
 import { default as jsdoc } from "eslint-plugin-jsdoc";
 import react from "eslint-plugin-react";
@@ -18,6 +19,25 @@ export default defineConfig(

  {
    extends: [importX.flatConfigs.recommended, importX.flatConfigs.typescript],
+    settings: {
+      "import-x/resolver-next": [
+        createTypeScriptImportResolver({
+          conditionNames: [
+            /** Keep in sync with `tsconfig.base.json#customConditions` */
+            "@stats/source",
+
+            "types",
+            "import",
+
+            "require",
+            "node",
+            "node-addons",
+            "browser",
+            "default",
+          ],
+        }),
+      ],
+    },
    rules: {
      "import-x/consistent-type-specifier-style": ["error", "prefer-top-level"],
      "import-x/order": [
@@ -2,21 +2,10 @@
  "$schema": "./node_modules/knip/schema.json",
  "workspaces": {
    "apps/backend": {
-      "entry": ["api-renamed/*.js", "express.js", "tests/bench/*.bench.js"],
-      "ignoreFiles": [
-        "_dot_vercel_copy/**/*" // Hopefully by using a npm package this file will be removed
-      ]
+      "entry": ["api-renamed/*.js", "express.js", "tests/bench/*.bench.js"]
    },
    "apps/frontend": {
-      "entry": ["src/wakatime-override.ts"],
-
-      "ignoreDependencies": [
-        // below dependencies are added because backend folder is copied inside frontend folder,
-        // so some of his dependencies must be present here
-        "github-username-regex",
-        "emoji-name-map",
-        "word-wrap"
-      ]
+      "entry": ["src/wakatime-override.ts"]
    }
  }
 }
@@ -1,35 +1,44 @@
 {
-  "name": "root",
+  "name": "@stats-organization/root",
  "private": true,
  "type": "module",
-  "packageManager": "pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017",
+  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
  "devDependencies": {
-    "@eslint/compat": "2.0.2",
-    "@eslint/js": "9.39.3",
-    "@playwright/test": "1.58.2",
-    "@types/node": "24.10.13",
-    "eslint": "9.39.2",
+    "@eslint/compat": "2.0.3",
+    "@eslint/js": "10.0.1",
+    "@playwright/test": "1.59.1",
+    "@types/node": "24.12.0",
+    "@vitest/coverage-v8": "catalog:default",
+    "eslint": "10.1.0",
    "eslint-import-resolver-typescript": "4.4.4",
-    "eslint-plugin-import-x": "4.16.1",
-    "eslint-plugin-jsdoc": "62.7.1",
+    "eslint-plugin-import-x": "4.16.2",
+    "eslint-plugin-jsdoc": "62.9.0",
    "eslint-plugin-react": "7.37.5",
    "eslint-plugin-react-hooks": "7.0.1",
-    "globals": "17.3.0",
+    "globals": "17.4.0",
    "husky": "9.1.7",
-    "knip": "5.85.0",
-    "lint-staged": "16.2.7",
+    "knip": "6.2.0",
+    "lint-staged": "16.4.0",
    "prettier": "3.8.1",
+    "turbo": "2.9.3",
    "typescript": "5.9.3",
-    "typescript-eslint": "8.56.1"
+    "typescript-eslint": "8.58.0",
+    "vitest": "catalog:default"
  },
  "scripts": {
    "prepare": "husky",
+    "build:packages": "turbo run build --filter=./packages/*",
+    "build:frontend": "turbo run build --filter=./apps/frontend",
+    "dev:frontend": "pnpm run --filter=./apps/frontend dev",
+    "test": "vitest",
+    "test:coverage": "vitest --config vitest.config.coverage.ts",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
-    "lint": "eslint",
-    "lint:fix": "eslint --fix",
+    "lint": "turbo run lint",
+    "lint:eslint": "eslint",
+    "lint:eslint:fix": "eslint --fix",
    "lint:knip": "knip",
-    "typecheck": "tsc --build --noEmit"
+    "typecheck": "turbo run typecheck"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,json,jsonc,yaml,yml}": "prettier --write"
@@ -0,0 +1,94 @@
+{
+  "name": "@stats-organization/github-readme-stats-core",
+  "version": "2.0.0",
+  "type": "module",
+  "homepage": "https://github-stats-extended.vercel.app/frontend",
+  "bugs": {
+    "url": "https://github.com/stats-organization/github-stats-extended/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stats-organization/github-stats-extended.git",
+    "directory": "packages/core"
+  },
+  "author": {
+    "name": "Anurag Hazra",
+    "url": "https://github.com/anuraghazra/"
+  },
+  "contributors": [
+    {
+      "name": "Rick Staa",
+      "url": "https://github.com/rickstaa"
+    },
+    {
+      "name": "Alexandr Garbuzov",
+      "url": "https://github.com/qwerty541"
+    },
+    {
+      "name": "Abhijit Gupta",
+      "url": "https://github.com/avgupta456"
+    },
+    {
+      "name": "Marco Pasqualetti",
+      "url": "https://github.com/marcalexiei"
+    },
+    {
+      "name": "martin-mfg",
+      "url": "https://github.com/martin-mfg"
+    }
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": "24.x"
+  },
+  "description": "Dynamically generate stats for your GitHub readme",
+  "keywords": [
+    "github-readme-stats",
+    "readme-stats",
+    "cards",
+    "card-generator",
+    "github-stats",
+    "github-stats-extended",
+    "github-readme-stats-extended"
+  ],
+  "main": "./build/index.js",
+  "exports": {
+    ".": {
+      "@stats/source": "./src/index.ts",
+      "default": "./build/index.js"
+    }
+  },
+  "files": [
+    "build",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest",
+    "test:update:snapshot": "vitest -u",
+    "test:e2e": "vitest --config vitest.config.e2e.ts",
+    "bench": "vitest bench --run --config vitest.config.bench.ts",
+    "lint": "eslint",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "theme-readme-gen": "node scripts/generate-theme-doc",
+    "generate-langs-json": "node scripts/generate-langs-json"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@uppercod/css-to-object": "1.1.1",
+    "axios-mock-adapter": "2.1.0",
+    "js-yaml": "4.1.1",
+    "jsdom": "28.1.0",
+    "vitest": "catalog:default"
+  },
+  "dependencies": {
+    "axios": "^1.13.5",
+    "emoji-name-map": "^2.0.3",
+    "github-username-regex": "^1.0.0",
+    "word-wrap": "^1.2.5"
+  }
+}
@@ -1,8 +1,8 @@
 import fs from "fs";

-import { themes } from "../themes/index.js";
+import { themes } from "../src/themes/index.js";

-const TARGET_FILE = "./themes/README.md";
+const TARGET_FILE = "./src/themes/README.md";
 const REPO_CARD_LINKS_FLAG = "<!-- REPO_CARD_LINKS -->";
 const STAT_CARD_LINKS_FLAG = "<!-- STATS_CARD_LINKS -->";

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

-import { renderStatsCard } from "../src/cards/stats.js";
-import { guardAccess } from "../src/common/access.js";
-import {
-  CACHE_TTL,
-  resolveCacheSeconds,
-  setCacheHeaders,
-  setErrorCacheHeaders,
-} from "../src/common/cache.js";
-import { storeRequest } from "../src/common/database.js";
+import { renderStatsCard } from "../cards/stats.js";
 import {
  MissingParamError,
  retrieveSecondaryMessage,
-} from "../src/common/error.js";
-import { parseArray, parseBoolean } from "../src/common/ops.js";
-import { renderError } from "../src/common/render.js";
-import { fetchStats } from "../src/fetchers/stats.js";
-import { isLocaleAvailable } from "../src/translations.js";
+} from "../common/error.js";
+import { parseArray, parseBoolean } from "../common/ops.js";
+import { renderError } from "../common/render.js";
+import { fetchStats } from "../fetchers/stats.js";
+import { isLocaleAvailable } from "../translations.js";

 // @ts-ignore
-export default async (req, res) => {
-  const {
+export default async (
+  {
    username,
    repo,
    owner,
@@ -40,7 +32,6 @@ export default async (req, res) => {
    text_bold,
    bg_color,
    theme,
-    cache_seconds,
    exclude_repo,
    custom_title,
    locale,
@@ -52,28 +43,13 @@ export default async (req, res) => {
    border_color,
    rank_icon,
    show,
-  } = req.query;
-  res.setHeader("Content-Type", "image/svg+xml");
-
-  const access = guardAccess({
-    res,
-    id: username,
-    type: "username",
-    colors: {
-      title_color,
-      text_color,
-      bg_color,
-      border_color,
-      theme,
-    },
-  });
-  if (!access.isPassed) {
-    return access.result;
-  }
-
+  },
+  pat = null,
+) => {
  if (locale && !isLocaleAvailable(locale)) {
-    return res.send(
-      renderError({
+    return {
+      status: "error - permanent",
+      content: renderError({
        message: "Something went wrong",
        secondaryMessage: "Language not found",
        renderOptions: {
@@ -84,7 +60,7 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }

  const safePattern = /^[-\w/.,]+$/;
@@ -93,8 +69,9 @@ export default async (req, res) => {
    (repo && !safePattern.test(repo)) ||
    (owner && !safePattern.test(owner))
  ) {
-    return res.send(
-      renderError({
+    return {
+      status: "error - permanent",
+      content: renderError({
        message: "Something went wrong",
        secondaryMessage:
          "Username, repository or owner contains unsafe characters",
@@ -106,11 +83,10 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }

  try {
-    await storeRequest(req);
    const showStats = parseArray(show);
    const repoOwner = parseArray(owner);
    let repository = parseArray(repo);
@@ -135,18 +111,12 @@ export default async (req, res) => {
      showStats.includes("issues_authored"),
      showStats.includes("issues_commented"),
      parseArray(role),
+      pat,
    );
-    const cacheSeconds = resolveCacheSeconds({
-      requested: parseInt(cache_seconds, 10),
-      def: CACHE_TTL.STATS_CARD.DEFAULT,
-      min: CACHE_TTL.STATS_CARD.MIN,
-      max: CACHE_TTL.STATS_CARD.MAX,
-    });

-    setCacheHeaders(res, cacheSeconds);
-
-    return res.send(
-      renderStatsCard(
+    return {
+      status: "success",
+      content: renderStatsCard(
        stats,
        {
          hide: parseArray(hide),
@@ -179,12 +149,12 @@ export default async (req, res) => {
        repository,
        repoOwner,
      ),
-    );
+    };
  } catch (err) {
-    setErrorCacheHeaders(res);
    if (err instanceof Error) {
-      return res.send(
-        renderError({
+      return {
+        status: "error - temporary",
+        content: renderError({
          message: err.message,
          secondaryMessage: retrieveSecondaryMessage(err),
          renderOptions: {
@@ -196,10 +166,11 @@ export default async (req, res) => {
            show_repo_link: !(err instanceof MissingParamError),
          },
        }),
-      );
+      };
    }
-    return res.send(
-      renderError({
+    return {
+      status: "error - temporary",
+      content: renderError({
        message: "An unknown error occurred",
        renderOptions: {
          title_color,
@@ -209,6 +180,6 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }
 };
@@ -1,26 +1,18 @@
 // @ts-check

-import { renderRepoCard } from "../src/cards/repo.js";
-import { guardAccess } from "../src/common/access.js";
-import {
-  CACHE_TTL,
-  resolveCacheSeconds,
-  setCacheHeaders,
-  setErrorCacheHeaders,
-} from "../src/common/cache.js";
-import { storeRequest } from "../src/common/database.js";
+import { renderRepoCard } from "../cards/repo.js";
 import {
  MissingParamError,
  retrieveSecondaryMessage,
-} from "../src/common/error.js";
-import { parseArray, parseBoolean } from "../src/common/ops.js";
-import { renderError } from "../src/common/render.js";
-import { fetchRepo } from "../src/fetchers/repo.js";
-import { isLocaleAvailable } from "../src/translations.js";
+} from "../common/error.js";
+import { parseArray, parseBoolean } from "../common/ops.js";
+import { renderError } from "../common/render.js";
+import { fetchRepo } from "../fetchers/repo.js";
+import { isLocaleAvailable } from "../translations.js";

 // @ts-ignore
-export default async (req, res) => {
-  const {
+export default async (
+  {
    username,
    repo,
    hide_border,
@@ -36,34 +28,17 @@ export default async (req, res) => {
    number_format,
    text_bold,
    line_height,
-    cache_seconds,
    locale,
    border_radius,
    border_color,
    description_lines_count,
-  } = req.query;
-
-  res.setHeader("Content-Type", "image/svg+xml");
-
-  const access = guardAccess({
-    res,
-    id: username,
-    type: "username",
-    colors: {
-      title_color,
-      text_color,
-      bg_color,
-      border_color,
-      theme,
-    },
-  });
-  if (!access.isPassed) {
-    return access.result;
-  }
-
+  },
+  pat = null,
+) => {
  if (locale && !isLocaleAvailable(locale)) {
-    return res.send(
-      renderError({
+    return {
+      status: "error - permanent",
+      content: renderError({
        message: "Something went wrong",
        secondaryMessage: "Language not found",
        renderOptions: {
@@ -74,7 +49,7 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }

  const safePattern = /^[-\w/.,]+$/;
@@ -82,8 +57,9 @@ export default async (req, res) => {
    (username && !safePattern.test(username)) ||
    (repo && !safePattern.test(repo))
  ) {
-    return res.send(
-      renderError({
+    return {
+      status: "error - permanent",
+      content: renderError({
        message: "Something went wrong",
        secondaryMessage: "Username or repository contains unsafe characters",
        renderOptions: {
@@ -94,11 +70,10 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }

  try {
-    await storeRequest(req);
    const showStats = parseArray(show);
    const repoData = await fetchRepo(
      username,
@@ -108,19 +83,12 @@ export default async (req, res) => {
      showStats.includes("prs_reviewed"),
      showStats.includes("issues_authored"),
      showStats.includes("issues_commented"),
+      pat,
    );

-    const cacheSeconds = resolveCacheSeconds({
-      requested: parseInt(cache_seconds, 10),
-      def: CACHE_TTL.PIN_CARD.DEFAULT,
-      min: CACHE_TTL.PIN_CARD.MIN,
-      max: CACHE_TTL.PIN_CARD.MAX,
-    });
-
-    setCacheHeaders(res, cacheSeconds);
-
-    return res.send(
-      renderRepoCard(repoData, {
+    return {
+      status: "success",
+      content: renderRepoCard(repoData, {
        hide_border: parseBoolean(hide_border),
        title_color,
        icon_color,
@@ -140,12 +108,12 @@ export default async (req, res) => {
        locale: locale ? locale.toLowerCase() : null,
        description_lines_count,
      }),
-    );
+    };
  } catch (err) {
-    setErrorCacheHeaders(res);
    if (err instanceof Error) {
-      return res.send(
-        renderError({
+      return {
+        status: "error - temporary",
+        content: renderError({
          message: err.message,
          secondaryMessage: retrieveSecondaryMessage(err),
          renderOptions: {
@@ -157,10 +125,11 @@ export default async (req, res) => {
            show_repo_link: !(err instanceof MissingParamError),
          },
        }),
-      );
+      };
    }
-    return res.send(
-      renderError({
+    return {
+      status: "error - temporary",
+      content: renderError({
        message: "An unknown error occurred",
        renderOptions: {
          title_color,
@@ -170,6 +139,6 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }
 };
@@ -1,26 +1,18 @@
 // @ts-check

-import { renderTopLanguages } from "../src/cards/top-languages.js";
-import { guardAccess } from "../src/common/access.js";
-import {
-  CACHE_TTL,
-  resolveCacheSeconds,
-  setCacheHeaders,
-  setErrorCacheHeaders,
-} from "../src/common/cache.js";
-import { storeRequest } from "../src/common/database.js";
+import { renderTopLanguages } from "../cards/top-languages.js";
 import {
  MissingParamError,
  retrieveSecondaryMessage,
-} from "../src/common/error.js";
-import { parseArray, parseBoolean } from "../src/common/ops.js";
-import { renderError } from "../src/common/render.js";
-import { fetchTopLanguages } from "../src/fetchers/top-languages.js";
-import { isLocaleAvailable } from "../src/translations.js";
+} from "../common/error.js";
+import { parseArray, parseBoolean } from "../common/ops.js";
+import { renderError } from "../common/render.js";
+import { fetchTopLanguages } from "../fetchers/top-languages.js";
+import { isLocaleAvailable } from "../translations.js";

 // @ts-ignore
-export default async (req, res) => {
-  const {
+export default async (
+  {
    username,
    hide,
    hide_title,
@@ -31,7 +23,6 @@ export default async (req, res) => {
    bg_color,
    prog_bar_bg_color,
    theme,
-    cache_seconds,
    layout,
    langs_count,
    exclude_repo,
@@ -45,28 +36,13 @@ export default async (req, res) => {
    disable_animations,
    hide_progress,
    stats_format,
-  } = req.query;
-  res.setHeader("Content-Type", "image/svg+xml");
-
-  const access = guardAccess({
-    res,
-    id: username,
-    type: "username",
-    colors: {
-      title_color,
-      text_color,
-      bg_color,
-      border_color,
-      theme,
-    },
-  });
-  if (!access.isPassed) {
-    return access.result;
-  }
-
+  },
+  pat = null,
+) => {
  if (locale && !isLocaleAvailable(locale)) {
-    return res.send(
-      renderError({
+    return {
+      status: "error - permanent",
+      content: renderError({
        message: "Something went wrong",
        secondaryMessage: "Locale not found",
        renderOptions: {
@@ -77,7 +53,7 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }

  if (
@@ -85,8 +61,9 @@ export default async (req, res) => {
    (typeof layout !== "string" ||
      !["compact", "normal", "donut", "donut-vertical", "pie"].includes(layout))
  ) {
-    return res.send(
-      renderError({
+    return {
+      status: "error - permanent",
+      content: renderError({
        message: "Something went wrong",
        secondaryMessage: "Incorrect layout input",
        renderOptions: {
@@ -97,7 +74,7 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }

  if (
@@ -105,8 +82,9 @@ export default async (req, res) => {
    (typeof stats_format !== "string" ||
      !["bytes", "percentages"].includes(stats_format))
  ) {
-    return res.send(
-      renderError({
+    return {
+      status: "error - permanent",
+      content: renderError({
        message: "Something went wrong",
        secondaryMessage: "Incorrect stats_format input",
        renderOptions: {
@@ -117,29 +95,22 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }

  try {
-    await storeRequest(req);
    const topLangs = await fetchTopLanguages(
      username,
      parseArray(exclude_repo),
      size_weight,
      count_weight,
      parseArray(role),
+      pat,
    );
-    const cacheSeconds = resolveCacheSeconds({
-      requested: parseInt(cache_seconds, 10),
-      def: CACHE_TTL.TOP_LANGS_CARD.DEFAULT,
-      min: CACHE_TTL.TOP_LANGS_CARD.MIN,
-      max: CACHE_TTL.TOP_LANGS_CARD.MAX,
-    });

-    setCacheHeaders(res, cacheSeconds);
-
-    return res.send(
-      renderTopLanguages(topLangs, {
+    return {
+      status: "success",
+      content: renderTopLanguages(topLangs, {
        custom_title,
        hide_title: parseBoolean(hide_title),
        hide_border: parseBoolean(hide_border),
@@ -159,12 +130,12 @@ export default async (req, res) => {
        hide_progress: parseBoolean(hide_progress),
        stats_format,
      }),
-    );
+    };
  } catch (err) {
-    setErrorCacheHeaders(res);
    if (err instanceof Error) {
-      return res.send(
-        renderError({
+      return {
+        status: "error - temporary",
+        content: renderError({
          message: err.message,
          secondaryMessage: retrieveSecondaryMessage(err),
          renderOptions: {
@@ -176,10 +147,11 @@ export default async (req, res) => {
            show_repo_link: !(err instanceof MissingParamError),
          },
        }),
-      );
+      };
    }
-    return res.send(
-      renderError({
+    return {
+      status: "error - temporary",
+      content: renderError({
        message: "An unknown error occurred",
        renderOptions: {
          title_color,
@@ -189,6 +161,6 @@ export default async (req, res) => {
          theme,
        },
      }),
-    );
+    };
  }
 };
@@ -0,0 +1,113 @@
+// @ts-check
+
+import { renderWakatimeCard } from "../cards/wakatime.js";
+import {
+  MissingParamError,
+  retrieveSecondaryMessage,
+} from "../common/error.js";
+import { parseArray, parseBoolean } from "../common/ops.js";
+import { renderError } from "../common/render.js";
+import { fetchWakatimeStats } from "../fetchers/wakatime.js";
+import { isLocaleAvailable } from "../translations.js";
+
+// @ts-ignore
+export default async ({
+  username,
+  title_color,
+  icon_color,
+  hide_border,
+  card_width,
+  line_height,
+  text_color,
+  bg_color,
+  theme,
+  hide_title,
+  hide_progress,
+  custom_title,
+  locale,
+  layout,
+  langs_count,
+  hide,
+  api_domain,
+  border_radius,
+  border_color,
+  display_format,
+  disable_animations,
+}) => {
+  if (locale && !isLocaleAvailable(locale)) {
+    return {
+      status: "error - permanent",
+      content: renderError({
+        message: "Something went wrong",
+        secondaryMessage: "Language not found",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+
+  try {
+    const stats = await fetchWakatimeStats({ username, api_domain });
+
+    return {
+      status: "success",
+      content: renderWakatimeCard(stats, {
+        custom_title,
+        hide_title: parseBoolean(hide_title),
+        hide_border: parseBoolean(hide_border),
+        card_width: parseInt(card_width, 10),
+        hide: parseArray(hide),
+        line_height,
+        title_color,
+        icon_color,
+        text_color,
+        bg_color,
+        theme,
+        hide_progress,
+        border_radius,
+        border_color,
+        locale: locale ? locale.toLowerCase() : null,
+        layout,
+        langs_count,
+        display_format,
+        disable_animations: parseBoolean(disable_animations),
+      }),
+    };
+  } catch (err) {
+    if (err instanceof Error) {
+      return {
+        status: "error - temporary",
+        content: renderError({
+          message: err.message,
+          secondaryMessage: retrieveSecondaryMessage(err),
+          renderOptions: {
+            title_color,
+            text_color,
+            bg_color,
+            border_color,
+            theme,
+            show_repo_link: !(err instanceof MissingParamError),
+          },
+        }),
+      };
+    }
+    return {
+      status: "error - temporary",
+      content: renderError({
+        message: "An unknown error occurred",
+        renderOptions: {
+          title_color,
+          text_color,
+          bg_color,
+          border_color,
+          theme,
+        },
+      }),
+    };
+  }
+};
@@ -233,7 +233,7 @@ const getStyles = ({
      transform: rotate(-90deg);
      animation: rankAnimation 1s forwards ease-in-out;
    }
-    ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })}
+    ${getProgressAnimation({ progress })}
  `;
 };

@@ -647,7 +647,7 @@ const renderPieLayout = (langs, totalLanguageSize, statsFormat) => {
 const createDonutPaths = (cx, cy, radius, percentages) => {
  const paths = [];
  let startAngle = 0;
-  let endAngle = 0;
+  let endAngle;

  const totalPercent = percentages.reduce((acc, curr) => acc + curr, 0);
  for (let i = 0; i < percentages.length; i++) {
@@ -840,7 +840,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
    theme,
  });

-  let finalLayout = "";
+  let finalLayout;
  if (langs.length === 0) {
    height = COMPACT_LAYOUT_BASE_HEIGHT;
    finalLayout = noLanguagesDataNode({
@@ -1,7 +1,7 @@
-type ThemeNames = keyof typeof import("../../themes/index.js");
+type ThemeNames = keyof typeof import("../themes/index.ts");
 type RankIcon = "default" | "github" | "percentile";

-type CommonOptions = {
+interface CommonOptions {
  title_color: string;
  icon_color: string;
  text_color: string;
@@ -11,10 +11,10 @@ type CommonOptions = {
  border_color: string;
  locale: string;
  hide_border: boolean;
-};
+}

 export type StatCardOptions = CommonOptions & {
-  hide: string[];
+  hide: Array<string>;
  show_icons: boolean;
  hide_title: boolean;
  card_width: number;
@@ -29,14 +29,14 @@ export type StatCardOptions = CommonOptions & {
  ring_color: string;
  text_bold: boolean;
  rank_icon: RankIcon;
-  show: string[];
+  show: Array<string>;
 };

 export type RepoCardOptions = CommonOptions & {
  show_owner: boolean;
  description_lines_count: number;
  card_width_input;
-  show: string[];
+  show: Array<string>;
  show_icons: boolean;
  number_format: string;
  text_bold: boolean;
@@ -47,7 +47,7 @@ export type RepoCardOptions = CommonOptions & {
 export type TopLangOptions = CommonOptions & {
  hide_title: boolean;
  card_width: number;
-  hide: string[];
+  hide: Array<string>;
  layout: "compact" | "normal" | "donut" | "donut-vertical" | "pie";
  custom_title: string;
  langs_count: number;
@@ -59,7 +59,7 @@ export type TopLangOptions = CommonOptions & {

 export type WakaTimeOptions = CommonOptions & {
  hide_title: boolean;
-  hide: string[];
+  hide: Array<string>;
  card_width: number;
  line_height: string;
  hide_progress: boolean;
@@ -305,7 +305,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
    textColor,
  });

-  let finalLayout = "";
+  let finalLayout;

  // RENDER COMPACT LAYOUT
  if (layout === "compact") {
@@ -230,7 +230,7 @@ class Card {
          }
          ${this.css}

-          ${process.env.NODE_ENV === "test" ? "" : this.getAnimations()}
+          ${this.getAnimations()}
          ${
            this.animations === false
              ? `* { animation-duration: 0s !important; animation-delay: 0s !important; }`
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default as router } from "./router.js";`