From 1fe65aed3b4992b5c8355b2ef139c9cbf9656c56 Mon Sep 17 00:00:00 2001
From: Oliver Booth <me@olivr.me>
Date: Fri, 11 Aug 2023 16:30:42 +0100
Subject: [PATCH] feat: add support for future spoiler tags

---
 src/scss/app.scss | 14 ++++++++++++++
 src/ts/UI.ts      | 19 +++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/scss/app.scss b/src/scss/app.scss
index e919f32..473f31d 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -212,6 +212,20 @@ div.alert *:last-child {
   margin-bottom: 0 !important;
 }
 
+.spoiler {
+  background: #1e1e1e;
+  color: #1e1e1e;
+  cursor: pointer;
+  padding: 2px 10px;
+  border-radius: 5px;
+  margin: 10px 0;
+
+  &.spoiler-revealed {
+    background: lighten(#333333, 12.5%);
+    color: #ffffff;
+  }
+}
+
 #blog-loading-spinner {
   margin: 20px;
   height: auto;
diff --git a/src/ts/UI.ts b/src/ts/UI.ts
index 11e4d95..970218b 100644
--- a/src/ts/UI.ts
+++ b/src/ts/UI.ts
@@ -1,4 +1,4 @@
-import BlogPost from "./BlogPost";
+import BlogPost from "./BlogPost";
 import Author from "./Author";
 import TimeUtility from "./TimeUtility";
 
@@ -71,6 +71,7 @@ class UI {
         UI.addLineNumbers(element);
         UI.addHighlighting(element);
         UI.addBootstrapTooltips(element);
+        UI.renderSpoilers(element);
         UI.renderTeX(element);
         UI.renderTimestamps(element);
     }
@@ -120,6 +121,20 @@ class UI {
         });
     }
 
+    /**
+     * Renders all spoilers in the document.
+     * @param element The element to search for spoilers in.
+     */
+    public static renderSpoilers(element?: Element) {
+        element = element || document.body;
+        const spoilers = element.querySelectorAll(".spoiler");
+        spoilers.forEach((spoiler) => {
+            spoiler.addEventListener("click", () => {
+                spoiler.classList.add("spoiler-revealed");
+            });
+        });
+    }
+
     /**
      * Renders all TeX in the document.
      * @param element The element to search for TeX in.
@@ -197,7 +212,7 @@ class UI {
         element = element || document.body;
         element.querySelectorAll("pre code").forEach((block) => {
             let content = block.innerHTML;
-            
+
             // but ugly fucking hack. I hate this
             content = content.replaceAll("&lt;mark&gt;", "<mark>");
             content = content.replaceAll("&lt;/mark&gt;", "</mark>");