feat: custom card title (#293)

* Custom stats title (anuraghazra#229)

* Add custom title test

* remove unused code

* Update readme.md to include the `custom_title` option

* Update readme_es.md to include `custom_title` option

Co-Authored-By: José Javier Rodríguez Zas <jjavierdguezas@gmail.com>

* Merge branch 'master' of https://github.com/anuraghazra/github-readme-stats.git into custom-title

* feat: added customTitle option in Card

Co-authored-by: José Javier Rodríguez Zas <jjavierdguezas@gmail.com>
Co-authored-by: Anurag <hazru.anurag@gmail.com>

api/index.js

@@ -27,6 +27,7 @@ module.exports = async (req, res) => {
     bg_color,
     theme,
     cache_seconds,
+    custom_title,
   } = req.query;
   let stats;
 
@@ -65,6 +66,7 @@ module.exports = async (req, res) => {
         text_color,
         bg_color,
         theme,
+        custom_title,
       }),
     );
   } catch (err) {

api/top-langs.js

@@ -25,6 +25,7 @@ module.exports = async (req, res) => {
     layout,
     langs_count,
     exclude_repo,
+    custom_title,
   } = req.query;
   let topLangs;
 
@@ -51,6 +52,7 @@ module.exports = async (req, res) => {
 
     return res.send(
       renderTopLanguages(topLangs, {
+        custom_title,
         hide_title: parseBoolean(hide_title),
         hide_border: parseBoolean(hide_border),
         card_width: parseInt(card_width, 10),

api/wakatime.js

@@ -21,6 +21,7 @@ module.exports = async (req, res) => {
     cache_seconds,
     hide_title,
     hide_progress,
+    custom_title,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -42,6 +43,7 @@ module.exports = async (req, res) => {
 
     return res.send(
       wakatimeCard(last7Days, {
+        custom_title,
         hide_title: parseBoolean(hide_title),
         hide_border: parseBoolean(hide_border),
         line_height,

docs/readme_es.md

@@ -147,6 +147,7 @@ Puedes personalizar el aspecto de tu `Stats Card` o `Repo Card` de la manera que
 - `include_all_commits` - Cuente los commits totales en lugar de solo los commits del año actual _(boolean)_
 - `count_private` - Cuenta los commits privadas _(boolean)_
 - `line_height` - Establece el alto de línea entre texto _(number)_
+- `custom_title` - Establece un título personalizado
 
 #### Opciones exclusivas de la tarjeta Repo:
 

readme.md

@@ -157,6 +157,7 @@ You can provide multiple comma-separated values in bg_color option to render a g
 - `include_all_commits` - Count total commits instead of just the current year commits _(boolean)_
 - `count_private` - Count private commits _(boolean)_
 - `line_height` - Sets the line-height between text _(number)_
+- `custom_title` - Sets a custom title for the card
 
 #### Repo Card Exclusive Options:
 
@@ -171,6 +172,7 @@ You can provide multiple comma-separated values in bg_color option to render a g
 - `card_width` - Set the card's width manually _(number)_
 - `langs_count` - Show more languages on the card, between 1-10, defaults to 5 _(number)_
 - `exclude_repo` - Exclude specified repositories _(Comma-separated values)_
+- `custom_title` - Sets a custom title for the card
 
 > :warning: **Important:**
 > Language names should be uri-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding)
@@ -181,6 +183,7 @@ You can provide multiple comma-separated values in bg_color option to render a g
 - `hide_title` - _(boolean)_
 - `line_height` - Sets the line-height between text _(number)_
 - `hide_progress` - Hides the progress bar and percentage _(boolean)_
+- `custom_title` - Sets a custom title for the card
 
 ---
 

src/cards/repo-card.js

@@ -106,7 +106,7 @@ const renderRepoCard = (repo, options = {}) => {
   }).join("");
 
   const card = new Card({
-    title: header,
+    defaultTitle: header,
     titlePrefixIcon: icons.contribs,
     width: 400,
     height,

src/cards/stats-card.js

@@ -65,6 +65,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     text_color,
     bg_color,
     theme = "default",
+    custom_title,
   } = options;
 
   const lheight = parseInt(line_height, 10);
@@ -167,7 +168,8 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
 
   const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s";
   const card = new Card({
-    title: `${encodeHTML(name)}'${apostrophe} GitHub Stats`,
+    customTitle: custom_title,
+    defaultTitle: `${encodeHTML(name)}'${apostrophe} GitHub Stats`,
     width: 495,
     height,
     colors: {

src/cards/top-languages-card.js

@@ -69,6 +69,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     hide,
     theme,
     layout,
+    custom_title,
   } = options;
 
   let langs = Object.values(topLangs);
@@ -170,7 +171,8 @@ const renderTopLanguages = (topLangs, options = {}) => {
   }
 
   const card = new Card({
-    title: "Most Used Languages",
+    customTitle: custom_title,
+    defaultTitle: "Most Used Languages",
     width,
     height,
     colors: {

src/cards/wakatime-card.js

@@ -59,6 +59,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     bg_color,
     theme = "default",
     hide_progress,
+    custom_title,
   } = options;
 
   const lheight = parseInt(line_height, 10);
@@ -99,7 +100,8 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   });
 
   const card = new Card({
-    title: "Wakatime Week Stats",
+    customTitle: custom_title,
+    defaultTitle: "Wakatime Week Stats",
     width: 495,
     height,
     colors: {

src/common/Card.js

@@ -1,4 +1,4 @@
-const { FlexLayout } = require("../common/utils");
+const { FlexLayout, encodeHTML } = require("../common/utils");
 const { getAnimations } = require("../getStyles");
 
 class Card {
@@ -6,7 +6,8 @@ class Card {
     width = 100,
     height = 100,
     colors = {},
-    title = "",
+    customTitle,
+    defaultTitle = "",
     titlePrefixIcon,
   }) {
     this.width = width;
@@ -17,7 +18,11 @@ class Card {
 
     // returns theme based colors with proper overrides and defaults
     this.colors = colors;
-    this.title = title;
+    this.title =
+      customTitle !== undefined
+        ? encodeHTML(customTitle)
+        : encodeHTML(defaultTitle);
+
     this.css = "";
 
     this.paddingX = 25;

tests/card.test.js

@@ -28,6 +28,18 @@ describe("Card", () => {
     );
   });
 
+  it("should have a custom title", () => {
+    const card = new Card({
+      customTitle: "custom title",
+      defaultTitle: "default title",
+    });
+
+    document.body.innerHTML = card.render(``);
+    expect(queryByTestId(document.body, "card-title")).toHaveTextContent(
+      "custom title",
+    );
+  });
+
   it("should hide title", () => {
     const card = new Card({});
     card.setHideTitle(true);