feat(badges): colors and border

exampleSite/content/docs/guide/shortcodes/cards.md

@@ -37,15 +37,15 @@ linkTitle: Cards
 
 ## Card Parameters
 
-| Parameter  | Description                                                     |
-|------------|-----------------------------------------------------------------|
-| `link`     | URL (internal or external).                                     |
-| `title`    | Title heading for the card.                                     |
-| `subtitle` | Subtitle heading (supports Markdown).                           |
-| `icon`     | Name of the icon.                                               |
-| `tag`      | Text in tag.                                                    |
-| `tagType`  | Type of the tag: default (gray), `info`, `warning` and `error`. |
-  
+| Parameter  | Description                                                                           |
+|------------|---------------------------------------------------------------------------------------|
+| `link`     | URL (internal or external).                                                           |
+| `title`    | Title heading for the card.                                                           |
+| `subtitle` | Subtitle heading (supports Markdown).                                                 |
+| `icon`     | Name of the icon. See [icons]({{% relRef "icon" %}}) for more information.            |
+| `tag`      | Text in tag.                                                                          |
+| `tagColor` | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
+
 ## Image Card
 
 Additionally, the card supports adding image and processing through these parameters:
@@ -74,18 +74,19 @@ Card supports adding tags which could be useful to show extra status information
 
 {{< cards >}}
   {{< 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 info tag" tag="tag text" tagType="info" >}}
-  {{< card link="../callout" title="Card with warning tag" tag="tag text" tagType="warning" >}}
-  {{< 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="../callout" title="Card with red tag" tag="tag text" tagColor="red" >}}
+  {{< card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" >}}
+  {{< 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 */>}}
   {{</* 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 blue tag" tag="tag text" tagType="info" */>}}
-  {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}}
+  {{</* card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" */>}}
+  {{</* card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" */>}}
+  {{</* 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 */>}}
 ```
 

exampleSite/content/docs/guide/shortcodes/others.fa.md

@@ -1,8 +1,6 @@
 ---
 title: سایر شورتکدها
 linkTitle: سایر
-sidebar:
-  exclude: true
 next: /docs/guide/deploy-site
 ---
 

exampleSite/content/docs/guide/shortcodes/others.ja.md

@@ -1,8 +1,6 @@
 ---
 title: その他のショートコード
 linkTitle: その他
-sidebar:
-  exclude: true
 next: /docs/guide/deploy-site
 ---
 

exampleSite/content/docs/guide/shortcodes/others.md

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

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

@@ -1,8 +1,6 @@
 ---
 title: 其他短代码
 linkTitle: 其他
-sidebar:
-  exclude: true
 next: /docs/guide/deploy-site
 ---
 

exampleSite/hugo_stats.json

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

layouts/_partials/shortcodes/badge.html

@@ -1,18 +1,34 @@
 {{- $content := .content -}}
-{{- $type := .type | default "" -}}
+{{- $color := .color | default .type | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
 {{- $class := .class | default "" -}}
 {{- $border := .border | default false -}}
 {{- $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.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 "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 "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 "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 "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 "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" "" -}}
-{{- $badgeClass := or ($styleClass.Get $type) $defaultClass -}}
+{{- $badgeClass := or ($styleClass.Get $color) ($styleClass.Get "gray") -}}
 <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 }}">
     {{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}

layouts/_partials/shortcodes/card.html

@@ -7,7 +7,7 @@
 {{- $height := .height -}}
 {{- $imageStyle := .imageStyle -}}
 {{- $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" }}
 {{- with $image -}}
@@ -55,7 +55,7 @@
   {{- if $tag }}
     {{- partial "shortcodes/badge.html" (dict
       "content" $tag
-      "type" $tagType
+      "color" $tagColor
       "class" "hextra-card-tag"
       "border" true
       )

layouts/_shortcodes/badge.html

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