fix: description trimming & htmlEncode

ctrlxx · Jul 11, 2020 · 12fd842 · 12fd842
1 parent 137a9f2
commit 12fd842
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 38 deletions.
diff --git a/api/pin.js b/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");

diff --git a/readme.md b/readme.md
@@ -13,12 +13,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)
 ```

diff --git a/utils.js b/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 };