adds wompum demo to the about page

content/about.md

@@ -1,6 +1,6 @@
 ---
 title: "About"
-include_partials: ["facilitator-list.html"]
+include_partials: ["facilitator-list.html","wompum-demo.html"]
 ---
 
 The Protocol Oral History Project is an effort to honor and share the stories of protocol artists—the skilled builders and stewards of the rules, standards, and norms that shape our lives in often invisible ways, ranging from technical standards and diplomatic practices to Indigenous traditions and radical subcultures.

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>