feat: add tag support for card shortcode (#427)

* styles: accept tags on cards with default and custom colors * styles: compile css
imfing · Aug 11, 2024 · f439e6b · f439e6b
1 parent 9c0ba06
commit f439e6b
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 7 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -1214,6 +1214,9 @@ video {
 .hx-text-xs {
   font-size: .75rem;
 }
+.hx-text-xxs {
+  font-size: .65rem;
+}
 .hx-font-bold {
   font-weight: 700;
 }
@@ -2258,6 +2261,9 @@ article details > summary::before {
 .hextra-cards {
   grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
 }
+.hextra-card {
+  position: relative;
+}
 .hextra-card img {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -2273,13 +2279,21 @@ article details > summary::before {
 }
 .hextra-card p {
   margin-top: 0.5rem;
+  position: relative;
 }
 .dark .hextra-card svg {
   color: #ffffff66;
 }
 .dark .hextra-card:hover svg {
   color: currentColor;
 }
+/* If tag, position upright on the card */
+.hx-tag {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 10;
+}
 .steps h3 {
   counter-increment: step;
 }

diff --git a/assets/css/components/cards.css b/assets/css/components/cards.css
@@ -2,6 +2,10 @@
   grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
 }
 
+.hextra-card {
+  position: relative;
+}
+
 .hextra-card img {
   user-select: none;
 }
@@ -18,6 +22,7 @@
 
 .hextra-card p {
   margin-top: 0.5rem;
+  position: relative;
 }
 
 .dark .hextra-card svg {
@@ -27,3 +32,11 @@
 .dark .hextra-card:hover svg {
   color: currentColor;
 }
+
+/* If tag, position upright on the card */
+.hx-tag {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 10;
+}
diff --git a/exampleSite/content/docs/guide/shortcodes/cards.md b/exampleSite/content/docs/guide/shortcodes/cards.md
@@ -7,6 +7,7 @@ linkTitle: Cards
 
 {{< cards >}}
   {{< card link="../callout" title="Callout" icon="warning" >}}
+  {{< card link="../callout" title="Card with tag" icon="tag" tag="A custom tag">}}
   {{< card link="/" title="No Icon" >}}
 {{< /cards >}}
 
@@ -21,6 +22,7 @@ linkTitle: Cards
 ```
 {{</* cards */>}}
   {{</* card link="../callout" title="Callout" icon="warning" */>}}
+  {{</* card link="../callout" title="Card with tag" icon="warning" tag= "A custom tag" */>}}
   {{</* card link="/" title="No Icon" */>}}
 {{</* /cards */>}}
 ```
@@ -35,13 +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.                     |
-
+| 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
 
 Additionally, the card supports adding image and processing through these parameters:
@@ -62,3 +66,23 @@ Hextra auto-detects if image processing is needed during build and applies the `
 It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.
 
 For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
+
+## Tags
+
+The card supports adding tags with custom text and colors:
+
+{{< cards >}}
+  {{< card link="../callout" title="Card with default tag color" tag= "tag text" >}}
+  {{< 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" >}}
+{{< /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" 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" */>}}
+{{</* /cards */>}}
+```
diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
@@ -454,6 +454,7 @@
       "hx-shrink-0",
       "hx-sr-only",
       "hx-sticky",
+      "hx-tag",
       "hx-text-2xl",
       "hx-text-4xl",
       "hx-text-[10px]",
@@ -480,6 +481,7 @@
       "hx-text-white",
       "hx-text-xl",
       "hx-text-xs",
+      "hx-text-xxs",
       "hx-text-yellow-900",
       "hx-to-gray-600",
       "hx-top-0",

diff --git a/layouts/partials/shortcodes/card.html b/layouts/partials/shortcodes/card.html
@@ -7,6 +7,8 @@
 {{- $width := .width -}}
 {{- $height := .height -}}
 {{- $imageStyle := .imageStyle -}}
+{{- $tag := .tag -}}
+{{- $tagColor := .tagColor -}}
 
 {{ $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 -}}
@@ -50,5 +52,16 @@
   {{- with $subtitle -}}
     <div class="hextra-card-subtitle hx-line-clamp-3 hx-text-sm hx-font-normal hx-text-gray-500 dark:hx-text-gray-400 hx-px-4 hx-mb-4 hx-mt-2">{{- $subtitle | markdownify -}}</div>
   {{- end -}}
+
+  {{- if $tag }}
+  {{ $defaultClass := "hx-text-gray-600 hx-text-xxs hx-bg-gray-100 hx-border dark:hx-bg-neutral-800 dark:hx-text-neutral-200" }}
+  {{ $yellowClass := "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" }}
+  {{ $blueClass := "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" }}
+  {{ $redClass := "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" }}
+
+  {{ $class := cond (eq $tagColor "yellow") $yellowClass (cond (eq $tagColor "blue") $blueClass (cond (eq $tagColor "red") $redClass $defaultClass)) }}
+
+  <span class="hx-flex hx-tag hx-text-xxs hx-border hx-rounded-full hx-px-2 hx-py-1 {{ $class }}">{{ $tag }}</span>
+{{- end -}}
 </a>
 {{- /* Strip trailing newline. */ -}}
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
@@ -7,6 +7,8 @@
 {{- $width := 0 -}}
 {{- $height := 0 -}}
 {{- $imageStyle := .Get "imageStyle" -}}
+{{- $tag := .Get "tag" -}}
+{{- $tagColor := .Get "tagColor" -}}
 
 {{/* Image processing options */}}
 {{- $method := .Get "method" | default "Resize" | humanize -}}
@@ -48,5 +50,7 @@
   "width"       $width
   "height"      $height
   "imageStyle"  $imageStyle
+  "tag"         $tag
+  "tagColor"    $tagColor
   )
 -}}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -29,6 +29,7 @@ module.exports = {
       '2xl': '1536px'
     },
     fontSize: {
+      xxs: '.65rem',
       xs: '.75rem',
       sm: '.875rem',
       base: '1rem',