add about

assets/main.js

@@ -250,6 +250,26 @@ class SourceText extends HTMLDivElement {
   }
 }
 
+class AboutToggler extends HTMLAnchorElement {
+  constructor() {
+    super();
+    this.hide = true;
+    this.style.cursor = "pointer";
+  }
+
+  connectedCallback() {
+    this.innerText = "about";
+    this.addEventListener("click", (e) => {
+      if (this.hide) {
+        $("#about").style.display = "block";
+      } else {
+        $("#about").style.display = "none";
+      }
+      this.hide = !this.hide;
+    });
+  }
+}
+
 class ThemeToggler extends HTMLAnchorElement {
   constructor() {
     super();
@@ -385,6 +405,7 @@ class PoemSaver extends HTMLFormElement {
 
 const reorder = new CustomEvent("reorder", {bubbles: true});
 const edited = new CustomEvent("edited", {bubbles: true});
+customElements.define("about-toggler", AboutToggler, { extends: "a" });
 customElements.define("poem-saver", PoemSaver, { extends: "form" });
 customElements.define("theme-toggler", ThemeToggler, { extends: "a" });
 customElements.define("source-text", SourceText, { extends: "div" });

templates/index.tmpl

@@ -24,6 +24,12 @@ body {
   padding: 5px
 }
 
+#about {
+  background-color: grey;
+  display: none;
+  color: black;
+}
+
 h1 {
   background-color: black;
 }
@@ -112,9 +118,12 @@ a {
 
     <h1 style="display:block;margin:0">Trunkless</h1>
     <p style="margin-top:0;font-size:80%">
-        <a href="/about">about</a>
+        <a is="about-toggler"></a>
         <a is="theme-toggler"></a>
     </p>
+    <p id="about">
+    HELLO. THIS IS A <a href="https://github.com/vilmibm/trunkless">SOFT WARE</a> FOR MAKING <a href="https://en.wikipedia.org/wiki/Cut-up_technique">CUT-UP POETRY</a>. THERE ARE 467,014,991 POSSIBLE LINES YOU MAY SEE. ALL OF THE LINES ARE FROM THE ENGLISH CORPUS OF <a href="https://gutenberg.org">PROJECT GUTERNBERG</a>. SOME MAY BE OBJECTIONABLE AND I'M SORRY. THE AUTHOR OF THIS SOFT WARE IS <a href="https://tilde.town/~vilmibm">~VILMIBM</a>.
+    </p>
     <div class="controls">
       <button is="poem-resetter"></button>