adds wompum demo to the about page

layouts/partials/wompum-demo.html

@@ -0,0 +1,85 @@
+<div class="wompum-demo max-w-2xl mx-auto">
+  <h2 class="text-2xl font-bold mb-4">Wompum Grid Protocol</h2>
+
+  <p>We use a protocol to generate the colorful wompum style grid for articles and other places around the site, learn how it works here.</p>
+  
+  <div class="mb-8 font-iosevka">
+    <label class="block mb-2">Enter text to generate a grid:</label>
+    <input type="text" 
+           class="w-full p-2 border rounded"
+           placeholder="Type something..."
+           oninput="updateWompumDemo(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>
+      <span class="font-bold">Original Text:</span>
+      <span class="text-input-display"></span>
+    </div>
+    <div>
+      <span class="font-bold">Lowercase:</span>
+      <span class="text-cleaned-display"></span>
+    </div>
+    <div>
+      <span class="font-bold">Consonants only:</span>
+      <span class="text-consonants-display"></span>
+    </div>
+    <div>
+      <span class="font-bold">Unique consonants:</span>
+      <span class="text-unique-display"></span>
+    </div>
+    <div>
+      <span class="font-bold">Letters to numbers:</span>
+      <span class="text-sigil-numbers"></span>
+    </div>
+    <div>
+      <span class="font-bold">Digital root:</span>
+      <span class="text-sigil-root"></span>
+    </div>
+    <div>
+      <span class="font-bold">The final grid:</span>
+    </div>
+  </div>
+
+  <div class="wompum-container h-48 mb-8">
+    <div class="wompum-grid h-full"
+         data-text=""
+         data-columns="5"
+         data-rows="3">
+    </div>
+  </div>
+
+  <script>
+    function updateWompumDemo(text) {
+      // Update displays
+      document.querySelector('.text-input-display').textContent = text;
+      document.querySelector('.text-cleaned-display').textContent = text.toLowerCase().replace(/[^a-z]/g, '');
+      document.querySelector('.text-consonants-display').textContent = text.toLowerCase().replace(/[^a-z]/g, '').replace(/[aeiou]/g, '');
+      
+      const uniqueConsonants = [...new Set(text.toLowerCase().replace(/[^a-z]/g, '').replace(/[aeiou]/g, ''))].join('');
+      document.querySelector('.text-unique-display').textContent = uniqueConsonants;
+      
+      // Show character to number conversion
+      const charNumbers = [...uniqueConsonants].map(char => char.charCodeAt(0)).join(', ');
+      document.querySelector('.text-sigil-numbers').textContent = charNumbers;
+      
+      // Show digital root calculation
+      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>