convert image to base64 before rendering

Co-authored-by: Swarnendu <clickswarnendu123@gmail.com>

.eslintrc.json

@@ -195,7 +195,7 @@
         // "no-lonely-if": "warn",
         "no-mixed-spaces-and-tabs": "warn",
         "no-multiple-empty-lines": "warn",
-        // "no-negated-condition": "off",
+        "no-negated-condition": "warn",
         // "no-nested-ternary": "warn",
         // "no-new-object": "warn",
         // "no-plusplus": "off",

.github/workflows/codeql-analysis.yml

@@ -29,7 +29,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL

.github/workflows/deploy-prep.yml

@@ -10,7 +10,7 @@ jobs:
     if: github.repository == 'anuraghazra/github-readme-stats'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       - name: Deployment Prep
         run: python ./.github/workflows/deploy-prep.py
       - uses: stefanzweifel/git-auto-commit-action@8756aa072ef5b4a080af5dc8fef36c5d586e521d # v5.0.0

.github/workflows/e2e-test.yml

@@ -17,10 +17,10 @@ jobs:
         node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Setup Node
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm

.github/workflows/empty-issues-closer.yaml

@@ -27,10 +27,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       # NOTE: Retrieve issue templates.
-      - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Run empty issues closer action
-        uses: rickstaa/empty-issues-closer-action@e9e79c66b85961ebc9dc11493b65b6e4bb355ed0 # v1.1.28
+        uses: rickstaa/empty-issues-closer-action@af151e679df0e3b59cda0e10c43010556d6c5bff # v1.1.35
         env:
           github_token: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/generate-theme-doc.yml

@@ -29,10 +29,10 @@ jobs:
         node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Setup Node
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm

.github/workflows/ossf-analysis.yml

@@ -21,7 +21,7 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           persist-credentials: false
 

.github/workflows/preview-theme.yml

@@ -30,15 +30,15 @@ jobs:
         node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Setup Node
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm
 
-      - uses: bahmutov/npm-install@c46e3830503dcb831cf4aee3f26b4e6bce8cc9d2 # v1.8.35
+      - uses: bahmutov/npm-install@2509f13e8485d88340a789a3f7ca11aaac47c9fc # v1.8.36
         with:
           useLockFile: false
 

.github/workflows/prs-cache-clean.yml

@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Cleanup
         run: |

.github/workflows/stale-theme-pr-closer.yaml

@@ -36,15 +36,15 @@ jobs:
         node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Setup Node
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm
 
-      - uses: bahmutov/npm-install@c46e3830503dcb831cf4aee3f26b4e6bce8cc9d2 # v1.8.35
+      - uses: bahmutov/npm-install@2509f13e8485d88340a789a3f7ca11aaac47c9fc # v1.8.36
         with:
           useLockFile: false
 

.github/workflows/test.yml

@@ -18,10 +18,10 @@ jobs:
         node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Setup Node
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm

.github/workflows/top-issues-dashboard.yml

@@ -34,7 +34,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Run top issues action
-        uses: rickstaa/top-issues-action@a2f94d3653b3c2490e0d997c8ec4a5e7beba4c7d # v1.3.54
+        uses: rickstaa/top-issues-action@36df2af30c15ddf48558931420138890ed1b1708 # v1.3.61
         env:
           github_token: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -47,7 +47,3 @@ jobs:
           top_bugs: true
           top_features: true
           top_pull_requests: true
-          custom_pull_requests_label: themes
-          top_custom_pull_requests_label: ":star: top themes"
-          top_custom_pull_requests_label_description: Top themes
-          top_custom_pull_requests_label_colour: "#A23599"

.github/workflows/update-langs.yaml

@@ -36,10 +36,10 @@ jobs:
         node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Setup Node
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm

CONTRIBUTING.md

@@ -34,29 +34,18 @@ _(make sure you already have a [Vercel](https://vercel.com/) account)_
 2.  Fork the repository and clone the code to your local machine.
 3.  Run `npm install` in the repository root.
 4.  Run the command `vercel` in the root and follow the steps there.
-5.  Open `vercel.json` and set the maxDuration to 10.
+5.  Run the command `vercel dev` to start a development server at <http://localhost:3000>.
-6.  Create a `.env` file in the root of the directory.
+6.  The cards will then be available from this local endpoint (i.e. `http://localhost:3000/api?username=anuraghazra`).
-7.  In the .env file add a new variable named `PAT_1` with your [GitHub Personal Access Token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token).
-8.  Run the command `vercel dev` to start a development server at <https://localhost:3000>.
-9.  The cards will then be available from this local endpoint (i.e. `https://localhost:3000/api?username=anuraghazra`).
 
 > [!NOTE]\
 > You can debug the package code in [Vscode](https://code.visualstudio.com/) by using the [Node.js: Attach to process](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_setting-up-an-attach-configuration) debug option. You can also debug any tests using the [VSCode Jest extension](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest). For more information, see https://github.com/jest-community/vscode-jest/issues/912.
 
 ## Themes Contribution
 
-GitHub Readme Stats supports custom theming, and you can also contribute new themes!
+We're currently paused addition of new themes to decrease maintenance efforts. All pull requests related to new themes will be closed.
 
 > [!NOTE]\
-> If you are contributing your theme just because you are using it personally, then you can [customize the looks](./readme.md#customization) of your card with URL params instead.
+> If you are considering contributing your theme just because you are using it personally, then instead of adding it to our theme collection, you can use card [customization options](./readme.md#customization).
-
-> [!NOTE]\
-> Keep in mind that we already have a vast collection of different themes. To keep their number manageable, we began to add only themes supported by the community. Your pull request with theme addition will be merged once we get enough positive feedback from the community in the form of thumbs up :+1: emojis (see [#1935](https://github.com/anuraghazra/github-readme-stats/issues/1935#top-themes-prs)). We expect to see at least 10-15 thumbs up before making a decision to merge your pull request into the master branch. Remember that you can also support themes of other contributors that you liked to speed up their merge.
-
-> [!NOTE]\
-> Before submitting pull request, please make sure that your theme pass WCAG 2.0 level AA contrast ration test. You can use [this tool](https://webaim.org/resources/contrastchecker/) to check it.
-
-To contribute your theme you need to edit the [themes/index.js](./themes/index.js) file and add it at the end of the file.
 
 ## Translations Contribution
 
@@ -66,7 +55,7 @@ To contribute your language you need to edit the [src/translations.js](./src/tra
 
 ## Any contributions you make will be under the MIT Software License
 
-In short, when you submit changes, your submissions are understood to be under the same [MIT License](http://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern.
+In short, when you submit changes, your submissions are understood to be under the same [MIT License](https://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern.
 
 ## Report issues/bugs using GitHub's [issues](https://github.com/anuraghazra/github-readme-stats/issues)
 

api/pin.js

@@ -3,6 +3,7 @@ import { blacklist } from "../src/common/blacklist.js";
 import {
   clampValue,
   CONSTANTS,
+  getBase64URIFromImage,
   parseBoolean,
   renderError,
 } from "../src/common/utils.js";
@@ -24,6 +25,7 @@ export default async (req, res) => {
     locale,
     border_radius,
     border_color,
+    show_image,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -68,6 +70,10 @@ export default async (req, res) => {
       }, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
     );
 
+    repoData.stringifiedRepoImage = await getBase64URIFromImage(
+      repoData.openGraphImageUrl,
+    );
+
     return res.send(
       renderRepoCard(repoData, {
         hide_border: parseBoolean(hide_border),
@@ -80,6 +86,7 @@ export default async (req, res) => {
         border_color,
         show_owner: parseBoolean(show_owner),
         locale: locale ? locale.toLowerCase() : null,
+        show_image: parseBoolean(show_image),
       }),
     );
   } catch (err) {

docs/readme_cn.md

@@ -24,12 +24,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">

docs/readme_de.md

@@ -25,12 +25,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">
@@ -81,7 +75,7 @@
     - [Verbirg einzelne Sprachen](#verbirg-einzelne-sprachen)
     - [Kompaktes Sprachen-Karte Layout](#kompaktes-sprachen-karte-layout)
     - [Beispiel](#beispiel)
-- [Wakatime Wochen-Statistik](#wakatime-wochen-statistik)
+- [WakaTime Wochen-Statistik](#wakatime-wochen-statistik)
     - [Beispiel](#beispiel-1)
     - [Alle Beispiele](#alle-beispiele)
     - [Kleiner Tipp (Ausrichten der Repo-Karte)](#kleiner-tipp-ausrichten-der-repo-karte)
@@ -195,7 +189,7 @@ Du kannst mehrere, mit Kommas separierte, Werte in der bg_color Option angeben,
 - `layout` - Wechselt zwischen zwei verschiedenen Layouts: `default` & `compact`
 - `langs_count` - Begrenzt die Anzahl der angezeigten Sprachen auf der Karte
 - `api_domain` - Legt eine benutzerdefinierte API Domain fest, z.B. für [Hakatime](https://github.com/mujx/hakatime) oder [Wakapi](https://github.com/muety/wakapi)
-- `range` – Fragt eine andere Zeitspanne an, als jene, welche standardmäßig in Wakatime hinterlegt ist. Zum Beispiel `last_7_days`. Siehe [WakaTime API Dokumentation](https://wakatime.com/developers#stats).
+- `range` – Fragt eine andere Zeitspanne an, als jene, welche standardmäßig in WakaTime hinterlegt ist. Zum Beispiel `last_7_days`. Siehe [WakaTime API Dokumentation](https://wakatime.com/developers#stats).
 
 ---
 
@@ -266,23 +260,23 @@ Du kannst die `&layout=compact` Option nutzen, um das Kartendesign zu ändern.
 
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 
-# Wakatime Wochen-Statistik
+# WakaTime Wochen-Statistik
 
-Ändere `?username=` in den eigenen [Wakatime](https://wakatime.com)-Benutzernamen.
+Ändere `?username=` in den eigenen [WakaTime](https://wakatime.com)-Benutzernamen.
 
 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Beispiel
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
 
 - Kompaktes Layout
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 

docs/readme_es.md

@@ -25,12 +25,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Apoyado%20por-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Apoyado%20por-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">
@@ -84,7 +78,7 @@
     - [Mostrar más lenguajes](#mostrar-más-lenguajes)
     - [Diseño Compacto de Tarjeta de Lenguaje](#diseño-compacto-de-tarjeta-de-lenguaje)
     - [Ejemplo](#ejemplo-1)
-- [Estadísticas de la semana de Wakatime](#estadísticas-de-la-semana-de-wakatime)
+- [Estadísticas de la semana de WakaTime](#estadísticas-de-la-semana-de-wakatime)
     - [Ejemplo](#ejemplo-2)
     - [Todos los ejemplos](#todos-los-ejemplos)
     - [Consejo rápido (para alinear las tarjetas de repositorio)](#consejo-rápido-para-alinear-las-tarjetas-de-repositorio)
@@ -206,7 +200,7 @@ Puedes pasar mútliples valores separados por coma en la opción `bg_color` para
 > Los nombres de los lenguajes deben estar codificados para URLs, como se especifica en [Código porciento](https://es.wikipedia.org/wiki/C%C3%B3digo_porciento)
 > (es decir: `c++` debería convertirse en `c%2B%2B`,`jupyter notebook` debería convertirse en `jupyter%20notebook`, etc.)
 
-#### Opciones exclusivas de la Tarjeta de Wakatime:
+#### Opciones exclusivas de la Tarjeta de WakaTime:
 
 - `hide_title` - _(booleano)_
 - `line_height` - Establece el alto de línea entre texto _(número)_
@@ -298,23 +292,23 @@ Puedes usar la opción `& layout = compact` para cambiar el diseño de la tarjet
 
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 
-# Estadísticas de la semana de Wakatime
+# Estadísticas de la semana de WakaTime
 
-cambia el valor del parámetro `?username=` a tu username en [Wakatime](https://wakatime.com).
+cambia el valor del parámetro `?username=` a tu username en [WakaTime](https://wakatime.com).
 
 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Ejemplo
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
 
 - Diseño compacto
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 
@@ -362,9 +356,9 @@ Escoja cualquiera de los [temas por defecto](#themes)
 
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 
-- Tarjeta de Wakatime
+- Tarjeta de WakaTime
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 

docs/readme_fr.md

@@ -24,12 +24,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Supporté%20par-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Supporté%20par-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">

docs/readme_it.md

@@ -24,12 +24,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Supportato%20da-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Supportato%20da-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">

docs/readme_ja.md

@@ -24,12 +24,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">

docs/readme_kr.md

@@ -24,12 +24,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">
@@ -83,7 +77,7 @@
     - [표시할 언어 수 지정하기](#표시할-언어-수-지정하기)
     - [컴택트한 카드 레이아웃 설정하기](#컴택트한-카드-레이아웃-설정하기)
     - [미리보기](#미리보기-1)
-- [Wakatime 주간 통계](#wakatime-주간-통계)
+- [WakaTime 주간 통계](#wakatime-주간-통계)
     - [미리보기](#미리보기-2)
     - [전체 미리보기](#전체-미리보기)
     - [꿀팁 (저장소 핀 정렬하기)](#꿀팁-저장소-핀-정렬하기)
@@ -222,7 +216,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 > ( 예를 들면, `c++` 는 `c%2B%2B`, `jupyter notebook` 는 `jupyter%20notebook`, 등등. )
 > [urlencoder.org](https://www.urlencoder.org/) < 서비스를 이용하면 자동으로 생성할 수 있습니다.
 
-#### Wakatime 카드의 표시 제한 옵션:
+#### WakaTime 카드의 표시 제한 옵션:
 
 - `hide_title` - 타이틀 제외 _(boolean)_
 - `line_height` - 텍스트 간 줄 높이 설정(자간) _(number)_
@@ -314,12 +308,12 @@ _참고:
 
 [![언어 사용량 통계](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 
-# Wakatime 주간 통계
+# WakaTime 주간 통계
 
-`?username=` 속성의 값을 [Wakatime](https://wakatime.com) 계정의 사용자 명(닉네임)으로 바꿔주세요.
+`?username=` 속성의 값을 [WakaTime](https://wakatime.com) 계정의 사용자 명(닉네임)으로 바꿔주세요.
 
 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### 미리보기
@@ -378,9 +372,9 @@ _참고:
 
 [![언어 사용량 통계](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 
-- Wakatime 카드
+- WakaTime 카드
 
-[![Harlok 님의 Wakatime 카드](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok 님의 WakaTime 카드](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 

docs/readme_nl.md

@@ -24,12 +24,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">
@@ -83,7 +77,7 @@
     - [Laat meer programmeertalen zien](#laat-meer-programmeertalen-zien)
     - [Compacte Talen Kaart opmaak](#compacte-talen-kaart-opmaak)
     - [Demo](#demo-1)
-- [Wekelijkse Wakatime Statistieken](#wekelijkse-wakatime-statistieken)
+- [Wekelijkse WakaTime Statistieken](#wekelijkse-wakatime-statistieken)
     - [Demo](#demo-2)
     - [Alle demos](#alle-demos)
     - [Kleine tip (Verstel de repo kaart z'n positie)](#kleine-tip-verstel-de-repo-kaart-zn-positie)
@@ -208,7 +202,7 @@ Je kan meerdere komma verdeelde waarden in de bg_color optie geven om een kleure
 > (Oftewel: `c++` moet `c%2B%2B` worden, `jupyter notebook` moet `jupyter%20notebook` worden, enzovoort...)
 > Zie [urlencoder.org](https://www.urlencoder.org/) om dit automatisch te doen.
 
-#### Exclusieve opties voor Wakatime Kaart:
+#### Exclusieve opties voor WakaTime Kaart:
 
 - `hide_title` - _(boolean)_
 - `line_height` - Verandert de lijn hoogte tussen tekst _(nummer)_
@@ -299,19 +293,19 @@ Je kan de `&layout=compact` optie gebruiken om het kaart ontwerp aan te passen.
 
 [![Top programmeertalen](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 
-# Wekelijkse Wakatime Statistieken
+# Wekelijkse WakaTime Statistieken
 
-Verander de `?username=` waarde naar je [Wakatime](https://wakatime.com) gebruikersnaam.
+Verander de `?username=` waarde naar je [WakaTime](https://wakatime.com) gebruikersnaam.
 
 ```md
-[![Harlok's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Demo
 
-[![Harlok's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
-[![Harlok's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 
@@ -359,9 +353,9 @@ Kies uit de [standaard thema\'s](#themes)
 
 [![Top Programmeertalen](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 
-- Wakatime kaart
+- WakaTime kaart
 
-[![Harlok's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 

docs/readme_np.md

@@ -24,12 +24,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">
@@ -297,17 +291,17 @@ You can use the `&langs_count=` option to increase or decrease the number of lan
 
 # वाका समय वीक स्तट्स 
 
-Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
+Change the `?username=` value to your [WakaTime](https://wakatime.com) username.
 
 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ###  डेमो
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 
@@ -357,7 +351,7 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
 
 - वक समय कार्ड 
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 

docs/readme_pt-BR.md

@@ -24,12 +24,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Apoiado%20por-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Apoiado%20por-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">
@@ -81,7 +75,7 @@
     - [Ocultar linguagens individualmente](#ocultar-linguagens-individualmente)
     - [Layout de cartão de linguagens compacto](#layout-de-cartão-de-linguagens-compacto)
     - [Demonstração](#demonstração-1)
-- [Estatística semanal Wakatime](#estatística-semanal-wakatime)
+- [Estatística semanal WakaTime](#estatística-semanal-wakatime)
     - [Demonstração](#demonstração-2)
     - [Todas as demonstrações](#todas-as-demonstrações)
     - [Dica (Alinhandos os cartões de repositório)](#dica-alinhandos-os-cartões-de-repositório)
@@ -256,19 +250,19 @@ Utilize a opção `&layout=compact` para mudar o layout do cartão.
 
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 
-# Estatística semanal Wakatime
+# Estatística semanal WakaTime
 
-Altere o valor de `?username=` para o seu username do Wakatime.
+Altere o valor de `?username=` para o seu username do WakaTime.
 
 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Demonstração
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 

docs/readme_tr.md

@@ -24,12 +24,6 @@
     </a>
     <br />
     <br />
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=1227">
-      <img src="https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"/>
-    </a>
-    <a href="https://a.paddle.com/v2/click/16413/119403?link=2345">
-      <img src="https://img.shields.io/badge/Supported%20by-Node%20Cli.com%20%E2%86%92-gray.svg?colorA=61c265&colorB=4CAF50&style=for-the-badge"/>
-    </a>
   </p>
 
   <p align="center">
@@ -83,7 +77,7 @@
     - [Daha Fazla Dil Gösterin](#daha-fazla-dil-gösterin)
     - [Kompakt Dil Kartı Düzeni](#kompakt-dil-kartı-düzeni)
     - [Demo](#demo-1)
-- [Wakatime Haftalık İstatistikler](#wakatime-haftalık-i̇statistikler)
+- [WakaTime Haftalık İstatistikler](#wakatime-haftalık-i̇statistikler)
     - [Demo](#demo-2)
     - [Tüm Demolar](#tüm-demolar)
     - [Hızlı İpucu (Repo Kartları Hizlayın)](#hızlı-i̇pucu-repo-kartları-hizlayın)
@@ -208,7 +202,7 @@ bg_color içerisinde birden fazla rengi gradient olarak göstermek için virgül
 > (ör: `c++` yerine `c%2B%2B`, `jupyter notebook` yerine `jupyter%20notebook`, vb.)
 > [urlencoder.org](https://www.urlencoder.org/) adresini kullanarak otomatik olarak değerleri bu şekle çevirebilirsiniz.
 
-#### Wakatime Kart Exclusive Özellikler:
+#### WakaTime Kart Exclusive Özellikler:
 
 - `hide_title` - _(boolean)_
 - `line_height` - Satır aralığı yüksekliği _(number)_
@@ -298,23 +292,23 @@ Endpoint: `api/top-langs?username=mustafacagri`
 
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=mustafacagri&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 
-# Wakatime Haftalık İstatistikler
+# WakaTime Haftalık İstatistikler
 
-`?username=` değerini [Wakatime](https://wakatime.com)'daki kullanıcı adınızla değiştirin.
+`?username=` değerini [WakaTime](https://wakatime.com)'daki kullanıcı adınızla değiştirin.
 
 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Demo
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
 
 - Kompakt Düzen
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 
@@ -362,9 +356,9 @@ Endpoint: `api/top-langs?username=mustafacagri`
 
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 
-- Wakatime kart
+- WakaTime kart
 
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 
 ---
 

package.json

@@ -37,13 +37,13 @@
   "license": "MIT",
   "devDependencies": {
     "@actions/core": "^1.10.1",
-    "@actions/github": "^5.1.1",
+    "@actions/github": "^6.0.0",
     "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@uppercod/css-to-object": "^1.1.1",
     "axios-mock-adapter": "^1.22.0",
     "color-contrast-checker": "^2.1.0",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "hjson": "^3.2.2",
     "husky": "^8.0.3",
@@ -51,7 +51,7 @@
     "jest-bench": "^29.4.1",
     "jest-environment-jsdom": "^29.7.0",
     "js-yaml": "^4.1.0",
-    "lint-staged": "^14.0.1",
+    "lint-staged": "^15.0.2",
     "lodash.snakecase": "^4.1.1",
     "parse-diff": "^0.11.1",
     "prettier": "^3.0.3"

readme.md

@@ -24,6 +24,9 @@
     </a>
     <br />
     <br />
+    <a href="https://vercel.com?utm\_source=github\_readme\_stats\_team\&utm\_campaign=oss">
+      <img src="./powered-by-vercel.svg"/>
+    </a>
   </p>
 
   <p align="center">
@@ -106,7 +109,7 @@ Please visit [this link](https://give.do/fundraisers/stand-beside-the-victims-of
     - [Pie Chart Language Card Layout](#pie-chart-language-card-layout)
     - [Hide Progress Bars](#hide-progress-bars)
     - [Demo](#demo-2)
-- [Wakatime Stats Card](#wakatime-stats-card)
+- [WakaTime Stats Card](#wakatime-stats-card)
     - [Demo](#demo-3)
 - [All Demos](#all-demos)
   - [Quick Tip (Align The Cards)](#quick-tip-align-the-cards)
@@ -118,13 +121,16 @@ Please visit [this link](https://give.do/fundraisers/stand-beside-the-victims-of
   - [Keep your fork up to date](#keep-your-fork-up-to-date)
 - [:sparkling\_heart: Support the project](#sparkling_heart-support-the-project)
 
-# Important Notice <!-- omit in toc -->
+# Important Notices <!-- omit in toc -->
 
 > [!IMPORTANT]\
 > Since the GitHub API only [allows 5k requests per hour per user account](https://docs.github.com/en/graphql/overview/resource-limitations), the public Vercel instance hosted on `https://github-readme-stats.vercel.app/api` could possibly hit the rate limiter (see [#1471](https://github.com/anuraghazra/github-readme-stats/issues/1471)). We use caching to prevent this from happening (see https://github.com/anuraghazra/github-readme-stats#common-options). You can turn off these rate limit protections by deploying [your own Vercel instance](#disable-rate-limit-protections).
 
 <img alt="Uptime Badge" src="https://img.shields.io/endpoint?url=https%3A%2F%2Fgithub-readme-stats-git-monitoring-github-readme-stats-team.vercel.app%2Fapi%2Fstatus%2Fup%3Ftype%3Dshields">
 
+> [!IMPORTANT]\
+> We're a small team, and to prioritize, we rely on upvotes :+1:. We use Top issues dashboard for tracking community demand (see [#1935](https://github.com/anuraghazra/github-readme-stats/issues/1935)). Do not hesitate to upvote the issues and pull requests you are interested in. We will work on the most upvoted first.
+
 # GitHub Stats Card
 
 Copy-paste this into your markdown content, and that is it. Simple!
@@ -139,7 +145,7 @@ Change the `?username=` value to your GitHub username.
 > By default, the stats card only shows statistics like stars, commits and pull requests from public repositories. To show private statistics on the stats card, you should [deploy your own instance](#deploy-on-your-own) using your own GitHub API token.
 
 > [!NOTE]\
-> Available ranks are S (top 1%), A+ (12.5%), A (25%), A- (37.5%), B+ (50%), B (62.5%), B- (75%), C+ (87.5%) and C (everyone). This ranking scheme is based on the [Japanese academic grading](https://wikipedia.org/wiki/Academic_grading_in_Japan) system. The global percentile is calculated as a weighted sum of percentiles for each statistic (number of commits, pull requests, reviews, issues, stars and followers), based on the cumulative distribution function of the [exponential](https://wikipedia.org/wiki/exponential_distribution) and the [log-normal](https://wikipedia.org/wiki/Log-normal_distribution) distributions. The implementation can be investigated at [src/calculateRank.js](src/calculateRank.js). The circle around the rank shows 100 minus the global percentile.
+> Available ranks are S (top 1%), A+ (12.5%), A (25%), A- (37.5%), B+ (50%), B (62.5%), B- (75%), C+ (87.5%) and C (everyone). This ranking scheme is based on the [Japanese academic grading](https://wikipedia.org/wiki/Academic_grading_in_Japan) system. The global percentile is calculated as a weighted sum of percentiles for each statistic (number of commits, pull requests, reviews, issues, stars and followers), based on the cumulative distribution function of the [exponential](https://wikipedia.org/wiki/exponential_distribution) and the [log-normal](https://wikipedia.org/wiki/Log-normal_distribution) distributions. The implementation can be investigated at [src/calculateRank.js](https://github.com/anuraghazra/github-readme-stats/blob/master/src/calculateRank.js). The circle around the rank shows 100 minus the global percentile.
 
 ### Hiding individual stats
 
@@ -185,7 +191,7 @@ GitHub Readme Stats comes with several built-in themes (e.g. `dark`, `radical`,
 
 <img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="GitHub Readme Stats Themes" width="600px"/>
 
-You can look at a preview for [all available themes](themes/README.md) or checkout the [theme config file](themes/index.js). You can also contribute new themes if you like, contributing guidelines can be found [here](CONTRIBUTING.md#themes-contribution).
+You can look at a preview for [all available themes](themes/README.md) or checkout the [theme config file](themes/index.js). Please note that we paused addition of new themes to decrease maintenance efforts, all pull requests related to new themes will be closed.
 
 #### Responsive Card Theme
 
@@ -354,7 +360,7 @@ Here is a list of all available locales:
 </td></tr>
 </table>
 
-If we don't support your language, please consider contributing!
+If we don't support your language, please consider contributing! You can find more information about how to do it in our [contributing guidelines](CONTRIBUTING.md#translations-contribution).
 
 #### Stats Card Exclusive Options
 
@@ -380,6 +386,7 @@ If we don't support your language, please consider contributing!
 #### Repo Card Exclusive Options
 
 *   `show_owner` - Shows the repo's owner name *(boolean)*. Default: `false`.
+*   `show_image` - Shows the repo's social preview image *(boolean)*. Default: `false`.
 
 #### Gist Card Exclusive Options
 
@@ -404,13 +411,13 @@ If we don't support your language, please consider contributing!
 > (i.e: `c++` should become `c%2B%2B`, `jupyter notebook` should become `jupyter%20notebook`, etc.) You can use
 > [urlencoder.org](https://www.urlencoder.org/) to help you do this automatically.
 
-#### Wakatime Card Exclusive Options
+#### WakaTime Card Exclusive Options
 
 *   `hide` - Hides the languages specified from the card *(Comma-separated values)*. Default: `[] (blank array)`.
 *   `hide_title` - *(boolean)*. Default `false`.
 *   `line_height` - Sets the line height between text *(number)*. Default `25`.
 *   `hide_progress` - Hides the progress bar and percentage *(boolean)*. Default `false`.
-*   `custom_title` - Sets a custom title for the card *(string)*. Default `Wakatime Stats`.
+*   `custom_title` - Sets a custom title for the card *(string)*. Default `WakaTime Stats`.
 *   `layout` - Switches between two available layouts `default` & `compact`.  Default `default`.
 *   `langs_count` - Limits the number of languages on the card, defaults to all reported languages *(number)*.
 *   `api_domain` - Sets a custom API domain for the card, e.g. to use services like [Hakatime](https://github.com/mujx/hakatime) or [Wakapi](https://github.com/muety/wakapi) *(string)*. Default `Waka API`.
@@ -441,6 +448,11 @@ Use [show\_owner](#repo-card-exclusive-options) query option to include the repo
 
 ![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&show_owner=true)
 
+
+Use [show\_image](#repo-card-exclusive-options) query option to include the repo's social preview image header
+
+![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&show_image=true)
+
 # GitHub Gist Pins
 
 GitHub gist pins allow you to pin gists in your GitHub profile using a GitHub readme profile.
@@ -595,26 +607,26 @@ You can use the `&hide_progress=true` option to hide the percentages and the pro
 
 ![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra\&hide_progress=true)
 
-# Wakatime Stats Card
+# WakaTime Stats Card
 
 > [!WARNING]\
-> Please be aware that we currently only show data from Wakatime profiles that are public. You therefore have to make sure that **BOTH** `Display code time publicly` and `Display languages, editors, os, categories publicly` are enabled.
+> Please be aware that we currently only show data from WakaTime profiles that are public. You therefore have to make sure that **BOTH** `Display code time publicly` and `Display languages, editors, os, categories publicly` are enabled.
 
-Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
+Change the `?username=` value to your [WakaTime](https://wakatime.com) username.
 
 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
+[![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
 ### Demo
 
-![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)
+![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)
 
-![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs\&hide_progress=true)
+![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs\&hide_progress=true)
 
 *   Compact layout
 
-![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs\&layout=compact)
+![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs\&layout=compact)
 
 ***
 
@@ -688,7 +700,7 @@ Choose from any of the [default themes](#themes)
 
 *   WakaTime card
 
-![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)
+![Harlok's WakaTime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)
 
 ***
 
@@ -747,7 +759,7 @@ Since the GitHub API only allows 5k requests per hour, my `https://github-readme
 > Since [#58](https://github.com/anuraghazra/github-readme-stats/pull/58), we should be able to handle more than 5k requests and have fewer issues with downtime :grin:.
 
 > [!NOTE]\
-> If you are on the [Pro (i.e. paid)](https://vercel.com/pricing) Vercel plan, the [maxDuration](https://vercel.com/docs/concepts/projects/project-configuration#value-definition) value found in the [Vercel.json](vercel.json) can be increased when your Vercel instance frequently times out during the card request. You are advised to keep this value lower than `30` seconds to prevent high memory usage.
+> If you are on the [Pro (i.e. paid)](https://vercel.com/pricing) Vercel plan, the [maxDuration](https://vercel.com/docs/concepts/projects/project-configuration#value-definition) value found in the [vercel.json](https://github.com/anuraghazra/github-readme-stats/blob/master/vercel.json) can be increased when your Vercel instance frequently times out during the card request. You are advised to keep this value lower than `30` seconds to prevent high memory usage.
 
 [![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/anuraghazra/github-readme-stats)
 

scripts/close-stale-theme-prs.js

@@ -155,7 +155,9 @@ const run = async () => {
     // Loop through all stale invalid theme pull requests and close them.
     for (const prNumber of staleThemePRsNumbers) {
       debug(`Closing #${prNumber} because it is stale...`);
-      if (!dryRun) {
+      if (dryRun) {
+        debug("Dry run enabled, skipping...");
+      } else {
         await octokit.rest.issues.createComment({
           owner,
           repo,
@@ -168,8 +170,6 @@ const run = async () => {
           pull_number: prNumber,
           state: "closed",
         });
-      } else {
-        debug("Dry run enabled, skipping...");
       }
     }
   } catch (error) {

scripts/generate-theme-doc.js

@@ -22,7 +22,7 @@ Use \`?theme=THEME_NAME\` parameter like so:
 
 ## Stats
 
-> These themes work both for the Stats Card and Repo Card.
+> These themes works with all five our cards: Stats Card, Repo Card, Gist Card, Top languages Card and WakaTime Card.
 
 | | | |
 | :--: | :--: | :--: |
@@ -30,7 +30,7 @@ ${STAT_CARD_TABLE_FLAG}
 
 ## Repo Card
 
-> These themes work both for the Stats Card and Repo Card.
+> These themes works with all five our cards: Stats Card, Repo Card, Gist Card, Top languages Card and WakaTime Card.
 
 | | | |
 | :--: | :--: | :--: |
@@ -69,7 +69,7 @@ const createTableItem = ({ link, label, isRepoCard }) => {
 const generateTable = ({ isRepoCard }) => {
   const rows = [];
   const themesFiltered = Object.keys(themes).filter(
-    (name) => name !== (!isRepoCard ? "default_repocard" : "default"),
+    (name) => name !== (isRepoCard ? "default" : "default_repocard"),
   );
 
   for (let i = 0; i < themesFiltered.length; i += 3) {

scripts/preview-theme.js

@@ -12,7 +12,7 @@ import Hjson from "hjson";
 import snakeCase from "lodash.snakecase";
 import parse from "parse-diff";
 import { inspect } from "util";
-import { isValidHexColor } from "../src/common/utils.js";
+import { isValidHexColor, isValidGradient } from "../src/common/utils.js";
 import { themes } from "../themes/index.js";
 import { getGithubToken, getRepoInfo } from "./helpers.js";
 
@@ -32,6 +32,9 @@ const THEME_CONTRIB_GUIDELINES = `
   \r> [!WARNING]\
   \r> Keep in mind that we already have a vast collection of different themes. To keep their number manageable, we began to add only themes supported by the community. Your pull request with theme addition will be merged once we get enough positive feedback from the community in the form of thumbs up :+1: emojis (see [#1935](https://github.com/anuraghazra/github-readme-stats/issues/1935#top-themes-prs)). We expect to see at least 10-15 thumbs up before making a decision to merge your pull request into the master branch. Remember that you can also support themes of other contributors that you liked to speed up their merge.
 
+  \r> [!WARNING]\
+  \r> Please do not submit a pull request with a batch of themes, since it will be hard to judge how the community will react to each of them. We will only merge one theme per pull request. If you have several themes, please submit a separate pull request for each of them. Situations when you have several versions of the same theme (e.g. light and dark) are an exception to this rule.
+
   \r> [!NOTE]\
   \r> Also, note that if this theme is exclusively for your personal use, then instead of adding it to our theme collection, you can use card [customization options](https://github.com/anuraghazra/github-readme-stats#customization).
 `;
@@ -39,7 +42,7 @@ const COLOR_PROPS = {
   title_color: 6,
   icon_color: 6,
   text_color: 6,
-  bg_color: 8,
+  bg_color: 23,
   border_color: 6,
 };
 const ACCEPTED_COLOR_PROPS = Object.keys(COLOR_PROPS);
@@ -172,20 +175,20 @@ const upsertComment = async (
   body,
 ) => {
   let resp;
-  if (commentId !== undefined) {
+  if (commentId === undefined) {
-    resp = await octokit.rest.issues.updateComment({
-      owner,
-      repo,
-      comment_id: commentId,
-      body,
-    });
-  } else {
     resp = await octokit.rest.issues.createComment({
       owner,
       repo,
       issue_number: issueNumber,
       body,
     });
+  } else {
+    resp = await octokit.rest.issues.updateComment({
+      owner,
+      repo,
+      comment_id: commentId,
+      body,
+    });
   }
   return resp.data.html_url;
 };
@@ -341,10 +344,10 @@ const parseJSON = (json) => {
       .filter((x) => typeof x !== "string" || !!x.trim()); // Split json into array of strings and objects.
     if (splitJson[0].replace(/\s+/g, "") === "},") {
       splitJson[0] = "},";
-      if (!/\s*}\s*,?\s*$/.test(splitJson[1])) {
+      if (/\s*}\s*,?\s*$/.test(splitJson[1])) {
-        splitJson.push(splitJson.shift());
-      } else {
         splitJson.shift();
+      } else {
+        splitJson.push(splitJson.shift());
       }
       parsedJson = splitJson.join("");
     }
@@ -466,10 +469,7 @@ export const run = async () => {
       // Check if the theme colors are valid.
       debug("Theme preview body: Check if the theme colors are valid...");
       let invalidColors = false;
-      if (!colors) {
+      if (colors) {
-        warnings.push("Theme colors are missing");
-        invalidColors = true;
-      } else {
         const missingKeys = REQUIRED_COLOR_PROPS.filter(
           (x) => !Object.keys(colors).includes(x),
         );
@@ -499,14 +499,21 @@ export const run = async () => {
                 `Theme color property \`${colorKey}\` can not be longer than \`${COLOR_PROPS[colorKey]}\` characters`,
               );
               invalidColors = true;
-            } else if (!isValidHexColor(colorValue)) {
+            } else if (
+              !(colorKey === "bg_color" && colorValue.split(",").length > 1
+                ? isValidGradient(colorValue.split(","))
+                : isValidHexColor(colorValue))
+            ) {
               errors.push(
-                `Theme color property \`${colorKey}\` is not a valid hex color: <code>#${colorValue}</code>`,
+                `Theme color property \`${colorKey}\` is not a valid hex color: <code>${colorValue}</code>`,
               );
               invalidColors = true;
             }
           }
         }
+      } else {
+        warnings.push("Theme colors are missing");
+        invalidColors = true;
       }
       if (invalidColors) {
         themeValid[theme] = false;
@@ -539,6 +546,10 @@ export const run = async () => {
       Object.keys(colorPairs).forEach((item) => {
         let color1 = colorPairs[item][0];
         let color2 = colorPairs[item][1];
+        const isGradientColor = color2.split(",").length > 1;
+        if (isGradientColor) {
+          return;
+        }
         color1 = color1.length === 4 ? color1.slice(0, 3) : color1.slice(0, 6);
         color2 = color2.length === 4 ? color2.slice(0, 3) : color2.slice(0, 6);
         if (!ccc.isLevelAA(`#${color1}`, `#${color2}`)) {
@@ -597,7 +608,10 @@ export const run = async () => {
     // Create or update theme-preview comment.
     debug("Create or update theme-preview comment...");
     let comment_url;
-    if (!DRY_RUN) {
+    if (DRY_RUN) {
+      info(`DRY_RUN: Comment body: ${commentBody}`);
+      comment_url = "";
+    } else {
       comment_url = await upsertComment(
         OCTOKIT,
         PULL_REQUEST_ID,
@@ -606,9 +620,6 @@ export const run = async () => {
         comment?.id,
         commentBody,
       );
-    } else {
-      info(`DRY_RUN: Comment body: ${commentBody}`);
-      comment_url = "";
     }
 
     // Change review state and add/remove `invalid` label based on theme PR validity.
@@ -620,7 +631,10 @@ export const run = async () => {
     const reviewReason = themesValid
       ? undefined
       : INVALID_REVIEW_COMMENT(comment_url);
-    if (!DRY_RUN) {
+    if (DRY_RUN) {
+      info(`DRY_RUN: Review state: ${reviewState}`);
+      info(`DRY_RUN: Review reason: ${reviewReason}`);
+    } else {
       await addReview(
         OCTOKIT,
         PULL_REQUEST_ID,
@@ -637,13 +651,13 @@ export const run = async () => {
         "invalid",
         !themesValid,
       );
-    } else {
-      info(`DRY_RUN: Review state: ${reviewState}`);
-      info(`DRY_RUN: Review reason: ${reviewReason}`);
     }
   } catch (error) {
     debug("Set review state to `REQUEST_CHANGES` and add `invalid` label...");
-    if (!DRY_RUN) {
+    if (DRY_RUN) {
+      info(`DRY_RUN: Review state: REQUEST_CHANGES`);
+      info(`DRY_RUN: Review reason: ${error.message}`);
+    } else {
       await addReview(
         OCTOKIT,
         PULL_REQUEST_ID,
@@ -662,9 +676,6 @@ export const run = async () => {
         "invalid",
         true,
       );
-    } else {
-      info(`DRY_RUN: Review state: REQUEST_CHANGES`);
-      info(`DRY_RUN: Review reason: ${error.message}`);
     }
     setFailed(error.message);
   }

scripts/push-theme-readme.sh

@@ -10,6 +10,6 @@ git config --global --add safe.directory ${GITHUB_WORKSPACE}
 git branch -d $BRANCH_NAME || true
 git checkout -b $BRANCH_NAME
 git add --all
-git commit --no-verify --message "docs(theme): Auto update theme readme"
+git commit --no-verify --message "docs(theme): auto update theme readme"
 git remote add origin-$BRANCH_NAME https://${PERSONAL_TOKEN}@github.com/${GH_REPO}.git
 git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME

src/cards/repo-card.js

@@ -61,6 +61,7 @@ const renderRepoCard = (repo, options = {}) => {
     isTemplate,
     starCount,
     forkCount,
+    stringifiedRepoImage,
   } = repo;
   const {
     hide_border = false,
@@ -73,6 +74,7 @@ const renderRepoCard = (repo, options = {}) => {
     border_radius,
     border_color,
     locale,
+    show_image = false,
   } = options;
 
   const lineHeight = 10;
@@ -141,6 +143,7 @@ const renderRepoCard = (repo, options = {}) => {
     height,
     border_radius,
     colors,
+    stringifiedRepoImage: show_image ? stringifiedRepoImage : "",
   });
 
   card.disableAnimations();

src/cards/stats-card.js

@@ -10,7 +10,6 @@ import {
   kFormatter,
   measureText,
 } from "../common/utils.js";
-import { getStyles } from "../getStyles.js";
 import { statCardLocales } from "../translations.js";
 
 const CARD_MIN_WIDTH = 287;
@@ -76,6 +75,118 @@ const createTextNode = ({
   `;
 };
 
+/**
+ * Calculates progress along the boundary of the circle i.e it's circumference.
+ *
+ * @param {number} value The rank value to calculate progress for.
+ * @returns {number} Progress value.
+ */
+const calculateCircleProgress = (value) => {
+  const radius = 40;
+  const c = Math.PI * (radius * 2);
+
+  if (value < 0) {
+    value = 0;
+  }
+  if (value > 100) {
+    value = 100;
+  }
+
+  return ((100 - value) / 100) * c;
+};
+
+/**
+ * Retrieves the animation to display progress along the circumference of circle
+ * from the beginning to the given value in a clockwise direction.
+ *
+ * @param {{progress: number}} progress The progress value to animate to.
+ * @returns {string} Progress animation css.
+ */
+const getProgressAnimation = ({ progress }) => {
+  return `
+    @keyframes rankAnimation {
+      from {
+        stroke-dashoffset: ${calculateCircleProgress(0)};
+      }
+      to {
+        stroke-dashoffset: ${calculateCircleProgress(progress)};
+      }
+    }
+  `;
+};
+
+/**
+ * Retrieves CSS styles for a card.
+ *
+ * @param {Object} colors The colors to use for the card.
+ * @param {string} colors.titleColor The title color.
+ * @param {string} colors.textColor The text color.
+ * @param {string} colors.iconColor The icon color.
+ * @param {string} colors.ringColor The ring color.
+ * @param {boolean} colors.show_icons Whether to show icons.
+ * @param {number} colors.progress The progress value to animate to.
+ * @returns {string} Card CSS styles.
+ */
+const getStyles = ({
+  // eslint-disable-next-line no-unused-vars
+  titleColor,
+  textColor,
+  iconColor,
+  ringColor,
+  show_icons,
+  progress,
+}) => {
+  return `
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .rank-text {
+      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+    .rank-percentile-header {
+      font-size: 14px;
+    }
+    .rank-percentile-text {
+      font-size: 16px;
+    }
+    
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+    .icon {
+      fill: ${iconColor};
+      display: ${show_icons ? "block" : "none"};
+    }
+
+    .rank-circle-rim {
+      stroke: ${ringColor};
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: ${ringColor};
+      stroke-dasharray: 250;
+      fill: none;
+      stroke-width: 6;
+      stroke-linecap: round;
+      opacity: 0.8;
+      transform-origin: -10px 8px;
+      transform: rotate(-90deg);
+      animation: rankAnimation 1s forwards ease-in-out;
+    }
+    ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })}
+  `;
+};
+
 /**
  * @typedef {import('../fetchers/types').StatsData} StatsData
  * @typedef {import('./types').StatCardOptions} StatCardOptions

src/cards/top-languages-card.js

@@ -383,14 +383,14 @@ const renderCompactLayout = (langs, width, totalLanguageSize, hideProgress) => {
 
   return `
   ${
-    !hideProgress
+    hideProgress
-      ? `
+      ? ""
-  <mask id="rect-mask">
+      : `
-      <rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5"/>
+      <mask id="rect-mask">
-    </mask>
+          <rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5"/>
-    ${compactProgressBar}
+        </mask>
-  `
+        ${compactProgressBar}
-      : ""
+      `
   }
     <g transform="translate(0, ${hideProgress ? "0" : "25"})">
       ${createLanguageTextNode({

src/cards/types.d.ts

@@ -32,6 +32,7 @@ export type StatCardOptions = CommonOptions & {
 
 export type RepoCardOptions = CommonOptions & {
   show_owner: boolean;
+  show_image: boolean;
 };
 
 export type TopLangOptions = CommonOptions & {

src/cards/wakatime-card.js

@@ -8,7 +8,6 @@ import {
   getCardColors,
   lowercaseTrim,
 } from "../common/utils.js";
-import { getStyles } from "../getStyles.js";
 import { wakatimeCardLocales } from "../translations.js";
 
 /** Import language colors.
@@ -158,6 +157,36 @@ const recalculatePercentages = (languages) => {
   });
 };
 
+/**
+ * Retrieves CSS styles for a card.
+ *
+ * @param {Object} colors The colors to use for the card.
+ * @param {string} colors.titleColor The title color.
+ * @param {string} colors.textColor The text color.
+ * @returns {string} Card CSS styles.
+ */
+const getStyles = ({
+  // eslint-disable-next-line no-unused-vars
+  titleColor,
+  textColor,
+}) => {
+  return `
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    .not_bold { font-weight: 400 }
+    .bold { font-weight: 700 }
+  `;
+};
+
 /**
  * @typedef {import('../fetchers/types').WakaTimeData} WakaTimeData
  * @typedef {import('./types').WakaTimeOptions} WakaTimeOptions
@@ -235,7 +264,6 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   const cssStyles = getStyles({
     titleColor,
     textColor,
-    iconColor,
   });
 
   let finalLayout = "";
@@ -287,11 +315,11 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
           : noCodingActivityNode({
               // @ts-ignore
               color: textColor,
-              text: !stats.is_coding_activity_visible
+              text: stats.is_coding_activity_visible
-                ? i18n.t("wakatimecard.notpublic")
+                ? stats.is_other_usage_visible
-                : stats.is_other_usage_visible
+                  ? i18n.t("wakatimecard.nocodingactivity")
-                ? i18n.t("wakatimecard.nocodingactivity")
+                  : i18n.t("wakatimecard.nocodedetails")
-                : i18n.t("wakatimecard.nocodedetails"),
+                : i18n.t("wakatimecard.notpublic"),
             })
       }
     `;
@@ -316,11 +344,11 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
             noCodingActivityNode({
               // @ts-ignore
               color: textColor,
-              text: !stats.is_coding_activity_visible
+              text: stats.is_coding_activity_visible
-                ? i18n.t("wakatimecard.notpublic")
+                ? stats.is_other_usage_visible
-                : stats.is_other_usage_visible
+                  ? i18n.t("wakatimecard.nocodingactivity")
-                ? i18n.t("wakatimecard.nocodingactivity")
+                  : i18n.t("wakatimecard.nocodedetails")
-                : i18n.t("wakatimecard.nocodedetails"),
+                : i18n.t("wakatimecard.notpublic"),
             }),
           ],
       gap: lheight,

src/common/Card.js

@@ -1,4 +1,3 @@
-import { getAnimations } from "../getStyles.js";
 import { encodeHTML, flexLayout } from "./utils.js";
 
 class Card {
@@ -12,6 +11,8 @@ class Card {
    * @param {string?=} args.customTitle Card custom title.
    * @param {string?=} args.defaultTitle Card default title.
    * @param {string?=} args.titlePrefixIcon Card title prefix icon.
+   * @param {string?=} args.stringifiedRepoImage Card preview image.
+   * @param {number?=} args.imageHeight Card preview image.
    * @param {object?=} args.colors Card colors arguments.
    * @param {string} args.colors.titleColor Card title color.
    * @param {string} args.colors.textColor Card text color.
@@ -28,6 +29,8 @@ class Card {
     customTitle,
     defaultTitle = "",
     titlePrefixIcon,
+    stringifiedRepoImage = "",
+    imageHeight = 200,
   }) {
     this.width = width;
     this.height = height;
@@ -37,12 +40,15 @@ class Card {
 
     this.border_radius = border_radius;
 
+    this.imageHeight = imageHeight;
+    this.stringifiedRepoImage = stringifiedRepoImage;
+
     // returns theme based colors with proper overrides and defaults
     this.colors = colors;
     this.title =
-      customTitle !== undefined
+      customTitle === undefined
-        ? encodeHTML(customTitle)
+        ? encodeHTML(defaultTitle)
-        : encodeHTML(defaultTitle);
+        : encodeHTML(customTitle);
 
     this.css = "";
 
@@ -52,6 +58,10 @@ class Card {
     this.animations = true;
     this.a11yTitle = "";
     this.a11yDesc = "";
+    if (this.stringifiedRepoImage) {
+      this.height += this.imageHeight;
+      this.paddingY += this.imageHeight;
+    }
   }
 
   /**
@@ -173,6 +183,48 @@ class Card {
       : "";
   }
 
+  /**
+   * Retrieves css animations for a card.
+   *
+   * @returns {string} Animation css.
+   */
+  getAnimations = () => {
+    return `
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    `;
+  };
+
+  /**
+   * @returns {string} Renders social preview image
+   */
+  renderImage = () => {
+    if (!this.stringifiedRepoImage) {
+      return "";
+    }
+    return `
+    <g data-testid="card-image" transform="translate(0, 0)">
+    <image x="0" y="0" width="${this.width}" height="${this.imageHeight}"
+      href="${this.stringifiedRepoImage}">
+    </image>
+  </g>`;
+  };
+
   /**
    * @param {string} body The inner body of the card.
    * @returns {string} The rendered card.
@@ -202,7 +254,7 @@ class Card {
           }
           ${this.css}
 
-          ${process.env.NODE_ENV === "test" ? "" : getAnimations()}
+          ${process.env.NODE_ENV === "test" ? "" : this.getAnimations()}
           ${
             this.animations === false
               ? `* { animation-duration: 0s !important; animation-delay: 0s !important; }`
@@ -238,6 +290,7 @@ class Card {
         >
           ${body}
         </g>
+          ${this.renderImage()}
       </svg>
     `;
   }

src/common/utils.js

@@ -245,7 +245,10 @@ const clampValue = (number, min, max) => {
  * @returns {boolean} True if the given string is a valid gradient.
  */
 const isValidGradient = (colors) => {
-  return isValidHexColor(colors[1]) && isValidHexColor(colors[2]);
+  return (
+    colors.length > 2 &&
+    colors.slice(1).every((color) => isValidHexColor(color))
+  );
 };
 
 /**
@@ -415,7 +418,7 @@ const wrapTextMultiline = (text, width = 59, maxLines = 3) => {
 const noop = () => {};
 // return console instance based on the environment
 const logger =
-  process.env.NODE_ENV !== "test" ? console : { log: noop, error: noop };
+  process.env.NODE_ENV === "test" ? { log: noop, error: noop } : console;
 
 const ONE_MINUTE = 60;
 const FIVE_MINUTES = 300;
@@ -566,6 +569,27 @@ const dateDiff = (d1, d2) => {
   return Math.round(diff / (1000 * 60));
 };
 
+const getBase64URIFromImage = async (imageURL) => {
+  try {
+    const response = await axios.get(imageURL, {
+      responseType: "arraybuffer",
+    });
+
+    if (response.status === 200) {
+      const base64Image = Buffer.from(response.data, "binary").toString(
+        "base64",
+      );
+      const mimeType = response.headers["content-type"];
+      return `data:${mimeType};base64,${base64Image}`;
+    } else {
+      throw new Error("Failed to fetch the image.");
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    return null;
+  }
+};
+
 export {
   ERROR_CARD_LENGTH,
   renderError,
@@ -592,4 +616,5 @@ export {
   chunkArray,
   parseEmojis,
   dateDiff,
+  getBase64URIFromImage,
 };

src/fetchers/repo-fetcher.js

@@ -34,6 +34,7 @@ const fetcher = (variables, token) => {
           name
         }
         forkCount
+        openGraphImageUrl
       }
       query getRepo($login: String!, $repo: String!) {
         user(login: $login) {

src/fetchers/stats-fetcher.js

@@ -89,7 +89,7 @@ const GRAPHQL_STATS_QUERY = `
  * @returns {Promise<AxiosResponse>} Axios response.
  */
 const fetcher = (variables, token) => {
-  const query = !variables.after ? GRAPHQL_STATS_QUERY : GRAPHQL_REPOS_QUERY;
+  const query = variables.after ? GRAPHQL_REPOS_QUERY : GRAPHQL_STATS_QUERY;
   return request(
     {
       query,
@@ -138,10 +138,10 @@ const statsFetcher = async ({
 
     // Store stats data.
     const repoNodes = res.data.data.user.repositories.nodes;
-    if (!stats) {
+    if (stats) {
-      stats = res;
-    } else {
       stats.data.data.user.repositories.nodes.push(...repoNodes);
+    } else {
+      stats = res;
     }
 
     // Disable multi page fetching on public Vercel instance due to rate limits.

src/fetchers/types.d.ts

@@ -22,6 +22,7 @@ export type RepositoryData = {
   };
   forkCount: number;
   starCount: number;
+  stringifiedRepoImage: string;
 };
 
 export type StatsData = {

src/getStyles.js

@@ -1,142 +0,0 @@
-// @ts-check
-
-/**
- * Calculates progress along the boundary of the circle i.e it's circumference.
- *
- * @param {number} value The rank value to calculate progress for.
- * @returns {number} Progress value.
- */
-const calculateCircleProgress = (value) => {
-  const radius = 40;
-  const c = Math.PI * (radius * 2);
-
-  if (value < 0) {
-    value = 0;
-  }
-  if (value > 100) {
-    value = 100;
-  }
-
-  return ((100 - value) / 100) * c;
-};
-
-/**
- * Retrieves the animation to display progress along the circumference of circle
- * from the beginning to the given value in a clockwise direction.
- *
- * @param {{progress: number}} progress The progress value to animate to.
- * @returns {string} Progress animation css.
- */
-const getProgressAnimation = ({ progress }) => {
-  return `
-    @keyframes rankAnimation {
-      from {
-        stroke-dashoffset: ${calculateCircleProgress(0)};
-      }
-      to {
-        stroke-dashoffset: ${calculateCircleProgress(progress)};
-      }
-    }
-  `;
-};
-
-/**
- * Retrieves css animations for a card.
- *
- * @returns {string} Animation css.
- */
-const getAnimations = () => {
-  return `
-    /* Animations */
-    @keyframes scaleInAnimation {
-      from {
-        transform: translate(-5px, 5px) scale(0);
-      }
-      to {
-        transform: translate(-5px, 5px) scale(1);
-      }
-    }
-    @keyframes fadeInAnimation {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-  `;
-};
-
-/**
- * Retrieves CSS styles for a card.
- *
- * @param {Object} colors The colors to use for the card.
- * @param {string} colors.titleColor The title color.
- * @param {string} colors.textColor The text color.
- * @param {string} colors.iconColor The icon color.
- * @param {string} colors.ringColor The ring color.
- * @param {boolean} colors.show_icons Whether to show icons.
- * @param {number} colors.progress The progress value to animate to.
- * @returns {string} Card CSS styles.
- */
-const getStyles = ({
-  // eslint-disable-next-line no-unused-vars
-  titleColor,
-  textColor,
-  iconColor,
-  ringColor,
-  show_icons,
-  progress,
-}) => {
-  return `
-    .stat {
-      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
-    }
-    @supports(-moz-appearance: auto) {
-      /* Selector detects Firefox */
-      .stat { font-size:12px; }
-    }
-    .stagger {
-      opacity: 0;
-      animation: fadeInAnimation 0.3s ease-in-out forwards;
-    }
-    .rank-text {
-      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
-      animation: scaleInAnimation 0.3s ease-in-out forwards;
-    }
-    .rank-percentile-header {
-      font-size: 14px;
-    }
-    .rank-percentile-text {
-      font-size: 16px;
-    }
-    
-    .not_bold { font-weight: 400 }
-    .bold { font-weight: 700 }
-    .icon {
-      fill: ${iconColor};
-      display: ${!!show_icons ? "block" : "none"};
-    }
-
-    .rank-circle-rim {
-      stroke: ${ringColor};
-      fill: none;
-      stroke-width: 6;
-      opacity: 0.2;
-    }
-    .rank-circle {
-      stroke: ${ringColor};
-      stroke-dasharray: 250;
-      fill: none;
-      stroke-width: 6;
-      stroke-linecap: round;
-      opacity: 0.8;
-      transform-origin: -10px 8px;
-      transform: rotate(-90deg);
-      animation: rankAnimation 1s forwards ease-in-out;
-    }
-    ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })}
-  `;
-};
-
-export { getAnimations, getStyles };

src/index.js

@@ -1,3 +1,2 @@
 export * from "./common/index.js";
 export * from "./cards/index.js";
-export { getStyles, getAnimations } from "./getStyles.js";

src/translations.js

@@ -128,7 +128,7 @@ const statCardLocales = ({ name, apostrophe }) => {
       np: "कुल Commits",
       el: "Σύνολο Commits",
       ru: "Всего коммитов",
-      "uk-ua": "Всього коммітов",
+      "uk-ua": "Всього комітів",
       id: "Total Komitmen",
       ml: "ആകെ കമ്മിറ്റുകൾ",
       my: "Jumlah Komitmen",
@@ -440,7 +440,7 @@ const repoCardLocales = {
     np: "अभिलेख राखियो",
     el: "Αρχειοθετημένα",
     ru: "Архивирован",
-    "uk-ua": "Архивирован",
+    "uk-ua": "Архивований",
     id: "Arsip",
     ml: "ശേഖരിച്ചത്",
     my: "Arkib",
@@ -521,34 +521,34 @@ const langCardLocales = {
 const wakatimeCardLocales = {
   "wakatimecard.title": {
     ar: "إحصائيات واكا تايم",
-    cn: "Wakatime 周统计",
+    cn: "WakaTime 周统计",
-    "zh-tw": "Wakatime 周統計",
+    "zh-tw": "WakaTime 周統計",
-    cs: "Statistiky Wakatime",
+    cs: "Statistiky WakaTime",
-    de: "Wakatime Status",
+    de: "WakaTime Status",
-    en: "Wakatime Stats",
+    en: "WakaTime Stats",
-    bn: "Wakatime স্ট্যাটাস",
+    bn: "WakaTime স্ট্যাটাস",
-    es: "Estadísticas de Wakatime",
+    es: "Estadísticas de WakaTime",
-    fr: "Statistiques de Wakatime",
+    fr: "Statistiques de WakaTime",
-    hu: "Wakatime statisztika",
+    hu: "WakaTime statisztika",
-    it: "Statistiche Wakatime",
+    it: "Statistiche WakaTime",
-    ja: "Wakatime ワカタイム統計",
+    ja: "WakaTime ワカタイム統計",
-    kr: "Wakatime 주간 통계",
+    kr: "WakaTime 주간 통계",
-    nl: "Wakatime-statistieken",
+    nl: "WakaTime-statistieken",
-    "pt-pt": "Estatísticas Wakatime",
+    "pt-pt": "Estatísticas WakaTime",
-    "pt-br": "Estatísticas Wakatime",
+    "pt-br": "Estatísticas WakaTime",
-    np: "Wakatime तथ्या .्क",
+    np: "WakaTime तथ्या .्क",
-    el: "Στατιστικά Wakatime",
+    el: "Στατιστικά WakaTime",
-    ru: "Статистика Wakatime",
+    ru: "Статистика WakaTime",
-    "uk-ua": "Статистика Wakatime",
+    "uk-ua": "Статистика WakaTime",
-    id: "Status Wakatime",
+    id: "Status WakaTime",
     ml: "വേക്ക് ടൈം സ്ഥിതിവിവരക്കണക്കുകൾ",
-    my: "Statistik Wakatime",
+    my: "Statistik WakaTime",
-    sk: "Wakatime štatistika",
+    sk: "WakaTime štatistika",
-    tr: "Waketime İstatistikler",
+    tr: "WakaTime İstatistikler",
-    pl: "Statystyki Wakatime",
+    pl: "Statystyki WakaTime",
-    uz: "Wakatime statistikasi",
+    uz: "WakaTime statistikasi",
-    vi: "Thống Kê Wakatime",
+    vi: "Thống Kê WakaTime",
-    se: "Wakatime statistik",
+    se: "WakaTime statistik",
   },
   "wakatimecard.lastyear": {
     ar: "العام الماضي",
@@ -614,34 +614,34 @@ const wakatimeCardLocales = {
   },
   "wakatimecard.notpublic": {
     ar: "ملف المستخدم غير عام",
-    cn: "Wakatime 用户个人资料未公开",
+    cn: "WakaTime 用户个人资料未公开",
-    "zh-tw": "Wakatime 使用者個人資料未公開",
+    "zh-tw": "WakaTime 使用者個人資料未公開",
-    cs: "Profil uživatele Wakatime není veřejný",
+    cs: "Profil uživatele WakaTime není veřejný",
-    de: "Wakatime-Benutzerprofil nicht öffentlich",
+    de: "WakaTime-Benutzerprofil nicht öffentlich",
-    en: "Wakatime user profile not public",
+    en: "WakaTime user profile not public",
-    bn: "Wakatime ব্যবহারকারীর প্রোফাইল প্রকাশ্য নয়",
+    bn: "WakaTime ব্যবহারকারীর প্রোফাইল প্রকাশ্য নয়",
-    es: "Perfil de usuario de Wakatime no público",
+    es: "Perfil de usuario de WakaTime no público",
-    fr: "Profil utilisateur Wakatime non public",
+    fr: "Profil utilisateur WakaTime non public",
-    hu: "A Wakatime felhasználói profilja nem nyilvános",
+    hu: "A WakaTime felhasználói profilja nem nyilvános",
-    it: "Profilo utente Wakatime non pubblico",
+    it: "Profilo utente WakaTime non pubblico",
-    ja: "Wakatime ユーザープロファイルは公開されていません",
+    ja: "WakaTime ユーザープロファイルは公開されていません",
-    kr: "Wakatime 사용자 프로필이 공개되지 않았습니다",
+    kr: "WakaTime 사용자 프로필이 공개되지 않았습니다",
-    nl: "Wakatime gebruikersprofiel niet openbaar",
+    nl: "WakaTime gebruikersprofiel niet openbaar",
-    "pt-pt": "Perfil de usuário Wakatime não público",
+    "pt-pt": "Perfil de usuário WakaTime não público",
-    "pt-br": "Perfil de usuário Wakatime não público",
+    "pt-br": "Perfil de usuário WakaTime não público",
-    np: "Wakatime प्रयोगकर्ता प्रोफाइल सार्वजनिक छैन",
+    np: "WakaTime प्रयोगकर्ता प्रोफाइल सार्वजनिक छैन",
-    el: "Το προφίλ χρήστη Wakatime δεν είναι δημόσιο",
+    el: "Το προφίλ χρήστη WakaTime δεν είναι δημόσιο",
-    ru: "Профиль пользователя Wakatime не является общедоступным",
+    ru: "Профиль пользователя WakaTime не является общедоступным",
-    "uk-ua": "Профіль користувача Wakatime не є публічним",
+    "uk-ua": "Профіль користувача WakaTime не є публічним",
-    id: "Profil pengguna Wakatime tidak publik",
+    id: "Profil pengguna WakaTime tidak publik",
-    ml: "Wakatime ഉപയോക്തൃ പ്രൊഫൈൽ പൊതുവായി പ്രസിദ്ധീകരിക്കപ്പെടാത്തതാണ്",
+    ml: "WakaTime ഉപയോക്തൃ പ്രൊഫൈൽ പൊതുവായി പ്രസിദ്ധീകരിക്കപ്പെടാത്തതാണ്",
-    my: "Profil pengguna Wakatime tidak awam",
+    my: "Profil pengguna WakaTime tidak awam",
-    sk: "Profil používateľa Wakatime nie je verejný",
+    sk: "Profil používateľa WakaTime nie je verejný",
-    tr: "Wakatime kullanıcı profili herkese açık değil",
+    tr: "WakaTime kullanıcı profili herkese açık değil",
-    pl: "Profil użytkownika Wakatime nie jest publiczny",
+    pl: "Profil użytkownika WakaTime nie jest publiczny",
-    uz: "Wakatime foydalanuvchi profili ochiq emas",
+    uz: "WakaTime foydalanuvchi profili ochiq emas",
-    vi: "Hồ sơ người dùng Wakatime không công khai",
+    vi: "Hồ sơ người dùng WakaTime không công khai",
-    se: "Wakatime användarprofil inte offentlig",
+    se: "WakaTime användarprofil inte offentlig",
   },
   "wakatimecard.nocodedetails": {
     ar: "المستخدم لا يشارك معلومات تفصيلية عن البرمجة",

tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Test Render Wakatime Card should render correctly 1`] = `[Function]`;
+exports[`Test Render WakaTime Card should render correctly 1`] = `[Function]`;
 
-exports[`Test Render Wakatime Card should render correctly with compact layout 1`] = `
+exports[`Test Render WakaTime Card should render correctly with compact layout 1`] = `
 "
       <svg
         width="495"
@@ -38,42 +38,8 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
       opacity: 0;
       animation: fadeInAnimation 0.3s ease-in-out forwards;
     }
-    .rank-text {
-      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
-      animation: scaleInAnimation 0.3s ease-in-out forwards;
-    }
-    .rank-percentile-header {
-      font-size: 14px;
-    }
-    .rank-percentile-text {
-      font-size: 16px;
-    }
-    
     .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }
-    .icon {
-      fill: #4c71f2;
-      display: none;
-    }
-
-    .rank-circle-rim {
-      stroke: undefined;
-      fill: none;
-      stroke-width: 6;
-      opacity: 0.2;
-    }
-    .rank-circle {
-      stroke: undefined;
-      stroke-dasharray: 250;
-      fill: none;
-      stroke-width: 6;
-      stroke-linecap: round;
-      opacity: 0.8;
-      transform-origin: -10px 8px;
-      transform: rotate(-90deg);
-      animation: rankAnimation 1s forwards ease-in-out;
-    }
-    
   
     @keyframes slideInAnimation {
       from {
@@ -129,7 +95,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
         y="0"
         class="header"
         data-testid="header"
-      >Wakatime Stats (last 7 days)</text>
+      >WakaTime Stats (last 7 days)</text>
     </g>
       </g>
     
@@ -184,11 +150,12 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
     </svg>
   
         </g>
+          
       </svg>
     "
 `;
 
-exports[`Test Render Wakatime Card should render correctly with compact layout when langs_count is set 1`] = `
+exports[`Test Render WakaTime Card should render correctly with compact layout when langs_count is set 1`] = `
 "
       <svg
         width="495"
@@ -224,42 +191,8 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w
       opacity: 0;
       animation: fadeInAnimation 0.3s ease-in-out forwards;
     }
-    .rank-text {
-      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
-      animation: scaleInAnimation 0.3s ease-in-out forwards;
-    }
-    .rank-percentile-header {
-      font-size: 14px;
-    }
-    .rank-percentile-text {
-      font-size: 16px;
-    }
-    
     .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }
-    .icon {
-      fill: #4c71f2;
-      display: none;
-    }
-
-    .rank-circle-rim {
-      stroke: undefined;
-      fill: none;
-      stroke-width: 6;
-      opacity: 0.2;
-    }
-    .rank-circle {
-      stroke: undefined;
-      stroke-dasharray: 250;
-      fill: none;
-      stroke-width: 6;
-      stroke-linecap: round;
-      opacity: 0.8;
-      transform-origin: -10px 8px;
-      transform: rotate(-90deg);
-      animation: rankAnimation 1s forwards ease-in-out;
-    }
-    
   
     @keyframes slideInAnimation {
       from {
@@ -315,7 +248,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w
         y="0"
         class="header"
         data-testid="header"
-      >Wakatime Stats (last 7 days)</text>
+      >WakaTime Stats (last 7 days)</text>
     </g>
       </g>
     
@@ -370,6 +303,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w
     </svg>
   
         </g>
+          
       </svg>
     "
 `;

tests/fetchWakatime.test.js

@@ -102,7 +102,7 @@ const wakaTimeData = {
   },
 };
 
-describe("Wakatime fetcher", () => {
+describe("WakaTime fetcher", () => {
   it("should fetch correct wakatime data", async () => {
     const username = "anuraghazra";
     mock

tests/renderGistCard.test.js

@@ -135,9 +135,10 @@ describe("test renderGistCard", () => {
       );
       expect(descClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
       expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
-      expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      const backgroundElement = queryByTestId(document.body, "card-bg");
-        "fill",
+      const backgroundElementFill = backgroundElement.getAttribute("fill");
-        `#${themes[name].bg_color}`,
+      expect([`#${themes[name].bg_color}`, "url(#gradient)"]).toContain(
+        backgroundElementFill,
       );
     });
   });

tests/renderRepoCard.test.js

@@ -18,6 +18,7 @@ const data_repo = {
     },
     starCount: 38000,
     forkCount: 100,
+    stringifiedRepoImage: "data:image/png;base64,base64/image/string",
   },
 };
 
@@ -190,9 +191,10 @@ describe("Test renderRepoCard", () => {
       );
       expect(descClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
       expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
-      expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      const backgroundElement = queryByTestId(document.body, "card-bg");
-        "fill",
+      const backgroundElementFill = backgroundElement.getAttribute("fill");
-        `#${themes[name].bg_color}`,
+      expect([`#${themes[name].bg_color}`, "url(#gradient)"]).toContain(
+        backgroundElementFill,
       );
     });
   });
@@ -338,4 +340,21 @@ describe("Test renderRepoCard", () => {
       "No description provided",
     );
   });
+
+  it("should render repo's social preview image, when show_image is true", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      show_image: true,
+    });
+
+    expect(queryByTestId(document.body, "card-image")).toBeInTheDocument();
+    expect(
+      queryByTestId(document.body, "card-image").children[0],
+    ).toHaveAttribute("href", data_repo.repository.stringifiedRepoImage);
+  });
+
+  it("should not render repo's social preview image by default", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository);
+
+    expect(queryByTestId(document.body, "card-image")).not.toBeInTheDocument();
+  });
 });

tests/renderStatsCard.test.js

@@ -264,9 +264,10 @@ describe("Test renderStatsCard", () => {
       );
       expect(statClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
       expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
-      expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      const backgroundElement = queryByTestId(document.body, "card-bg");
-        "fill",
+      const backgroundElementFill = backgroundElement.getAttribute("fill");
-        `#${themes[name].bg_color}`,
+      expect([`#${themes[name].bg_color}`, "url(#gradient)"]).toContain(
+        backgroundElementFill,
       );
     });
   });

tests/renderTopLanguagesCard.test.js

@@ -524,9 +524,10 @@ describe("Test renderTopLanguages", () => {
 
       expect(headerStyles.fill.trim()).toBe(`#${themes[name].title_color}`);
       expect(langNameStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
-      expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      const backgroundElement = queryByTestId(document.body, "card-bg");
-        "fill",
+      const backgroundElementFill = backgroundElement.getAttribute("fill");
-        `#${themes[name].bg_color}`,
+      expect([`#${themes[name].bg_color}`, "url(#gradient)"]).toContain(
+        backgroundElementFill,
       );
     });
   });

tests/renderWakatimeCard.test.js

@@ -5,7 +5,7 @@ import { getCardColors } from "../src/common/utils.js";
 import { wakaTimeData } from "./fetchWakatime.test.js";
 import { expect, it, describe } from "@jest/globals";
 
-describe("Test Render Wakatime Card", () => {
+describe("Test Render WakaTime Card", () => {
   it("should render correctly", () => {
     // const card = renderWakatimeCard(wakaTimeData.data);
     expect(getCardColors).toMatchSnapshot();
@@ -39,12 +39,12 @@ describe("Test Render Wakatime Card", () => {
   it("should render translations", () => {
     document.body.innerHTML = renderWakatimeCard({}, { locale: "cn" });
     expect(document.getElementsByClassName("header")[0].textContent).toBe(
-      "Wakatime 周统计",
+      "WakaTime 周统计",
     );
     expect(
       document.querySelector('g[transform="translate(0, 0)"]>text.stat.bold')
         .textContent,
-    ).toBe("Wakatime 用户个人资料未公开");
+    ).toBe("WakaTime 用户个人资料未公开");
   });
 
   it("should render without rounding", () => {

themes/README.md

@@ -4,7 +4,7 @@
 
 With inbuilt themes, you can customize the look of the card without doing any manual customization.
 
-Use `?theme=THEME_NAME` parameter like so :-
+Use `?theme=THEME_NAME` parameter like so:
 
 ```md
 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark&show_icons=true)
@@ -12,7 +12,7 @@ Use `?theme=THEME_NAME` parameter like so :-
 
 ## Stats
 
-> These themes work both for the Stats Card and Repo Card.
+> These themes works with all five our cards: Stats Card, Repo Card, Gist Card, Top languages Card and Wakatime Card.
 
 | | | |
 | :--: | :--: | :--: |
@@ -37,13 +37,14 @@ Use `?theme=THEME_NAME` parameter like so :-
 | `aura_dark` ![aura_dark][aura_dark] | `panda` ![panda][panda] | `noctis_minimus` ![noctis_minimus][noctis_minimus] |
 | `cobalt2` ![cobalt2][cobalt2] | `swift` ![swift][swift] | `aura` ![aura][aura] |
 | `apprentice` ![apprentice][apprentice] | `moltack` ![moltack][moltack] | `codeSTACKr` ![codeSTACKr][codeSTACKr] |
-| `rose_pine` ![rose_pine][rose_pine] | `date_night` ![date_night][date_night] | `one_dark_pro` ![one_dark_pro][one_dark_pro] |
+| `rose_pine` ![rose_pine][rose_pine] | `catppuccin_latte` ![catppuccin_latte][catppuccin_latte] | `catppuccin_mocha` ![catppuccin_mocha][catppuccin_mocha] |
-| `rose` ![rose][rose] | `holi` ![holi][holi] | `neon` ![neon][neon] |
+| `date_night` ![date_night][date_night] | `one_dark_pro` ![one_dark_pro][one_dark_pro] | `rose` ![rose][rose] |
-| `blue_navy` ![blue_navy][blue_navy] | `calm_pink` ![calm_pink][calm_pink] | [Add your theme][add-theme] |
+| `holi` ![holi][holi] | `neon` ![neon][neon] | `blue_navy` ![blue_navy][blue_navy] |
+| `calm_pink` ![calm_pink][calm_pink] |  | [Add your theme][add-theme] |
 
 ## Repo Card
 
-> These themes work both for the Stats Card and Repo Card.
+> These themes works with all five our cards: Stats Card, Repo Card, Gist Card, Top languages Card and Wakatime Card.
 
 | | | |
 | :--: | :--: | :--: |
@@ -68,9 +69,10 @@ Use `?theme=THEME_NAME` parameter like so :-
 | `aura_dark` ![aura_dark][aura_dark_repo] | `panda` ![panda][panda_repo] | `noctis_minimus` ![noctis_minimus][noctis_minimus_repo] |
 | `cobalt2` ![cobalt2][cobalt2_repo] | `swift` ![swift][swift_repo] | `aura` ![aura][aura_repo] |
 | `apprentice` ![apprentice][apprentice_repo] | `moltack` ![moltack][moltack_repo] | `codeSTACKr` ![codeSTACKr][codeSTACKr_repo] |
-| `rose_pine` ![rose_pine][rose_pine_repo] | `date_night` ![date_night][date_night_repo] | `one_dark_pro` ![one_dark_pro][one_dark_pro_repo] |
+| `rose_pine` ![rose_pine][rose_pine_repo] | `catppuccin_latte` ![catppuccin_latte][catppuccin_latte_repo] | `catppuccin_mocha` ![catppuccin_mocha][catppuccin_mocha_repo] |
-| `rose` ![rose][rose_repo] | `holi` ![holi][holi_repo] | `neon` ![neon][neon_repo] |
+| `date_night` ![date_night][date_night_repo] | `one_dark_pro` ![one_dark_pro][one_dark_pro_repo] | `rose` ![rose][rose_repo] |
-| `blue_navy` ![blue_navy][blue_navy_repo] | `calm_pink` ![calm_pink][calm_pink_repo] | [Add your theme][add-theme] |
+| `holi` ![holi][holi_repo] | `neon` ![neon][neon_repo] | `blue_navy` ![blue_navy][blue_navy_repo] |
+| `calm_pink` ![calm_pink][calm_pink_repo] |  | [Add your theme][add-theme] |
 
 
 [default]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=default
@@ -138,6 +140,8 @@ Use `?theme=THEME_NAME` parameter like so :-
 [moltack]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=moltack
 [codeSTACKr]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=codeSTACKr
 [rose_pine]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=rose_pine
+[catppuccin_latte]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=catppuccin_latte
+[catppuccin_mocha]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=catppuccin_mocha
 [date_night]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=date_night
 [one_dark_pro]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=one_dark_pro
 [rose]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=rose
@@ -212,6 +216,8 @@ Use `?theme=THEME_NAME` parameter like so :-
 [moltack_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=moltack
 [codeSTACKr_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=codeSTACKr
 [rose_pine_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=rose_pine
+[catppuccin_latte_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=catppuccin_latte
+[catppuccin_mocha_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=catppuccin_mocha
 [date_night_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=date_night
 [one_dark_pro_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=one_dark_pro
 [rose_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=rose

themes/index.js

@@ -395,6 +395,18 @@ export const themes = {
     text_color: "e0def4",
     bg_color: "191724",
   },
+  catppuccin_latte: {
+    title_color: "137980",
+    icon_color: "8839ef",
+    text_color: "4c4f69",
+    bg_color: "eff1f5",
+  },
+  catppuccin_mocha: {
+    title_color: "94e2d5",
+    icon_color: "cba6f7",
+    text_color: "cdd6f4",
+    bg_color: "1e1e2e",
+  },
   date_night: {
     title_color: "DA7885",
     text_color: "E1B2A2",