drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-24 11:06:36 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(badges): colors and border (#774)

Browse Source 
* feat(badges): add more colors and allow to disable the border

* feat(badges): more colors

* chore: generate

* docs: add Others inside the sidebar

* chore: i18n

---------

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>
This commit is contained in:
Ludovic Fernandez
2025-08-23 15:42:23 +02:00
committed by GitHub
parent 7b8e1bdfd1
commit 22c1a4f9df
11 changed files with 336 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/compiled/main.css
View File

File diff suppressed because one or more lines are too long

31
exampleSite/content/docs/guide/shortcodes/cards.md
View File

@@ -37,14 +37,14 @@ linkTitle: Cards
## Card Parameters ## Card Parameters
| Parameter | Description | | Parameter | Description |
|------------|-----------------------------------------------------------------| |------------|---------------------------------------------------------------------------------------|
| `link` | URL (internal or external). | | `link` | URL (internal or external). |
| `title` | Title heading for the card. | | `title` | Title heading for the card. |
| `subtitle` | Subtitle heading (supports Markdown). | | `subtitle` | Subtitle heading (supports Markdown). |
| `icon` | Name of the icon. | | `icon` | Name of the icon. See [icons]({{% relRef "icon" %}}) for more information. |
| `tag` | Text in tag. | | `tag` | Text in tag. |
| `tagType` | Type of the tag: default (gray), `info`, `warning` and `error`. | | `tagColor` | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
## Image Card ## Image Card
@@ -74,18 +74,19 @@ Card supports adding tags which could be useful to show extra status information
{{< cards >}} {{< cards >}}
{{< card link="../callout" title="Card with default tag" tag="tag text" >}} {{< card link="../callout" title="Card with default tag" tag="tag text" >}}
{{< card link="../callout" title="Card with error tag" tag="tag text" tagType="error" >}} {{< card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" >}}
{{< card link="../callout" title="Card with info tag" tag="tag text" tagType="info" >}} {{< card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" >}}
{{< card link="../callout" title="Card with warning tag" tag="tag text" tagType="warning" >}} {{< card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" >}}
{{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" tag="tag text" tagType="error" >}} {{< card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" >}}
{{< /cards >}} {{< /cards >}}
``` ```
{{</* cards */>}} {{</* cards */>}}
{{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}} {{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
{{</* card link="../callout" title="Card with default red tag" tag="tag text" tagType="error" */>}} {{</* card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" */>}}
{{</* card link="../callout" title="Card with blue tag" tag="tag text" tagType="info" */>}} {{</* card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" */>}}
{{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}} {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" */>}}
{{</* card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```

95
exampleSite/content/docs/guide/shortcodes/others.fa.md
View File

@@ -1,8 +1,6 @@
--- ---
title: سایر شورتکدها title: سایر شورتکدها
linkTitle: سایر linkTitle: سایر
sidebar:
exclude: true
next: /docs/guide/deploy-site next: /docs/guide/deploy-site
--- ---
@@ -11,49 +9,90 @@ next: /docs/guide/deploy-site
این شورتکدها کمتر پایدار در نظر گرفته می‌شوند و ممکن است هر زمان تغییر کنند. این شورتکدها کمتر پایدار در نظر گرفته می‌شوند و ممکن است هر زمان تغییر کنند.
{{< /callout >}} {{< /callout >}}
## نشان ### أمثلة
{{< badge "default" >}}&nbsp;
{{< badge content="border" border=false >}}&nbsp;
{{< badge content="color" color="green" >}}&nbsp;
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}&nbsp;
{{< badge content="icon" icon="sparkles" >}}&nbsp;
### الاستخدام
#### تقصير
{{< badge "Badge" >}}&nbsp;
``` ```
{{</* badge "نشان" */>}} {{</* badge "Badge" */>}}
``` ```
نتیجه: #### الألوان
{{< badge "نشان" >}} {{< badge content="Badge" >}}&nbsp;
{{< badge content="Badge" color="purple" >}}&nbsp;
انواع مختلف: {{< badge content="Badge" color="indigo" >}}&nbsp;
{{< badge content="Badge" color="blue" >}} &nbsp;
{{< badge content="Badge" color="green" >}} &nbsp;
{{< badge content="Badge" color="yellow" >}} &nbsp;
{{< badge content="Badge" color="amber" >}} &nbsp;
{{< badge content="Badge" color="orange" >}} &nbsp;
{{< badge content="Badge" color="red" >}}&nbsp;
``` ```
{{</* badge content="اطلاعات" type="info" */>}} {{</* badge content="Badge" */>}}
{{</* badge content="هشدار" type="warning" */>}} {{</* badge content="Badge" color="purple" */>}}
{{</* badge content="خطا" type="error" */>}} {{</* badge content="Badge" color="indigo" */>}}
{{</* badge content="Badge" color="blue" */>}}
{{</* badge content="Badge" color="green" */>}}
{{</* badge content="Badge" color="yellow" */>}}
{{</* badge content="Badge" color="amber" */>}}
{{</* badge content="Badge" color="orange" */>}}
{{</* badge content="Badge" color="red" */>}}
``` ```
نتیجه: {{< badge content="Badge" border=false >}} &nbsp;
{{< badge content="Badge" color="purple" border=false >}} &nbsp;
{{< badge content="اطلاعات" type="info" >}} &nbsp; {{< badge content="Badge" color="indigo" border=false >}} &nbsp;
{{< badge content="هشدار" type="warning" >}} &nbsp; {{< badge content="Badge" color="blue" border=false >}} &nbsp;
{{< badge content="خطا" type="error" >}} {{< badge content="Badge" color="green" border=false >}} &nbsp;
{{< badge content="Badge" color="yellow" border=false >}} &nbsp;
با لینک و آیکون: {{< badge content="Badge" color="amber" border=false >}} &nbsp;
{{< badge content="Badge" color="orange" border=false >}}&nbsp;
{{< badge content="Badge" color="red" border=false >}}&nbsp;
``` ```
{{</* badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" */>}} {{</* badge content="Badge" border=false */>}}
{{</* badge content="Badge" color="purple" border=false */>}}
{{</* badge content="Badge" color="indigo" border=false */>}}
{{</* badge content="Badge" color="blue" border=false */>}}
{{</* badge content="Badge" color="green" border=false */>}}
{{</* badge content="Badge" color="yellow" border=false */>}}
{{</* badge content="Badge" color="amber" border=false */>}}
{{</* badge content="Badge" color="orange" border=false */>}}
{{</* badge content="Badge" color="red" border=false */>}}
``` ```
نتیجه: #### المتغيرات
{{< badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" >}} {{< badge content="Badge" icon="sparkles" >}}&nbsp;
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}&nbsp;
```
{{</* badge content="Badge" icon="sparkles" */>}}
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
```
### خيارات ### خيارات
| المعلمة | وصف | | المعلمة | وصف |
|-----------|---------------------------------------------------| |-----------|-----------------------------------------------------------------------------------------------------------|
| `content` | نص الشارة. | | `content` | نص الشارة. |
| `link` | رابط الشارة. | | `link` | رابط الشارة. |
| `icon` | رمز الشارة. | | `icon` | رمز الشارة. |
| `type` | نوع الشارة. (افتراضي، `info`، `warning`، `error`) | | `color` | `gray` (تقصير), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`.<br/> لون الشارة. |
| `class` | فئة الشارة. | | `class` | فئة الشارة. |
| `border` | إضافة أو إزالة الحدود (افتراضي: true |
## یوتیوب ## یوتیوب

95
exampleSite/content/docs/guide/shortcodes/others.ja.md
View File

@@ -1,8 +1,6 @@
--- ---
title: その他のショートコード title: その他のショートコード
linkTitle: その他 linkTitle: その他
sidebar:
exclude: true
next: /docs/guide/deploy-site next: /docs/guide/deploy-site
--- ---
@@ -11,49 +9,90 @@ next: /docs/guide/deploy-site
これらのショートコードは安定性が低く、いつでも変更される可能性があります。 これらのショートコードは安定性が低く、いつでも変更される可能性があります。
{{< /callout >}} {{< /callout >}}
## バッジ ### 例
{{< badge "default" >}}&nbsp;
{{< badge content="border" border=false >}}&nbsp;
{{< badge content="color" color="green" >}}&nbsp;
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}&nbsp;
{{< badge content="icon" icon="sparkles" >}}&nbsp;
### 使用法
#### デフォルト
{{< badge "Badge" >}}&nbsp;
``` ```
{{</* badge "Badge" */>}} {{</* badge "Badge" */>}}
``` ```
結果: #### 色
{{< badge "Badge" >}} {{< badge content="Badge" >}}&nbsp;
{{< badge content="Badge" color="purple" >}}&nbsp;
バリエーション: {{< badge content="Badge" color="indigo" >}}&nbsp;
{{< badge content="Badge" color="blue" >}} &nbsp;
{{< badge content="Badge" color="green" >}} &nbsp;
{{< badge content="Badge" color="yellow" >}} &nbsp;
{{< badge content="Badge" color="amber" >}} &nbsp;
{{< badge content="Badge" color="orange" >}} &nbsp;
{{< badge content="Badge" color="red" >}}&nbsp;
``` ```
{{</* badge content="info" type="info" */>}} {{</* badge content="Badge" */>}}
{{</* badge content="warning" type="warning" */>}} {{</* badge content="Badge" color="purple" */>}}
{{</* badge content="error" type="error" */>}} {{</* badge content="Badge" color="indigo" */>}}
{{</* badge content="Badge" color="blue" */>}}
{{</* badge content="Badge" color="green" */>}}
{{</* badge content="Badge" color="yellow" */>}}
{{</* badge content="Badge" color="amber" */>}}
{{</* badge content="Badge" color="orange" */>}}
{{</* badge content="Badge" color="red" */>}}
``` ```
結果: {{< badge content="Badge" border=false >}} &nbsp;
{{< badge content="Badge" color="purple" border=false >}} &nbsp;
{{< badge content="info" type="info" >}} &nbsp; {{< badge content="Badge" color="indigo" border=false >}} &nbsp;
{{< badge content="warning" type="warning" >}} &nbsp; {{< badge content="Badge" color="blue" border=false >}} &nbsp;
{{< badge content="error" type="error" >}} {{< badge content="Badge" color="green" border=false >}} &nbsp;
{{< badge content="Badge" color="yellow" border=false >}} &nbsp;
リンクとアイコン付き: {{< badge content="Badge" color="amber" border=false >}} &nbsp;
{{< badge content="Badge" color="orange" border=false >}}&nbsp;
{{< badge content="Badge" color="red" border=false >}}&nbsp;
``` ```
{{</* badge content="Badge" border=false */>}}
{{</* badge content="Badge" color="purple" border=false */>}}
{{</* badge content="Badge" color="indigo" border=false */>}}
{{</* badge content="Badge" color="blue" border=false */>}}
{{</* badge content="Badge" color="green" border=false */>}}
{{</* badge content="Badge" color="yellow" border=false */>}}
{{</* badge content="Badge" color="amber" border=false */>}}
{{</* badge content="Badge" color="orange" border=false */>}}
{{</* badge content="Badge" color="red" border=false */>}}
```
#### 変種
{{< badge content="Badge" icon="sparkles" >}}&nbsp;
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}&nbsp;
```
{{</* badge content="Badge" icon="sparkles" */>}}
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}} {{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
``` ```
結果:
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
### オプション ### オプション
| パラメータ | 説明 | | パラメータ | 説明 |
|-----------|-----------------------------------------| |-----------|--------------------------------------------------------------------------------------------------------------------------|
| `content` | バッジのテキスト。 | | `content` | バッジのテキスト。 |
| `link` | バッジのリンク。 | | `link` | バッジのリンク。 |
| `icon` | バッジのアイコン。 | | `icon` | バッジのアイコン。 |
| `type` | バッジの種類。(デフォルト、`info`、`warning`、`error`) | | `color` | The color of the badge. <br/> `gray` (default), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`. |
| `class` | バッジのクラス。 | | `class` | バッジのクラス。 |
| `border` | 境界線を追加または削除します (デフォルト: true)。 |
## YouTube ## YouTube

95
exampleSite/content/docs/guide/shortcodes/others.md
View File

@@ -1,8 +1,6 @@
--- ---
title: Other Shortcodes title: Other Shortcodes
linkTitle: Others linkTitle: Others
sidebar:
exclude: true
next: /docs/guide/deploy-site next: /docs/guide/deploy-site
--- ---
@@ -13,47 +11,90 @@ next: /docs/guide/deploy-site
## Badge ## Badge
### Examples
{{< badge "default" >}}&nbsp;
{{< badge content="border" border=false >}}&nbsp;
{{< badge content="color" color="green" >}}&nbsp;
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}&nbsp;
{{< badge content="icon" icon="sparkles" >}}&nbsp;
### Usage
#### Default
{{< badge "Badge" >}}&nbsp;
``` ```
{{</* badge "Badge" */>}} {{</* badge "Badge" */>}}
``` ```
Result: #### Colors
{{< badge "Badge" >}} {{< badge content="Badge" >}}&nbsp;
{{< badge content="Badge" color="purple" >}}&nbsp;
Variants: {{< badge content="Badge" color="indigo" >}}&nbsp;
{{< badge content="Badge" color="blue" >}} &nbsp;
{{< badge content="Badge" color="green" >}} &nbsp;
{{< badge content="Badge" color="yellow" >}} &nbsp;
{{< badge content="Badge" color="amber" >}} &nbsp;
{{< badge content="Badge" color="orange" >}} &nbsp;
{{< badge content="Badge" color="red" >}}&nbsp;
``` ```
{{</* badge content="info" type="info" */>}} {{</* badge content="Badge" */>}}
{{</* badge content="warning" type="warning" */>}} {{</* badge content="Badge" color="purple" */>}}
{{</* badge content="error" type="error" */>}} {{</* badge content="Badge" color="indigo" */>}}
{{</* badge content="Badge" color="blue" */>}}
{{</* badge content="Badge" color="green" */>}}
{{</* badge content="Badge" color="yellow" */>}}
{{</* badge content="Badge" color="amber" */>}}
{{</* badge content="Badge" color="orange" */>}}
{{</* badge content="Badge" color="red" */>}}
``` ```
Result: {{< badge content="Badge" border=false >}} &nbsp;
{{< badge content="Badge" color="purple" border=false >}} &nbsp;
{{< badge content="info" type="info" >}} &nbsp; {{< badge content="Badge" color="indigo" border=false >}} &nbsp;
{{< badge content="warning" type="warning" >}} &nbsp; {{< badge content="Badge" color="blue" border=false >}} &nbsp;
{{< badge content="error" type="error" >}} {{< badge content="Badge" color="green" border=false >}} &nbsp;
{{< badge content="Badge" color="yellow" border=false >}} &nbsp;
With link and icon: {{< badge content="Badge" color="amber" border=false >}} &nbsp;
{{< badge content="Badge" color="orange" border=false >}}&nbsp;
{{< badge content="Badge" color="red" border=false >}}&nbsp;
``` ```
{{</* badge content="Badge" border=false */>}}
{{</* badge content="Badge" color="purple" border=false */>}}
{{</* badge content="Badge" color="indigo" border=false */>}}
{{</* badge content="Badge" color="blue" border=false */>}}
{{</* badge content="Badge" color="green" border=false */>}}
{{</* badge content="Badge" color="yellow" border=false */>}}
{{</* badge content="Badge" color="amber" border=false */>}}
{{</* badge content="Badge" color="orange" border=false */>}}
{{</* badge content="Badge" color="red" border=false */>}}
```
#### Variants
{{< badge content="Badge" icon="sparkles" >}}&nbsp;
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}&nbsp;
```
{{</* badge content="Badge" icon="sparkles" */>}}
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}} {{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
``` ```
Result:
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
### Options ### Options
| Name | Description | | Name | Description |
|-----------|--------------------------------------------------------------| |-----------|--------------------------------------------------------------------------------------------------------------------------|
| `content` | The text of the badge. | | `content` | The text of the badge. |
| `link` | The link of the badge. | | `link` | The link of the badge. |
| `icon` | The icon of the badge. | | `icon` | The icon of the badge. |
| `type` | The type of the badge. (default, `info`, `warning`, `error`) | | `color` | The color of the badge. <br/> `gray` (default), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`. |
| `class` | The class of the badge. | | `class` | The class of the badge. |
| `border` | Adds or removes the border (default: true). |
## YouTube ## YouTube

95
exampleSite/content/docs/guide/shortcodes/others.zh-cn.md
View File

@@ -1,8 +1,6 @@
--- ---
title: 其他短代码 title: 其他短代码
linkTitle: 其他 linkTitle: 其他
sidebar:
exclude: true
next: /docs/guide/deploy-site next: /docs/guide/deploy-site
--- ---
@@ -11,49 +9,90 @@ next: /docs/guide/deploy-site
这些短代码稳定性较低，可能随时变更。 这些短代码稳定性较低，可能随时变更。
{{< /callout >}} {{< /callout >}}
## 徽章 ### 示例
{{< badge "default" >}}&nbsp;
{{< badge content="border" border=false >}}&nbsp;
{{< badge content="color" color="green" >}}&nbsp;
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}&nbsp;
{{< badge content="icon" icon="sparkles" >}}&nbsp;
### 使用
#### 默认
{{< badge "徽章" >}}&nbsp;
``` ```
{{</* badge "徽章" */>}} {{</* badge "徽章" */>}}
``` ```
效果： #### 颜色
{{< badge "徽章" >}} {{< badge content="徽章" >}}&nbsp;
{{< badge content="徽章" color="purple" >}}&nbsp;
变体： {{< badge content="徽章" color="indigo" >}}&nbsp;
{{< badge content="徽章" color="blue" >}} &nbsp;
{{< badge content="徽章" color="green" >}} &nbsp;
{{< badge content="徽章" color="yellow" >}} &nbsp;
{{< badge content="徽章" color="amber" >}} &nbsp;
{{< badge content="徽章" color="orange" >}} &nbsp;
{{< badge content="徽章" color="red" >}}&nbsp;
``` ```
{{</* badge content="信息" type="info" */>}} {{</* badge content="徽章" */>}}
{{</* badge content="警告" type="warning" */>}} {{</* badge content="徽章" color="purple" */>}}
{{</* badge content="错误" type="error" */>}} {{</* badge content="徽章" color="indigo" */>}}
{{</* badge content="徽章" color="blue" */>}}
{{</* badge content="徽章" color="green" */>}}
{{</* badge content="徽章" color="yellow" */>}}
{{</* badge content="徽章" color="amber" */>}}
{{</* badge content="徽章" color="orange" */>}}
{{</* badge content="徽章" color="red" */>}}
``` ```
效果： {{< badge content="徽章" border=false >}} &nbsp;
{{< badge content="徽章" color="purple" border=false >}} &nbsp;
{{< badge content="信息" type="info" >}} &nbsp; {{< badge content="徽章" color="indigo" border=false >}} &nbsp;
{{< badge content="警告" type="warning" >}} &nbsp; {{< badge content="徽章" color="blue" border=false >}} &nbsp;
{{< badge content="错误" type="error" >}} {{< badge content="徽章" color="green" border=false >}} &nbsp;
{{< badge content="徽章" color="yellow" border=false >}} &nbsp;
带链接和图标： {{< badge content="徽章" color="amber" border=false >}} &nbsp;
{{< badge content="徽章" color="orange" border=false >}}&nbsp;
{{< badge content="徽章" color="red" border=false >}}&nbsp;
``` ```
{{</* badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}} {{</* badge content="徽章" border=false */>}}
{{</* badge content="徽章" color="purple" border=false */>}}
{{</* badge content="徽章" color="indigo" border=false */>}}
{{</* badge content="徽章" color="blue" border=false */>}}
{{</* badge content="徽章" color="green" border=false */>}}
{{</* badge content="徽章" color="yellow" border=false */>}}
{{</* badge content="徽章" color="amber" border=false */>}}
{{</* badge content="徽章" color="orange" border=false */>}}
{{</* badge content="徽章" color="red" border=false */>}}
``` ```
效果： #### 变体
{{< badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" >}} {{< badge content="徽章" icon="sparkles" >}}&nbsp;
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}&nbsp;
## 选项 ```
{{</* badge content="徽章" icon="sparkles" */>}}
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
```
| 范围 | 描述 | ### 选项
|-----------|-------------------------------------|
| `content` | 徽章的文字。 | | 姓名 | 描述 |
| `link` | 徽章的链接。 | |-----------|----------------------------------------------------------------------------------------------------|
| `icon` | 徽章的图标。 | | `content` | 徽章的文字。 |
| `type` | 徽章的类型。（默认，`info`，`warning`，`error`） | | `link` | 徽章的链接。 |
| `class` | 徽章的等级。 | | `icon` | 徽章的图标。 |
| `color` | 徽章的颜色。 <br/> `gray` (默认), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`. |
| `class` | 徽章的等级。 |
| `border` | 添加或删除边框 (默认：true). |
## YouTube ## YouTube

12
exampleSite/hugo_stats.json
View File

@@ -182,7 +182,9 @@
"hx:bg-gradient-to-r", "hx:bg-gradient-to-r",
"hx:bg-gray-100", "hx:bg-gray-100",
"hx:bg-green-100", "hx:bg-green-100",
"hx:bg-indigo-100",
"hx:bg-neutral-50", "hx:bg-neutral-50",
"hx:bg-orange-50",
"hx:bg-primary-100", "hx:bg-primary-100",
"hx:bg-primary-400", "hx:bg-primary-400",
"hx:bg-primary-600", "hx:bg-primary-600",
@@ -202,6 +204,8 @@
"hx:border-gray-200", "hx:border-gray-200",
"hx:border-gray-500", "hx:border-gray-500",
"hx:border-green-200", "hx:border-green-200",
"hx:border-indigo-200",
"hx:border-orange-100",
"hx:border-purple-200", "hx:border-purple-200",
"hx:border-red-200", "hx:border-red-200",
"hx:border-t", "hx:border-t",
@@ -248,8 +252,10 @@
"hx:dark:bg-dark/50", "hx:dark:bg-dark/50",
"hx:dark:bg-gray-50/10", "hx:dark:bg-gray-50/10",
"hx:dark:bg-green-900/30", "hx:dark:bg-green-900/30",
"hx:dark:bg-indigo-900/30",
"hx:dark:bg-neutral-800", "hx:dark:bg-neutral-800",
"hx:dark:bg-neutral-900", "hx:dark:bg-neutral-900",
"hx:dark:bg-orange-400/20",
"hx:dark:bg-primary-300/10", "hx:dark:bg-primary-300/10",
"hx:dark:bg-primary-400/10", "hx:dark:bg-primary-400/10",
"hx:dark:bg-primary-600", "hx:dark:bg-primary-600",
@@ -262,8 +268,10 @@
"hx:dark:border-gray-100/20", "hx:dark:border-gray-100/20",
"hx:dark:border-gray-400", "hx:dark:border-gray-400",
"hx:dark:border-green-200/30", "hx:dark:border-green-200/30",
"hx:dark:border-indigo-200/30",
"hx:dark:border-neutral-700", "hx:dark:border-neutral-700",
"hx:dark:border-neutral-800", "hx:dark:border-neutral-800",
"hx:dark:border-orange-400/30",
"hx:dark:border-purple-200/30", "hx:dark:border-purple-200/30",
"hx:dark:border-red-200/30", "hx:dark:border-red-200/30",
"hx:dark:border-white/10", "hx:dark:border-white/10",
@@ -305,8 +313,10 @@
"hx:dark:text-gray-400", "hx:dark:text-gray-400",
"hx:dark:text-gray-50", "hx:dark:text-gray-50",
"hx:dark:text-green-200", "hx:dark:text-green-200",
"hx:dark:text-indigo-200",
"hx:dark:text-neutral-200", "hx:dark:text-neutral-200",
"hx:dark:text-neutral-400", "hx:dark:text-neutral-400",
"hx:dark:text-orange-300",
"hx:dark:text-primary-600", "hx:dark:text-primary-600",
"hx:dark:text-purple-200", "hx:dark:text-purple-200",
"hx:dark:text-red-200", "hx:dark:text-red-200",
@@ -623,8 +633,10 @@
"hx:text-gray-800", "hx:text-gray-800",
"hx:text-gray-900", "hx:text-gray-900",
"hx:text-green-900", "hx:text-green-900",
"hx:text-indigo-900",
"hx:text-left", "hx:text-left",
"hx:text-lg", "hx:text-lg",
"hx:text-orange-800",
"hx:text-primary-800", "hx:text-primary-800",
"hx:text-purple-900", "hx:text-purple-900",
"hx:text-red-900", "hx:text-red-900",

28
layouts/_partials/shortcodes/badge.html
View File

@@ -1,18 +1,34 @@
{{- $content := .content -}} {{- $content := .content -}}
{{- $type := .type | default "" -}} {{- $color := .color | default .type | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
{{- $class := .class | default "" -}} {{- $class := .class | default "" -}}
{{- $border := .border | default false -}} {{- $border := .border | default false -}}
{{- $icon := .icon | default "" -}} {{- $icon := .icon | default "" -}}
{{- $defaultClass := "hx:text-gray-600 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:dark:text-neutral-200 hx:border-gray-200 hx:dark:border-neutral-700" -}} {{- /* Compatibility with previous names. */ -}}
{{- $mapping := (dict
"default" "gray"
"tip" "green"
"info" "blue"
"warning" "yellow"
"error" "red"
"important" "purple"
)
-}}
{{- $color = index $mapping $color | default $color | default "gray" -}}
{{- $styleClass := newScratch -}} {{- $styleClass := newScratch -}}
{{- $styleClass.Set "info" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}} {{- $styleClass.Set "gray" "hx:text-gray-600 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:dark:text-neutral-200 hx:border-gray-200 hx:dark:border-neutral-700" -}}
{{- $styleClass.Set "warning" "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}} {{- $styleClass.Set "purple" "hx:border-purple-200 hx:bg-purple-100 hx:text-purple-900 hx:dark:border-purple-200/30 hx:dark:bg-purple-900/30 hx:dark:text-purple-200" -}}
{{- $styleClass.Set "error" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}} {{- $styleClass.Set "indigo" "hx:border-indigo-200 hx:bg-indigo-100 hx:text-indigo-900 hx:dark:border-indigo-200/30 hx:dark:bg-indigo-900/30 hx:dark:text-indigo-200" -}}
{{- $styleClass.Set "blue" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}}
{{- $styleClass.Set "green" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200" -}}
{{- $styleClass.Set "yellow" "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
{{- $styleClass.Set "orange" "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" -}}
{{- $styleClass.Set "amber" "hx:border-amber-200 hx:bg-amber-100 hx:text-amber-900 hx:dark:border-amber-200/30 hx:dark:bg-amber-900/30 hx:dark:text-amber-200" -}}
{{- $styleClass.Set "red" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
{{- $borderClass := cond (eq $border true) "hx:border" "" -}} {{- $borderClass := cond (eq $border true) "hx:border" "" -}}
{{- $badgeClass := or ($styleClass.Get $type) $defaultClass -}} {{- $badgeClass := or ($styleClass.Get $color) ($styleClass.Get "gray") -}}
<div class="hextra-badge {{ $class }}"> <div class="hextra-badge {{ $class }}">
<div class="hx:inline-flex hx:gap-1 hx:items-center hx:rounded-full hx:px-2.5 hx:leading-6 hx:text-[.65rem] {{ $borderClass }} {{ $badgeClass }}"> <div class="hx:inline-flex hx:gap-1 hx:items-center hx:rounded-full hx:px-2.5 hx:leading-6 hx:text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">
{{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}} {{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}

4
layouts/_partials/shortcodes/card.html
View File

@@ -7,7 +7,7 @@
{{- $height := .height -}} {{- $height := .height -}}
{{- $imageStyle := .imageStyle -}} {{- $imageStyle := .imageStyle -}}
{{- $tag := .tag -}} {{- $tag := .tag -}}
{{- $tagType := .tagType -}} {{- $tagColor := .tagColor | default .tagType | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
{{ $linkClass := "hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900" }} {{ $linkClass := "hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900" }}
{{- with $image -}} {{- with $image -}}
@@ -55,7 +55,7 @@
{{- if $tag }} {{- if $tag }}
{{- partial "shortcodes/badge.html" (dict {{- partial "shortcodes/badge.html" (dict
"content" $tag "content" $tag
"type" $tagType "color" $tagColor
"class" "hextra-card-tag" "class" "hextra-card-tag"
"border" true "border" true
) )

16
layouts/_shortcodes/badge.html
View File

@@ -2,7 +2,7 @@
A shortcode to create a badge. A shortcode to create a badge.
@param {string} content The content of the badge. @param {string} content The content of the badge.
@param {string} type The type of the badge. @param {string} color The color of the badge.
@param {string} class The class of the badge. @param {string} class The class of the badge.
@param {string} link The link of the badge. @param {string} link The link of the badge.
@param {string} icon The icon of the badge. @param {string} icon The icon of the badge.
@@ -11,23 +11,25 @@ or
@param {string} 0 The content of the badge. @param {string} 0 The content of the badge.
@example {{< badge content="info" type="info" >}} @example {{< badge content="Badge" color="blue" >}}
@example {{< badge "Badge" >}}
*/ -}} */ -}}
{{- if .IsNamedParams -}} {{- if .IsNamedParams -}}
{{- $content := .Get "content" -}} {{- $content := .Get "content" -}}
{{- $type := .Get "type" | default "" -}} {{- $color := .Get "color" | default (.Get "type") | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
{{- $class := .Get "class" | default "" -}} {{- $class := .Get "class" | default "" -}}
{{- $link := .Get "link" | default "" -}} {{- $link := .Get "link" | default "" -}}
{{- $icon := .Get "icon" | default "" -}} {{- $icon := .Get "icon" | default "" -}}
{{- $border := not (eq (.Get "border") false) | default true }}
{{- if $link -}} {{- if $link -}}
<a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank"> <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank">
{{- partial "shortcodes/badge.html" (dict {{- partial "shortcodes/badge.html" (dict
"content" $content "content" $content
"type" $type "color" $color
"class" $class "class" $class
"border" true "border" $border
"icon" $icon "icon" $icon
) )
-}} -}}
@@ -35,9 +37,9 @@ or
{{- else -}} {{- else -}}
{{- partial "shortcodes/badge.html" (dict {{- partial "shortcodes/badge.html" (dict
"content" $content "content" $content
"type" $type "color" $color
"class" $class "class" $class
"border" true "border" $border
"icon" $icon "icon" $icon
) )
-}} -}}

6
layouts/_shortcodes/card.html
View File

@@ -6,7 +6,7 @@ A shortcode to create a card.
@param {string} icon The icon of the card. @param {string} icon The icon of the card.
@param {string} subtitle The subtitle of the card. @param {string} subtitle The subtitle of the card.
@param {string} tag The tag of the card. @param {string} tag The tag of the card.
@param {string} tagType The type of the tag. @param {string} tagColor The color of the tag.
@param {string} image The image of the card. @param {string} image The image of the card.
@param {string} method The method to process the image. @param {string} method The method to process the image.
@param {string} options The options to process the image. @param {string} options The options to process the image.
@@ -24,7 +24,7 @@ A shortcode to create a card.
{{- $height := 0 -}} {{- $height := 0 -}}
{{- $imageStyle := .Get "imageStyle" -}} {{- $imageStyle := .Get "imageStyle" -}}
{{- $tag := .Get "tag" -}} {{- $tag := .Get "tag" -}}
{{- $tagType := .Get "tagType" -}} {{- $tagColor := .Get "tagColor" | default (.Get "tagType") | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
{{/* Image processing options */}} {{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}} {{- $method := .Get "method" | default "Resize" | humanize -}}
@@ -60,6 +60,6 @@ A shortcode to create a card.
"height" $height "height" $height
"imageStyle" $imageStyle "imageStyle" $imageStyle
"tag" $tag "tag" $tag
"tagType" $tagType "tagType" $tagColor
) )
-}} -}}