From d685d4d9df925fa7956ddb241c7b4b2fb7a61c3c Mon Sep 17 00:00:00 2001 From: Nathan Chu <63111210+nthnchu@users.noreply.github.com> Date: Tue, 28 Jul 2020 19:32:35 -0400 Subject: [PATCH 1/7] Stats card gradient (anuraghazra#218) --- src/renderStatsCard.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js index 7e9d0cb8bae70..ad78b8f95c6a4 100644 --- a/src/renderStatsCard.js +++ b/src/renderStatsCard.js @@ -54,6 +54,8 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { const lheight = parseInt(line_height); + 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, iconColor, bgColor } = getCardColors({ title_color, @@ -63,6 +65,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { theme, }); +const gradientBgColor = isGradient ? bg_color.split(',') : undefined; // Meta data for creating text nodes with createTextNode function const STATS = { stars: { @@ -143,12 +146,20 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { width="494" height="99%" rx="4.5" - fill="${bgColor}" + fill="${isGradient ? "url('#gradient')" : bgColor}" stroke="#E4E2E2" stroke-opacity="${hide_border ? 0 : 1}" /> `; + const gradient = isGradient ? ` + + + + + + ` + : undefined const rankCircle = hide_rank ? "" : ` Date: Tue, 28 Jul 2020 20:00:19 -0400 Subject: [PATCH 2/7] 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 8f9f5b6a9eab1..a99fc3241fad2 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 : ""} + ${icons.contribs} diff --git a/src/renderTopLanguages.js b/src/renderTopLanguages.js index 21594df7d2663..5b4dfd09b6e40 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 ` - + ${isGradient ? gradient : ""} + ${ hide_title From be285cb33e5af1046b240fac6e0fbb993eec9b78 Mon Sep 17 00:00:00 2001 From: Nathan Chu <63111210+nthnchu@users.noreply.github.com> Date: Wed, 29 Jul 2020 09:19:47 -0400 Subject: [PATCH 3/7] Fix gradient themes --- src/renderRepoCard.js | 9 ++++----- src/renderStatsCard.js | 9 ++++----- src/renderTopLanguages.js | 9 ++++----- src/utils.js | 2 +- 4 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js index a99fc3241fad2..2e7583dea88b2 100644 --- a/src/renderRepoCard.js +++ b/src/renderRepoCard.js @@ -44,7 +44,6 @@ 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 +55,7 @@ const renderRepoCard = (repo, options = {}) => { bg_color, theme, }); - const gradientBgColor = isGradient ? bg_color.split(',') : undefined; + const isGradient = typeof bgColor == 'object'; const totalStars = kFormatter(stargazers.totalCount); const totalForks = kFormatter(forkCount); @@ -76,9 +75,9 @@ const renderRepoCard = (repo, options = {}) => { `; const gradient = isGradient ? ` - - - + + + ` : undefined diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js index ad78b8f95c6a4..93c39ebdcc279 100644 --- a/src/renderStatsCard.js +++ b/src/renderStatsCard.js @@ -54,7 +54,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { const lheight = parseInt(line_height); - 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, iconColor, bgColor } = getCardColors({ @@ -65,7 +64,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { theme, }); -const gradientBgColor = isGradient ? bg_color.split(',') : undefined; + const isGradient = typeof bgColor == 'object'; // Meta data for creating text nodes with createTextNode function const STATS = { stars: { @@ -154,9 +153,9 @@ const gradientBgColor = isGradient ? bg_color.split(',') : undefined; const gradient = isGradient ? ` - - - + + + ` : undefined diff --git a/src/renderTopLanguages.js b/src/renderTopLanguages.js index 5b4dfd09b6e40..8c1b0a998bed4 100644 --- a/src/renderTopLanguages.js +++ b/src/renderTopLanguages.js @@ -93,7 +93,6 @@ 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 +100,7 @@ const renderTopLanguages = (topLangs, options = {}) => { bg_color, theme, }); - const gradientBgColor = isGradient ? bg_color.split(',') : undefined; + const isGradient = typeof bgColor == 'object'; let width = isNaN(card_width) ? 300 : card_width; let height = 45 + (langs.length + 1) * 40; @@ -175,9 +174,9 @@ const renderTopLanguages = (topLangs, options = {}) => { } const gradient = isGradient ? ` - - - + + + ` : undefined diff --git a/src/utils.js b/src/utils.js index fe101c80ffd93..7858e110286e6 100644 --- a/src/utils.js +++ b/src/utils.js @@ -61,7 +61,7 @@ function clampValue(number, min, max) { } function fallbackColor(color, fallbackColor) { - return (isValidHexColor(color) && `#${color}`) || fallbackColor; + return (isValidHexColor(color) && `#${color}`) || (color.includes(',') && color.split(',')) || fallbackColor; } function request(data, headers) { From 074e22017ef8057ce1da4aa8030b913df22a3e3e Mon Sep 17 00:00:00 2001 From: Nathan Chu <63111210+nthnchu@users.noreply.github.com> Date: Wed, 29 Jul 2020 10:53:13 -0400 Subject: [PATCH 4/7] Verify hex color in gradient --- src/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils.js b/src/utils.js index 7858e110286e6..6ee98d699eee9 100644 --- a/src/utils.js +++ b/src/utils.js @@ -61,7 +61,7 @@ function clampValue(number, min, max) { } function fallbackColor(color, fallbackColor) { - return (isValidHexColor(color) && `#${color}`) || (color.includes(',') && color.split(',')) || fallbackColor; + return (isValidHexColor(color) && `#${color}`) || (color.includes(',') && isValidHexColor(color.split(',')[1]) && isValidHexColor(color.split(',')[2]) && color.split(',')) || fallbackColor; } function request(data, headers) { From 65cdb1877f71838c03273fe8286cf39f5fafd312 Mon Sep 17 00:00:00 2001 From: Nathan Chu <63111210+nthnchu@users.noreply.github.com> Date: Thu, 30 Jul 2020 11:26:35 -0400 Subject: [PATCH 5/7] remove unused code --- src/renderRepoCard.js | 12 +++--------- src/renderStatsCard.js | 2 -- src/renderTopLanguages.js | 3 ++- 3 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js index 5845e3273d0b9..9721ebf11b222 100644 --- a/src/renderRepoCard.js +++ b/src/renderRepoCard.js @@ -45,6 +45,7 @@ const renderRepoCard = (repo, options = {}) => { const multiLineDescription = wrapTextMultiline(desc); const descriptionLines = multiLineDescription.length; const lineHeight = 10; + const height = (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight; @@ -56,7 +57,7 @@ const renderRepoCard = (repo, options = {}) => { bg_color, theme, }); - const isGradient = typeof bgColor == 'object'; + const totalStars = kFormatter(stargazers.totalCount); const totalForks = kFormatter(forkCount); @@ -74,14 +75,7 @@ const renderRepoCard = (repo, options = {}) => { `; - const gradient = isGradient ? ` - - - - - - ` - : undefined + const svgLanguage = primaryLanguage ? ` diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js index 1e9ef3c3cef93..ace6bcb40c19f 100644 --- a/src/renderStatsCard.js +++ b/src/renderStatsCard.js @@ -55,7 +55,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { const lheight = parseInt(line_height, 10); - // returns theme based colors with proper overrides and defaults const { titleColor, textColor, iconColor, bgColor } = getCardColors({ title_color, @@ -65,7 +64,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { theme, }); - const isGradient = typeof bgColor == 'object'; // Meta data for creating text nodes with createTextNode function const STATS = { stars: { diff --git a/src/renderTopLanguages.js b/src/renderTopLanguages.js index cd85cd78da6bc..5ccb2e0d23529 100644 --- a/src/renderTopLanguages.js +++ b/src/renderTopLanguages.js @@ -95,6 +95,7 @@ const renderTopLanguages = (topLangs, options = {}) => { const totalLanguageSize = langs.reduce((acc, curr) => { return acc + curr.size; }, 0); + // returns theme based colors with proper overrides and defaults const { titleColor, textColor, bgColor } = getCardColors({ title_color, @@ -102,7 +103,7 @@ const renderTopLanguages = (topLangs, options = {}) => { bg_color, theme, }); - const isGradient = typeof bgColor == 'object'; + let width = isNaN(card_width) ? 300 : card_width; let height = 45 + (langs.length + 1) * 40; From 3a3d8d2c5e0ec60ddb5e82ffad5f631afb681b92 Mon Sep 17 00:00:00 2001 From: Nathan Chu <63111210+nthnchu@users.noreply.github.com> Date: Sun, 2 Aug 2020 14:50:30 -0400 Subject: [PATCH 6/7] Add gradient background tests --- tests/card.test.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/tests/card.test.js b/tests/card.test.js index 15d1d7b30e7e0..4e8b2dffc7f23 100644 --- a/tests/card.test.js +++ b/tests/card.test.js @@ -133,4 +133,39 @@ describe("Card", () => { "#fff" ); }); + it("should render gradient backgrounds", () => { + const { titleColor, textColor, iconColor, bgColor } = getCardColors({ + title_color: "f00", + icon_color: "0f0", + text_color: "00f", + bg_color: "90,fff,000", + theme: "default", + }); + const card = new Card({ + height: 200, + colors: { + titleColor, + textColor, + iconColor, + bgColor, + }, + }); + document.body.innerHTML = card.render(``); + expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( + "fill", + "url(#gradient)" + ); + expect(document.querySelector('defs linearGradient')).toHaveAttribute( + "gradientTransform", + "rotate(90)" + ); + expect(document.querySelector('defs linearGradient stop:nth-child(1)')).toHaveAttribute( + "stop-color", + "#fff" + ); + expect(document.querySelector('defs linearGradient stop:nth-child(2)')).toHaveAttribute( + "stop-color", + "#000" + ); + }); }); From 366cc48853639bf60120d220f5d8b66146c27eb6 Mon Sep 17 00:00:00 2001 From: Nathan Chu <63111210+nthnchu@users.noreply.github.com> Date: Wed, 5 Aug 2020 08:06:50 -0400 Subject: [PATCH 7/7] Added documentation for gradient backgrounds --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index ccea98b62b2cc..96617e53b21b9 100644 --- a/readme.md +++ b/readme.md @@ -125,7 +125,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you - `title_color` - Card's title color _(hex color)_ - `text_color` - Body text color _(hex color)_ - `icon_color` - Icons color if available _(hex color)_ -- `bg_color` - Card's background color _(hex color)_ +- `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_ - `theme` - name of the theme, choose from [all available themes](./themes/README.md) - `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_