avior/codestats-readme
1
0
Fork 0
mirror of https://github.com/Aviortheking/codestats-readme.git synced 2025-04-22 10:42:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Repo and Top Langs card gradient (anuraghazra#218)

Browse Source
This commit is contained in:
Nathan Chu 2020-07-28 20:00:19 -04:00
parent d685d4d9df
commit bd0ef4afc1
2 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/renderRepoCard.js
View File

@ -44,7 +44,7 @@ const renderRepoCard = (repo, options = {}) => {
const multiLineDescription = wrapTextMultiline(desc); const multiLineDescription = wrapTextMultiline(desc);
const descriptionLines = multiLineDescription.length; const descriptionLines = multiLineDescription.length;
const lineHeight = 10; const lineHeight = 10;
const isGradient = !(bg_color == undefined || bg_color.length == 6 || bg_color.length == 3)
const height = const height =
(descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight; (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
@ -56,7 +56,7 @@ const renderRepoCard = (repo, options = {}) => {
bg_color, bg_color,
theme, theme,
}); });
const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
const totalStars = kFormatter(stargazers.totalCount); const totalStars = kFormatter(stargazers.totalCount);
const totalForks = kFormatter(forkCount); const totalForks = kFormatter(forkCount);
@ -74,7 +74,14 @@ const renderRepoCard = (repo, options = {}) => {
</text> </text>
</g> </g>
`; `;
const gradient = isGradient ? `
<defs>
<linearGradient id="gradient" gradientTransform="rotate(${gradientBgColor[0]})">
<stop offset="0%" stop-color="#${gradientBgColor[1]}" />
<stop offset="100%" stop-color="#${gradientBgColor[2]}" />
</linearGradient>
</defs>`
: undefined
const svgLanguage = primaryLanguage const svgLanguage = primaryLanguage
? ` ? `
<g data-testid="primary-lang" transform="translate(30, 0)"> <g data-testid="primary-lang" transform="translate(30, 0)">
@ -112,8 +119,8 @@ const renderRepoCard = (repo, options = {}) => {
.badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; } .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
.badge rect { opacity: 0.2 } .badge rect { opacity: 0.2 }
</style> </style>
${isGradient ? gradient : ""}
<rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/> <rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${isGradient ? "url('#gradient')" : bgColor}" stroke="#E4E2E2"/>
<svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16"> <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
${icons.contribs} ${icons.contribs}
</svg> </svg>

16
src/renderTopLanguages.js
View File

@ -93,7 +93,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
const totalLanguageSize = langs.reduce((acc, curr) => { const totalLanguageSize = langs.reduce((acc, curr) => {
return acc + curr.size; return acc + curr.size;
}, 0); }, 0);
const isGradient = !(bg_color == undefined || bg_color.length == 6 || bg_color.length == 3)
// returns theme based colors with proper overrides and defaults // returns theme based colors with proper overrides and defaults
const { titleColor, textColor, bgColor } = getCardColors({ const { titleColor, textColor, bgColor } = getCardColors({
title_color, title_color,
@ -101,7 +101,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
bg_color, bg_color,
theme, theme,
}); });
const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
let width = isNaN(card_width) ? 300 : card_width; let width = isNaN(card_width) ? 300 : card_width;
let height = 45 + (langs.length + 1) * 40; let height = 45 + (langs.length + 1) * 40;
@ -173,14 +173,22 @@ const renderTopLanguages = (topLangs, options = {}) => {
if (hide_title) { if (hide_title) {
height -= 30; height -= 30;
} }
const gradient = isGradient ? `
<defs>
<linearGradient id="gradient" gradientTransform="rotate(${gradientBgColor[0]})">
<stop offset="0%" stop-color="#${gradientBgColor[1]}" />
<stop offset="100%" stop-color="#${gradientBgColor[2]}" />
</linearGradient>
</defs>`
: undefined
return ` return `
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
<style> <style>
.header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} } .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} } .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
</style> </style>
<rect data-testid="card-bg" x="0.5" y="0.5" width="99.7%" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/> ${isGradient ? gradient : ""}
<rect data-testid="card-bg" x="0.5" y="0.5" width="99.7%" height="99%" rx="4.5" fill="${isGradient ? "url('#gradient')" : bgColor}" stroke="#E4E2E2"/>
${ ${
hide_title hide_title