chore: remove useragent dep

refactor: refactored code and added comments
fix: firefox layout breaking
2020-07-13 23:44:56 +05:30 · 2020-07-13 23:40:10 +05:30 · 2020-07-13 22:01:34 +05:30 · 2020-07-13 19:50:43 +05:30 · 2020-07-13 19:41:47 +05:30 · 2020-07-13 16:15:50 +05:30
23 changed files with 1315 additions and 308 deletions
@@ -0,0 +1,36 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - "*"
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-cache-
+
+      - name: Install & Test
+        run: |
+          npm install
+          npm run test
@@ -1,3 +1,4 @@
 .vercel
 .env
-node_modules
+node_modules
+package-lock.json
@@ -1 +1,2 @@
-.env
+.env
+package-lock.json
@@ -1,141 +1,21 @@
-const axios = require("axios");
-const { renderError, kFormatter } = require("../utils");
 require("dotenv").config();
-
-async function fetchStats(username) {
-  if (!username) throw Error("Invalid username");
-
-  const res = await axios({
-    url: "https://api.github.com/graphql",
-    method: "post",
-    headers: {
-      Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
-    },
-    data: {
-      query: `
-        query userInfo($login: String!) {
-          user(login: $login) {
-            name
-            repositoriesContributedTo(first: 100, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
-              totalCount
-            }
-            contributionsCollection {
-              totalCommitContributions
-            }
-            pullRequests(first: 100) {
-              totalCount
-            }
-            issues(first: 100) {
-              totalCount
-            }
-            repositories(first: 100) {
-              nodes {
-                stargazers {
-                  totalCount
-                }
-              }
-            }
-          }
-        }
-      `,
-      variables: {
-        login: username,
-      },
-    },
-  });
-
-  const stats = {
-    name: "",
-    totalPRs: 0,
-    totalCommits: 0,
-    totalIssues: 0,
-    totalStars: 0,
-    contributedTo: 0,
-  };
-
-  if (res.data.errors) {
-    console.log(res.data.errors);
-    throw Error("Could not fetch user");
-  }
-
-  const user = res.data.data.user;
-
-  stats.name = user.name;
-  stats.totalIssues = user.issues.totalCount;
-  stats.totalCommits = user.contributionsCollection.totalCommitContributions;
-  stats.totalPRs = user.pullRequests.totalCount;
-  stats.contributedTo = user.repositoriesContributedTo.totalCount;
-
-  stats.totalStars = user.repositories.nodes.reduce((prev, curr) => {
-    return prev + curr.stargazers.totalCount;
-  }, 0);
-
-  return stats;
-}
-
-const createTextNode = (icon, label, value, lheight) => {
-  const classname = icon === "★" && "star-icon";
-  return `
-    <tspan x="25" dy="${lheight}" class="stat bold">
-    <tspan class="icon ${classname}" fill="#4C71F2">${icon}</tspan> ${label}:</tspan>
-    <tspan x="155" dy="0" class="stat">${kFormatter(value)}</tspan>
-  `;
-};
-
-const renderSVG = (stats, options) => {
-  const {
-    name,
-    totalStars,
-    totalCommits,
-    totalIssues,
-    totalPRs,
-    contributedTo,
-  } = stats;
-  const { hide, show_icons, hide_border, line_height } = options || {};
-
-  const lheight = line_height || 25;
-
-  const STAT_MAP = {
-    stars: createTextNode("★", "Total Stars", totalStars, lheight),
-    commits: createTextNode("🕗", "Total Commits", totalCommits, lheight),
-    prs: createTextNode("🔀", "Total PRs", totalPRs, lheight),
-    issues: createTextNode("ⓘ", "Total Issues", totalIssues, lheight),
-    contribs: createTextNode("📕", "Contributed to", contributedTo, lheight),
-  };
-
-  const statItems = Object.keys(STAT_MAP)
-    .filter((key) => !hide.includes(key))
-    .map((key) => STAT_MAP[key]);
-
-  const height = 45 + (statItems.length + 1) * lheight;
-
-  return `
-    <svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <style>
-      .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
-      .stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
-      .star-icon { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; }
-      .bold { font-weight: 700 }
-      .icon {
-        display: none;
-        ${!!show_icons && "display: block"}
-      }
-      </style>
-      ${
-        !hide_border &&
-        `<rect x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>`
-      }
-     
-      <text x="25" y="35" class="header">${name}'s GitHub Stats</text>
-      <text y="45">
-        ${statItems}
-      </text>
-    </svg>
-  `;
-};
+const { renderError } = require("../src/utils");
+const fetchStats = require("../src/fetchStats");
+const renderStatsCard = require("../src/renderStatsCard");

 module.exports = async (req, res) => {
-  const { username, hide, hide_border, show_icons, line_height } = req.query;
+  const {
+    username,
+    hide,
+    hide_border,
+    hide_rank,
+    show_icons,
+    line_height,
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+  } = req.query;
  let stats;

  res.setHeader("Content-Type", "image/svg+xml");
@@ -146,11 +26,16 @@ module.exports = async (req, res) => {
  }

  res.send(
-    renderSVG(stats, {
+    renderStatsCard(stats, {
      hide: JSON.parse(hide || "[]"),
      show_icons,
      hide_border,
+      hide_rank,
      line_height,
+      title_color,
+      icon_color,
+      text_color,
+      bg_color,
    })
  );
 };
@@ -1,122 +1,17 @@
-const axios = require("axios");
-const { renderError, kFormatter, encodeHTML } = require("../utils");
 require("dotenv").config();
-
-async function fetchRepo(username, reponame) {
-  const res = await axios({
-    url: "https://api.github.com/graphql",
-    method: "post",
-    headers: {
-      Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
-    },
-    data: {
-      query: `
-        fragment RepoInfo on Repository {
-          name
-          stargazers {
-            totalCount
-          }
-          description
-          primaryLanguage {
-            color
-            id
-            name
-          }
-          forkCount
-        }
-        query getRepo($login: String!, $repo: String!) {
-          user(login: $login) {
-            repository(name: $repo) {
-              ...RepoInfo
-            }
-          }
-          organization(login: $login) {
-            repository(name: $repo) {
-              ...RepoInfo
-            }
-          }
-        }
-      `,
-      variables: {
-        login: username,
-        repo: reponame,
-      },
-    },
-  });
-
-  const data = res.data.data;
-
-  if (!data.user && !data.organization) {
-    throw new Error("Not found");
-  }
-
-  if (data.organization === null && data.user) {
-    if (!data.user.repository) {
-      throw new Error("User Repository Not found");
-    }
-    return data.user.repository;
-  }
-
-  if (data.user === null && data.organization) {
-    if (!data.organization.repository) {
-      throw new Error("Organization Repository Not found");
-    }
-    return data.organization.repository;
-  }
-}
-
-const renderRepoCard = (repo) => {
-  const { name, description, primaryLanguage, stargazers, forkCount } = repo;
-  const height = 120;
-  const shiftText = primaryLanguage.name.length > 15 ? 0 : 30;
-
-  let desc = description || "No description provided";
-  if (desc.length > 55) {
-    desc = `${description.slice(0, 55)}..`;
-  }
-
-  return `
-    <svg width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <style>
-      .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
-      .stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
-      .star-icon { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; }
-      .bold { font-weight: 700 }
-      .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #586069 }
-      .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #586069 }
-      </style>
-      <rect x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
-      <svg x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16" fill="#586069">
-        <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"></path>
-      </svg>
-
-      <text x="50" y="38" class="header">${name}</text>
-      <text class="description" x="25" y="70">${encodeHTML(desc)}</text>
-      
-      <g transform="translate(30, 100)">
-        <circle cx="0" cy="-5" r="6" fill="${primaryLanguage.color}" />
-        <text class="gray" x="15">${primaryLanguage.name}</text>
-      </g>
-      
-      <g transform="translate(${155 - shiftText}, 100)">
-        <svg y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16" fill="#586069">
-          <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"></path>
-        </svg>
-        <text class="gray" x="25">${kFormatter(stargazers.totalCount)}</text>
-      </g>
-
-      <g transform="translate(${220 - shiftText}, 100)">
-        <svg y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16" fill="#586069">
-          <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
-        </svg>
-        <text class="gray" x="25">${kFormatter(forkCount)}</text>
-      </g>
-    </svg>
-  `;
-};
+const { renderError } = require("../src/utils");
+const fetchRepo = require("../src/fetchRepo");
+const renderRepoCard = require("../src/renderRepoCard");

 module.exports = async (req, res) => {
-  const { username, repo } = req.query;
+  const {
+    username,
+    repo,
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+  } = req.query;

  let repoData;
  res.setHeader("Content-Type", "image/svg+xml");
@@ -128,5 +23,12 @@ module.exports = async (req, res) => {
    return res.send(renderError(err.message));
  }

-  res.send(renderRepoCard(repoData));
+  res.send(
+    renderRepoCard(repoData, {
+      title_color,
+      icon_color,
+      text_color,
+      bg_color,
+    })
+  );
 };
@@ -0,0 +1,3 @@
+module.exports = {
+  clearMocks: true,
+};
@@ -1,46 +0,0 @@
-{
-  "name": "github-readme-stats",
-  "version": "1.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "axios": {
-      "version": "0.19.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
-      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
-      "dev": true,
-      "requires": {
-        "follow-redirects": "1.5.10"
-      }
-    },
-    "debug": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-      "dev": true,
-      "requires": {
-        "ms": "2.0.0"
-      }
-    },
-    "dotenv": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
-      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
-    },
-    "follow-redirects": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-      "dev": true,
-      "requires": {
-        "debug": "=3.1.0"
-      }
-    },
-    "ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
-    }
-  }
-}
@@ -1,15 +1,21 @@
 {
  "name": "github-readme-stats",
  "version": "1.0.0",
-  "description": "",
+  "description": "Dynamically generate stats for your github readmes",
  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest",
+    "test:watch": "jest --watch"
  },
  "author": "Anurag Hazra",
  "license": "MIT",
  "devDependencies": {
-    "axios": "^0.19.2"
+    "@testing-library/dom": "^7.20.0",
+    "@testing-library/jest-dom": "^5.11.0",
+    "axios": "^0.19.2",
+    "axios-mock-adapter": "^1.18.1",
+    "css-to-object": "^1.1.0",
+    "jest": "^26.1.0"
  },
  "dependencies": {
    "dotenv": "^8.2.0"
@@ -1,11 +1,33 @@
-## Github Readme stats
+<p align="center">
+ <h2 align="center">Github Readme Stats</h2>
+ <p align="center">Get dynamically generated GitHub stats on your readmes!</p>

-Get dynamically generated GitHub stats on your readmes!
+  <p align="center">
+    <a href="https://github.com/anuraghazra/github-readme-stats/actions">
+      <img alt="Tests Passing" src="https://github.com/anuraghazra/github-readme-stats/workflows/Test/badge.svg" />
+    </a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues">
+      <img alt="Issues" src="https://img.shields.io/github/issues/anuraghazra/github-readme-stats?color=0088ff" />
+    </a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/pulls">
+      <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/anuraghazra/github-readme-stats?color=0088ff" />
+    </a>
+  </p>
+
+  <p align="center">
+    <a href="#demo">View Demo</a>
+    ·
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues">Request Feature</a>
+  </p>
+</p>

 # Features

 - [Github Stats Card](#github-stats-card)
 - [Github Extra Pins](#github-extra-pins)
+- [Customization](#customization)
 - [Deploy Yourself](#deploy-on-your-own-vercel-instance)

 # Github Stats Card
@@ -18,6 +40,8 @@ change the `?username=` value to your GitHubs's username
 [![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 ```

+_Note: Ranks are calculated based on users stats, see [src/calculateRank.js](./src/calculateRank.js)_
+
 ### Hiding individual stats

 To hide any specific stats, you can pass a query parameter `?hide=` with an array of items, you wanna hide.
@@ -40,6 +64,26 @@ Other options:

 - `&hide_border=true` hide the border box if you don't like it :D.
 - `&line_height=30` control the line-height between text.
+- `&hide_rank=true` hides the ranking
+
+### Customization
+
+You can customize the appearance of your `Stats Card` or `Repo Card` however you want with url params.
+
+Customization Options:
+
+| Option      | type      | Stats Card (default)   | Repo Card (default)    |
+| ----------- | --------- | ---------------------- | ---------------------- |
+| title_color | hex color | #2f80ed                | #2f80ed                |
+| text_color  | hex color | #333                   | #333                   |
+| icon_color  | hex color | #4c71f2                | #586069                |
+| bg_color    | hex color | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) |
+
+- You can also customize the cards to be compatible with dark mode
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
+```

 ### Demo

@@ -55,6 +99,14 @@ Other options:

 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)

+- Customizing stats card
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
+
+- Customizing repo card
+
+![Customized Card](https://github-readme-stats.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&title_color=fff&icon_color=f9f9f9&text_color=9f9f9f&bg_color=151515)
+
 # Github Extra Pins

 Github extra pins allow you to pin more than 6 repositories in your profile using a GitHub readme profile.
@@ -0,0 +1,52 @@
+function calculateRank({
+  totalRepos,
+  totalCommits,
+  contributions,
+  followers,
+  prs,
+  issues,
+  stargazers,
+}) {
+  const COMMITS_OFFSET = 1.65;
+  const CONTRIBS_OFFSET = 1.65;
+  const ISSUES_OFFSET = 1;
+  const STARS_OFFSET = 0.75;
+  const PRS_OFFSET = 0.5;
+  const FOLLOWERS_OFFSET = 0.45;
+
+  const FIRST_STEP = 0;
+  const SECOND_STEP = 5;
+  const THIRD_STEP = 20;
+  const FOURTH_STEP = 50;
+  const FIFTH_STEP = 130;
+
+  // prettier-ignore
+  const score = (
+    totalCommits * COMMITS_OFFSET +
+    contributions * CONTRIBS_OFFSET +
+    issues * ISSUES_OFFSET +
+    stargazers * STARS_OFFSET +
+    prs * PRS_OFFSET +
+    followers * FOLLOWERS_OFFSET
+  ) / totalRepos;
+
+  let level = "";
+
+  if (score == FIRST_STEP) {
+    level = "B";
+  } else if (score > FIRST_STEP && score <= SECOND_STEP) {
+    level = "B+";
+  } else if (score > SECOND_STEP && score <= THIRD_STEP) {
+    level = "A";
+  } else if (score > THIRD_STEP && score <= FOURTH_STEP) {
+    level = "A+";
+  } else if (score > FOURTH_STEP && score <= FIFTH_STEP) {
+    level = "A++";
+  } else if (score > FIFTH_STEP) {
+    level = "S+";
+  }
+
+  return { level, score };
+}
+
+module.exports = calculateRank;
@@ -0,0 +1,63 @@
+const { request } = require("./utils");
+
+async function fetchRepo(username, reponame) {
+  if (!username || !reponame) {
+    throw new Error("Invalid username or reponame");
+  }
+
+  const res = await request({
+    query: `
+      fragment RepoInfo on Repository {
+        name
+        stargazers {
+          totalCount
+        }
+        description
+        primaryLanguage {
+          color
+          id
+          name
+        }
+        forkCount
+      }
+      query getRepo($login: String!, $repo: String!) {
+        user(login: $login) {
+          repository(name: $repo) {
+            ...RepoInfo
+          }
+        }
+        organization(login: $login) {
+          repository(name: $repo) {
+            ...RepoInfo
+          }
+        }
+      }
+    `,
+    variables: {
+      login: username,
+      repo: reponame,
+    },
+  });
+
+  const data = res.data.data;
+
+  if (!data.user && !data.organization) {
+    throw new Error("Not found");
+  }
+
+  if (data.organization === null && data.user) {
+    if (!data.user.repository) {
+      throw new Error("User Repository Not found");
+    }
+    return data.user.repository;
+  }
+
+  if (data.user === null && data.organization) {
+    if (!data.organization.repository) {
+      throw new Error("Organization Repository Not found");
+    }
+    return data.organization.repository;
+  }
+}
+
+module.exports = fetchRepo;
@@ -0,0 +1,83 @@
+const { request } = require("./utils");
+const calculateRank = require("./calculateRank");
+require("dotenv").config();
+
+async function fetchStats(username) {
+  if (!username) throw Error("Invalid username");
+
+  const res = await request({
+    query: `
+      query userInfo($login: String!) {
+        user(login: $login) {
+          name
+          login
+          repositoriesContributedTo(first: 100, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
+            totalCount
+          }
+          contributionsCollection {
+            totalCommitContributions
+          }
+          pullRequests(first: 100) {
+            totalCount
+          }
+          issues(first: 100) {
+            totalCount
+          }
+          followers {
+            totalCount
+          }
+          repositories(first: 100, orderBy: { direction: DESC, field: STARGAZERS }) {
+            totalCount
+            nodes {
+              stargazers {
+                totalCount
+              }
+            }
+          }
+        }
+      }
+    `,
+    variables: { login: username },
+  });
+
+  const stats = {
+    name: "",
+    totalPRs: 0,
+    totalCommits: 0,
+    totalIssues: 0,
+    totalStars: 0,
+    contributedTo: 0,
+    rank: "C",
+  };
+
+  if (res.data.errors) {
+    console.log(res.data.errors);
+    throw Error("Could not fetch user");
+  }
+
+  const user = res.data.data.user;
+
+  stats.name = user.name || user.login;
+  stats.totalIssues = user.issues.totalCount;
+  stats.totalCommits = user.contributionsCollection.totalCommitContributions;
+  stats.totalPRs = user.pullRequests.totalCount;
+  stats.contributedTo = user.repositoriesContributedTo.totalCount;
+
+  stats.totalStars = user.repositories.nodes.reduce((prev, curr) => {
+    return prev + curr.stargazers.totalCount;
+  }, 0);
+
+  stats.rank = calculateRank({
+    totalCommits: stats.totalCommits,
+    totalRepos: user.repositories.totalCount,
+    followers: user.followers.totalCount,
+    contributions: stats.contributedTo,
+    stargazers: stats.totalStars,
+    prs: stats.totalPRs,
+    issues: stats.totalIssues,
+  });
+
+  return stats;
+}
+
+module.exports = fetchStats;
@@ -0,0 +1,66 @@
+const { kFormatter, encodeHTML, isValidHexColor } = require("../src/utils");
+
+const renderRepoCard = (repo, options = {}) => {
+  const { name, description, primaryLanguage, stargazers, forkCount } = repo;
+  const { title_color, icon_color, text_color, bg_color } = options;
+
+  const height = 120;
+  const shiftText = primaryLanguage.name.length > 15 ? 0 : 30;
+
+  let desc = description || "No description provided";
+  if (desc.length > 55) {
+    desc = `${description.slice(0, 55)}..`;
+  }
+
+  const titleColor =
+    (isValidHexColor(title_color) && `#${title_color}`) || "#2f80ed";
+  const iconColor =
+    (isValidHexColor(icon_color) && `#${icon_color}`) || "#586069";
+  const textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
+  const bgColor = (isValidHexColor(bg_color) && `#${bg_color}`) || "#FFFEFE";
+
+  const totalStars = kFormatter(stargazers.totalCount);
+  const totalForks = kFormatter(forkCount);
+  return `
+    <svg width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <style>
+      .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
+      .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+      .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+      .icon { fill: ${iconColor} }
+      </style>
+      <rect data-testid="card-border" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
+      <svg class="icon" x="25" y="25" 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"></path>
+      </svg>
+
+      <text x="50" y="38" class="header">${name}</text>
+      <text class="description" x="25" y="70">${encodeHTML(desc)}</text>
+      
+      <g transform="translate(30, 100)">
+        <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${
+          primaryLanguage.color
+        }" />
+        <text data-testid="lang" class="gray" x="15">${
+          primaryLanguage.name
+        }</text>
+      </g>
+
+      <g transform="translate(${155 - shiftText}, 100)">
+        <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"></path>
+        </svg>
+        <text data-testid="stargazers" class="gray" x="25">${totalStars}</text>
+      </g>
+
+      <g transform="translate(${220 - shiftText}, 100)">
+        <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"></path>
+        </svg>
+        <text data-testid="forkcount" class="gray" x="25">${totalForks}</text>
+      </g>
+    </svg>
+  `;
+};
+
+module.exports = renderRepoCard;
@@ -0,0 +1,167 @@
+const { kFormatter, isValidHexColor } = require("../src/utils");
+
+const createTextNode = ({ icon, label, value, id, index, lineHeight }) => {
+  const classname = icon === "★" && "star-icon";
+  const kValue = kFormatter(value);
+  // manually calculating lineHeight based on index instead of using <tspan dy="" />
+  // to fix firefox layout bug
+  return `
+    <text x="25" y="${lineHeight * (index + 1)}">
+      <tspan dx="0" data-testid="icon" class="icon ${classname}">${icon}</tspan>   
+      <tspan dx="0" class="stat bold">
+       ${label}:
+      </tspan>
+      <tspan x="160" data-testid="${id}" class="stat">${kValue}</tspan>
+    </text>
+  `;
+};
+
+const renderStatsCard = (stats = {}, options = { hide: [] }) => {
+  const {
+    name,
+    totalStars,
+    totalCommits,
+    totalIssues,
+    totalPRs,
+    contributedTo,
+    rank,
+  } = stats;
+  const {
+    hide = [],
+    show_icons = false,
+    hide_border = false,
+    hide_rank = false,
+    line_height = 25,
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+  } = options;
+
+  const lheight = parseInt(line_height);
+
+  const titleColor =
+    (isValidHexColor(title_color) && `#${title_color}`) || "#2f80ed";
+  const iconColor =
+    (isValidHexColor(icon_color) && `#${icon_color}`) || "#4c71f2";
+  const textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
+  const bgColor = (isValidHexColor(bg_color) && `#${bg_color}`) || "#FFFEFE";
+
+  const STATS = {
+    stars: {
+      icon: "★",
+      label: "Total Stars",
+      value: totalStars,
+      id: "stars",
+    },
+    commits: {
+      icon: "🕗",
+      label: "Total Commits",
+      value: totalCommits,
+      id: "commits",
+    },
+    prs: {
+      icon: "🔀",
+      label: "Total PRs",
+      value: totalPRs,
+      id: "prs",
+    },
+    issues: {
+      icon: "ⓘ",
+      label: "Total Issues",
+      value: totalIssues,
+      id: "issues",
+    },
+    contribs: {
+      icon: "📕",
+      label: "Contributed to",
+      value: contributedTo,
+      id: "contribs",
+    },
+  };
+
+  const statItems = Object.keys(STATS)
+    .filter((key) => !hide.includes(key))
+    .map((key, index) =>
+      // create the text nodes, and pass index so that we can calculate the line spacing 
+      createTextNode({ ...STATS[key], index, lineHeight: lheight })
+    );
+
+  // Calculate the card height depending on how many items there are
+  // but if rank circle is visible clamp the minimum height to `150`
+  const height = Math.max(
+    45 + (statItems.length + 1) * lheight,
+    hide_rank ? 0 : 150
+  );
+
+  const border = `
+    <rect 
+      data-testid="card-border"
+      x="0.5"
+      y="0.5"
+      width="494"
+      height="99%"
+      rx="4.5"
+      fill="${bgColor}"
+      stroke="#E4E2E2"
+    />
+  `;
+
+  const rankProgress = 180 + rank.score * 0.8;
+  const rankCircle = hide_rank
+    ? ""
+    : `<g data-testid="rank-circle" transform="translate(400, ${
+        height / 1.85
+      })">
+        <circle class="rank-circle" cx="-10" cy="8" r="40" />
+        <text
+          x="0"
+          y="0"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+          class="rank-text"
+          transform="translate(-5, 5)"
+        >
+          ${rank.level}
+        </text>
+      </g>`;
+
+  return `
+    <svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <style>
+      .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor}; }
+      .stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; }
+      .rank-text { font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; }
+      .star-icon { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; }
+      .bold { font-weight: 700 }
+      .icon {
+        fill: ${iconColor};
+        display: ${!!show_icons ? "block" : "none"};
+      }
+      .rank-circle {
+        stroke-dashoffset: 30;
+        stroke-dasharray: ${rankProgress};
+        stroke: ${titleColor};
+        fill: none;
+        stroke-width: 6;
+        stroke-linecap: round;
+        opacity: 0.8;
+        transform-origin: -10px 8px;
+        transform: rotate(-90deg);
+      }
+      </style>
+      ${hide_border ? "" : border}
+
+      ${rankCircle}
+      
+      <text x="25" y="35" class="header">${name}'s GitHub Stats</text>
+
+      <svg x="0" y="45">
+        ${statItems.toString().replace(/\,/gm, "")}
+      </svg>
+    </svg>
+  `;
+};
+
+module.exports = renderStatsCard;
@@ -1,3 +1,5 @@
+const axios = require("axios");
+
 const renderError = (message) => {
  return `
    <svg width="495" height="100" viewBox="0 0 495 100" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -7,7 +9,7 @@ const renderError = (message) => {
    </style>
    <rect x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
    <text x="25" y="45" class="text">Something went wrong! file an issue at https://git.io/JJmN9</text>
-    <text x="25" y="65" class="text small">${message}</text>
+    <text id="message" x="25" y="65" class="text small">${message}</text>
    </svg>
  `;
 };
@@ -25,4 +27,25 @@ function kFormatter(num) {
    : Math.sign(num) * Math.abs(num);
 }

-module.exports = { renderError, kFormatter, encodeHTML };
+function isValidHexColor(hexColor) {
+  return new RegExp(
+    /^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4})$/
+  ).test(hexColor);
+}
+
+function request(data) {
+  return new Promise((resolve, reject) => {
+    axios({
+      url: "https://api.github.com/graphql",
+      method: "post",
+      headers: {
+        Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
+      },
+      data,
+    })
+      .then((response) => resolve(response))
+      .catch((error) => reject(error));
+  });
+}
+
+module.exports = { renderError, kFormatter, encodeHTML, isValidHexColor, request };
@@ -0,0 +1,135 @@
+require("@testing-library/jest-dom");
+const axios = require("axios");
+const MockAdapter = require("axios-mock-adapter");
+const api = require("../api/index");
+const renderStatsCard = require("../src/renderStatsCard");
+const { renderError } = require("../src/utils");
+const calculateRank = require("../src/calculateRank");
+
+const stats = {
+  name: "Anurag Hazra",
+  totalStars: 100,
+  totalCommits: 200,
+  totalIssues: 300,
+  totalPRs: 400,
+  contributedTo: 500,
+  rank: null,
+};
+stats.rank = calculateRank({
+  totalCommits: stats.totalCommits,
+  totalRepos: 1,
+  followers: 0,
+  contributions: stats.contributedTo,
+  stargazers: stats.totalStars,
+  prs: stats.totalPRs,
+  issues: stats.totalIssues,
+});
+
+const data = {
+  data: {
+    user: {
+      name: stats.name,
+      repositoriesContributedTo: { totalCount: stats.contributedTo },
+      contributionsCollection: { totalCommitContributions: stats.totalCommits },
+      pullRequests: { totalCount: stats.totalPRs },
+      issues: { totalCount: stats.totalIssues },
+      followers: { totalCount: 0 },
+      repositories: {
+        totalCount: 1,
+        nodes: [{ stargazers: { totalCount: 100 } }],
+      },
+    },
+  },
+};
+
+const error = {
+  errors: [
+    {
+      type: "NOT_FOUND",
+      path: ["user"],
+      locations: [],
+      message: "Could not fetch user",
+    },
+  ],
+};
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+describe("Test /api/", () => {
+  it("should test the request", async () => {
+    const req = {
+      query: {
+        username: "anuraghazra",
+      },
+    };
+    const res = {
+      setHeader: jest.fn(),
+      send: jest.fn(),
+    };
+    mock.onPost("https://api.github.com/graphql").reply(200, data);
+
+    await api(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(renderStatsCard(stats, { ...req.query }));
+  });
+
+  it("should render error card on error", async () => {
+    const req = {
+      query: {
+        username: "anuraghazra",
+      },
+    };
+    const res = {
+      setHeader: jest.fn(),
+      send: jest.fn(),
+    };
+    mock.onPost("https://api.github.com/graphql").reply(200, error);
+
+    await api(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(renderError(error.errors[0].message));
+  });
+
+  it("should get the query options", async () => {
+    const req = {
+      query: {
+        username: "anuraghazra",
+        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",
+      },
+    };
+    const res = {
+      setHeader: jest.fn(),
+      send: jest.fn(),
+    };
+    mock.onPost("https://api.github.com/graphql").reply(200, data);
+
+    await api(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(
+      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",
+      })
+    );
+  });
+});
@@ -0,0 +1,18 @@
+require("@testing-library/jest-dom");
+const calculateRank = require("../src/calculateRank");
+
+describe("Test calculateRank", () => {
+  it("should calculate rank correctly", () => {
+    expect(
+      calculateRank({
+        totalCommits: 100,
+        totalRepos: 5,
+        followers: 100,
+        contributions: 61,
+        stargazers: 400,
+        prs: 300,
+        issues: 200,
+      })
+    ).toStrictEqual({ level: "S+", score: 192.13 });
+  });
+});
@@ -0,0 +1,83 @@
+require("@testing-library/jest-dom");
+const axios = require("axios");
+const MockAdapter = require("axios-mock-adapter");
+const fetchRepo = require("../src/fetchRepo");
+
+const data_repo = {
+  repository: {
+    name: "convoychat",
+    stargazers: { totalCount: 38000 },
+    description: "Help us take over the world! React + TS + GraphQL Chat App",
+    primaryLanguage: {
+      color: "#2b7489",
+      id: "MDg6TGFuZ3VhZ2UyODc=",
+      name: "TypeScript",
+    },
+    forkCount: 100,
+  },
+};
+
+const data_user = {
+  data: {
+    user: { repository: data_repo },
+    organization: null,
+  },
+};
+const data_org = {
+  data: {
+    user: null,
+    organization: { repository: data_repo },
+  },
+};
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+describe("Test fetchRepo", () => {
+  it("should fetch correct user repo", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
+
+    let repo = await fetchRepo("anuraghazra", "convoychat");
+    expect(repo).toStrictEqual(data_repo);
+  });
+
+  it("should fetch correct org repo", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_org);
+
+    let repo = await fetchRepo("anuraghazra", "convoychat");
+    expect(repo).toStrictEqual(data_repo);
+  });
+
+  it("should throw error if user is found but repo is null", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: { repository: null }, organization: null } });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "User Repository Not found"
+    );
+  });
+
+  it("should throw error if org is found but repo is null", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: null, organization: { repository: null } } });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "Organization Repository Not found"
+    );
+  });
+
+  it("should throw error if both user & org data not found", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: null, organization: null } });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "Not found"
+    );
+  });
+});
@@ -0,0 +1,80 @@
+require("@testing-library/jest-dom");
+const axios = require("axios");
+const MockAdapter = require("axios-mock-adapter");
+const fetchStats = require("../src/fetchStats");
+const calculateRank = require("../src/calculateRank");
+
+const data = {
+  data: {
+    user: {
+      name: "Anurag Hazra",
+      repositoriesContributedTo: { totalCount: 61 },
+      contributionsCollection: { totalCommitContributions: 100 },
+      pullRequests: { totalCount: 300 },
+      issues: { totalCount: 200 },
+      followers: { totalCount: 100 },
+      repositories: {
+        totalCount: 5,
+        nodes: [
+          { stargazers: { totalCount: 100 } },
+          { stargazers: { totalCount: 100 } },
+          { stargazers: { totalCount: 100 } },
+          { stargazers: { totalCount: 50 } },
+          { stargazers: { totalCount: 50 } },
+        ],
+      },
+    },
+  },
+};
+
+const error = {
+  errors: [
+    {
+      type: "NOT_FOUND",
+      path: ["user"],
+      locations: [],
+      message: "Could not resolve to a User with the login of 'noname'.",
+    },
+  ],
+};
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+describe("Test fetchStats", () => {
+  it("should fetch correct stats", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data);
+
+    let stats = await fetchStats("anuraghazra");
+    const rank = calculateRank({
+      totalCommits: 100,
+      totalRepos: 5,
+      followers: 100,
+      contributions: 61,
+      stargazers: 400,
+      prs: 300,
+      issues: 200,
+    });
+
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalStars: 400,
+      rank,
+    });
+  });
+
+  it("should throw error", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, error);
+
+    await expect(fetchStats("anuraghazra")).rejects.toThrow(
+      "Could not fetch user"
+    );
+  });
+});
@@ -0,0 +1,123 @@
+require("@testing-library/jest-dom");
+const axios = require("axios");
+const MockAdapter = require("axios-mock-adapter");
+const pin = require("../api/pin");
+const renderRepoCard = require("../src/renderRepoCard");
+const { renderError } = require("../src/utils");
+
+const data_repo = {
+  repository: {
+    name: "convoychat",
+    stargazers: { totalCount: 38000 },
+    description: "Help us take over the world! React + TS + GraphQL Chat App",
+    primaryLanguage: {
+      color: "#2b7489",
+      id: "MDg6TGFuZ3VhZ2UyODc=",
+      name: "TypeScript",
+    },
+    forkCount: 100,
+  },
+};
+
+const data_user = {
+  data: {
+    user: { repository: data_repo.repository },
+    organization: null,
+  },
+};
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+describe("Test /api/pin", () => {
+  it("should test the request", async () => {
+    const req = {
+      query: {
+        username: "anuraghazra",
+        repo: "convoychat",
+      },
+    };
+    const res = {
+      setHeader: jest.fn(),
+      send: jest.fn(),
+    };
+    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
+
+    await pin(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(renderRepoCard(data_repo.repository));
+  });
+
+  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",
+      },
+    };
+    const res = {
+      setHeader: jest.fn(),
+      send: jest.fn(),
+    };
+    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
+
+    await pin(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(
+      renderRepoCard(data_repo.repository, { ...req.query })
+    );
+  });
+
+  it("should render error card if user repo not found", async () => {
+    const req = {
+      query: {
+        username: "anuraghazra",
+        repo: "convoychat",
+      },
+    };
+    const res = {
+      setHeader: jest.fn(),
+      send: jest.fn(),
+    };
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: { repository: null }, organization: null } });
+
+    await pin(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(renderError("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: jest.fn(),
+      send: jest.fn(),
+    };
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: null, organization: { repository: null } } });
+
+    await pin(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(
+      renderError("Organization Repository Not found")
+    );
+  });
+});
@@ -0,0 +1,139 @@
+require("@testing-library/jest-dom");
+const cssToObject = require("css-to-object");
+const renderRepoCard = require("../src/renderRepoCard");
+
+const { queryByTestId } = require("@testing-library/dom");
+
+const data_repo = {
+  repository: {
+    name: "convoychat",
+    stargazers: { totalCount: 38000 },
+    description: "Help us take over the world! React + TS + GraphQL Chat App",
+    primaryLanguage: {
+      color: "#2b7489",
+      id: "MDg6TGFuZ3VhZ2UyODc=",
+      name: "TypeScript",
+    },
+    forkCount: 100,
+  },
+};
+
+describe("Test renderRepoCard", () => {
+  it("should render correctly", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository);
+
+    expect(document.getElementsByClassName("header")[0]).toHaveTextContent(
+      "convoychat"
+    );
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Help us take over the world! React + TS + GraphQL Chat .."
+    );
+    expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
+    expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
+    expect(queryByTestId(document.body, "lang")).toHaveTextContent(
+      "TypeScript"
+    );
+    expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
+      "fill",
+      "#2b7489"
+    );
+  });
+
+  it("should trim description", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description:
+        "Very long long long long long long long long text it should trim it",
+    });
+
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Very long long long long long long long long text it sh.."
+    );
+
+    // Should not trim
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description: "Small text should not trim",
+    });
+
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Small text should not trim"
+    );
+  });
+
+  it("should shift the text position depending on language length", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      primaryLanguage: {
+        ...data_repo.repository.primaryLanguage,
+        name: "Jupyter Notebook",
+      },
+    });
+
+    expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
+      "transform",
+      "translate(155, 100)"
+    );
+
+    // Small lang
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      primaryLanguage: {
+        ...data_repo.repository.primaryLanguage,
+        name: "Ruby",
+      },
+    });
+
+    expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
+      "transform",
+      "translate(125, 100)"
+    );
+  });
+
+  it("should render default colors properly", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository);
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const statClassStyles = stylesObject[".description"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe("#2f80ed");
+    expect(statClassStyles.fill).toBe("#333");
+    expect(iconClassStyles.fill).toBe("#586069");
+    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+      "fill",
+      "#FFFEFE"
+    );
+  });
+
+  it("should render custom colors properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      icon_color: "1b998b",
+      text_color: "9991",
+      bg_color: "252525",
+    };
+
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      ...customColors,
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const statClassStyles = stylesObject[".description"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
+    expect(statClassStyles.fill).toBe(`#${customColors.text_color}`);
+    expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
+    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+      "fill",
+      "#252525"
+    );
+  });
+});
@@ -0,0 +1,109 @@
+require("@testing-library/jest-dom");
+const cssToObject = require("css-to-object");
+const renderStatsCard = require("../src/renderStatsCard");
+
+const { getByTestId, queryByTestId } = require("@testing-library/dom");
+
+describe("Test renderStatsCard", () => {
+  const stats = {
+    name: "Anurag Hazra",
+    totalStars: 100,
+    totalCommits: 200,
+    totalIssues: 300,
+    totalPRs: 400,
+    contributedTo: 500,
+    rank: { level: "A+", score: 100 },
+  };
+
+  it("should render correctly", () => {
+    document.body.innerHTML = renderStatsCard(stats);
+
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "Anurag Hazra's GitHub Stats"
+    );
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height")
+    ).toBe("195");
+    expect(getByTestId(document.body, "stars").textContent).toBe("100");
+    expect(getByTestId(document.body, "commits").textContent).toBe("200");
+    expect(getByTestId(document.body, "issues").textContent).toBe("300");
+    expect(getByTestId(document.body, "prs").textContent).toBe("400");
+    expect(getByTestId(document.body, "contribs").textContent).toBe("500");
+    expect(queryByTestId(document.body, "card-border")).toBeInTheDocument();
+    expect(queryByTestId(document.body, "rank-circle")).toBeInTheDocument();
+  });
+
+  it("should hide individual stats", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      hide: "['issues', 'prs', 'contribs']",
+    });
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height")
+    ).toBe("150"); // height should be 150 because we clamped it.
+
+    expect(queryByTestId(document.body, "stars")).toBeDefined();
+    expect(queryByTestId(document.body, "commits")).toBeDefined();
+    expect(queryByTestId(document.body, "issues")).toBeNull();
+    expect(queryByTestId(document.body, "prs")).toBeNull();
+    expect(queryByTestId(document.body, "contribs")).toBeNull();
+  });
+
+  it("should hide_border", () => {
+    document.body.innerHTML = renderStatsCard(stats, { hide_border: true });
+
+    expect(queryByTestId(document.body, "card-border")).not.toBeInTheDocument();
+  });
+
+  it("should hide_rank", () => {
+    document.body.innerHTML = renderStatsCard(stats, { hide_rank: true });
+
+    expect(queryByTestId(document.body, "rank-circle")).not.toBeInTheDocument();
+  });
+
+  it("should render default colors properly", () => {
+    document.body.innerHTML = renderStatsCard(stats);
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const statClassStyles = stylesObject[".stat"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe("#2f80ed");
+    expect(statClassStyles.fill).toBe("#333");
+    expect(iconClassStyles.fill).toBe("#4c71f2");
+    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+      "fill",
+      "#FFFEFE"
+    );
+  });
+
+  it("should render custom colors properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      icon_color: "1b998b",
+      text_color: "9991",
+      bg_color: "252525",
+    };
+
+    document.body.innerHTML = renderStatsCard(stats, { ...customColors });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const statClassStyles = stylesObject[".stat"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
+    expect(statClassStyles.fill).toBe(`#${customColors.text_color}`);
+    expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
+    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+      "fill",
+      "#252525"
+    );
+  });
+});
@@ -0,0 +1,26 @@
+const { kFormatter, encodeHTML, renderError } = require("../src/utils");
+
+describe("Test utils.js", () => {
+  it("should test kFormatter", () => {
+    expect(kFormatter(1)).toBe(1);
+    expect(kFormatter(-1)).toBe(-1);
+    expect(kFormatter(500)).toBe(500);
+    expect(kFormatter(1000)).toBe("1k");
+    expect(kFormatter(10000)).toBe("10k");
+    expect(kFormatter(12345)).toBe("12.3k");
+    expect(kFormatter(9900000)).toBe("9900k");
+  });
+
+  it("should test encodeHTML", () => {
+    expect(encodeHTML(`<html>hello world<,.#4^&^@%!))`)).toBe(
+      "&#60;html&#62;hello world&#60;,.#4^&#38;^@%!))"
+    );
+  });
+
+  it("should test renderError", () => {
+    document.body.innerHTML = renderError("Something went wrong");
+    expect(document.getElementById("message").textContent).toBe(
+      "Something went wrong"
+    );
+  });
+});
Author	SHA1	Message	Date
anuraghazra	407392dc42	chore: remove useragent dep Test / build (push) Canceled after 0s Details	2020-07-13 23:44:56 +05:30
anuraghazra	2125df3843	refactor: refactored code and added comments	2020-07-13 23:40:10 +05:30
anuraghazra	422cdb0330	fix: firefox layout breaking	2020-07-13 22:01:34 +05:30
anuraghazra	c272a21342	docs: added rank docs Test / build (push) Canceled after 0s Details	2020-07-13 19:50:43 +05:30
anuraghazra	db49ca7b71	feat: added rankings	2020-07-13 19:41:47 +05:30
Anurag Hazra	8e8d7dd64d	Merge pull request #37 from anuraghazra/fix-name-null fix: fallback to login if name not found	2020-07-13 16:15:50 +05:30
anuraghazra	d56ef0d091	fix: fallback to login if name not found Test / build (push) Canceled after 0s Details	2020-07-13 16:14:13 +05:30
Anurag Hazra	fdeaad36f1	Merge pull request #35 from anuraghazra/readme-update docs: updated readme	2020-07-13 15:01:40 +05:30
anuraghazra	e83c21d9f2	docs: updated readme Test / build (push) Canceled after 0s Details	2020-07-13 14:56:59 +05:30
Anurag Hazra	61737f6985	Merge pull request #32 from anuraghazra/fix-stars fix: fixed total stars count stat	2020-07-12 21:54:17 +05:30
anuraghazra	8e0fa7fbec	fix: fixed total stars count stat Test / build (push) Canceled after 0s Details	2020-07-12 21:51:56 +05:30
Anurag Hazra	46369f5667	Merge pull request #31 from anuraghazra/integration-tests tests: added integration tests for the api endpoints	2020-07-12 20:11:44 +05:30
anuraghazra	40e0937100	tests: added integration tests for the api endpoints Test / build (push) Canceled after 0s Details	2020-07-12 20:08:01 +05:30
Anurag Hazra	3e9ce48777	Merge pull request #29 from omidnikrah/master refactor: added request helper function to reduce code duplication	2020-07-12 14:37:20 +05:30
Anurag Hazra	5f4ada0afb	docs: fix readme typo	2020-07-12 14:18:25 +05:30
Anurag Hazra	4b3e866478	fix: readme invalid markdown	2020-07-12 14:04:02 +05:30
anuraghazra	b2aa92c53e	fix: tests	2020-07-12 13:57:35 +05:30
anuraghazra	9a87dc02a2	chore: fallback to white color	2020-07-12 13:54:43 +05:30
Omid Nikrah	7a7ad717a8	resolve conflicts	2020-07-12 12:52:40 +04:30
Anurag Hazra	47eb35a7ec	Merge pull request #27 from JoaoVSouto/master feat: added card customization options	2020-07-12 13:24:50 +05:30
anuraghazra	5cf82b0194	docs: added docs for customization options	2020-07-12 13:16:30 +05:30
Omid Nikrah	208076e7f4	update request util	2020-07-12 12:12:06 +04:30
anuraghazra	9af56df2c1	feat: added bg_color options, added RepoCard color options too	2020-07-12 12:46:08 +05:30
JoaoVSouto	61a0f517db	test: adds colors checking tests	2020-07-11 23:28:28 -03:00
Omid Nikrah	001062db21	add request utils + remove duplicate codes	2020-07-12 00:45:58 +04:30
JoaoVSouto	59b8bded9c	feat: receives text, title and icon colors from URL	2020-07-11 16:01:44 -03:00
anuraghazra	c25319ee6c	docs: added badges	2020-07-11 23:42:14 +05:30
anuraghazra	73d26e78fd	chore: delete package-lock.json	2020-07-11 23:30:31 +05:30
Anurag Hazra	2d691da3aa	Merge pull request #26 from anuraghazra/tests tests: Added tests & refactored files	2020-07-11 23:28:40 +05:30
anuraghazra	4488e9292b	chore: added gh action Test / build (push) Canceled after 0s Details	2020-07-11 23:25:31 +05:30
anuraghazra	3180144fa4	chore: ignore lock file	2020-07-11 23:20:42 +05:30
Anurag Hazra	61a2866aff	Merge pull request #24 from anuraghazra/add-license-1 chore: add LICENSE	2020-07-11 22:14:07 +05:30
anuraghazra	45941f6c70	test: added test & refactored files	2020-07-11 22:10:13 +05:30