chore: add LICENSE

closes #23

LICENSE

@@ -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.

api/index.js

@@ -135,11 +135,7 @@ const renderSVG = (stats, options) => {
 };
 
 module.exports = async (req, res) => {
-  const username = req.query.username;
-  const hide = req.query.hide;
-  const hide_border = req.query.hide_border;
-  const show_icons = req.query.show_icons;
-  const line_height = req.query.line_height;
+  const { username, hide, hide_border, show_icons, line_height } = req.query;
   let stats;
 
   res.setHeader("Content-Type", "image/svg+xml");

api/pin.js

@@ -1,5 +1,5 @@
 const axios = require("axios");
-const { renderError, kFormatter } = require("../utils");
+const { renderError, kFormatter, encodeHTML } = require("../utils");
 require("dotenv").config();
 
 async function fetchRepo(username, reponame) {
@@ -11,35 +11,28 @@ async function fetchRepo(username, reponame) {
     },
     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) {
-              name
-              stargazers {
-                totalCount
-              }
-              description
-              primaryLanguage {
-                color
-                id
-                name
-              }
-              forkCount
+              ...RepoInfo
             }
           }
           organization(login: $login) {
             repository(name: $repo) {
-              name
-              stargazers {
-                totalCount
-              }
-              description
-              primaryLanguage {
-                color
-                id
-                name
-              }
-              forkCount
+              ...RepoInfo
             }
           }
         }
@@ -53,7 +46,6 @@ async function fetchRepo(username, reponame) {
 
   const data = res.data.data;
 
-  console.log(res.data);
   if (!data.user && !data.organization) {
     throw new Error("Not found");
   }
@@ -76,8 +68,13 @@ async function fetchRepo(username, reponame) {
 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>
@@ -94,11 +91,8 @@ const renderRepoCard = (repo) => {
       </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>
+      <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>
@@ -122,8 +116,7 @@ const renderRepoCard = (repo) => {
 };
 
 module.exports = async (req, res) => {
-  const username = req.query.username;
-  const repo = req.query.repo;
+  const { username, repo } = req.query;
 
   let repoData;
   res.setHeader("Content-Type", "image/svg+xml");

readme.md

@@ -6,6 +6,7 @@ Get dynamically generated GitHub stats on your readmes!
 
 - [Github Stats Card](#github-stats-card)
 - [Github Extra Pins](#github-extra-pins)
+- [Deploy Yourself](#deploy-on-your-own-vercel-instance)
 
 # Github Stats Card
 
@@ -13,12 +14,6 @@ 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)
-```
-
-_Psst, you can also use this code so that `github-readme-stats` gets proper credit :D and other people can also try it out!_
-
 ```md
 [![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 ```
@@ -93,6 +88,15 @@ You usually won't be able to layout the images side by side to do that you can u
 </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.

utils.js

@@ -12,10 +12,17 @@ const renderError = (message) => {
   `;
 };
 
+// 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 };
+module.exports = { renderError, kFormatter, encodeHTML };