From 8af8d15d82b0087abab3bfcdccb3d22b10570994 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Thu, 28 May 2020 21:09:54 +0100
Subject: [PATCH] feat: add spoiler shortcode

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

Close #1712
---
 .../post/writing-technical-content/index.md        | 14 ++++++++++++++
 layouts/shortcodes/spoiler.html                    | 14 ++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 layouts/shortcodes/spoiler.html

diff --git a/exampleSite/content/post/writing-technical-content/index.md b/exampleSite/content/post/writing-technical-content/index.md
index 9e615950..5826d561 100644
--- a/exampleSite/content/post/writing-technical-content/index.md
+++ b/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).
diff --git a/layouts/shortcodes/spoiler.html b/layouts/shortcodes/spoiler.html
new file mode 100644
index 00000000..344b74b3
--- /dev/null
+++ b/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>
\ No newline at end of file