feat: add support for future spoiler tags

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;

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>");