From 3d4f1708cdc4e6fb019440f63bc4e72492110ea8 Mon Sep 17 00:00:00 2001 From: mezzode Date: Sat, 29 Oct 2022 14:40:58 -0700 Subject: [PATCH 1/8] Reorganize language card section --- readme.md | 61 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 33 insertions(+), 28 deletions(-) diff --git a/readme.md b/readme.md index e18efc80f73b9..e4a67824e5d43 100644 --- a/readme.md +++ b/readme.md @@ -93,7 +93,7 @@ Visit and make a small donation to hel - [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) + - [Keep your fork up to date](#keep-your-fork-up-to-date) # GitHub Stats Card @@ -214,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 `` element in combination with the `prefers-color-scheme` media feature. - + ```html - @@ -233,7 +233,7 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1 :eyes: Show example - @@ -258,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: 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`. @@ -294,21 +294,6 @@ You can provide multiple comma-separated values in the bg_color option to render - `show_owner` - Show the repo's owner name _(boolean)_. Default: `false`. -#### Language Card Exclusive Options - -- `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`. -- `hide_title` - _(boolean)_. Default: `false`. -- `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`. - -> **Warning** -> Language names should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding) -> (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 - `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`. @@ -354,7 +339,15 @@ 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 +## Demo + +[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats) + +### Compact layout + +[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats) + +## Usage Copy-paste this code into your readme and change the links. @@ -364,6 +357,24 @@ 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 Card Exclusive Options + +- `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`. +- `hide_title` - _(boolean)_. Default: `false`. +- `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`. + +> **Warning** +> Language names should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding) +> (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. + +
+

Examples

 + ### Exclude individual repositories You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repositories. @@ -396,13 +407,7 @@ 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) ``` -### Demo - -[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats) - -- Compact layout - -[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats) +
# Wakatime Week Stats From b839ab190236f875799f97f2079786963aeb2d1a Mon Sep 17 00:00:00 2001 From: mezzode Date: Sat, 29 Oct 2022 14:49:59 -0700 Subject: [PATCH 2/8] Reorganize wakatime --- readme.md | 42 ++++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/readme.md b/readme.md index e4a67824e5d43..adb17a058b6bd 100644 --- a/readme.md +++ b/readme.md @@ -294,18 +294,6 @@ You can provide multiple comma-separated values in the bg_color option to render - `show_owner` - Show the repo's owner name _(boolean)_. Default: `false`. -#### Wakatime Card Exclusive Options - -- `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`. - * * * # GitHub Extra Pins @@ -411,6 +399,18 @@ You can use the `&layout=compact` option to change the card design. # Wakatime Week Stats +## Demo + +[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](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 + +[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&layout=compact)](https://github.com/anuraghazra/github-readme-stats) + +## Usage + Change the `?username=` value to your [Wakatime](https://wakatime.com) username. ```md @@ -420,15 +420,17 @@ 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 - -[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod)](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) +### Wakatime Card Exclusive Options -- Compact layout - -[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&layout=compact)](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`. * * * From d08e6fbcafb98f3e194d3c72eb337cbd0c11462e Mon Sep 17 00:00:00 2001 From: mezzode Date: Sat, 29 Oct 2022 15:07:06 -0700 Subject: [PATCH 3/8] Reorganize stats card --- readme.md | 110 +++++++++++++++++++++++++++--------------------------- 1 file changed, 56 insertions(+), 54 deletions(-) diff --git a/readme.md b/readme.md index adb17a058b6bd..8806e0b2b8f89 100644 --- a/readme.md +++ b/readme.md @@ -97,6 +97,10 @@ Visit and make a small donation to hel # GitHub Stats Card +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra) + +## Usage + Copy-paste this into your markdown content, and that is it. Simple! Change the `?username=` value to your GitHub username. @@ -108,6 +112,46 @@ 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). +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 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. + +### 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 You can pass a query parameter `&hide=` to hide any specific stats with comma-separated values. @@ -246,53 +290,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. - -#### 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`. - -> **Note** -> When hide_rank=`true`, the minimum card width is 270 px + the title length and padding. - -#### Repo Card Exclusive Options - -- `show_owner` - Show the repo's owner name _(boolean)_. Default: `false`. + * * * @@ -302,7 +300,15 @@ GitHub extra pins allow you to pin more than six repositories in your profile us Yay! You are no longer limited to 6 pinned repositories. -### Usage +## Demo + +[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats) + +Use [show_owner](#customization) variable to include the repo's owner username + +[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_owner=true)](https://github.com/anuraghazra/github-readme-stats) + +## Usage Copy-paste this code into your readme and change the links. @@ -312,13 +318,9 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats` [![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats) ``` -### Demo +### Repo Card Exclusive Options -[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats) - -Use [show_owner](#customization) variable to include the repo's owner username - -[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_owner=true)](https://github.com/anuraghazra/github-readme-stats) +- `show_owner` - Show the repo's owner name _(boolean)_. Default: `false`. # Top Languages Card From 3bac5e86554fb57725dddd23756f52f25059bd0f Mon Sep 17 00:00:00 2001 From: mezzode Date: Sat, 29 Oct 2022 15:53:43 -0700 Subject: [PATCH 4/8] Update table of contents --- readme.md | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/readme.md b/readme.md index 8806e0b2b8f89..42f93c0b3a616 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@

GitHub Readme Stats -

GitHub Readme Stats

+

GitHub Readme Stats

Get dynamically generated GitHub stats on your READMEs!

@@ -84,14 +84,6 @@ Visit and make a small donation to hel - [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) @@ -436,7 +428,7 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username. * * * -### All Demos +# All Demos - Default @@ -503,7 +495,7 @@ 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) @@ -544,7 +536,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. From c8cbefadfea9325835cd00a3f3ef6dc5a0a1588f Mon Sep 17 00:00:00 2001 From: mezzode Date: Sat, 29 Oct 2022 15:56:30 -0700 Subject: [PATCH 5/8] Add common options subsections --- readme.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/readme.md b/readme.md index 42f93c0b3a616..8604770e09ef8 100644 --- a/readme.md +++ b/readme.md @@ -310,6 +310,9 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats` [![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats) ``` +### Common Options +- See [above](#common-options) + ### Repo Card Exclusive Options - `show_owner` - Show the repo's owner name _(boolean)_. Default: `false`. @@ -339,6 +342,9 @@ 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) ``` +### Common Options +- See [above](#common-options) + ### Language Card Exclusive Options - `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`. @@ -414,6 +420,9 @@ 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. +### Common Options +- See [above](#common-options) + ### Wakatime Card Exclusive Options - `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`. From 49b8840881be4dc8595d65f23f933ca18878f1ac Mon Sep 17 00:00:00 2001 From: Rick Staa Date: Mon, 21 Nov 2022 12:36:37 +0100 Subject: [PATCH 6/8] docs: clean up changes --- readme.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index 8604770e09ef8..7c364903effc6 100644 --- a/readme.md +++ b/readme.md @@ -142,9 +142,9 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you > When hide_rank=`true`, the minimum card width is 270 px + the title length and padding.

-

Examples

 +

:eyes: Show examples

 -### Hiding individual stats +#### Hiding individual stats You can pass a query parameter `&hide=` to hide any specific stats with comma-separated values. @@ -154,7 +154,7 @@ You can pass a query parameter `&hide=` to hide any specific stats with comma-se ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,prs) ``` -### Adding private contributions count to total commits count +#### Adding private contributions count to total commits count You can add the count of all your private contributions to the total commits count by using the query parameter `&count_private=true`. @@ -167,13 +167,14 @@ You can add the count of all your private contributions to the total commits cou ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&count_private=true) ``` -### Showing icons +#### Showing icons 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) ``` +
### Themes @@ -282,8 +283,6 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1 - - * * * # GitHub Extra Pins From 0a27356623d5669fc58f3574eae4bcd0f644a1d9 Mon Sep 17 00:00:00 2001 From: rickstaa Date: Tue, 22 Nov 2022 10:24:50 +0100 Subject: [PATCH 7/8] docs: clean up code and update TOC --- readme.md | 338 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 211 insertions(+), 127 deletions(-) diff --git a/readme.md b/readme.md index 7c364903effc6..5035870625c4e 100644 --- a/readme.md +++ b/readme.md @@ -78,17 +78,60 @@ 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) -- [Deploy Yourself](#deploy-on-your-own-vercel-instance) +# 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 + ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra) ## Usage @@ -113,7 +156,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you - `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` + - 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)`. @@ -121,7 +164,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 ). 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 @@ -141,11 +184,13 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you > **Note** > When hide_rank=`true`, the minimum card width is 270 px + the title length and padding. -
-

:eyes: Show examples

 +### Examples #### Hiding individual stats +
+:eyes: Show example + You can pass a query parameter `&hide=` to hide any specific stats with comma-separated values. > Options: `&hide=stars,commits,prs,issues,contribs` @@ -154,8 +199,13 @@ You can pass a query parameter `&hide=` to hide any specific stats with comma-se ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,prs) ``` +
+ #### 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`. > **Note** @@ -167,120 +217,19 @@ You can add the count of all your private contributions to the total commits cou ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&count_private=true) ``` -#### Showing icons - -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) -```
-### 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 -![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical) -``` - -#### All inbuilt themes - -GitHub readme stats comes with several built-in themes (e.g. `dark`, `radical`, `merko`, `gruvbox`, `tokyonight`, `onedark`, `cobalt`, `synthwave`, `highcontrast`, `dracula`). - -GitHub Readme Stats Themes - -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 - -[![Anurag's GitHub stats-Dark](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only) -[![Anurag's GitHub stats-Light](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=default#gh-light-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 -![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent) -``` - -
-:eyes: Show example - -![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent) - -
- -##### 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 -![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000) -``` +#### Showing icons
:eyes: Show example -![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000) - -
- -##### 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: +To enable icons, you can pass `show_icons=true` in the query param, like so: ```md -[![Anurag's GitHub stats-Dark](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only) -[![Anurag's GitHub stats-Light](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=default#gh-light-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only) -``` - -
-:eyes: Show example - -[![Anurag's GitHub stats-Dark](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only) -[![Anurag's GitHub stats-Light](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=default#gh-light-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 - - - - - +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true) ``` -
-:eyes: Show example - - - - - - -
* * * @@ -310,18 +259,21 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats` ``` ### Common Options -- See [above](#common-options) + +- See [above](#common-options) ### Repo Card Exclusive Options - `show_owner` - Show the repo's owner name _(boolean)_. Default: `false`. +* * * + # 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._ +> 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.\_ ## Demo @@ -342,7 +294,8 @@ Endpoint: `api/top-langs?username=anuraghazra` ``` ### Common Options -- See [above](#common-options) + +- See [above](#common-options) ### Language Card Exclusive Options @@ -359,10 +312,12 @@ Endpoint: `api/top-langs?username=anuraghazra` > (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. -
-

Examples

 +### Examples -### Exclude individual repositories +#### Exclude individual repositories + +
+:eyes: Show example You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repositories. @@ -370,7 +325,12 @@ You can use the `&exclude_repo=repo1,repo2` parameter to exclude individual repo [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&exclude_repo=github-readme-stats,anuraghazra.github.io)](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. @@ -378,7 +338,12 @@ You can use `&hide=language1,language2` parameter to hide individual languages. [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide=javascript,html)](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. @@ -386,7 +351,12 @@ You can use the `&langs_count=` option to increase or decrease the number of lan [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&langs_count=8)](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. @@ -396,6 +366,8 @@ You can use the `&layout=compact` option to change the card design.
+* * * + # Wakatime Week Stats ## Demo @@ -420,7 +392,8 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username. > Please be aware that we currently only show data from Wakatime profiles that are public. ### Common Options -- See [above](#common-options) + +- See [above](#common-options) ### Wakatime Card Exclusive Options @@ -490,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 +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical) +``` + +## All inbuilt themes + +GitHub readme stats comes with several built-in themes (e.g. `dark`, `radical`, `merko`, `gruvbox`, `tokyonight`, `onedark`, `cobalt`, `synthwave`, `highcontrast`, `dracula`). + +GitHub Readme Stats Themes + +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 + +[![Anurag's GitHub stats-Dark](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only) +[![Anurag's GitHub stats-Light](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=default#gh-light-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 +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent) +``` + +
+:eyes: Show example + +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent) + +
+ +### 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 +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000) +``` + +
+:eyes: Show example + +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000) + +
+ +### 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 +[![Anurag's GitHub stats-Dark](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only) +[![Anurag's GitHub stats-Light](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=default#gh-light-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only) +``` + +
+:eyes: Show example + +[![Anurag's GitHub stats-Dark](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only) +[![Anurag's GitHub stats-Light](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=default#gh-light-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: @@ -505,7 +587,7 @@ By default, GitHub does not lay out the cards side by side. To do that, you can # 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). @@ -517,8 +599,10 @@ Since the GitHub API only allows 5k requests per hour, my `https://github-readme [![Deploy to Vercel](https://vercel.com/button)](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`. From 7d612e7503127ab3b6dd79dc909a11e8c8f25214 Mon Sep 17 00:00:00 2001 From: rickstaa Date: Sat, 21 Jan 2023 11:30:50 +0100 Subject: [PATCH 8/8] test: fix e2e tests --- tests/e2e/e2e.test.js | 43 +++++++++++++++++++------------------------ 1 file changed, 19 insertions(+), 24 deletions(-) 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,