chore: updated docs preview link

chore: fix readme docs
chore: added docs for ?hide=
2020-07-09 17:49:18 +05:30 · 2020-07-09 17:48:31 +05:30 · 2020-07-09 17:39:37 +05:30 · 2020-07-09 17:31:00 +05:30
4 changed files with 52 additions and 294 deletions
@@ -1,10 +1,7 @@
 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",
@@ -19,9 +16,6 @@ async function fetchStats(username) {
            repositoriesContributedTo(first: 100, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
              totalCount
            }
-            contributionsCollection {
-              totalCommitContributions
-            }
            pullRequests(first: 100) {
              totalCount
            }
@@ -47,22 +41,16 @@ async function fetchStats(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");
-  }
+  if (res.data.error) return stats;

  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;

@@ -73,84 +61,71 @@ async function fetchStats(username) {
  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 { name, totalStars, totalIssues, totalPRs, contributedTo } = stats;
+  const { hide } = options || {};
+  const height = 150 - hide.length * 20;

  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),
+    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> 
+    `,
  };

-  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>
+      <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}
+        ${Object.keys(STAT_MAP)
+          .filter((key) => !hide.includes(key))
+          .map((key) => STAT_MAP[key])}
      </text>
    </svg>
  `;
 };

 module.exports = async (req, res) => {
-  const { username, hide, hide_border, show_icons, line_height } = req.query;
-  let stats;
+  const username = req.query.username;
+  const hide = req.query.hide;
+  let {
+    name,
+    totalPRs,
+    totalStars,
+    totalIssues,
+    contributedTo,
+  } = await fetchStats(username);

  res.setHeader("Content-Type", "image/svg+xml");
-  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,
-    })
+    renderSVG(
+      {
+        name,
+        totalStars,
+        totalIssues,
+        totalPRs,
+        contributedTo,
+      },
+      { hide: JSON.parse(hide || "[]") }
+    )
  );
 };
@@ -1,132 +0,0 @@
-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,25 +1,20 @@
 ## Github Readme stats

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

-# Features
+## How to use

- [Github Stats Card](#github-stats-card)
- [Github Extra Pins](#github-extra-pins)
-
-# Github Stats Card
-
-Copy paste this into your markdown content, and that's it. Simple!
+Copy paste this into your markdown content and thats 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)](https://github.com/anuraghazra/github-readme-stats)
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
 ```

-### Hiding individual stats
+### Hiding certain stats

-To hide any specific stats, you can pass a query parameter `?hide=` with an array of items, you wanna hide.
+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"]`

@@ -27,22 +22,7 @@ To hide any specific stats, you can pass a query parameter `?hide=` with an arra
 ![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
+## Demo

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

@@ -50,43 +30,6 @@ Other options:

 ![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>
-```
-
 Contributions are welcomed! <3

 Made with :heart: and javascript.
@@ -1,28 +0,0 @@
-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
anuraghazra	8fc570bea4	chore: updated docs preview link	2020-07-09 17:49:18 +05:30
anuraghazra	9b0bf3a400	chore: fix readme docs	2020-07-09 17:48:31 +05:30
anuraghazra	e00d5ea91b	chore: added docs for ?hide=	2020-07-09 17:39:37 +05:30
anuraghazra	e61ccc52fb	feat: added ability to hide specific stats	2020-07-09 17:31:00 +05:30