adds wompum lines and other wompum related goodies

layouts/partials/wompum-demo.html

@@ -8,12 +8,13 @@
     <input type="text" 
            class="w-full p-2 border rounded"
            placeholder="Type something..."
-           oninput="updateWompumDemo(this.value)">
+           value="{{ .Site.Title}}"
+           oninput="updateWompumDemoGrid(this.value)">
   </div>
 
   <p>First we generate a sigil by removing spaces, turning to lowercase, removing anything that isn't a consonant, removing repeat letters, find the unicode character number, and finally get the digital root of those numbers. From there the sigil digits are used to choose a color from our pallet.</p>
 
-  <div class="transformation-steps space-y-4 mb-8 font-iosevka">
+  <div class="transformation-steps mb-8 font-iosevka">
     <div>
       <span class="font-bold">Original Text:</span>
       <span class="text-input-display"></span>
@@ -43,15 +44,56 @@
     </div>
   </div>
 
-  <div class="wompum-container h-48 mb-8">
+  <div class="wompum-container wompum-container--demo h-48 mb-8">
     <div class="wompum-grid h-full"
-         data-text=""
+         data-text="{{ .Site.Title}}"
          data-columns="5"
          data-rows="3">
     </div>
   </div>
 
+  <style>
+    .wompum-container--demo {
+      overflow: hidden;
+    }
+    .wompum-container--demo .wompum-cell {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 2em;
+      color: #fff;
+    }
+    .wompum-container--demo .wompum-cell::after {
+      content: attr(data-sigil-digit);
+      font-size: 0.5em;
+    }
+  </style>
+
   <script>
+    // call function on page load
+    document.addEventListener('DOMContentLoaded', function() {
+      const input = document.querySelector('.wompum-demo input');
+      updateWompumDemo(input.value);
+    });
+
+    function updateWompumDemoGrid(text) {
+
+      updateWompumDemo(text);
+
+      // Update grid
+      const grid = document.querySelector('.wompum-demo .wompum-grid');
+      grid.dataset.text = text;
+
+      // Remove existing grid
+      while (grid.firstChild) {
+        grid.firstChild.remove();
+      }
+
+      // Reinitialize grid
+      new WompumGrid(grid).init();
+    }
+    
     function updateWompumDemo(text) {
       // Update displays
       document.querySelector('.text-input-display').textContent = text;
@@ -69,17 +111,7 @@
       const sigilArray = Sigil.generate(text);
       document.querySelector('.text-sigil-root').textContent = sigilArray.join(', ');
       
-      // Update grid
-      const grid = document.querySelector('.wompum-demo .wompum-grid');
-      grid.dataset.text = text;
       
-      // Remove existing grid
-      while (grid.firstChild) {
-        grid.firstChild.remove();
-      }
-      
-      // Reinitialize grid
-      new WompumGrid(grid).init();
     }
   </script>
 </div>