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

src/common/I18n.js

@@ -0,0 +1,21 @@
+class I18n {
+  constructor({ locale, translations }) {
+    this.locale = locale;
+    this.translations = translations;
+    this.fallbackLocale = "en";
+  }
+
+  t(str) {
+    if (!this.translations[str]) {
+      throw new Error(`${str} Translation string not found`);
+    }
+
+    if (!this.translations[str][this.locale || this.fallbackLocale]) {
+      throw new Error(`${str} Translation locale not found`);
+    }
+
+    return this.translations[str][this.locale || this.fallbackLocale];
+  }
+}
+
+module.exports = I18n;

src/common/utils.js

@@ -188,6 +188,12 @@ class CustomError extends Error {
   static USER_NOT_FOUND = "USER_NOT_FOUND";
 }
 
+function isLocaleAvailable(locale) {
+  return ["cn", "de", "en", "es", "fr", "it", "ja", "kr", "pt-br"].includes(
+    locale.toLowerCase(),
+  );
+}
+
 module.exports = {
   renderError,
   kFormatter,
@@ -201,6 +207,7 @@ module.exports = {
   getCardColors,
   clampValue,
   wrapTextMultiline,
+  isLocaleAvailable,
   logger,
   CONSTANTS,
   CustomError,

src/translations.js

@@ -0,0 +1,143 @@
+const { encodeHTML } = require("./common/utils");
+
+const statCardLocales = ({ name, apostrophe }) => {
+  return {
+    "statcard.title": {
+      cn: `${encodeHTML(name)}的GitHub统计`,
+      de: `${encodeHTML(name) + apostrophe} GitHub-Statistiken`,
+      en: `${encodeHTML(name)}'${apostrophe} GitHub Stats`,
+      es: `Estadísticas de GitHub de ${encodeHTML(name)}`,
+      fr: `Statistiques GitHub de ${encodeHTML(name)}`,
+      it: `Statistiche GitHub di ${encodeHTML(name)}`,
+      ja: `${encodeHTML(name)}のGitHub統計`,
+      kr: `${encodeHTML(name)}의 GitHub 통계`,
+      "pt-br": `Estatísticas do GitHub de ${encodeHTML(name)}`,
+    },
+    "statcard.totalstars": {
+      cn: "总星数",
+      de: "Sterne Insgesamt",
+      en: "Total Stars",
+      es: "Estrellas totales",
+      fr: "Total d'étoiles",
+      it: "Stelle totali",
+      ja: "星の合計",
+      kr: "총 별",
+      "pt-br": "Total de estrelas",
+    },
+    "statcard.commits": {
+      cn: "总承诺",
+      de: "Anzahl Commits",
+      en: "Total Commits",
+      es: "Compromisos totales",
+      fr: "Total des engagements",
+      it: "Commit totali",
+      ja: "総コミット",
+      kr: "총 커밋",
+      "pt-br": "Total de compromissos",
+    },
+    "statcard.prs": {
+      cn: "总公关",
+      de: "PRs Insgesamt",
+      en: "Total PRs",
+      es: "RP totales",
+      fr: "Total des PR",
+      it: "PR totali",
+      ja: "合計PR",
+      kr: "총 PR",
+      "pt-br": "Total de PRs",
+    },
+    "statcard.issues": {
+      cn: "总发行量",
+      de: "Anzahl Issues",
+      en: "Total Issues",
+      es: "Problemas totales",
+      fr: "Nombre total de problèmes",
+      it: "Segnalazioni totali",
+      ja: "総問題",
+      kr: "총 문제",
+      "pt-br": "Total de problemas",
+    },
+    "statcard.contribs": {
+      cn: "有助于",
+      de: "Beigetragen zu",
+      en: "Contributed to",
+      es: "Contribuido a",
+      fr: "Contribué à",
+      it: "Ha contribuito a",
+      ja: "に貢献しました",
+      kr: "에 기여하다",
+      "pt-br": "Contribuiu para",
+    },
+  };
+};
+
+const repoCardLocales = {
+  "repocard.template": {
+    cn: "模板",
+    de: "Vorlage",
+    en: "Template",
+    es: "Modelo",
+    fr: "Modèle",
+    it: "Template",
+    ja: "テンプレート",
+    kr: "주형",
+    "pt-br": "Modelo",
+  },
+  "repocard.archived": {
+    cn: "已封存",
+    de: "Archiviert",
+    en: "Archived",
+    es: "Archivé",
+    fr: "Archivé",
+    it: "Archiviata",
+    ja: "アーカイブ済み",
+    kr: "보관 됨",
+    "pt-br": "Arquivada",
+  },
+};
+
+const langCardLocales = {
+  "langcard.title": {
+    cn: "最常用的语言",
+    de: "Meist verwendete Sprachen",
+    en: "Most Used Languages",
+    es: "Idiomas más usados",
+    fr: "Langues les plus utilisées",
+    it: "Linguaggi più utilizzati",
+    ja: "最もよく使われる言語",
+    kr: "가장 많이 사용되는 언어",
+    "pt-br": "Línguas Mais Usadas",
+  },
+};
+
+const wakatimeCardLocales = {
+  "wakatimecard.title": {
+    cn: "Wakatime周统计",
+    de: "Wakatime Wochen Status",
+    en: "Wakatime Week Stats",
+    es: "Estadísticas de la semana de Wakatime",
+    fr: "Statistiques de la semaine Wakatime",
+    it: "Statistiche della settimana di Wakatime",
+    ja: "ワカタイムウィーク統計",
+    kr: "Wakatime 주간 통계",
+    "pt-br": "Estatísticas da semana Wakatime",
+  },
+  "wakatimecard.nocodingactivity": {
+    cn: "本周没有编码活动",
+    de: "Keine Aktivitäten in dieser Woche",
+    en: "No coding activity this week",
+    es: "No hay actividad de codificación esta semana",
+    fr: "Aucune activité de codage cette semaine",
+    it: "Nessuna attività in questa settimana",
+    ja: "今週のコーディング活動はありません",
+    kr: "이번 주 코딩 활동 없음",
+    "pt-br": "Nenhuma atividade de codificação esta semana",
+  },
+};
+
+module.exports = {
+  statCardLocales,
+  repoCardLocales,
+  langCardLocales,
+  wakatimeCardLocales,
+};