notice: support user defined box styles #913

assets/css/variables.css

@@ -1,4 +1,3 @@
-:root {
     /* initially use section background to avoid flickering on load when a non default variant is active;
     this is only possible because every color variant defines this variable, otherwise we would have been lost */
     --INTERNAL-PRIMARY-color: var(--PRIMARY-color, var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-MENU-HEADER-BG-color */
@@ -121,4 +120,3 @@
     --INTERNAL-MENU-WIDTH-M: var(--MENU-WIDTH-M, 14.375rem);
     --INTERNAL-MENU-WIDTH-L: var(--MENU-WIDTH-L, 18.75rem);
     --INTERNAL-MAIN-WIDTH-MAX: var(--MAIN-WIDTH-MAX, 81.25rem);
-}

assets/css/variant.css

@@ -1,6 +1,3 @@
-{{- $assetBusting := partialCached "assetbusting.hugo" . -}}
-@import "{{ printf "variables.css%s" $assetBusting }}";
-
 html {
     color-scheme: only var(--INTERNAL-BROWSER-theme);
 }

exampleSite/config/_default/params.toml

@@ -279,6 +279,18 @@ disableAnchorCopy = false
 # be visible when hovering a heading.
 disableAnchorScrolling = false
 
+# User-defined styles for shortcodes
+# Default: not set
+# Besides the predefined `style` values, you are able to define your own. The
+# `style` parameter of the shortcode must match the `identifier` defined here.
+# The title for the style will be determined from the `title`. If no `title`
+# but a `i18n` is set, the title will be taken from the translation files by
+# that key. The `title` may be empty in which case, the box does not contain a
+# default title. `icon` and `color` are working similar.
+boxStyle = [
+	{ identifier = "magic", i18n = "", title = "Magic", icon = "rainbow", color = "gold" }
+]
+
 #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Highlight
 # These options configure how code is displayed.

exampleSite/content/basics/migration/_index.en.md

@@ -22,6 +22,8 @@ This document shows you what's new in the latest release and flags it with one o
 
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} If you now display a single code block in a `notice` box, its [margin and border will be removed](shortcodes/notice#code-with-collapsed-colored-borders) so only the colored notice border is visible.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to have user-defined styles for all shortcodes that accept the `style` parameter. See the [`notice` shortcode](shortcodes/notice#configuration) for configuration.
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`resources` shortcode](shortcodes/resources) has a new parameter `expanded` to make the resource list collapsible.
 
 ---

exampleSite/content/shortcodes/notice.en.md

@@ -66,6 +66,23 @@ It is all about the boxes.
 | **expanded**          |          | _&lt;empty&gt;_ | Whether to draw an expander and how the content is displayed.<br><br>- _&lt;empty&gt;_: no expander is drawn and the content is permanently shown<br>- `true`: the expander is drawn and the content is initially shown<br>- `false`: the expander is drawn and the content is initially hidden |
 | _**&lt;content&gt;**_ |          | _&lt;empty&gt;_ | Arbitrary text to be displayed in box. |
 
+## Configuration
+
+Besides the predefined `style` values, you are able to define your own in the `hugo.toml`.
+
+{{< multiconfig file=hugo >}}
+[params]
+boxStyle = [
+	{ identifier = "magic", i18n = "", title = "Magic", icon = "rainbow", color = "gold" }
+]
+{{< /multiconfig >}}
+
+The `style` parameter must match the `identifier`. The title for the style will be determined from the `title`. If no `title` but a `i18n` is set, the title will be taken from the translation files by that key. The `title` may be empty in which case, the box does not contain a default title. `icon` and `color` are working similar.
+
+You can also redefine the predefined styles here, if you're not satisfied by the default settings.
+
+Below is a [usage example](#user-defined-style).
+
 ## Examples
 
 ### By Severity Using Markdown Syntax
@@ -339,3 +356,15 @@ printf("Hello World!");
 printf("Hello World!");
 ```
 {{% /notice %}}
+
+#### User-defined Style
+
+Self-defined styles can be [configured](#configuration) in your `hugo.toml` and used for every shortcode, that accepts a `style` parameter.
+
+````
+> [!magic]
+> Maaagic!
+````
+
+> [!magic]
+> Maaagic!

layouts/partials/_relearn/boxStyle.gotmpl

@@ -0,0 +1,35 @@
+{{- $style := lower .style }}
+{{- $set := "" }}
+{{- range site.Params.boxStyle }}
+	{{- if eq (lower .identifier) $style }}
+		{{- $title := or .title (.i18n | T) }}
+		{{- $set = dict "style" $style "title" $title "icon" .icon }}
+		{{- break }}
+	{{- end }}
+{{- end }}
+{{- if not $set }}
+	{{- range (slice
+		(dict "identifier" "caution"   "icon" "hand")
+		(dict "identifier" "important" "icon" "bolt")
+		(dict "identifier" "info"      "icon" "info-circle")
+		(dict "identifier" "note"      "icon" "exclamation-circle")
+		(dict "identifier" "tip"       "icon" "lightbulb")
+		(dict "identifier" "warning"   "icon" "exclamation-triangle")
+	) }}
+		{{- if eq .identifier $style }}
+			{{- $title := .identifier | T }}
+			{{- $set = dict "style" $style "title" $title "icon" .icon }}
+			{{- break }}
+		{{- end }}
+	{{- end }}
+{{- end }}
+{{- if not $set }}
+	{{- $set = dict "style" $style "title" "" "icon" "" }}
+{{- end }}
+{{- if .title }}
+	{{- $set = merge $set (dict "title" .title) }}
+{{- end }}
+{{- if .icon }}
+	{{- $set = merge $set (dict "icon" .icon) }}
+{{- end }}
+{{- return $set }}

layouts/partials/get-theme-variants.hugo

@@ -107,14 +107,43 @@ Chroma auto run:
   {{- end }}
 {{- end }}
 
-{{- $swaggerres := resources.Get "css/swagger.css" }}
+{{- /*
-{{- $cssres := $swaggerres | resources.ExecuteAsTemplate "css/swagger.css" (dict) }}
+- Add box styles to variables and variants
-{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
+*/}}
+{{- with resources.Get "css/variables.css" }}
+  {{- $variablescontent := print ":root {\n" .Content }}
+  {{- range $page.Site.Params.boxStyle }}
+    {{- $identifier := upper .identifier }}
+    {{- $variablescontent = print $variablescontent "\n"
+      "\n    --INTERNAL-BOX-" $identifier "-color: var(--BOX-" $identifier "-color, " .color ");"
+      "\n    --INTERNAL-BOX-" $identifier "-TEXT-color: var(--BOX-" $identifier "-TEXT-color, var(--INTERNAL-BOX-TEXT-color));"
+    }}
+  {{- end }}
+  {{- $variablescontent = print $variablescontent "\n}" }}
+  {{- $cssres := $variablescontent | resources.FromString "css/variables.css" }}
+  {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
+{{- end }}
 
-{{- $variantres := resources.Get "css/variant.css" }}
+{{- with resources.Get "css/variant.css" }}
-{{- $cssres := $variantres | resources.ExecuteAsTemplate "css/variant.css" (dict) }}
+  {{- $assetBusting := partialCached "assetbusting.hugo" . }}
-{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
+  {{- $variantcontent := print `@import "variables.css` $assetBusting `";` "\n\n" .Content }}
+  {{- range $page.Site.Params.boxStyle }}
+    {{- $identifier := upper .identifier }}
+    {{- $identifierl := lower .identifier }}
+    {{- $variantcontent = print $variantcontent
+      "\n.cstyle." $identifierl " {"
+      "\n    --VARIABLE-BOX-color: var(--INTERNAL-BOX-" $identifier "-color);"
+      "\n    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-" $identifier "-TEXT-color);"
+      "\n}\n"
+    }}
+  {{- end }}
+  {{- $cssres := $variantcontent | resources.FromString "css/variant.css" }}
+  {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
+{{- end }}
 
+{{- /*
+- The ugly rest
+*/}}
 {{- $printres := resources.Get "css/print.css" }}
 {{- $cssres := $printres | resources.ExecuteAsTemplate "css/print.css" (dict) }}
 {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
@@ -123,6 +152,10 @@ Chroma auto run:
 {{- $cssres := $formatprintres | resources.ExecuteAsTemplate "css/format-print.css" (dict "themevariant" (index (collections.Where $themevariants "identifier" "relearn-light") 0)) }}
 {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
 
+{{- $swaggerres := resources.Get "css/swagger.css" }}
+{{- $cssres := $swaggerres | resources.ExecuteAsTemplate "css/swagger.css" (dict) }}
+{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
+
 {{- return collections.Where $themevariants "config" true }}
 
 {{- define "partials/get-theme-details.html" }}

layouts/partials/shortcodes/attachments.html

@@ -9,27 +9,9 @@
 {{- if and (not $color) (eq (len $color) 0) }}
   {{- $style = .style | default "transparent" }}
 {{- end }}
-{{- $title := .title }}
+{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
-{{- if not $title }}
+{{- $title := trim ($boxStyle.title | default ("Attachments-label" | T)) " " }}
-  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+{{- $icon := trim ($boxStyle.icon | default "paperclip") " " }}
-  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
-{{- end }}
-{{- $title = trim ($title | default ("Attachments-label" | T)) " " }}
-{{- $icon := .icon | default "" }}
-{{- if and (not $icon) (eq (len $icon) 0) }}
-  {{- $icon = "paperclip" }}
-  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
-  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
-  {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
-  {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
-{{- end }}
-{{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}

layouts/partials/shortcodes/badge.html

@@ -6,26 +6,9 @@
 {{- $color := .color | default "" }}
 {{- $content := .content }}
 {{- $style := .style | default "default" }}
-{{- $title := .title }}
+{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
-{{- if not $title }}
+{{- $title := trim ($boxStyle.title) " " }}
-  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+{{- $icon := trim ($boxStyle.icon) " " }}
-  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
-{{- end }}
-{{- $title = trim $title " " }}
-{{- $icon := .icon | default "" }}
-{{- if and (not $icon) (eq (len $icon) 0) }}
-  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
-  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
-  {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
-  {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
-{{- end }}
-{{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}

layouts/partials/shortcodes/button.html

@@ -30,26 +30,9 @@
 {{- else }}
   {{- $isLink = true }}
 {{- end }}
-{{- $title := .title | default ($content) }}
+{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" (or .title $content) "icon" .icon) }}
-{{- if not $title }}
+{{- $title := trim ($boxStyle.title) " " }}
-  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+{{- $icon := trim ($boxStyle.icon) " " }}
-  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
-{{- end }}
-{{- $title = trim $title " " }}
-{{- $icon := .icon | default "" }}
-{{- if and (not $icon) (eq (len $icon) 0) }}
-  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
-  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
-  {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
-  {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
-{{- end }}
-{{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}

layouts/partials/shortcodes/notice.html

@@ -13,26 +13,9 @@
   {{- $content = printf "<p>\n%s" $content }}
 {{- end }}
 {{- $style := .style | default "default" }}
-{{- $title := .title }}
+{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
-{{- if not $title }}
+{{- $title := trim ($boxStyle.title) " " }}
-  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+{{- $icon := trim ($boxStyle.icon) " " }}
-  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
-{{- end }}
-{{- $title = trim $title " " }}
-{{- $icon := .icon | default "" }}
-{{- if and (not $icon) (eq (len $icon) 0) }}
-  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
-  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
-  {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
-  {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
-{{- end }}
-{{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}

layouts/partials/shortcodes/resources.html

@@ -8,27 +8,9 @@
 {{- if and (not $color) (eq (len $color) 0) }}
   {{- $style = .style | default "transparent" }}
 {{- end }}
-{{- $title := .title }}
+{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
-{{- if not $title }}
+{{- $title := trim ($boxStyle.title | default ("Attachments-label" | T)) " " }}
-  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+{{- $icon := trim ($boxStyle.icon | default "paperclip") " " }}
-  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
-{{- end }}
-{{- $title = trim ($title | default ("Attachments-label" | T)) " " }}
-{{- $icon := .icon | default "" }}
-{{- if and (not $icon) (eq (len $icon) 0) }}
-  {{- $icon = "paperclip" }}
-  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
-  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
-  {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
-  {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
-{{- end }}
-{{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}

layouts/partials/shortcodes/tabs.html

@@ -22,26 +22,9 @@
       {{- $content = printf "<p>\n%s" $content }}
     {{- end }}
     {{- $style := .style | default $style | default (cond (ne $color "") "filled" "initial") }}
-    {{- $title := .title }}
+    {{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
-    {{- if not $title }}
+    {{- $title := trim ($boxStyle.title) " " }}
-      {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+    {{- $icon := trim ($boxStyle.icon) " " }}
-      {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
-      {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-      {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
-      {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
-      {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
-    {{- end }}
-    {{- $title = trim $title " " }}
-    {{- $icon := .icon | default "" }}
-    {{- if and (not $icon) (eq (len $icon) 0) }}
-      {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
-      {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
-      {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-      {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
-      {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
-      {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
-    {{- end }}
-    {{- $icon = trim $icon " " }}
     {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
       {{- $icon = printf "fa-fw fas fa-%s" $icon }}
     {{- end }}
@@ -59,26 +42,9 @@
 {{- end }}
 {{- $color = .color | default "" }}
 {{- $style = .style | default (cond (ne $color "") "filled" "initial") }}
-{{- $title = .title }}
+{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
-{{- if not $title }}
+{{- $title := trim ($boxStyle.title) " " }}
-  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+{{- $icon := trim ($boxStyle.icon) " " }}
-  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
-{{- end }}
-{{- $title = trim $title " " }}
-{{- $icon = .icon | default "" }}
-{{- if and (not $icon) (eq (len $icon) 0) }}
-  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
-  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
-  {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
-  {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
-{{- end }}
-{{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}