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

diff --git a/docs/content/en/content-management/shortcodes.md b/docs/content/en/content-management/shortcodes.md
index 7a589a340089c31269be6df6890fc8d4b6ecdf26..47e4f94ed065b83f5bef6a98dc38d08daee810e4 100644 (file)
--- 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
 

diff --git a/tpl/tplimpl/embedded/templates/shortcodes/details.html b/tpl/tplimpl/embedded/templates/shortcodes/details.html
index 932289517a6344f9b5458302021ebad3408363a4..c19d78c3e558bee3fb1159fd976a9932c15be340 100644 (file)
--- 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>

diff --git a/tpl/tplimpl/tplimpl_integration_test.go b/tpl/tplimpl/tplimpl_integration_test.go
index 36355598df7eb8a2dc5c93ee4c27121d325004fe..445316a0a7a361aa8349dc1e6520091cba70f815 100644 (file)
--- 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>",
        )
 }