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

@@ -17,7 +17,7 @@ async function fetchStats(username) {
               totalCount
             }
             contributionsCollection {
-              totalCommitContributions
+              contributionYears
             }
             pullRequests(first: 100) {
               totalCount
@@ -53,9 +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 = user.contributionsCollection.totalCommitContributions;
+  stats.totalCommits = totalCommits;
   stats.totalPRs = user.pullRequests.totalCount;
   stats.contributedTo = user.repositoriesContributedTo.totalCount;
 
@@ -137,6 +189,7 @@ module.exports = async (req, res) => {
 
   const stats = await fetchStats(username);
 
+  res.setHeader('Cache-Control', 'public, max-age=300');
   res.setHeader("Content-Type", "image/svg+xml");
   res.send(
     renderSVG(stats, {

api/pin.js

@@ -1,6 +1,12 @@
 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",
@@ -64,6 +70,7 @@ 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>
@@ -84,18 +91,25 @@ const renderRepoCard = (repo) => {
         description ? description.slice(0, 60) : "No description provided"
       }..</text>
       
-      <circle cx="30" cy="95" r="6" fill="${primaryLanguage.color}" />
-      <svg x="120" y="88" 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>
 
-      <svg x="190" y="88" 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>
+      <g transform="translate(30, 100)">
+        <circle cx="0" cy="-5" r="6" fill="${primaryLanguage.color}" />
+        <text class="gray" x="15">${primaryLanguage.name}</text>
+      </g>
       
-      <text class="gray" x="45" y="100">${primaryLanguage.name}</text>
-      <text class="gray" x="145" y="100">${stargazers.totalCount}</text>
-      <text class="gray" x="210" y="100">${forkCount}</text>
+      <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>
   `;
 };
@@ -106,6 +120,7 @@ module.exports = async (req, res) => {
 
   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));
 };