From f439e6bb87dd030f8e8e11d2ef6f523a1d4dbd5a Mon Sep 17 00:00:00 2001 From: Julia March <101819212+juliamrch@users.noreply.github.com> Date: Sun, 11 Aug 2024 18:30:19 +0200 Subject: [PATCH] feat: add tag support for card shortcode (#427) * styles: accept tags on cards with default and custom colors * styles: compile css --- assets/css/compiled/main.css | 14 +++++++ assets/css/components/cards.css | 13 +++++++ .../content/docs/guide/shortcodes/cards.md | 38 +++++++++++++++---- exampleSite/hugo_stats.json | 2 + layouts/partials/shortcodes/card.html | 13 +++++++ layouts/shortcodes/card.html | 4 ++ tailwind.config.js | 1 + 7 files changed, 78 insertions(+), 7 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 3d37827..13ea0a8 100644 --- 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,6 +2279,7 @@ article details > summary::before { } .hextra-card p { margin-top: 0.5rem; + position: relative; } .dark .hextra-card svg { color: #ffffff66; @@ -2280,6 +2287,13 @@ article details > summary::before { .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 index 9392a90..65fd493 100644 --- 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; +} \ No newline at end of file diff --git a/exampleSite/content/docs/guide/shortcodes/cards.md b/exampleSite/content/docs/guide/shortcodes/cards.md index 9833ebf..9bc7a7e 100644 --- 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 ``` {{}} {{}} + {{}} {{}} {{}} ``` @@ -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 >}} + +``` +{{}} + {{}} + {{}} + {{}} + {{}} +{{}} +``` diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index feead74..836f11b 100644 --- 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 index b55c323..4878fe1 100644 --- 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 -}}
{{- $subtitle | markdownify -}}
{{- 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)) }} + + {{ $tag }} +{{- end -}} {{- /* Strip trailing newline. */ -}} diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index 712ab02..e7224fc 100644 --- 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 index 2fb85ec..97bfe38 100644 --- 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',