notice: add expander to box title #901

assets/css/variant.css

@@ -330,16 +330,16 @@ pre:not(.mermaid) .copy-to-clipboard-button:hover {
     color: var(--INTERNAL-CODE-BLOCK-BG-color);
 }
 
-.expand > label {
+.expand:not(.box) > label {
     color: var(--INTERNAL-MAIN-LINK-color);
 }
 
-.expand > label:hover,
+.expand:not(.box) > label:hover,
-.expand > label:active,
+.expand:not(.box) > label:active,
-.expand > label:focus,
+.expand:not(.box) > label:focus,
-.expand > input:hover + label,
+.expand:not(.box) > input:hover + label,
-.expand > input:active + label,
+.expand:not(.box) > input:active + label,
-.expand > input:focus + label{
+.expand:not(.box) > input:focus + label{
     color: var(--INTERNAL-MAIN-LINK-HOVER-color);
 }
 

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

@@ -18,6 +18,14 @@ This document shows you what's new in the latest release and flags it with one o
 
 ---
 
+## 6.3.0.beta (XXXX-XX-XX) {#630}
+
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} If the content for the [`notice` shortcode](shortcodes/notice) is empty, now only the title bar will be displayed. Previously an empty content box was displayed.
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`notice` shortcode](shortcodes/notice) has a new parameter `expanded` to make the content collapsible.
+
+---
+
 ## 6.2.0 (2024-08-26) {#620}
 
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} The heading anchor links are extended in functionality.

exampleSite/content/shortcodes/notice.en.md

@@ -60,11 +60,12 @@ It is all about the boxes.
 ### Parameter
 
 | Name                  | Position | Default         | Notes       |
-|-----------|----------|-----------|-------------|
+|-----------------------|----------|-----------------|-------------|
 | **style**             | 1        | `default`       | The style scheme used for the box.<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` |
 | **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.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
 | **title**             | 2        | 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.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | **icon**              | 3        | 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.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+| **expanded**          |          | _&lt;empty&gt;_ | Whether to draw an expander and how the content is displayed.<br><br>- _&lt;empty&gt;_: the content is shown but not collapsible<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
@@ -82,228 +83,130 @@ This example reflects the default configuration also used if you don't set anyth
 
 ## Examples
 
-### By Severity
+### By Severity Using Markdown Syntax
 
-#### Caution with markup
+````md
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
 
-````go
+> [!IMPORTANT]
-{{%/* notice style="caution" */%}}
+> Key information users need to know to achieve their goal.
-An **caution** disclaimer
 
-You can add standard markdown syntax:
+> [!INFO]
+> Information that users <ins>_might_</ins> find interesting.
 
-- multiple paragraphs
+> [!NOTE]
-- bullet point lists
+> Useful information that users should know, even when skimming content.
-- _emphasized_, **bold** and even ***bold emphasized*** text
-- [links](https://example.com)
-- etc.
 
-```plaintext
+> [!TIP]
-...and even source code
+> Helpful advice for doing things better or more easily.
-```
 
-> the possibilities are endless (almost - including other shortcodes may or may not work)
+> [!WARNING]
-{{%/* /notice */%}}
+> Urgent info that needs immediate user attention to avoid problems.
 ````
 
-{{% notice style="caution" %}}
+> [!CAUTION]
-An **caution** disclaimer
+> Advises about risks or negative outcomes of certain actions.
 
-You can add standard markdown syntax:
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
 
-- multiple paragraphs
+> [!INFO]
-- bullet point lists
+> Information that users <ins>_might_</ins> find interesting.
-- _emphasized_, **bold** and even **_bold emphasized_** text
-- [links](https://example.com)
-- etc.
 
-```plaintext
+> [!NOTE]
-...and even source code
+> Useful information that users should know, even when skimming content.
-```
 
-> the possibilities are endless (almost - including other shortcodes may or may not work)
+> [!TIP]
-{{% /notice %}}
+> Helpful advice for doing things better or more easily.
 
-#### Important
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
 
-````go
+### By Brand Colors with Title and Icon Variantion
-{{%/* notice style="important" */%}}
-A **important** disclaimer
-{{%/* /notice */%}}
-````
-
-{{% notice style="important" %}}
-A **important** disclaimer
-{{% /notice %}}
-
-#### Info
-
-````go
-{{%/* notice style="info" */%}}
-A **information** disclaimer
-{{%/* /notice */%}}
-````
-
-{{% notice style="info" %}}
-A **information** disclaimer
-{{% /notice %}}
-
-#### Note
-
-````go
-{{%/* notice style="note" */%}}
-A **notice** disclaimer
-{{%/* /notice */%}}
-````
-
-{{% notice style="note" %}}
-A **notice** disclaimer
-{{% /notice %}}
-
-#### Tip
-
-````go
-{{%/* notice style="tip" */%}}
-A **tip** disclaimer
-{{%/* /notice */%}}
-````
-
-{{% notice style="tip" %}}
-A **tip** disclaimer
-{{% /notice %}}
-
-#### Warning
-
-````go
-{{%/* notice style="warning" */%}}
-A **warning** disclaimer
-{{%/* /notice */%}}
-````
-
-{{% notice style="warning" %}}
-A **warning** disclaimer
-{{% /notice %}}
-
-#### Warning with Non-Default Title and Icon
-
-````go
-{{%/* notice style="warning" title="Here are dragons" icon="dragon" */%}}
-A **warning** disclaimer
-{{%/* /notice */%}}
-````
-
-{{% notice style="warning" title="Here are dragons" icon="dragon" %}}
-A **warning** disclaimer
-{{% /notice %}}
-
-#### Warning without a Title and Icon
-
-````go
-{{%/* notice style="warning" title=" " icon=" " */%}}
-A **warning** disclaimer
-{{%/* /notice */%}}
-````
-
-{{% notice style="warning" title=" " icon=" " %}}
-A **warning** disclaimer
-{{% /notice %}}
-
-### By Brand Colors
-
-#### Primary with Title only
 
 ````go
 {{%/* notice style="primary" title="Primary" */%}}
 A **primary** disclaimer
 {{%/* /notice */%}}
+
+{{%/* notice style="secondary" icon="stopwatch" */%}}
+A **secondary** disclaimer
+{{%/* /notice */%}}
+
+{{%/* notice style="accent" */%}}
+An **accent** disclaimer
+{{%/* /notice */%}}
 ````
 
 {{% notice style="primary" title="Primary" %}}
 A **primary** disclaimer
 {{% /notice %}}
 
-#### Secondary with Icon only
-
-````go
-{{%/* notice style="secondary" icon="stopwatch" */%}}
-A **secondary** disclaimer
-{{%/* /notice */%}}
-````
-
 {{% notice style="secondary" icon="stopwatch" %}}
 A **secondary** disclaimer
 {{% /notice %}}
 
-#### Accent
-
-````go
-{{%/* notice style="accent" */%}}
-An **accent** disclaimer
-{{%/* /notice */%}}
-````
-
 {{% notice style="accent" %}}
 An **accent** disclaimer
 {{% /notice %}}
 
-### By Color
+### By Color with Title and Icon Variantion
-
-#### Blue without a Title and Icon
 
 ````go
 {{%/* notice style="blue" */%}}
 A **blue** disclaimer
 {{%/* /notice */%}}
+
+{{%/* notice style="cyan" title="Cyan" */%}}
+A **cyan** disclaimer
+{{%/* /notice */%}}
+
+{{%/* notice style="green" title="Green" */%}}
+A **green** disclaimer
+{{%/* /notice */%}}
+
+{{%/* notice style="grey" icon="bug" */%}}
+A **grey** disclaimer
+{{%/* /notice */%}}
+
+{{%/* notice style="magenta" title="Magenta" */%}}
+A **magenta** disclaimer
+{{%/* /notice */%}}
+
+{{%/* notice style="orange" title="Orange" icon="bug" */%}}
+A **orange** disclaimer
+{{%/* /notice */%}}
+
+{{%/* notice style="red" */%}}
+A **red** disclaimer
+{{%/* /notice */%}}
 ````
 
 {{% notice style="blue" %}}
 A **blue** disclaimer
 {{% /notice %}}
 
-#### Green with Title only
+{{% notice style="cyan" title="Cyan" %}}
-
+A **cyan** disclaimer
-````go
+{{% /notice %}}
-{{%/* notice style="green" title="Green" */%}}
-A **green** disclaimer
-{{%/* /notice */%}}
-````
 
 {{% notice style="green" title="Green" %}}
 A **green** disclaimer
 {{% /notice %}}
 
-#### Grey with Icon only
-
-````go
-{{%/* notice style="grey" icon="bug" */%}}
-A **grey** disclaimer
-{{%/* /notice */%}}
-````
-
 {{% notice style="grey" icon="bug" %}}
 A **grey** disclaimer
 {{% /notice %}}
 
-#### Orange with Title and Icon
+{{% notice style="magenta" title="Magenta" %}}
-
+A **magenta** disclaimer
-````go
+{{% /notice %}}
-{{%/* notice style="orange" title="Orange" icon="bug" */%}}
-A **orange** disclaimer
-{{%/* /notice */%}}
-````
 
 {{% notice style="orange" title="Orange" icon="bug" %}}
 A **orange** disclaimer
 {{% /notice %}}
 
-#### Red without a Title and Icon
-
-````go
-{{%/* notice style="red" */%}}
-A **red** disclaimer
-{{%/* /notice */%}}
-````
-
 {{% notice style="red" %}}
 A **red** disclaimer
 {{% /notice %}}
@@ -334,14 +237,41 @@ Some serious information.
 Some serious information.
 {{% /notice %}}
 
-### With User-Defined Color, Font Awesome Brand Icon and Markdown Title
+### Various Features
+
+#### With User-Defined Color, Font Awesome Brand Icon and Markdown in Title and Content
 
 ````go
-{{%/* notice color="fuchsia" title="**Hugo**" icon="fa-fw fab fa-hackerrank" */%}}
+{{% include "shortcodes/include/INCLUDE_ME.md" %}}
-Victor? Is it you?
+````
+
+{{% notice color="fuchsia" title="**Hugo** is _awesome_" icon="fa-fw fab fa-hackerrank" %}}
+{{% include "shortcodes/include/INCLUDE_ME.md" %}}
+{{% /notice %}}
+
+#### Expandable Content Area
+
+````go
+{{%/* notice style="primary" title="Expand me..." expanded="true" */%}}
+No need to press you!
 {{%/* /notice */%}}
 ````
 
-{{% notice color="fuchsia" title="**Hugo**" icon="fa-fw fab fa-hackerrank" %}}
+{{% notice style="primary" title="Expand me..." expanded="true" %}}
-Victor? Is it you?
+No need to press you!
+{{% /notice %}}
+
+````go
+{{%/* notice style="primary" title="Expand me..." expanded="false" */%}}
+Thank you!
+{{%/* /notice */%}}
+````
+
+{{% notice style="primary" title="Expand me..." expanded="false" %}}
+Thank you!
+{{% /notice %}}
+
+#### No Content
+
+{{% notice style="accent" title="Just a bar" %}}
 {{% /notice %}}

layouts/partials/shortcodes/notice.html

@@ -5,6 +5,7 @@
 {{- end }}
 {{- $color := .color | default "" }}
 {{- $content := .content }}
+{{- $hasContent := ne (trim $content " " ) "" }}
 {{- $style := .style | default "default" }}
 {{- $title := .title }}
 {{- if not $title }}
@@ -29,11 +30,37 @@
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}
+{{- $expander := false }}
+{{- $expanded := .expanded | default "" }}
+{{- if $hasContent }}
+  {{- if eq (printf "%T" $expanded) "string" }}
+    {{- if ne (trim $expanded " ") "" }}
+      {{- $expander = true }}
+      {{- $expanded = (eq $expanded "true") }}
+    {{- end }}
+  {{- else }}
+    {{- $expander = true }}
+  {{- end }}
+{{- end }}
+{{- $id := cond (or (eq .id nil) (eq .id "")) (partial "make-random-md5.hugo" $page) .id }}
 {{- with $page }}
-<div class="box notices cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
+<div class="{{ if $expander }}expand {{ end }}box notices cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
-  <div class="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}</div>
+  {{- if $expander }}
-  <div class="box-content">
+  <input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}" {{ if $expanded }} checked{{ end }}>
-{{ if ne "<" (substr (strings.TrimLeft " \n\r\t" $content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
+  <label class="expand-label box-label" for="R-expand-{{ $id }}">
-{{ $content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
+    <i class="expander-icon fa-fw fas fa-chevron-down"></i>
+    <i class="expander-icon fa-fw fas fa-chevron-right"></i> {{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
+  </label>
+  <div class="box-spacer"></div>
+  {{- else }}
+  <div class="box-label">
+    {{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
+  </div>
+  {{- end }}
+  {{- if $hasContent }}
+  <div{{ if $expander }} id="R-expandcontent-{{ $id }}"{{ end }} class="{{ if $expander }}expand-content {{ end }}box-content">
+{{ if ne "<" (substr (strings.TrimLeft " \n\r\t" $content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
+{{ $content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
+  {{- end }}
 </div>
 {{- end }}

layouts/shortcodes/notice.html

@@ -3,6 +3,7 @@
   "page"     .Page
   "color"    (.Get "color")
   "content"  .Inner
+  "expanded" (.Get "expanded")
   "icon"     (.Get "icon" | default (.Get 2))
   "style"    (.Get "style" | default (.Get 0))
   "title"    (.Get "title" | default (.Get 1))

static/css/theme.css

@@ -710,7 +710,9 @@ div.box {
 
 div.box > .box-label {
     font-weight: 500;
-    padding: .2rem .6rem;
+    margin-left: .6rem;
+    margin-right: .6rem;
+    padding: .2rem 0;
 }
 
 div.box > .box-content {
@@ -732,8 +734,8 @@ p:empty {
 #R-body table td > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
 #R-body div.box > .box-content > :nth-child(1 of :not(:empty)),
 #R-body div.box > .box-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)),
+#R-body div.expand > .expand-content > :nth-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
+#R-body div.expand > .expand-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
 #R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)),
 #R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) {
     margin-top: 0;
@@ -748,9 +750,9 @@ p:empty {
 #R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)),
 #R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
 #R-body div.box > .box-content > div:last-child pre:not(.mermaid),
-#R-body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)),
+#R-body div.expand > .expand-content > :nth-last-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
+#R-body div.expand > .expand-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content-text > div:last-child pre:not(.mermaid),
+#R-body div.expand > .expand-content > div:last-child pre:not(.mermaid),
 #R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)),
 #R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
 #R-body div.tab-content > .tab-content-text > div:last-child pre:not(.mermaid) {
@@ -1390,8 +1392,6 @@ option {
     display: inline;
     font-weight: 300;
     inset-inline-start: 0;
-    line-height: 1.1;
-    margin-top: .2rem;
     position: absolute;
 }
 
@@ -1401,7 +1401,7 @@ option {
     text-decoration: underline;
 }
 
-.expand > label > .fas {
+.expand > label > .expander-icon {
     font-size: .8rem;
     width: .6rem;
 }
@@ -1410,8 +1410,16 @@ option {
     margin-inline-start: 1rem;
     margin-top: .5rem;
 }
+.box.expand > .expand-content {
+    margin-inline-start: 0;
+    margin-top: .4rem;
+}
+.box.expand > .box-spacer {
+    margin-bottom: .4rem;
+}
+
 /* closed expander */
-.expand > input + label + div {
+.expand > input + label ~ .expand-content {
     display: none;
 }
 
@@ -1423,7 +1431,7 @@ option {
 }
 
 /* open expander */
-.expand > input:checked + label + div {
+.expand > input:checked + label ~ .expand-content {
 	display: block;
 }