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
This commit is contained in:
Joe Mooring
Bjørn Erik Pedersen
parent
641d2616c7
commit
1e34e5b26d
3 changed files with 95 additions and 144 deletions
|
|
@ -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`.
|
||||
|
||||
name
|
||||
: (`string`) Optional. The value of the element's name attribute.
|
||||
: (`bool`) Whether to initially display the content of the `details` element. Default is `false`.
|
||||
|
||||
class
|
||||
: (`string`) Optional. The value of the element's class attribute.
|
||||
: (`string`) The value of the element's `class` attribute.
|
||||
|
||||
name
|
||||
: (`string`) The value of the element's `name` attribute.
|
||||
|
||||
title
|
||||
: (`string`) The value of the element's `title` attribute.
|
||||
|
||||
### figure
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
{{- /*
|
||||
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
|
||||
|
||||
|
|
@ -51,9 +52,10 @@ Renders an HTML details element.
|
|||
*/}}
|
||||
|
||||
{{- /* 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 }}
|
||||
|
|
@ -62,7 +64,12 @@ Renders an HTML details element.
|
|||
{{- end }}
|
||||
|
||||
{{- /* Render. */}}
|
||||
<details{{- if $open }} open{{ end }}{{- if $name }} name="{{ $name }}"{{- end }}{{- if $class }} class="{{ $class }}"{{- end }}>
|
||||
<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>
|
||||
|
|
@ -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
|
||||
A: An _emphasized_ word.
|
||||
{{< /details >}}
|
||||
-- content/d2.md --
|
||||
---
|
||||
title: Custom Summary Test
|
||||
---
|
||||
{{< details summary="Custom Summary" >}}
|
||||
Example with custom summary text
|
||||
|
||||
{{< details
|
||||
class="my-class"
|
||||
name="my-name"
|
||||
open=true
|
||||
summary="A **bold** word"
|
||||
title="my-title"
|
||||
>}}
|
||||
B: An _emphasized_ word.
|
||||
{{< /details >}}
|
||||
-- content/d3.md --
|
||||
---
|
||||
title: Open State Test
|
||||
---
|
||||
{{< details summary="Test Open State" open="true" >}}
|
||||
Example with open state
|
||||
|
||||
{{< details open=false >}}
|
||||
C: 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 open="false" >}}
|
||||
D: An _emphasized_ word.
|
||||
{{< /details >}}
|
||||
-- content/d5.md --
|
||||
---
|
||||
title: Class Test
|
||||
---
|
||||
{{< details class="custom-class" >}}
|
||||
Example with allowed class attribute
|
||||
{{< /details >}}
|
||||
-- content/d6.md --
|
||||
---
|
||||
title: Name Test
|
||||
---
|
||||
{{< details name="custom-name" >}}
|
||||
Example with allowed name attribute
|
||||
{{< /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>",
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue