From 86fa3c70f20a27f659d28bc62fae197865e616d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Thu, 5 Sep 2024 21:25:52 +0200 Subject: [PATCH] resources: add expanded parameter #908 --- .../content/basics/migration/_index.en.md | 2 + .../content/shortcodes/resources/index.en.md | 25 +++++-- layouts/partials/shortcodes/notice.html | 14 +++- layouts/partials/shortcodes/resources.html | 73 +++++++++++++------ layouts/shortcodes/resources.html | 15 ++-- 5 files changed, 88 insertions(+), 41 deletions(-) diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 82ff00e7f0..a7d0155755 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/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 %}} The [`resources` shortcode](shortcodes/resources) has a new parameter `expanded` to make the resource list collapsible. + --- ## 6.3.0 (2024-09-03) {#630} diff --git a/exampleSite/content/shortcodes/resources/index.en.md b/exampleSite/content/shortcodes/resources/index.en.md index c52da67d61..7891267383 100644 --- a/exampleSite/content/shortcodes/resources/index.en.md +++ b/exampleSite/content/shortcodes/resources/index.en.md @@ -38,14 +38,15 @@ Multilanguage features are not supported directly by the shortcode but rely on H ### Parameter -| Name | Default | Notes | -|-------------|-----------------|-------------| -| **style** | `transparent` | The style scheme used for the box.

- 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` | -| **color** | see notes | 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 | -| **title** | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: `Resources`

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | -| **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: `paperclip`

If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) | -| **sort** | `asc` | Sorting the output in `asc`ending or `desc`ending order. | -| **pattern** | `.*` | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the resources [by name](https://gohugo.io/methods/resource/name/). For example:

- to match a file suffix of 'jpg', use `.*\.jpg` (not `*.\.jpg`)
- to match file names ending in `jpg` or `png`, use `.*\.(jpg\|png)` | +| Name | Default | Notes | +|-----------------------|-----------------|-------------| +| **style** | `transparent` | The style scheme used for the box.

- 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` | +| **color** | see notes | 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 | +| **title** | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: `Resources`

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | +| **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: `paperclip`

If you want no icon, you have to set this parameter to `" "` (a non empty string filled with spaces) | +| **expanded** | _<empty>_ | Whether to draw an expander and how the resource list is displayed.

- _<empty>_: no expander is drawn and the resource list is permanently shown
- `true`: the expander is drawn and the resource list is initially shown
- `false`: the expander is drawn and the resource list is initially hidden | +| **sort** | `asc` | Sorting the output in `asc`ending or `desc`ending order. | +| **pattern** | `.*` | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the resources [by name](https://gohugo.io/methods/resource/name/). For example:

- to match a file suffix of 'jpg', use `.*\.jpg` (not `*.\.jpg`)
- to match file names ending in `jpg` or `png`, use `.*\.(jpg\|png)` | ## Examples @@ -73,6 +74,14 @@ Multilanguage features are not supported directly by the shortcode but rely on H {{% resources color="fuchsia" icon="fa-fw fab fa-hackerrank" /%}} +### Expander with Initially Hidden Resource List + +````go +{{%/* resources style="primary" expanded="false" /*/%}} +```` + +{{% resources style="primary" expanded="false" /%}} + ### Style, Color, Title and Icons For further examples for **style**, **color**, **title** and **icon**, see the [`notice` shortcode](shortcodes/notice) documentation. The parameter are working the same way for both shortcodes, besides having different defaults. diff --git a/layouts/partials/shortcodes/notice.html b/layouts/partials/shortcodes/notice.html index 190891f460..e7a3b3e290 100644 --- a/layouts/partials/shortcodes/notice.html +++ b/layouts/partials/shortcodes/notice.html @@ -3,6 +3,9 @@ {{- $page = .context }} {{- warnf "%q: DEPRECATED parameter 'context' for shortcode 'notice' found, use 'page' instead; see https://mcshelby.github.io/hugo-theme-relearn/basics/migration#5180" $page.File.Filename }} {{- end }} +{{- $class := .class | default "notices" }} +{{- $containerstyle := .containerstyle | default "div" }} +{{- $containerclass := .containerclass | default slice | append "box-content" }} {{- $color := .color | default "" }} {{- $content := trim .content "\n\r\t " }} {{- $hasContent := ne (strings.TrimLeft "

" $content) "" }} @@ -46,9 +49,14 @@ {{- end }} {{- end }} {{- $id := cond (or (eq .id nil) (eq .id "")) (partial "make-random-md5.hugo" $page) .id }} +{{- $idattribute := "" }} +{{- if $expander }} + {{- $containerclass = $containerclass | append "expand-content" }} + {{- $idattribute = printf ` id="R-expandcontent-%s"` $id }} +{{- end }} {{- with $page }} {{- if or $icon $title $hasContent -}} -

+
{{- if $expander }}
{{- end }} {{- if $hasContent }} - +{{ printf " <%s%s class=\"%s\">" $containerstyle $idattribute (delimit $containerclass " ") | safeHTML }} {{ $content | safeHTML }} -
+{{ printf " " $containerstyle | safeHTML }} {{- end }} {{- end }} diff --git a/layouts/partials/shortcodes/resources.html b/layouts/partials/shortcodes/resources.html index 9d87424899..73cdd9d65c 100644 --- a/layouts/partials/shortcodes/resources.html +++ b/layouts/partials/shortcodes/resources.html @@ -32,31 +32,58 @@ {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} {{- $icon = printf "fa-fw fas fa-%s" $icon }} {{- end }} +{{- $expander := false }} +{{- $expanded := .expanded | default "" }} +{{- if eq (printf "%T" $expanded) "string" }} + {{- if ne (trim $expanded " ") "" }} + {{- $expander = true }} + {{- $expanded = (eq $expanded "true") }} + {{- end }} +{{- else }} + {{- $expander = true }} +{{- end }} {{- $sort := .sort | default "asc" }} {{- $pattern := .pattern | default "" }} -{{- with $page }} -{{- if eq .BundleType "" }} +{{- if eq $page.BundleType "" }} {{- warnf "%q: UNSUPPORTED usage of 'resources' shortcode found, use a page bundle instead; see https://mcshelby.github.io/hugo-theme-relearn/shortcodes/resources" $page.File.Filename }} -{{- end -}} -
-
{{ if $icon }}{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
- -
+{{- $content := partial "inline/resource-list" (dict + "page" $page + "sort" $sort + "pattern" $pattern +) }} +{{- partial "shortcodes/notice.html" (dict + "page" $page + "class" "attachments" + "containerstyle" "ul" + "containerclass" (slice "attachments-files") + "color" $color + "content" $content + "expanded" $expanded + "icon" $icon + "style" $style + "title" $title +) }} + +{{- define "partials/inline/resource-list" }} + {{- $sort := .sort }} + {{- $pattern := .pattern }} + {{- with .page }} + {{- range sort .Resources "Name" $sort }} + {{- if findRE $pattern .Name }} + {{- $size := len .Content }} + {{- $unit := "Byte-symbol" }} + {{- if ge $size 1024 }} + {{- $size = div $size 1024 }} + {{- $unit = "Kilobyte-symbol" }} + {{- end }} + {{- if ge $size 1024 }} + {{- $size = div $size 1024 }} + {{- $unit = "Megabyte-symbol" }} + {{- end }} + {{- $unitsymbol := $unit | T }} +
  • {{.Name}} ({{$size}} {{$unitsymbol}})
    • + {{- end }} + {{- end }} + {{- end }} {{- end }} \ No newline at end of file diff --git a/layouts/shortcodes/resources.html b/layouts/shortcodes/resources.html index 962e743bf8..8f1b60112d 100644 --- a/layouts/shortcodes/resources.html +++ b/layouts/shortcodes/resources.html @@ -1,11 +1,12 @@ {{- $_hugo_config := `{ "version": 1 }` }} {{- $unused := .Inner }} {{- partial "shortcodes/resources.html" (dict - "page" .Page - "color" (.Get "color") - "icon" (.Get "icon") - "pattern" (.Get "pattern") - "style" (.Get "style") - "sort" (.Get "sort") - "title" (.Get "title") + "page" .Page + "color" (.Get "color") + "expanded" (.Get "expanded") + "icon" (.Get "icon") + "pattern" (.Get "pattern") + "style" (.Get "style") + "sort" (.Get "sort") + "title" (.Get "title") ) }} \ No newline at end of file