Get dynamically generated GitHub stats on your READMEs!
@@ -78,25 +78,64 @@ Visit and make a small donation to hel
-# Features
-
-- [GitHub Stats Card](#github-stats-card)
-- [GitHub Extra Pins](#github-extra-pins)
-- [Top Languages Card](#top-languages-card)
-- [Wakatime Week Stats](#wakatime-week-stats)
-- [Themes](#themes)
- - [Responsive Card Theme](#responsive-card-theme)
-- [Customization](#customization)
- - [Common Options](#common-options)
- - [Stats Card Exclusive Options](#stats-card-exclusive-options)
- - [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-vercel-instance)
- - [Keep your fork up to date](#keep-your-fork-up-to-date)
+# Features
+
+- [GitHub Stats Card](#github-stats-card)
+ - [Demo](#demo)
+ - [Usage](#usage)
+ - [Common Options](#common-options)
+ - [Stats Card Exclusive Options](#stats-card-exclusive-options)
+ - [Examples](#examples)
+ - [Hiding individual stats](#hiding-individual-stats)
+ - [Adding private contributions count to total commits count](#adding-private-contributions-count-to-total-commits-count)
+ - [Showing icons](#showing-icons)
+- [GitHub Extra Pins](#github-extra-pins)
+ - [Demo](#demo-1)
+ - [Usage](#usage-1)
+ - [Common Options](#common-options-1)
+ - [Repo Card Exclusive Options](#repo-card-exclusive-options)
+- [Top Languages Card](#top-languages-card)
+ - [Demo](#demo-2)
+ - [Compact layout](#compact-layout)
+ - [Usage](#usage-2)
+ - [Common Options](#common-options-2)
+ - [Language Card Exclusive Options](#language-card-exclusive-options)
+ - [Examples](#examples-1)
+ - [Exclude individual repositories](#exclude-individual-repositories)
+ - [Hide individual languages](#hide-individual-languages)
+ - [Show more languages](#show-more-languages)
+ - [Compact Language Card Layout](#compact-language-card-layout)
+- [Wakatime Week Stats](#wakatime-week-stats)
+ - [Demo](#demo-3)
+ - [Compact layout](#compact-layout-1)
+ - [Usage](#usage-3)
+ - [Common Options](#common-options-3)
+ - [Wakatime Card Exclusive Options](#wakatime-card-exclusive-options)
+- [All Demos](#all-demos)
+- [Themes](#themes)
+ - [All inbuilt themes](#all-inbuilt-themes)
+ - [Responsive Card Theme](#responsive-card-theme)
+ - [Use the transparent theme](#use-the-transparent-theme)
+ - [Add transparent alpha channel to a themes bg\_color](#add-transparent-alpha-channel-to-a-themes-bg_color)
+ - [Use GitHub's theme context tag](#use-githubs-theme-context-tag)
+ - [Use GitHub's new media feature](#use-githubs-new-media-feature)
+ - [Quick Tip (Align The Repo Cards)](#quick-tip-align-the-repo-cards)
+- [Deploy on your own Vercel instance](#deploy-on-your-own-vercel-instance)
+ - [Step-by-step Video Tutorial By @codeSTACKr](#step-by-step-video-tutorial-by-codestackr)
+ - [Step-by-step text guide](#step-by-step-text-guide)
+ - [Keep your fork up to date](#keep-your-fork-up-to-date)
+- [:sparkling\_heart: Support the project](#sparkling_heart-support-the-project)
# GitHub Stats Card
+The GitHub stats card shows several interesting stats for a GitHub user.
+
+## Demo
+
+
+
+## Usage
+
Copy-paste this into your markdown content, and that is it. Simple!
Change the `?username=` value to your GitHub username.
@@ -108,7 +147,49 @@ Change the `?username=` value to your GitHub username.
> **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).
-### Hiding individual stats
+You can customize the appearance of your `Stats Card` or `Repo Card` however you wish with URL parameters.
+
+### Common Options
+
+- `title_color` - Card's title color _(hex color)_. Default: `2f80ed`.
+- `text_color` - Body text color _(hex color)_. Default: `434d58`.
+- `icon_color` - Icons color if available _(hex color)_. Default: `4c71f2`.
+- `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`
+ - You can provide multiple comma-separated values in the bg_color option to render a gradient with the following format: `&bg_color=DEG,COLOR1,COLOR2,COLOR3...COLOR10`
+- `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.
+- `cache_seconds` - set the cache header manually _(min: 7200, 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`.
+
+> **Warning**
+> We use caching to decrease the load on our servers (see ). 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.
+
+### Stats Card Exclusive Options
+
+- `hide` - Hides the [specified items](#hiding-individual-stats) from stats _(Comma-separated values)_. Default: `[] (blank array)`.
+- `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`.
+- `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`.
+- `line_height` - Sets the line height between text _(number)_. Default: `25`.
+- `exclude_repo` - Exclude stars from specified repositories _(Comma-separated values)_. Default: `[] (blank array)`.
+- `custom_title` - Sets a custom title for the card. Default: ` GitHub Stats`.
+- `text_bold` - Use bold text _(boolean)_. Default: `true`.
+- `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
+
+> **Note**
+> When hide_rank=`true`, the minimum card width is 270 px + the title length and padding.
+
+### Examples
+
+#### Hiding individual stats
+
+
+:eyes: Show example
You can pass a query parameter `&hide=` to hide any specific stats with comma-separated values.
@@ -118,7 +199,12 @@ You can pass a query parameter `&hide=` to hide any specific stats with comma-se
```
-### Adding private contributions count to total commits count
+
+
+#### Adding private contributions count to total commits count
+
+
+:eyes: Show example
You can add the count of all your private contributions to the total commits count by using the query parameter `&count_private=true`.
@@ -131,7 +217,12 @@ You can add the count of all your private contributions to the total commits cou
```
-### Showing icons
+
+
+#### Showing icons
+
+
+:eyes: Show example
To enable icons, you can pass `show_icons=true` in the query param, like so:
@@ -139,163 +230,74 @@ To enable icons, you can pass `show_icons=true` in the query param, like so:
```
-### Themes
-
-With inbuilt themes, you can customize the look of the card without doing any [manual customization](#customization).
+
-Use `&theme=THEME_NAME` parameter like so :
+* * *
-```md
-
-```
+# GitHub Extra Pins
-#### All inbuilt themes
+GitHub extra pins allow you to pin more than six repositories in your profile using a GitHub readme profile.
-GitHub readme stats comes with several built-in themes (e.g. `dark`, `radical`, `merko`, `gruvbox`, `tokyonight`, `onedark`, `cobalt`, `synthwave`, `highcontrast`, `dracula`).
+Yay! You are no longer limited to 6 pinned repositories.
-
+## Demo
-You can look at a preview for [all available themes](./themes/README.md) or checkout the [theme config file](./themes/index.js) & **you can also contribute new themes** if you like :D
+[](https://github.com/anuraghazra/github-readme-stats)
-#### Responsive Card Theme
+Use [show_owner](#customization) variable to include the repo's owner username
-[](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)
-Since GitHub will re-upload the cards and serve them from their [CDN](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls), we can not infer the browser/GitHub theme on the server side. There are, however, four methods you can use to create dynamics themes on the client side.
+## Usage
-##### Use the transparent theme
+Copy-paste this code into your readme and change the links.
-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:
+Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
```md
-
+[](https://github.com/anuraghazra/github-readme-stats)
```
-
-:eyes: Show example
-
-
+### Common Options
-
+- See [above](#common-options)
-##### Add transparent alpha channel to a themes bg_color
+### Repo Card Exclusive Options
-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`):
+- `show_owner` - Show the repo's owner name _(boolean)_. Default: `false`.
-```md
-
-```
+* * *
-
-:eyes: Show example
+# Top Languages Card
-
+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.\_
-##### Use GitHub's theme context tag
+## Demo
-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:
+[](https://github.com/anuraghazra/github-readme-stats)
-```md
-[](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
-[](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
-```
+### Compact layout
-
-:eyes: Show example
+[](https://github.com/anuraghazra/github-readme-stats)
-[](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
-[](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
+## Usage
-
+Copy-paste this code into your readme and change the links.
-##### Use GitHub's new media feature
+Endpoint: `api/top-langs?username=anuraghazra`
-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 `` element in combination with the `prefers-color-scheme` media feature.
-
-```html
-
-
-
-
-
+```md
+[](https://github.com/anuraghazra/github-readme-stats)
```
-
-:eyes: Show example
-
-
-
-
-
-
-
-
-
-### Customization
-
-You can customize the appearance of your `Stats Card` or `Repo Card` however you wish with URL parameters.
-
-#### Common Options
-
-- `title_color` - Card's title color _(hex color)_. Default: `2f80ed`.
-- `text_color` - Body text color _(hex color)_. Default: `434d58`.
-- `icon_color` - Icons color if available _(hex color)_. Default: `4c71f2`.
-- `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.
-- `cache_seconds` - set the cache header manually _(min: 7200, 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`.
-
-> **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.
-
-##### Gradient in bg_color
-
-You can provide multiple comma-separated values in the bg_color option to render a gradient with the following format:
-
- &bg_color=DEG,COLOR1,COLOR2,COLOR3...COLOR10
-
-#### Stats Card Exclusive Options
-
-- `hide` - Hides the [specified items](#hiding-individual-stats) from stats _(Comma-separated values)_. Default: `[] (blank array)`.
-- `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`.
-- `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`.
-- `line_height` - Sets the line height between text _(number)_. Default: `25`.
-- `exclude_repo` - Exclude stars from specified repositories _(Comma-separated values)_. Default: `[] (blank array)`.
-- `custom_title` - Sets a custom title for the card. Default: ` GitHub Stats`.
-- `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.
-
-> **Note**
-> When hide_rank=`true`, the minimum card width is 270 px + the title length and padding.
+### Common Options
-#### Repo Card Exclusive Options
+- See [above](#common-options)
-- `show_owner` - Show the repo's owner name _(boolean)_. Default: `false`.
-
-#### Language Card Exclusive Options
+### Language Card Exclusive Options
- `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`.
- `hide_title` - _(boolean)_. Default: `false`.
@@ -310,62 +312,12 @@ You can provide multiple comma-separated values in the bg_color option to render
> (i.e: `c++` should become `c%2B%2B`, `jupyter notebook` should become `jupyter%20notebook`, etc.) You can use
> [urlencoder.org](https://www.urlencoder.org/) to help you do this automatically.
-#### Wakatime Card Exclusive Options
+### Examples
-- `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`.
-- `hide_title` - _(boolean)_. Default `false`.
-- `line_height` - Sets the line height between text _(number)_. Default `25`.
-- `hide_progress` - Hides the progress bar and percentage _(boolean)_. Default `false`.
-- `custom_title` - Sets a custom title for the card _(string)_. Default `Wakatime Stats`.
-- `layout` - Switch between two available layouts `default` & `compact`. Default `default`.
-- `langs_count` - Limit the number of languages on the card, defaults to all reported languages _(number)_.
-- `api_domain` - Set a custom API domain for the card, e.g. to use services like [Hakatime](https://github.com/mujx/hakatime) or [Wakapi](https://github.com/muety/wakapi) _(string)_. Default `Waka API`.
-- `range` – Request a range different from your WakaTime default, e.g. `last_7_days`. See [WakaTime API docs](https://wakatime.com/developers#stats) for a list of available options. _(YYYY-MM, last_7_days, last_30_days, last_6_months, last_year, or all_time)_. Default `all_time`.
+#### Exclude individual repositories
-* * *
-
-# GitHub Extra Pins
-
-GitHub extra pins allow you to pin more than six repositories in your profile using a GitHub readme profile.
-
-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)
-```
-
-### Demo
-
-[](https://github.com/anuraghazra/github-readme-stats)
-
-Use [show_owner](#customization) variable to include the repo's owner username
-
-[](https://github.com/anuraghazra/github-readme-stats)
-
-# Top Languages Card
-
-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._
-
-### 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)
-```
-
-### Exclude individual repositories
+
+:eyes: Show example
You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repositories.
@@ -373,7 +325,12 @@ You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repo
[](https://github.com/anuraghazra/github-readme-stats)
```
-### Hide individual languages
+
+
+#### Hide individual languages
+
+
+:eyes: Show example
You can use `&hide=language1,language2` parameter to hide individual languages.
@@ -381,7 +338,12 @@ You can use `&hide=language1,language2` parameter to hide individual languages.
[](https://github.com/anuraghazra/github-readme-stats)
```
-### Show more languages
+
+
+#### Show more languages
+
+
+:eyes: Show example
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.
@@ -389,7 +351,12 @@ You can use the `&langs_count=` option to increase or decrease the number of lan
[](https://github.com/anuraghazra/github-readme-stats)
```
-### Compact Language Card Layout
+
+
+#### Compact Language Card Layout
+
+
+:eyes: Show example
You can use the `&layout=compact` option to change the card design.
@@ -397,15 +364,23 @@ You can use the `&layout=compact` option to change the card design.
[](https://github.com/anuraghazra/github-readme-stats)
```
-### Demo
+
-[](https://github.com/anuraghazra/github-readme-stats)
+* * *
-- Compact layout
+# Wakatime Week Stats
-[](https://github.com/anuraghazra/github-readme-stats)
+## Demo
-# Wakatime Week Stats
+[](https://github.com/anuraghazra/github-readme-stats)
+
+[](https://github.com/anuraghazra/github-readme-stats)
+
+### Compact layout
+
+[](https://github.com/anuraghazra/github-readme-stats)
+
+## Usage
Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
@@ -416,19 +391,25 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
> **Note**:
> Please be aware that we currently only show data from Wakatime profiles that are public.
-### Demo
-
-[](https://github.com/anuraghazra/github-readme-stats)
+### Common Options
-[](https://github.com/anuraghazra/github-readme-stats)
+- See [above](#common-options)
-- Compact layout
+### Wakatime Card Exclusive Options
-[](https://github.com/anuraghazra/github-readme-stats)
+- `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`.
+- `hide_title` - _(boolean)_. Default `false`.
+- `line_height` - Sets the line height between text _(number)_. Default `25`.
+- `hide_progress` - Hides the progress bar and percentage _(boolean)_. Default `false`.
+- `custom_title` - Sets a custom title for the card _(string)_. Default `Wakatime Stats`.
+- `layout` - Switch between two available layouts `default` & `compact`. Default `default`.
+- `langs_count` - Limit the number of languages on the card, defaults to all reported languages _(number)_.
+- `api_domain` - Set a custom API domain for the card, e.g. to use services like [Hakatime](https://github.com/mujx/hakatime) or [Wakapi](https://github.com/muety/wakapi) _(string)_. Default `Waka API`.
+- `range` – Request a range different from your WakaTime default, e.g. `last_7_days`. See [WakaTime API docs](https://wakatime.com/developers#stats) for a list of available options. _(YYYY-MM, last_7_days, last_30_days, last_6_months, last_year, or all_time)_. Default `all_time`.
* * *
-### All Demos
+# All Demos
- Default
@@ -482,6 +463,115 @@ Choose from any of the [default themes](#themes)
* * *
+# Themes
+
+With inbuilt themes, you can customize the look of the card without doing any [manual customization](#customization).
+
+Use `&theme=THEME_NAME` parameter like so :
+
+```md
+
+```
+
+## All inbuilt themes
+
+GitHub readme stats comes with several built-in themes (e.g. `dark`, `radical`, `merko`, `gruvbox`, `tokyonight`, `onedark`, `cobalt`, `synthwave`, `highcontrast`, `dracula`).
+
+
+
+You can look at a preview for [all available themes](./themes/README.md) or checkout the [theme config file](./themes/index.js) & **you can also contribute new themes** if you like :D
+
+## Responsive Card Theme
+
+[](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
+[](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
+
+Since GitHub will re-upload the cards and serve them from their [CDN](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls), we can not infer the browser/GitHub theme on the server side. There are, however, four methods you can use to create dynamics themes on the client side.
+
+### Use the transparent theme
+
+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
+
+```
+
+
+:eyes: Show example
+
+
+
+
+
+### 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 colour with a transparent alpha channel (i.e. `bg_color=00000000`):
+
+```md
+
+```
+
+
+:eyes: Show example
+
+
+
+
+
+### Use GitHub's theme context tag
+
+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)
+```
+
+
+:eyes: Show example
+
+[](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
+[](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
+
+
+
+### 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 `` element in combination with the `prefers-color-scheme` media feature.
+
+```html
+
+
+
+
+
+```
+
+
+:eyes: Show example
+
+
+
+
+
+
+
+
+
+* * *
+
### Quick Tip (Align The Repo Cards)
By default, GitHub does not lay out the cards side by side. To do that, you can use this approach:
@@ -495,9 +585,9 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
```
-## Deploy on your own Vercel instance
+# Deploy on your own Vercel instance
-#### [Check Out Step By Step Video Tutorial By @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)
+### [Step-by-step Video Tutorial By @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)
> **Warning**
> If you are on the [hobby (i.e. free)](https://vercel.com/pricing) Vercel plan, please make sure you change the `maxDuration` parameter in the [vercel.json](https://github.com/anuraghazra/github-readme-stats/blob/master/vercel.json) file from `30` to `10` (see [#1416](https://github.com/anuraghazra/github-readme-stats/issues/1416#issuecomment-950275476) for more information).
@@ -509,8 +599,10 @@ Since the GitHub API only allows 5k requests per hour, my `https://github-readme
[](https://vercel.com/import/project?template=https://github.com/anuraghazra/github-readme-stats)
+### Step-by-step text guide
+
- :hammer_and_wrench: Step-by-step guide on setting up your own Vercel instance
+ :eyes: Show steps
1. Go to [vercel.com](https://vercel.com/).
2. Click on `Log in`.
@@ -536,7 +628,7 @@ Since the GitHub API only allows 5k requests per hour, my `https://github-readme
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.
-## :sparkling_heart: Support the project
+# :sparkling_heart: Support the project
I open-source almost everything I can and try to reply to everyone needing help using these projects. Obviously,
this takes time. You can use this service for free.
diff --git a/tests/e2e/e2e.test.js b/tests/e2e/e2e.test.js
index 48bf16a0e083a..38b707f8239e9 100644
--- a/tests/e2e/e2e.test.js
+++ b/tests/e2e/e2e.test.js
@@ -11,27 +11,22 @@ import { renderStatsCard } from "../../src/cards/stats-card.js";
import { renderTopLanguages } from "../../src/cards/top-languages-card.js";
import { renderWakatimeCard } from "../../src/cards/wakatime-card.js";
-const REPO = "dummy-cra";
-const USER = "grsdummy";
+const REPO = "cra-test";
+const USER = "catelinemnemosyne";
const STATS_DATA = {
- name: "grsdummy",
- totalPRs: 2,
- totalCommits: 2,
+ name: "Cateline Mnemosyne",
+ totalPRs: 1,
+ totalCommits: 7,
totalIssues: 1,
totalStars: 1,
- contributedTo: 2,
+ contributedTo: 1,
rank: {
level: "A+",
- score: 50.900829325065935,
+ score: 50.893750297869225,
},
};
const LANGS_DATA = {
- TypeScript: {
- color: "#3178c6",
- name: "TypeScript",
- size: 2049,
- },
HTML: {
color: "#e34c26",
name: "HTML",
@@ -42,19 +37,19 @@ const LANGS_DATA = {
name: "CSS",
size: 930,
},
- Python: {
+ JavaScript: {
color: "#3572A5",
- name: "Python",
- size: 671,
+ name: "JavaScript",
+ size: 1912,
},
};
const WAKATIME_DATA = {
human_readable_range: "last week",
is_already_updating: false,
- is_coding_activity_visible: false,
+ is_coding_activity_visible: true,
is_including_today: false,
- is_other_usage_visible: false,
+ is_other_usage_visible: true,
is_stuck: false,
is_up_to_date: false,
is_up_to_date_pending_future: false,
@@ -62,24 +57,24 @@ const WAKATIME_DATA = {
range: "last_7_days",
status: "pending_update",
timeout: 15,
- username: "grsdummy",
+ username: USER,
writes_only: false,
};
const REPOSITORY_DATA = {
- name: "dummy-cra",
- nameWithOwner: "grsdummy/dummy-cra",
+ name: "cra-test",
+ nameWithOwner: `${USER}/cra-test`,
isPrivate: false,
isArchived: false,
isTemplate: false,
stargazers: {
totalCount: 1,
},
- description: "Dummy create react app.",
+ description: "Simple cra test repo.",
primaryLanguage: {
- color: "#3178c6",
- id: "MDg6TGFuZ3VhZ2UyODc=",
- name: "TypeScript",
+ color: "#f1e05a",
+ id: "MDg6TGFuZ3VhZ2UxNDA=",
+ name: "JavaScript",
},
forkCount: 0,
starCount: 1,
- 
+## Demo
-You can look at a preview for [all available themes](./themes/README.md) or checkout the [theme config file](./themes/index.js) & **you can also contribute new themes** if you like :D
+[](https://github.com/anuraghazra/github-readme-stats)
-#### Responsive Card Theme
+Use [show_owner](#customization) variable to include the repo's owner username
-[](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)
-Since GitHub will re-upload the cards and serve them from their [CDN](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls), we can not infer the browser/GitHub theme on the server side. There are, however, four methods you can use to create dynamics themes on the client side.
+## Usage
-##### Use the transparent theme
+Copy-paste this code into your readme and change the links.
-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:
+Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
```md
-
+[](https://github.com/anuraghazra/github-readme-stats)
```
-