From 7a096acf66121bf4e42d98a047b21aacbc8538bc Mon Sep 17 00:00:00 2001 From: Rishi Suresh Date: Wed, 28 Apr 2021 00:28:44 +0530 Subject: [PATCH] feat: added border_color option (#1000) * feat: Allow customization of border color * docs: Update readme --- CONTRIBUTING.md | 2 +- api/index.js | 2 ++ api/pin.js | 2 ++ api/top-langs.js | 4 +++- api/wakatime.js | 2 ++ readme.md | 5 +++++ src/cards/repo-card.js | 5 ++++- src/cards/stats-card.js | 5 ++++- src/cards/top-languages-card.js | 7 +++++-- src/cards/wakatime-card.js | 13 +++++++++++-- src/common/Card.js | 2 +- src/common/utils.js | 9 ++++++++- tests/__snapshots__/renderWakatimeCard.test.js.snap | 4 ++-- tests/utils.test.js | 5 +++++ themes/index.js | 1 + 15 files changed, 56 insertions(+), 12 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dc81bf1..04528df 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -36,7 +36,7 @@ GitHub Readme Stats supports custom theming and you can also contribute new them All you need to do is edit [themes/index.js](./themes/index.js) file and add your theme at the end of the file. -While creating the Pull request to add a new theme **don't forget to add a screenshot of how your theme looks**, you can also test how it looks using custom url parameters like `title_color`, `icon_color`, `bg_color`, `text_color` +While creating the Pull request to add a new theme **don't forget to add a screenshot of how your theme looks**, you can also test how it looks using custom url parameters like `title_color`, `icon_color`, `bg_color`, `text_color`, `border_color` > NOTE: If you are contributing your theme just because you are using it personally, then you can [customize the looks](./readme.md#customization) of your card with URL params instead. diff --git a/api/index.js b/api/index.js index de85cb4..0cda587 100644 --- a/api/index.js +++ b/api/index.js @@ -32,6 +32,7 @@ module.exports = async (req, res) => { locale, disable_animations, border_radius, + border_color, } = req.query; let stats; @@ -76,6 +77,7 @@ module.exports = async (req, res) => { theme, custom_title, border_radius, + border_color, locale: locale ? locale.toLowerCase() : null, disable_animations: parseBoolean(disable_animations), }), diff --git a/api/pin.js b/api/pin.js index e6b28dc..7fad6c0 100644 --- a/api/pin.js +++ b/api/pin.js @@ -24,6 +24,7 @@ module.exports = async (req, res) => { cache_seconds, locale, border_radius, + border_color, } = req.query; let repoData; @@ -71,6 +72,7 @@ module.exports = async (req, res) => { bg_color, theme, border_radius, + border_color, show_owner: parseBoolean(show_owner), locale: locale ? locale.toLowerCase() : null, }), diff --git a/api/top-langs.js b/api/top-langs.js index 4de6999..7818ddb 100644 --- a/api/top-langs.js +++ b/api/top-langs.js @@ -28,7 +28,8 @@ module.exports = async (req, res) => { exclude_repo, custom_title, locale, - border_radius + border_radius, + border_color, } = req.query; let topLangs; @@ -71,6 +72,7 @@ module.exports = async (req, res) => { theme, layout, border_radius, + border_color, locale: locale ? locale.toLowerCase() : null, }), ); diff --git a/api/wakatime.js b/api/wakatime.js index 2efcc4f..4bb8fca 100644 --- a/api/wakatime.js +++ b/api/wakatime.js @@ -29,6 +29,7 @@ module.exports = async (req, res) => { api_domain, range, border_radius, + border_color, } = req.query; res.setHeader("Content-Type", "image/svg+xml"); @@ -65,6 +66,7 @@ module.exports = async (req, res) => { theme, hide_progress, border_radius, + border_color, locale: locale ? locale.toLowerCase() : null, layout, langs_count, diff --git a/readme.md b/readme.md index 73d0f9a..068e397 100644 --- a/readme.md +++ b/readme.md @@ -156,6 +156,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)_ +- `border_color` - Card's border color _(hex color)_. (Does not apply when `hide_border` is enabled) - `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_ - `hide_border` - Hides the card's border _(boolean)_ - `theme` - name of the theme, choose from [all available themes](./themes/README.md) @@ -331,6 +332,10 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username. ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=issues&show_icons=true) +- Customize Border Color + +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&border_color=2e4058) + - Include All Commits ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&include_all_commits=true) diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index 27a8e1b..1eb0e09 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -31,6 +31,7 @@ const renderRepoCard = (repo, options = {}) => { show_owner, theme = "default_repocard", border_radius, + border_color, locale, } = options; @@ -60,11 +61,12 @@ const renderRepoCard = (repo, options = {}) => { }); // returns theme based colors with proper overrides and defaults - const { titleColor, textColor, iconColor, bgColor } = getCardColors({ + const { titleColor, textColor, iconColor, bgColor, borderColor } = getCardColors({ title_color, icon_color, text_color, bg_color, + border_color, theme, }); @@ -125,6 +127,7 @@ const renderRepoCard = (repo, options = {}) => { textColor, iconColor, bgColor, + borderColor, }, }); diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index 017d81b..415252e 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -70,6 +70,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { theme = "default", custom_title, border_radius, + border_color, locale, disable_animations = false, } = options; @@ -77,11 +78,12 @@ 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({ + const { titleColor, textColor, iconColor, bgColor, borderColor } = getCardColors({ title_color, icon_color, text_color, bg_color, + border_color, theme, }); @@ -207,6 +209,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { textColor, iconColor, bgColor, + borderColor, }, }); diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 83d9bb1..86ec651 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -73,7 +73,8 @@ const renderTopLanguages = (topLangs, options = {}) => { layout, custom_title, locale, - border_radius + border_radius, + border_color, } = options; const i18n = new I18n({ @@ -104,10 +105,11 @@ const renderTopLanguages = (topLangs, options = {}) => { }, 0); // returns theme based colors with proper overrides and defaults - const { titleColor, textColor, bgColor } = getCardColors({ + const { titleColor, textColor, bgColor, borderColor } = getCardColors({ title_color, text_color, bg_color, + border_color, theme, }); @@ -189,6 +191,7 @@ const renderTopLanguages = (topLangs, options = {}) => { titleColor, textColor, bgColor, + borderColor, }, }); diff --git a/src/cards/wakatime-card.js b/src/cards/wakatime-card.js index bf4f3bc..f7306c0 100644 --- a/src/cards/wakatime-card.js +++ b/src/cards/wakatime-card.js @@ -100,7 +100,8 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => { locale, layout, langs_count = languages ? languages.length : 0, - border_radius + border_radius, + border_color, } = options; const i18n = new I18n({ @@ -113,11 +114,18 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => { langsCount = clampValue(parseInt(langs_count), 1, langs_count); // returns theme based colors with proper overrides and defaults - const { titleColor, textColor, iconColor, bgColor } = getCardColors({ + const { + titleColor, + textColor, + iconColor, + bgColor, + borderColor, + } = getCardColors({ title_color, icon_color, text_color, bg_color, + border_color, theme, }); @@ -221,6 +229,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => { textColor, iconColor, bgColor, + borderColor, }, }); diff --git a/src/common/Card.js b/src/common/Card.js index 8d10219..0065cf7 100644 --- a/src/common/Card.js +++ b/src/common/Card.js @@ -147,7 +147,7 @@ class Card { y="0.5" rx="${this.border_radius}" height="99%" - stroke="#E4E2E2" + stroke="${this.colors.borderColor}" width="${this.width - 1}" fill="${ typeof this.colors.bgColor === "object" diff --git a/src/common/utils.js b/src/common/utils.js index a2260da..c1a47ff 100644 --- a/src/common/utils.js +++ b/src/common/utils.js @@ -115,10 +115,12 @@ function getCardColors({ icon_color, bg_color, theme, + border_color, fallbackTheme = "default", }) { const defaultTheme = themes[fallbackTheme]; const selectedTheme = themes[theme] || defaultTheme; + const defaultBorderColor = selectedTheme.border_color || defaultTheme.border_color; // get the color provided by the user else the theme color // finally if both colors are invalid fallback to default theme @@ -139,7 +141,12 @@ function getCardColors({ "#" + defaultTheme.bg_color, ); - return { titleColor, iconColor, textColor, bgColor }; + const borderColor = fallbackColor( + border_color || defaultBorderColor, + "#" + defaultBorderColor, + ); + + return { titleColor, iconColor, textColor, bgColor, borderColor }; } function wrapTextMultiline(text, width = 60, maxLines = 3) { diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap index 472a9bc..43c211c 100644 --- a/tests/__snapshots__/renderWakatimeCard.test.js.snap +++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap @@ -69,7 +69,7 @@ exports[`Test Render Wakatime Card should render correctly 1`] = ` y=\\"0.5\\" rx=\\"4.5\\" height=\\"99%\\" - stroke=\\"#E4E2E2\\" + stroke=\\"#e4e2e2\\" width=\\"494\\" fill=\\"#fffefe\\" stroke-opacity=\\"1\\" @@ -220,7 +220,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1 y=\\"0.5\\" rx=\\"4.5\\" height=\\"99%\\" - stroke=\\"#E4E2E2\\" + stroke=\\"#e4e2e2\\" width=\\"494\\" fill=\\"#fffefe\\" stroke-opacity=\\"1\\" diff --git a/tests/utils.test.js b/tests/utils.test.js index dd448b2..aa3bf9f 100644 --- a/tests/utils.test.js +++ b/tests/utils.test.js @@ -71,6 +71,7 @@ describe("Test utils.js", () => { text_color: "0f0", icon_color: "00f", bg_color: "fff", + border_color: "fff", theme: "dark", }); expect(colors).toStrictEqual({ @@ -78,6 +79,7 @@ describe("Test utils.js", () => { textColor: "#0f0", iconColor: "#00f", bgColor: "#fff", + borderColor: "#fff", }); }); @@ -87,6 +89,7 @@ describe("Test utils.js", () => { text_color: "0f0", icon_color: "00f", bg_color: "fff", + border_color: "invalidColor", theme: "dark", }); expect(colors).toStrictEqual({ @@ -94,6 +97,7 @@ describe("Test utils.js", () => { textColor: "#0f0", iconColor: "#00f", bgColor: "#fff", + borderColor: "#e4e2e2", }); }); @@ -106,6 +110,7 @@ describe("Test utils.js", () => { textColor: "#9f9f9f", iconColor: "#79ff97", bgColor: "#151515", + borderColor: "#e4e2e2", }); }); }); diff --git a/themes/index.js b/themes/index.js index 42bade8..0cefbef 100644 --- a/themes/index.js +++ b/themes/index.js @@ -4,6 +4,7 @@ const themes = { icon_color: "4c71f2", text_color: "333", bg_color: "fffefe", + border_color: "e4e2e2", }, default_repocard: { title_color: "2f80ed",