feat: add corner rounding parameter so we can make square cards (#845)

* add corner rounding parameter so i can make square cards

* rename rx to border_radius

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),
       }),

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,
       }),

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,
       }),
     );

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,
       }),

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
 

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,

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,

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,

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,

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}"

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");
+  });
 });

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");
+  });
 });

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");
+  });
 });

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");
+  });
 });