From 1f07a0f256020d2af6adecca5e983e4feaf81df4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Mon, 24 Mar 2025 19:47:07 +0100 Subject: [PATCH] shortcodes: let style fallback to color if not found #1067 this makes the parameter behave similar to the `tree` shortcodes item syntax, where we had no other choice in handling style/color values without introducing just another variable and making it overcomplicated --- docs/content/shortcodes/icon.en.md | 21 ++++++++++++-------- layouts/partials/_relearn/boxStyle.gotmpl | 2 ++ layouts/partials/shortcodes/attachments.html | 6 +++++- layouts/partials/shortcodes/badge.html | 6 +++++- layouts/partials/shortcodes/button.html | 6 +++++- layouts/partials/shortcodes/icon.html | 6 +++++- layouts/partials/shortcodes/notice.html | 4 ++++ layouts/partials/shortcodes/resources.html | 4 ++++ layouts/partials/shortcodes/tabs.html | 12 +++++++++-- layouts/partials/shortcodes/tree.html | 14 ++++++------- layouts/partials/term-list.html | 6 +++++- layouts/partials/version.txt | 2 +- layouts/shortcodes/icon.html | 2 +- 13 files changed, 67 insertions(+), 24 deletions(-) diff --git a/docs/content/shortcodes/icon.en.md b/docs/content/shortcodes/icon.en.md index 624fd9381a..83f398db3e 100644 --- a/docs/content/shortcodes/icon.en.md +++ b/docs/content/shortcodes/icon.en.md @@ -6,7 +6,7 @@ title = 'Icon' The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome.com) library. -{{% icon skull-crossbones %}} +{{% icon skull-crossbones blue %}} {{% icon style="warning" %}} {{% icon icon="angle-double-up" color="blue" %}} @@ -16,7 +16,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome {{% tab title="shortcode" %}} ````go -{{%/* icon icon="skull-crossbones" */%}} +{{%/* icon icon="skull-crossbones" style="blue" */%}} {{%/* icon style="warning" */%}} {{%/* icon icon="angle-double-up" color="blue" */%}} ```` @@ -25,9 +25,9 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome {{% tab title="shortcode (positional)" %}} ````go -{{%/* icon skull-crossbones */%}} -{{%/* icon exclamation-triangle */%}} -{{%/* icon angle-double-up */%}} +{{%/* icon skull-crossbones blue */%}} +{{%/* icon exclamation-triangle red */%}} +{{%/* icon angle-double-up blue */%}} ```` {{% /tab %}} @@ -37,6 +37,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome {{ partial "shortcodes/icon.html" (dict "page" . "icon" "skull-crossbones" + "style" "blue" )}} {{ partial "shortcodes/icon.html" (dict "page" . @@ -57,7 +58,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome | Name | Position | Default | Notes | |-----------------------|----------|-----------------|-------------| | **icon** | 1 | _<empty>_ | [Font Awesome icon name](#finding-an-icon) to be displayed. It will be displayed in the text color of its according context. | -| **style** | | _<empty>_ | The style scheme used for the icon.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code`

You can also [define your own styles](shortcodes/notice#defining-own-styles). | +| **style** | 2 | _<empty>_ | The style scheme used for the icon.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code`

You can also [define your own styles](shortcodes/notice#defining-own-styles). | | **color** | | _<empty>_ | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color

| ### Finding an icon @@ -90,10 +91,14 @@ Built with {{% icon heart %}} by Relearn and Hugo ### With color ````go -Built with {{%/* icon icon="heart" style="red" */%}} by Relearn and Hugo +- Built with {{%/* icon heart red */%}} by Relearn and Hugo +- Built with {{%/* icon icon="heart" style="red" */%}} by Relearn and Hugo - long form, same as above +- Built with {{%/* icon icon="heart" color="red" */%}} by Relearn and Hugo - this uses the HTML color red instead of the red style ```` -Built with {{% icon icon="heart" style="red" %}} by Relearn and Hugo +- Built with {{% icon heart red %}} by Relearn and Hugo +- Built with {{% icon icon="heart" style="red" %}} by Relearn and Hugo - long form, same as above +- Built with {{% icon icon="heart" color="red" %}} by Relearn and Hugo - this uses the HTML color red instead of the red style ### Advanced HTML Usage diff --git a/layouts/partials/_relearn/boxStyle.gotmpl b/layouts/partials/_relearn/boxStyle.gotmpl index a871f3ab56..cbb35a8f7f 100644 --- a/layouts/partials/_relearn/boxStyle.gotmpl +++ b/layouts/partials/_relearn/boxStyle.gotmpl @@ -38,6 +38,8 @@ (dict "identifier" "default") (dict "identifier" "transparent") (dict "identifier" "code") + (dict "identifier" "filled") + (dict "identifier" "initial") ) }} {{- if eq .identifier $style }} {{- $set = dict "style" $style "title" "" "icon" "" }} diff --git a/layouts/partials/shortcodes/attachments.html b/layouts/partials/shortcodes/attachments.html index 356292b8bb..8c22314f23 100644 --- a/layouts/partials/shortcodes/attachments.html +++ b/layouts/partials/shortcodes/attachments.html @@ -12,6 +12,10 @@ {{- $style = .style | default "transparent" }} {{- end }} {{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }} +{{- if and (not $boxStyle.style) (not $color) }} + {{- $color = $style }} + {{- $style = "" }} +{{- end }} {{- $title := trim ($boxStyle.title | default ("Attachments-label" | T)) " " }} {{- $icon := trim ($boxStyle.icon | default "paperclip") " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} @@ -30,7 +34,7 @@ {{- if ne .BundleType "leaf" }} {{- warnf "%q: UNSUPPORTED usage of 'attachments' shortcode found while using Hugo >= 0.112.0, use a leaf bundle instead; see https://mcshelby.github.io/hugo-theme-relearn/shortcodes/attachments/index.html#single-language" $filepath }} {{- end -}} -
+
{{ if $icon }}{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
    {{- $fileDir := path.Dir (strings.TrimPrefix (path.Clean hugo.WorkingDir) (path.Clean .File.Filename)) }} diff --git a/layouts/partials/shortcodes/badge.html b/layouts/partials/shortcodes/badge.html index 28bea8a6f3..06e4bc6ed4 100644 --- a/layouts/partials/shortcodes/badge.html +++ b/layouts/partials/shortcodes/badge.html @@ -8,11 +8,15 @@ {{- $content := .content }} {{- $style := .style | default "default" }} {{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }} +{{- if and (not $boxStyle.style) (not $color) }} + {{- $color = $style }} + {{- $style = "" }} +{{- end }} {{- $title := trim ($boxStyle.title) " " }} {{- $icon := trim ($boxStyle.icon) " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} {{- $icon = printf "fa-fw fas fa-%s" $icon }} {{- end }} {{- with $page -}} -{{ if or $icon $title }}{{ if $icon }}{{ end }}{{ if and $icon $title }} {{ end }}{{ if $title }}{{ $title | .RenderString }}{{ end }}{{ end }}{{ $content | safeHTML }} +{{ if or $icon $title }}{{ if $icon }}{{ end }}{{ if and $icon $title }} {{ end }}{{ if $title }}{{ $title | .RenderString }}{{ end }}{{ end }}{{ $content | safeHTML }} {{- end }} \ No newline at end of file diff --git a/layouts/partials/shortcodes/button.html b/layouts/partials/shortcodes/button.html index 8d3c2c0733..6aada05056 100644 --- a/layouts/partials/shortcodes/button.html +++ b/layouts/partials/shortcodes/button.html @@ -44,6 +44,10 @@ {{- $attributes = merge $attributes (partial "_relearn/linkAttributes.gotmpl" (dict "url" $href "page" $page "target" .target)) -}} {{- end }} {{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" (or .title $content) "icon" .icon) }} +{{- if and (not $boxStyle.style) (not $color) }} + {{- $color = $style }} + {{- $style = "" }} +{{- end }} {{- $title := trim ($boxStyle.title) " " }} {{- $icon := trim ($boxStyle.icon) " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} @@ -51,7 +55,7 @@ {{- end }} {{- $iconposition := .iconposition | default "left" }} {{- with $page -}} - + {{- if $isButton -}}