docs: fix favicon customization instruction

* feat: move badge to a separate partial

* feat: badge shortcode

* docs: add badge shortcode examples

* chore: generate css

* docs: add spaces between badges

assets/css/compiled/main.css

@@ -1176,6 +1176,9 @@ video {
 .hx-text-4xl {
   font-size: 2.25rem;
 }
+.hx-text-\[\.65rem\] {
+  font-size: .65rem;
+}
 .hx-text-\[10px\] {
   font-size: 10px;
 }
@@ -2269,7 +2272,6 @@ article details > summary::before {
   top: 5px;
   right: 5px;
   z-index: 10;
-  font-size: .65rem;
 }
 .steps h3 {
   counter-increment: step;
@@ -2594,6 +2596,10 @@ nav .search-wrapper {
   overflow: auto;
   font-size: .75rem;
 }
+.hextra-badge {
+  display: inline-flex;
+  align-items: center;
+}
 html {
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;

assets/css/components/badge.css

@@ -0,0 +1,3 @@
+.hextra-badge {
+  @apply hx-inline-flex hx-items-center;
+}

assets/css/components/cards.css

@@ -38,5 +38,4 @@
   top: 5px;
   right: 5px;
   z-index: 10;
-  font-size: .65rem;
 }

assets/css/styles.css

@@ -11,6 +11,7 @@
 @import "components/code-copy.css";
 @import "components/hextra/feature-grid.css";
 @import "components/jupyter.css";
+@import "components/badge.css";
 
 html {
   @apply hx-text-base hx-antialiased;

exampleSite/content/docs/guide/configuration.md

@@ -186,10 +186,10 @@ To customize the [favicon](https://en.wikipedia.org/wiki/Favicon) for your site,
   {{< /filetree/folder >}}
 {{< /filetree/container >}}
 
-Include both `favicon.ico` and `favicon.svg` files in your project to ensure your site's favicons display correctly.
+Include `favicon.ico`, `favicon.svg` and `favicon-dark.svg` files in your project to ensure your site's favicons display correctly.
 
-While `favicon.ico` is generally for older browsers, `favicon.svg` is supported by modern ones. The optional `favicon-dark.svg` can be included for a tailored experience in dark mode.
-Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons.
+While `favicon.ico` is generally for older browsers, `favicon.svg` and `favicon-dark.svg` are supported by modern browsers.
+Use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate such icons.
 
 ### Theme Configuration
 

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

@@ -7,8 +7,8 @@ linkTitle: Cards
 
 {{< cards >}}
   {{< card link="../callout" title="Callout" icon="warning" >}}
-  {{< card link="../callout" title="Card with tag" icon="tag" tag="A custom tag with Tooltip" tagtooltip="Tooltip for Tag">}}
-  {{< card link="/" title="No Icon, but with Tooltip" linktooltip="Tooltip for Link" >}}
+  {{< card link="../callout" title="Card with tag" icon="tag" tag="custom tag">}}
+  {{< card link="/" title="No Icon" >}}
 {{< /cards >}}
 
 {{< cards >}}
@@ -22,8 +22,8 @@ linkTitle: Cards
 ```
 {{</* cards */>}}
   {{</* card link="../callout" title="Callout" icon="warning" */>}}
-  {{</* card link="../callout" title="Card with tag" tag="A custom tag with Tooltip" tagtooltip="Tooltip for Tag" */>}}
-  {{</* card link="/" title="No Icon, but with Tooltip" linktooltip="Tooltip for Link" */>}}
+  {{</* card link="../callout" title="Card with tag" icon="tag" tag= "A custom tag" */>}}
+  {{</* card link="/" title="No Icon" */>}}
 {{</* /cards */>}}
 ```
 
@@ -37,16 +37,14 @@ linkTitle: Cards
 
 ## Card Parameters
 
-| Parameter     | Description                                                           |
-|---------------|-----------------------------------------------------------------------|
-| `link`        | URL (internal or external).                                           |
-| `title`       | Title heading for the card.                                           |
-| `linktooltip` | Tooltip (title-attribut) for the link.                                |
-| `subtitle`    | Subtitle heading (supports Markdown).                                 |
-| `icon`        | Name of the icon.                                                     |
-| `tag`         | Text in tag.                                                          |
-| `tagType`     | Type of the tag: `info` (blue), `warning` (yellow) and `error` (red). |
-| `tagtooltip`  | Tooltip (title-attribut) for the Tag.                                 |
+| 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.                                                    |
+| `tagColor` | Color of the tag: `gray` (default), `yellow`, `red` and `blue`. |
   
 ## Image Card
 

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

@@ -10,6 +10,41 @@ sidebar:
   These shortcodes are considered less stable and may be changed anytime.
 {{< /callout >}}
 
+## Badge
+
+```
+{{</* badge "Badge" */>}}
+```
+
+Result:
+
+{{< badge "Badge" >}}
+
+Variants:
+
+```
+{{</* badge content="info" type="info" */>}}
+{{</* badge content="warning" type="warning" */>}}
+{{</* badge content="error" type="error" */>}}
+```
+
+Result:
+
+{{< badge content="info" type="info" >}} &nbsp;
+{{< badge content="warning" type="warning" >}} &nbsp;
+{{< badge content="error" type="error" >}}
+
+With link:
+
+```
+{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" */>}}
+```
+
+Result:
+
+{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" >}}
+
+
 ## YouTube
 
 Embed a YouTube video.

exampleSite/hugo_stats.json

@@ -209,6 +209,7 @@
       "group-hover:hx-underline",
       "group-open:before:hx-rotate-90",
       "hamburger-menu",
+      "hextra-badge",
       "hextra-card",
       "hextra-card-icon",
       "hextra-card-image",
@@ -464,6 +465,7 @@
       "hx-sticky",
       "hx-text-2xl",
       "hx-text-4xl",
+      "hx-text-[.65rem]",
       "hx-text-[10px]",
       "hx-text-[color:hsl(var(--primary-hue),100%,50%)]",
       "hx-text-base",
@@ -488,7 +490,6 @@
       "hx-text-white",
       "hx-text-xl",
       "hx-text-xs",
-      "hx-text-xxs",
       "hx-text-yellow-900",
       "hx-to-gray-600",
       "hx-top-0",

layouts/partials/head-css.html

@@ -1,6 +1,6 @@
 {{- if and (not hugo.IsProduction) (eq hugo.Environment "theme") }}
   {{- $styles := resources.Get "css/styles.css" }}
-  {{- $styles = $styles | resources.PostCSS (dict "inlineImports" true) }}
+  {{- $styles = $styles | postCSS (dict "inlineImports" true) }}
   <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
 {{- else }}
   {{- $styles := resources.Get "css/compiled/main.css" -}}

layouts/partials/shortcodes/badge.html

@@ -0,0 +1,16 @@
+{{- $content := .content -}}
+{{- $type := .type -}}
+{{- $class := .class | default "" -}}
+{{- $border := .border | default false -}}
+
+{{- $defaultClass := "hx-text-gray-600 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200 hx-border-gray-200 dark:hx-border-neutral-700" -}}
+{{- $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" -}}
+{{- $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" -}}
+{{- $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" -}}
+
+{{- $borderClass := cond (eq $border true) "hx-border" "" -}}
+{{- $badgeClass := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
+<div class="hextra-badge {{ $class }}">
+  <div class="hx-inline-flex hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">{{- $content -}}</div>
+</div>
+{{- /* Strip trailing newline. */ -}}

layouts/partials/shortcodes/card.html

@@ -1,7 +1,6 @@
 {{- $page := .page -}}
 {{- $link := .link -}}
 {{- $title := .title -}}
-{{- $linktooltip := .linktooltip -}}
 {{- $icon := .icon -}}
 {{- $subtitle := .subtitle -}}
 {{- $image := .image -}}
@@ -10,7 +9,6 @@
 {{- $imageStyle := .imageStyle -}}
 {{- $tag := .tag -}}
 {{- $tagType := .tagType -}}
-{{- $tagtooltip := .tagtooltip -}}
 
 {{ $linkClass := "hover:hx-border-gray-300 hx-bg-transparent hx-shadow-sm dark:hx-border-neutral-800 hover:hx-bg-slate-50 hover:hx-shadow-md dark:hover:hx-border-neutral-700 dark:hover:hx-bg-neutral-900" }}
 {{- with $image -}}
@@ -27,7 +25,6 @@
     href="{{ $href }}"
     {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
   {{- end -}}
-  {{- with $linktooltip }}title="{{- . -}}"{{ end -}}
 >
   {{- with $image -}}
     <img
@@ -57,15 +54,13 @@
   {{- end -}}
 
   {{- if $tag }}
-    {{ $defaultClass := "hx-text-gray-600 hx-text-xxs hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200" }}
-    {{ $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }}
-    {{ $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
-    {{ $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
-
-    {{ $tagClass := cond (eq $tagType "info") $infoClass (cond (eq $tagType "warning") $warningClass (cond (eq $tagType "error") $errorClass $defaultClass)) }}
-    <div class="hextra-card-tag">
-      <span class="hx-inline-block hx-rounded-full hx-px-2.5 hx-leading-6 {{ $tagClass }}" {{- with $tagtooltip }}title="{{- . -}}"{{ end -}} >{{ $tag }}</span>
-    </div>
+    {{- partial "shortcodes/badge.html" (dict
+      "content" $tag
+      "type" $tagType
+      "class" "hextra-card-tag"
+      "border" true
+      )
+    -}}
   {{- end -}}
 </a>
 {{- /* Strip trailing newline. */ -}}

layouts/shortcodes/badge.html

@@ -0,0 +1,33 @@
+{{- if .IsNamedParams -}}
+  {{- $content := .Get "content" -}}
+  {{- $type := .Get "type" | default "" -}}
+  {{- $class := .Get "class" | default "" -}}
+  {{- $link := .Get "link" | default "" -}}
+
+  {{- if $link -}}
+    <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank">
+      {{- partial "shortcodes/badge.html" (dict
+        "content" $content 
+        "type" $type
+        "class" $class
+        "border" true
+        )
+      -}}
+    </a>
+  {{- else -}}
+    {{- partial "shortcodes/badge.html" (dict
+      "content" $content 
+      "type" $type
+      "class" $class
+      "border" true
+      )
+    -}}
+  {{- end -}}
+{{- else -}}
+  {{- $content := .Get 0 -}}
+  {{- partial "shortcodes/badge.html" (dict
+    "content" $content 
+    "border" true
+    )
+  -}}
+{{- end -}}

layouts/shortcodes/card.html

@@ -1,7 +1,6 @@
 {{- $context := . -}}
 {{- $link := .Get "link" -}}
 {{- $title := .Get "title" -}}
-{{- $linktooltip := .Get "linktooltip" -}}
 {{- $icon := .Get "icon" -}}
 {{- $subtitle := .Get "subtitle" -}}
 {{- $image := .Get "image" -}}
@@ -10,7 +9,6 @@
 {{- $imageStyle := .Get "imageStyle" -}}
 {{- $tag := .Get "tag" -}}
 {{- $tagType := .Get "tagType" -}}
-{{- $tagtooltip := .Get "tagtooltip" -}}
 
 {{/* Image processing options */}}
 {{- $method := .Get "method" | default "Resize" | humanize -}}
@@ -46,7 +44,6 @@
   "page"        .Page
   "link"        $link
   "title"       $title
-  "linktooltip" $linktooltip
   "icon"        $icon
   "subtitle"    $subtitle
   "image"       $image
@@ -55,6 +52,5 @@
   "imageStyle"  $imageStyle
   "tag"         $tag
   "tagType"     $tagType
-  "tagtooltip"  $tagtooltip
   )
 -}}