chore: add LICENSE

closes #23
docs: added deploy button
2020-07-11 22:12:49 +05:30 · 2020-07-11 14:33:29 +05:30 · 2020-07-11 14:20:30 +05:30 · 2020-07-11 14:17:51 +05:30 · 2020-07-10 22:47:32 +05:30 · 2020-07-10 21:35:14 +04:30
5 changed files with 373 additions and 31 deletions
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Anurag Hazra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -1,7 +1,10 @@
 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",
@@ -16,9 +19,15 @@ async function fetchStats(username) {
            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 {
@@ -35,42 +44,113 @@ async function fetchStats(username) {
    },
  });

-  const stats = { totalStars: 0, contributedTo: 0, name: "", totalPRs: 0 };
-  if (res.data.error) return stats;
+  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);

-  stats.totalPRs = user.pullRequests.totalCount;
-  stats.contributedTo = user.repositoriesContributedTo.totalCount;
-  stats.name = user.name;
  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>
+  `;
+};
+
 module.exports = async (req, res) => {
-  const username = req.query.username;
-  let { name, totalStars, totalPRs, contributedTo } = await fetchStats(
-    username
-  );
+  const { username, hide, hide_border, show_icons, line_height } = req.query;
+  let stats;

  res.setHeader("Content-Type", "image/svg+xml");
-  res.send(`
-    <svg width="495" height="130" viewBox="0 0 495 130" 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 }
-    .bold { font-weight: 700 }
-    </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>
-    <text x="25" y="70" class="stat bold">Total Stars:</text>
-    <text x="135" y="70" class="stat">${totalStars}</text>
-    <text x="25" y="90" class="stat bold">Total PRs:</text>
-    <text x="135" y="90" class="stat">${totalPRs}</text>
-    <text x="25" y="110" class="stat bold">Contributed to:</text>
-    <text x="135" y="110" class="stat">${contributedTo} repos</text>
-    </svg>
-  `);
+  try {
+    stats = await fetchStats(username);
+  } catch (err) {
+    return res.send(renderError(err.message));
+  }
+
+  res.send(
+    renderSVG(stats, {
+      hide: JSON.parse(hide || "[]"),
+      show_icons,
+      hide_border,
+      line_height,
+    })
+  );
 };
@@ -0,0 +1,132 @@
+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>
+  `;
+};
+
+module.exports = async (req, res) => {
+  const { username, repo } = req.query;
+
+  let repoData;
+  res.setHeader("Content-Type", "image/svg+xml");
+
+  try {
+    repoData = await fetchRepo(username, repo);
+  } catch (err) {
+    console.log(err);
+    return res.send(renderError(err.message));
+  }
+
+  res.send(renderRepoCard(repoData));
+};
@@ -1,21 +1,102 @@
 ## Github Readme stats

-Get dynamically generated github stats on your readmes!
+Get dynamically generated GitHub stats on your readmes!

-## How to use
+# Features

-Copy paste this into your markdown content and thats it. simple!
+- [Github Stats Card](#github-stats-card)
+- [Github Extra Pins](#github-extra-pins)
+- [Deploy Yourself](#deploy-on-your-own-vercel-instance)
+
+# Github Stats Card
+
+Copy paste this into your markdown content, and that's it. Simple!

 change the `?username=` value to your GitHubs's username

 ```md
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
+[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 ```

-## Demo
+### Hiding individual stats
+
+To hide any specific stats, you can pass a query parameter `?hide=` with an array of items, you wanna hide.
+
+> Options: `&hide=["stars","prs","issues","contribs"]`
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","prs"])
+```
+
+### 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)

+- Hiding specific stats
+
+![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 allow you to pin more than 6 repositories in your profile using a GitHub readme profile.
+
+Yey! you are no longer limited to 6 pinned repositories.
+
+### 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)
+
+You usually 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>
+```
+
+## Deploy on your own vercel instance
+
+Since Github API only allows 5k requests per hour it is possible that my `https://github-readme-stats.vercel.app/api` could hit the rate limiter thats why if you want to host it on your own vercel server then you don't have to worry about anything. click on the deploy button to get started
+
+[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/anuraghazra/github-readme-stats)
+
+Make sure to add your own `GITHUB_TOKEN` in `Environment Variables`  
+[Github Docs: Creating a github personal token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token)
+
 Contributions are welcomed! <3

 Made with :heart: and javascript.
@@ -0,0 +1,28 @@
+const renderError = (message) => {
+  return `
+    <svg width="495" height="100" viewBox="0 0 495 100" fill="none" 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: #252525 }
+    </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>
+    </svg>
+  `;
+};
+
+// https://stackoverflow.com/a/48073476/10629172
+function encodeHTML(str) {
+  return str.replace(/[\u00A0-\u9999<>&](?!#)/gim, function (i) {
+    return "&#" + i.charCodeAt(0) + ";";
+  });
+}
+
+function kFormatter(num) {
+  return Math.abs(num) > 999
+    ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k"
+    : Math.sign(num) * Math.abs(num);
+}
+
+module.exports = { renderError, kFormatter, encodeHTML };
Author	SHA1	Message	Date
Anurag Hazra	7e3278c708	chore: add LICENSE closes #23	2020-07-11 22:12:49 +05:30
anuraghazra	223bd659ab	docs: added deploy button	2020-07-11 14:33:29 +05:30
Anurag Hazra	c072662cda	Merge pull request #21 from anuraghazra/fix-desc fix: description trimming & htmlEncode	2020-07-11 14:20:30 +05:30
anuraghazra	12fd842fce	fix: description trimming & htmlEncode	2020-07-11 14:17:51 +05:30
Anurag Hazra	137a9f2038	Merge pull request #19 from omidnikrah/patch-1 Use destructuring query assignment	2020-07-10 22:47:32 +05:30
Omid Nikrah	9083ae3e49	Use destructuring props assignment	2020-07-10 21:35:14 +04:30
Anurag Hazra	43c49de37f	Merge pull request #17 from anuraghazra/error-handling feat: added better error handling	2020-07-10 18:21:52 +05:30
anuraghazra	4292212b30	feat: added better error handling	2020-07-10 18:12:31 +05:30
anuraghazra	6f6a7f2763	docs: remove bold	2020-07-10 16:21:59 +05:30
anuraghazra	a27d977c7d	fix: conflict	2020-07-10 16:21:02 +05:30
anuraghazra	86594ee1b8	docs: added credit notice	2020-07-10 16:19:52 +05:30
Anurag Hazra	8d982d59c6	Merge pull request #16 from nombrekeff/patch-1 docs: Some little grammar fixes and improvements.	2020-07-10 16:18:04 +05:30
Manolo Edge	2f91bd5222	Some little grammar fixes and improvements. Just a little something, hope it helps :)	2020-07-10 12:45:03 +02:00
Anurag Hazra	6b04481c81	Merge pull request #12 from anuraghazra/fix-layout fix: fixed overflowing layout	2020-07-10 12:45:11 +05:30
anuraghazra	aaefd5054d	fix: fixed overflowing layout	2020-07-10 12:41:06 +05:30
Anurag Hazra	91523543e3	Merge pull request #11 from anuraghazra/fix-10 fix: fix description edge case fixes #10	2020-07-10 11:37:08 +05:30
anuraghazra	01fb2b490c	fix: fix description edge case fixes #10	2020-07-10 11:32:59 +05:30
Anurag Hazra	d0630feebc	chore: added Github Extra Pin docs (#8 ) * docs: added Github Extra pins docs * docs: alignment tip * chore: docs update	2020-07-09 22:56:57 +05:30
Anurag Hazra	08027eff60	Merge pull request #7 from anuraghazra/pins feat: added pins!	2020-07-09 22:54:41 +05:30
anuraghazra	5f84b594a3	feat: added pins!	2020-07-09 22:23:14 +05:30
Anurag Hazra	7f5a598d15	Merge pull request #6 from anuraghazra/refactor refactor: refactored code & added line_height option	2020-07-09 21:32:07 +05:30
anuraghazra	9f1e90ad2c	refactor: refactored code & added line_height option	2020-07-09 21:29:50 +05:30
anuraghazra	c99446df37	docs: added hide_border in doc	2020-07-09 20:34:10 +05:30
anuraghazra	a54a2a4009	feat: added hide_border	2020-07-09 20:32:34 +05:30
Anurag Hazra	81bcc772d2	Merge pull request #5 from urmilshroff/patch-1 Fixed capitalization	2020-07-09 20:05:01 +05:30
Urmil Shroff	5650db143f	Fixed capitalization	2020-07-09 19:28:56 +05:30
Anurag Hazra	f521a46d50	Merge pull request #4 from anuraghazra/icons feat: added icons support	2020-07-09 18:49:21 +05:30
anuraghazra	1383a636bb	feat: added icons support	2020-07-09 18:46:41 +05:30
Anurag Hazra	61626af2d4	feat: added ability to hide specific stats (#3 ) * feat: added ability to hide specific stats * chore: added docs for ?hide= * chore: fix readme docs * chore: updated docs preview link	2020-07-09 17:50:15 +05:30