feat: add spoiler shortcode

To use:
{{< spoiler text="Click to view the spoiler" >}} You found me! {{< /spoiler >}}

Close #1712

exampleSite/content/post/writing-technical-content/index.md

@@ -261,6 +261,20 @@ renders as
 A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
 {{% /alert %}}
 
+### Spoilers
+
+Add a spoiler to a page to reveal text, such as an answer to a question, after a button is clicked.
+
+```markdown
+{{</* spoiler text="Click to view the spoiler" */>}}
+You found me!
+{{</* /spoiler */>}}
+```
+
+renders as
+
+{{< spoiler text="Click to view the spoiler" >}} You found me! {{< /spoiler >}}
+
 ### Icons
 
 Academic enables you to use a wide range of [icons from _Font Awesome_ and _Academicons_](https://sourcethemes.com/academic/docs/page-builder/#icons) in addition to [emojis](https://sourcethemes.com/academic/docs/writing-markdown-latex/#emojis).

layouts/shortcodes/spoiler.html

@@ -0,0 +1,14 @@
+{{- $id := printf "spoiler-%s" (.Get "text" | lower | urlize) -}}
+<div class="spoiler {{ .Get "class" }}" {{ with .Get "style" }}style="{{ . | safeCSS }}"{{ end }}>
+<p>
+  <a class="btn btn-primary" data-toggle="collapse" href="#{{$id}}" role="button" aria-expanded="false" aria-controls="{{$id}}">
+    {{ .Get "text" }}
+  </a>
+</p>
+<div class="collapse {{ if (eq (.Get "open") "true") }}show{{ end }}" id="{{$id}}">
+  <div class="card">
+    <div class="card-body">
+    {{ .Inner | markdownify | emojify }}
+    </div>
+  </div>
+</div>