Add card height option

api/gist.js

@@ -22,6 +22,7 @@ export default async (req, res) => {
     border_color,
     show_owner,
     hide_border,
+    card_height,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -74,6 +75,7 @@ export default async (req, res) => {
         locale: locale ? locale.toLowerCase() : null,
         show_owner: parseBoolean(show_owner),
         hide_border: parseBoolean(hide_border),
+        card_height,
       }),
     );
   } catch (err) {

api/index.js

@@ -38,6 +38,7 @@ export default async (req, res) => {
     border_color,
     rank_icon,
     show,
+    card_height,
   } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
 
@@ -102,6 +103,7 @@ export default async (req, res) => {
         disable_animations: parseBoolean(disable_animations),
         rank_icon,
         show: showStats,
+        card_height,
       }),
     );
   } catch (err) {

api/pin.js

@@ -24,6 +24,7 @@ export default async (req, res) => {
     locale,
     border_radius,
     border_color,
+    card_height,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -80,6 +81,7 @@ export default async (req, res) => {
         border_color,
         show_owner: parseBoolean(show_owner),
         locale: locale ? locale.toLowerCase() : null,
+        card_height,
       }),
     );
   } catch (err) {

api/top-langs.js

@@ -33,6 +33,7 @@ export default async (req, res) => {
     border_color,
     disable_animations,
     hide_progress,
+    card_height,
   } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
 
@@ -96,6 +97,7 @@ export default async (req, res) => {
         locale: locale ? locale.toLowerCase() : null,
         disable_animations: parseBoolean(disable_animations),
         hide_progress: parseBoolean(hide_progress),
+        card_height,
       }),
     );
   } catch (err) {

api/wakatime.js

@@ -30,6 +30,7 @@ export default async (req, res) => {
     api_domain,
     border_radius,
     border_color,
+    card_height,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -75,6 +76,7 @@ export default async (req, res) => {
         locale: locale ? locale.toLowerCase() : null,
         layout,
         langs_count,
+        card_height,
       }),
     );
   } catch (err) {

readme.md

@@ -298,6 +298,7 @@ You can customize the appearance of all your cards however you wish with URL par
 *   `cache_seconds` - Sets the cache header manually *(min: 21600, max: 86400)*. Default: `21600 seconds (6 hours)`.
 *   `locale` - Sets the language in the card, you can check full list of available locales [here](#available-locales). Default: `en`.
 *   `border_radius` - Corner rounding on the card. Default: `4.5`.
+*   `card_height` - Card's height. (dynamically)
 
 > [!WARNING]\
 > We use caching to decrease the load on our servers (see <https://github.com/anuraghazra/github-readme-stats/issues/1471#issuecomment-1271551425>). Our cards have a default cache of 6 hours (21600 seconds). Also, note that the cache is clamped to a minimum of 6 hours and a maximum of 24 hours. If you want the data on your statistics card to be updated more often you can [deploy your own instance](#deploy-on-your-own) and set [environment variable](#disable-rate-limit-protections) `CACHE_SECONDS` to a value of your choosing.

src/cards/gist-card.js

@@ -52,6 +52,7 @@ const renderGistCard = (gistData, options = {}) => {
     theme,
     border_radius,
     border_color,
+    card_height,
     show_owner = false,
     hide_border = false,
   } = options;
@@ -77,8 +78,9 @@ const renderGistCard = (gistData, options = {}) => {
     .join("");
 
   const lineHeight = descriptionLines > 3 ? 12 : 10;
-  const height =
-    (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
+  const height = card_height
+    ? card_height
+    : (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
 
   const totalStars = kFormatter(starsCount);
   const totalForks = kFormatter(forksCount);

src/cards/repo-card.js

@@ -71,6 +71,7 @@ const renderRepoCard = (repo, options = {}) => {
     show_owner = false,
     theme = "default_repocard",
     border_radius,
+    card_height,
     border_color,
     locale,
   } = options;
@@ -87,8 +88,9 @@ const renderRepoCard = (repo, options = {}) => {
     .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
     .join("");
 
-  const height =
-    (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
+  const height = card_height
+    ? card_height
+    : (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
 
   const i18n = new I18n({
     locale,

src/cards/stats-card.js

@@ -238,6 +238,7 @@ const renderStatsCard = (stats, options = {}) => {
     disable_animations = false,
     rank_icon = "default",
     show = [],
+    card_height,
   } = options;
 
   const lheight = parseInt(String(line_height), 10);
@@ -391,10 +392,12 @@ const renderStatsCard = (stats, options = {}) => {
 
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
-  let height = Math.max(
-    45 + (statItems.length + 1) * lheight,
-    hide_rank ? 0 : statItems.length ? 150 : 180,
-  );
+  let height = card_height
+    ? card_height
+    : Math.max(
+        45 + (statItems.length + 1) * lheight,
+        hide_rank ? 0 : statItems.length ? 150 : 180,
+      );
 
   // the lower the user's percentile the better
   const progress = 100 - rank.percentile;

src/cards/top-languages-card.js

@@ -738,6 +738,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     border_radius,
     border_color,
     disable_animations,
+    card_height,
   } = options;
 
   const i18n = new I18n({
@@ -805,7 +806,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     customTitle: custom_title,
     defaultTitle: i18n.t("langcard.title"),
     width,
-    height,
+    height: card_height ? card_height : height,
     border_radius,
     colors,
   });

src/cards/types.d.ts

@@ -11,6 +11,7 @@ export type CommonOptions = {
   border_color: string;
   locale: string;
   hide_border: boolean;
+  card_height: number;
 };
 
 export type StatCardOptions = CommonOptions & {

src/cards/wakatime-card.js

@@ -218,6 +218,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     langs_count = languages.length,
     border_radius,
     border_color,
+    card_height,
   } = options;
 
   const shouldHideLangs = Array.isArray(hide) && hide.length > 0;
@@ -259,7 +260,9 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
-  let height = Math.max(45 + (filteredLanguages.length + 1) * lheight, 150);
+  let height = card_height
+    ? card_height
+    : Math.max(45 + (filteredLanguages.length + 1) * lheight, 150);
 
   const cssStyles = getStyles({
     titleColor,

tests/renderGistCard.test.js

@@ -217,6 +217,21 @@ describe("test renderGistCard", () => {
     expect(queryByTestId(document.body, "forksCount")).toBeNull();
   });
 
+  it("should render custom height correctly", () => {
+    document.body.innerHTML = renderGistCard(
+      {
+        ...data,
+      },
+      {
+        card_height: 50,
+      },
+    );
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height"),
+    ).toBe("50");
+  });
+
   it("should render without rounding", () => {
     document.body.innerHTML = renderGistCard(data, {
       border_radius: "0",

tests/renderRepoCard.test.js

@@ -319,6 +319,22 @@ describe("Test renderRepoCard", () => {
     expect(queryByTestId(document.body, "badge")).toHaveTextContent("模板");
   });
 
+  it("should render custom height correctly", () => {
+    document.body.innerHTML = renderRepoCard(
+      {
+        ...data_repo.repository,
+        isTemplate: true,
+      },
+      {
+        card_height: 75,
+      },
+    );
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height"),
+    ).toBe("75");
+  });
+
   it("should render without rounding", () => {
     document.body.innerHTML = renderRepoCard(data_repo.repository, {
       border_radius: "0",

tests/renderStatsCard.test.js

@@ -372,6 +372,16 @@ describe("Test renderStatsCard", () => {
     ).toBe("287");
   });
 
+  it("should render custom height correctly", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      card_height: 50,
+    });
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height"),
+    ).toBe("50");
+  });
+
   it("should render translations", () => {
     document.body.innerHTML = renderStatsCard(stats, { locale: "cn" });
     expect(document.getElementsByClassName("header")[0].textContent).toBe(

tests/renderTopLanguagesCard.test.js

@@ -848,4 +848,17 @@ describe("Test renderTopLanguages", () => {
       "No languages data.",
     );
   });
+
+  it("should render custom height correctly", () => {
+    document.body.innerHTML = renderTopLanguages(
+      {},
+      {
+        card_height: 56,
+      },
+    );
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height"),
+    ).toBe("56");
+  });
 });

tests/renderWakatimeCard.test.js

@@ -69,6 +69,20 @@ describe("Test Render Wakatime Card", () => {
     );
   });
 
+  it("should render custom height correctly", () => {
+    document.body.innerHTML = renderWakatimeCard(
+      {
+        ...wakaTimeData.data,
+        languages: undefined,
+      },
+      { card_height: 42 },
+    );
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height"),
+    ).toBe("42");
+  });
+
   it('should show "no coding activity this week" message when using compact layout and there has not been activity', () => {
     document.body.innerHTML = renderWakatimeCard(
       {