Merge branch 'anuraghazra:master' into master

Author: developStorm

docs/readme_de.md

@@ -1,6 +1,6 @@
 <p align="center">
  <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="GitHub Readme Stats" />
- <h2 align="center">GitHub Readme Stats</h2>
+ <h2 align="center">GitHub Readme Statistiken</h2>
  <p align="center">Zeige dynamisch generierte GitHub-Statistiken in deinen Readmes!</p>
 </p>
 
@@ -28,7 +28,7 @@
   </p>
 
   <p align="center">
-    <a href="#demo">Beispiel ansehen</a>
+    <a href="#demo">Beispiele ansehen</a>
     ·
     <a href="https://github.com/anuraghazra/github-readme-stats/issues/new/choose">Fehler melden</a>
     ·
@@ -70,8 +70,7 @@
 
 # GitHub Statistiken-Karte
 
-Kopiere einfach folgendes in dein Markdown und das wars. Echt simpel!
-
+Kopiere folgendes in deine Readme um die Statistiken zu benutzen.
 Passe den Wert des URL-Parameters `?username=` so an, dass dort dein GitHub Nutzername steht.
 
 ```md
@@ -100,7 +99,7 @@ Um Symbole anzuzeigen kann der URL-Paramter `show_icons=true` wie folgt verwende
 
 ### Erscheinungsbild/Themes
 
-Mithilfe der eingebauten Themes kann das Aussehen der Karten verändern werden ohne manuelle Anpassungen vornehmen zu müssen.
+Mithilfe der eingebauten Themes kann das Aussehen der Karten verändern werden, ohne manuelle Anpassungen vornehmen zu müssen.
 
 Benutze den `?theme=THEME_NAME`-Parameter wie folgt :-
 
@@ -115,7 +114,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 <img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="GitHub Readme Stat Themes" width="600px"/>
 
 Du kannst dir eine Vorschau [aller verfügbaren Themes](../themes/README.md) ansehen oder die [theme config Datei](../themes/index.js) ansehen.
-Außerdem **kannst du neue Themes beisteuern**, Beiträge sind gern gesehen :D
+Außerdem **kannst du neue Themes erstellen**, Beiträge an diesem Projekt sind gerne gesehen! :D
 
 ### Anpassungen/Personalisierung
 
@@ -127,7 +126,7 @@ Du kannst das Erscheinungsbild deiner `Stats Card` oder `Repo Card`, mithilfe vo
 - `text_color` - Textkörperfarbe _(hex color)_
 - `icon_color` - Symbolfarbe (falls verfügbar) _(hex color)_
 - `bg_color` - Hintergrundfarbe _(hex color)_ **oder** ein Farbverlauf in der Form von _winkel,start,ende_
-- `hide_border` - Blendet den Rand der Karte aus _(Boolescher Wert)_
+- `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: 1800, max: 86400)_
 - `locale` - Stellen Sie die Sprache auf der Karte ein _(z.B. cn, de, es, etc.)_
@@ -145,21 +144,21 @@ Du kannst mehrere, mit Kommas separierte, Werte in der bg_color Option angeben,
 #### Exklusive Optionen der Statistiken-Karte:
 
 - `hide` - Verbirgt die angegeben Elemente _(mit Komma abgegrenzte Werte)_
-- `hide_title` - _(boolean)_
-- `hide_rank` - _(boolean)_
-- `show_icons` - _(boolean)_
-- `include_all_commits` - Zähle alle Beiträge anstatt nur das aktuelle Jahr _(boolean)_
-- `count_private` - Zähle private Beiträge _(boolean)_
+- `hide_title` - _(Boolean)_
+- `hide_rank` - _(Boolean)_
+- `show_icons` - _(Boolean)_
+- `include_all_commits` - Zähle alle Beiträge anstatt nur das aktuelle Jahr _(Boolean)_
+- `count_private` - Zähle private Beiträge _(Boolean)_
 - `line_height` - Legt die Zeilenhöhe zwischen Text fest _(Zahl)_
 
 #### Exklusive Optionen der Repo-Karte:
 
-- `show_owner` - Zeigt den Besitzer des Repos _(boolean)_
+- `show_owner` - Zeigt den Besitzer des Repos _(Boolean)_
 
 #### Exklusive Optionen der Sprachen-Karte:
 
 - `hide` - Verbirgt die angegebenen Sprachen von der Karte _(Komma separierte Werte)_
-- `hide_title` - _(boolean)_
+- `hide_title` - _(Boolean)_
 - `layout` - Wechsel zwischen den zwei verfügbaren Layouts `default` & `compact`
 - `card_width` - Lege die Breite der Karte manuell fest _(Zahl)_
 
@@ -169,9 +168,9 @@ Du kannst mehrere, mit Kommas separierte, Werte in der bg_color Option angeben,
 
 #### Exklusive Optionen der WakaTime-Karte:
 
-- `hide_title` - _(boolean)_
-- `line_height` - Legt die Zeilenhöhe des Texts fest _(number)_
-- `hide_progress` - Verbirgt die Fortschrittanzeige und Prozentzahl _(boolean)_
+- `hide_title` - _(Boolean)_
+- `line_height` - Legt die Zeilenhöhe des Texts fest _(Zahl)_
+- `hide_progress` - Verbirgt die Fortschrittanzeige und Prozentzahl _(Boolean)_
 - `custom_title` - Legt einen benutzerdefinierten Titel fest
 - `layout` - Wechselt zwischen zwei verschiedenen Layouts: `default` & `compact`
 - `langs_count` - Begrenzt die Anzahl der angezeigten Sprachen auf der Karte
@@ -180,15 +179,17 @@ Du kannst mehrere, mit Kommas separierte, Werte in der bg_color Option angeben,
 
 ---
 
-# GitHub Extra Pins
+# GitHub Extra-Pins
 
-GitHub extra pins ermöglicht es mit Hilfe einer Readme auf deinem Profil mehr als 6 Repositories anzuzeigen.
+GitHub Extra-Pins ermöglicht es mit Hilfe einer Readme auf deinem Profil mehr als 6 Repositories anzuzeigen.
 
 Und Bääm! Du bist nicht mehr auf 6 angeheftete Repositories limitiert.
 
 ### Benutzung
 
 Füge diesen Code in deine Readme-Datei ein und passe die Links an.
+Passe den Wert des URL-Parameters `?username=` so an, dass dort dein GitHub Nutzername steht.
+Den Wert des URL-Parameters `?repo=` musst du so anpassen, dass dort der Namen deines Repositorys steht.
 
 Endpunkt: `api/pin?username=anuraghazra&repo=github-readme-stats`
 
@@ -206,13 +207,14 @@ Benutze die [show_owner](#anpassungenpersonalisierung) Variable, um den Nutzerna
 
 # Top Programmiersprachen-Karte
 
-Die Top Programmiersprachen Card visualisiert die am meisten benutzten Programmiersprachen eines GitHub-Nutzers.
+Die Top Programmiersprachen-Karte visualisiert die am meisten benutzten Programmiersprachen eines GitHub-Nutzers.
 
 _HINWEIS: Die Top Programmiersprachen treffen keine Aussage über persönliche Fähigkeiten oder dergleichen, es ist lediglich eine auf den GitHub-Statistiken des Nutzers basierende Kennzahl, welche Programmiersprache wie häufig verwendet wurde._
 
 ### Benutzung
 
 Füge diesen Code in deine Readme-Datei ein und passe die Links an.
+Passe den Wert des URL-Parameters `?username=` so an, dass dort dein GitHub Nutzername steht.
 
 Endpunkt: `api/top-langs?username=anuraghazra`
 
@@ -296,7 +298,7 @@ Wähle Eines von den [Standard-Themes](#themes)
 
 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
 
-- Repo-Karte anpassen
+- Repo-Karte(Extra-Pin) anpassen
 
 ![Customized Card](https://github-readme-stats.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&title_color=fff&icon_color=f9f9f9&text_color=9f9f9f&bg_color=151515)
 
@@ -308,7 +310,7 @@ Wähle Eines von den [Standard-Themes](#themes)
 
 ### Kleiner Tipp (Ausrichten der Repo-Karte)
 
-Üblicherweise ist es in `.md`-Dateien nicht möglich Bilder nebeneinander anzuzeigen. Um dies zu erreichen kann folgender Ansatz gewählt werden:
+Üblicherweise ist es in `.md`-Dateien nicht möglich Bilder nebeneinander anzuzeigen. Um dies zu ermöglichen, kannst du folgendes tun:
 
 ```md
 <a href="https://github.com/anuraghazra/github-readme-stats">
@@ -321,7 +323,7 @@ Wähle Eines von den [Standard-Themes](#themes)
 
 ## Betreibe es auf deiner eigenen Vercel-Instanz
 
-#### [Check Out Step By Step Video Tutorial By @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)
+#### [Schritt für Schritt YouTube Tutorial by @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)
 
 Da die GitHub API nur 5 Tsd Aufrufe pro Stunde zulässt, kann es passieren, dass meine `https://github-readme-stats.vercel.app/api` dieses Limit erreicht.
 Wenn du es auf deinem eigenen Vercel-Server hostest, brauchst du dich darum nicht zu kümmern. Klicke auf den Deploy-Knopf um loszulegen!
@@ -340,21 +342,21 @@ Hinweis: Seit [#58](https://github.com/anuraghazra/github-readme-stats/pull/58)
    ![](https://files.catbox.moe/btd78j.jpeg)
 1. Verbinde dich mit GitHub und erlaube den Zugriff auf alle Repositories (falls gefordert)
 1. Forke dieses Repository
-1. Gehe zurück zu deinem [Vercel dashboard](https://vercel.com/dashboard)
+1. Gehe zurück zu deinem [Vercel Dashboard](https://vercel.com/dashboard)
 1. Klick `Import Project`
    ![](https://files.catbox.moe/qckos0.png)
 1. Klick `Import Git Repository`
    ![](https://files.catbox.moe/pqub9q.png)
 1. Wähle root und füge eine Umgebungsvariable namens PAT_1 (siehe Abbildung) die als Wert deinen persönlichen Access Token (PAT) hat hinzu, den du einfach [hier](https://github.com/settings/tokens/new) erzeugen kannst (lasse alles wie es ist, vergebe einen beliebigen Namen)
    ![](https://files.catbox.moe/0ez4g7.png)
-1. Klicke deploy, und das wars. Besuche deine domains um die API zu benutzen!
+1. Klicke deploy, und das wars. Besuche deine Domains um die API zu benutzen!
 </details>
 
 ## :sparkling_heart: Unterstütze das Projekt
 
-Ich versuche alles was ich kann als Open-Source zur Verfügung zu stellen, als auch jedem der Hilfe bei der Benutzung dieses Projektes braucht zu antworten. Natürlich beansprucht sowas Zeit und Du kannst diesen Dienst kostenlos benutzen.
+Ich versuche alles was ich kann als Open-Source zur Verfügung zu stellen, als auch jedem der Hilfe bei der Benutzung dieses Projektes braucht zu antworten. Natürlich beansprucht sowas Zeit und du kannst diesen Dienst kostenlos benutzen.
 
-Dennoch, wenn Du dieses Projekt benutzt und damit zufrieden bist oder mich einfach nur motivieren möchtest weiterhin daran zu arbeiten, gibt es verschiedene Sachen die Du machen kannst:-
+Wenn du dieses Projekt nutzt und zufrieden bist, kannst du dennoch Dinge tun um mich weiterhin zu motivieren am Projekt zu arbeiten:
 
 - Erwähne und verlinke das Projekt in deiner Readme wenn du es benutzt :D
 - Geb dem Projekt einen Stern hier auf GitHub und teile es :rocket:
@@ -369,4 +371,4 @@ Vielen Dank! :heart:
 
 Mitarbeit an dem Projekt ist immer Willkommen! <3
 
-Gebaut mit :heart: und JavaScript.
+Gemacht mit viel :heart: und JavaScript.

src/cards/wakatime-card.js

@@ -61,14 +61,14 @@ const createTextNode = ({
   const cardProgress = hideProgress
     ? null
     : createProgressNode({
-        x: 110,
-        y: 4,
-        progress: percent,
-        color: progressBarColor,
-        width: 220,
-        name: label,
-        progressBarBackgroundColor,
-      });
+      x: 110,
+      y: 4,
+      progress: percent,
+      color: progressBarColor,
+      width: 220,
+      name: label,
+      progressBarBackgroundColor,
+    });
 
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
@@ -129,26 +129,15 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     theme,
   });
 
-  const statItems = languages
+  const filteredLanguages = languages
     ? languages
-        .filter((language) => language.hours || language.minutes)
-        .slice(0, langsCount)
-        .map((language) => {
-          return createTextNode({
-            id: language.name,
-            label: language.name,
-            value: language.text,
-            percent: language.percent,
-            progressBarColor: titleColor,
-            progressBarBackgroundColor: textColor,
-            hideProgress: hide_progress,
-          });
-        })
+      .filter((language) => language.hours || language.minutes)
+      .slice(0, langsCount)
     : [];
 
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
-  let height = Math.max(45 + (statItems.length + 1) * lheight, 150);
+  let height = Math.max(45 + (filteredLanguages.length + 1) * lheight, 150);
 
   const cssStyles = getStyles({
     titleColor,
@@ -163,17 +152,17 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   // RENDER COMPACT LAYOUT
   if (layout === "compact") {
     width = width + 50;
-    height = 90 + Math.round(languages.length / 2) * 25;
+    height = 90 + Math.round(filteredLanguages.length / 2) * 25;
 
     // progressOffset holds the previous language's width and used to offset the next language
     // so that we can stack them one after another, like this: [--][----][---]
     let progressOffset = 0;
-    const compactProgressBar = languages
-      .map((lang) => {
+    const compactProgressBar = filteredLanguages
+      .map((language) => {
         // const progress = (width * lang.percent) / 100;
-        const progress = ((width - 25) * lang.percent) / 100;
+        const progress = ((width - 25) * language.percent) / 100;
 
-        const languageColor = languageColors[lang.name] || "#858585";
+        const languageColor = languageColors[language.name] || "#858585";
 
         const output = `
           <rect
@@ -197,22 +186,33 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
       </mask>
       ${compactProgressBar}
       ${createLanguageTextNode({
-        x: 0,
-        y: 25,
-        langs: languages,
-        totalSize: 100,
-      }).join("")}
+      x: 0,
+      y: 25,
+      langs: filteredLanguages,
+      totalSize: 100,
+    }).join("")}
     `;
   } else {
     finalLayout = flexLayout({
-      items: statItems.length
-        ? statItems
+      items: filteredLanguages.length
+        ? filteredLanguages
+          .map((language) => {
+            return createTextNode({
+              id: language.name,
+              label: language.name,
+              value: language.text,
+              percent: language.percent,
+              progressBarColor: titleColor,
+              progressBarBackgroundColor: textColor,
+              hideProgress: hide_progress,
+            });
+          })
         : [
-            noCodingActivityNode({
-              color: textColor,
-              text: i18n.t("wakatimecard.nocodingactivity"),
-            }),
-          ],
+          noCodingActivityNode({
+            color: textColor,
+            text: i18n.t("wakatimecard.nocodingactivity"),
+          }),
+        ],
       gap: lheight,
       direction: "column",
     }).join("");