From bd0ef4afc16477c39e58c7e7c11e49b68161e58f Mon Sep 17 00:00:00 2001
From: Nathan Chu <63111210+nthnchu@users.noreply.github.com>
Date: Tue, 28 Jul 2020 20:00:19 -0400
Subject: [PATCH] Repo and Top Langs card gradient (anuraghazra#218)
---
src/renderRepoCard.js | 17 ++++++++++++-----
src/renderTopLanguages.js | 16 ++++++++++++----
2 files changed, 24 insertions(+), 9 deletions(-)
diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js
index 8f9f5b6..a99fc32 100644
--- a/src/renderRepoCard.js
+++ b/src/renderRepoCard.js
@@ -44,7 +44,7 @@ const renderRepoCard = (repo, options = {}) => {
const multiLineDescription = wrapTextMultiline(desc);
const descriptionLines = multiLineDescription.length;
const lineHeight = 10;
-
+ const isGradient = !(bg_color == undefined || bg_color.length == 6 || bg_color.length == 3)
const height =
(descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
@@ -56,7 +56,7 @@ const renderRepoCard = (repo, options = {}) => {
bg_color,
theme,
});
-
+ const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
const totalStars = kFormatter(stargazers.totalCount);
const totalForks = kFormatter(forkCount);
@@ -74,7 +74,14 @@ const renderRepoCard = (repo, options = {}) => {
`;
-
+ const gradient = isGradient ? `
+
+
+
+
+
+ `
+ : undefined
const svgLanguage = primaryLanguage
? `
@@ -112,8 +119,8 @@ const renderRepoCard = (repo, options = {}) => {
.badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
.badge rect { opacity: 0.2 }
-
-
+ ${isGradient ? gradient : ""}
+
diff --git a/src/renderTopLanguages.js b/src/renderTopLanguages.js
index 21594df..5b4dfd0 100644
--- a/src/renderTopLanguages.js
+++ b/src/renderTopLanguages.js
@@ -93,7 +93,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
const totalLanguageSize = langs.reduce((acc, curr) => {
return acc + curr.size;
}, 0);
-
+ const isGradient = !(bg_color == undefined || bg_color.length == 6 || bg_color.length == 3)
// returns theme based colors with proper overrides and defaults
const { titleColor, textColor, bgColor } = getCardColors({
title_color,
@@ -101,7 +101,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
bg_color,
theme,
});
-
+ const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
let width = isNaN(card_width) ? 300 : card_width;
let height = 45 + (langs.length + 1) * 40;
@@ -173,14 +173,22 @@ const renderTopLanguages = (topLangs, options = {}) => {
if (hide_title) {
height -= 30;
}
-
+ const gradient = isGradient ? `
+
+
+
+
+
+ `
+ : undefined
return `