tpl/tplimpl: Add details shortcode

- Add new shortcode to render details HTML element.
- Implement integration tests to check: default state, custom summary, open state,  attribute sanitization, allowed attributes, and localization of default summary text.
- Update docs to include details shortcode.

Closes # 13090
This commit is contained in:
racehd 2024-12-01 10:30:34 -05:00 committed by Bjørn Erik Pedersen
parent 9dfa112617
commit 4f130f6e4f
4 changed files with 218 additions and 0 deletions

View file

@ -94,6 +94,40 @@ Example usage:
Although you can call this shortcode using the `{{</* */>}}` notation, computationally it is more efficient to call it using the `{{%/* */%}}` notation as shown above.
### details
{{< new-in 0.140.0 >}}
{{% 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:
```text
{{</* details summary="Custom Summary Text" */>}}
Showing custom `summary` text.
{{</* /details */>}}
```
Additional examples can be found in the source code. The `details` shortcode can use the following named arguments:
summary
: (`string`) Optional. Specifies the content of the child summary element. 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.
class
: (`string`) Optional. The value of the element's class attribute.
### figure
{{% note %}}

View file

@ -25,6 +25,7 @@
# Shortcodes
'comment' = 'shortcodes/comment.html'
'details' = 'shortcodes/details.html'
'figure' = 'shortcodes/figure.html'
'gist' = 'shortcodes/gist.html'
'highlight' = 'shortcodes/highlight.html'