Update readme.md

Transfer branch from my fork to main repo

readme.md

@@ -80,9 +80,6 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
 
 # Features
 
--   [Getting Started](#getting-started)
-    -   [GitHub Actions](#github-actions-recommended)
-    -   [Community Deployment](#community-deployment)
 -   [GitHub Stats Card](#github-stats-card)
 -   [GitHub Extra Pins](#github-extra-pins)
 -   [Top Languages Card](#top-languages-card)
@@ -97,141 +94,17 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
     -   [Wakatime Card Exclusive Option](#wakatime-card-exclusive-options)
 -   [Deploy Yourself](#deploy-on-your-own-vercel-instance)
     -   [Keep your fork up to date](#keep-your-fork-up-to-date)
-    
-# Getting Started
 
-## GitHub Actions (Recommended)
+# GitHub Stats Card
 
-Using GitHub Actions over the community deployment is recommended because it provides more accurate stats and 100% uptime. Simply copy-paste the following into the `/.github/workflows/grs.yml` file in your README repo (`USERNAME/USERNAME`).
+Copy-paste this into your markdown content, and that is it. Simple!
 
-```yml
-name: GitHub Readme Stats
-on:
-  workflow_dispatch:
-  schedule:
-  - cron: 0 * * * *
-
-jobs:
-  grs:
-    permissions: write-all
-    runs-on: ubuntu-latest
-    name: Generate Stats
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Generate Stats
-        uses: Zo-Bro-23/grs-action@v1
-        id: generate
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          options: 'username=${{ github.repository_owner }}'
-      - name: Push
-        uses: crazy-max/ghaction-github-pages@v3
-        with:
-          target_branch: grs
-          build_dir: grs
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-```
-
-If you want to generate multiple stats, such as top languages, wakatime, etc, you can use the following code.
-
-```yml
-name: GitHub Readme Stats
-on:
-  workflow_dispatch:
-  schedule:
-  - cron: 0 * * * *
-
-jobs:
-  stats:
-    permissions: write-all
-    runs-on: ubuntu-latest
-    name: Stats Card
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Generate Stats
-        uses: Zo-Bro-23/grs-action@v1
-        id: generate
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          options: 'username=${{ github.repository_owner }}'
-      - uses: actions/upload-artifact@master
-        with:
-          name: stats
-          path: grs
-  top-langs:
-    permissions: write-all
-    runs-on: ubuntu-latest
-    name: Top Languages Card
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Generate Top Languages
-        uses: Zo-Bro-23/grs-action@v1
-        id: generate
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          options: 'username=${{ github.repository_owner }}'
-          card: 'top-langs'
-      - uses: actions/upload-artifact@master
-        with:
-          name: top-langs
-          path: grs
-  push:
-    permissions: write-all
-    runs-on: ubuntu-latest
-    name: Push
-    needs: [stats, top-langs]
-    steps:
-      - uses: actions/download-artifact@master
-        with:
-          name: stats
-          path: grs
-      - uses: actions/download-artifact@master
-        with:
-          name: top-langs
-          path: grs
-      - name: Push
-        uses: crazy-max/ghaction-github-pages@v3
-        with:
-          target_branch: grs
-          build_dir: grs
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-```
-
-You can now include the stats in your README by using the following markdown code (replace `USERNAME` with your GitHub username).
-
-```md
-[![Your GitHub stats](https://github.com/USERNAME/USERNAME/raw/grs/stats.svg)](https://github.com/anuraghazra/github-readme-stats)
-```
-
-You can also enable GitHub Pages on the `grs` branch (root) and use that URL (replace `GH_PAGES_URL` with your GitHub Pages URL).
-
-```md
-[![Your GitHub stats](https://GH_PAGES_URL/stats.svg)](https://github.com/anuraghazra/github-readme-stats)
-```
-
-The GitHub Action accepts the following inputs:
-- `token` - `REQUIRED` - Your GitHub Personal Access Token (PAT), or any other token that GitHub accepts.
-- `options` - `REQUIRED` - Any customization options. More below. (This is the same as the query string you would pass to the API if using the community deployment)
-- `card` - The type of card to generate. `repo`, `top-langs`, or `wakatime` (leave empty for stats card).
-- `path` - Output path for SVG file. Relative path; include filename with `.svg`.
-- `fetch_multipage` - Experimental feature that gives more accurate stats if you have >100 repos.
-
-## Community Deployment
-Copy-paste the following markdown code. Change the `?username=` value to your GitHub username.
+Change the `?username=` value to your GitHub username.
 
 ```md
 [![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
-Other cards can be included by using `/api/top-langs`, `/api/pin`, or `/api/wakatime`. More customization options can be added by using query parameters (`&option1=value1&option2=value2&...`).
-
-# GitHub Stats Card
-
 > **Note**
 > Available ranks are S+ (top 1%), S (top 25%), A++ (top 45%), A+ (top 60%), and B+ (everyone). The values are calculated by using the [cumulative distribution function](https://en.wikipedia.org/wiki/Cumulative_distribution_function) using commits, contributions, issues, stars, pull requests, followers, and owned repositories. The implementation can be investigated at [src/calculateRank.js](./src/calculateRank.js).
 
@@ -242,7 +115,7 @@ You can pass a query parameter `&hide=` to hide any specific stats with comma-se
 > Options: `&hide=stars,commits,prs,issues,contribs`
 
 ```md
-?username=anuraghazra&hide=contribs,prs
+![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,prs)
 ```
 
 ### Adding private contributions count to total commits count
@@ -255,7 +128,7 @@ You can add the count of all your private contributions to the total commits cou
 > Options: `&count_private=true`
 
 ```md
-?username=anuraghazra&count_private=true
+![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&count_private=true)
 ```
 
 ### Showing icons
@@ -263,7 +136,7 @@ You can add the count of all your private contributions to the total commits cou
 To enable icons, you can pass `show_icons=true` in the query param, like so:
 
 ```md
-?username=anuraghazra&show_icons=true
+![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
 ```
 
 ### Themes
@@ -273,7 +146,7 @@ With inbuilt themes, you can customize the look of the card without doing any [m
 Use `&theme=THEME_NAME` parameter like so :
 
 ```md
-?username=anuraghazra&show_icons=true&theme=radical
+![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
 ```
 
 #### All inbuilt themes
@@ -296,7 +169,7 @@ Since GitHub will re-upload the cards and serve them from their [CDN](https://do
 We have included a `transparent` theme that has a transparent background. This theme is optimized to look good on GitHub's dark and light default themes. You can enable this theme using the `&theme=transparent` parameter like so:
 
 ```md
-?username=anuraghazra&show_icons=true&theme=transparent
+![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent)
 ```
 
 <details>
@@ -311,7 +184,7 @@ We have included a `transparent` theme that has a transparent background. This t
 You can use the `bg_color` parameter to make any of [the available themes](./themes/README.md) transparent. This is done by setting the `bg_color` to a colour with a transparent alpha channel (i.e. `bg_color=00000000`):
 
 ```md
-?username=anuraghazra&show_icons=true&bg_color=00000000
+![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000)
 ```
 
 <details>
@@ -326,8 +199,8 @@ You can use the `bg_color` parameter to make any of [the available themes](./the
 You can use [GitHub's theme context](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) tags to switch the theme based on the user GitHub theme automatically. This is done by appending `#gh-dark-mode-only` or `#gh-light-mode-only` to the end of an image URL. This tag will define whether the image specified in the markdown is only shown to viewers using a light or a dark GitHub theme:
 
 ```md
-[![Anurag's GitHub stats-Dark](https://DARK_SVG_URL/#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
-[![Anurag's GitHub stats-Light](https://LIGHT_SVG_URL/#gh-light-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
+[![Anurag's GitHub stats-Dark](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
+[![Anurag's GitHub stats-Light](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=default#gh-light-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
 ```
 
 <details>
@@ -345,14 +218,14 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1
 ```html
 <picture>
 <source 
-  srcset="https://DARK_SVG_URL/"
+  srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
   media="(prefers-color-scheme: dark)"
 />
 <source
-  srcset="https://LIGHT_SVG_URL/"
+  srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true"
   media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
 />
-<img src="https://DEFAULT_SVG_URL/" />
+<img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true" />
 </picture>
 ```
 
@@ -375,7 +248,7 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1
 
 ### Customization
 
-You can customize the appearance of your cards however you wish with these parameters.
+You can customize the appearance of your `Stats Card` or `Repo Card` however you wish with URL parameters.
 
 #### Common Options
 
@@ -391,7 +264,7 @@ You can customize the appearance of your cards however you wish with these param
 -   `border_radius` - Corner rounding on the card. Default: `4.5`.
 
 > **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 4 hours (14400 seconds). Also, note that the cache is clamped to a minimum of 4 hours and a maximum of 24 hours. This is why we recommend using our GitHub Action :)
+> 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 4 hours (14400 seconds). Also, note that the cache is clamped to a minimum of 4 hours and a maximum of 24 hours.
 
 ##### Gradient in bg_color
 
@@ -461,7 +334,13 @@ Yay! You are no longer limited to 6 pinned repositories.
 
 ### Usage
 
-Use the `api/pin` endpoint with the API or the `card: 'repo'` option with the GitHub Action.
+Copy-paste this code into your readme and change the links.
+
+Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
+
+```md
+[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)
+```
 
 ### Demo
 
@@ -476,18 +355,24 @@ Use [show_owner](#customization) variable to include the repo's owner username
 The top languages card shows a GitHub user's most frequently used top language.
 
 > **Note**
-> Top Languages does not indicate skill level or anything like that; it's a GitHub metric to determine which languages have the most code on GitHub.
+> Top Languages does not indicate my skill level or anything like that; it's a GitHub metric to determine which languages have the most code on GitHub. It is a new feature of github-readme-stats.
 
 ### Usage
 
-Use the `api/top-langs` endpoint with the API or the `card: 'top-langs'` option with the GitHub Action.
+Copy-paste this code into your readme and change the links.
+
+Endpoint: `api/top-langs?username=anuraghazra`
+
+```md
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
+```
 
 ### Exclude individual repositories
 
 You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repositories.
 
 ```md
-?username=anuraghazra&exclude_repo=github-readme-stats,anuraghazra.github.io
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&exclude_repo=github-readme-stats,anuraghazra.github.io)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Hide individual languages
@@ -495,7 +380,7 @@ You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repo
 You can use `&hide=language1,language2` parameter to hide individual languages.
 
 ```md
-?username=anuraghazra&hide=javascript,html
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide=javascript,html)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Show more languages
@@ -503,7 +388,7 @@ You can use `&hide=language1,language2` parameter to hide individual languages.
 You can use the `&langs_count=` option to increase or decrease the number of languages shown on the card. Valid values are integers between 1 and 10 (inclusive), and the default is 5.
 
 ```md
-?username=anuraghazra&langs_count=8
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&langs_count=8)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Compact Language Card Layout
@@ -511,7 +396,7 @@ You can use the `&langs_count=` option to increase or decrease the number of lan
 You can use the `&layout=compact` option to change the card design.
 
 ```md
-?username=anuraghazra&layout=compact
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Hide Progress Bars
@@ -519,7 +404,7 @@ You can use the `&layout=compact` option to change the card design.
 You can use the `&hide_progress=true` option to hide the percentages and the progress bars (layout will be automatically set to `compact`).
 
 ```md
-?username=anuraghazra&hide_progress=true
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Demo
@@ -536,27 +421,15 @@ You can use the `&hide_progress=true` option to hide the percentages and the pro
 
 # Wakatime Week Stats
 
-### Usage
-
-Use the `api/wkatime` endpoint with the API or the `card: 'wakatime'` option with the GitHub Action.
-
 Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
 
 ```md
-?username=willianrod
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 > **Note**:
 > Please be aware that we currently only show data from Wakatime profiles that are public.
 
-### Compact Wakatime Card Layout
-
-You can use the `&layout=compact` option to change the card design.
-
-```md
-?username=willianrod&layout=compact
-```
-
 ### Demo
 
 [![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
@@ -629,14 +502,14 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
 
 ```html
 <a href="https://github.com/anuraghazra/github-readme-stats">
-  <img align="center" src="https://SVG_URL/" />
+  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />
 </a>
 <a href="https://github.com/anuraghazra/convoychat">
-  <img align="center" src="https://SVG_URL/" />
+  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" />
 </a>
 ```
 
-## Deploy your own Vercel instance
+## Deploy on your own Vercel instance
 
 #### :film_projector: [Check Out Step By Step Video Tutorial By @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)
 
@@ -675,7 +548,7 @@ Since the GitHub API only allows 5k requests per hour, my `https://github-readme
 
 ### Keep your fork up to date
 
-You can keep your fork, and thus your private Vercel instance up to date with the upstream using GitHub's [Sync Fork button](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork). You can also use the [pull](https://github.com/wei/pull) package created by [@wei](https://github.com/wei) to automate this process.
+You can keep your fork, and thus your private Vercel instance up to date with the upstream using GitHubs' [Sync Fork button](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork). You can also use the [pull](https://github.com/wei/pull) package created by [@wei](https://github.com/wei) to automate this process.
 
 ## :sparkling_heart: Support the project
 

src/cards/repo-card.js

@@ -87,16 +87,6 @@ const iconWithLabel = (icon, label, testid) => {
  * @returns {string} Repository card SVG object.
  */
 const renderRepoCard = (repo, options = {}) => {
-  const {
-    name,
-    nameWithOwner,
-    description,
-    primaryLanguage,
-    isArchived,
-    isTemplate,
-    starCount,
-    forkCount,
-  } = repo;
   const {
     hide_border = false,
     title_color,
@@ -109,6 +99,42 @@ const renderRepoCard = (repo, options = {}) => {
     border_color,
     locale,
   } = options;
+  
+  const i18n = new I18n({
+    locale,
+    translations: repoCardLocales,
+  });
+  
+  const colors = getCardColors({
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    border_color,
+    theme,
+  });
+  
+  const {
+    name,
+    nameWithOwner,
+    description,
+    primaryLanguage,
+    isArchived,
+    isTemplate,
+    starCount,
+    forkCount,
+  } = repo;
+  
+  const highlight = repo.highlight
+        ? // @ts-ignore
+          getBadgeSVG(repo.highlight, colors.textColor)
+        : isTemplate
+        ? // @ts-ignore
+          getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
+        : isArchived
+        ? // @ts-ignore
+          getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
+        : ""
 
   const lineHeight = 10;
   const header = show_owner ? nameWithOwner : name;
@@ -125,27 +151,25 @@ 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 colors = getCardColors({
-    title_color,
-    icon_color,
-    text_color,
-    bg_color,
-    border_color,
-    theme,
-  });
 
   const svgLanguage = primaryLanguage
     ? createLanguageNode(langName, langColor)
     : "";
-
-  const totalStars = kFormatter(starCount);
-  const totalForks = kFormatter(forkCount);
+  
+  let totalStars
+  let totalForks
+  if (isNaN(starCount)) {
+    totalStars = starCount;
+  } else {
+    totalStars = kFormatter(starCount);
+  }
+  if (isNaN(forkCount)) {
+    totalForks = forkCount;
+  } else {
+    totalForks = kFormatter(forkCount);
+  }
+  
   const svgStars = iconWithLabel(icons.star, totalStars, "stargazers");
   const svgForks = iconWithLabel(icons.fork, totalForks, "forkcount");
 
@@ -180,15 +204,7 @@ const renderRepoCard = (repo, options = {}) => {
   `);
 
   return card.render(`
-    ${
-      isTemplate
-        ? // @ts-ignore
-          getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
-        : isArchived
-        ? // @ts-ignore
-          getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
-        : ""
-    }
+    ${highlight}
 
     <text class="description" x="25" y="-5">
       ${descriptionSvg}

src/cards/stats-card.js

@@ -40,7 +40,12 @@ const createTextNode = ({
   shiftValuePos,
   bold,
 }) => {
-  const kValue = kFormatter(value);
+  let kValue
+  if (isNaN(value)) {
+    kValue = value;
+  } else {
+    kValue = kFormatter(value);
+  }
   const staggerDelay = (index + 3) * 150;
 
   const labelOffset = showIcons ? `x="25"` : "";
@@ -75,15 +80,6 @@ const createTextNode = ({
  * @returns {string} The stats card SVG object.
  */
 const renderStatsCard = (stats = {}, options = { hide: [] }) => {
-  const {
-    name,
-    totalStars,
-    totalCommits,
-    totalIssues,
-    totalPRs,
-    contributedTo,
-    rank,
-  } = stats;
   const {
     hide = [],
     show_icons = false,
@@ -106,6 +102,37 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     locale,
     disable_animations = false,
   } = options;
+  
+  const name = stats.name || "GitHub User"
+  
+  const apostrophe = ["x", "s"].includes(name.slice(-1).toLocaleLowerCase())
+    ? ""
+    : "s";
+  
+  const i18n = new I18n({
+    locale,
+    translations: statCardLocales({ name, apostrophe }),
+  });
+  
+  const {
+    totalStars = "2018",
+    totalCommits = "29019",
+    totalIssues = "203",
+    totalPRs = "127",
+    contributedTo = "232",
+    rank = {
+      level: "S",
+      score: 10
+    },
+    starsTitle = i18n.t("statcard.totalstars"),
+    commitsTitle = `${i18n.t("statcard.commits")}${
+        include_all_commits ? "" : ` (${new Date().getFullYear()})`
+      }`,
+    issuesTitle = i18n.t("statcard.issues"),
+    PRsTitle = i18n.t("statcard.prs"),
+    contribsTitle = i18n.t("statcard.contribs") + " (last year)",
+    title = i18n.t("statcard.title"),
+  } = stats;
 
   const lheight = parseInt(String(line_height), 10);
 
@@ -121,45 +148,35 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
       theme,
     });
 
-  const apostrophe = ["x", "s"].includes(name.slice(-1).toLocaleLowerCase())
-    ? ""
-    : "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: i18n.t("statcard.totalstars"),
+      label: starsTitle,
       value: totalStars,
       id: "stars",
     },
     commits: {
       icon: icons.commits,
-      label: `${i18n.t("statcard.commits")}${
-        include_all_commits ? "" : ` (${new Date().getFullYear()})`
-      }`,
+      label: commitsTitle,
       value: totalCommits,
       id: "commits",
     },
     prs: {
       icon: icons.prs,
-      label: i18n.t("statcard.prs"),
+      label: PRsTitle,
       value: totalPRs,
       id: "prs",
     },
     issues: {
       icon: icons.issues,
-      label: i18n.t("statcard.issues"),
+      label: issuesTitle,
       value: totalIssues,
       id: "issues",
     },
     contribs: {
       icon: icons.contribs,
-      label: i18n.t("statcard.contribs") + " (last year)",
+      label: contribsTitle,
       value: contributedTo,
       id: "contribs",
     },
@@ -215,7 +232,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   });
 
   const calculateTextWidth = () => {
-    return measureText(custom_title ? custom_title : i18n.t("statcard.title"));
+    return measureText(custom_title ? custom_title : title);
   };
 
   /*
@@ -241,7 +258,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
 
   const card = new Card({
     customTitle: custom_title,
-    defaultTitle: i18n.t("statcard.title"),
+    defaultTitle: title,
     width,
     height,
     border_radius,
@@ -306,11 +323,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const labels = Object.keys(STATS)
     .filter((key) => !hide.includes(key))
     .map((key) => {
-      if (key === "commits") {
-        return `${i18n.t("statcard.commits")} ${
-          include_all_commits ? "" : `in ${new Date().getFullYear()}`
-        } : ${totalStars}`;
-      }
       return `${STATS[key].label}: ${STATS[key].value}`;
     })
     .join(", ");

src/cards/top-languages-card.js

@@ -47,6 +47,7 @@ const getLongestLang = (arr) =>
  * @param {number} props.index Index of the programming language.
  * @returns {string} Programming language SVG node.
  */
+
 const createProgressTextNode = ({ width, color, name, progress, index }) => {
   const staggerDelay = (index + 3) * 150;
   const paddingRight = 95;
@@ -56,7 +57,7 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => {
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms">
       <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
-      <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
+      <text x="${progressTextX}" y="34" class="lang-name">${text || `${progress}%`}</text>
       ${createProgressNode({
         x: 0,
         y: 25,
@@ -89,7 +90,7 @@ const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => {
     <g class="stagger" style="animation-delay: ${staggerDelay}ms">
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${lang.name} ${hideProgress ? "" : percentage + "%"}
+        ${lang.name} ${hideProgress ? "" : (lang.text || `${percentage}%`)}
       </text>
     </g>
   `;
@@ -126,7 +127,7 @@ const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
 
   const percent = ((longestLang.size / totalSize) * 100).toFixed(2);
   const minGap = 150;
-  const maxGap = 20 + measureText(`${longestLang.name} ${percent}%`, 11);
+  const maxGap = 20 + measureText(`${longestLang.name} ${longestLang.text || `${percent}%`}`, 11);
   return flexLayout({
     items: layouts,
     gap: maxGap < minGap ? minGap : maxGap,
@@ -149,6 +150,7 @@ const renderNormalLayout = (langs, width, totalLanguageSize) => {
         name: lang.name,
         color: lang.color || DEFAULT_LANG_COLOR,
         progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
+        text: lang.text,
         index,
       });
     }),
@@ -278,6 +280,12 @@ const useLanguages = (topLangs, hide, langs_count) => {
  * @returns {string} Language card SVG object.
  */
 const renderTopLanguages = (topLangs, options = {}) => {
+  const locale = options.locale
+  const i18n = new I18n({
+    locale,
+    translations: langCardLocales,
+  });
+  
   const {
     hide_title = false,
     hide_border,
@@ -290,18 +298,13 @@ const renderTopLanguages = (topLangs, options = {}) => {
     theme,
     layout,
     custom_title,
-    locale,
     langs_count = DEFAULT_LANGS_COUNT,
     border_radius,
     border_color,
+    title = i18n.t("langcard.title"),
     disable_animations,
   } = options;
 
-  const i18n = new I18n({
-    locale,
-    translations: langCardLocales,
-  });
-
   const { langs, totalLanguageSize } = useLanguages(
     topLangs,
     hide,
@@ -342,7 +345,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
 
   const card = new Card({
     customTitle: custom_title,
-    defaultTitle: i18n.t("langcard.title"),
+    defaultTitle: title,
     width,
     height,
     border_radius,