diff --git a/api/index.js b/api/index.js index 9b9688237e482..de85cb462a5bf 100644 --- a/api/index.js +++ b/api/index.js @@ -31,6 +31,7 @@ module.exports = async (req, res) => { custom_title, locale, disable_animations, + border_radius, } = req.query; let stats; @@ -74,6 +75,7 @@ module.exports = async (req, res) => { bg_color, theme, custom_title, + border_radius, locale: locale ? locale.toLowerCase() : null, disable_animations: parseBoolean(disable_animations), }), diff --git a/api/pin.js b/api/pin.js index f3e2d9c46a23b..72e200ea51292 100644 --- a/api/pin.js +++ b/api/pin.js @@ -23,6 +23,7 @@ module.exports = async (req, res) => { show_owner, cache_seconds, locale, + border_radius, } = req.query; let repoData; @@ -69,6 +70,7 @@ module.exports = async (req, res) => { text_color, bg_color, theme, + border_radius, show_owner: parseBoolean(show_owner), locale: locale ? locale.toLowerCase() : null, }), diff --git a/api/top-langs.js b/api/top-langs.js index b75d9a963f569..75b7353fd3859 100644 --- a/api/top-langs.js +++ b/api/top-langs.js @@ -28,6 +28,7 @@ module.exports = async (req, res) => { exclude_repo, custom_title, locale, + border_radius } = req.query; let topLangs; @@ -68,6 +69,7 @@ module.exports = async (req, res) => { bg_color, theme, layout, + border_radius, locale: locale ? locale.toLowerCase() : null, }), ); diff --git a/api/wakatime.js b/api/wakatime.js index f681c8b243396..fcad8282a2b0e 100644 --- a/api/wakatime.js +++ b/api/wakatime.js @@ -26,6 +26,7 @@ module.exports = async (req, res) => { locale, layout, api_domain, + border_radius, } = req.query; res.setHeader("Content-Type", "image/svg+xml"); @@ -61,6 +62,7 @@ module.exports = async (req, res) => { bg_color, theme, hide_progress, + border_radius, locale: locale ? locale.toLowerCase() : null, layout, }), diff --git a/readme.md b/readme.md index 2319054b38d45..929783335e3a9 100644 --- a/readme.md +++ b/readme.md @@ -145,6 +145,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you - `theme` - name of the theme, choose from [all available themes](./themes/README.md) - `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_ - `locale` - set the language in the card _(e.g. cn, de, es, etc.)_ +- `border_radius` - Corner rounding on the card_ ##### Gradient in bg_color diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index 0e736d25613f5..27a8e1b40c069 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -30,6 +30,7 @@ const renderRepoCard = (repo, options = {}) => { bg_color, show_owner, theme = "default_repocard", + border_radius, locale, } = options; @@ -118,6 +119,7 @@ const renderRepoCard = (repo, options = {}) => { titlePrefixIcon: icons.contribs, width: 400, height, + border_radius, colors: { titleColor, textColor, diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index 16b65e790a84c..017d81b80991c 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -69,6 +69,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { bg_color, theme = "default", custom_title, + border_radius, locale, disable_animations = false, } = options; @@ -200,6 +201,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { defaultTitle: i18n.t("statcard.title"), width, height, + border_radius, colors: { titleColor, textColor, diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 215076b9ece12..83d9bb16451ea 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -73,6 +73,7 @@ const renderTopLanguages = (topLangs, options = {}) => { layout, custom_title, locale, + border_radius } = options; const i18n = new I18n({ @@ -183,6 +184,7 @@ const renderTopLanguages = (topLangs, options = {}) => { defaultTitle: i18n.t("langcard.title"), width, height, + border_radius, colors: { titleColor, textColor, diff --git a/src/cards/wakatime-card.js b/src/cards/wakatime-card.js index 4adf799fc25dc..7b2096a641fca 100644 --- a/src/cards/wakatime-card.js +++ b/src/cards/wakatime-card.js @@ -99,6 +99,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => { custom_title, locale, layout, + border_radius } = options; const i18n = new I18n({ @@ -210,6 +211,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => { defaultTitle: i18n.t("wakatimecard.title"), width: 495, height, + border_radius, colors: { titleColor, textColor, diff --git a/src/common/Card.js b/src/common/Card.js index 9afeb5f129c9c..8d102192df369 100644 --- a/src/common/Card.js +++ b/src/common/Card.js @@ -5,6 +5,7 @@ class Card { constructor({ width = 100, height = 100, + border_radius = 4.5, colors = {}, customTitle, defaultTitle = "", @@ -16,6 +17,8 @@ class Card { this.hideBorder = false; this.hideTitle = false; + this.border_radius = border_radius; + // returns theme based colors with proper overrides and defaults this.colors = colors; this.title = @@ -142,7 +145,7 @@ class Card { data-testid="card-bg" x="0.5" y="0.5" - rx="4.5" + rx="${this.border_radius}" height="99%" stroke="#E4E2E2" width="${this.width - 1}" diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js index 3b4f9601cc44e..e375d35383ca5 100644 --- a/tests/renderRepoCard.test.js +++ b/tests/renderRepoCard.test.js @@ -332,4 +332,11 @@ describe("Test renderRepoCard", () => { ); expect(queryByTestId(document.body, "badge")).toHaveTextContent("模板"); }); + + it("should render without rounding", () => { + document.body.innerHTML = renderRepoCard(data_repo.repository, { border_radius: "0" }); + expect(document.querySelector("rect")).toHaveAttribute("rx", "0"); + document.body.innerHTML = renderRepoCard(data_repo.repository, { }); + expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5"); + }); }); diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 10a6fe39cb952..53262dddbc8af 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -262,4 +262,11 @@ describe("Test renderStatsCard", () => { ).textContent, ).toBe("参与项目数:"); }); + + it("should render without rounding", () => { + document.body.innerHTML = renderStatsCard(stats, { border_radius: "0" }); + expect(document.querySelector("rect")).toHaveAttribute("rx", "0"); + document.body.innerHTML = renderStatsCard(stats, { }); + expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5"); + }); }); diff --git a/tests/renderTopLanguages.test.js b/tests/renderTopLanguages.test.js index a12f3e774d1d7..6e03504142903 100644 --- a/tests/renderTopLanguages.test.js +++ b/tests/renderTopLanguages.test.js @@ -223,4 +223,11 @@ describe("Test renderTopLanguages", () => { "最常用的语言", ); }); + + it("should render without rounding", () => { + document.body.innerHTML = renderTopLanguages(langs, { border_radius: "0" }); + expect(document.querySelector("rect")).toHaveAttribute("rx", "0"); + document.body.innerHTML = renderTopLanguages(langs, { }); + expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5"); + }); }); diff --git a/tests/renderWakatimeCard.test.js b/tests/renderWakatimeCard.test.js index 2d21c99f48df1..47f718cb33b07 100644 --- a/tests/renderWakatimeCard.test.js +++ b/tests/renderWakatimeCard.test.js @@ -26,4 +26,11 @@ describe("Test Render Wakatime Card", () => { .textContent, ).toBe("本周没有编程活动"); }); + + it("should render without rounding", () => { + document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, { border_radius: "0" }); + expect(document.querySelector("rect")).toHaveAttribute("rx", "0"); + document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, { }); + expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5"); + }); });