tpl/tplimpl: Update details shortcode - hugo - [fork] hugo port for 9front
HTML git clone git@git.drkhsh.at/hugo.git
DIR Log
DIR Files
DIR Refs
DIR Submodules
DIR README
DIR LICENSE
---
DIR commit 1e34e5b26d12e470473064b2825f9bbaa2d66c36
DIR parent 641d2616c71dfff4afa5ab09711c5b45a2a18131
HTML Author: Joe Mooring <joe.mooring@veriphor.com>
Date: Fri, 13 Dec 2024 03:25:10 -0800
tpl/tplimpl: Update details shortcode
- Remove localization of default summary value
- Add title attribute
- Reformat to be consistent with other embedded templates
- Simplify and improve integration test
- Update documentation
Diffstat:
M docs/content/en/content-management… | 32 ++++++++++++++++++++-----------
M tpl/tplimpl/embedded/templates/sho… | 82 +++++++++++++++++--------------
M tpl/tplimpl/tplimpl_integration_te… | 124 ++++++++-----------------------
3 files changed, 94 insertions(+), 144 deletions(-)
---
DIR diff --git a/docs/content/en/content-management/shortcodes.md b/docs/content/en/content-management/shortcodes.md
@@ -101,32 +101,42 @@ Although you can call this shortcode using the `{{</* */>}}` notation, computati
{{% note %}}
To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-This may be useful if you are wanting access to more global HTML attributes.
-
[source code]: {{% eturl details %}}
{{% /note %}}
-Use the `details` shortcode to generate a collapsible details HTML element. For example:
+Use the `details` shortcode to create a `details` HTML element. For example:
```text
-{{</* details summary="Custom Summary Text" */>}}
-Showing custom `summary` text.
+{{</* details summary="See the details" */>}}
+This is a **bold** word.
{{</* /details */>}}
```
-Additional examples can be found in the source code. The `details` shortcode can use the following named arguments:
+Hugo renders this to:
+
+```html
+<details>
+ <summary>See the details</summary>
+ <p>This is a <strong>bold</strong> word.</p>
+</details>
+```
+
+The details shortcode accepts these named arguments:
summary
-: (`string`) Optional. Specifies the content of the child summary element. Default is "Details"
+: (`string`) The content of the child `summary` element rendered from Markdown to HTML. Default is `Details`.
open
-: (`bool`) Optional. Whether to initially display the contents of the details element. Default is `false`.
+: (`bool`) Whether to initially display the content of the `details` element. Default is `false`.
+
+class
+: (`string`) The value of the element's `class` attribute.
name
-: (`string`) Optional. The value of the element's name attribute.
+: (`string`) The value of the element's `name` attribute.
-class
-: (`string`) Optional. The value of the element's class attribute.
+title
+: (`string`) The value of the element's `title` attribute.
### figure
DIR diff --git a/tpl/tplimpl/embedded/templates/shortcodes/details.html b/tpl/tplimpl/embedded/templates/shortcodes/details.html
@@ -1,68 +1,75 @@
{{- /*
Renders an HTML details element.
-@param {string} [summary] The content of the child summary element.
-@param {bool} [open=false] Whether to initially display the contents of the details element.
@param {string} [class] The value of the element's class attribute.
@param {string} [name] The value of the element's name attribute.
+@param {string} [summary] The content of the child summary element.
+@param {string} [title] The value of the element's title attribute.
+@param {bool} [open=false] Whether to initially display the content of the details element.
@reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
@examples
- {{< details >}}
- A basic collapsible section.
- {{< /details >}}
+ {{< details >}}
+ A basic collapsible section.
+ {{< /details >}}
- {{< details summary="Custom Summary Text" >}}
- Showing custom `summary` text.
- {{< /details >}}
+ {{< details summary="Custom Summary Text" >}}
+ Showing custom `summary` text.
+ {{< /details >}}
- {{< details summary="Open Details" open=true >}}
- Contents displayed initially by using `open`.
- {{< /details >}}
+ {{< details summary="Open Details" open=true >}}
+ Contents displayed initially by using `open`.
+ {{< /details >}}
- {{< details summary="Styled Content" class="my-custom-class" >}}
- Content can be styled with CSS by specifying a `class`.
+ {{< details summary="Styled Content" class="my-custom-class" >}}
+ Content can be styled with CSS by specifying a `class`.
- Target details element:
+ Target details element:
- ```css
- details.my-custom-class { }
- ```
+ ```css
+ details.my-custom-class { }
+ ```
- Target summary element:
+ Target summary element:
- ```css
- details.my-custom-class > summary > * { }
- ```
+ ```css
+ details.my-custom-class > summary > * { }
+ ```
- Target inner content:
+ Target inner content:
- ```css
- details.my-custom-class > :not(summary) { }
- ```
- {{< /details >}}
+ ```css
+ details.my-custom-class > :not(summary) { }
+ ```
+ {{< /details >}}
- {{< details summary="Grouped Details" name="my-details" >}}
- Specifying a `name` allows elements to be connected, with only one able to be open at a time.
- {{< /details >}}
+ {{< details summary="Grouped Details" name="my-details" >}}
+ Specifying a `name` allows elements to be connected, with only one able to be open at a time.
+ {{< /details >}}
*/}}
{{- /* Get arguments. */}}
-{{- $summary := or (.Get "summary") (T "shortcodes.details") "Details" }}
{{- $class := or (.Get "class") "" }}
{{- $name := or (.Get "name") "" }}
+{{- $summary := or (.Get "summary") "Details" }}
+{{- $title := or (.Get "title") "" }}
{{- $open := false }}
{{- if in (slice "false" false 0) (.Get "open") }}
- {{- $open = false }}
-{{- else if in (slice "true" true 1) (.Get "open")}}
- {{- $open = true }}
+ {{- $open = false }}
+{{- else if in (slice "true" true 1) (.Get "open") }}
+ {{- $open = true }}
{{- end }}
{{- /* Render. */}}
-<details{{- if $open }} open{{ end }}{{- if $name }} name="{{ $name }}"{{- end }}{{- if $class }} class="{{ $class }}"{{- end }}>
- <summary>{{ $summary | .Page.RenderString }}</summary>
- {{ .Inner | .Page.RenderString (dict "display" "block") -}}
-</details>
-\ No newline at end of file
+<details
+ {{- with $class }} class="{{ . }}" {{- end }}
+ {{- with $name }} name="{{ . }}" {{- end }}
+ {{- with $open }} open {{- end }}
+ {{- with $title }} class="{{ . }}" {{- end -}}
+>
+ <summary>{{ $summary | .Page.RenderString }}</summary>
+ {{ .Inner | .Page.RenderString (dict "display" "block") -}}
+</details>
DIR diff --git a/tpl/tplimpl/tplimpl_integration_test.go b/tpl/tplimpl/tplimpl_integration_test.go
@@ -606,112 +606,46 @@ func TestDetailsShortcode(t *testing.T) {
files := `
-- hugo.toml --
-disableKinds = ['rss','section','sitemap','taxonomy','term']
-defaultContentLanguage = "en"
-[languages]
- [languages.en]
- weight = 1
- [languages.es]
- weight = 2
--- i18n/en.toml --
-[shortcodes.details]
-other = "Details"
--- i18n/es.toml --
-[shortcodes.details]
-other = "Detalles"
--- layouts/_default/single.html --
+disableKinds = ['page','rss','section','sitemap','taxonomy','term']
+-- layouts/index.html --
{{ .Content }}
--- content/d1.md --
+-- content/_index.md --
---
-title: Default State Test
+title: home
---
{{< details >}}
-Basic example without summary
-{{< /details >}}
--- content/d2.md --
----
-title: Custom Summary Test
----
-{{< details summary="Custom Summary" >}}
-Example with custom summary text
-{{< /details >}}
--- content/d3.md --
----
-title: Open State Test
----
-{{< details summary="Test Open State" open="true" >}}
-Example with open state
+A: An _emphasized_ word.
{{< /details >}}
--- content/d4.md --
----
-title: Attributes Test
----
-{{< details summary="Test Attribute sanitization" style="color: red; font-weight: bold; background-color: #eee" onclick="alert('test')" >}}
-Example testing attribute sanitization
+
+{{< details
+ class="my-class"
+ name="my-name"
+ open=true
+ summary="A **bold** word"
+ title="my-title"
+>}}
+B: An _emphasized_ word.
{{< /details >}}
--- content/d5.md --
----
-title: Class Test
----
-{{< details class="custom-class" >}}
-Example with allowed class attribute
+
+{{< details open=false >}}
+C: An _emphasized_ word.
{{< /details >}}
--- content/d6.md --
----
-title: Name Test
----
-{{< details name="custom-name" >}}
-Example with allowed name attribute
+
+{{< details open="false" >}}
+D: An _emphasized_ word.
{{< /details >}}
--- content/d7.es.md --
----
-title: Localization Test
----
-{{< details >}}
-Localization example without summary
+
+{{< details open=0 >}}
+E: An _emphasized_ word.
{{< /details >}}
`
b := hugolib.Test(t, files)
- // Test1: default state (closed by default)
- b.AssertFileContentEquals("public/d1/index.html",
- "\n<details>\n <summary>Details</summary>\n <p>Basic example without summary</p>\n</details>\n",
- )
- content1 := b.FileContent("public/d1/index.html")
- c := qt.New(t)
- c.Assert(content1, qt.Not(qt.Contains), "open")
-
- // Test2: custom summary
- b.AssertFileContentEquals("public/d2/index.html",
- "\n<details>\n <summary>Custom Summary</summary>\n <p>Example with custom summary text</p>\n</details>\n",
- )
-
- // Test3: open state
- b.AssertFileContentEquals("public/d3/index.html",
- "\n<details open>\n <summary>Test Open State</summary>\n <p>Example with open state</p>\n</details>\n",
- )
-
- // Test4: Test sanitization
- b.AssertFileContentEquals("public/d4/index.html",
- "\n<details>\n <summary>Test Attribute sanitization</summary>\n <p>Example testing attribute sanitization</p>\n</details>\n",
- )
- content4 := b.FileContent("public/d4/index.html")
- c.Assert(content4, qt.Not(qt.Contains), "style")
- c.Assert(content4, qt.Not(qt.Contains), "onclick")
- c.Assert(content4, qt.Not(qt.Contains), "alert")
-
- // Test5: class attribute
- b.AssertFileContentEquals("public/d5/index.html",
- "\n<details class=\"custom-class\">\n <summary>Details</summary>\n <p>Example with allowed class attribute</p>\n</details>\n",
- )
-
- // Test6: name attribute
- b.AssertFileContentEquals("public/d6/index.html",
- "\n<details name=\"custom-name\">\n <summary>Details</summary>\n <p>Example with allowed name attribute</p>\n</details>\n",
- )
-
- // Test7: localization
- b.AssertFileContentEquals("public/es/d7/index.html",
- "\n<details>\n <summary>Detalles</summary>\n <p>Localization example without summary</p>\n</details>\n",
+ b.AssertFileContent("public/index.html",
+ "<details>\n <summary>Details</summary>\n <p>A: An <em>emphasized</em> word.</p>\n</details>",
+ "<details class=\"my-class\" name=\"my-name\" open class=\"my-title\">\n <summary>A <strong>bold</strong> word</summary>\n <p>B: An <em>emphasized</em> word.</p>\n</details>",
+ "<details>\n <summary>Details</summary>\n <p>C: An <em>emphasized</em> word.</p>\n</details>",
+ "<details>\n <summary>Details</summary>\n <p>D: An <em>emphasized</em> word.</p>\n</details>",
+ "<details>\n <summary>Details</summary>\n <p>D: An <em>emphasized</em> word.</p>\n</details>",
)
}