Add cache to function response (#22)

* Add cache to function response

* Lowered cache-control maxage to 5 min

* Changed cache control directives to public, max-age

* Added cache-control to pin.js

api/index.js

@@ -16,6 +16,9 @@ async function fetchStats(username) {
             repositoriesContributedTo(first: 100, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
               totalCount
             }
+            contributionsCollection {
+              contributionYears
+            }
             pullRequests(first: 100) {
               totalCount
             }
@@ -41,6 +44,7 @@ async function fetchStats(username) {
   const stats = {
     name: "",
     totalPRs: 0,
+    totalCommits: 0,
     totalIssues: 0,
     totalStars: 0,
     contributedTo: 0,
@@ -49,8 +53,61 @@ async function fetchStats(username) {
 
   const user = res.data.data.user;
 
+  // FETCH ALL COMMITS
+  let commitPromises = user.contributionsCollection.contributionYears.map(
+    async (year) => {
+      // Don't fetch contributions older than 2008 (Perf optimization)
+      if (year < 2008) {
+        return {
+          user: { contributionsCollection: { totalCommitContributions: 0 } },
+        };
+      }
+
+      const currentDate = new Date();
+      currentDate.setFullYear(year, 0, 0);
+
+      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!, $from: DateTime!) {
+            user(login: $login) {
+              contributionsCollection(from: $from) {
+                totalCommitContributions
+              }
+            }
+          }
+        `,
+          variables: {
+            login: username,
+            from: currentDate.toISOString(),
+          },
+        },
+      });
+
+      console.log(
+        currentDate.toDateString(),
+        res.data.data.user.contributionsCollection.totalCommitContributions
+      );
+      return res.data.data;
+    }
+  );
+
+  const allCommits = await Promise.all(commitPromises);
+
+  const totalCommits = allCommits.reduce((preYear, currYear) => {
+    return (
+      preYear + currYear.user.contributionsCollection.totalCommitContributions
+    );
+  }, 0);
+
   stats.name = user.name;
   stats.totalIssues = user.issues.totalCount;
+  stats.totalCommits = totalCommits;
   stats.totalPRs = user.pullRequests.totalCount;
   stats.contributedTo = user.repositoriesContributedTo.totalCount;
 
@@ -61,44 +118,63 @@ async function fetchStats(username) {
   return stats;
 }
 
+const createTextNode = (icon, label, value, lheight) => {
+  return `
+    <tspan x="25" dy="${lheight}" class="stat bold">
+    <tspan class="icon ${
+      icon === "★" && "star-icon"
+    }" fill="#4C71F2">${icon}</tspan> ${label}:</tspan>
+    <tspan x="155" dy="0" class="stat">${value}</tspan>
+  `;
+};
+
 const renderSVG = (stats, options) => {
-  const { name, totalStars, totalIssues, totalPRs, contributedTo } = stats;
-  const { hide } = options || {};
-  const height = 150 - hide.length * 20;
+  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: `
-      <tspan x="25" dy="20" class="stat bold"> Total Stars:</tspan>
-      <tspan x="135" dy="0" class="stat">${totalStars}</tspan>
-    `,
-    prs: `
-      <tspan x="25" dy="20" class="stat bold">Total PRs:</tspan>
-      <tspan x="135" dy="0" class="stat">${totalPRs}</tspan>
-    `,
-    issues: `
-      <tspan x="25" dy="20" class="stat bold">Total Issues:</tspan>
-      <tspan x="135" dy="0" class="stat">${totalIssues}</tspan>
-    `,
-    contribs: `
-      <tspan x="25" dy="20" class="stat bold">Contributed to:</tspan>
-      <tspan x="135" dy="0" class="stat">${contributedTo} repos</tspan> 
-    `,
+    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>
-      <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>
+      ${
+        !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">
-        ${Object.keys(STAT_MAP)
-          .filter((key) => !hide.includes(key))
-          .map((key) => STAT_MAP[key])}
+        ${statItems}
       </text>
     </svg>
   `;
@@ -107,25 +183,20 @@ const renderSVG = (stats, options) => {
 module.exports = async (req, res) => {
   const username = req.query.username;
   const hide = req.query.hide;
-  let {
-    name,
-    totalPRs,
-    totalStars,
-    totalIssues,
-    contributedTo,
-  } = await fetchStats(username);
+  const hide_border = req.query.hide_border;
+  const show_icons = req.query.show_icons;
+  const line_height = req.query.line_height;
 
+  const stats = await fetchStats(username);
+
+  res.setHeader('Cache-Control', 'public, max-age=300');
   res.setHeader("Content-Type", "image/svg+xml");
   res.send(
-    renderSVG(
-      {
-        name,
-        totalStars,
-        totalIssues,
-        totalPRs,
-        contributedTo,
-      },
-      { hide: JSON.parse(hide || "[]") }
-    )
+    renderSVG(stats, {
+      hide: JSON.parse(hide || "[]"),
+      show_icons,
+      hide_border,
+      line_height,
+    })
   );
 };

api/pin.js

@@ -0,0 +1,126 @@
+const axios = require("axios");
+require("dotenv").config();
+
+function kFormatter(num) {
+  return Math.abs(num) > 999
+    ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k"
+    : Math.sign(num) * Math.abs(num);
+}
+
+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: `
+        query getRepo($login: String!, $repo: String!) {
+          user(login: $login) {
+            repository(name: $repo) {
+              name
+              stargazers {
+                totalCount
+              }
+              description
+              primaryLanguage {
+                color
+                id
+                name
+              }
+              forkCount
+            }
+          }
+          organization(login: $login) {
+            repository(name: $repo) {
+              name
+              stargazers {
+                totalCount
+              }
+              description
+              primaryLanguage {
+                color
+                id
+                name
+              }
+              forkCount
+            }
+          }
+        }
+      `,
+      variables: {
+        login: username,
+        repo: reponame,
+      },
+    },
+  });
+
+  if (res.data.error && res.data.error.type !== "NOT_FOUND") return {};
+  if (!res.data.data.organization && res.data.data.user)
+    return res.data.data.user.repository;
+
+  const isOrg = res.data.data.organization && !res.data.data.user;
+  if (isOrg) return res.data.data.organization.repository;
+
+  return res.data.data.user.repository;
+}
+
+const renderRepoCard = (repo) => {
+  const { name, description, primaryLanguage, stargazers, forkCount } = repo;
+  const height = 120;
+
+  const shiftText = primaryLanguage.name.length > 15 ? 0 : 30;
+  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">${
+        description ? description.slice(0, 60) : "No description provided"
+      }..</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>
+  `;
+};
+
+module.exports = async (req, res) => {
+  const username = req.query.username;
+  const repo = req.query.repo;
+
+  const repoData = await fetchRepo(username, repo);
+
+  res.setHeader('Cache-Control', 'public, max-age=300');
+  res.setHeader("Content-Type", "image/svg+xml");
+  res.send(renderRepoCard(repoData));
+};

readme.md

@@ -2,7 +2,12 @@
 
 Get dynamically generated github stats on your readmes!
 
-## How to use
+# Features
+
+- [Github Stats Card](#github-stats-card)
+- [Github Extra Pins](#github-extra-pins)
+
+# Github Stats Card
 
 Copy paste this into your markdown content and thats it. simple!
 
@@ -22,7 +27,22 @@ To hide any specific stats you can pass a query parameter `?hide=` with an array
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","prs"])
 ```
 
-## Demo
+### Showing icons
+
+To enable icons you can pass `show_icons=true` in the query param like so
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
+```
+
+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.
+
+### Demo
+
+- Default
 
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
 
@@ -30,6 +50,43 @@ To hide any specific stats you can pass a query parameter `?hide=` with an array
 
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","issues"])
 
+- Showing icons
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)
+
+# Github Extra Pins
+
+Github extra pins allows you to pin more than 6 repositories in your profile by using github readme profile.
+
+Yey! you are no longer limited to 6 pinned repos
+
+### Usage
+
+Copy paste this code into your readme and change the links.
+
+Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
+
+```md
+[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)
+```
+
+### Demo
+
+[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)
+
+### Quick Tip (Align The Repo Cards)
+
+Normally you won't be able to layout the images side by side to do that you can use this approach
+
+```md
+<a href="https://github.com/anuraghazra/github-readme-stats">
+  <img align="left" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />
+</a>
+<a href="https://github.com/anuraghazra/convoychat">
+  <img align="left" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" />
+</a>
+```
+
 Contributions are welcomed! <3
 
 Made with :heart: and javascript.