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

notice: add expander to box title #901

Browse source
This commit is contained in:
Sören Weber 2024-09-01 13:56:39 +02:00
parent 7064ca4ef8
commit 67fb8b987f
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
6 changed files with 176 additions and 202 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
assets/css/variant.css
View file

@ -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 > label:active,
.expand > label:focus,
.expand > input:hover + label,
.expand > input:active + label,
.expand > input:focus + label{
.expand:not(.box) > label:hover,
.expand:not(.box) > label:active,
.expand:not(.box) > label:focus,
.expand:not(.box) > input:hover + label,
.expand:not(.box) > input:active + label,
.expand:not(.box) > input:focus + label{
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}

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

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

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

@ -59,12 +59,13 @@ 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) |
| 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
{{%/* notice style="caution" */%}}
An **caution** disclaimer
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
You can add standard markdown syntax:
> [!INFO]
> Information that users <ins>_might_</ins> find interesting.
- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com)
- etc.
> [!NOTE]
> Useful information that users should know, even when skimming content.
```plaintext
...and even source code
```
> [!TIP]
> Helpful advice for doing things better or more easily.
> the possibilities are endless (almost - including other shortcodes may or may not work)
{{%/* /notice */%}}
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
````
{{% notice style="caution" %}}
An **caution** disclaimer
> [!CAUTION]
> 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
- bullet point lists
- _emphasized_, **bold** and even **_bold emphasized_** text
- [links](https://example.com)
- etc.
> [!INFO]
> Information that users <ins>_might_</ins> find interesting.
```plaintext
...and even source code
```
> [!NOTE]
> Useful information that users should know, even when skimming content.
> the possibilities are endless (almost - including other shortcodes may or may not work)
{{% /notice %}}
> [!TIP]
> Helpful advice for doing things better or more easily.
#### Important
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
````go
{{%/* 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
### By Brand Colors with Title and Icon Variantion
````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
#### Blue without a Title and Icon
### By Color with Title and Icon Variantion
````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
````go
{{%/* notice style="green" title="Green" */%}}
A **green** disclaimer
{{%/* /notice */%}}
````
{{% notice style="cyan" title="Cyan" %}}
A **cyan** 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
````go
{{%/* notice style="orange" title="Orange" icon="bug" */%}}
A **orange** disclaimer
{{%/* /notice */%}}
````
{{% notice style="magenta" title="Magenta" %}}
A **magenta** 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" */%}}
Victor? Is it you?
{{% include "shortcodes/include/INCLUDE_ME.md" %}}
````
{{% 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" %}}
Victor? Is it you?
{{% notice style="primary" title="Expand me..." expanded="true" %}}
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 %}}

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

@ -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="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}</div>
<div class="box-content">
<div class="{{ if $expander }}expand {{ end }}box notices cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
{{- if $expander }}
<input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}" {{ if $expanded }} checked{{ end }}>
<label class="expand-label box-label" for="R-expand-{{ $id }}">
<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 }}

13
layouts/shortcodes/notice.html
View file

@ -1,9 +1,10 @@
{{- $_hugo_config := `{ "version": 1 }` }}
{{- partial "shortcodes/notice.html" (dict
"page" .Page
"color" (.Get "color")
"content" .Inner
"icon" (.Get "icon" | default (.Get 2))
"style" (.Get "style" | default (.Get 0))
"title" (.Get "title" | default (.Get 1))
"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))
) }}

30
static/css/theme.css
View file

@ -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-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)),
#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-text > :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 > :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 > 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;
}