chore: updated docs preview link

api/index.js

@@ -16,9 +16,6 @@ async function fetchStats(username) {
             repositoriesContributedTo(first: 100, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
               totalCount
             }
-            contributionsCollection {
-              totalCommitContributions
-            }
             pullRequests(first: 100) {
               totalCount
             }
@@ -44,7 +41,6 @@ async function fetchStats(username) {
   const stats = {
     name: "",
     totalPRs: 0,
-    totalCommits: 0,
     totalIssues: 0,
     totalStars: 0,
     contributedTo: 0,
@@ -55,7 +51,6 @@ async function fetchStats(username) {
 
   stats.name = user.name;
   stats.totalIssues = user.issues.totalCount;
-  stats.totalCommits = user.contributionsCollection.totalCommitContributions;
   stats.totalPRs = user.pullRequests.totalCount;
   stats.contributedTo = user.repositoriesContributedTo.totalCount;
 
@@ -66,63 +61,44 @@ async function fetchStats(username) {
   return stats;
 }
 
-const createTextNode = (icon, label, value, lheight) => {
-  return `
-    <tspan x="25" dy="${lheight}" class="stat bold">
-    <tspan class="icon ${
-      icon === "★" && "star-icon"
-    }" fill="#4C71F2">${icon}</tspan> ${label}:</tspan>
-    <tspan x="155" dy="0" class="stat">${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>
   `;
@@ -131,19 +107,25 @@ 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 stats = await fetchStats(username);
+  let {
+    name,
+    totalPRs,
+    totalStars,
+    totalIssues,
+    contributedTo,
+  } = await fetchStats(username);
 
   res.setHeader("Content-Type", "image/svg+xml");
   res.send(
-    renderSVG(stats, {
-      hide: JSON.parse(hide || "[]"),
-      show_icons,
-      hide_border,
-      line_height,
-    })
+    renderSVG(
+      {
+        name,
+        totalStars,
+        totalIssues,
+        totalPRs,
+        contributedTo,
+      },
+      { hide: JSON.parse(hide || "[]") }
+    )
   );
 };

readme.md

@@ -22,33 +22,14 @@ To hide any specific stats you can pass a query parameter `?hide=` with an array
 ![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)
-
 Contributions are welcomed! <3
 
 Made with :heart: and javascript.