expand: use notice internally #953

assets/css/theme-neon.css

@@ -214,23 +214,15 @@ body .anchor {
 
 body .badge,
 body .btn,
-body div.box {
-  box-shadow:
-    0 0 1px rgba(255, 255, 255, 1),
-    0 0 2px rgba(255, 255, 255, 1),
-    0 0 4px rgba(128, 128, 128, 1),
-    0 0 4px var(--VARIABLE-BOX-color);
+body div.box:not(.cstyle.transparent) {
+  box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1), 0 0 4px rgba(128, 128, 128, 1), 0 0 4px var(--VARIABLE-BOX-color);
 }
 
 body .badge > .badge-content,
 body .btn,
 body .btn > *,
-body div.box > .box-label {
-  text-shadow:
-    0 0 1px rgba(255, 255, 255, 1),
-    0 0 2px rgba(255, 255, 255, 1),
-    0 0 4px rgba(128, 128, 128, 1),
-    0 0 4px var(--VARIABLE-BOX-CAPTION-color);
+body div.box:not(.cstyle.transparent) > .box-label {
+  text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1), 0 0 4px rgba(128, 128, 128, 1), 0 0 4px var(--VARIABLE-BOX-CAPTION-color);
 }
 
 body .tab-panel-cstyle:not(.transparent),
@@ -256,7 +248,7 @@ body .btn.cstyle.interactive.transparent > *:focus {
   color: var(--INTERNAL-MAIN-TEXT-color);
 }
 
-body .box.cstyle.transparent {
+body div.box.cstyle.transparent {
   box-shadow: none;
 }
 

assets/css/theme.css

@@ -1518,8 +1518,8 @@ option {
 }
 
 .expand {
-  margin-bottom: 1rem;
-  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
   position: relative;
 }
 
@@ -2762,6 +2762,30 @@ body.notfound #shrug svg {
   width: 15rem;
 }
 
+/* notice box */
+
+div.box.cstyle.transparent {
+  border-width: 0;
+}
+
+div.box.cstyle.transparent > .box-label {
+  margin: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+}
+div.box.expand.cstyle.transparent > .box-label {
+  color: var(--INTERNAL-MAIN-LINK-color);
+}
+
+div.box.cstyle.transparent > .box-spacer {
+  display: none;
+}
+
+div.box.cstyle.transparent > .box-content {
+  margin-top: 0;
+  padding-bottom: 0;
+}
+
 /* color style definitions */
 
 .cstyle {

exampleSite/content/introduction/releasenotes/7/2.en.md

@@ -0,0 +1,13 @@
++++
+disableToc = false
+hidden = true
+title = "Version 7.2"
+type = "releasenotes"
+weight = -1
++++
+
+## 7.2.0.beta (XXXX-XX-XX) {#7-2-0}
+
+### Change
+
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} Due to refactoring, the [`expand` shortcode](shortcodes/expand) and the [`notice` shortcode](shortcodes/notice) with `style=transparent` now generate slightly different margins.

exampleSite/content/shortcodes/expand.en.md

@@ -23,6 +23,14 @@ That's some more text with a footnote.[^someid]
 ## Usage
 
 {{< tabs groupid="shortcode-parameter">}}
+{{% tab title="callout" %}}
+
+````md
+> [!transparent]- Expand me...
+> Thank you!
+````
+
+{{% /tab %}}
 {{% tab title="shortcode" %}}
 
 ````go
@@ -50,7 +58,9 @@ That's some more text with a footnote.[^someid]
 {{% /tab %}}
 {{< /tabs >}}
 
-The [`notice` shortcode](shortcodes/notice) is also capable of displaying expandable/collapsible sections of text but with color options.
+[Extended callout syntax](https://gohugo.io/render-hooks/blockquotes/#extended-syntax) is available in other Markdown parsers like Obsidian and therefore is the recommend syntax for generating portable Markdown.
+
+The [`notice` shortcode](shortcodes/notice) is also capable of displaying expandable/collapsible sections of text but with additional parameter for color and additional icons.
 
 ### Parameter
 

exampleSite/content/shortcodes/notice.en.md

@@ -55,7 +55,7 @@ It is all about the boxes.
 {{% /tab %}}
 {{< /tabs >}}
 
-Callout syntax has limited features as it does not provide all of the below parameter. Nevertheless, it is widely available in other Markdown parsers like with [GitHub alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) or [Obsidian callouts](https://help.obsidian.md/Editing+and+formatting/Callouts#Change+the+title) and therefore is the recommend syntax for generating portable Markdown.
+Callout syntax has limited features as it does not provide all of the below parameter. Nevertheless, it is widely available in other Markdown parsers like [GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) or [Obsidian](https://help.obsidian.md/Editing+and+formatting/Callouts#Change+the+title) and therefore is the recommend syntax for generating portable Markdown.
 
 If you want to display a transparent expandable box without any border, you can also use the [`expand` shortcode](/shortcodes/expand).
 

layouts/partials/shortcodes/expand.html

@@ -3,11 +3,6 @@
   {{- $page = .context }}
   {{- warnf "%q: DEPRECATED parameter 'context' for shortcode 'expand' found, use 'page' instead; see https://mcshelby.github.io/hugo-theme-relearn/introduction/releasenotes/5/#5-18-0" $page.File.Filename }}
 {{- end }}
-{{- $content := trim .content "\n\r\t " }}
-{{- $hasContent := ne (strings.TrimLeft "<p>" $content) "" }}
-{{- if not (hasPrefix $content "<") }}
-  {{- $content = printf "<p>\n%s" $content }}
-{{- end }}
 {{- $title := .title | default (T "Expand-title") }}
 {{- $title = trim $title " " }}
 {{- $expanded := .expanded | default false }}
@@ -18,18 +13,10 @@
 {{- if eq (printf "%T" $expanded) "string" }}
 	{{- $expanded = (eq $expanded "true") }}
 {{- end }}
-{{- $id := cond (or (eq .id nil) (eq .id "")) (partial "_relearn/makeRandomMd5.gotmpl" $page) .id }}
-{{- with $page }}
-  {{- if $hasContent -}}
-<div class="expand">
-  <input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}"{{ if $expanded }} checked{{ end }}>
-  <label class="expand-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> {{ $title | .RenderString }}
-  </label>
-  <div id="R-expandcontent-{{ $id }}" class="expand-content">
-{{ $content | safeHTML }}
-  </div>
-</div>
-  {{- end }}
-{{- end }}
+{{- partial "shortcodes/notice.html" (dict
+  "page"     .page
+  "content"  .content
+  "expanded" $expanded
+  "style"    "transparent"
+  "title"    $title
+) }}

layouts/partials/shortcodes/resources.html

@@ -14,15 +14,11 @@
 {{- 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 "" }}

layouts/partials/version.txt

@@ -1 +1 @@
-7.1.1+575353a9b128563d7d1a3c1fbbbb8e68d859ae47
+7.1.1+21dbabfdb4bb1f5143ed79f24fb620988059f655

layouts/shortcodes/expand.html

@@ -1,10 +1,8 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
-{{- $id := "" }}
 {{- partial "shortcodes/expand.html" (dict
   "page"     .Page
   "content"  .Inner
   "open"     (.Get "open" | default "")
   "expanded" (.Get "expanded" | default (.Get 1))
   "title"    (.Get "title" | default (.Get 0))
-  "id"       $id
 ) }}