feat(shortcode): migrate Spoiler to new standardized HTML

Toggle lists have now been standardized in HTML. Functions just like the toggle lists on Github.

Also now supports Markdown in title and works better with longer titles (unlike the previous button based component).

wowchemy/assets/scss/wowchemy/_shortcodes.scss

@@ -21,3 +21,14 @@
   margin-left: var(--button-group-margin);
   margin-right: var(--button-group-margin);
 }
+
+// Spoilers (toggle lists)
+
+details {
+  margin-bottom: 1rem;
+}
+
+summary:focus {
+  // Override Webkit setting an outline.
+  outline: none;
+}

wowchemy/layouts/shortcodes/spoiler.html

@@ -1,13 +1,6 @@
 {{- $id := printf "spoiler-%d" .Ordinal -}}
-<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" | emojify }}
-    </a>
-  </p>
-  <div class="collapse card {{ if (eq (.Get "open") "true") }}show{{ end }}" id="{{$id}}">
-    <div class="card-body">
-      {{ .Inner | markdownify | emojify }}
-    </div>
-  </div>
-</div>
+
+<details class="spoiler {{ .Get "class" }}" {{ with .Get "style" }}style="{{ . | safeCSS }}"{{ end }} id="{{$id}}">
+  <summary>{{ .Get "text" | markdownify | emojify }}</summary>
+  <p>{{ .Inner | markdownify | emojify }}</p>
+</details>