forked from mirrored/github-readme-stats
Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Zohan Subhash
|
33ad0f4ee8 | ||
|
Zohan Subhash
|
26a8a23421 |
@@ -80,6 +80,9 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
|
||||
|
||||
# Features
|
||||
|
||||
- [Getting Started](#getting-started)
|
||||
- [GitHub Actions](#github-actions-recommended)
|
||||
- [Community Deployment](#community-deployment)
|
||||
- [GitHub Stats Card](#github-stats-card)
|
||||
- [GitHub Extra Pins](#github-extra-pins)
|
||||
- [Top Languages Card](#top-languages-card)
|
||||
@@ -94,17 +97,141 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
|
||||
- [Wakatime Card Exclusive Option](#wakatime-card-exclusive-options)
|
||||
- [Deploy Yourself](#deploy-on-your-own-vercel-instance)
|
||||
- [Keep your fork up to date](#keep-your-fork-up-to-date)
|
||||
|
||||
# Getting Started
|
||||
|
||||
# GitHub Stats Card
|
||||
## GitHub Actions (Recommended)
|
||||
|
||||
Copy-paste this into your markdown content, and that is it. Simple!
|
||||
Using GitHub Actions over the community deployment is recommended because it provides more accurate stats and 100% uptime. Simply copy-paste the following into the `/.github/workflows/grs.yml` file in your README repo (`USERNAME/USERNAME`).
|
||||
|
||||
Change the `?username=` value to your GitHub username.
|
||||
```yml
|
||||
name: GitHub Readme Stats
|
||||
on:
|
||||
workflow_dispatch:
|
||||
schedule:
|
||||
- cron: 0 * * * *
|
||||
|
||||
jobs:
|
||||
grs:
|
||||
permissions: write-all
|
||||
runs-on: ubuntu-latest
|
||||
name: Generate Stats
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
- name: Generate Stats
|
||||
uses: Zo-Bro-23/grs-action@v1
|
||||
id: generate
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
options: 'username=${{ github.repository_owner }}'
|
||||
- name: Push
|
||||
uses: crazy-max/ghaction-github-pages@v3
|
||||
with:
|
||||
target_branch: grs
|
||||
build_dir: grs
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
```
|
||||
|
||||
If you want to generate multiple stats, such as top languages, wakatime, etc, you can use the following code.
|
||||
|
||||
```yml
|
||||
name: GitHub Readme Stats
|
||||
on:
|
||||
workflow_dispatch:
|
||||
schedule:
|
||||
- cron: 0 * * * *
|
||||
|
||||
jobs:
|
||||
stats:
|
||||
permissions: write-all
|
||||
runs-on: ubuntu-latest
|
||||
name: Stats Card
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
- name: Generate Stats
|
||||
uses: Zo-Bro-23/grs-action@v1
|
||||
id: generate
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
options: 'username=${{ github.repository_owner }}'
|
||||
- uses: actions/upload-artifact@master
|
||||
with:
|
||||
name: stats
|
||||
path: grs
|
||||
top-langs:
|
||||
permissions: write-all
|
||||
runs-on: ubuntu-latest
|
||||
name: Top Languages Card
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
- name: Generate Top Languages
|
||||
uses: Zo-Bro-23/grs-action@v1
|
||||
id: generate
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
options: 'username=${{ github.repository_owner }}'
|
||||
card: 'top-langs'
|
||||
- uses: actions/upload-artifact@master
|
||||
with:
|
||||
name: top-langs
|
||||
path: grs
|
||||
push:
|
||||
permissions: write-all
|
||||
runs-on: ubuntu-latest
|
||||
name: Push
|
||||
needs: [stats, top-langs]
|
||||
steps:
|
||||
- uses: actions/download-artifact@master
|
||||
with:
|
||||
name: stats
|
||||
path: grs
|
||||
- uses: actions/download-artifact@master
|
||||
with:
|
||||
name: top-langs
|
||||
path: grs
|
||||
- name: Push
|
||||
uses: crazy-max/ghaction-github-pages@v3
|
||||
with:
|
||||
target_branch: grs
|
||||
build_dir: grs
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
```
|
||||
|
||||
You can now include the stats in your README by using the following markdown code (replace `USERNAME` with your GitHub username).
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
You can also enable GitHub Pages on the `grs` branch (root) and use that URL (replace `GH_PAGES_URL` with your GitHub Pages URL).
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
The GitHub Action accepts the following inputs:
|
||||
- `token` - `REQUIRED` - Your GitHub Personal Access Token (PAT), or any other token that GitHub accepts.
|
||||
- `options` - `REQUIRED` - Any customization options. More below. (This is the same as the query string you would pass to the API if using the community deployment)
|
||||
- `card` - The type of card to generate. `repo`, `top-langs`, or `wakatime` (leave empty for stats card).
|
||||
- `path` - Output path for SVG file. Relative path; include filename with `.svg`.
|
||||
- `fetch_multipage` - Experimental feature that gives more accurate stats if you have >100 repos.
|
||||
|
||||
## Community Deployment
|
||||
Copy-paste the following markdown code. Change the `?username=` value to your GitHub username.
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
Other cards can be included by using `/api/top-langs`, `/api/pin`, or `/api/wakatime`. More customization options can be added by using query parameters (`&option1=value1&option2=value2&...`).
|
||||
|
||||
# GitHub Stats Card
|
||||
|
||||
> **Note**
|
||||
> Available ranks are S+ (top 1%), S (top 25%), A++ (top 45%), A+ (top 60%), and B+ (everyone). The values are calculated by using the [cumulative distribution function](https://en.wikipedia.org/wiki/Cumulative_distribution_function) using commits, contributions, issues, stars, pull requests, followers, and owned repositories. The implementation can be investigated at [src/calculateRank.js](./src/calculateRank.js).
|
||||
|
||||
@@ -115,7 +242,7 @@ You can pass a query parameter `&hide=` to hide any specific stats with comma-se
|
||||
> Options: `&hide=stars,commits,prs,issues,contribs`
|
||||
|
||||
```md
|
||||
|
||||
?username=anuraghazra&hide=contribs,prs
|
||||
```
|
||||
|
||||
### Adding private contributions count to total commits count
|
||||
@@ -128,7 +255,7 @@ You can add the count of all your private contributions to the total commits cou
|
||||
> Options: `&count_private=true`
|
||||
|
||||
```md
|
||||
|
||||
?username=anuraghazra&count_private=true
|
||||
```
|
||||
|
||||
### Showing icons
|
||||
@@ -136,7 +263,7 @@ You can add the count of all your private contributions to the total commits cou
|
||||
To enable icons, you can pass `show_icons=true` in the query param, like so:
|
||||
|
||||
```md
|
||||
|
||||
?username=anuraghazra&show_icons=true
|
||||
```
|
||||
|
||||
### Themes
|
||||
@@ -146,7 +273,7 @@ With inbuilt themes, you can customize the look of the card without doing any [m
|
||||
Use `&theme=THEME_NAME` parameter like so :
|
||||
|
||||
```md
|
||||
|
||||
?username=anuraghazra&show_icons=true&theme=radical
|
||||
```
|
||||
|
||||
#### All inbuilt themes
|
||||
@@ -169,7 +296,7 @@ Since GitHub will re-upload the cards and serve them from their [CDN](https://do
|
||||
We have included a `transparent` theme that has a transparent background. This theme is optimized to look good on GitHub's dark and light default themes. You can enable this theme using the `&theme=transparent` parameter like so:
|
||||
|
||||
```md
|
||||
|
||||
?username=anuraghazra&show_icons=true&theme=transparent
|
||||
```
|
||||
|
||||
<details>
|
||||
@@ -184,7 +311,7 @@ We have included a `transparent` theme that has a transparent background. This t
|
||||
You can use the `bg_color` parameter to make any of [the available themes](./themes/README.md) transparent. This is done by setting the `bg_color` to a colour with a transparent alpha channel (i.e. `bg_color=00000000`):
|
||||
|
||||
```md
|
||||
|
||||
?username=anuraghazra&show_icons=true&bg_color=00000000
|
||||
```
|
||||
|
||||
<details>
|
||||
@@ -199,8 +326,8 @@ You can use the `bg_color` parameter to make any of [the available themes](./the
|
||||
You can use [GitHub's theme context](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) tags to switch the theme based on the user GitHub theme automatically. This is done by appending `#gh-dark-mode-only` or `#gh-light-mode-only` to the end of an image URL. This tag will define whether the image specified in the markdown is only shown to viewers using a light or a dark GitHub theme:
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
|
||||
```
|
||||
|
||||
<details>
|
||||
@@ -218,14 +345,14 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1
|
||||
```html
|
||||
<picture>
|
||||
<source
|
||||
srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
|
||||
srcset="https://DARK_SVG_URL/"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
<source
|
||||
srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true"
|
||||
srcset="https://LIGHT_SVG_URL/"
|
||||
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
|
||||
/>
|
||||
<img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true" />
|
||||
<img src="https://DEFAULT_SVG_URL/" />
|
||||
</picture>
|
||||
```
|
||||
|
||||
@@ -248,7 +375,7 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1
|
||||
|
||||
### Customization
|
||||
|
||||
You can customize the appearance of your `Stats Card` or `Repo Card` however you wish with URL parameters.
|
||||
You can customize the appearance of your cards however you wish with these parameters.
|
||||
|
||||
#### Common Options
|
||||
|
||||
@@ -264,7 +391,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
|
||||
- `border_radius` - Corner rounding on the card. Default: `4.5`.
|
||||
|
||||
> **Warning**
|
||||
> We use caching to decrease the load on our servers (see <https://github.com/anuraghazra/github-readme-stats/issues/1471#issuecomment-1271551425>). Our cards have a default cache of 4 hours (14400 seconds). Also, note that the cache is clamped to a minimum of 4 hours and a maximum of 24 hours.
|
||||
> We use caching to decrease the load on our servers (see <https://github.com/anuraghazra/github-readme-stats/issues/1471#issuecomment-1271551425>). Our cards have a default cache of 4 hours (14400 seconds). Also, note that the cache is clamped to a minimum of 4 hours and a maximum of 24 hours. This is why we recommend using our GitHub Action :)
|
||||
|
||||
##### Gradient in bg_color
|
||||
|
||||
@@ -334,13 +461,7 @@ Yay! You are no longer limited to 6 pinned repositories.
|
||||
|
||||
### Usage
|
||||
|
||||
Copy-paste this code into your readme and change the links.
|
||||
|
||||
Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
Use the `api/pin` endpoint with the API or the `card: 'repo'` option with the GitHub Action.
|
||||
|
||||
### Demo
|
||||
|
||||
@@ -355,24 +476,18 @@ 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 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.
|
||||
> Top Languages does not indicate skill level or anything like that; it's a GitHub metric to determine which languages have the most code on GitHub.
|
||||
|
||||
### Usage
|
||||
|
||||
Copy-paste this code into your readme and change the links.
|
||||
|
||||
Endpoint: `api/top-langs?username=anuraghazra`
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
Use the `api/top-langs` endpoint with the API or the `card: 'top-langs'` option with the GitHub Action.
|
||||
|
||||
### Exclude individual repositories
|
||||
|
||||
You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repositories.
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
?username=anuraghazra&exclude_repo=github-readme-stats,anuraghazra.github.io
|
||||
```
|
||||
|
||||
### Hide individual languages
|
||||
@@ -380,7 +495,7 @@ You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repo
|
||||
You can use `&hide=language1,language2` parameter to hide individual languages.
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
?username=anuraghazra&hide=javascript,html
|
||||
```
|
||||
|
||||
### Show more languages
|
||||
@@ -388,7 +503,7 @@ You can use `&hide=language1,language2` parameter to hide individual languages.
|
||||
You can use the `&langs_count=` option to increase or decrease the number of languages shown on the card. Valid values are integers between 1 and 10 (inclusive), and the default is 5.
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
?username=anuraghazra&langs_count=8
|
||||
```
|
||||
|
||||
### Compact Language Card Layout
|
||||
@@ -396,7 +511,7 @@ You can use the `&langs_count=` option to increase or decrease the number of lan
|
||||
You can use the `&layout=compact` option to change the card design.
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
?username=anuraghazra&layout=compact
|
||||
```
|
||||
|
||||
### Hide Progress Bars
|
||||
@@ -404,7 +519,7 @@ You can use the `&layout=compact` option to change the card design.
|
||||
You can use the `&hide_progress=true` option to hide the percentages and the progress bars (layout will be automatically set to `compact`).
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
?username=anuraghazra&hide_progress=true
|
||||
```
|
||||
|
||||
### Demo
|
||||
@@ -421,15 +536,27 @@ You can use the `&hide_progress=true` option to hide the percentages and the pro
|
||||
|
||||
# Wakatime Week Stats
|
||||
|
||||
### Usage
|
||||
|
||||
Use the `api/wkatime` endpoint with the API or the `card: 'wakatime'` option with the GitHub Action.
|
||||
|
||||
Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
?username=willianrod
|
||||
```
|
||||
|
||||
> **Note**:
|
||||
> Please be aware that we currently only show data from Wakatime profiles that are public.
|
||||
|
||||
### Compact Wakatime Card Layout
|
||||
|
||||
You can use the `&layout=compact` option to change the card design.
|
||||
|
||||
```md
|
||||
?username=willianrod&layout=compact
|
||||
```
|
||||
|
||||
### Demo
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
@@ -502,14 +629,14 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
|
||||
|
||||
```html
|
||||
<a href="https://github.com/anuraghazra/github-readme-stats">
|
||||
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />
|
||||
<img align="center" src="https://SVG_URL/" />
|
||||
</a>
|
||||
<a href="https://github.com/anuraghazra/convoychat">
|
||||
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" />
|
||||
<img align="center" src="https://SVG_URL/" />
|
||||
</a>
|
||||
```
|
||||
|
||||
## Deploy on your own Vercel instance
|
||||
## Deploy your own Vercel instance
|
||||
|
||||
#### :film_projector: [Check Out Step By Step Video Tutorial By @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)
|
||||
|
||||
@@ -548,7 +675,7 @@ Since the GitHub API only allows 5k requests per hour, my `https://github-readme
|
||||
|
||||
### Keep your fork up to date
|
||||
|
||||
You can keep your fork, and thus your private Vercel instance up to date with the upstream using 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.
|
||||
You can keep your fork, and thus your private Vercel instance up to date with the upstream using GitHub's [Sync Fork button](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork). You can also use the [pull](https://github.com/wei/pull) package created by [@wei](https://github.com/wei) to automate this process.
|
||||
|
||||
## :sparkling_heart: Support the project
|
||||
|
||||
|
||||
+35
-51
@@ -87,6 +87,16 @@ const iconWithLabel = (icon, label, testid) => {
|
||||
* @returns {string} Repository card SVG object.
|
||||
*/
|
||||
const renderRepoCard = (repo, options = {}) => {
|
||||
const {
|
||||
name,
|
||||
nameWithOwner,
|
||||
description,
|
||||
primaryLanguage,
|
||||
isArchived,
|
||||
isTemplate,
|
||||
starCount,
|
||||
forkCount,
|
||||
} = repo;
|
||||
const {
|
||||
hide_border = false,
|
||||
title_color,
|
||||
@@ -99,42 +109,6 @@ const renderRepoCard = (repo, options = {}) => {
|
||||
border_color,
|
||||
locale,
|
||||
} = options;
|
||||
|
||||
const i18n = new I18n({
|
||||
locale,
|
||||
translations: repoCardLocales,
|
||||
});
|
||||
|
||||
const colors = getCardColors({
|
||||
title_color,
|
||||
icon_color,
|
||||
text_color,
|
||||
bg_color,
|
||||
border_color,
|
||||
theme,
|
||||
});
|
||||
|
||||
const {
|
||||
name,
|
||||
nameWithOwner,
|
||||
description,
|
||||
primaryLanguage,
|
||||
isArchived,
|
||||
isTemplate,
|
||||
starCount,
|
||||
forkCount,
|
||||
} = repo;
|
||||
|
||||
const highlight = repo.highlight
|
||||
? // @ts-ignore
|
||||
getBadgeSVG(repo.highlight, colors.textColor)
|
||||
: isTemplate
|
||||
? // @ts-ignore
|
||||
getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
|
||||
: isArchived
|
||||
? // @ts-ignore
|
||||
getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
|
||||
: ""
|
||||
|
||||
const lineHeight = 10;
|
||||
const header = show_owner ? nameWithOwner : name;
|
||||
@@ -151,25 +125,27 @@ const renderRepoCard = (repo, options = {}) => {
|
||||
const height =
|
||||
(descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
|
||||
|
||||
const i18n = new I18n({
|
||||
locale,
|
||||
translations: repoCardLocales,
|
||||
});
|
||||
|
||||
// returns theme based colors with proper overrides and defaults
|
||||
const colors = getCardColors({
|
||||
title_color,
|
||||
icon_color,
|
||||
text_color,
|
||||
bg_color,
|
||||
border_color,
|
||||
theme,
|
||||
});
|
||||
|
||||
const svgLanguage = primaryLanguage
|
||||
? createLanguageNode(langName, langColor)
|
||||
: "";
|
||||
|
||||
let totalStars
|
||||
let totalForks
|
||||
if (isNaN(starCount)) {
|
||||
totalStars = starCount;
|
||||
} else {
|
||||
totalStars = kFormatter(starCount);
|
||||
}
|
||||
if (isNaN(forkCount)) {
|
||||
totalForks = forkCount;
|
||||
} else {
|
||||
totalForks = kFormatter(forkCount);
|
||||
}
|
||||
|
||||
|
||||
const totalStars = kFormatter(starCount);
|
||||
const totalForks = kFormatter(forkCount);
|
||||
const svgStars = iconWithLabel(icons.star, totalStars, "stargazers");
|
||||
const svgForks = iconWithLabel(icons.fork, totalForks, "forkcount");
|
||||
|
||||
@@ -204,7 +180,15 @@ const renderRepoCard = (repo, options = {}) => {
|
||||
`);
|
||||
|
||||
return card.render(`
|
||||
${highlight}
|
||||
${
|
||||
isTemplate
|
||||
? // @ts-ignore
|
||||
getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
|
||||
: isArchived
|
||||
? // @ts-ignore
|
||||
getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
|
||||
: ""
|
||||
}
|
||||
|
||||
<text class="description" x="25" y="-5">
|
||||
${descriptionSvg}
|
||||
|
||||
+32
-44
@@ -40,12 +40,7 @@ const createTextNode = ({
|
||||
shiftValuePos,
|
||||
bold,
|
||||
}) => {
|
||||
let kValue
|
||||
if (isNaN(value)) {
|
||||
kValue = value;
|
||||
} else {
|
||||
kValue = kFormatter(value);
|
||||
}
|
||||
const kValue = kFormatter(value);
|
||||
const staggerDelay = (index + 3) * 150;
|
||||
|
||||
const labelOffset = showIcons ? `x="25"` : "";
|
||||
@@ -80,6 +75,15 @@ const createTextNode = ({
|
||||
* @returns {string} The stats card SVG object.
|
||||
*/
|
||||
const renderStatsCard = (stats = {}, options = { hide: [] }) => {
|
||||
const {
|
||||
name,
|
||||
totalStars,
|
||||
totalCommits,
|
||||
totalIssues,
|
||||
totalPRs,
|
||||
contributedTo,
|
||||
rank,
|
||||
} = stats;
|
||||
const {
|
||||
hide = [],
|
||||
show_icons = false,
|
||||
@@ -102,37 +106,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
|
||||
locale,
|
||||
disable_animations = false,
|
||||
} = options;
|
||||
|
||||
const name = stats.name || "GitHub User"
|
||||
|
||||
const apostrophe = ["x", "s"].includes(name.slice(-1).toLocaleLowerCase())
|
||||
? ""
|
||||
: "s";
|
||||
|
||||
const i18n = new I18n({
|
||||
locale,
|
||||
translations: statCardLocales({ name, apostrophe }),
|
||||
});
|
||||
|
||||
const {
|
||||
totalStars = "2018",
|
||||
totalCommits = "29019",
|
||||
totalIssues = "203",
|
||||
totalPRs = "127",
|
||||
contributedTo = "232",
|
||||
rank = {
|
||||
level: "S",
|
||||
score: 10
|
||||
},
|
||||
starsTitle = i18n.t("statcard.totalstars"),
|
||||
commitsTitle = `${i18n.t("statcard.commits")}${
|
||||
include_all_commits ? "" : ` (${new Date().getFullYear()})`
|
||||
}`,
|
||||
issuesTitle = i18n.t("statcard.issues"),
|
||||
PRsTitle = i18n.t("statcard.prs"),
|
||||
contribsTitle = i18n.t("statcard.contribs") + " (last year)",
|
||||
title = i18n.t("statcard.title"),
|
||||
} = stats;
|
||||
|
||||
const lheight = parseInt(String(line_height), 10);
|
||||
|
||||
@@ -148,35 +121,45 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
|
||||
theme,
|
||||
});
|
||||
|
||||
const apostrophe = ["x", "s"].includes(name.slice(-1).toLocaleLowerCase())
|
||||
? ""
|
||||
: "s";
|
||||
const i18n = new I18n({
|
||||
locale,
|
||||
translations: statCardLocales({ name, apostrophe }),
|
||||
});
|
||||
|
||||
// Meta data for creating text nodes with createTextNode function
|
||||
const STATS = {
|
||||
stars: {
|
||||
icon: icons.star,
|
||||
label: starsTitle,
|
||||
label: i18n.t("statcard.totalstars"),
|
||||
value: totalStars,
|
||||
id: "stars",
|
||||
},
|
||||
commits: {
|
||||
icon: icons.commits,
|
||||
label: commitsTitle,
|
||||
label: `${i18n.t("statcard.commits")}${
|
||||
include_all_commits ? "" : ` (${new Date().getFullYear()})`
|
||||
}`,
|
||||
value: totalCommits,
|
||||
id: "commits",
|
||||
},
|
||||
prs: {
|
||||
icon: icons.prs,
|
||||
label: PRsTitle,
|
||||
label: i18n.t("statcard.prs"),
|
||||
value: totalPRs,
|
||||
id: "prs",
|
||||
},
|
||||
issues: {
|
||||
icon: icons.issues,
|
||||
label: issuesTitle,
|
||||
label: i18n.t("statcard.issues"),
|
||||
value: totalIssues,
|
||||
id: "issues",
|
||||
},
|
||||
contribs: {
|
||||
icon: icons.contribs,
|
||||
label: contribsTitle,
|
||||
label: i18n.t("statcard.contribs") + " (last year)",
|
||||
value: contributedTo,
|
||||
id: "contribs",
|
||||
},
|
||||
@@ -232,7 +215,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
|
||||
});
|
||||
|
||||
const calculateTextWidth = () => {
|
||||
return measureText(custom_title ? custom_title : title);
|
||||
return measureText(custom_title ? custom_title : i18n.t("statcard.title"));
|
||||
};
|
||||
|
||||
/*
|
||||
@@ -258,7 +241,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
|
||||
|
||||
const card = new Card({
|
||||
customTitle: custom_title,
|
||||
defaultTitle: title,
|
||||
defaultTitle: i18n.t("statcard.title"),
|
||||
width,
|
||||
height,
|
||||
border_radius,
|
||||
@@ -323,6 +306,11 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
|
||||
const labels = Object.keys(STATS)
|
||||
.filter((key) => !hide.includes(key))
|
||||
.map((key) => {
|
||||
if (key === "commits") {
|
||||
return `${i18n.t("statcard.commits")} ${
|
||||
include_all_commits ? "" : `in ${new Date().getFullYear()}`
|
||||
} : ${totalStars}`;
|
||||
}
|
||||
return `${STATS[key].label}: ${STATS[key].value}`;
|
||||
})
|
||||
.join(", ");
|
||||
|
||||
@@ -47,7 +47,6 @@ const getLongestLang = (arr) =>
|
||||
* @param {number} props.index Index of the programming language.
|
||||
* @returns {string} Programming language SVG node.
|
||||
*/
|
||||
|
||||
const createProgressTextNode = ({ width, color, name, progress, index }) => {
|
||||
const staggerDelay = (index + 3) * 150;
|
||||
const paddingRight = 95;
|
||||
@@ -57,7 +56,7 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => {
|
||||
return `
|
||||
<g class="stagger" style="animation-delay: ${staggerDelay}ms">
|
||||
<text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
|
||||
<text x="${progressTextX}" y="34" class="lang-name">${text || `${progress}%`}</text>
|
||||
<text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
|
||||
${createProgressNode({
|
||||
x: 0,
|
||||
y: 25,
|
||||
@@ -90,7 +89,7 @@ const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => {
|
||||
<g class="stagger" style="animation-delay: ${staggerDelay}ms">
|
||||
<circle cx="5" cy="6" r="5" fill="${color}" />
|
||||
<text data-testid="lang-name" x="15" y="10" class='lang-name'>
|
||||
${lang.name} ${hideProgress ? "" : (lang.text || `${percentage}%`)}
|
||||
${lang.name} ${hideProgress ? "" : percentage + "%"}
|
||||
</text>
|
||||
</g>
|
||||
`;
|
||||
@@ -127,7 +126,7 @@ const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
|
||||
|
||||
const percent = ((longestLang.size / totalSize) * 100).toFixed(2);
|
||||
const minGap = 150;
|
||||
const maxGap = 20 + measureText(`${longestLang.name} ${longestLang.text || `${percent}%`}`, 11);
|
||||
const maxGap = 20 + measureText(`${longestLang.name} ${percent}%`, 11);
|
||||
return flexLayout({
|
||||
items: layouts,
|
||||
gap: maxGap < minGap ? minGap : maxGap,
|
||||
@@ -150,7 +149,6 @@ const renderNormalLayout = (langs, width, totalLanguageSize) => {
|
||||
name: lang.name,
|
||||
color: lang.color || DEFAULT_LANG_COLOR,
|
||||
progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
|
||||
text: lang.text,
|
||||
index,
|
||||
});
|
||||
}),
|
||||
@@ -280,12 +278,6 @@ const useLanguages = (topLangs, hide, langs_count) => {
|
||||
* @returns {string} Language card SVG object.
|
||||
*/
|
||||
const renderTopLanguages = (topLangs, options = {}) => {
|
||||
const locale = options.locale
|
||||
const i18n = new I18n({
|
||||
locale,
|
||||
translations: langCardLocales,
|
||||
});
|
||||
|
||||
const {
|
||||
hide_title = false,
|
||||
hide_border,
|
||||
@@ -298,13 +290,18 @@ const renderTopLanguages = (topLangs, options = {}) => {
|
||||
theme,
|
||||
layout,
|
||||
custom_title,
|
||||
locale,
|
||||
langs_count = DEFAULT_LANGS_COUNT,
|
||||
border_radius,
|
||||
border_color,
|
||||
title = i18n.t("langcard.title"),
|
||||
disable_animations,
|
||||
} = options;
|
||||
|
||||
const i18n = new I18n({
|
||||
locale,
|
||||
translations: langCardLocales,
|
||||
});
|
||||
|
||||
const { langs, totalLanguageSize } = useLanguages(
|
||||
topLangs,
|
||||
hide,
|
||||
@@ -345,7 +342,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
|
||||
|
||||
const card = new Card({
|
||||
customTitle: custom_title,
|
||||
defaultTitle: title,
|
||||
defaultTitle: i18n.t("langcard.title"),
|
||||
width,
|
||||
height,
|
||||
border_radius,
|
||||
|
||||
Reference in New Issue
Block a user