diff --git a/apps/frontend/src/content/docs/docs/cards/gist-pin.md b/apps/frontend/src/content/docs/docs/cards/gist-pin.md index 842f113919678..cb0277fbaa89c 100644 --- a/apps/frontend/src/content/docs/docs/cards/gist-pin.md +++ b/apps/frontend/src/content/docs/docs/cards/gist-pin.md @@ -25,8 +25,10 @@ You can customize the appearance and behavior of the gist card using the [common ## Demo -![Gist Card](/api/gist?id=bbfce31e0217a3689c8d961a356cb10d) +Gist Card +Gist Card Use [show\_owner](#options) query option to include the gist's owner username -![Gist Card](/api/gist?id=bbfce31e0217a3689c8d961a356cb10d&show_owner=true) +Gist Card +Gist Card diff --git a/apps/frontend/src/content/docs/docs/cards/repo-pin.md b/apps/frontend/src/content/docs/docs/cards/repo-pin.md index af09a9240cbef..c307642a7eed6 100644 --- a/apps/frontend/src/content/docs/docs/cards/repo-pin.md +++ b/apps/frontend/src/content/docs/docs/cards/repo-pin.md @@ -34,16 +34,20 @@ You can customize the appearance and behavior of the pinned repository card usin ## Demo -![Readme Card](/api/pin?username=anuraghazra&repo=github-readme-stats) +Readme Card +Readme Card Use [show\_owner](#options) query option to include the repo's owner username: -![Readme Card](/api/pin?username=anuraghazra&repo=github-readme-stats&show_owner=true) +Readme Card +Readme Card Use [show](#options) query option to display the user's contributions to the repository: -![Readme Card](/api/pin?username=anuraghazra&repo=github-readme-stats&show=prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented) +Readme Card +Readme Card You can also specify the `repo` parameter in the form `/` to pin a repository from any user or organization, not just your own. This allows you to showcase repositories you contributed to, regardless of ownership. -![Readme Card](/api/pin?username=anuraghazra&repo=statykjs/statyk&show_owner=true&show=prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented) +Readme Card +Readme Card diff --git a/apps/frontend/src/content/docs/docs/cards/stats.md b/apps/frontend/src/content/docs/docs/cards/stats.md index ee171084f0107..33b4290d06fa5 100644 --- a/apps/frontend/src/content/docs/docs/cards/stats.md +++ b/apps/frontend/src/content/docs/docs/cards/stats.md @@ -26,12 +26,17 @@ You can pass a query parameter `&hide=` to hide any specific stats with comma-se You can pass a query parameter `&show=` to show any specific additional stats with comma-separated values. -> Options: `&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage,prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented` +> Options: `&show=contributions,reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage,prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented` ```md -![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage,prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented) +![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show=contributions,reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage,prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented) ``` +:::note +`contributions` counts contributions across all years; +the `contribs` item under `&hide=` counts repositories contributed to. +::: + ## Showing icons To enable icons, you can pass `&show_icons=true` in the query param, like so: @@ -60,28 +65,30 @@ You can specify a year and fetch only the commits that were made in that year by You can customize the appearance and behavior of the stats card using the [common options](/frontend/docs/customization/common-options/) and the exclusive options listed in the table below. -| Name | Description | Type | Default value | -| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------------------------------- | -| `hide` | Hides the [specified items](#hiding-individual-stats) from stats. | string (comma-separated values) | `null` | -| `hide_title` | Hides the title of your stats card. | boolean | `false` | -| `card_width` | Sets the card's width manually. | number | `500px (approx.)` | -| `hide_rank` | Hides the rank and automatically resizes the card width. | boolean | `false` | -| `rank_icon` | Shows alternative rank icon (i.e. `github`, `percentile` or `default`). | enum | `default` | -| `show_icons` | Shows icons near all stats. | boolean | `false` | -| `include_all_commits` | Count total commits instead of just the current year commits. | boolean | `false` | -| `line_height` | Sets the line height between text. | integer | `25` | -| `exclude_repo` | Excludes specified repositories. Affects only the count for "Total Stars Earned". | string (comma-separated values) | `null` | -| `repo` | Count only stats from the specified repositories. Affects only [certain items](#filtering-by-repository-and-owner). | string (comma-separated values) | `null` | -| `owner` | Count only stats from the specified organizations or users. Affects only [certain items](#filtering-by-repository-and-owner). | string (comma-separated values) | `null` | -| `role` | Include repositories where the user has one of the specified [roles](https://docs.github.com/en/graphql/reference/repos#enum-repositoryaffiliation) (OWNER, ORGANIZATION_MEMBER, COLLABORATOR). | string (comma-separated values) | `OWNER` | -| `custom_title` | Sets a custom title for the card. | string | ` GitHub Stats` | -| `text_bold` | Uses bold text. | boolean | `true` | -| `disable_animations` | Disables all animations in the card. | boolean | `false` | -| `ring_color` | Color of the rank circle. | string (hex color) | `2f80ed` | -| `number_format` | Switches between two available formats for displaying the card values: `short` (i.e. `6.6k`) and `long` (i.e. `6626`). | enum | `short` | -| `number_precision` | Enforce the number of digits after the decimal point for `short` number format. Must be an integer between 0 and 2. Will be ignored for `long` number format. | integer (0, 1 or 2) | `null` | -| `show` | Shows [additional items](#showing-additional-individual-stats) on stats card (i.e. `reviews`, `discussions_started`, `discussions_answered`, `prs_merged` or `prs_merged_percentage`. And the following, which support the `repo` and `owner` filters: `prs_authored`, `prs_commented`, `prs_reviewed`, `issues_authored` or `issues_commented`). | string (comma-separated values) | `null` | -| `commits_year` | Filters and counts only commits made in the specified year. | integer _(YYYY)_ | ` (one year to date)` | +| Name | Description | Type | Default value | +| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------------------------------- | +| `hide` | Hides the [specified items](#hiding-individual-stats) from stats. | string (comma-separated values) | `null` | +| `hide_title` | Hides the title of your stats card. | boolean | `false` | +| `card_width` | Sets the card's width manually. | number | `500px (approx.)` | +| `hide_rank` | Hides the rank and automatically resizes the card width. | boolean | `false` | +| `rank_icon` | Shows alternative rank icon (i.e. `github`, `percentile` or `default`). | enum | `default` | +| `show_icons` | Shows icons near all stats. | boolean | `false` | +| `include_all_commits` | Count total commits instead of just the current year commits. | boolean | `false` | +| `line_height` | Sets the line height between text. | integer | `25` | +| `exclude_repo` | Excludes specified repositories. Affects only the count for "Total Stars Earned". | string (comma-separated values) | `null` | +| `repo` | Count only stats from the specified repositories. Affects only [certain items](#filtering-by-repository-and-owner). | string (comma-separated values) | `null` | +| `owner` | Count only stats from the specified organizations or users. Affects only [certain items](#filtering-by-repository-and-owner). | string (comma-separated values) | `null` | +| `role` | Include repositories where the user has one of the specified [roles](https://docs.github.com/en/graphql/reference/repos#enum-repositoryaffiliation) (OWNER, ORGANIZATION_MEMBER, COLLABORATOR). | string (comma-separated values) | `OWNER` | +| `custom_title` | Sets a custom title for the card. | string | ` GitHub Stats` | +| `text_bold` | Uses bold text. | boolean | `true` | +| `disable_animations` | Disables all animations in the card. | boolean | `false` | +| `ring_color`1 | Color of the rank circle. | string (hex color) | `2f80ed` | +| `number_format` | Switches between two available formats for displaying the card values: `short` (i.e. `6.6k`) and `long` (i.e. `6626`). | enum | `short` | +| `number_precision` | Enforce the number of digits after the decimal point for `short` number format. Must be an integer between 0 and 2. Will be ignored for `long` number format. | integer (0, 1 or 2) | `null` | +| `show` | Shows [additional items](#showing-additional-individual-stats) on the stats card (i.e. `contributions`, `reviews`, `discussions_started`, `discussions_answered`, `prs_merged` or `prs_merged_percentage`. And the following, which support the `repo` and `owner` filters: `prs_authored`, `prs_commented`, `prs_reviewed`, `issues_authored` or `issues_commented`). | string (comma-separated values) | `null` | +| `commits_year` | Filters and counts only commits made in the specified year. | integer _(YYYY)_ | ` (one year to date)` | + +1: Supports light and dark mode via `ring_color_light` and `ring_color_dark`. :::caution[Warning] Custom title should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding) (i.e: `Anurag's GitHub Stats` should become `Anurag%27s%20GitHub%20Stats`). You can use [urlencoder.org](https://www.urlencoder.org/) to help you do this automatically. diff --git a/apps/frontend/src/content/docs/docs/cards/top-languages.md b/apps/frontend/src/content/docs/docs/cards/top-languages.md index 878b2a6de5e6b..e98898fdcb764 100644 --- a/apps/frontend/src/content/docs/docs/cards/top-languages.md +++ b/apps/frontend/src/content/docs/docs/cards/top-languages.md @@ -30,23 +30,25 @@ Endpoint: `api/top-langs?username=anuraghazra` You can customize the appearance and behavior of the top languages card using the [common options](/frontend/docs/customization/common-options/) and exclusive options listed in the table below. -| Name | Description | Type | Default value | -| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | --------------------------------------------------- | -| `hide` | Hides the [specified languages](#hide-individual-languages) from card. | string (comma-separated values) | `null` | -| `hide_title` | Hides the title of your card. | boolean | `false` | -| `layout` | Switches between five available layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`. | enum | `normal` | -| `card_width` | Sets the card's width manually. | number | `300` | -| `langs_count` | Shows more languages on the card, between 1-20. | integer | `5` for `normal` and `donut`, `6` for other layouts | -| `exclude_repo` | Excludes specified repositories. | string (comma-separated values) | `null` | -| `role` | Include repositories where the user has one of the specified [roles](https://docs.github.com/en/graphql/reference/repos#enum-repositoryaffiliation) (OWNER, ORGANIZATION_MEMBER, COLLABORATOR). | string (comma-separated values) | `OWNER` | -| `custom_title` | Sets a custom title for the card. | string | `Most Used Languages` | -| `disable_animations` | Disables all animations in the card. | boolean | `false` | -| `prog_bar_bg_color` | Background color of the bars. (Applies only to `normal` layout.) | string (hex color) | `#ddd` | -| `hide_progress` | Uses the compact layout option, hides percentages, and removes the bars. | boolean | `false` | -| `hide_values` | Hides language percentages or bytes while keeping the progress bars or chart. | boolean | `false` | -| `size_weight` | Configures language stats algorithm (see [Language stats algorithm](#language-stats-algorithm)). | integer | `1` | -| `count_weight` | Configures language stats algorithm (see [Language stats algorithm](#language-stats-algorithm)). | integer | `0` | -| `stats_format` | Switches between two available formats for language's stats `percentages` and `bytes`. | enum | `percentages` | +| Name | Description | Type | Default value | +| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | --------------------------------------------------- | +| `hide` | Hides the [specified languages](#hide-individual-languages) from card. | string (comma-separated values) | `null` | +| `hide_title` | Hides the title of your card. | boolean | `false` | +| `layout` | Switches between five available layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`. | enum | `normal` | +| `card_width` | Sets the card's width manually. | number | `300` | +| `langs_count` | Shows more languages on the card, between 1-20. | integer | `5` for `normal` and `donut`, `6` for other layouts | +| `exclude_repo` | Excludes specified repositories. | string (comma-separated values) | `null` | +| `role` | Include repositories where the user has one of the specified [roles](https://docs.github.com/en/graphql/reference/repos#enum-repositoryaffiliation) (OWNER, ORGANIZATION_MEMBER, COLLABORATOR). | string (comma-separated values) | `OWNER` | +| `custom_title` | Sets a custom title for the card. | string | `Most Used Languages` | +| `disable_animations` | Disables all animations in the card. | boolean | `false` | +| `prog_bar_bg_color`1 | Background color of the bars. (Applies only to `normal` layout.) | string (hex color) | `#ddd` | +| `hide_progress` | Uses the compact layout option, hides percentages, and removes the bars. | boolean | `false` | +| `hide_values` | Hides language percentages or bytes while keeping the progress bars or chart. | boolean | `false` | +| `size_weight` | Configures language stats algorithm (see [Language stats algorithm](#language-stats-algorithm)). | integer | `1` | +| `count_weight` | Configures language stats algorithm (see [Language stats algorithm](#language-stats-algorithm)). | integer | `0` | +| `stats_format` | Switches between two available formats for language's stats `percentages` and `bytes`. | enum | `percentages` | + +1: Supports light and dark mode via `prog_bar_bg_color_light` and `prog_bar_bg_color_dark`. :::caution[Warning] Language names and custom title 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`, `Most Used Languages` should become `Most%20Used%20Languages`, etc.) You can use [urlencoder.org](https://www.urlencoder.org/) to help you do this automatically. @@ -151,28 +153,45 @@ You can use the `&stats_format=bytes` option to display the stats in bytes inste ## Demo -![Top Langs](/api/top-langs?username=anuraghazra) +Top Langs +Top Langs ### Compact layout -![Top Langs](/api/top-langs?username=anuraghazra&layout=compact) +Top Langs +Top Langs ### Donut Chart layout -[![Top Langs](/api/top-langs?username=anuraghazra&layout=donut)](/api/top-langs?username=anuraghazra&layout=donut) + + Top Langs + Top Langs + ### Donut Vertical Chart layout -[![Top Langs](/api/top-langs?username=anuraghazra&layout=donut-vertical)](/api/top-langs?username=anuraghazra&layout=donut-vertical) + + Top Langs + Top Langs + ### Pie Chart layout -[![Top Langs](/api/top-langs?username=anuraghazra&layout=pie)](/api/top-langs?username=anuraghazra&layout=pie) + + Top Langs + Top Langs + ### Hidden progress bars -[![Top Langs](/api/top-langs?username=anuraghazra&hide_progress=true)](/api/top-langs?username=anuraghazra&hide_progress=true) + + Top Langs + Top Langs + ### Display bytes instead of percentage -[![Top Langs](/api/top-langs?username=anuraghazra&stats_format=bytes)](/api/top-langs?username=anuraghazra&stats_format=bytes) + + Top Langs + Top Langs + diff --git a/apps/frontend/src/content/docs/docs/cards/wakatime.md b/apps/frontend/src/content/docs/docs/cards/wakatime.md index 6757ca156ddec..ca44b3b6bc0b1 100644 --- a/apps/frontend/src/content/docs/docs/cards/wakatime.md +++ b/apps/frontend/src/content/docs/docs/cards/wakatime.md @@ -42,10 +42,13 @@ Custom title should be URI-escaped, as specified in [Percent Encoding](https://e ## Demo -![Alan's WakaTime stats](/api/wakatime?username=alan) +Alan's WakaTime stats +Alan's WakaTime stats -![Alan's WakaTime stats](/api/wakatime?username=alan&card_width=315&hide_progress=true) +Alan's WakaTime stats +Alan's WakaTime stats ### Compact layout -![Alan's WakaTime stats](/api/wakatime?username=alan&layout=compact) +Alan's WakaTime stats +Alan's WakaTime stats diff --git a/apps/frontend/src/content/docs/docs/customization/aligning-cards.md b/apps/frontend/src/content/docs/docs/customization/aligning-cards.md index 11ac84bade595..f581e0867f8b7 100644 --- a/apps/frontend/src/content/docs/docs/customization/aligning-cards.md +++ b/apps/frontend/src/content/docs/docs/customization/aligning-cards.md @@ -9,18 +9,22 @@ By default, GitHub does not lay out the cards side by side. To do that, you can ```html - + + + + - + + + + ``` @@ -29,10 +33,12 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
- Anurag's GitHub stats + Anurag's GitHub stats + Anurag's GitHub stats - Top languages + Top languages + Top languages
@@ -40,18 +46,31 @@ By default, GitHub does not lay out the cards side by side. To do that, you can ## Pinning repositories + ```html - + + + + - + + + + ``` @@ -60,10 +79,12 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
- Readme Card + Readme Card + Readme Card - Readme Card + Readme Card + Readme Card
diff --git a/apps/frontend/src/content/docs/docs/customization/common-options.md b/apps/frontend/src/content/docs/docs/customization/common-options.md index f1b535437630d..b912daa33b4a2 100644 --- a/apps/frontend/src/content/docs/docs/customization/common-options.md +++ b/apps/frontend/src/content/docs/docs/customization/common-options.md @@ -4,18 +4,20 @@ title: Common Options Every card accepts the options below, on top of the exclusive options listed on its own page. -| Name | Description | Type | Default value | -| --------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- | -| `title_color` | Card's title color. | string (hex color) | `2f80ed` | -| `text_color` | Body text color. | string (hex color) | `434d58` | -| `icon_color` | Icons color if available. | string (hex color) | `4c71f2` | -| `border_color` | Card's border color. Does not apply when `hide_border` is enabled. | string (hex color) | `e4e2e2` | -| `bg_color` | Card's background color. | string (hex color or a gradient in the form of _angle,start,end_) | `fffefe` | -| `hide_border` | Hides the card's border. | boolean | `false` | -| `theme` | Name of the theme, choose from [all available themes](/frontend/docs/customization/themes/). | enum | `default` | -| `cache_seconds` | Sets the cache header manually (min: 21600, max: 86400). | integer | `21600` | -| `locale` | Sets the language in the card, you can check full list of available locales [here](/frontend/docs/customization/locales/). | enum | `en` | -| `border_radius` | Corner rounding on the card. | number | `4.5` | +| Name | Description | Type | Default value | +| -------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- | +| `title_color`1 | Card's title color. | string (hex color) | `2f80ed` | +| `text_color`1 | Body text color. | string (hex color) | `434d58` | +| `icon_color`1 | Icons color if available. | string (hex color) | `4c71f2` | +| `border_color`1 | Card's border color. Does not apply when `hide_border` is enabled. | string (hex color) | `e4e2e2` | +| `bg_color`1 | Card's background color. | string (hex color or a gradient in the form of _angle,start,end_) | `fffefe` | +| `hide_border` | Hides the card's border. | boolean | `false` | +| `theme`1 | Name of the theme, choose from [all available themes](/frontend/docs/customization/themes/). | enum | `default` | +| `cache_seconds` | Sets the cache header manually (min: 21600, max: 86400). | integer | `21600` | +| `locale` | Sets the language in the card, you can check full list of available locales [here](/frontend/docs/customization/locales/). | enum | `en` | +| `border_radius` | Corner rounding on the card. | number | `4.5` | + +1: Supports light and dark mode via `*_light` / `*_dark` variants (e.g. `title_color_light`). See [Light & Dark Mode Parameters](/frontend/docs/customization/theming/#light--dark-mode-parameters) for details. :::caution[Warning] We use caching to decrease the load on our servers (see [this discussion](https://github.com/anuraghazra/github-readme-stats/issues/1471#issuecomment-1271551425)). Cards generated by [https://github-stats-extended.vercel.app/](https://github-stats-extended.vercel.app/frontend) are usually cached for a few days. If you need your card data to update more frequently, you can [deploy your own instance](/frontend/docs/deploy/) and set the [`CACHE_SECONDS`](/frontend/docs/deploy/#available-environment-variables) environment variable to your preferred value. Alternatively, you can use the [GitHub Actions workflow](/frontend/docs/deploy/#github-action) to update your cards on a schedule. diff --git a/apps/frontend/src/content/docs/docs/customization/theming.md b/apps/frontend/src/content/docs/docs/customization/theming.md index 31044477442a0..1dfd63d0e197c 100644 --- a/apps/frontend/src/content/docs/docs/customization/theming.md +++ b/apps/frontend/src/content/docs/docs/customization/theming.md @@ -4,7 +4,7 @@ title: Theming With inbuilt themes, you can customize the look of the card without doing any [manual customization](/frontend/docs/customization/common-options/). -Use `&theme=THEME_NAME` parameter like so : +Pass `&theme=THEME_NAME`: ```md ![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical) @@ -12,51 +12,96 @@ Use `&theme=THEME_NAME` parameter like so : ## All inbuilt themes -GitHub Stats Extended comes with several built-in themes (e.g. `dark`, `radical`, `merko`, `gruvbox`, `tokyonight`, `onedark`, `cobalt`, `synthwave`, `highcontrast`, `dracula`). +GitHub Stats Extended comes with several built-in themes (e.g. `radical`, `merko`, `gruvbox`, `tokyonight`, `onedark`, `cobalt`, `synthwave`, `highcontrast`, `dracula`). GitHub Stats Extended Themes -You can look at a preview for [all available themes](/frontend/docs/customization/themes/) or checkout the [theme config file](https://github.com/stats-organization/github-stats-extended/blob/master/packages/core/src/themes/index.ts). Please note that we paused the addition of new themes to decrease maintenance efforts; all pull requests related to new themes will be closed. +:::tip +Use `light_github` and `dark_github` to match GitHub's own light and dark themes. For repository and gist cards use `light_github_repocard` and `dark_github_repocard`, which differ only in icon color. +::: -## Responsive Card Theme +Preview [all available themes](/frontend/docs/customization/themes/) or read the [theme config file](https://github.com/stats-organization/github-stats-extended/blob/master/packages/core/src/themes/index.ts). We have paused the addition of new themes to reduce maintenance effort; pull requests adding one will be closed. -Anurag's GitHub stats -Anurag's GitHub stats +## Light and Dark Mode -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. +Anurag's GitHub stats +Anurag's GitHub stats -### Use GitHub's new media feature (recommended) +There are several ways to switch a card between modes on the client side. -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. +### Use GitHub's media feature (recommended) + +[GitHub's media feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) picks the image from a `` element using the `prefers-color-scheme` media query. ```html - + ``` -For example the image at the top of the Responsive Card Theme section works like this - it follows the theme you set for this page. +### Set light and dark mode in one card -### Use GitHub's theme context tag +`theme_light` / `theme_dark` and the `*_light` / `*_dark` color parameters put both modes in a single card URL, which then follows the viewer's browser or OS setting. See [Light & Dark Mode Parameters](#light--dark-mode-parameters) for the details. + +This approach is not GitHub-specific, so it also works outside GitHub — including GitHub sponsorship pages, where the other approaches don't work. + +:::note +GitHub serves the card from its [CDN](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls), so a GitHub theme that differs from the browser/OS setting cannot be detected by this approach. +::: + +```md +![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github) +``` + +
+👀 Show example + +![Anurag's GitHub stats](/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github) + +
-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: +### Light & Dark Mode Parameters + +These parameters style each mode separately. + +**Priority (lowest → highest):** + +- default theme +- `theme` +- `theme_light` / `theme_dark` +- general color parameters +- `*_light` / `*_dark` color parameters + +For example: ```md -[![Anurag's GitHub stats-Dark](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark#gh-dark-mode-only)](https://github.com/stats-organization/github-stats-extended#gh-dark-mode-only) -[![Anurag's GitHub stats-Light](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=default#gh-light-mode-only)](https://github.com/stats-organization/github-stats-extended#gh-light-mode-only) +![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github) ``` -For example the image at the top of the Responsive Card Theme section works like this - it follows the theme you set for this page. +Parameter types can be mixed — for example a light and a dark theme, plus one fixed title color: + +```md +![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github&title_color=aabbcc) +``` + +### Use GitHub's theme context tag + +Appending [`#gh-dark-mode-only` or `#gh-light-mode-only`](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) to an image URL shows it only to viewers on that GitHub mode: + +```md +[![Anurag's GitHub stats-Dark](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark_github#gh-dark-mode-only)](https://github.com/stats-organization/github-stats-extended#gh-dark-mode-only) +[![Anurag's GitHub stats-Light](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=light_github#gh-light-mode-only)](https://github.com/stats-organization/github-stats-extended#gh-light-mode-only) +``` ### 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: +The `transparent` theme has no background, so it sits well on GitHub's light and dark modes: ```md ![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent) @@ -71,7 +116,7 @@ We have included a `transparent` theme that has a transparent background. This t ### Add transparent alpha channel to a themes bg\_color -You can use the `bg_color` parameter to make any of [the available themes](/frontend/docs/customization/themes/) transparent. This is done by setting the `bg_color` to a color with a transparent alpha channel (i.e. `bg_color=00000000`): +Any of [the available themes](/frontend/docs/customization/themes/) turns transparent when `bg_color` carries an alpha channel (i.e. `bg_color=00000000`): ```md ![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000) diff --git a/apps/frontend/src/content/docs/docs/demos.md b/apps/frontend/src/content/docs/docs/demos.md index 268796ae5b17f..5993626fcdbe3 100644 --- a/apps/frontend/src/content/docs/docs/demos.md +++ b/apps/frontend/src/content/docs/docs/demos.md @@ -4,43 +4,53 @@ title: Demo Gallery ## Default -![Anurag's GitHub stats](/api?username=anuraghazra) +Anurag's GitHub stats +Anurag's GitHub stats ## Hiding specific stats -![Anurag's GitHub stats](/api?username=anuraghazra&hide=contribs,issues) +Anurag's GitHub stats +Anurag's GitHub stats ## Showing additional stats -![Anurag's GitHub stats](/api?username=anuraghazra&show_icons=true&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage,prs_commented,prs_reviewed,issues_commented) +Anurag's GitHub stats +Anurag's GitHub stats ## Showing stats for a specific repository -![Anurag's GitHub stats for anuraghazra/github-readme-stats](/api?username=anuraghazra&repo=anuraghazra/github-readme-stats&hide=prs,issues,stars,commits,contribs&show=prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented&hide_rank=true&custom_title=Anurag%27s%20Stats%20for%20github-readme-stats&card_width=370) +Anurag's GitHub stats for anuraghazra/github-readme-stats +Anurag's GitHub stats for anuraghazra/github-readme-stats ## Showing stats for a specific organization -![Anurag's GitHub stats for razorpay](/api?username=anuraghazra&owner=razorpay&hide=prs,issues,stars,commits,contribs&show=prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented&hide_rank=true&custom_title=Anurag%27s%20Stats%20for%20razorpay&card_width=370) +Anurag's GitHub stats for razorpay +Anurag's GitHub stats for razorpay ## Showing icons -![Anurag's GitHub stats](/api?username=anuraghazra&hide=issues&show_icons=true) +Anurag's GitHub stats +Anurag's GitHub stats ## Shows GitHub logo instead rank level -![Anurag's GitHub stats](/api?username=anuraghazra&rank_icon=github) +Anurag's GitHub stats +Anurag's GitHub stats ## Shows user rank percentile instead of rank level -![Anurag's GitHub stats](/api?username=anuraghazra&rank_icon=percentile) +Anurag's GitHub stats +Anurag's GitHub stats ## Customize Border Color -![Anurag's GitHub stats](/api?username=anuraghazra&border_color=2e4058) +Anurag's GitHub stats +Anurag's GitHub stats ## Include All Commits -![Anurag's GitHub stats](/api?username=anuraghazra&include_all_commits=true) +Anurag's GitHub stats +Anurag's GitHub stats ## Themes @@ -58,7 +68,8 @@ Choose from any of the [default themes](/frontend/docs/customization/themes/) ## Setting card locale -![Anurag's GitHub stats](/api?username=anuraghazra&locale=es) +Anurag's GitHub stats +Anurag's GitHub stats ## Customizing repo card @@ -66,7 +77,8 @@ Choose from any of the [default themes](/frontend/docs/customization/themes/) ## Gist card -![Gist Card](/api/gist?id=bbfce31e0217a3689c8d961a356cb10d) +Gist Card +Gist Card ## Customizing gist card @@ -74,8 +86,10 @@ Choose from any of the [default themes](/frontend/docs/customization/themes/) ## Top languages -![Top Langs](/api/top-langs?username=anuraghazra) +Top Langs +Top Langs ## WakaTime card -![Alan's WakaTime stats](/api/wakatime?username=alan) +Alan's WakaTime stats +Alan's WakaTime stats diff --git a/apps/frontend/src/content/docs/docs/fork.md b/apps/frontend/src/content/docs/docs/fork.md index d1e57e1cd0f95..2468d91b5676a 100644 --- a/apps/frontend/src/content/docs/docs/fork.md +++ b/apps/frontend/src/content/docs/docs/fork.md @@ -32,11 +32,34 @@ GitHub-Stats-Extended proactively precomputes and caches cards. This solves the GitHub-Stats-Extended fetches up to 1000 of your starred repositories to accurately compute your stars count. In github-readme-stats, this is limited to 100 repos because github-readme-stats doesn't have the above-mentioned performance improvements. +### Light and dark mode in a single card URL + +GitHub-Stats-Extended adds parameters `theme_light`, `theme_dark` and the `*_light` / `*_dark` color variants (e.g. `title_color_light`), to specify both modes in one card URL. The card then follows the viewer's browser or OS setting. + +```md +![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&theme_light=light_github&theme_dark=dark_github) +``` + +It works everywhere, including GitHub sponsorship pages, where the other light/dark approaches do not. See [Set light and dark mode in one card](/frontend/docs/customization/theming/#set-light-and-dark-mode-in-one-card) for the details. + +### GitHub-themed light and dark themes + +GitHub-Stats-Extended adds `light_github` and `dark_github` [themes](/frontend/docs/customization/themes/) that exactly match GitHub's own UI colors. For repo and gist cards use `light_github_repocard` and `dark_github_repocard`, which differ only in icon color. + +### New Contributions stat + +GitHub-Stats-Extended adds an optional stat showing the number of [contributions](https://docs.github.com/en/account-and-profile/reference/profile-contributions-reference#what-counts-as-a-contribution) (commits, pull requests, issues, etc.) across all years of a user's history. Enable it with `&show=contributions`. Whether private contributions are counted depends on [your profile visibility settings](https://docs.github.com/en/account-and-profile/how-tos/contribution-settings/manage-visibility-settings-for-private-contributions-and-achievements#changing-the-visibility-of-your-private-contributions). + +:::note +The pre-existing "Contributed to" stat counts repositories a user has contributed to, not contributions. +::: + ### Customization of top languages card -GitHub-Stats-Extended allows you to display your top languages without any numbers via the `hide_values` parameter. And the `prog_bar_bg_color` parameter allows you to customize the background color of the progress bars, e.g. by setting it to white: +GitHub-Stats-Extended can show your top languages without any numbers via the `hide_values` parameter. And the new `prog_bar_bg_color` parameter sets the background color of progress bars, e.g. to transparent: -![anuraghazra's top languages without numbers](/api/top-langs?username=anuraghazra&langs_count=4&hide_values=true&prog_bar_bg_color=fff) +anuraghazra's top languages without numbers +anuraghazra's top languages without numbers ### Private contributions support @@ -54,7 +77,8 @@ See [here](/frontend/docs/cards/stats/#filtering-by-repository-and-owner) for fu anuraghazra's contributions to github-readme-stats: -![anuraghazra's contributions to github-readme-stats](/api/pin?username=anuraghazra&repo=github-readme-stats&show=prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented) +anuraghazra's contributions to github-readme-stats +anuraghazra's contributions to github-readme-stats Add `&show=prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented` to your repo card url to display your contributions to the pinned repository. @@ -62,7 +86,8 @@ Add `&show=prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commen anurag's contributions to razorpay: -![anurag's contributions to razorpay](/api?username=anuraghazra&owner=razorpay&hide=prs,issues,stars,commits,contribs&show=prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented&hide_rank=true&custom_title=anurag%27s%20contributions%20to%20razorpay&card_width=333) +anurag's contributions to razorpay +anurag's contributions to razorpay Add `&repo=userA/repoA,orgB/repoB` or `&owner=userC,orgD` to your profile stats url to filter your contributions by repo or organization. (The screenshot above uses further customization options.)