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

@@ -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 skull-crossbones blue */%}}
-{{%/* icon exclamation-triangle */%}}
+{{%/* icon exclamation-triangle red */%}}
-{{%/* icon angle-double-up */%}}
+{{%/* 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**             |          | _&lt;empty&gt;_ | The style scheme used for the icon.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
+| **style**             | 2        | _&lt;empty&gt;_ | The style scheme used for the icon.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
 | **color**             |          | _&lt;empty&gt;_ | 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.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color<br><br> |
 
 ### 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
 

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" "" }}

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 -}}
-<div class="box attachments cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
+<div class="box attachments cstyle{{ with $style }} {{ . }}{{ end }}"{{ with $color }} style="--VARIABLE-BOX-color: {{ . }};"{{ end }}>
   <div class="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}</div>
   <ul class="box-content attachments-files">
   {{- $fileDir := path.Dir (strings.TrimPrefix (path.Clean hugo.WorkingDir) (path.Clean .File.Filename)) }}

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 -}}
-<span class="badge cstyle {{ $style }}{{ if or $icon $title }} badge-with-title{{ end }}">{{ if or $icon $title }}<span class="badge-title">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ if $title }}{{ $title | .RenderString }}{{ end }}</span>{{ end }}<span class="badge-content"{{ if $color }} style="background-color: {{ $color }};"{{ end }}>{{ $content | safeHTML }}</span></span>
+<span class="badge{{ with $style }} cstyle {{ . }}{{ end }}{{ if or $icon $title }} badge-with-title{{ end }}">{{ if or $icon $title }}<span class="badge-title">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ if $title }}{{ $title | .RenderString }}{{ end }}</span>{{ end }}<span class="badge-content"{{ with $color }} style="background-color: {{ . }};"{{ end }}>{{ $content | safeHTML }}</span></span>
 {{- end }}

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 -}}
-<span class="btn cstyle {{ if or $isButton $isLink }}interactive {{ end }}{{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
+<span class="btn{{ if or $isButton $isLink }} interactive {{ end }} cstyle{{ if $style }} {{ $style }}{{ end }}"{{ with $color }} style="--VARIABLE-BOX-color: {{ . }};"{{ end }}>
   {{- if $isButton -}}
   <button onclick="{{ $href | safeJS }}"{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
   {{- else if $isLink -}}

layouts/partials/shortcodes/icon.html

@@ -7,12 +7,16 @@
 {{- $color := .color | default "" }}
 {{- $style := .style | default "" }}
 {{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "icon" .icon) }}
+{{- if and (not $boxStyle.style) (not $color) }}
+  {{- $color = $style }}
+  {{- $style = "" }}
+{{- end }}
 {{- $icon := trim ($boxStyle.icon) " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}
 {{- with $page }}
   {{- if $icon -}}
-<i class="{{ $icon }}{{ if $style }} cstyle {{ $style }}{{ end }}"{{ if $color }} style="color: {{ $color }};"{{ end }}></i>
+<i class="{{ $icon }}{{ with $style }} cstyle {{ . }}{{ end }}"{{ with $color }} style="color: {{ . }};"{{ end }}></i>
   {{- end }}
 {{- end }}

layouts/partials/shortcodes/notice.html

@@ -16,6 +16,10 @@
 {{- $groupid := .groupid }}
 {{- $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)) }}

layouts/partials/shortcodes/resources.html

@@ -10,6 +10,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)) }}

layouts/partials/shortcodes/tabs.html

@@ -25,6 +25,10 @@
     {{- end }}
     {{- $style := .style | default $style | default (cond (ne $color "") "filled" "initial") }}
     {{- $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)) }}
@@ -45,6 +49,10 @@
 {{- $color = .color | default "" }}
 {{- $style = .style | default (cond (ne $color "") "filled" "initial") }}
 {{- $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)) }}
@@ -58,7 +66,7 @@
     {{- range $idx, $tab := $tabs }}
     <button
       data-tab-item="{{ .itemid }}"
-      class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}{{ if eq $idx 0 }} tabindex="-1"{{ end }}
+      class="tab-nav-button tab-panel-style cstyle{{ with .style }} {{ . }}{{ end }}{{ cond (eq $idx 0) " active" ""}}"{{ with .color }} style="--VARIABLE-BOX-color: {{ . }};"{{ end }}{{ if eq $idx 0 }} tabindex="-1"{{ end }}
       onclick="switchTab('{{ $groupid }}','{{ .itemid }}')"
     >
       <span class="tab-nav-text">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $page.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</span>
@@ -69,7 +77,7 @@
     {{- range $idx, $tab := $tabs }}
     <div
       data-tab-item="{{ .itemid }}"
-      class="tab-content tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}>
+      class="tab-content tab-panel-style cstyle{{ with .style }} {{ . }}{{ end }}{{ cond (eq $idx 0) " active" ""}}"{{ with .color }} style="--VARIABLE-BOX-color: {{ . }};"{{ end }}>
       <div class="tab-content-text">
 {{ .content | safeHTML }}
       </div>

layouts/partials/shortcodes/tree.html

@@ -9,21 +9,21 @@
 	{{- if eq (len $parts) 3 }}
 		{{- $name := trim (index $parts 0) "\n\r\t " }}
 		{{- $icon := trim (index $parts 1) "\n\r\t " }}
-		{{- $color := trim (index $parts 2) "\n\r\t " }}
+		{{- $style := trim (index $parts 2) "\n\r\t " }}
 		{{- $classes := split $icon " " }}
 		{{- if eq (len $classes) 1 }}
-			{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $color) }}
+			{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style) }}
 			{{- if $boxStyle.style }}
-				{{- $replacement = printf `<li><i class="fa-fw fas fa-%s cstyle %s"></i><span>%s</span>%s` $icon $color $name $rest }}
+				{{- $replacement = printf `<li><i class="fa-fw fas fa-%s cstyle %s"></i><span>%s</span>%s` $icon $style $name $rest }}
 			{{- else }}
-				{{- $replacement = printf `<li><i class="fa-fw fas fa-%s" style="color: %s;"></i><span>%s</span>%s` $icon $color $name $rest }}
+				{{- $replacement = printf `<li><i class="fa-fw fas fa-%s" style="color: %s;"></i><span>%s</span>%s` $icon $style $name $rest }}
 			{{- end }}
 		{{- else }}
-			{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $color) }}
+			{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style) }}
 			{{- if $boxStyle.style }}
-				{{- $replacement = printf `<li><i class="%s cstyle %s"></i><span>%s</span>%s` $icon $color $name $rest }}
+				{{- $replacement = printf `<li><i class="%s cstyle %s"></i><span>%s</span>%s` $icon $style $name $rest }}
 			{{- else }}
-				{{- $replacement = printf `<li><i class="%s" style="color: %s;"></i><span>%s</span>%s` $icon $color $name $rest }}
+				{{- $replacement = printf `<li><i class="%s" style="color: %s;"></i><span>%s</span>%s` $icon $style $name $rest }}
 			{{- end }}
 		{{- end }}
 	{{- else if eq (len $parts) 2 }}

layouts/partials/term-list.html

@@ -7,6 +7,10 @@
   {{- $color = .color | default "var(--INTERNAL-TAG-BG-color)" }}
 {{- end }}
 {{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" "" "icon" .icon) }}
+{{- if and (not $boxStyle.style) (not $color) }}
+  {{- $color = $style }}
+  {{- $style = "" }}
+{{- end }}
 {{- $icon := trim ($boxStyle.icon) " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
@@ -18,7 +22,7 @@
 {{- end }}
 {{- $taxonomy_title := partial "title.gotmpl" (dict "page" $taxonomy_page) }}
 {{- with $term_pages }}
-<div class="R-taxonomy taxonomy-{{ $taxonomy }} cstyle{{ with $style }} {{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}" title="{{ $taxonomy_title }}"{{ if $color }}{{ printf " style=\"--VARIABLE-TAGS-BG-color: %s;\"" $color | safeHTMLAttr }}{{ end }}>
+<div class="R-taxonomy taxonomy-{{ $taxonomy }} cstyle{{ with $style }} {{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}" title="{{ $taxonomy_title }}"{{ with $color }}{{ printf " style=\"--VARIABLE-TAGS-BG-color: %s;\"" . | safeHTMLAttr }}{{ end }}>
   {{- if $icon }}
   <i class="{{ $icon }}"></i>
   {{- end }}

layouts/partials/version.txt

@@ -1 +1 @@
-7.5.0+d93aad133c2fcc9455101bb698f3ea2f614f455f
+7.5.0+3210717a61c06859bf32ddf5b7f94e70345d0497

layouts/shortcodes/icon.html

@@ -2,6 +2,6 @@
 {{- partial "shortcodes/icon.html" (dict
   "page"    .Page
   "icon"    (.Get "icon" | default (.Get 0))
-  "style"   (.Get "style" )
   "color"   (.Get "color" )
+  "style"   (.Get "style" | default (.Get 1))
 ) }}