update frontend docs #515
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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`<sup>1</sup> | 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` | | ||
|
|
||
| <sup>1</sup>: 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 | ||
|
|
||
| <img class="card-preview-light" src="/api/top-langs?username=anuraghazra&theme=light_github" alt="Top Langs" /> | ||
| <img class="card-preview-dark" src="/api/top-langs?username=anuraghazra&theme=dark_github" alt="Top Langs" /> | ||
|
|
||
| ### Compact layout | ||
|
|
||
| <img class="card-preview-light" src="/api/top-langs?username=anuraghazra&layout=compact&theme=light_github" alt="Top Langs" /> | ||
| <img class="card-preview-dark" src="/api/top-langs?username=anuraghazra&layout=compact&theme=dark_github" alt="Top Langs" /> | ||
|
|
||
| ### Donut Chart layout | ||
|
|
||
| <a href="/api/top-langs?username=anuraghazra&layout=donut"> | ||
| <img class="card-preview-light" src="/api/top-langs?username=anuraghazra&layout=donut&theme=light_github" alt="Top Langs" /> | ||
| <img class="card-preview-dark" src="/api/top-langs?username=anuraghazra&layout=donut&theme=dark_github" alt="Top Langs" /> | ||
| </a> | ||
|
Comment on lines
+166
to
+169
There was a problem hiding this comment. The demo images above don’t have a link, while this one and the ones that follow do.
Member
Author
There was a problem hiding this comment. I think linking the images is somewhat helpful: It allows users to open the images and then inspect in the browser's address bar how it is configured. Without this, users have to: a) assume that we embed live images instead of fixed prerendered images and b) know how to view the url of an embedded image in their browser. And yes, I guess it makes sense to include the card's theme in the linked url. I see your new PR aims to make the linking consistent. So I won't make any changes to the linking here. And we can continue the discussion in #522. |
||
|
|
||
| ### Donut Vertical Chart layout | ||
|
|
||
| <a href="/api/top-langs?username=anuraghazra&layout=donut-vertical"> | ||
| <img class="card-preview-light" src="/api/top-langs?username=anuraghazra&layout=donut-vertical&theme=light_github" alt="Top Langs" /> | ||
| <img class="card-preview-dark" src="/api/top-langs?username=anuraghazra&layout=donut-vertical&theme=dark_github" alt="Top Langs" /> | ||
| </a> | ||
|
|
||
| ### Pie Chart layout | ||
|
|
||
| <a href="/api/top-langs?username=anuraghazra&layout=pie"> | ||
| <img class="card-preview-light" src="/api/top-langs?username=anuraghazra&layout=pie&theme=light_github" alt="Top Langs" /> | ||
| <img class="card-preview-dark" src="/api/top-langs?username=anuraghazra&layout=pie&theme=dark_github" alt="Top Langs" /> | ||
| </a> | ||
|
|
||
| ### Hidden progress bars | ||
|
|
||
| <a href="/api/top-langs?username=anuraghazra&hide_progress=true"> | ||
| <img class="card-preview-light" src="/api/top-langs?username=anuraghazra&hide_progress=true&theme=light_github" alt="Top Langs" /> | ||
| <img class="card-preview-dark" src="/api/top-langs?username=anuraghazra&hide_progress=true&theme=dark_github" alt="Top Langs" /> | ||
| </a> | ||
|
|
||
| ### Display bytes instead of percentage | ||
|
|
||
| <a href="/api/top-langs?username=anuraghazra&stats_format=bytes"> | ||
| <img class="card-preview-light" src="/api/top-langs?username=anuraghazra&stats_format=bytes&theme=light_github" alt="Top Langs" /> | ||
| <img class="card-preview-dark" src="/api/top-langs?username=anuraghazra&stats_format=bytes&theme=dark_github" alt="Top Langs" /> | ||
| </a> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#507 brought back
docs/*.Will the old documentation be removed in this PR, or will that be done in a separate one?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removing the old documentation is intended to happen via #488.