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.<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 | _<empty>_ | 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** | | _<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.<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 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 -}} -<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)) }} 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 -}} -<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 }} \ 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 -}} -<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 -}} diff --git a/layouts/partials/shortcodes/icon.html b/layouts/partials/shortcodes/icon.html index 1f3253b240..46da7e89ba 100644 --- a/layouts/partials/shortcodes/icon.html +++ b/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 }} \ No newline at end of file diff --git a/layouts/partials/shortcodes/notice.html b/layouts/partials/shortcodes/notice.html index 9643bcd214..98bbc51cb9 100644 --- a/layouts/partials/shortcodes/notice.html +++ b/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)) }} diff --git a/layouts/partials/shortcodes/resources.html b/layouts/partials/shortcodes/resources.html index d9cb9d7e10..45d0cf05f2 100644 --- a/layouts/partials/shortcodes/resources.html +++ b/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)) }} diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html index cb956946b3..312f584171 100644 --- a/layouts/partials/shortcodes/tabs.html +++ b/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) }}​{{ 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> diff --git a/layouts/partials/shortcodes/tree.html b/layouts/partials/shortcodes/tree.html index 151c4490f7..1326baf344 100644 --- a/layouts/partials/shortcodes/tree.html +++ b/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 }} diff --git a/layouts/partials/term-list.html b/layouts/partials/term-list.html index ba02ce2f70..92afec7d1b 100644 --- a/layouts/partials/term-list.html +++ b/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 }} diff --git a/layouts/partials/version.txt b/layouts/partials/version.txt index 72dc0ad199..7e5887e39c 100644 --- a/layouts/partials/version.txt +++ b/layouts/partials/version.txt @@ -1 +1 @@ -7.5.0+d93aad133c2fcc9455101bb698f3ea2f614f455f \ No newline at end of file +7.5.0+3210717a61c06859bf32ddf5b7f94e70345d0497 \ No newline at end of file diff --git a/layouts/shortcodes/icon.html b/layouts/shortcodes/icon.html index f5048d2766..3acf39d2af 100644 --- a/layouts/shortcodes/icon.html +++ b/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)) ) }} \ No newline at end of file