add spoiler tag to babycode

app/lib/babycode.py

@@ -63,6 +63,12 @@ def tag_color(children, attr):
     # return just the way it was if we can't parse it
     return f"[color={attr}]{children}[/color]"
 
+def tag_spoiler(children, attr):
+    spoiler_name = attr if attr else "Spoiler"
+    content = f"<div class='accordion-content post-accordion-content hidden'>{children}</div>"
+    container = f"""<div class='accordion hidden'><div class='accordion-header'><button type='button' class='accordion-toggle'>+</button><span>{spoiler_name}</span></div>{content}</div>"""
+    return container
+
 TAGS = {
     "b": lambda children, attr: f"<strong>{children}</strong>",
     "i": lambda children, attr: f"<em>{children}</em>",
@@ -82,6 +88,8 @@ TAGS = {
 
     "center": lambda children, attr: f"<div style='text-align: center;'>{children}</div>",
     "right": lambda children, attr: f"<div style='text-align: right;'>{children}</div>",
+
+    "spoiler": tag_spoiler,
 }
 
 def make_emoji(name, code):

app/templates/babycode.html

@@ -151,6 +151,14 @@
         Will produce the following list:
         {{ list | babycode | safe }}
       </section>
+      <section class="babycode-guide-section">
+      <h2 id="spoilers">Spoilers</h2>
+      {% set spoiler = "[spoiler]My hidden content[/spoiler]" %}
+      <p>You can make a section collapsible by using the <code class="inline-code">[spoiler]</code> tag:</p>
+      {{ ("[code]\n%s[/code]" % spoiler) | babycode | safe }}
+      Will produce:
+      {{ spoiler | babycode | safe }}
+      </section>
     {% endset %}
     {{ sections | safe }}
   </div>