Merge pull request #12 from anuraghazra/fix-layout

fix: fixed overflowing layout
This commit is contained in:
Anurag Hazra 2020-07-10 12:45:11 +05:30 committed by GitHub
commit 6b04481c81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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",
@ -64,6 +70,7 @@ 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>
@ -84,18 +91,25 @@ const renderRepoCard = (repo) => {
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>
`;
};