fix: fixed overflowing layout

fix: fix description edge case fixes #10

api/pin.js

@@ -1,6 +1,12 @@
 const axios = require("axios");
 require("dotenv").config();
 
+function kFormatter(num) {
+  return Math.abs(num) > 999
+    ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k"
+    : Math.sign(num) * Math.abs(num);
+}
+
 async function fetchRepo(username, reponame) {
   const res = await axios({
     url: "https://api.github.com/graphql",
@@ -63,6 +69,8 @@ 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;
   return `
   <svg width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
       <style>
@@ -79,23 +87,29 @@ const renderRepoCard = (repo) => {
       </svg>
 
       <text x="50" y="38" class="header">${name}</text>
-      <text class="description" x="25" y="70">${description.slice(
-        0,
-        60
-      )}..</text>
+      <text class="description" x="25" y="70">${
+        description ? description.slice(0, 60) : "No description provided"
+      }..</text>
       
-      <circle cx="30" cy="95" r="6" fill="${primaryLanguage.color}" />
-      <svg x="120" y="88" 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>
 
-      <svg x="190" y="88" 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>
+      <g transform="translate(30, 100)">
+        <circle cx="0" cy="-5" r="6" fill="${primaryLanguage.color}" />
+        <text class="gray" x="15">${primaryLanguage.name}</text>
+      </g>
       
-      <text class="gray" x="45" y="100">${primaryLanguage.name}</text>
-      <text class="gray" x="145" y="100">${stargazers.totalCount}</text>
-      <text class="gray" x="210" y="100">${forkCount}</text>
+      <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>
   `;
 };

readme.md

@@ -2,7 +2,12 @@
 
 Get dynamically generated github stats on your readmes!
 
-## How to use
+# Features
+
+- [Github Stats Card](#github-stats-card)
+- [Github Extra Pins](#github-extra-pins)
+
+# Github Stats Card
 
 Copy paste this into your markdown content and thats it. simple!
 
@@ -35,7 +40,7 @@ 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
+### Demo
 
 - Default
 
@@ -49,6 +54,39 @@ Other options:
 
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)
 
+# Github Extra Pins
+
+Github extra pins allows you to pin more than 6 repositories in your profile by using github readme profile.
+
+Yey! you are no longer limited to 6 pinned repos
+
+### 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)
+
+Normally you 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.