fix: fix description edge case fixes #10

* docs: added Github Extra pins docs

* docs: alignment tip

* chore: docs update

api/pin.js

@@ -63,6 +63,7 @@ async function fetchRepo(username, reponame) {
 const renderRepoCard = (repo) => {
   const { name, description, primaryLanguage, stargazers, forkCount } = repo;
   const height = 120;
+
   return `
   <svg width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
       <style>
@@ -79,10 +80,9 @@ 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">

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.