nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

notice: support user defined box styles #913

Browse source
This commit is contained in:
Sören Weber 2024-09-12 07:55:24 +02:00
parent 5d7bdfcb33
commit 70e51b0c26
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
13 changed files with 138 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/css/variables.css → assets/css/variables.css
View file

@ -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);
}

3
assets/css/variant.css
View file

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

12
exampleSite/config/_default/params.toml
View file

@ -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.

2
exampleSite/content/basics/migration/_index.en.md
View file

@ -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.
---

29
exampleSite/content/shortcodes/notice.en.md
View file

@ -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!

35
layouts/partials/_relearn/boxStyle.gotmpl Normal file
View file

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

41
layouts/partials/get-theme-variants.hugo
View file

@ -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
*/}}
{{- 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" }}
{{- $cssres := $variantres | resources.ExecuteAsTemplate "css/variant.css" (dict) }}
{{- with resources.Get "css/variant.css" }}
{{- $assetBusting := partialCached "assetbusting.hugo" . }}
{{- $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" }}

24
layouts/partials/shortcodes/attachments.html
View file

@ -9,27 +9,9 @@
{{- if and (not $color) (eq (len $color) 0) }}
{{- $style = .style | default "transparent" }}
{{- end }}
{{- $title := .title }}
{{- if not $title }}
{{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
{{- 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 " " }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
{{- $title := trim ($boxStyle.title | default ("Attachments-label" | T)) " " }}
{{- $icon := trim ($boxStyle.icon | default "paperclip") " " }}
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
{{- $icon = printf "fa-fw fas fa-%s" $icon }}
{{- end }}

23
layouts/partials/shortcodes/badge.html
View file

@ -6,26 +6,9 @@
{{- $color := .color | default "" }}
{{- $content := .content }}
{{- $style := .style | default "default" }}
{{- $title := .title }}
{{- if not $title }}
{{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
{{- 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 " " }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
{{- $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 }}

23
layouts/partials/shortcodes/button.html
View file

@ -30,26 +30,9 @@
{{- else }}
{{- $isLink = true }}
{{- end }}
{{- $title := .title | default ($content) }}
{{- if not $title }}
{{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
{{- 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 " " }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" (or .title $content) "icon" .icon) }}
{{- $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 }}

23
layouts/partials/shortcodes/notice.html
View file

@ -13,26 +13,9 @@
{{- $content = printf "<p>\n%s" $content }}
{{- end }}
{{- $style := .style | default "default" }}
{{- $title := .title }}
{{- if not $title }}
{{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
{{- 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 " " }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
{{- $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 }}

24
layouts/partials/shortcodes/resources.html
View file

@ -8,27 +8,9 @@
{{- if and (not $color) (eq (len $color) 0) }}
{{- $style = .style | default "transparent" }}
{{- end }}
{{- $title := .title }}
{{- if not $title }}
{{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
{{- 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 " " }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
{{- $title := trim ($boxStyle.title | default ("Attachments-label" | T)) " " }}
{{- $icon := trim ($boxStyle.icon | default "paperclip") " " }}
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
{{- $icon = printf "fa-fw fas fa-%s" $icon }}
{{- end }}

46
layouts/partials/shortcodes/tabs.html
View file

@ -22,26 +22,9 @@
{{- $content = printf "<p>\n%s" $content }}
{{- end }}
{{- $style := .style | default $style | default (cond (ne $color "") "filled" "initial") }}
{{- $title := .title }}
{{- if not $title }}
{{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
{{- 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 " " }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
{{- $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 }}
@ -59,26 +42,9 @@
{{- end }}
{{- $color = .color | default "" }}
{{- $style = .style | default (cond (ne $color "") "filled" "initial") }}
{{- $title = .title }}
{{- if not $title }}
{{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
{{- 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 " " }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
{{- $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 }}