chore: update

chore: add svg snapshots
2023-01-28 23:32:46 +05:30 · 2023-01-28 23:31:20 +05:30
68 changed files with 3232 additions and 17217 deletions
@@ -15,7 +15,7 @@ body:
      required: true
  - type: textarea
    attributes:
-      label: Expected behavior
+      label: Expected behaviour
      description:
        A clear and concise description of what you expected to happen.
  - type: textarea
@@ -1,4 +1,3 @@
 themes: themes/index.js
 doc-translation: docs/*
 card-i18n: src/translations.js
-documentation: readme.md
@@ -23,10 +23,6 @@ jobs:
          node-version: ${{ matrix.node-version }}
          cache: npm

-      # Fix the unsafe repo error which was introduced by the CVE-2022-24765 git patches.
-      - name: Fix unsafe repo error
-        run: git config --global --add safe.directory ${{ github.workspace }}
-
      - name: npm install, generate readme
        run: |
          npm ci
@@ -1,33 +0,0 @@
-name: prs cache clean
-on:
-  pull_request:
-    types:
-      - closed
-
-jobs:
-  cleanup:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Cleanup
-        run: |
-          gh extension install actions/gh-actions-cache
-
-          REPO=${{ github.repository }}
-          BRANCH="refs/pull/${{ github.event.pull_request.number }}/merge"
-
-          echo "Fetching list of cache key"
-          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 )
-
-          ## Setting this to not fail the workflow while deleting cache keys. 
-          set +e
-          echo "Deleting caches..."
-          for cacheKey in $cacheKeysForPR
-          do
-              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
-          done
-          echo "Done"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -34,4 +34,4 @@ jobs:
          npm run format:check

      - name: Code Coverage
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v1
@@ -1,44 +0,0 @@
-name: Update supported languages
-on:
-  schedule:
-    - cron: "0 0 */30 * *"
-
-jobs:
-  updateLanguages:
-    if: github.repository == 'anuraghazra/github-readme-stats'
-    name: Update supported languages
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16.x]
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci
-        env:
-          CI: true
-
-      - name: Run update-languages-json.js script
-        run: npm run generate-langs-json
-
-      - name: Create Pull Request if upstream language file is changed
-        uses: peter-evans/create-pull-request@v4
-        with:
-          commit-message: "refactor: update languages JSON"
-          branch: "update_langs/patch"
-          delete-branch: true
-          title: Update languages JSON
-          body:
-            "The
-            [update-langs](https://github.com/anuraghazra/github-readme-stats/actions/workflows/update-langs.yaml)
-            action found new/updated languages in the [upstream languages JSON
-            file](https://raw.githubusercontent.com/github/linguist/master/lib/linguist/languages.yml)."
-          labels: "ci, lang-card"
@@ -10,5 +10,3 @@ vercel_token
 # IDE
 .vscode
 *.code-workspace
-
-.vercel
@@ -2,11 +2,11 @@

 We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:

-   Reporting [an issue](https://github.com/anuraghazra/github-readme-stats/issues/new?assignees=&labels=bug&template=bug_report.yml).
-   [Discussing](https://github.com/anuraghazra/github-readme-stats/discussions) the current state of the code.
-   Submitting [a fix](https://github.com/anuraghazra/github-readme-stats/compare).
-   Proposing [new features](https://github.com/anuraghazra/github-readme-stats/issues/new?assignees=&labels=enhancement&template=feature_request.yml).
-   Becoming a maintainer.
+-   Reporting an issue
+-   Discussing the current state of the code
+-   Submitting a fix
+-   Proposing new features
+-   Becoming a maintainer

 ## All Changes Happen Through Pull Requests

@@ -33,15 +33,11 @@ _(make sure you already have a [Vercel](https://vercel.com/) account)_
 1.  Install [Vercel CLI](https://vercel.com/download).
 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.
+4.  Run the command "vercel" in the root and follow the steps there.
 5.  Open `vercel.json` and set the maxDuration to 10.
 6.  Create a `.env` file in the root of the directory.
-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 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.
+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>.

 ## Themes Contribution

@@ -35,9 +35,7 @@ export default async (req, res) => {
    locale,
    disable_animations,
    border_radius,
-    number_format,
    border_color,
-    rank_icon,
  } = req.query;
  res.setHeader("Content-Type", "image/svg+xml");

@@ -90,10 +88,8 @@ export default async (req, res) => {
        custom_title,
        border_radius,
        border_color,
-        number_format,
        locale: locale ? locale.toLowerCase() : null,
        disable_animations: parseBoolean(disable_animations),
-        rank_icon,
      }),
    );
  } catch (err) {
@@ -2,11 +2,11 @@
 * @file Contains a simple cloud function that can be used to check which PATs are no
 * longer working. It returns a list of valid PATs, expired PATs and PATs with errors.
 *
- * @description This function is currently rate limited to 1 request per 5 minutes.
+ * @description This function is currently rate limited to 1 request per 10 minutes.
 */

 import { logger, request, dateDiff } from "../../src/common/utils.js";
-export const RATE_LIMIT_SECONDS = 60 * 5; // 1 request per 5 minutes
+export const RATE_LIMIT_SECONDS = 60 * 5; // 1 request per 10 minutes

 /**
 * Simple uptime check fetcher for the PATs.
@@ -2,13 +2,13 @@
 * @file Contains a simple cloud function that can be used to check if the PATs are still
 * functional.
 *
- * @description This function is currently rate limited to 1 request per 5 minutes.
+ * @description This function is currently rate limited to 1 request per 10 minutes.
 */

 import retryer from "../../src/common/retryer.js";
 import { logger, request } from "../../src/common/utils.js";

-export const RATE_LIMIT_SECONDS = 60 * 5; // 1 request per 5 minutes
+export const RATE_LIMIT_SECONDS = 60 * 10; // 1 request per 10 minutes

 /**
 * Simple uptime check fetcher for the PATs.
@@ -25,14 +25,11 @@ export default async (req, res) => {
    layout,
    langs_count,
    exclude_repo,
-    size_weight,
-    count_weight,
    custom_title,
    locale,
    border_radius,
    border_color,
    disable_animations,
-    hide_progress,
  } = req.query;
  res.setHeader("Content-Type", "image/svg+xml");

@@ -48,8 +45,6 @@ export default async (req, res) => {
    const topLangs = await fetchTopLanguages(
      username,
      parseArray(exclude_repo),
-      size_weight,
-      count_weight,
    );

    const cacheSeconds = clampValue(
@@ -82,7 +77,6 @@ export default async (req, res) => {
        border_color,
        locale: locale ? locale.toLowerCase() : null,
        disable_animations: parseBoolean(disable_animations),
-        hide_progress: parseBoolean(hide_progress),
      }),
    );
  } catch (err) {
@@ -53,8 +53,6 @@
    <a href="/docs/readme_nl.md">Nederlands</a>
    .
    <a href="/docs/readme_np.md">नेपाली</a>
-    .
-    <a href="/docs/readme_tr.md">Türkçe</a>
  </p>
 </p>
 <p align="center">喜欢这个项目？请考虑<a href="https://www.paypal.me/anuraghazra">捐赠</a>来帮助它完善！
@@ -140,7 +138,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 - `bg_color` - 卡片背景颜色 _（十六进制色码）_ **或者** 以 _angle,start,end_ 的形式渐变
 - `hide_border` - 隐藏卡的边框 _(布尔值)_
 - `theme` - 主题名称，从[所有可用主题](../themes/README.md)中选择
- `cache_seconds` - 手动设置缓存头 _（最小值: 14400，最大值: 86400）_
+- `cache_seconds` - 手动设置缓存头 _（最小值: 1800，最大值: 86400）_
 - `locale` - 在卡片中设置语言 _(例如 cn, de, es, 等等)_

 ##### bg_color 渐变
@@ -171,7 +169,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr

 - `hide` - 从卡片中隐藏指定语言 _(Comma seperated values)_
 - `hide_title` - _(boolean)_
- `layout` - 提供五種佈局 `normal` & `compact` & `donut` & `donut-vertical` & `pie` 间切换
+- `layout` - 在两个可用布局 `default` & `compact` 间切换
 - `card_width` - 手动设置卡片的宽度 _(number)_

 > :warning: **重要:**
@@ -54,8 +54,6 @@
    <a href="/docs/readme_nl.md">Nederlands</a>
    .
    <a href="/docs/readme_np.md">नेपाली</a>
-    .
-    <a href="/docs/readme_tr.md">Türkçe</a>
  </p>
 </p>
 <p align="center">Du magst das Projekt? Wie wäre es mit einer kleinen <a href="https://www.paypal.me/anuraghazra">Spende</a> um es weiterhin am Leben zu erhalten?
@@ -130,7 +128,7 @@ Du kannst das Erscheinungsbild deiner `Stats Card` oder `Repo Card`, mithilfe vo
 - `bg_color` - Hintergrundfarbe _(hex color)_ **oder** ein Farbverlauf in der Form von _winkel,start,ende_
 - `hide_border` - Blendet den Rand der Karte aus _(Boolean)_
 - `theme` - Name des Erscheinungsbildes/Themes [alle verfügbaren Themes](../themes/README.md)
- `cache_seconds` - manuelles festlegen der Cachezeiten _(min: 14400, max: 86400)_
+- `cache_seconds` - manuelles festlegen der Cachezeiten _(min: 1800, max: 86400)_
 - `locale` - Stellen Sie die Sprache auf der Karte ein _(z.B. cn, de, es, etc.)_

 ##### Farbverlauf in bg_color
@@ -161,7 +159,7 @@ Du kannst mehrere, mit Kommas separierte, Werte in der bg_color Option angeben,

 - `hide` - Verbirgt die angegebenen Sprachen von der Karte _(Komma separierte Werte)_
 - `hide_title` - _(Boolean)_
- `layout` - Wechseln Sie zwischen den fünf verfügbaren Layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`
+- `layout` - Wechsel zwischen den zwei verfügbaren Layouts `default` & `compact`
 - `card_width` - Lege die Breite der Karte manuell fest _(Zahl)_

 > :warning: **Wichtig:**
@@ -253,18 +251,18 @@ Du kannst die `&layout=compact` Option nutzen, um das Kartendesign zu ändern.
 Ändere `?username=` in den eigenen [Wakatime](https://wakatime.com)-Benutzernamen.

 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
 ```

 ### Beispiel

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&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=Harlok&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -142,7 +142,7 @@ Puedes personalizar el aspecto de tu `Tarjeta de Estadísticas` o `Tarjeta de Re
 - `bg_color` - Color de fondo _(hex color)_
 - `hide_border` - Oculta el borde de la tarjeta _(booleano)_
 - `theme` - Nombre del tema, elige uno de [todos los temas disponible ](../themes/README.md)
- `cache_seconds` - Cache _(min: 14400, max: 86400)_
+- `cache_seconds` - Cache _(min: 1800, max: 86400)_
 - `locale` - configurar el idioma en la tarjeta _(p.ej. cn, de, es, etc.)_

 ##### Gradiente en `bg_color`
@@ -175,7 +175,7 @@ Puedes pasar mútliples valores separados por coma en la opción `bg_color` para

 - `hide` - Oculta de la tarjeta los lenguajes especificados  _(valores separados por comas)_
 - `hide_title` - _(booleano)_
- `layout` - Cambiar entre los cinco diseños disponibles `normal` & `compact` & `donut` & `donut-vertical` & `pie`
+- `layout` - Cambia entre los dos diseños disponibles `default` & `compact`
 - `card_width` - Establece el ancho de la tarjeta manualmente _(número)_
 - `langs_count` - Muestra más lenguajes en la tarjeta, entre 1-10, por defecto 5 _(número)_
 - `exclude_repo` - Excluye los repositorios especificados  _(valores separados por comas)_
@@ -282,18 +282,18 @@ Puedes usar la opción `& layout = compact` para cambiar el diseño de la tarjet
 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=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
 ```

 ### Ejemplo

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&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=Harlok&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -343,7 +343,7 @@ Escoja cualquiera de los [temas por defecto](#themes)

 - Tarjeta de Wakatime

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -53,8 +53,6 @@
    <a href="/docs/readme_nl.md">Nederlands</a>
    .
    <a href="/docs/readme_np.md">नेपाली</a>
-    .
-    <a href="/docs/readme_tr.md">Türkçe</a>
  </p>
 </p>
 <p align="center">Vous aimez ce projet? Pensez <a href="https://www.paypal.me/anuraghazra">à faire un don</a> pour l'améliorer!
@@ -140,7 +138,7 @@ Vous pouvez personnaliser l'apparence de votre `Carte des stats` ou `Carte de d
 - `bg_color` - Couleur du fond de la carte _(hex color)_ **ou** un gradiant de la forme _angle,start,end_
 - `hide_border` - Cache la bordure de la carte _(booléen)_
 - `theme` - Nom du thème, parmis [tous les thèmes disponibles](../themes/README.md)
- `cache_seconds` - Paramétrer le cache manuellement _(min: 14400, max: 86400)_
+- `cache_seconds` - Paramétrer le cache manuellement _(min: 1800, max: 86400)_
 - `locale` - définir la langue de la carte _(par exemple. cn, de, es, etc.)_

 ##### Gradient in bg_color
@@ -171,7 +169,7 @@ Vous pouvez fournir plusieurs valeurs (suivie d'une virgule) dans l'option bg_co

 -   `hide` - Masquer les langages spécifiés sur la carte _(Comma seperated values)_
 -   `hide_title` - Masquer le titre _(boolean)_
-   `layout` - Alterner entre 5 mise en page `normal` & `compact` & `donut` & `donut-vertical` & `pie`
+-   `layout` - Alterner entre 2 mise en page `default` & `compact`
 -   `card_width` - Fixer la largeur de la carte manuellement _(number)_

 > :warning: **Important:**
@@ -53,8 +53,6 @@
    <a href="/docs/readme_nl.md">Nederlands</a>
    .
    <a href="/docs/readme_np.md">नेपाली</a>
-    .
-    <a href="/docs/readme_tr.md">Türkçe</a>
  </p>
 </p>
 <p align="center">Se ti piace questo progetto, considera la possibilità di <a href="https://www.paypal.me/anuraghazra">donare</a> per aiutare a renderlo migliore!
@@ -140,7 +138,7 @@ Puoi personalizzare l'aspetto delle tue `Stats Card` o delle `Repo Card` in qual
 - `bg_color` - Colore dello sfondo _(in esadecimale)_ **oppure** un gradiente nella forma _angolo,inizio,fine_
 - `hide_border` - Nasconde il bordo della carta _(booleano)_
 - `theme` - Nome del tema, dai un'occhiata a [tutti i temi disponibili](../themes/README.md)
- `cache_seconds` - Specifica manualmente il valore di cache, in secondi _(min: 14400, max: 86400)_
+- `cache_seconds` - Specifica manualmente il valore di cache, in secondi _(min: 1800, max: 86400)_
 - `locale` - Impostare la lingua nella scheda _(per esempio. cn, de, es, eccetera.)_

 ##### Gradiente nello sfondo
@@ -171,7 +169,7 @@ Puoi fornire valori separati da virgola nel parametro bg_color per creare un gra

 - `hide` - Nasconde un linguaggio specifico _(valori separati da virgola)_
 - `hide_title` - Nasconde il titolo _(booleano)_
- `layout` - Specificare il tipo di layout, `normal` (esteso), `compact` (compatto), `donut` (ciambella), `donut-vertical` (ciambella verticale) e `pie` (torta)
+- `layout` - Specifica il tipo di layout, `default` (esteso) o `compact` (compatto)
 - `card_width` - Specifica il valore della larghezza _(numero)_

 > :warning: **Importante:**
@@ -53,8 +53,6 @@
    <a href="/docs/readme_nl.md">Nederlands</a>
    .
    <a href="/docs/readme_np.md">नेपाली</a>
-    .
-    <a href="/docs/readme_tr.md">Türkçe</a>
  </p>
 </p>
 <p align="center">このプロジェクトを気に入っていただけましたか？<br>もしよろしければ、プロジェクトのさらなる改善のために<a href="https://www.paypal.me/anuraghazra">寄付</a>を検討して頂けると嬉しいです！</p>
@@ -141,7 +139,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 - `bg_color` - 背景の色 _(16 進数カラーコード)_ **または** _angle,start,end_ の形式でグラデーションを指定することも可
 - `hide_border` - カードの境界線を非表示にします _(ブール値)_
 - `theme` - [使用可能なテーマ一覧](../themes/README.md) から選んだテーマ名
- `cache_seconds` - キャッシュ時間の秒数 _(最小値: 14400, 最大値: 86400)_
+- `cache_seconds` - キャッシュ時間の秒数 _(最小値: 1800, 最大値: 86400)_
 - `locale` - カードに言語を設定する _(例えば cn, de, es, 等)_

 ##### bg_color の グラデーション指定
@@ -174,7 +172,7 @@ bg_color オプションで複数のカンマ区切りの値を指定してグ

 - `hide` - 特定の言語を隠す _(カンマ区切りで指定)_
 - `hide_title` - _(boolean)_
- `layout` - `normal` & `compact` & `donut` & `donut-vertical` & `pie` のいずれかのレイアウトに切り替える
+- `layout` - `default` か `compact` のいずれかのレイアウトに切り替える
 - `card_width` - カードの横幅 _(number)_
 - `langs_count` - 表示される言語の数　_(1 ~ 10, 初期値 5)_
 - `exclude_repo` - 指定されたリポジトリを除外する _(カンマ区切りで指定)_
@@ -53,8 +53,6 @@
    <a href="/docs/readme_nl.md">Nederlands</a>
    .
    <a href="/docs/readme_np.md">नेपाली</a>
-    .
-    <a href="/docs/readme_tr.md">Türkçe</a>
  </p>
 </p>
 <p align="center">기능들이 마음에 드시나요? 괜찮으시다면, 서비스 개선을 위해 <a href="https://www.paypal.me/anuraghazra">기부</a>를 고려해주세요!
@@ -151,7 +149,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 - `bg_color` - 카드의 배경 색상 _(hex color)_ **혹은** 다음 양식으로 그라데이션 주기 _angle,start,end_
 - `hide_border` - 카드의 테두리 표시 여부 _(boolean)_
 - `theme` - 테마의 이름, [사용 가능한 모든 테마](../themes/README.md) 에서 선택
- `cache_seconds` - 수동으로 캐시 헤더 설정 _(min: 14400, max: 86400)_
+- `cache_seconds` - 수동으로 캐시 헤더 설정 _(min: 1800, max: 86400)_
 - `locale` - 카드에 표시할 언어 _(e.g. kr, cn, de, es, etc.)_

 ##### 배경에 그라데이션 주기
@@ -189,7 +187,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr

 - `hide` - 카드에서 특정 언어 제외 _(Comma-separated values)_
 - `hide_title` - 타이틀 제외 _(boolean)_
- `layout` - 5가지 값 사용 가능, `normal` & `compact` & `donut` & `donut-vertical` & `pie` 중 표시 형태 선택
+- `layout` - 사용 가능한 두 가지 값, `default` & `compact` 중 표시 형태 선택
 - `card_width` - 카드 너비 직접 설정 _(number)_
 - `langs_count` - 카드에 표시할 언어의 수 (1-10 사이, 기본 값 : 5) _(number)_
 - `exclude_repo` - 통계에 제외할 저장소 지정 _(Comma-separated values)_
@@ -298,18 +296,18 @@ _참고:
 `?username=` 속성의 값을 [Wakatime](https://wakatime.com) 계정의 사용자 명(닉네임)으로 바꿔주세요.

 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
 ```

 ### 미리보기

-[![Harlok 님의 wakatime 통계](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod 님의 wakatime 통계](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

-[![Harlok 님의 wakatime 통계](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod 님의 wakatime 통계](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)

 - 컴팩트한 레이아웃

-[![Harlok 님의 wakatime 통계](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod 님의 wakatime 통계](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -359,7 +357,7 @@ _참고:

 - Wakatime 카드

-[![Harlok 님의 Wakatime 카드](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod 님의 Wakatime 카드](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -53,8 +53,6 @@
    <a href="/docs/readme_nl.md">Nederlands</a>
    .
    <a href="/docs/readme_np.md">नेपाली</a>
-    .
-    <a href="/docs/readme_tr.md">Türkçe</a>
  </p>
 </p>
 <p align="center">Bevalt het project? <a href="https://www.paypal.me/anuraghazra">Doneer</a> om het te verbeteren!
@@ -144,7 +142,7 @@ Je kan het uiterlijk van je `Statistieken kaart` of `Repo kaart` aanpassen hoe j
 - `bg_color` - Achtergrond kleur van de kaart _(hex kleur)_ **of** een verloop van kleuren in het formaat van _graden,start,einde_
 - `hide_border` - Verbergt de rand van de kaart _(boolean)_
 - `theme` - Naam van het thema, kies uit [alle beschikbare thema\'s](../themes/README.md)
- `cache_seconds` - Stel de cache header handmatig in _(min: 14400, max: 86400)_
+- `cache_seconds` - Stel de cache header handmatig in _(min: 1800, max: 86400)_
 - `locale` - Stel taal van de kaart in _(e.g. cn, de, es, etc.)_

 ##### Kleurenverloop in bg_color (achtergrond kleur):
@@ -176,7 +174,7 @@ Je kan meerdere komma verdeelde waarden in de bg_color optie geven om een kleure

 - `hide` - Verbergt specifieke talen van de kaart _(komma gescheiden waardes)_
 - `hide_title` - _(boolean)_
- `layout` - Kies uit de vijf beschikbare lay-outs `normal` & `compact` & `donut` & `donut-vertical` & `pie`
+- `layout` - Keuze voor de twee beschikbare layouts `default` & `compact`
 - `card_width` - Stelt de breedte van de kaart handmatig in. _(nummer)_
 - `langs_count` - Laat meer talen op de kaart zien, waarde tussen 1-10, staat standaard op to 5 _(nummer)_
 - `exclude_repo` - Verbergt specifieke repositories _(komma gescheiden waardes)_
@@ -283,14 +281,14 @@ Je kan de `&layout=compact` optie gebruiken om het kaart ontwerp aan te passen.
 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=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
 ```

 ### Demo

-[![Harlok's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

-[![Harlok's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -340,7 +338,7 @@ Kies uit de [standaard thema\'s](#themes)

 - Wakatime kaart

-[![Harlok's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -49,12 +49,8 @@
    <a href="/docs/readme_it.md">Italiano</a>
    ·
    <a href="/docs/readme_kr.md">한국어</a>
-    .
-    <a href="/docs/readme_nl.md">Nederlands</a>
    ·
    <a href="/docs/readme_np.md">नेपाली</a>
-    .
-    <a href="/docs/readme_tr.md">Türkçe</a>
  </p>
 </p>
 <p align="center">परियोजना मनपर्‍यो? तपाईं मद्दत गर्न सक्नुहुन्छ <a href="https://www.paypal.me/anuraghazra">यो परियोजना</a> बढ्न 
@@ -142,7 +138,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 - `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_
 - `hide_border` - Hides the card's border _(boolean)_
 - `theme` - name of the theme, choose from [all available themes](./themes/README.md)
- `cache_seconds` - set the cache header manually _(min: 14400, max: 86400)_
+- `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_
 - `locale` - set the language in the card _(e.g. cn, de, es, etc.)_

 ##### Gradient in bg_color
@@ -174,7 +170,7 @@ You can provide multiple comma-separated values in bg_color option to render a g

 - `hide` - Hide the languages specified from the card _(Comma-separated values)_
 - `hide_title` - _(boolean)_
- `layout` - Switch between five available layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`. Default: `normal`.
+- `layout` - Switch between two available layouts `default` & `compact`
 - `card_width` - Set the card's width manually _(number)_
 - `langs_count` - Show more languages on the card, between 1-10, defaults to 5 _(number)_
 - `exclude_repo` - Exclude specified repositories _(Comma-separated values)_
@@ -279,14 +275,14 @@ 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.

 ```md
-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
 ```

 ###  डेमो

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -336,7 +332,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=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -141,7 +141,7 @@ Personalize a aparência do seu `Stats Card` ou `Repo Card` da maneira que desej
 - `bg_color` - Cor de fundo do cartão _(hex color)_
 - `hide_border` - Esconde a borda do cartão _(boleano)_
 - `theme` - Nome do tema, escolha em [todos os temas disponíveis](../themes/README.md)
- `cache_seconds` - Defina o cabeçalho do cache manualmente _(min: 14400, max: 86400)_
+- `cache_seconds` - Defina o cabeçalho do cache manualmente _(min: 1800, max: 86400)_
 - `locale` - defina o idioma no cartão _(por exemplo. cn, de, es, etc.)_

 > Nota sobre o cache: Cartões de repositório tem um cache padrão de 30 minutos (1800 segundos), se o número a contagem de forks e contagem de estrelas é menor que 1 mil o padrão é 2 horas (7200 segundos). Note também que o cache é limitado a um mínimo de 30 minutos e um máximo de 24 horas.
@@ -164,7 +164,7 @@ Personalize a aparência do seu `Stats Card` ou `Repo Card` da maneira que desej

 - `hide` - Oculta linguagens específicas _(Valores separados por vírgulas)_
 - `hide_title` - Oculta o título _(boolean)_
- `layout` - Alternar entre os cinco layouts disponíveis `normal` & `compact` & `donut` & `donut-vertical` & `pie`
+- `layout` - Alterna entre os dois layouts disponíveis `default` & `compact`
 - `card_width` - Define a largura do cartão manualmente _(number)_

 > :warning: **Importante:**
@@ -242,14 +242,14 @@ Utilize a opção `&layout=compact` para mudar o layout do cartão.
 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=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
 ```

 ### Demonstração

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -143,7 +143,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 - `bg_color` - Kartın arkaplan rengi _(hex color / hex rengi)_ **ya da** gradient şeklinde _açı,başlangıç,bitiş_
 - `hide_border` - Kartın çerçevelerini gizler _(boolean)_
 - `theme` - Temanın rengi [tüm temalar](./themes/README.md)
- `cache_seconds` - Manuel olarak cache'i belirleyebilirsiniz _(en az: 14400, en fazla: 86400)_
+- `cache_seconds` - Manuel olarak cache'i belirleyebilirsiniz _(en az: 1800, en fazla: 86400)_
 - `locale` - Karttaki dili seçebilirsiniz _(örneğin; tr, cn, de, es, vb.)_

 ##### bg_color'da Gradient
@@ -176,7 +176,7 @@ bg_color içerisinde birden fazla rengi gradient olarak göstermek için virgül

 - `hide` - Belirli bir dili listede gizler _(Virgül ile ayırılmış değerlerle)_
 - `hide_title` - _(boolean)_
- `layout` - Beş uygun tasarım / düzen arasında geçiş yapın `normal` & `compact` & `donut` & `donut-vertical` & `pie`
+- `layout` - Uygun olan iki tasarım / layout arasında değişiklik yapar `default` & `compact`
 - `card_width` - Kartın genişliğini manuel olarak belirler _(number)_
 - `langs_count` - 1-10 arasında istediğiniz kadar dil gösterebilirsiniz. Varsayılan: 5 _(number)_
 - `exclude_repo` - Belirli repoları listeden çıkartır _(Virgül ile ayırılmış değerlerle)_
@@ -282,18 +282,18 @@ Endpoint: `api/top-langs?username=mustafacagri`
 `?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=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
 ```

 ### Demo

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&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=Harlok&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -343,7 +343,7 @@ Endpoint: `api/top-langs?username=mustafacagri`

 - Wakatime kart

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

 ---

@@ -409,7 +409,7 @@ Teşekkürler! :heart:

 ---

-[![https://vercel.com?utm_source=github_readme_stats_team&utm_campaign=oss](../powered-by-vercel.svg)](https://vercel.com?utm_source=github_readme_stats_team&utm_campaign=oss)
+[![https://vercel.com?utm_source=github_readme_stats_team&utm_campaign=oss](./powered-by-vercel.svg)](https://vercel.com?utm_source=github_readme_stats_team&utm_campaign=oss)


 Katkılara açığız! <3
@@ -1,15 +0,0 @@
-import statsCard from "./api/index.js";
-import repoCard from "./api/pin.js";
-import langCard from "./api/top-langs.js";
-import wakatimeCard from "./api/wakatime.js";
-import express from "express";
-import dotenv from "dotenv";
-
-dotenv.config();
-const app = express();
-app.listen(process.env.port || 9000);
-
-app.get("/", statsCard);
-app.get("/pin", repoCard);
-app.get("/top-langs", langCard);
-app.get("/wakatime", wakatimeCard);
@@ -45,12 +45,12 @@
    "husky": "^8.0.0",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.0.3",
+    "jest-svg-snapshot": "^0.1.0",
    "js-yaml": "^4.1.0",
    "lint-staged": "^13.0.3",
    "lodash.snakecase": "^4.1.1",
    "parse-diff": "^0.7.0",
-    "prettier": "^2.1.2",
-    "vercel": "^29.4.0"
+    "prettier": "^2.8.3"
  },
  "dependencies": {
    "axios": "^0.24.0",
@@ -66,7 +66,7 @@
 <p align="center">Love the project? Please consider <a href="https://www.paypal.me/anuraghazra">donating</a> to help it improve!</p>

 <a href="https://indiafightscorona.giveindia.org">
-  <img src="https://cfstatic.give.do/logo.png" alt="Give india logo" width="200" />
+  <img src="https://indiaspora.org/wp-content/uploads/2021/04/give-India-logo.png" alt="Give india logo" width="200" />
 </a>

 Are you considering supporting the project by donating? Please DO NOT!!
@@ -92,9 +92,7 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
    -   [Repo Card Exclusive Options](#repo-card-exclusive-options)
    -   [Language Card Exclusive Options](#language-card-exclusive-options)
    -   [Wakatime Card Exclusive Option](#wakatime-card-exclusive-options)
-   [Deploy Yourself](#deploy-on-your-own)
-    -   [On Vercel](#on-vercel)
-    -   [On other platforms](#on-other-platforms)
+-   [Deploy Yourself](#deploy-on-your-own-vercel-instance)
    -   [Keep your fork up to date](#keep-your-fork-up-to-date)

 # GitHub Stats Card
@@ -135,7 +133,7 @@ You can add the count of all your private contributions to the total commits cou

 ### Showing icons

-To enable icons, you can pass `&show_icons=true` in the query param, like so:
+To enable icons, you can pass `show_icons=true` in the query param, like so:

 ```md
 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
@@ -183,7 +181,7 @@ We have included a `transparent` theme that has a transparent background. This t

 ##### Add transparent alpha channel to a themes bg_color

-You can use the `bg_color` parameter to make any of [the available themes](./themes/README.md) transparent. This is done by setting the `bg_color` to a color with a transparent alpha channel (i.e. `bg_color=00000000`):
+You can use the `bg_color` parameter to make any of [the available themes](./themes/README.md) transparent. This is done by setting the `bg_color` to a colour with a transparent alpha channel (i.e. `bg_color=00000000`):

 ```md
 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000)
@@ -216,10 +214,10 @@ You can use [GitHub's theme context](https://github.blog/changelog/2021-11-24-sp
 ##### Use GitHub's new media feature

 You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) in HTML to specify whether to display images for light or dark themes. This is done using the HTML `<picture>` element in combination with the `prefers-color-scheme` media feature.
-
+  
 ```html
 <picture>
-<source
+<source 
  srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
  media="(prefers-color-scheme: dark)"
 />
@@ -235,7 +233,7 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1
 <summary>:eyes: Show example</summary>

 <picture>
-<source
+<source 
  srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
  media="(prefers-color-scheme: dark)"
 />
@@ -260,7 +258,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
 -   `border_color` - Card's border color _(hex color)_. Default: `e4e2e2` (Does not apply when `hide_border` is enabled).
 -   `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_. Default: `fffefe`
 -   `hide_border` - Hides the card's border _(boolean)_. Default: `false`
-   `theme` - name of the theme, choose from [all available themes](./themes/README.md). Default: `default` theme.
+-   `theme` - name of the theme, choose from [all available themes](./themes/README.md). Default: `default` theme. 
 -   `cache_seconds` - set the cache header manually _(min: 14400, max: 86400)_. Default: `14400 seconds (4 hours)`.
 -   `locale` - set the language in the card _(e.g. cn, de, es, etc.)_. Default: `en`.
 -   `border_radius` - Corner rounding on the card. Default: `4.5`.
@@ -280,7 +278,6 @@ You can provide multiple comma-separated values in the bg_color option to render
 -   `hide_title` - _(boolean)_. Default: `false`.
 -   `card_width` - Set the card's width manually _(number)_. Default: `500px  (approx.)`.
 -   `hide_rank` - _(boolean)_ hides the rank and automatically resizes the card width. Default: `false`.
-   `rank_icon` - Shows alternative rank icon (i.e. `github` or `default`). Default: `default`.
 -   `show_icons` - _(boolean)_. Default: `false`.
 -   `include_all_commits` - Count total commits instead of just the current year commits _(boolean)_. Default: `false`.
 -   `count_private` - Count private commits _(boolean)_. Default: `false`.
@@ -290,7 +287,6 @@ You can provide multiple comma-separated values in the bg_color option to render
 -   `text_bold` - Use bold text _(boolean)_. Default: `true`.
 -   `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
 -   `ring_color` - Color of the rank circle _(hex color)_. Defaults to the theme ring color if it exists and otherwise the title color.
-   `number_format` - Switch between two available formats for displaying the card values `short` (i.e. `6.6k`) and `long` (i.e. `6626`). Default: `short`.

 > **Note**
 > When hide_rank=`true`, the minimum card width is 270 px + the title length and padding.
@@ -303,15 +299,12 @@ You can provide multiple comma-separated values in the bg_color option to render

 -   `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`.
 -   `hide_title` - _(boolean)_. Default: `false`.
-   `layout` - Switch between five available layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`. Default: `normal`.
+-   `layout` - Switch between two available layouts `default` & `compact`. Default: `default`.
 -   `card_width` - Set the card's width manually _(number)_. Default `300`.
 -   `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default `5`.
 -   `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`.
 -   `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`.
 -   `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
-   `hide_progress` - It uses the compact layout option, hides percentages, and removes the bars. Default: `false`.
-   `size_weight` - Configures language stats algorithm _(number)_ (see [Language stats algorithm](#Language-stats-algorithm)), defaults to 1.
-   `count_weight` - Configures language stats algorithm _(number)_ (see [Language stats algorithm](#Language-stats-algorithm)), defaults to 0.

 > **Warning**
 > Language names should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding)
@@ -361,7 +354,7 @@ Use [show_owner](#customization) variable to include the repo's owner username
 The top languages card shows a GitHub user's most frequently used top language.

 > **Note**
-> Top Languages does not indicate the user's skill level or anything like that; it's a GitHub metric to determine which languages have the most code on GitHub. It is a new feature of github-readme-stats.
+> Top Languages does not indicate my skill level or anything like that; it's a GitHub metric to determine which languages have the most code on GitHub. It is a new feature of github-readme-stats.

 ### Usage

@@ -373,24 +366,6 @@ Endpoint: `api/top-langs?username=anuraghazra`
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
 ```

-### Language stats algorithm
-
-We use the following algorithm to calculate the languages percentages on the language card:
-
-```js
-ranking_index = (byte_count ^ size_weight) * (repo_count ^ count_weight)
-```
-
-By default, only the byte count is used for determining the languages percentages shown on the language card (i.e. `size_weight=1` and `count_weight=0`). You can, however, use the `&size_weight=` and `&count_weight=` options to weight the language usage calculation. The values must be positive real numbers. [More details about the algorithm can be found here](https://github.com/anuraghazra/github-readme-stats/issues/1600#issuecomment-1046056305).
-
-   `&size_weight=1&count_weight=0` - _(default)_ Orders by byte count.
-   `&size_weight=0.5&count_weight=0.5` - _(recommended)_ Uses both byte and repo count for ranking
-   `&size_weight=0&count_weight=1` - Orders by repo count
-
-```md
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&size_weight=0.5&count_weight=0.5)](https://github.com/anuraghazra/github-readme-stats)
-```
-
 ### Exclude individual repositories

 You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repositories.
@@ -423,38 +398,6 @@ You can use the `&layout=compact` option to change the card design.
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
 ```

-### Donut Chart Language Card Layout
-
-You can use the `&layout=donut` option to change the card design.
-
-```md
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=donut)](https://github.com/anuraghazra/github-readme-stats)
-```
-
-### Donut Vertical Chart Language Card Layout
-
-You can use the `&layout=donut-vertical` option to change the card design.
-
-```md
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=donut-vertical)](https://github.com/anuraghazra/github-readme-stats)
-```
-
-### Pie Chart Language Card Layout
-
-You can use the `&layout=pie` option to change the card design.
-
-```md
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=pie)](https://github.com/anuraghazra/github-readme-stats)
-```
-
-### Hide Progress Bars
-
-You can use the `&hide_progress=true` option to hide the percentages and the progress bars (layout will be automatically set to `compact`).
-
-```md
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
-```
-
 ### Demo

 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
@@ -463,28 +406,12 @@ 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&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

-   Donut Chart layout
-
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=donut)](https://github.com/anuraghazra/github-readme-stats)
-
-   Donut Vertical Chart layout
-
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=donut-vertical)](https://github.com/anuraghazra/github-readme-stats)
-
-   Pie Chart layout
-
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=pie)](https://github.com/anuraghazra/github-readme-stats)
-
-   Hidden progress bars
-
-[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
-
 # Wakatime Week Stats

 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=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)
 ```

 > **Note**:
@@ -492,13 +419,13 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username.

 ### Demo

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)

 -   Compact layout

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

 * * *

@@ -516,10 +443,6 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username.

 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=issues&show_icons=true)

-   Shows Github logo instead rank level
-
-![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&rank_icon=github)
-
 -   Customize Border Color

 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&border_color=2e4058)
@@ -556,7 +479,7 @@ Choose from any of the [default themes](#themes)

 -   WakaTime card

-[![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](https://github.com/anuraghazra/github-readme-stats)

 * * *

@@ -573,9 +496,7 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
 </a>
 ```

-## Deploy on your own
-
-### On Vercel
+## Deploy on your own Vercel instance

 #### :film_projector: [Check Out Step By Step Video Tutorial By @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)

@@ -612,23 +533,6 @@ Since the GitHub API only allows 5k requests per hour, my `https://github-readme

 </details>

-### On other platforms
-
-> **Warning**
-> This way of using GRS is not officially supported and was added to cater to some particular use cases where Vercel could not be used (e.g. #2341). The support for this method, therefore, is limited.
-
-<details>
-<summary><b>:hammer_and_wrench: Step-by-step guide for deploying on other platforms</b></summary>
-
-1.  Fork or clone this repo as per your needs
-2.  Add `express` to the dependencies section of `package.json`
-    <https://github.com/anuraghazra/github-readme-stats/blob/ba7c2f8b55eac8452e479c8bd38b044d204d0424/package.json#L54-L61>
-3.  Run `npm i` if needed (initial setup)
-4.  Run `node express.js` to start the server, or set the entry point to `express.js` in `package.json` if you're deploying on a managed service
-    <https://github.com/anuraghazra/github-readme-stats/blob/ba7c2f8b55eac8452e479c8bd38b044d204d0424/package.json#L11>
-5.  You're done 🎉
-    </details>
-
 ### Keep your fork up to date

 You can keep your fork, and thus your private Vercel instance up to date with the upstream using GitHubs' [Sync Fork button](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork). You can also use the [pull](https://github.com/wei/pull) package created by [@wei](https://github.com/wei) to automate this process.
@@ -26,9 +26,9 @@ const FAIL_TEXT = `
  \rUnfortunately, your theme PR contains an error or does not adhere to our [theme guidelines](https://github.com/anuraghazra/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution). Please fix the issues below, and we will review your\
  \r PR again. This pull request will **automatically close in 20 days** if no changes are made. After this time, you must re-open the PR for it to be reviewed.
 `;
-const THEME_CONTRIB_GUIDELINES = `
+const THEME_CONTRIB_GUIDELINESS = `
  \rHi, thanks for the theme contribution. Please read our theme [contribution guidelines](https://github.com/anuraghazra/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution).
-  \rWe are currently only accepting color combinations from any VSCode theme or themes with good color combinations to minimize bloating the themes collection.
+  \rWe are currently only accepting color combinations from any VSCode theme or themes with good colour combinations to minimize bloating the themes collection.

  \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).
 `;
@@ -43,23 +43,6 @@ const ACCEPTED_COLOR_PROPS = Object.keys(COLOR_PROPS);
 const REQUIRED_COLOR_PROPS = ACCEPTED_COLOR_PROPS.slice(0, 4);
 const INVALID_REVIEW_COMMENT = (commentUrl) =>
  `Some themes are invalid. See the [Automated Theme Preview](${commentUrl}) comment above for more information.`;
-var OCTOKIT;
-var OWNER;
-var REPO;
-var PULL_REQUEST_ID;
-
-/**
- * Incorrect JSON format error.
- * @extends Error
- * @param {string} message Error message.
- * @returns {Error} IncorrectJsonFormatError.
- */
-class IncorrectJsonFormatError extends Error {
-  constructor(message) {
-    super(message);
-    this.name = "IncorrectJsonFormatError";
-  }
-}

 /**
 * Retrieve PR number from the event payload.
@@ -143,36 +126,15 @@ const findComment = async (octokit, issueNumber, owner, repo, commenter) => {
 * Create or update the preview comment.
 *
 * @param {Object} octokit Octokit instance.
- * @param {number} issueNumber Issue number.
- * @param {Object} repo Repository name.
- * @param {Object} owner Owner of the repository.
- * @param {number} commentId Comment ID.
- * @param {string} body Comment body.
+ * @param {Object} props Comment properties.
 * @return {string} The comment URL.
 */
-const upsertComment = async (
-  octokit,
-  issueNumber,
-  repo,
-  owner,
-  commentId,
-  body,
-) => {
+const upsertComment = async (octokit, props) => {
  let resp;
-  if (commentId !== undefined) {
-    resp = await octokit.issues.updateComment({
-      owner,
-      repo,
-      comment_id: commentId,
-      body,
-    });
+  if (props.comment_id !== undefined) {
+    resp = await octokit.issues.updateComment(props);
  } else {
-    resp = await octokit.issues.createComment({
-      owner,
-      repo,
-      issue_number: issueNumber,
-      body,
-    });
+    resp = await octokit.issues.createComment(props);
  }
  return resp.data.html_url;
 };
@@ -307,38 +269,22 @@ const parseJSON = (json) => {
    if (typeof parsedJson === "object") {
      return parsedJson;
    } else {
-      throw new IncorrectJsonFormatError(
-        "PR diff is not a valid theme JSON object.",
-      );
+      throw new Error("PR diff is not a valid theme JSON object.");
    }
  } catch (error) {
-    // Remove trailing commas (if any).
-    let parsedJson = json.replace(/(,\s*})/g, "}");
-
-    // Remove JS comments (if any).
-    parsedJson = parsedJson.replace(/\/\/[A-z\s]*\s/g, "");
-
-    // Fix incorrect open bracket (if any).
-    const splitJson = parsedJson
+    let parsedJson = json
      .split(/([\s\r\s]*}[\s\r\s]*,[\s\r\s]*)(?=[\w"-]+:)/)
-      .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])) {
-        splitJson.push(splitJson.shift());
+      .filter((x) => typeof x !== "string" || !!x.trim());
+    if (parsedJson[0].replace(/\s+/g, "") === "},") {
+      parsedJson[0] = "},";
+      if (!/\s*}\s*,?\s*$/.test(parsedJson[1])) {
+        parsedJson.push(parsedJson.shift());
      } else {
-        splitJson.shift();
+        parsedJson.shift();
      }
-      parsedJson = splitJson.join("");
-    }
-
-    // Try to parse the fixed json.
-    try {
-      return Hjson.parse(parsedJson);
-    } catch (error) {
-      throw new IncorrectJsonFormatError(
-        `Theme JSON file could not be parsed: ${error.message}`,
-      );
+      return Hjson.parse(parsedJson.join(""));
+    } else {
+      throw error;
    }
  }
 };
@@ -352,64 +298,53 @@ const themeNameAlreadyExists = (name) => {
  return themes[name] !== undefined;
 };

-const DRY_RUN = process.env.DRY_RUN === "true" || false;
-
 /**
 * Main function.
 */
-export const run = async () => {
+export const run = async (prNumber) => {
  try {
+    const dryRun = process.env.DRY_RUN === "true" || false;
    debug("Retrieve action information from context...");
    debug(`Context: ${inspect(github.context)}`);
    let commentBody = `
      \r# ${COMMENT_TITLE}
-      \r${THEME_CONTRIB_GUIDELINES}
+      \r${THEME_CONTRIB_GUIDELINESS}
    `;
    const ccc = new ColorContrastChecker();
-    OCTOKIT = github.getOctokit(getGithubToken());
-    PULL_REQUEST_ID = getPrNumber();
-    const { owner, repo } = getRepoInfo(github.context);
-    OWNER = owner;
-    REPO = repo;
+    const octokit = github.getOctokit(getGithubToken());
+    const pullRequestId = prNumber ? prNumber : getPrNumber();
    const commenter = getCommenter();
-    PULL_REQUEST_ID = getPrNumber();
-    debug(`Owner: ${OWNER}`);
-    debug(`Repo: ${REPO}`);
+    const { owner, repo } = getRepoInfo(github.context);
+    debug(`Owner: ${owner}`);
+    debug(`Repo: ${repo}`);
    debug(`Commenter: ${commenter}`);

    // Retrieve the PR diff and preview-theme comment.
    debug("Retrieve PR diff...");
-    const res = await OCTOKIT.pulls.get({
-      owner: OWNER,
-      repo: REPO,
-      pull_number: PULL_REQUEST_ID,
+    const res = await octokit.pulls.get({
+      owner,
+      repo,
+      pull_number: pullRequestId,
      mediaType: {
        format: "diff",
      },
    });
    debug("Retrieve preview-theme comment...");
    const comment = await findComment(
-      OCTOKIT,
-      PULL_REQUEST_ID,
-      OWNER,
-      REPO,
+      octokit,
+      pullRequestId,
+      owner,
+      repo,
      commenter,
    );

    // Retrieve theme changes from the PR diff.
    debug("Retrieve themes...");
    const diff = parse(res.data);
-
-    // Retrieve all theme changes from the PR diff and convert to JSON.
-    debug("Retrieve theme changes...");
    const content = diff
      .find((file) => file.to === "themes/index.js")
-      .chunks.map((chunk) =>
-        chunk.changes
-          .filter((c) => c.type === "add")
-          .map((c) => c.content.replace("+", ""))
-          .join(""),
-      )
+      .chunks[0].changes.filter((c) => c.type === "add")
+      .map((c) => c.content.replace("+", ""))
      .join("");
    const themeObject = parseJSON(content);
    if (
@@ -578,15 +513,14 @@ export const run = async () => {
    // Create or update theme-preview comment.
    debug("Create or update theme-preview comment...");
    let comment_url;
-    if (!DRY_RUN) {
-      comment_url = await upsertComment(
-        OCTOKIT,
-        PULL_REQUEST_ID,
-        REPO,
-        OWNER,
-        comment?.id,
-        commentBody,
-      );
+    if (!dryRun) {
+      comment_url = await upsertComment(octokit, {
+        comment_id: comment?.id,
+        issue_number: pullRequestId,
+        owner,
+        repo,
+        body: commentBody,
+      });
    } else {
      info(`DRY_RUN: Comment body: ${commentBody}`);
      comment_url = "";
@@ -601,20 +535,20 @@ export const run = async () => {
    const reviewReason = themesValid
      ? undefined
      : INVALID_REVIEW_COMMENT(comment_url);
-    if (!DRY_RUN) {
+    if (!dryRun) {
      await addReview(
-        OCTOKIT,
-        PULL_REQUEST_ID,
-        OWNER,
-        REPO,
+        octokit,
+        pullRequestId,
+        owner,
+        repo,
        reviewState,
        reviewReason,
      );
      await addRemoveLabel(
-        OCTOKIT,
-        PULL_REQUEST_ID,
-        OWNER,
-        REPO,
+        octokit,
+        pullRequestId,
+        owner,
+        repo,
        "invalid",
        !themesValid,
      );
@@ -624,22 +558,20 @@ export const run = async () => {
    }
  } catch (error) {
    debug("Set review state to `REQUEST_CHANGES` and add `invalid` label...");
-    if (!DRY_RUN) {
+    if (!dryRun) {
      await addReview(
-        OCTOKIT,
-        PULL_REQUEST_ID,
-        OWNER,
-        REPO,
+        octokit,
+        pullRequestId,
+        owner,
+        repo,
        "REQUEST_CHANGES",
-        "**Something went wrong in the theme preview action:** `" +
-          error.message +
-          "`",
+        error.message,
      );
      await addRemoveLabel(
-        OCTOKIT,
-        PULL_REQUEST_ID,
-        OWNER,
-        REPO,
+        octokit,
+        pullRequestId,
+        owner,
+        repo,
        "invalid",
        true,
      );
@@ -6,7 +6,6 @@ export BRANCH_NAME=updated-theme-readme
 git --version
 git config --global user.email "no-reply@githubreadmestats.com"
 git config --global user.name "GitHub Readme Stats Bot"
-git config --global --add safe.directory ${GITHUB_WORKSPACE}
 git branch -d $BRANCH_NAME || true
 git checkout -b $BRANCH_NAME
 git add --all
@@ -29,14 +29,13 @@ const normalcdf = (mean, sigma, to) => {
 /**
 * Calculates the users rank.
 *
- * @param {object} params Parameters on which the user's rank depends.
- * @param {number} params.totalRepos Total number of repos.
- * @param {number} params.totalCommits Total number of commits.
- * @param {number} params.contributions The number of contributions.
- * @param {number} params.followers The number of followers.
- * @param {number} params.prs The number of pull requests.
- * @param {number} params.issues The number of issues.
- * @param {number} params.stargazers The number of stars.
+ * @param {number} totalRepos Total number of repos.
+ * @param {number} totalCommits Total number of commits.
+ * @param {number} contributions The number of contributions.
+ * @param {number} followers The number of followers.
+ * @param {number} prs The number of pull requests.
+ * @param {number} issues The number of issues.
+ * @param {number} stargazers The number of stars.
 * @returns {{level: string, score: number}}} The users rank.
 */
 const calculateRank = ({
@@ -1,7 +1,7 @@
 // @ts-check
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { icons, rankIcon } from "../common/icons.js";
+import { icons } from "../common/icons.js";
 import {
  clampValue,
  flexLayout,
@@ -20,16 +20,14 @@ const RANK_CARD_DEFAULT_WIDTH = 450;
 /**
 * Create a stats card text item.
 *
- * @param {object} createTextNodeParams Object that contains the createTextNode parameters.
- * @param {string} createTextNodeParams.icon The icon to display.
+ * @param {object[]} createTextNodeParams Object that contains the createTextNode parameters.
 * @param {string} createTextNodeParams.label The label to display.
- * @param {number} createTextNodeParams.value The value to display.
+ * @param {string} createTextNodeParams.value The value to display.
 * @param {string} createTextNodeParams.id The id of the stat.
 * @param {number} createTextNodeParams.index The index of the stat.
 * @param {boolean} createTextNodeParams.showIcons Whether to show icons.
 * @param {number} createTextNodeParams.shiftValuePos Number of pixels the value has to be shifted to the right.
 * @param {boolean} createTextNodeParams.bold Whether to bold the label.
- * @param {string} createTextNodeParams.number_format The format of numbers on card.
 * @returns
 */
 const createTextNode = ({
@@ -41,10 +39,8 @@ const createTextNode = ({
  showIcons,
  shiftValuePos,
  bold,
-  number_format,
 }) => {
-  const kValue =
-    number_format.toLowerCase() === "long" ? value : kFormatter(value);
+  const kValue = kFormatter(value);
  const staggerDelay = (index + 3) * 150;

  const labelOffset = showIcons ? `x="25"` : "";
@@ -107,10 +103,8 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
    custom_title,
    border_radius,
    border_color,
-    number_format = "short",
    locale,
    disable_animations = false,
-    rank_icon = "default",
  } = options;

  const lheight = parseInt(String(line_height), 10);
@@ -185,7 +179,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
    "nl",
    "zh-tw",
  ];
-  const isLongLocale = longLocales.includes(locale);
+  const isLongLocale = longLocales.includes(locale) === true;

  // filter out hidden stats defined by user & create the text nodes
  const statItems = Object.keys(STATS)
@@ -198,7 +192,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
        showIcons: show_icons,
        shiftValuePos: 79.01 + (isLongLocale ? 50 : 0),
        bold: text_bold,
-        number_format,
      }),
    );

@@ -297,7 +290,15 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
        <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
        <circle class="rank-circle" cx="-10" cy="8" r="40" />
        <g class="rank-text">
-          ${rankIcon(rank_icon, rank?.level)}
+          <text
+            x="-5"
+            y="3"
+            alignment-baseline="central"
+            dominant-baseline="central"
+            text-anchor="middle"
+          >
+            ${rank.level}
+          </text>
        </g>
      </g>`;

@@ -13,7 +13,7 @@ import {
 import { langCardLocales } from "../translations.js";

 const DEFAULT_CARD_WIDTH = 300;
-const MIN_CARD_WIDTH = 280;
+const MIN_CARD_WIDTH = 230;
 const DEFAULT_LANGS_COUNT = 5;
 const DEFAULT_LANG_COLOR = "#858585";
 const CARD_PADDING = 25;
@@ -36,164 +36,13 @@ const getLongestLang = (arr) =>
  );

 /**
- * Convert degrees to radians.
- *
- * @param {number} angleInDegrees Angle in degrees.
- * @returns Angle in radians.
- */
-const degreesToRadians = (angleInDegrees) => angleInDegrees * (Math.PI / 180.0);
-
-/**
- * Convert radians to degrees.
- *
- * @param {number} angleInRadians Angle in radians.
- * @returns Angle in degrees.
- */
-const radiansToDegrees = (angleInRadians) => angleInRadians / (Math.PI / 180.0);
-
-/**
- * Convert polar coordinates to cartesian coordinates.
- *
- * @param {number} centerX Center x coordinate.
- * @param {number} centerY Center y coordinate.
- * @param {number} radius Radius of the circle.
- * @param {number} angleInDegrees Angle in degrees.
- * @returns {{x: number, y: number}} Cartesian coordinates.
- */
-const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
-  const rads = degreesToRadians(angleInDegrees);
-  return {
-    x: centerX + radius * Math.cos(rads),
-    y: centerY + radius * Math.sin(rads),
-  };
-};
-
-/**
- * Convert cartesian coordinates to polar coordinates.
- *
- * @param {number} centerX Center x coordinate.
- * @param {number} centerY Center y coordinate.
- * @param {number} x Point x coordinate.
- * @param {number} y Point y coordinate.
- * @returns {{radius: number, angleInDegrees: number}} Polar coordinates.
- */
-const cartesianToPolar = (centerX, centerY, x, y) => {
-  const radius = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
-  let angleInDegrees = radiansToDegrees(Math.atan2(y - centerY, x - centerX));
-  if (angleInDegrees < 0) angleInDegrees += 360;
-  return { radius, angleInDegrees };
-};
-
-/**
- * Calculates length of circle.
- *
- * @param {number} radius Radius of the circle.
- * @returns {number} The length of the circle.
- */
-const getCircleLength = (radius) => {
-  return 2 * Math.PI * radius;
-};
-
-/**
- * Calculates height for the compact layout.
- *
- * @param {number} totalLangs Total number of languages.
- * @returns {number} Card height.
- */
-const calculateCompactLayoutHeight = (totalLangs) => {
-  return 90 + Math.round(totalLangs / 2) * 25;
-};
-
-/**
- * Calculates height for the normal layout.
- *
- * @param {number} totalLangs Total number of languages.
- * @returns {number} Card height.
- */
-const calculateNormalLayoutHeight = (totalLangs) => {
-  return 45 + (totalLangs + 1) * 40;
-};
-
-/**
- * Calculates height for the donut layout.
- *
- * @param {number} totalLangs Total number of languages.
- * @returns {number} Card height.
- */
-const calculateDonutLayoutHeight = (totalLangs) => {
-  return 215 + Math.max(totalLangs - 5, 0) * 32;
-};
-
-/**
- * Calculates height for the donut vertical layout.
- *
- * @param {number} totalLangs Total number of languages.
- * @returns {number} Card height.
- */
-const calculateDonutVerticalLayoutHeight = (totalLangs) => {
-  return 300 + Math.round(totalLangs / 2) * 25;
-};
-
-/**
- * Calculates height for the pie layout.
- *
- * @param {number} totalLangs Total number of languages.
- * @returns {number} Card height.
- */
-const calculatePieLayoutHeight = (totalLangs) => {
-  return 300 + Math.round(totalLangs / 2) * 25;
-};
-
-/**
- * Calculates the center translation needed to keep the donut chart centred.
- * @param {number} totalLangs Total number of languages.
- * @returns {number} Donut center translation.
- */
-const donutCenterTranslation = (totalLangs) => {
-  return -45 + Math.max(totalLangs - 5, 0) * 16;
-};
-
-/**
- * Trim top languages to lang_count while also hiding certain languages.
- *
- * @param {Record<string, Lang>} topLangs Top languages.
- * @param {string[]} hide Languages to hide.
- * @param {string} langs_count Number of languages to show.
- * @returns {{topLangs: Record<string, Lang>, totalSize: number}} Trimmed top languages and total size.
- */
-const trimTopLanguages = (topLangs, hide, langs_count) => {
-  let langs = Object.values(topLangs);
-  let langsToHide = {};
-  let langsCount = clampValue(parseInt(langs_count), 1, 10);
-
-  // populate langsToHide map for quick lookup
-  // while filtering out
-  if (hide) {
-    hide.forEach((langName) => {
-      langsToHide[lowercaseTrim(langName)] = true;
-    });
-  }
-
-  // filter out languages to be hidden
-  langs = langs
-    .sort((a, b) => b.size - a.size)
-    .filter((lang) => {
-      return !langsToHide[lowercaseTrim(lang.name)];
-    })
-    .slice(0, langsCount);
-
-  const totalLanguageSize = langs.reduce((acc, curr) => acc + curr.size, 0);
-
-  return { langs, totalLanguageSize };
-};
-
-/**
- * Create progress bar text item for a programming language.
+ * Creates a node to display usage of a programming language in percentage
+ * using text and a horizontal progress bar.
 *
 * @param {object} props Function properties.
 * @param {number} props.width The card width
- * @param {string} props.color Color of the programming language.
 * @param {string} props.name Name of the programming language.
+ * @param {string} props.color Color of the programming language.
 * @param {string} props.progress Usage of the programming language in percentage.
 * @param {number} props.index Index of the programming language.
 * @returns {string} Programming language SVG node.
@@ -222,16 +71,15 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => {
 };

 /**
- * Creates compact text item for a programming language.
+ * Creates a text only node to display usage of a programming language in percentage.
 *
 * @param {object} props Function properties.
 * @param {Lang} props.lang Programming language object.
 * @param {number} props.totalSize Total size of all languages.
- * @param {boolean} props.hideProgress Whether to hide percentage.
 * @param {number} props.index Index of the programming language.
 * @returns {string} Compact layout programming language SVG node.
 */
-const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => {
+const createCompactLangNode = ({ lang, totalSize, index }) => {
  const percentage = ((lang.size / totalSize) * 100).toFixed(2);
  const staggerDelay = (index + 3) * 150;
  const color = lang.color || "#858585";
@@ -240,22 +88,21 @@ const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => {
    <g class="stagger" style="animation-delay: ${staggerDelay}ms">
      <circle cx="5" cy="6" r="5" fill="${color}" />
      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${lang.name} ${hideProgress ? "" : percentage + "%"}
+        ${lang.name} ${percentage}%
      </text>
    </g>
  `;
 };

 /**
- * Create compact languages text items for all programming languages.
+ * Creates compact layout of text only language nodes.
 *
- * @param {object} props Function properties.
+ * @param {object[]} props Function properties.
 * @param {Lang[]} props.langs Array of programming languages.
 * @param {number} props.totalSize Total size of all languages.
- * @param {boolean} props.hideProgress Whether to hide percentage.
 * @returns {string} Programming languages SVG node.
 */
-const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
+const createLanguageTextNode = ({ langs, totalSize }) => {
  const longestLang = getLongestLang(langs);
  const chunked = chunkArray(langs, langs.length / 2);
  const layouts = chunked.map((array) => {
@@ -264,7 +111,6 @@ const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
      createCompactLangNode({
        lang,
        totalSize,
-        hideProgress,
        index,
      }),
    );
@@ -285,30 +131,7 @@ const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
 };

 /**
- * Create donut languages text items for all programming languages.
- *
- * @param {object} props Function properties.
- * @param {Lang[]} props.langs Array of programming languages.
- * @param {number} props.totalSize Total size of all languages.
- * @returns {string} Donut layout programming language SVG node.
- */
-const createDonutLanguagesNode = ({ langs, totalSize }) => {
-  return flexLayout({
-    items: langs.map((lang, index) => {
-      return createCompactLangNode({
-        lang,
-        totalSize,
-        hideProgress: false,
-        index,
-      });
-    }),
-    gap: 32,
-    direction: "column",
-  }).join("");
-};
-
-/**
- * Renders the default language card layout.
+ * Renders layout to display user's most frequently used programming languages.
 *
 * @param {Lang[]} langs Array of programming languages.
 * @param {number} width Card width.
@@ -332,15 +155,14 @@ const renderNormalLayout = (langs, width, totalLanguageSize) => {
 };

 /**
- * Renders the compact language card layout.
+ * Renders compact layout to display user's most frequently used programming languages.
 *
 * @param {Lang[]} langs Array of programming languages.
 * @param {number} width Card width.
 * @param {number} totalLanguageSize Total size of all languages.
- * @param {boolean} hideProgress Whether to hide progress bar.
 * @returns {string} Compact layout card SVG object.
 */
-const renderCompactLayout = (langs, width, totalLanguageSize, hideProgress) => {
+const renderCompactLayout = (langs, width, totalLanguageSize) => {
  const paddingRight = 50;
  const offsetWidth = width - paddingRight;
  // progressOffset holds the previous language's width and used to offset the next language
@@ -371,291 +193,75 @@ const renderCompactLayout = (langs, width, totalLanguageSize, hideProgress) => {
    .join("");

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

 /**
- * Renders donut vertical layout to display user's most frequently used programming languages.
+ * Calculates height for the compact layout.
 *
- * @param {Lang[]} langs Array of programming languages.
- * @param {number} totalLanguageSize Total size of all languages.
- * @returns {string} Compact layout card SVG object.
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Card height.
 */
-const renderDonutVerticalLayout = (langs, totalLanguageSize) => {
-  // Donut vertical chart radius and total length
-  const radius = 80;
-  const totalCircleLength = getCircleLength(radius);
+const calculateCompactLayoutHeight = (totalLangs) => {
+  return 90 + Math.round(totalLangs / 2) * 25;
+};

-  // SVG circles
-  let circles = [];
+/**
+ * Calculates height for the normal layout.
+ *
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Card height.
+ */
+const calculateNormalLayoutHeight = (totalLangs) => {
+  return 45 + (totalLangs + 1) * 40;
+};

-  // Start indent for donut vertical chart parts
-  let indent = 0;
+/**
+ *  Hides languages and trims the list to show only the top N languages.
+ *
+ * @param {Record<string, Lang>} topLangs Top languages.
+ * @param {string[]} hide Languages to hide.
+ * @param {string} langs_count Number of languages to show.
+ */
+const useLanguages = (topLangs, hide, langs_count) => {
+  let langs = Object.values(topLangs);
+  let langsToHide = {};
+  let langsCount = clampValue(parseInt(langs_count), 1, 10);

-  // Start delay coefficient for donut vertical chart parts
-  let startDelayCoefficient = 1;
-
-  // Generate each donut vertical chart part
-  for (const lang of langs) {
-    const percentage = (lang.size / totalLanguageSize) * 100;
-    const circleLength = totalCircleLength * (percentage / 100);
-    const delay = startDelayCoefficient * 100;
-
-    circles.push(`
-      <g class="stagger" style="animation-delay: ${delay}ms">
-        <circle 
-          cx="150"
-          cy="100"
-          r="${radius}"
-          fill="transparent"
-          stroke="${lang.color}"
-          stroke-width="25"
-          stroke-dasharray="${totalCircleLength}"
-          stroke-dashoffset="${indent}"
-          size="${percentage}"
-          data-testid="lang-donut"
-        />
-      </g>
-    `);
-
-    // Update the indent for the next part
-    indent += circleLength;
-    // Update the start delay coefficient for the next part
-    startDelayCoefficient += 1;
+  // populate langsToHide map for quick lookup
+  // while filtering out
+  if (hide) {
+    hide.forEach((langName) => {
+      langsToHide[lowercaseTrim(langName)] = true;
+    });
  }

-  return `
-    <svg data-testid="lang-items">
-      <g transform="translate(0, 0)">
-        <svg data-testid="donut">
-          ${circles.join("")}
-        </svg>
-      </g>
-      <g transform="translate(0, 220)">
-        <svg data-testid="lang-names" x="${CARD_PADDING}">
-          ${createLanguageTextNode({
-            langs,
-            totalSize: totalLanguageSize,
-            hideProgress: false,
-          })}
-        </svg>
-      </g>
-    </svg>
-  `;
+  // filter out languages to be hidden
+  langs = langs
+    .sort((a, b) => b.size - a.size)
+    .filter((lang) => {
+      return !langsToHide[lowercaseTrim(lang.name)];
+    })
+    .slice(0, langsCount);
+
+  const totalLanguageSize = langs.reduce((acc, curr) => acc + curr.size, 0);
+
+  return { langs, totalLanguageSize };
 };

 /**
- * Renders pie layout to display user's most frequently used programming languages.
- *
- * @param {Lang[]} langs Array of programming languages.
- * @param {number} totalLanguageSize Total size of all languages.
- * @returns {string} Compact layout card SVG object.
- */
-const renderPieLayout = (langs, totalLanguageSize) => {
-  // Pie chart radius and center coordinates
-  const radius = 90;
-  const centerX = 150;
-  const centerY = 100;
-
-  // Start angle for the pie chart parts
-  let startAngle = 0;
-
-  // Start delay coefficient for the pie chart parts
-  let startDelayCoefficient = 1;
-
-  // SVG paths
-  const paths = [];
-
-  // Generate each pie chart part
-  for (const lang of langs) {
-    if (langs.length === 1) {
-      paths.push(`
-        <circle
-          cx="${centerX}"
-          cy="${centerY}"
-          r="${radius}"
-          stroke="none"
-          fill="${lang.color}"
-          data-testid="lang-pie"
-          size="100"
-        />
-      `);
-      break;
-    }
-
-    const langSizePart = lang.size / totalLanguageSize;
-    const percentage = langSizePart * 100;
-    // Calculate the angle for the current part
-    const angle = langSizePart * 360;
-
-    // Calculate the end angle
-    const endAngle = startAngle + angle;
-
-    // Calculate the coordinates of the start and end points of the arc
-    const startPoint = polarToCartesian(centerX, centerY, radius, startAngle);
-    const endPoint = polarToCartesian(centerX, centerY, radius, endAngle);
-
-    // Determine the large arc flag based on the angle
-    const largeArcFlag = angle > 180 ? 1 : 0;
-
-    // Calculate delay
-    const delay = startDelayCoefficient * 100;
-
-    // SVG arc markup
-    paths.push(`
-      <g class="stagger" style="animation-delay: ${delay}ms">
-        <path
-          data-testid="lang-pie"
-          size="${percentage}"
-          d="M ${centerX} ${centerY} L ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endPoint.x} ${endPoint.y} Z"
-          fill="${lang.color}"
-        />
-      </g>
-    `);
-
-    // Update the start angle for the next part
-    startAngle = endAngle;
-    // Update the start delay coefficient for the next part
-    startDelayCoefficient += 1;
-  }
-
-  return `
-    <svg data-testid="lang-items">
-      <g transform="translate(0, 0)">
-        <svg data-testid="pie">
-          ${paths.join("")}
-        </svg>
-      </g>
-      <g transform="translate(0, 220)">
-        <svg data-testid="lang-names" x="${CARD_PADDING}">
-          ${createLanguageTextNode({
-            langs,
-            totalSize: totalLanguageSize,
-            hideProgress: false,
-          })}
-        </svg>
-      </g>
-    </svg>
-  `;
-};
-
-/**
- * Creates the SVG paths for the language donut chart.
- *
- * @param {number} cx Donut center x-position.
- * @param {number} cy Donut center y-position.
- * @param {number} radius Donut arc Radius.
- * @param {number[]} percentages Array with donut section percentages.
- * @returns {{d: string, percent: number}[]}  Array of svg path elements
- */
-const createDonutPaths = (cx, cy, radius, percentages) => {
-  const paths = [];
-  let startAngle = 0;
-  let endAngle = 0;
-
-  const totalPercent = percentages.reduce((acc, curr) => acc + curr, 0);
-  for (let i = 0; i < percentages.length; i++) {
-    const tmpPath = {};
-
-    let percent = parseFloat(
-      ((percentages[i] / totalPercent) * 100).toFixed(2),
-    );
-
-    endAngle = 3.6 * percent + startAngle;
-    const startPoint = polarToCartesian(cx, cy, radius, endAngle - 90); // rotate donut 90 degrees counter-clockwise.
-    const endPoint = polarToCartesian(cx, cy, radius, startAngle - 90); // rotate donut 90 degrees counter-clockwise.
-    const largeArc = endAngle - startAngle <= 180 ? 0 : 1;
-
-    tmpPath.percent = percent;
-    tmpPath.d = `M ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArc} 0 ${endPoint.x} ${endPoint.y}`;
-
-    paths.push(tmpPath);
-    startAngle = endAngle;
-  }
-
-  return paths;
-};
-
-/**
- * Renders the donut language card layout.
- *
- * @param {Lang[]} langs Array of programming languages.
- * @param {number} width Card width.
- * @param {number} totalLanguageSize Total size of all languages.
- * @returns {string} Donut layout card SVG object.
- */
-const renderDonutLayout = (langs, width, totalLanguageSize) => {
-  const centerX = width / 3;
-  const centerY = width / 3;
-  const radius = centerX - 60;
-  const strokeWidth = 12;
-
-  const colors = langs.map((lang) => lang.color);
-  const langsPercents = langs.map((lang) =>
-    parseFloat(((lang.size / totalLanguageSize) * 100).toFixed(2)),
-  );
-
-  const langPaths = createDonutPaths(centerX, centerY, radius, langsPercents);
-
-  const donutPaths =
-    langs.length === 1
-      ? `<circle cx="${centerX}" cy="${centerY}" r="${radius}" stroke="${colors[0]}" fill="none" stroke-width="${strokeWidth}" data-testid="lang-donut" size="100"/>`
-      : langPaths
-          .map((section, index) => {
-            const staggerDelay = (index + 3) * 100;
-            const delay = staggerDelay + 300;
-
-            const output = `
-       <g class="stagger" style="animation-delay: ${delay}ms">
-        <path
-          data-testid="lang-donut"
-          size="${section.percent}"
-          d="${section.d}"
-          stroke="${colors[index]}"
-          fill="none"
-          stroke-width="${strokeWidth}">
-        </path>
-      </g>
-      `;
-
-            return output;
-          })
-          .join("");
-
-  const donut = `<svg width="${width}" height="${width}">${donutPaths}</svg>`;
-
-  return `
-    <g transform="translate(0, 0)">
-      <g transform="translate(0, 0)">
-        ${createDonutLanguagesNode({ langs, totalSize: totalLanguageSize })}
-      </g>
-
-      <g transform="translate(125, ${donutCenterTranslation(langs.length)})">
-        ${donut}
-      </g>
-    </g>
-  `;
-};
-
-/**
- * Renders card that display user's most frequently used programming languages.
+ * Renders card to display user's most frequently used programming languages.
 *
 * @param {import('../fetchers/types').TopLangData} topLangs User's most frequently used programming languages.
 * @param {Partial<import("./types").TopLangOptions>} options Card options.
@@ -670,7 +276,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
    text_color,
    bg_color,
    hide,
-    hide_progress,
    theme,
    layout,
    custom_title,
@@ -686,7 +291,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
    translations: langCardLocales,
  });

-  const { langs, totalLanguageSize } = trimTopLanguages(
+  const { langs, totalLanguageSize } = useLanguages(
    topLangs,
    hide,
    String(langs_count),
@@ -700,26 +305,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
  let height = calculateNormalLayoutHeight(langs.length);

  let finalLayout = "";
-  if (layout === "pie") {
-    height = calculatePieLayoutHeight(langs.length);
-    finalLayout = renderPieLayout(langs, totalLanguageSize);
-  } else if (layout === "donut-vertical") {
-    height = calculateDonutVerticalLayoutHeight(langs.length);
-    finalLayout = renderDonutVerticalLayout(langs, totalLanguageSize);
-  } else if (layout === "compact" || hide_progress == true) {
-    height =
-      calculateCompactLayoutHeight(langs.length) + (hide_progress ? -25 : 0);
-
-    finalLayout = renderCompactLayout(
-      langs,
-      width,
-      totalLanguageSize,
-      hide_progress,
-    );
-  } else if (layout?.toLowerCase() === "donut") {
-    height = calculateDonutLayoutHeight(langs.length);
+  if (layout === "compact") {
    width = width + 50; // padding
-    finalLayout = renderDonutLayout(langs, width, totalLanguageSize);
+    height = calculateCompactLayoutHeight(langs.length);
+
+    finalLayout = renderCompactLayout(langs, width, totalLanguageSize);
  } else {
    finalLayout = renderNormalLayout(langs, width, totalLanguageSize);
  }
@@ -781,10 +371,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
    `,
  );

-  if (layout === "pie" || layout === "donut-vertical") {
-    return card.render(finalLayout);
-  }
-
  return card.render(`
    <svg data-testid="lang-items" x="${CARD_PADDING}">
      ${finalLayout}
@@ -792,20 +378,4 @@ const renderTopLanguages = (topLangs, options = {}) => {
  `);
 };

-export {
-  getLongestLang,
-  degreesToRadians,
-  radiansToDegrees,
-  polarToCartesian,
-  cartesianToPolar,
-  getCircleLength,
-  calculateCompactLayoutHeight,
-  calculateNormalLayoutHeight,
-  calculateDonutLayoutHeight,
-  calculateDonutVerticalLayoutHeight,
-  calculatePieLayoutHeight,
-  donutCenterTranslation,
-  trimTopLanguages,
-  renderTopLanguages,
-  MIN_CARD_WIDTH,
-};
+export { renderTopLanguages, MIN_CARD_WIDTH };
@@ -1,5 +1,4 @@
 type ThemeNames = keyof typeof import("../../themes/index.js");
-type RankIcon = "default" | "github";

 export type CommonOptions = {
  title_color: string;
@@ -23,10 +22,6 @@ export type StatCardOptions = CommonOptions & {
  line_height: number | string;
  custom_title: string;
  disable_animations: boolean;
-  number_format: string;
-  ring_color: string;
-  text_bold: boolean;
-  rank_icon: RankIcon;
 };

 export type RepoCardOptions = CommonOptions & {
@@ -39,11 +34,10 @@ export type TopLangOptions = CommonOptions & {
  hide_border: boolean;
  card_width: number;
  hide: string[];
-  layout: "compact" | "normal" | "donut" | "donut-vertical" | "pie";
+  layout: "compact" | "normal";
  custom_title: string;
  langs_count: number;
  disable_animations: boolean;
-  hide_progress: boolean;
 };

 type WakaTimeOptions = CommonOptions & {
@@ -36,11 +36,11 @@ const noCodingActivityNode = ({ color, text }) => {
 /**
 * Create compact WakaTime layout.
 *
- * @param {Object} args The function arguments.
- * @param {import("../fetchers/types").WakaTimeLang} args.lang The languages array.
- * @param {number} args.totalSize The total size of the languages.
- * @param {number} args.x The x position of the language node.
- * @param {number} args.y The y position of the language node.
+ * @param {Object[]} args The function arguments.
+ * @param {import("../fetchers/types").WakaTimeLang[]} languages The languages array.
+ * @param {number} totalSize The total size of the languages.
+ * @param {number} x The x position of the language node.
+ * @param {number} y The y position of the language node.
 */
 const createCompactLangNode = ({ lang, totalSize, x, y }) => {
  const color = languageColors[lang.name] || "#858585";
@@ -58,11 +58,11 @@ const createCompactLangNode = ({ lang, totalSize, x, y }) => {
 /**
 * Create WakaTime language text node item.
 *
- * @param {Object} args The function arguments.
- * @param {import("../fetchers/types").WakaTimeLang[]} args.langs The language objects.
- * @param {number} args.totalSize The total size of the languages.
- * @param {number} args.x The x position of the language node.
- * @param {number} args.y The y position of the language node.
+ * @param {Object[]} args The function arguments.
+ * @param {import("../fetchers/types").WakaTimeLang} lang The language object.
+ * @param {number} totalSize The total size of the languages.
+ * @param {number} x The x position of the language node.
+ * @param {number} y The y position of the language node.
 */
 const createLanguageTextNode = ({ langs, totalSize, x, y }) => {
  return langs.map((lang, index) => {
@@ -86,15 +86,14 @@ const createLanguageTextNode = ({ langs, totalSize, x, y }) => {
 /**
 * Create WakaTime text item.
 *
- * @param {Object} args The function arguments.
- * @param {string} args.id The id of the text node item.
- * @param {string} args.label The label of the text node item.
- * @param {string} args.value The value of the text node item.
- * @param {number} args.index The index of the text node item.
- * @param {string} args.percent Percentage of the text node item.
- * @param {boolean} args.hideProgress Whether to hide the progress bar.
- * @param {string} args.progressBarColor The color of the progress bar.
- * @param {string} args.progressBarBackgroundColor The color of the progress bar background.
+ * @param {Object[]} args The function arguments.
+ * @param {string} id The id of the text node item.
+ * @param {string} label The label of the text node item.
+ * @param {string} value The value of the text node item.
+ * @param {number} index The index of the text node item.
+ * @param {percent} percent Percentage of the text node item.
+ * @param {boolean} hideProgress Whether to hide the progress bar.
+ * @param {string} progressBarBackgroundColor The color of the progress bar background.
 */
 const createTextNode = ({
  id,
@@ -119,7 +118,6 @@ const createTextNode = ({
        // @ts-ignore
        name: label,
        progressBarBackgroundColor,
-        delay: staggerDelay + 300,
      });

  return `
@@ -140,7 +138,7 @@ const createTextNode = ({
 * hiding languages.
 *
 * @param {import("../fetchers/types").WakaTimeLang[]} languages The languages array.
- * @return {void} The recalculated languages array.
+ * @return {import("../fetchers/types").WakaTimeLang[]} The recalculated languages array.
 */
 const recalculatePercentages = (languages) => {
  const totalSum = languages.reduce(
@@ -268,30 +266,21 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
      <rect x="25" y="0" width="${width - 50}" height="8" fill="white" rx="5" />
      </mask>
      ${compactProgressBar}
-      ${
-        filteredLanguages.length
-          ? createLanguageTextNode({
-              x: 0,
-              y: 25,
-              langs: filteredLanguages,
-              totalSize: 100,
-            }).join("")
-          : noCodingActivityNode({
-              // @ts-ignore
-              color: textColor,
-              text: i18n.t("wakatimecard.nocodingactivity"),
-            })
-      }
+      ${createLanguageTextNode({
+        x: 0,
+        y: 25,
+        langs: filteredLanguages,
+        totalSize: 100,
+      }).join("")}
    `;
  } else {
    finalLayout = flexLayout({
      items: filteredLanguages.length
-        ? filteredLanguages.map((language, index) => {
+        ? filteredLanguages.map((language) => {
            return createTextNode({
              id: language.name,
              label: language.name,
              value: language.text,
-              index: index,
              percent: language.percent,
              // @ts-ignore
              progressBarColor: titleColor,
@@ -332,29 +321,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
  card.setCSS(
    `
    ${cssStyles}
-    @keyframes slideInAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: calc(100%-100px);
-      }
-    }
-    @keyframes growWidthAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: 100%;
-      }
-    }
    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-    #rect-mask rect{
-      animation: slideInAnimation 1s ease-in-out forwards;
-    }
-    .lang-progress{
-      animation: growWidthAnimation 0.6s ease-in-out forwards;
-    }
    `,
  );

@@ -12,12 +12,6 @@ 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 {object?=} args.colors Card colors arguments.
-   * @param {string} args.colors.titleColor Card title color.
-   * @param {string} args.colors.textColor Card text color.
-   * @param {string} args.colors.iconColor Card icon color.
-   * @param {string|Array} args.colors.bgColor Card background color.
-   * @param {string} args.colors.borderColor Card border color.
   * @returns {Card} Card instance.
   */
  constructor({
@@ -183,7 +177,11 @@ class Card {
          }
          ${this.css}

-          ${process.env.NODE_ENV === "test" ? "" : getAnimations()}
+          ${
+            process.env.NODE_ENV === "test" || this.animations === false
+              ? ""
+              : getAnimations()
+          }
          ${
            this.animations === false
              ? `* { animation-duration: 0s !important; animation-delay: 0s !important; }`
@@ -8,28 +8,5 @@ const icons = {
  fork: `<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>`,
 };

-/**
- * Get rank icon
- *
- * @returns {string} - The SVG code of the rank icon
- */
-const rankIcon = (rankIcon, rankLevel) => {
-  switch (rankIcon) {
-    case "github":
-      return `
-        <svg x="-38" y="-30" height="66" width="66" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" data-testid="github-rank-icon">
-          <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
-        </svg>
-      `;
-    case "default":
-    default:
-      return `
-        <text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="level-rank-icon">
-          ${rankLevel}
-        </text>
-      `;
-  }
-};
-
-export { icons, rankIcon };
+export { icons };
 export default icons;
@@ -79,7 +79,6 @@
    "Ceylon": "#dfa535",
    "Chapel": "#8dc63f",
    "ChucK": "#3f8000",
-    "Circom": "#707575",
    "Cirru": "#ccccff",
    "Clarion": "#db901e",
    "Clarity": "#5546ff",
@@ -103,7 +102,6 @@
    "Csound Score": "#1a1a1a",
    "Cuda": "#3A4E3A",
    "Curry": "#531242",
-    "Cypher": "#34c0eb",
    "Cython": "#fedf5b",
    "D": "#ba595e",
    "DM": "#447265",
@@ -117,7 +115,6 @@
    "DirectX 3D File": "#aace60",
    "Dockerfile": "#384d54",
    "Dogescript": "#cca760",
-    "Dotenv": "#e5d559",
    "Dylan": "#6c616e",
    "E": "#ccce35",
    "ECL": "#8a1267",
@@ -127,13 +124,11 @@
    "Earthly": "#2af0ff",
    "Easybuild": "#069406",
    "Ecere Projects": "#913960",
-    "Ecmarkup": "#eb8131",
    "EditorConfig": "#fff1f2",
    "Eiffel": "#4d6977",
    "Elixir": "#6e4a7e",
    "Elm": "#60B5CC",
    "Elvish": "#55BB55",
-    "Elvish Transcript": "#55BB55",
    "Emacs Lisp": "#c065db",
    "EmberScript": "#FFF4F3",
    "Erlang": "#B83998",
@@ -152,7 +147,7 @@
    "Forth": "#341708",
    "Fortran": "#4d41b1",
    "Fortran Free Form": "#4d41b1",
-    "FreeBasic": "#141AC9",
+    "FreeBasic": "#867db1",
    "FreeMarker": "#0050b2",
    "Frege": "#00cafe",
    "Futhark": "#5f021f",
@@ -185,7 +180,6 @@
    "Go": "#00ADD8",
    "Go Checksums": "#00ADD8",
    "Go Module": "#00ADD8",
-    "Godot Resource": "#355570",
    "Golo": "#88562A",
    "Gosu": "#82937f",
    "Grace": "#615f8b",
@@ -196,7 +190,6 @@
    "Groovy": "#4298b8",
    "Groovy Server Pages": "#4298b8",
    "HAProxy": "#106da9",
-    "HCL": "#844FBA",
    "HLSL": "#aace60",
    "HOCON": "#9ff8ee",
    "HTML": "#e34c26",
@@ -222,7 +215,6 @@
    "Idris": "#b30000",
    "Ignore List": "#000000",
    "ImageJ Macro": "#99AAFF",
-    "Imba": "#16cec6",
    "Inno Setup": "#264b99",
    "Io": "#a9188d",
    "Ioke": "#078193",
@@ -230,7 +222,6 @@
    "Isabelle ROOT": "#FEFE00",
    "J": "#9EEDFF",
    "JAR Manifest": "#b07219",
-    "JCL": "#d90e09",
    "JFlex": "#DBCA00",
    "JSON": "#292929",
    "JSON with Comments": "#292929",
@@ -253,11 +244,9 @@
    "Jsonnet": "#0064bd",
    "Julia": "#a270ba",
    "Jupyter Notebook": "#DA5B0B",
-    "Just": "#384d54",
    "KRL": "#28430A",
    "Kaitai Struct": "#773b37",
    "KakouneScript": "#6f8042",
-    "KerboScript": "#41adf0",
    "KiCad Layout": "#2f4aab",
    "KiCad Legacy Layout": "#2f4aab",
    "KiCad Schematic": "#2f4aab",
@@ -297,7 +286,6 @@
    "Mathematica": "#dd1100",
    "Max": "#c4a79c",
    "Mercury": "#ff2b2b",
-    "Mermaid": "#ff3670",
    "Meson": "#007800",
    "Metal": "#8f14e9",
    "MiniYAML": "#ff1111",
@@ -330,10 +318,6 @@
    "Nu": "#c9df40",
    "NumPy": "#9C8AF9",
    "Nunjucks": "#3d8137",
-    "OASv2-json": "#85ea2d",
-    "OASv2-yaml": "#85ea2d",
-    "OASv3-json": "#85ea2d",
-    "OASv3-yaml": "#85ea2d",
    "OCaml": "#3be133",
    "ObjectScript": "#424893",
    "Objective-C": "#438eff",
@@ -343,18 +327,14 @@
    "Omgrofl": "#cabbff",
    "Opal": "#f7ede0",
    "Open Policy Agent": "#7d9199",
-    "OpenAPI Specification v2": "#85ea2d",
-    "OpenAPI Specification v3": "#85ea2d",
    "OpenCL": "#ed2e2d",
    "OpenEdge ABL": "#5ce600",
    "OpenQASM": "#AA70FF",
    "OpenSCAD": "#e5cd45",
-    "Option List": "#476732",
    "Org": "#77aa99",
    "Oxygene": "#cdd0e3",
    "Oz": "#fab738",
    "P4": "#7055b5",
-    "PDDL": "#0d00ff",
    "PEG.js": "#234d6b",
    "PHP": "#4F5D95",
    "PLSQL": "#dad8d8",
@@ -370,9 +350,7 @@
    "PicoLisp": "#6067af",
    "PigLatin": "#fcd7de",
    "Pike": "#005390",
-    "PlantUML": "#fbbd16",
    "PogoScript": "#d80074",
-    "Polar": "#ae81ff",
    "Portugol": "#f8bd00",
    "PostCSS": "#dc3a0c",
    "PostScript": "#da291c",
@@ -388,7 +366,6 @@
    "Puppet": "#302B6D",
    "PureBasic": "#5a6986",
    "PureScript": "#1D222D",
-    "Pyret": "#ee1e10",
    "Python": "#3572A5",
    "Python console": "#3572A5",
    "Python traceback": "#3572A5",
@@ -437,7 +414,6 @@
    "Sass": "#a53b70",
    "Scala": "#c22d40",
    "Scaml": "#bd181a",
-    "Scenic": "#fdc700",
    "Scheme": "#1e4aec",
    "Scilab": "#ca0f21",
    "Self": "#0579aa",
@@ -445,7 +421,6 @@
    "Shell": "#89e051",
    "ShellCheck Config": "#cecfcb",
    "Shen": "#120F14",
-    "Simple File Verification": "#C9BFED",
    "Singularity": "#64E6AD",
    "Slash": "#007eff",
    "Slice": "#003fa2",
@@ -453,8 +428,6 @@
    "SmPL": "#c94949",
    "Smalltalk": "#596706",
    "Smarty": "#f0c040",
-    "Smithy": "#c44536",
-    "Snakemake": "#419179",
    "Solidity": "#AA6746",
    "SourcePawn": "#f69e1d",
    "Squirrel": "#800000",
@@ -468,7 +441,6 @@
    "SugarSS": "#2fcc9f",
    "SuperCollider": "#46390b",
    "Svelte": "#ff3e00",
-    "Sway": "#dea584",
    "Swift": "#F05138",
    "SystemVerilog": "#DAE1C2",
    "TI Program": "#A0AA87",
@@ -506,7 +478,6 @@
    "Vim Script": "#199f4b",
    "Vim Snippet": "#199f4b",
    "Visual Basic .NET": "#945db7",
-    "Visual Basic 6.0": "#2c6353",
    "Volt": "#1F1F1F",
    "Vue": "#41b883",
    "Vyper": "#2980b9",
@@ -194,15 +194,15 @@ const flexLayout = ({ items, gap, direction, sizes = [] }) => {
 /**
 * Returns theme based colors with proper overrides and defaults.
 *
- * @param {Object} args Function arguments.
+ * @param {Object[]} args Function arguments.
 * @param {string} args.title_color Card title color.
 * @param {string} args.text_color Card text color.
 * @param {string} args.icon_color Card icon color.
 * @param {string} args.bg_color Card background color.
 * @param {string} args.border_color Card border color.
- * @param {string} args.ring_color Card ring color.
 * @param {string} args.theme Card theme.
 * @param {string} args.fallbackTheme Fallback theme.
+ *
 */
 const getCardColors = ({
  title_color,
@@ -392,7 +392,7 @@ const lowercaseTrim = (name) => name.toLowerCase().trim();
 /**
 * Split array of languages in two columns.
 *
- * @template T Language object.
+ * @template T Langauge object.
 * @param {Array<T>} arr Array of languages.
 * @param {number} perChunk Number of languages per column.
 * @returns {Array<T>} Array of languages split in two columns.
@@ -5,9 +5,9 @@ import { MissingParamError, request } from "../common/utils.js";
 /**
 * Repo data fetcher.
 *
- * @param {import('axios').AxiosRequestHeaders} variables Fetcher variables.
+ * @param {import('Axios').AxiosRequestHeaders} variables Fetcher variables.
 * @param {string} token GitHub token.
- * @returns {Promise<import('axios').AxiosResponse>} The response.
+ * @returns {Promise<import('Axios').AxiosResponse>} The response.
 */
 const fetcher = (variables, token) => {
  return request(
@@ -213,7 +213,7 @@ const fetchStats = async (
      );
    }
    throw new CustomError(
-      "Something went wrong while trying to retrieve the stats data using the GraphQL API.",
+      "Something went while trying to retrieve the stats data using the GraphQL API.",
      CustomError.GRAPHQL_ERROR,
    );
  }
@@ -259,6 +259,7 @@ const fetchStats = async (
      return prev + curr.stargazers.totalCount;
    }, 0);

+  // @ts-ignore // TODO: Fix this.
  stats.rank = calculateRank({
    totalCommits: stats.totalCommits,
    totalRepos: user.repositories.totalCount,
@@ -11,7 +11,7 @@ import {
 /**
 * Top languages fetcher object.
 *
- * @param {import('axios').AxiosRequestHeaders} variables Fetcher variables.
+ * @param {import('Axios').AxiosRequestHeaders} variables Fetcher variables.
 * @param {string} token GitHub token.
 * @returns {Promise<import('../common/types').StatsFetcherResponse>} Languages fetcher response.
 */
@@ -54,12 +54,7 @@ const fetcher = (variables, token) => {
 * @param {string[]} exclude_repo List of repositories to exclude.
 * @returns {Promise<import("./types").TopLangData>} Top languages data.
 */
-const fetchTopLanguages = async (
-  username,
-  exclude_repo = [],
-  size_weight = 1,
-  count_weight = 0,
-) => {
+const fetchTopLanguages = async (username, exclude_repo = []) => {
  if (!username) throw new MissingParamError(["username"]);

  const res = await retryer(fetcher, { login: username });
@@ -106,8 +101,6 @@ const fetchTopLanguages = async (
    .sort((a, b) => b.size - a.size)
    .filter((name) => !repoToHide[name.name]);

-  let repoCount = 0;
-
  repoNodes = repoNodes
    .filter((node) => node.languages.edges.length > 0)
    // flatten the list of language nodes
@@ -118,14 +111,9 @@ const fetchTopLanguages = async (

      // if we already have the language in the accumulator
      // & the current language name is same as previous name
-      // add the size to the language size and increase repoCount.
+      // add the size to the language size.
      if (acc[prev.node.name] && prev.node.name === acc[prev.node.name].name) {
        langSize = prev.size + acc[prev.node.name].size;
-        repoCount += 1;
-      } else {
-        // reset repoCount to 1
-        // language must exist in at least one repo to be detected
-        repoCount = 1;
      }
      return {
        ...acc,
@@ -133,18 +121,10 @@ const fetchTopLanguages = async (
          name: prev.node.name,
          color: prev.node.color,
          size: langSize,
-          count: repoCount,
        },
      };
    }, {});

-  Object.keys(repoNodes).forEach((name) => {
-    // comparison index calculation
-    repoNodes[name].size =
-      Math.pow(repoNodes[name].size, size_weight) *
-      Math.pow(repoNodes[name].count, count_weight);
-  });
-
  const topLangs = Object.keys(repoNodes)
    .sort((a, b) => repoNodes[b].size - repoNodes[a].size)
    .reduce((result, key) => {
@@ -14,9 +14,7 @@ const fetchWakatimeStats = async ({ username, api_domain, range }) => {
    const { data } = await axios.get(
      `https://${
        api_domain ? api_domain.replace(/\/$/gi, "") : "wakatime.com"
-      }/api/v1/users/${username}/stats/${
-        range || "all_time"
-      }?is_including_today=true`,
+      }/api/v1/users/${username}/stats/${range || ""}?is_including_today=true`,
    );

    return data.data;
@@ -43,6 +43,11 @@ const getProgressAnimation = ({ progress }) => {
 const getAnimations = () => {
  return `
    /* Animations */
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    
    @keyframes scaleInAnimation {
      from {
        transform: translate(-5px, 5px) scale(0);
@@ -65,11 +70,10 @@ const getAnimations = () => {
 /**
 * Retrieves CSS styles for a card.
 *
- * @param {Object} colors The colors to use for the 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.
@@ -90,10 +94,7 @@ const getStyles = ({
      /* 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;
@@ -34,10 +34,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
      /* 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: #434d58;
      animation: scaleInAnimation 0.3s ease-in-out forwards;
@@ -69,29 +66,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
    }
    
  
-    @keyframes slideInAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: calc(100%-100px);
-      }
-    }
-    @keyframes growWidthAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: 100%;
-      }
-    }
    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
-    #rect-mask rect{
-      animation: slideInAnimation 1s ease-in-out forwards;
-    }
-    .lang-progress{
-      animation: growWidthAnimation 0.6s ease-in-out forwards;
-    }
    

          
@@ -214,10 +189,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w
      /* 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: #434d58;
      animation: scaleInAnimation 0.3s ease-in-out forwards;
@@ -249,29 +221,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w
    }
    
  
-    @keyframes slideInAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: calc(100%-100px);
-      }
-    }
-    @keyframes growWidthAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: 100%;
-      }
-    }
    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
-    #rect-mask rect{
-      animation: slideInAnimation 1s ease-in-out forwards;
-    }
-    .lang-progress{
-      animation: growWidthAnimation 0.6s ease-in-out forwards;
-    }
    

          
@@ -43,7 +43,7 @@ const data_stats = {
        nodes: [{ stargazers: { totalCount: 100 } }],
        pageInfo: {
          hasNextPage: false,
-          endCursor: "cursor",
+          cursor: "cursor",
        },
      },
    },
@@ -15,14 +15,14 @@ const REPO = "curly-fiesta";
 const USER = "catelinemnemosyne";
 const STATS_DATA = {
  name: "Cateline Mnemosyne",
-  totalPRs: 2,
-  totalCommits: 8,
+  totalPRs: 1,
+  totalCommits: 7,
  totalIssues: 1,
  totalStars: 1,
  contributedTo: 1,
  rank: {
    level: "A+",
-    score: 50.88831151384285,
+    score: 50.893750297869225,
  },
 };

@@ -27,7 +27,7 @@ const data_stats = {
        ],
        pageInfo: {
          hasNextPage: true,
-          endCursor: "cursor",
+          cursor: "cursor",
        },
      },
    },
@@ -44,7 +44,7 @@ const data_repo = {
        ],
        pageInfo: {
          hasNextPage: false,
-          endCursor: "cursor",
+          cursor: "cursor",
        },
      },
    },
@@ -64,7 +64,7 @@ const data_repo_zero_stars = {
        ],
        pageInfo: {
          hasNextPage: true,
-          endCursor: "cursor",
+          cursor: "cursor",
        },
      },
    },
@@ -86,12 +86,11 @@ const mock = new MockAdapter(axios);

 beforeEach(() => {
  process.env.FETCH_MULTI_PAGE_STARS = "false"; // Set to `false` to fetch only one page of stars.
-  mock.onPost("https://api.github.com/graphql").reply((cfg) => {
-    return [
-      200,
-      cfg.data.includes("contributionsCollection") ? data_stats : data_repo,
-    ];
-  });
+  mock
+    .onPost("https://api.github.com/graphql")
+    .replyOnce(200, data_stats)
+    .onPost("https://api.github.com/graphql")
+    .replyOnce(200, data_repo);
 });

 afterEach(() => {
@@ -60,22 +60,20 @@ const error = {
 };

 describe("FetchTopLanguages", () => {
-  it("should fetch correct language data while using the new calculation", async () => {
+  it("should fetch correct language data", async () => {
    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);

-    let repo = await fetchTopLanguages("anuraghazra", [], 0.5, 0.5);
+    let repo = await fetchTopLanguages("anuraghazra");
    expect(repo).toStrictEqual({
      HTML: {
        color: "#0f0",
-        count: 2,
        name: "HTML",
-        size: 20.000000000000004,
+        size: 200,
      },
      javascript: {
        color: "#0ff",
-        count: 2,
        name: "javascript",
-        size: 20.000000000000004,
+        size: 200,
      },
    });
  });
@@ -87,59 +85,17 @@ describe("FetchTopLanguages", () => {
    expect(repo).toStrictEqual({
      HTML: {
        color: "#0f0",
-        count: 1,
        name: "HTML",
        size: 100,
      },
      javascript: {
        color: "#0ff",
-        count: 2,
        name: "javascript",
        size: 200,
      },
    });
  });

-  it("should fetch correct language data while using the old calculation", async () => {
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
-
-    let repo = await fetchTopLanguages("anuraghazra", [], 1, 0);
-    expect(repo).toStrictEqual({
-      HTML: {
-        color: "#0f0",
-        count: 2,
-        name: "HTML",
-        size: 200,
-      },
-      javascript: {
-        color: "#0ff",
-        count: 2,
-        name: "javascript",
-        size: 200,
-      },
-    });
-  });
-
-  it("should rank languages by the number of repositories they appear in", async () => {
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
-
-    let repo = await fetchTopLanguages("anuraghazra", [], 0, 1);
-    expect(repo).toStrictEqual({
-      HTML: {
-        color: "#0f0",
-        count: 2,
-        name: "HTML",
-        size: 2,
-      },
-      javascript: {
-        color: "#0ff",
-        count: 2,
-        name: "javascript",
-        size: 2,
-      },
-    });
-  });
-
  it("should throw error", async () => {
    mock.onPost("https://api.github.com/graphql").reply(200, error);

@@ -105,7 +105,7 @@ describe("Wakatime fetcher", () => {
    const username = "anuraghazra";
    mock
      .onGet(
-        `https://wakatime.com/api/v1/users/${username}/stats/all_time?is_including_today=true`,
+        `https://wakatime.com/api/v1/users/${username}/stats/?is_including_today=true`,
      )
      .reply(200, wakaTimeData);

@@ -357,30 +357,4 @@ describe("Test renderStatsCard", () => {
    document.body.innerHTML = renderStatsCard(stats, {});
    expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
  });
-
-  it("should shorten values", () => {
-    stats["totalCommits"] = 1999;
-
-    document.body.innerHTML = renderStatsCard(stats);
-    expect(getByTestId(document.body, "commits").textContent).toBe("2k");
-    document.body.innerHTML = renderStatsCard(stats, { number_format: "long" });
-    expect(getByTestId(document.body, "commits").textContent).toBe("1999");
-  });
-
-  it("should render default rank icon with level A+", () => {
-    document.body.innerHTML = renderStatsCard(stats, {
-      rank_icon: "default",
-    });
-    expect(queryByTestId(document.body, "level-rank-icon")).toBeDefined();
-    expect(
-      queryByTestId(document.body, "level-rank-icon").textContent.trim(),
-    ).toBe("A+");
-  });
-
-  it("should render github rank icon", () => {
-    document.body.innerHTML = renderStatsCard(stats, {
-      rank_icon: "github",
-    });
-    expect(queryByTestId(document.body, "github-rank-icon")).toBeDefined();
-  });
 });
@@ -1,23 +1,9 @@
 import { queryAllByTestId, queryByTestId } from "@testing-library/dom";
 import { cssToObject } from "@uppercod/css-to-object";
 import {
-  getLongestLang,
-  degreesToRadians,
-  radiansToDegrees,
-  polarToCartesian,
-  cartesianToPolar,
-  getCircleLength,
-  calculateCompactLayoutHeight,
-  calculateNormalLayoutHeight,
-  calculateDonutLayoutHeight,
-  calculateDonutVerticalLayoutHeight,
-  calculatePieLayoutHeight,
-  donutCenterTranslation,
-  trimTopLanguages,
-  renderTopLanguages,
  MIN_CARD_WIDTH,
+  renderTopLanguages,
 } from "../src/cards/top-languages-card.js";
-
 // adds special assertions like toHaveTextContent
 import "@testing-library/jest-dom";

@@ -41,295 +27,6 @@ const langs = {
  },
 };

-/**
- * Retrieve number array from SVG path definition string.
- *
- * @param {string} d SVG path definition string.
- * @return {number[]} Resulting numbers array.
- */
-const getNumbersFromSvgPathDefinitionAttribute = (d) => {
-  return d
-    .split(" ")
-    .filter((x) => !isNaN(x))
-    .map((x) => parseFloat(x));
-};
-
-/**
- * Retrieve the language percentage from the donut chart SVG.
- *
- * @param {string} d The SVG path element.
- * @param {number} centerX The center X coordinate of the donut chart.
- * @param {number} centerY The center Y coordinate of the donut chart.
- * @returns {number} The percentage of the language.
- */
-const langPercentFromDonutLayoutSvg = (d, centerX, centerY) => {
-  const dTmp = getNumbersFromSvgPathDefinitionAttribute(d);
-  const endAngle =
-    cartesianToPolar(centerX, centerY, dTmp[0], dTmp[1]).angleInDegrees + 90;
-  let startAngle =
-    cartesianToPolar(centerX, centerY, dTmp[7], dTmp[8]).angleInDegrees + 90;
-  if (startAngle > endAngle) startAngle -= 360;
-  return (endAngle - startAngle) / 3.6;
-};
-
-/**
- * Calculate language percentage for donut vertical chart SVG.
- *
- * @param {number} partLength Length of current chart part..
- * @param {number} totalCircleLength Total length of circle.
- * @return {number} Chart part percentage.
- */
-const langPercentFromDonutVerticalLayoutSvg = (
-  partLength,
-  totalCircleLength,
-) => {
-  return (partLength / totalCircleLength) * 100;
-};
-
-/**
- * Retrieve the language percentage from the pie chart SVG.
- *
- * @param {string} d The SVG path element.
- * @param {number} centerX The center X coordinate of the pie chart.
- * @param {number} centerY The center Y coordinate of the pie chart.
- * @returns {number} The percentage of the language.
- */
-const langPercentFromPieLayoutSvg = (d, centerX, centerY) => {
-  const dTmp = getNumbersFromSvgPathDefinitionAttribute(d);
-  const startAngle = cartesianToPolar(
-    centerX,
-    centerY,
-    dTmp[2],
-    dTmp[3],
-  ).angleInDegrees;
-  let endAngle = cartesianToPolar(
-    centerX,
-    centerY,
-    dTmp[9],
-    dTmp[10],
-  ).angleInDegrees;
-  return ((endAngle - startAngle) / 360) * 100;
-};
-
-describe("Test renderTopLanguages helper functions", () => {
-  it("getLongestLang", () => {
-    const langArray = Object.values(langs);
-    expect(getLongestLang(langArray)).toBe(langs.javascript);
-  });
-
-  it("degreesToRadians", () => {
-    expect(degreesToRadians(0)).toBe(0);
-    expect(degreesToRadians(90)).toBe(Math.PI / 2);
-    expect(degreesToRadians(180)).toBe(Math.PI);
-    expect(degreesToRadians(270)).toBe((3 * Math.PI) / 2);
-    expect(degreesToRadians(360)).toBe(2 * Math.PI);
-  });
-
-  it("radiansToDegrees", () => {
-    expect(radiansToDegrees(0)).toBe(0);
-    expect(radiansToDegrees(Math.PI / 2)).toBe(90);
-    expect(radiansToDegrees(Math.PI)).toBe(180);
-    expect(radiansToDegrees((3 * Math.PI) / 2)).toBe(270);
-    expect(radiansToDegrees(2 * Math.PI)).toBe(360);
-  });
-
-  it("polarToCartesian", () => {
-    expect(polarToCartesian(100, 100, 60, 0)).toStrictEqual({ x: 160, y: 100 });
-    expect(polarToCartesian(100, 100, 60, 45)).toStrictEqual({
-      x: 142.42640687119285,
-      y: 142.42640687119285,
-    });
-    expect(polarToCartesian(100, 100, 60, 90)).toStrictEqual({
-      x: 100,
-      y: 160,
-    });
-    expect(polarToCartesian(100, 100, 60, 135)).toStrictEqual({
-      x: 57.573593128807154,
-      y: 142.42640687119285,
-    });
-    expect(polarToCartesian(100, 100, 60, 180)).toStrictEqual({
-      x: 40,
-      y: 100.00000000000001,
-    });
-    expect(polarToCartesian(100, 100, 60, 225)).toStrictEqual({
-      x: 57.57359312880714,
-      y: 57.573593128807154,
-    });
-    expect(polarToCartesian(100, 100, 60, 270)).toStrictEqual({
-      x: 99.99999999999999,
-      y: 40,
-    });
-    expect(polarToCartesian(100, 100, 60, 315)).toStrictEqual({
-      x: 142.42640687119285,
-      y: 57.57359312880714,
-    });
-    expect(polarToCartesian(100, 100, 60, 360)).toStrictEqual({
-      x: 160,
-      y: 99.99999999999999,
-    });
-  });
-
-  it("cartesianToPolar", () => {
-    expect(cartesianToPolar(100, 100, 160, 100)).toStrictEqual({
-      radius: 60,
-      angleInDegrees: 0,
-    });
-    expect(
-      cartesianToPolar(100, 100, 142.42640687119285, 142.42640687119285),
-    ).toStrictEqual({ radius: 60.00000000000001, angleInDegrees: 45 });
-    expect(cartesianToPolar(100, 100, 100, 160)).toStrictEqual({
-      radius: 60,
-      angleInDegrees: 90,
-    });
-    expect(
-      cartesianToPolar(100, 100, 57.573593128807154, 142.42640687119285),
-    ).toStrictEqual({ radius: 60, angleInDegrees: 135 });
-    expect(cartesianToPolar(100, 100, 40, 100.00000000000001)).toStrictEqual({
-      radius: 60,
-      angleInDegrees: 180,
-    });
-    expect(
-      cartesianToPolar(100, 100, 57.57359312880714, 57.573593128807154),
-    ).toStrictEqual({ radius: 60, angleInDegrees: 225 });
-    expect(cartesianToPolar(100, 100, 99.99999999999999, 40)).toStrictEqual({
-      radius: 60,
-      angleInDegrees: 270,
-    });
-    expect(
-      cartesianToPolar(100, 100, 142.42640687119285, 57.57359312880714),
-    ).toStrictEqual({ radius: 60.00000000000001, angleInDegrees: 315 });
-    expect(cartesianToPolar(100, 100, 160, 99.99999999999999)).toStrictEqual({
-      radius: 60,
-      angleInDegrees: 360,
-    });
-  });
-
-  it("calculateCompactLayoutHeight", () => {
-    expect(calculateCompactLayoutHeight(0)).toBe(90);
-    expect(calculateCompactLayoutHeight(1)).toBe(115);
-    expect(calculateCompactLayoutHeight(2)).toBe(115);
-    expect(calculateCompactLayoutHeight(3)).toBe(140);
-    expect(calculateCompactLayoutHeight(4)).toBe(140);
-    expect(calculateCompactLayoutHeight(5)).toBe(165);
-    expect(calculateCompactLayoutHeight(6)).toBe(165);
-    expect(calculateCompactLayoutHeight(7)).toBe(190);
-    expect(calculateCompactLayoutHeight(8)).toBe(190);
-    expect(calculateCompactLayoutHeight(9)).toBe(215);
-    expect(calculateCompactLayoutHeight(10)).toBe(215);
-  });
-
-  it("calculateNormalLayoutHeight", () => {
-    expect(calculateNormalLayoutHeight(0)).toBe(85);
-    expect(calculateNormalLayoutHeight(1)).toBe(125);
-    expect(calculateNormalLayoutHeight(2)).toBe(165);
-    expect(calculateNormalLayoutHeight(3)).toBe(205);
-    expect(calculateNormalLayoutHeight(4)).toBe(245);
-    expect(calculateNormalLayoutHeight(5)).toBe(285);
-    expect(calculateNormalLayoutHeight(6)).toBe(325);
-    expect(calculateNormalLayoutHeight(7)).toBe(365);
-    expect(calculateNormalLayoutHeight(8)).toBe(405);
-    expect(calculateNormalLayoutHeight(9)).toBe(445);
-    expect(calculateNormalLayoutHeight(10)).toBe(485);
-  });
-
-  it("calculateDonutLayoutHeight", () => {
-    expect(calculateDonutLayoutHeight(0)).toBe(215);
-    expect(calculateDonutLayoutHeight(1)).toBe(215);
-    expect(calculateDonutLayoutHeight(2)).toBe(215);
-    expect(calculateDonutLayoutHeight(3)).toBe(215);
-    expect(calculateDonutLayoutHeight(4)).toBe(215);
-    expect(calculateDonutLayoutHeight(5)).toBe(215);
-    expect(calculateDonutLayoutHeight(6)).toBe(247);
-    expect(calculateDonutLayoutHeight(7)).toBe(279);
-    expect(calculateDonutLayoutHeight(8)).toBe(311);
-    expect(calculateDonutLayoutHeight(9)).toBe(343);
-    expect(calculateDonutLayoutHeight(10)).toBe(375);
-  });
-
-  it("calculateDonutVerticalLayoutHeight", () => {
-    expect(calculateDonutVerticalLayoutHeight(0)).toBe(300);
-    expect(calculateDonutVerticalLayoutHeight(1)).toBe(325);
-    expect(calculateDonutVerticalLayoutHeight(2)).toBe(325);
-    expect(calculateDonutVerticalLayoutHeight(3)).toBe(350);
-    expect(calculateDonutVerticalLayoutHeight(4)).toBe(350);
-    expect(calculateDonutVerticalLayoutHeight(5)).toBe(375);
-    expect(calculateDonutVerticalLayoutHeight(6)).toBe(375);
-    expect(calculateDonutVerticalLayoutHeight(7)).toBe(400);
-    expect(calculateDonutVerticalLayoutHeight(8)).toBe(400);
-    expect(calculateDonutVerticalLayoutHeight(9)).toBe(425);
-    expect(calculateDonutVerticalLayoutHeight(10)).toBe(425);
-  });
-
-  it("calculatePieLayoutHeight", () => {
-    expect(calculatePieLayoutHeight(0)).toBe(300);
-    expect(calculatePieLayoutHeight(1)).toBe(325);
-    expect(calculatePieLayoutHeight(2)).toBe(325);
-    expect(calculatePieLayoutHeight(3)).toBe(350);
-    expect(calculatePieLayoutHeight(4)).toBe(350);
-    expect(calculatePieLayoutHeight(5)).toBe(375);
-    expect(calculatePieLayoutHeight(6)).toBe(375);
-    expect(calculatePieLayoutHeight(7)).toBe(400);
-    expect(calculatePieLayoutHeight(8)).toBe(400);
-    expect(calculatePieLayoutHeight(9)).toBe(425);
-    expect(calculatePieLayoutHeight(10)).toBe(425);
-  });
-
-  it("donutCenterTranslation", () => {
-    expect(donutCenterTranslation(0)).toBe(-45);
-    expect(donutCenterTranslation(1)).toBe(-45);
-    expect(donutCenterTranslation(2)).toBe(-45);
-    expect(donutCenterTranslation(3)).toBe(-45);
-    expect(donutCenterTranslation(4)).toBe(-45);
-    expect(donutCenterTranslation(5)).toBe(-45);
-    expect(donutCenterTranslation(6)).toBe(-29);
-    expect(donutCenterTranslation(7)).toBe(-13);
-    expect(donutCenterTranslation(8)).toBe(3);
-    expect(donutCenterTranslation(9)).toBe(19);
-    expect(donutCenterTranslation(10)).toBe(35);
-  });
-
-  it("getCircleLength", () => {
-    expect(getCircleLength(20)).toBeCloseTo(125.663);
-    expect(getCircleLength(30)).toBeCloseTo(188.495);
-    expect(getCircleLength(40)).toBeCloseTo(251.327);
-    expect(getCircleLength(50)).toBeCloseTo(314.159);
-    expect(getCircleLength(60)).toBeCloseTo(376.991);
-    expect(getCircleLength(70)).toBeCloseTo(439.822);
-    expect(getCircleLength(80)).toBeCloseTo(502.654);
-    expect(getCircleLength(90)).toBeCloseTo(565.486);
-    expect(getCircleLength(100)).toBeCloseTo(628.318);
-  });
-
-  it("trimTopLanguages", () => {
-    expect(trimTopLanguages([])).toStrictEqual({
-      langs: [],
-      totalLanguageSize: 0,
-    });
-    expect(trimTopLanguages([langs.javascript])).toStrictEqual({
-      langs: [langs.javascript],
-      totalLanguageSize: 200,
-    });
-    expect(
-      trimTopLanguages([langs.javascript, langs.HTML], [], 5),
-    ).toStrictEqual({
-      langs: [langs.javascript, langs.HTML],
-      totalLanguageSize: 400,
-    });
-    expect(trimTopLanguages(langs, [], 5)).toStrictEqual({
-      langs: Object.values(langs),
-      totalLanguageSize: 500,
-    });
-    expect(trimTopLanguages(langs, [], 2)).toStrictEqual({
-      langs: Object.values(langs).slice(0, 2),
-      totalLanguageSize: 400,
-    });
-    expect(trimTopLanguages(langs, ["javascript"], 5)).toStrictEqual({
-      langs: [langs.HTML, langs.css],
-      totalLanguageSize: 300,
-    });
-  });
-});
-
 describe("Test renderTopLanguages", () => {
  it("should render correctly", () => {
    document.body.innerHTML = renderTopLanguages(langs);
@@ -519,7 +216,7 @@ describe("Test renderTopLanguages", () => {
    );
    expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute(
      "width",
-      "100",
+      "120",
    );

    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
@@ -527,7 +224,7 @@ describe("Test renderTopLanguages", () => {
    );
    expect(queryAllByTestId(document.body, "lang-progress")[1]).toHaveAttribute(
      "width",
-      "100",
+      "120",
    );

    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
@@ -535,251 +232,7 @@ describe("Test renderTopLanguages", () => {
    );
    expect(queryAllByTestId(document.body, "lang-progress")[2]).toHaveAttribute(
      "width",
-      "50",
-    );
-  });
-
-  it("should render with layout donut", () => {
-    document.body.innerHTML = renderTopLanguages(langs, { layout: "donut" });
-
-    expect(queryByTestId(document.body, "header")).toHaveTextContent(
-      "Most Used Languages",
-    );
-
-    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
-      "HTML 40.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
-      "size",
-      "40",
-    );
-    const d = getNumbersFromSvgPathDefinitionAttribute(
-      queryAllByTestId(document.body, "lang-donut")[0].getAttribute("d"),
-    );
-    const center = { x: d[7], y: d[7] };
-    const HTMLLangPercent = langPercentFromDonutLayoutSvg(
-      queryAllByTestId(document.body, "lang-donut")[0].getAttribute("d"),
-      center.x,
-      center.y,
-    );
-    expect(HTMLLangPercent).toBeCloseTo(40);
-
-    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
-      "javascript 40.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-donut")[1]).toHaveAttribute(
-      "size",
-      "40",
-    );
-    const javascriptLangPercent = langPercentFromDonutLayoutSvg(
-      queryAllByTestId(document.body, "lang-donut")[1].getAttribute("d"),
-      center.x,
-      center.y,
-    );
-    expect(javascriptLangPercent).toBeCloseTo(40);
-
-    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
-      "css 20.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-donut")[2]).toHaveAttribute(
-      "size",
-      "20",
-    );
-    const cssLangPercent = langPercentFromDonutLayoutSvg(
-      queryAllByTestId(document.body, "lang-donut")[2].getAttribute("d"),
-      center.x,
-      center.y,
-    );
-    expect(cssLangPercent).toBeCloseTo(20);
-
-    expect(HTMLLangPercent + javascriptLangPercent + cssLangPercent).toBe(100);
-
-    // Should render full donut (circle) if one language is 100%.
-    document.body.innerHTML = renderTopLanguages(
-      { HTML: langs.HTML },
-      { layout: "donut" },
-    );
-    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
-      "HTML 100.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
-      "size",
-      "100",
-    );
-    expect(queryAllByTestId(document.body, "lang-donut")).toHaveLength(1);
-    expect(queryAllByTestId(document.body, "lang-donut")[0].tagName).toBe(
-      "circle",
-    );
-  });
-
-  it("should render with layout donut vertical", () => {
-    document.body.innerHTML = renderTopLanguages(langs, {
-      layout: "donut-vertical",
-    });
-
-    expect(queryByTestId(document.body, "header")).toHaveTextContent(
-      "Most Used Languages",
-    );
-
-    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
-      "HTML 40.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
-      "size",
-      "40",
-    );
-
-    const totalCircleLength = queryAllByTestId(
-      document.body,
-      "lang-donut",
-    )[0].getAttribute("stroke-dasharray");
-
-    const HTMLLangPercent = langPercentFromDonutVerticalLayoutSvg(
-      queryAllByTestId(document.body, "lang-donut")[1].getAttribute(
-        "stroke-dashoffset",
-      ) -
-        queryAllByTestId(document.body, "lang-donut")[0].getAttribute(
-          "stroke-dashoffset",
-        ),
-      totalCircleLength,
-    );
-    expect(HTMLLangPercent).toBeCloseTo(40);
-
-    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
-      "javascript 40.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-donut")[1]).toHaveAttribute(
-      "size",
-      "40",
-    );
-    const javascriptLangPercent = langPercentFromDonutVerticalLayoutSvg(
-      queryAllByTestId(document.body, "lang-donut")[2].getAttribute(
-        "stroke-dashoffset",
-      ) -
-        queryAllByTestId(document.body, "lang-donut")[1].getAttribute(
-          "stroke-dashoffset",
-        ),
-      totalCircleLength,
-    );
-    expect(javascriptLangPercent).toBeCloseTo(40);
-
-    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
-      "css 20.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-donut")[2]).toHaveAttribute(
-      "size",
-      "20",
-    );
-    const cssLangPercent = langPercentFromDonutVerticalLayoutSvg(
-      totalCircleLength -
-        queryAllByTestId(document.body, "lang-donut")[2].getAttribute(
-          "stroke-dashoffset",
-        ),
-      totalCircleLength,
-    );
-    expect(cssLangPercent).toBeCloseTo(20);
-
-    expect(HTMLLangPercent + javascriptLangPercent + cssLangPercent).toBe(100);
-  });
-
-  it("should render with layout donut vertical full donut circle of one language is 100%", () => {
-    document.body.innerHTML = renderTopLanguages(
-      { HTML: langs.HTML },
-      { layout: "donut-vertical" },
-    );
-    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
-      "HTML 100.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
-      "size",
-      "100",
-    );
-    const totalCircleLength = queryAllByTestId(
-      document.body,
-      "lang-donut",
-    )[0].getAttribute("stroke-dasharray");
-
-    const HTMLLangPercent = langPercentFromDonutVerticalLayoutSvg(
-      totalCircleLength -
-        queryAllByTestId(document.body, "lang-donut")[0].getAttribute(
-          "stroke-dashoffset",
-        ),
-      totalCircleLength,
-    );
-    expect(HTMLLangPercent).toBeCloseTo(100);
-  });
-
-  it("should render with layout pie", () => {
-    document.body.innerHTML = renderTopLanguages(langs, { layout: "pie" });
-
-    expect(queryByTestId(document.body, "header")).toHaveTextContent(
-      "Most Used Languages",
-    );
-
-    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
-      "HTML 40.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-pie")[0]).toHaveAttribute(
-      "size",
-      "40",
-    );
-
-    const d = getNumbersFromSvgPathDefinitionAttribute(
-      queryAllByTestId(document.body, "lang-pie")[0].getAttribute("d"),
-    );
-    const center = { x: d[0], y: d[1] };
-    const HTMLLangPercent = langPercentFromPieLayoutSvg(
-      queryAllByTestId(document.body, "lang-pie")[0].getAttribute("d"),
-      center.x,
-      center.y,
-    );
-    expect(HTMLLangPercent).toBeCloseTo(40);
-
-    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
-      "javascript 40.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-pie")[1]).toHaveAttribute(
-      "size",
-      "40",
-    );
-    const javascriptLangPercent = langPercentFromPieLayoutSvg(
-      queryAllByTestId(document.body, "lang-pie")[1].getAttribute("d"),
-      center.x,
-      center.y,
-    );
-    expect(javascriptLangPercent).toBeCloseTo(40);
-
-    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
-      "css 20.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-pie")[2]).toHaveAttribute(
-      "size",
-      "20",
-    );
-    const cssLangPercent = langPercentFromPieLayoutSvg(
-      queryAllByTestId(document.body, "lang-pie")[2].getAttribute("d"),
-      center.x,
-      center.y,
-    );
-    expect(cssLangPercent).toBeCloseTo(20);
-
-    expect(HTMLLangPercent + javascriptLangPercent + cssLangPercent).toBe(100);
-
-    // Should render full pie (circle) if one language is 100%.
-    document.body.innerHTML = renderTopLanguages(
-      { HTML: langs.HTML },
-      { layout: "pie" },
-    );
-    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
-      "HTML 100.00%",
-    );
-    expect(queryAllByTestId(document.body, "lang-pie")[0]).toHaveAttribute(
-      "size",
-      "100",
-    );
-    expect(queryAllByTestId(document.body, "lang-pie")).toHaveLength(1);
-    expect(queryAllByTestId(document.body, "lang-pie")[0].tagName).toBe(
-      "circle",
+      "60",
    );
  });

@@ -55,7 +55,7 @@ describe("Test Render Wakatime Card", () => {
    expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
  });

-  it('should show "no coding activity this week" message when there has not been activity', () => {
+  it('should show "no coding activitiy this week" message when there hasn not been activity', () => {
    document.body.innerHTML = renderWakatimeCard(
      {
        ...wakaTimeData.data,
@@ -67,19 +67,4 @@ describe("Test Render Wakatime Card", () => {
      "No coding activity this week",
    );
  });
-
-  it('should show "no coding activity this week" message when using compact layout and there has not been activity', () => {
-    document.body.innerHTML = renderWakatimeCard(
-      {
-        ...wakaTimeData.data,
-        languages: undefined,
-      },
-      {
-        layout: "compact",
-      },
-    );
-    expect(document.querySelector(".stat").textContent).toBe(
-      "No coding activity this week",
-    );
-  });
 });
@@ -0,0 +1,177 @@
+<svg
+  width="800"
+  height="195"
+  viewBox="0 0 800 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">Cateline Mnemosyne's GitHub Stats, Rank: A+</title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="799"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Cateline Mnemosyne's GitHub Stats
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <g data-testid="rank-circle" transform="translate(715, 47.5)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,249 @@
+<svg
+  width="467"
+  height="195"
+  viewBox="0 0 467 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">Cateline Mnemosyne's GitHub Stats, Rank: A+</title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #abd200;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #68b587;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #68b587;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #b7d364;
+      display: block;
+    }
+
+    .rank-circle-rim {
+      stroke: #abd200;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #abd200;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#0044ff"
+    width="466"
+    fill="#0a0f0b"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Cateline Mnemosyne's GitHub Stats
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <g data-testid="rank-circle" transform="translate(390.5, 47.5)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">
+            Contributed to (last year):
+          </text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,179 @@
+<svg
+  width="450"
+  height="195"
+  viewBox="0 0 450 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">
+    Hello world, this is a very very very very very long title, Rank: A+
+  </title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="449"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Hello world, this is a very very very very very long title
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <g data-testid="rank-circle" transform="translate(365, 47.5)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,164 @@
+<svg
+  width="524.375"
+  height="195"
+  viewBox="0 0 524.375 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">
+    Hello world, this is a very very very very very long title, Rank: A+
+  </title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="523.375"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Hello world, this is a very very very very very long title
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,164 @@
+<svg
+  width="524.375"
+  height="195"
+  viewBox="0 0 524.375 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">
+    Hello world, this is a very very very very very long title, Rank: A+
+  </title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="523.375"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Hello world, this is a very very very very very long title
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,152 @@
+<svg
+  width="450"
+  height="150"
+  viewBox="0 0 450 150"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">Cateline Mnemosyne's GitHub Stats, Rank: A+</title>
+  <desc id="descId">
+    Total PRs: 1, Total Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="449"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Cateline Mnemosyne's GitHub Stats
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <g data-testid="rank-circle" transform="translate(365, 25)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,177 @@
+<svg
+  width="450"
+  height="195"
+  viewBox="0 0 450 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">Cateline Mnemosyne's GitHub Stats, Rank: A+</title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="449"
+    fill="#fffefe"
+    stroke-opacity="0"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Cateline Mnemosyne's GitHub Stats
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <g data-testid="rank-circle" transform="translate(365, 47.5)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,162 @@
+<svg
+  width="370.1875000000001"
+  height="195"
+  viewBox="0 0 370.1875000000001 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">Cateline Mnemosyne's GitHub Stats, Rank: A+</title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="369.1875000000001"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Cateline Mnemosyne's GitHub Stats
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,169 @@
+<svg
+  width="450"
+  height="165"
+  viewBox="0 0 450 165"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">Cateline Mnemosyne's GitHub Stats, Rank: A+</title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="449"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="main-card-body" transform="translate(0, 25)">
+    <g data-testid="rank-circle" transform="translate(365, 47.5)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,249 @@
+<svg
+  width="467"
+  height="645"
+  viewBox="0 0 467 645"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">Cateline Mnemosyne's GitHub Stats, Rank: A+</title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: block;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="466"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Cateline Mnemosyne's GitHub Stats
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <g data-testid="rank-circle" transform="translate(390.5, 272.5)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 200)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 300)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 400)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <svg
+            data-testid="icon"
+            class="icon"
+            viewBox="0 0 16 16"
+            version="1.1"
+            width="16"
+            height="16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"
+            />
+          </svg>
+
+          <text class="stat bold" x="25" y="12.5">
+            Contributed to (last year):
+          </text>
+          <text class="stat bold" x="219.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,185 @@
+<svg
+  width="450"
+  height="195"
+  viewBox="0 0 450 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">
+    &#1057;&#1090;&#1072;&#1090;&#1080;&#1089;&#1090;&#1080;&#1082;&#1072;
+    GitHub
+    &#1087;&#1086;&#1083;&#1100;&#1079;&#1086;&#1074;&#1072;&#1090;&#1077;&#1083;&#1103;
+    Cateline Mnemosyne, Rank: A+
+  </title>
+  <desc id="descId">
+    Всего звезд: 1, Всего коммитов in 2023 : 1, Всего pull request`ов: 1, Всего
+    issue: 1, Внёс вклад в (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="449"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        &#1057;&#1090;&#1072;&#1090;&#1080;&#1089;&#1090;&#1080;&#1082;&#1072;
+        GitHub
+        &#1087;&#1086;&#1083;&#1100;&#1079;&#1086;&#1074;&#1072;&#1090;&#1077;&#1083;&#1103;
+        Cateline Mnemosyne
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <g data-testid="rank-circle" transform="translate(365, 47.5)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Всего звезд:</text>
+          <text class="stat bold" x="249.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Всего коммитов (2023):</text>
+          <text class="stat bold" x="249.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Всего pull request`ов:</text>
+          <text class="stat bold" x="249.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Всего issue:</text>
+          <text class="stat bold" x="249.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Внёс вклад в (last year):</text>
+          <text class="stat bold" x="249.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,177 @@
+<svg
+  width="450"
+  height="195"
+  viewBox="0 0 450 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">Cateline Mnemosyne's GitHub Stats, Rank: A+</title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #fe428e;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #a9fef7;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #a9fef7;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #f8d847;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #fe428e;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #fe428e;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="449"
+    fill="#141321"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Cateline Mnemosyne's GitHub Stats
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <g data-testid="rank-circle" transform="translate(365, 47.5)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,177 @@
+<svg
+  width="450"
+  height="195"
+  viewBox="0 0 450 195"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-labelledby="descId"
+>
+  <title id="titleId">Cateline Mnemosyne's GitHub Stats, Rank: A+</title>
+  <desc id="descId">
+    Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total
+    Issues: 1, Contributed to (last year): 1
+  </desc>
+  <style>
+    .header {
+      font: 600 18px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #2f80ed;
+      animation: fadeInAnimation 0.8s ease-in-out forwards;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .header {
+        font-size: 15.5px;
+      }
+    }
+
+    .stat {
+      font: 600 14px "Segoe UI", Ubuntu, "Helvetica Neue", Sans-Serif;
+      fill: #434d58;
+    }
+    @supports (-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat {
+        font-size: 12px;
+      }
+    }
+
+    .rank-text {
+      font: 800 24px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: #434d58;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
+    }
+
+    .not_bold {
+      font-weight: 400;
+    }
+    .bold {
+      font-weight: 700;
+    }
+    .icon {
+      fill: #4c71f2;
+      display: none;
+    }
+
+    .rank-circle-rim {
+      stroke: #2f80ed;
+      fill: none;
+      stroke-width: 6;
+      opacity: 0.2;
+    }
+    .rank-circle {
+      stroke: #2f80ed;
+      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;
+    }
+
+    * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  </style>
+
+  <rect
+    data-testid="card-bg"
+    x="0.5"
+    y="0.5"
+    rx="4.5"
+    height="99%"
+    stroke="#e4e2e2"
+    width="449"
+    fill="#fffefe"
+    stroke-opacity="1"
+  />
+
+  <g data-testid="card-title" transform="translate(25, 35)">
+    <g transform="translate(0, 0)">
+      <text x="0" y="0" class="header" data-testid="header">
+        Cateline Mnemosyne's GitHub Stats
+      </text>
+    </g>
+  </g>
+
+  <g data-testid="main-card-body" transform="translate(0, 55)">
+    <g data-testid="rank-circle" transform="translate(365, 47.5)">
+      <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
+      <circle class="rank-circle" cx="-10" cy="8" r="40" />
+      <g class="rank-text">
+        <text
+          x="-5"
+          y="3"
+          alignment-baseline="central"
+          dominant-baseline="central"
+          text-anchor="middle"
+        >
+          A+
+        </text>
+      </g>
+    </g>
+    <svg x="0" y="0">
+      <g transform="translate(0, 0)">
+        <g
+          class="stagger"
+          style="animation-delay: 450ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Stars Earned:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="stars">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 25)">
+        <g
+          class="stagger"
+          style="animation-delay: 600ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Commits (2023):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="commits">
+            7
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 50)">
+        <g
+          class="stagger"
+          style="animation-delay: 750ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total PRs:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="prs">1</text>
+        </g>
+      </g>
+      <g transform="translate(0, 75)">
+        <g
+          class="stagger"
+          style="animation-delay: 900ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Total Issues:</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="issues">
+            1
+          </text>
+        </g>
+      </g>
+      <g transform="translate(0, 100)">
+        <g
+          class="stagger"
+          style="animation-delay: 1050ms"
+          transform="translate(25, 0)"
+        >
+          <text class="stat bold" y="12.5">Contributed to (last year):</text>
+          <text class="stat bold" x="199.01" y="12.5" data-testid="contribs">
+            1
+          </text>
+        </g>
+      </g>
+    </svg>
+  </g>
+</svg>
@@ -0,0 +1,152 @@
+import "jest-svg-snapshot";
+import "@testing-library/jest-dom";
+import renderStatsCard from "../../src/cards/stats-card";
+import prettier from "prettier";
+
+const STATS_DATA = {
+  name: "Cateline Mnemosyne",
+  totalPRs: 1,
+  totalCommits: 7,
+  totalIssues: 1,
+  totalStars: 1,
+  contributedTo: 1,
+  rank: {
+    level: "A+",
+    score: 50.893750297869225,
+  },
+};
+
+const format = (svg) => prettier.format(svg, { parser: "html" });
+
+describe("statsCard", () => {
+  it("should match default stat card", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, { disable_animations: true }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+  it("option hide", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        hide: ["commits", "stars"],
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+  it("option hide_border", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        hide_border: true,
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+  it("option hide_title", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        hide_title: true,
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+  it("option hide_rank", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        hide_rank: true,
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+  it("option theme", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        theme: "radical",
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+  it("option card_width", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        card_width: 800,
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+  it("option custom_title", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        custom_title:
+          "Hello world, this is a very very very very very long title",
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+  it("option custom_title hideRank", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        hide_rank: true,
+        custom_title:
+          "Hello world, this is a very very very very very long title",
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+
+  it("option custom_title hideRank card_width", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        card_width: 300,
+        hide_rank: true,
+        custom_title:
+          "Hello world, this is a very very very very very long title",
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+
+  it("option line_height show_icons", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        line_height: 100,
+        show_icons: true,
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+
+  it("option locale", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        locale: "ru",
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+
+  it("option colors", () => {
+    const svg = format(
+      renderStatsCard(STATS_DATA, {
+        disable_animations: true,
+        border_color: "0044ff",
+        title_color: "abd200",
+        icon_color: "b7d364",
+        text_color: "68b587",
+        bg_color: "0a0f0b",
+        show_icons: true,
+      }),
+    );
+    expect(svg).toMatchSVGSnapshot();
+  });
+});
@@ -32,11 +32,10 @@ Use `?theme=THEME_NAME` parameter like so :-
 | `jolly` ![jolly][jolly] | `maroongold` ![maroongold][maroongold] | `yeblu` ![yeblu][yeblu] |
 | `blueberry` ![blueberry][blueberry] | `slateorange` ![slateorange][slateorange] | `kacho_ga` ![kacho_ga][kacho_ga] |
 | `outrun` ![outrun][outrun] | `ocean_dark` ![ocean_dark][ocean_dark] | `city_lights` ![city_lights][city_lights] |
-| `github_dark` ![github_dark][github_dark] | `github_dark_dimmed` ![github_dark_dimmed][github_dark_dimmed] | `discord_old_blurple` ![discord_old_blurple][discord_old_blurple] |
+| `github_dark` ![github_dark][github_dark] | `discord_old_blurple` ![discord_old_blurple][discord_old_blurple] | `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] |
-|  `aura_dark` ![aura_dark][aura_dark] | | |
 | [Add your theme][add-theme] | | |

 ## Repo Card
@@ -61,11 +60,10 @@ Use `?theme=THEME_NAME` parameter like so :-
 | `jolly` ![jolly][jolly_repo] | `maroongold` ![maroongold][maroongold_repo] | `yeblu` ![yeblu][yeblu_repo] |
 | `blueberry` ![blueberry][blueberry_repo] | `slateorange` ![slateorange][slateorange_repo] | `kacho_ga` ![kacho_ga][kacho_ga_repo] |
 | `outrun` ![outrun][outrun_repo] | `ocean_dark` ![ocean_dark][ocean_dark_repo] | `city_lights` ![city_lights][city_lights_repo] |
-| `github_dark` ![github_dark][github_dark_repo] | `github_dark_dimmed` ![github_dark_dimmed][github_dark_dimmed_repo] | `discord_old_blurple` ![discord_old_blurple][discord_old_blurple_repo] |
+| `github_dark` ![github_dark][github_dark_repo] | `discord_old_blurple` ![discord_old_blurple][discord_old_blurple_repo] | `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] |
-| `aura_dark` ![aura_dark][aura_dark_repo] | | |
 | [Add your theme][add-theme] | | |


@@ -119,8 +117,8 @@ Use `?theme=THEME_NAME` parameter like so :-
 [ocean_dark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=ocean_dark
 [city_lights]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=city_lights
 [github_dark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=github_dark
-[github_dark_dimmed]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=github_dark_dimmed
 [discord_old_blurple]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=discord_old_blurple
+[aura_dark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=aura_dark
 [panda]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=panda
 [noctis_minimus]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=noctis_minimus
 [cobalt2]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=cobalt2
@@ -130,7 +128,7 @@ 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
-[aura_dark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=aura_dark
+

 [default_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=default
 [default_repocard_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=default_repocard
@@ -182,8 +180,8 @@ Use `?theme=THEME_NAME` parameter like so :-
 [ocean_dark_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=ocean_dark
 [city_lights_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=city_lights
 [github_dark_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=github_dark
-[github_dark_dimmed_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=github_dark_dimmed
 [discord_old_blurple_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=discord_old_blurple
+[aura_dark_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=aura_dark
 [panda_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=panda
 [noctis_minimus_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=noctis_minimus
 [cobalt2_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=cobalt2
@@ -193,7 +191,7 @@ 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
-[aura_dark_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=aura_dark
+

 [add-theme]: https://github.com/anuraghazra/github-readme-stats/edit/master/themes/index.js

@@ -18,27 +18,6 @@ export const themes = {
    text_color: "417E87",
    bg_color: "ffffff00",
  },
-  shadow_red: {
-    title_color: "9A0000",
-    text_color: "444",
-    icon_color: "4F0000",
-    border_color: "4F0000",
-    bg_color: "ffffff00",
-  },
-  shadow_green: {
-    title_color: "007A00",
-    text_color: "444",
-    icon_color: "003D00",
-    border_color: "003D00",
-    bg_color: "ffffff00",
-  },
-  shadow_blue: {
-    title_color: "00779A",
-    text_color: "444",
-    icon_color: "004450",
-    border_color: "004490",
-    bg_color: "ffffff00",
-  },
  dark: {
    title_color: "fff",
    icon_color: "79ff97",
@@ -321,13 +300,6 @@ export const themes = {
    text_color: "C3D1D9",
    bg_color: "0D1117",
  },
-  github_dark_dimmed: {
-    title_color: "539bf5",
-    icon_color: "539bf5",
-    text_color: "ADBAC7",
-    bg_color: "24292F",
-    border_color: "373E47",
-  },
  discord_old_blurple: {
    title_color: "7289DA",
    icon_color: "7289DA",
@@ -402,27 +374,6 @@ export const themes = {
    border_color: "170F0C",
    bg_color: "170F0C",
  },
-  one_dark_pro: {
-    title_color: "61AFEF",
-    text_color: "E5C06E",
-    icon_color: "C678DD",
-    border_color: "3B4048",
-    bg_color: "23272E",
-  },
-  rose: {
-    title_color: "8d192b",
-    text_color: "862931",
-    icon_color: "B71F36",
-    border_color: "e9d8d4",
-    bg_color: "e9d8d4",
-  },
-  holi: {
-    title_color: "5FABEE",
-    text_color: "D6E7FF",
-    icon_color: "5FABEE",
-    border_color: "85A4C0",
-    bg_color: "030314",
-  },
 };

 export default themes;
Author	SHA1	Message	Date
Anurag	40b95880ae	chore: update	2023-01-28 23:32:46 +05:30
Anurag	382d7c2512	chore: add svg snapshots	2023-01-28 23:31:20 +05:30