Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(readme): improve query options appereance using tables #183

Merged
merged 1 commit into from
Dec 3, 2023
Merged

docs(readme): improve query options appereance using tables #183

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 114 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,23 +72,116 @@ You can look at a preview for [all available themes](./themes). You can also con
You can customize the appearance of all your cards however you wish with URL parameters.

#### 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`.
- `bg_color` - Card's background color (_hex color_) or a gradient in the form of _angle,start,end_. Default: `fffefe`.
- `stroke_color` - Profile image border color (_hex color_). Default: `e4e2e2` or `border_color` query.
- `username_color` - Username text color (_hex color_). Deafult: `434d58` or `text_color` query.
- `theme` - Name of the theme, choose from [all available themes](./themes). Default: `default` theme.
- `locale` - Sets the language in the card, you can check full list of available locales [here](#available-locales). Default: `en`.
- `border_width` - Sets the border's width manually (_number_). Default: `1`.
- `border_radius` - Corner rounding on the card. Default: `4.5`.
- `format` - Output format card option (`svg`, `png`, and `json`). Default: `svg`.
- `disabled_animations` - Disables all animations in the card (_boolean_). Default: `false`.
- `hide` - Hides the [specified items](#hiding-individual-stats) from stats (_Comma-separated values_). Default: `[] (blank array)`.
- `show` - Shows [additional items](#showing-additional-individual-stats) on stats card (_Comma-separated values_). Default: `[] (blank array)`.
- `hide_border` - Hides the card's border (_boolean_). Default: `false`.
- `hide_stroke` - Hides the image's profile stroke in the card (_boolean_). Default: `false`.
<table>
<tr>
<td><p align="center"><b>Name</b></p></td>
<td><p align="center"><b>Description</b></p></td>
<td><p align="center"><b>Type</b></p></td>
<td><p align="center"><b>Default value</b></p></td>
</tr>
<tr>
<td><p align="left"><code>title_color</code></p></td>
<td><p align="left">Card's title color.</p></td>
<td><p align="left">string (hex color)</p></td>
<td><p align="left"><code>2f80ed</code></p></td>
</tr>
<tr>
<td><p align="left"><code>text_color</code></p></td>
<td><p align="left">Body text color.</p></td>
<td><p align="left">string (hex color)</p></td>
<td><p align="left"><code>434d58</code></p></td>
</tr>
<tr>
<td><p align="left"><code>icon_color</code></p></td>
<td><p align="left">Icons color.</p></td>
<td><p align="left">string (hex color)</p></td>
<td><p align="left"><code>4c71f2</code></p></td>
</tr>
<tr>
<td><p align="left"><code>border_color</code></p></td>
<td><p align="left">Card's border color. Does not apply when <code>hide_border</code> is enabled.</p></td>
<td><p align="left">string (hex color)</p></td>
<td><p align="left"><code>e4e2e2</code></p></td>
</tr>
<tr>
<td><p align="left"><code>bg_color</code></p></td>
<td><p align="left">Card's background color.</p></td>
<td><p align="left">string (hex color or a gradient in the form of <i>angle,start,end</i>)</p></td>
<td><p align="left"><code>fffefe</code></p></td>
</tr>
<tr>
<td><p align="left"><code>stroke_color</code></p></td>
<td><p align="left">Profile image border color. Does not apply when <code>hide_stroke</code> is enabled.</p></td>
<td><p align="left">string (hex color)</p></td>
<td><p align="left"><code>e4e2e2</code> or <code>border_color</code> query</p></td>
</tr>
<tr>
<td><p align="left"><code>username_color</code></p></td>
<td><p align="left">Username text color.</p></td>
<td><p align="left">string (hex color)</p></td>
<td><p align="left"><code>434d58</code> or <code>text_color</code> query</p></td>
</tr>
<tr>
<td><p align="left"><code>theme</code></p></td>
<td><p align="left">Name of the theme, choose from <a href="/themes">all available themes</a>.</p></td>
<td><p align="left">enum</p></td>
<td><p align="left"><code>default</code></p></td>
</tr>
<tr>
<td><p align="left"><code>locale</code></p></td>
<td><p align="left">Sets the language in the card, you can check full list of available locales <a href="/docs/translations.md">here</a>.</p></td>
<td><p align="left">enum</p></td>
<td><p align="left"><code>en</code></p></td>
</tr>
<tr>
<td><p align="left"><code>border_width</code></p></td>
<td><p align="left">Sets the border's width manually.</p></td>
<td><p align="left">number</p></td>
<td><p align="left"><code>1</code></p></td>
</tr>
<tr>
<td><p align="left"><code>border_radius</code></p></td>
<td><p align="left">Corner rounding on the card.</p></td>
<td><p align="left">number</td>
<td><p align="left"><code>4.5</code></p></td>
</tr>
<tr>
<td><p align="left"><code>hide</code></p></td>
<td><p align="left">Hides the <a href="#hiding-individual-stats">specified items</a> from stats.</p></td>
<td><p align="left">string (comma-separated values)</td>
<td><p align="left"><code>null</code></p></td>
</tr>
<tr>
<td><p align="left"><code>show</code></p></td>
<td><p align="left">Shows <a href="#showing-additional-individual-stats">additional items</a> on stats card.</p></td>
<td><p align="left">string (comma-separated values)</td>
<td><p align="left"><code>null</code></p></td>
</tr>
<tr>
<td><p align="left"><code>format</code></p></td>
<td><p align="left">Output format card option (i.e. <code>svg</code>, <code>png</code>, or <code>json</code>).</p></td>
<td><p align="left">enum</td>
<td><p align="left"><code>svg</code></p></td>
</tr>
<tr>
<td><p align="left"><code>disabled_animations</code></p></td>
<td><p align="left">Disables all animations in the card.</p></td>
<td><p align="left">boolean</td>
<td><p align="left"><code>false</code></p></td>
</tr>
<tr>
<td><p align="left"><code>hide_border</code></p></td>
<td><p align="left">Hides the card's border.</p></td>
<td><p align="left">boolean</td>
<td><p align="left"><code>false</code></p></td>
</tr>
<tr>
<td><p align="left"><code>hide_stroke</code></p></td>
<td><p align="left">Hides the image's profile stroke in the card.</p></td>
<td><p align="left">boolean</td>
<td><p align="left"><code>false</code></p></td>
</tr>
</table>

#### 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:
Expand Down Expand Up @@ -246,10 +339,10 @@ This repository contains forked from [tuhinpal/readme-stats-github](https://gith
## 💰 Donate
Love the project? Please consider donating to help it improve!
<div align="left">
<a href="https://github.com/sponsors/FajarKim/"><img src="https://img.shields.io/badge/GitHub-Sponsor-blue?labelColor=302d41&color=f5bde6&logo=github&logoColor=d9e0ee&style=for-the-badge" alt="GitHub Sponsor"></a>
<a href="https://paypal.me/agusbirawan/"><img src="https://img.shields.io/badge/PayPal-Donate-blue?labelColor=302d41&color=f4dbd6&logo=paypal&logoColor=d9e0ee&style=for-the-badge" alt="PayPal Donate"></a>
<a href="https://buymeacoffee.com/fajarkim/"><img src="https://img.shields.io/badge/Buy%20Me%20A%20Coffee-Donate-blue?labelColor=302d41&color=eed49f&logo=buymeacoffee&logoColor=d9e0ee&style=for-the-badge" alt="Buy Me a Coffee"></a>
<a href="https://trakteer.id/FajarKim/"><img src="https://custom-icon-badges.demolab.com/badge/Trakteer-Donate-blue?labelColor=302d41&color=ed8796&logo=trakteerid&logoColor=d9e0ee&style=for-the-badge" alt="Trakteer.id Donate"></a>
<a href="https://github.com/sponsors/FajarKim/"><img src="https://img.shields.io/badge/GitHub-Sponsor-blue?labelColor=302d41&color=f5bde6&logo=github&logoColor=d9e0ee&style=for-the-badge" alt="GitHub Sponsor"></a>
<a href="https://paypal.me/agusbirawan/"><img src="https://img.shields.io/badge/PayPal-Donate-blue?labelColor=302d41&color=f4dbd6&logo=paypal&logoColor=d9e0ee&style=for-the-badge" alt="PayPal Donate"></a>
<a href="https://buymeacoffee.com/fajarkim/"><img src="https://img.shields.io/badge/Buy%20Me%20A%20Coffee-Donate-blue?labelColor=302d41&color=eed49f&logo=buymeacoffee&logoColor=d9e0ee&style=for-the-badge" alt="Buy Me a Coffee"></a>
<a href="https://trakteer.id/FajarKim/"><img src="https://custom-icon-badges.demolab.com/badge/Trakteer-Donate-blue?labelColor=302d41&color=ed8796&logo=trakteerid&logoColor=d9e0ee&style=for-the-badge" alt="Trakteer.id Donate"></a>
</div>

Are you considering supporting the project by donating to me? Please DO NOT!!
Expand Down