Skip to content

Commit

Permalink
feat: add tag support for card shortcode (#427)
Browse files Browse the repository at this point in the history
* styles: accept tags on cards with default and custom colors

* styles: compile css
  • Loading branch information
juliamrch authored Aug 11, 2024
1 parent 9c0ba06 commit f439e6b
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 7 deletions.
14 changes: 14 additions & 0 deletions assets/css/compiled/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -1214,6 +1214,9 @@ video {
.hx-text-xs {
font-size: .75rem;
}
.hx-text-xxs {
font-size: .65rem;
}
.hx-font-bold {
font-weight: 700;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
13 changes: 13 additions & 0 deletions assets/css/components/cards.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -18,6 +22,7 @@

.hextra-card p {
margin-top: 0.5rem;
position: relative;
}

.dark .hextra-card svg {
Expand All @@ -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;
}
38 changes: 31 additions & 7 deletions exampleSite/content/docs/guide/shortcodes/cards.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 >}}

Expand All @@ -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 */>}}
```
Expand All @@ -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:
Expand All @@ -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 */>}}
```
2 changes: 2 additions & 0 deletions exampleSite/hugo_stats.json
Original file line number Diff line number Diff line change
Expand Up @@ -454,6 +454,7 @@
"hx-shrink-0",
"hx-sr-only",
"hx-sticky",
"hx-tag",
"hx-text-2xl",
"hx-text-4xl",
"hx-text-[10px]",
Expand All @@ -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",
Expand Down
13 changes: 13 additions & 0 deletions layouts/partials/shortcodes/card.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -}}
Expand Down Expand Up @@ -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. */ -}}
4 changes: 4 additions & 0 deletions layouts/shortcodes/card.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -}}
Expand Down Expand Up @@ -48,5 +50,7 @@
"width" $width
"height" $height
"imageStyle" $imageStyle
"tag" $tag
"tagColor" $tagColor
)
-}}
1 change: 1 addition & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ module.exports = {
'2xl': '1536px'
},
fontSize: {
xxs: '.65rem',
xs: '.75rem',
sm: '.875rem',
base: '1rem',
Expand Down

0 comments on commit f439e6b

Please sign in to comment.