feat: card locale translations (#509)

* Add Card Translations

* Add tests and documentation for `?lang` option

* Card Translations: update Italian

* Run Prettier

* Correct German Translations.

Co-authored-by: schmelto <30869493+schmelto@users.noreply.github.com>

* refactor: added i18n class to manage translation logic & improved code

* Make the new src/translations.js more concise

* Update translations.js

Co-authored-by: schmelto <30869493+schmelto@users.noreply.github.com>

* Revert 4175484d69289e4ee7283ab968b8e71c3c5d77df

* fix: overlap because of language length

Co-authored-by: lrusso96 <russo.1699981@studenti.uniroma1.it>
Co-authored-by: schmelto <30869493+schmelto@users.noreply.github.com>
Co-authored-by: Anurag <hazru.anurag@gmail.com>

src/cards/repo-card.js

@@ -1,3 +1,4 @@
+const toEmoji = require("emoji-name-map");
 const {
   kFormatter,
   encodeHTML,
@@ -5,9 +6,10 @@ const {
   FlexLayout,
   wrapTextMultiline,
 } = require("../common/utils");
-const icons = require("../common/icons");
+const I18n = require("../common/I18n");
 const Card = require("../common/Card");
-const toEmoji = require("emoji-name-map");
+const icons = require("../common/icons");
+const { repoCardLocales } = require("../translations");
 
 const renderRepoCard = (repo, options = {}) => {
   const {
@@ -28,6 +30,7 @@ const renderRepoCard = (repo, options = {}) => {
     bg_color,
     show_owner,
     theme = "default_repocard",
+    locale,
   } = options;
 
   const header = show_owner ? nameWithOwner : name;
@@ -50,6 +53,11 @@ const renderRepoCard = (repo, options = {}) => {
   const height =
     (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
 
+  const i18n = new I18n({
+    locale,
+    translations: repoCardLocales,
+  });
+
   // returns theme based colors with proper overrides and defaults
   const { titleColor, textColor, iconColor, bgColor } = getCardColors({
     title_color,
@@ -63,7 +71,7 @@ const renderRepoCard = (repo, options = {}) => {
   const totalForks = kFormatter(forkCount);
 
   const getBadgeSVG = (label) => `
-    <g data-testid="badge" class="badge" transform="translate(320, 38)">
+    <g data-testid="badge" class="badge" transform="translate(320, -18)">
       <rect stroke="${textColor}" stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
       <text
         x="23" y="-5"
@@ -132,9 +140,9 @@ const renderRepoCard = (repo, options = {}) => {
   return card.render(`
     ${
       isTemplate
-        ? getBadgeSVG("Template")
+        ? getBadgeSVG(i18n.t("repocard.template"))
         : isArchived
-        ? getBadgeSVG("Archived")
+        ? getBadgeSVG(i18n.t("repocard.archived"))
         : ""
     }
 

src/cards/stats-card.js

@@ -1,12 +1,9 @@
-const {
-  kFormatter,
-  getCardColors,
-  FlexLayout,
-  encodeHTML,
-} = require("../common/utils");
-const { getStyles } = require("../getStyles");
-const icons = require("../common/icons");
+const I18n = require("../common/I18n");
 const Card = require("../common/Card");
+const icons = require("../common/icons");
+const { getStyles } = require("../getStyles");
+const { statCardLocales } = require("../translations");
+const { kFormatter, getCardColors, FlexLayout } = require("../common/utils");
 
 const createTextNode = ({
   icon,
@@ -34,7 +31,7 @@ const createTextNode = ({
       <text class="stat bold" ${labelOffset} y="12.5">${label}:</text>
       <text 
         class="stat" 
-        x="${shiftValuePos ? (showIcons ? 200 : 170) : 150}" 
+        x="${(showIcons ? 140 : 120) + shiftValuePos}" 
         y="12.5" 
         data-testid="${id}"
       >${kValue}</text>
@@ -66,6 +63,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     bg_color,
     theme = "default",
     custom_title,
+    locale,
   } = options;
 
   const lheight = parseInt(line_height, 10);
@@ -79,17 +77,23 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     theme,
   });
 
+  const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s";
+  const i18n = new I18n({
+    locale,
+    translations: statCardLocales({ name, apostrophe }),
+  });
+
   // Meta data for creating text nodes with createTextNode function
   const STATS = {
     stars: {
       icon: icons.star,
-      label: "Total Stars",
+      label: i18n.t("statcard.totalstars"),
       value: totalStars,
       id: "stars",
     },
     commits: {
       icon: icons.commits,
-      label: `Total Commits${
+      label: `${i18n.t("statcard.commits")}${
         include_all_commits ? "" : ` (${new Date().getFullYear()})`
       }`,
       value: totalCommits,
@@ -97,24 +101,26 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     },
     prs: {
       icon: icons.prs,
-      label: "Total PRs",
+      label: i18n.t("statcard.prs"),
       value: totalPRs,
       id: "prs",
     },
     issues: {
       icon: icons.issues,
-      label: "Total Issues",
+      label: i18n.t("statcard.issues"),
       value: totalIssues,
       id: "issues",
     },
     contribs: {
       icon: icons.contribs,
-      label: "Contributed to",
+      label: i18n.t("statcard.contribs"),
       value: contributedTo,
       id: "contribs",
     },
   };
 
+  const isLongLocale = ["fr", "pt-br", "es"].includes(locale) === true;
+
   // filter out hidden stats defined by user & create the text nodes
   const statItems = Object.keys(STATS)
     .filter((key) => !hide.includes(key))
@@ -124,7 +130,8 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         ...STATS[key],
         index,
         showIcons: show_icons,
-        shiftValuePos: !include_all_commits,
+        shiftValuePos:
+          (!include_all_commits ? 50 : 20) + (isLongLocale ? 50 : 0),
       }),
     );
 
@@ -166,10 +173,9 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     progress,
   });
 
-  const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s";
   const card = new Card({
     customTitle: custom_title,
-    defaultTitle: `${encodeHTML(name)}'${apostrophe} GitHub Stats`,
+    defaultTitle: i18n.t("statcard.title"),
     width: 495,
     height,
     colors: {

src/cards/top-languages-card.js

@@ -1,6 +1,8 @@
 const Card = require("../common/Card");
 const { getCardColors, FlexLayout } = require("../common/utils");
 const { createProgressNode } = require("../common/createProgressNode");
+const { langCardLocales } = require("../translations");
+const I18n = require("../common/I18n");
 
 const createProgressTextNode = ({ width, color, name, progress }) => {
   const paddingRight = 95;
@@ -70,8 +72,14 @@ const renderTopLanguages = (topLangs, options = {}) => {
     theme,
     layout,
     custom_title,
+    locale,
   } = options;
 
+  const i18n = new I18n({
+    locale,
+    translations: langCardLocales,
+  });
+
   let langs = Object.values(topLangs);
   let langsToHide = {};
 
@@ -172,7 +180,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
 
   const card = new Card({
     customTitle: custom_title,
-    defaultTitle: "Most Used Languages",
+    defaultTitle: i18n.t("langcard.title"),
     width,
     height,
     colors: {

src/cards/wakatime-card.js

@@ -1,11 +1,13 @@
 const Card = require("../common/Card");
+const I18n = require("../common/I18n");
 const { getStyles } = require("../getStyles");
+const { wakatimeCardLocales } = require("../translations");
 const { getCardColors, FlexLayout } = require("../common/utils");
 const { createProgressNode } = require("../common/createProgressNode");
 
-const noCodingActivityNode = ({ color }) => {
+const noCodingActivityNode = ({ color, text }) => {
   return `
-    <text x="25" y="11" class="stat bold" fill="${color}">No coding activity this week</text>
+    <text x="25" y="11" class="stat bold" fill="${color}">${text}</text>
   `;
 };
 
@@ -60,8 +62,14 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     theme = "default",
     hide_progress,
     custom_title,
+    locale,
   } = options;
 
+  const i18n = new I18n({
+    locale,
+    translations: wakatimeCardLocales,
+  });
+
   const lheight = parseInt(line_height, 10);
 
   // returns theme based colors with proper overrides and defaults
@@ -101,7 +109,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 
   const card = new Card({
     customTitle: custom_title,
-    defaultTitle: "Wakatime Week Stats",
+    defaultTitle: i18n.t("wakatimecard.title"),
     width: 495,
     height,
     colors: {
@@ -126,7 +134,12 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
       ${FlexLayout({
         items: statItems.length
           ? statItems
-          : [noCodingActivityNode({ color: textColor })],
+          : [
+              noCodingActivityNode({
+                color: textColor,
+                text: i18n.t("wakatimecard.nocodingactivity"),
+              }),
+            ],
         gap: lheight,
         direction: "column",
       }).join("")}