Repository: anuraghazra/github-readme-stats
Pull request #2536 (2023-02-22 12:25:17)

fix: for issue #2534
Updated the code and respective test case as well. And also fixed for minimum width difference as well. Here is the preview 

### Without the Fix
![Screenshot 2023-02-22 at 5 12 15 PM](https://user-images.githubusercontent.com/25659255/220618008-40dd193a-4572-4084-a869-7997312ad464.png)

### With the Fix
![Screenshot 2023-02-22 at 5 11 53 PM](https://user-images.githubusercontent.com/25659255/220618000-0bebe7ea-8323-4d8c-afd9-15b497e96096.png)

### Increased Min width to accommodate for reduced width
![Screenshot 2023-02-22 at 5 38 23 PM](https://user-images.githubusercontent.com/25659255/220617977-67bd2da0-2126-468e-b133-1236731b3318.png)


vercel[bot]: @MD-REHMAN is attempting to deploy a commit to the **github readme stats** Team on [Vercel](https://vercel.com).

A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=github%20readme%20stats&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%22c6e00ec2d68f93dc25890f3dab9e2df45c5c7d05%22%7D%2C%22id%22%3A%22QmVjbhqYoMV6zEQWDHBpih5tkWsvrRPSRoL5MFTRvVq8XZ%22%2C%22org%22%3A%22anuraghazra%22%2C%22prId%22%3A2536%2C%22repo%22%3A%22github-readme-stats%22%7D).



Patch:
diff --git a/.github/labeler.yml b/.github/labeler.yml
index be97765..fad3eee 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -1,3 +1,4 @@
 themes: themes/index.js
 doc-translation: docs/*
 card-i18n: src/translations.js
+documentation: readme.md
diff --git a/.github/workflows/generate-theme-doc.yml b/.github/workflows/generate-theme-doc.yml
index d5fac06..75f6511 100644
--- a/.github/workflows/generate-theme-doc.yml
+++ b/.github/workflows/generate-theme-doc.yml
@@ -23,6 +23,10 @@ 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
diff --git a/readme.md b/readme.md
index 29852bf..83f573e 100644
--- a/readme.md
+++ b/readme.md
@@ -133,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)
diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js
index be1328c..ce8e12a 100644
--- a/src/cards/top-languages-card.js
+++ b/src/cards/top-languages-card.js
@@ -13,7 +13,7 @@ import {
 import { langCardLocales } from "../translations.js";
 
 const DEFAULT_CARD_WIDTH = 300;
-const MIN_CARD_WIDTH = 230;
+const MIN_CARD_WIDTH = 280;
 const DEFAULT_LANGS_COUNT = 5;
 const DEFAULT_LANG_COLOR = "#858585";
 const CARD_PADDING = 25;
@@ -317,7 +317,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
 
   let finalLayout = "";
   if (layout === "compact" || hide_progress == true) {
-    width = width + 50; // padding
     height =
       calculateCompactLayoutHeight(langs.length) + (hide_progress ? -25 : 0);
 
diff --git a/src/cards/wakatime-card.js b/src/cards/wakatime-card.js
index e7af1df..2c32955 100644
--- a/src/cards/wakatime-card.js
+++ b/src/cards/wakatime-card.js
@@ -118,6 +118,7 @@ const createTextNode = ({
         // @ts-ignore
         name: label,
         progressBarBackgroundColor,
+        delay: staggerDelay + 300,
       });
 
   return `
@@ -276,11 +277,12 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   } else {
     finalLayout = flexLayout({
       items: filteredLanguages.length
-        ? filteredLanguages.map((language) => {
+        ? filteredLanguages.map((language, index) => {
             return createTextNode({
               id: language.name,
               label: language.name,
               value: language.text,
+              index: index,
               percent: language.percent,
               // @ts-ignore
               progressBarColor: titleColor,
@@ -321,7 +323,29 @@ 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;
+    }
     `,
   );
 
diff --git a/themes/index.js b/themes/index.js
index 60825d1..01c9a8e 100644
--- a/themes/index.js
+++ b/themes/index.js
@@ -374,6 +374,13 @@ 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",
@@ -381,6 +388,13 @@ export const themes = {
     border_color: "e9d8d4",
     bg_color: "e9d8d4",
   },
+  holi_theme: {
+    title_color: "5FABEE",
+    text_color: "D6E7FF",
+    icon_color: "5FABEE",
+    border_color: "85A4C0",
+    bg_color: "030314",
+  },
 };
 
 export default themes;


Test patch:
diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap
index 1c0bd70..6dfaf98 100644
--- a/tests/__snapshots__/renderWakatimeCard.test.js.snap
+++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap
@@ -69,7 +69,29 @@ 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;
+    }
     
 
           
@@ -227,7 +249,29 @@ 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;
+    }
     
 
           
diff --git a/tests/renderTopLanguages.test.js b/tests/renderTopLanguages.test.js
index 8ae4bbd..de9e21f 100644
--- a/tests/renderTopLanguages.test.js
+++ b/tests/renderTopLanguages.test.js
@@ -216,7 +216,7 @@ describe("Test renderTopLanguages", () => {
     );
     expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute(
       "width",
-      "120",
+      "100",
     );
 
     expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
@@ -224,7 +224,7 @@ describe("Test renderTopLanguages", () => {
     );
     expect(queryAllByTestId(document.body, "lang-progress")[1]).toHaveAttribute(
       "width",
-      "120",
+      "100",
     );
 
     expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
@@ -232,7 +232,7 @@ describe("Test renderTopLanguages", () => {
     );
     expect(queryAllByTestId(document.body, "lang-progress")[2]).toHaveAttribute(
       "width",
-      "60",
+      "50",
     );
   });