adds wompum demo to the about page

assets/scss/components/_wompum.scss

@@ -4,24 +4,57 @@
         margin: 0 auto;
     }
 
-    &-grid {
+    &-grid,
+    &-article-grid {
         display: grid;
         gap: 0;
         padding: 0;
         width: 100%;
     }
 
-    .single-default &-grid,
-    .single-article &-grid {
+    // General grid styles
+    &-grid {
+        gap: 2px; // Tighter spacing for general grids
+        
+        &[data-rows="1"] {
+            .wompum-cell {
+                height: 100%;
+            }
+        }
+    }
+
+    // Article grid styles
+    &-article-grid {
+        gap: 3px; // Wider spacing for article grids
+
+        .single-default &,
+        .single-article & {
             gap: 1rem;
         }
+    }
 
     &-cell {
         width: 100%;
-        min-height: 30px;
+        transition: background-color 0.3s ease;
+
+        // Default background for uninitialized cells
         background-color: var(--sand-500);
 
-        // Create pseudo-random pattern using prime numbers
+        // Different styling for cells in article grids
+        .wompum-article-grid & {
+            &[data-section="narrator"] {
+                min-height: 35px;
+            }
+            &[data-section="subject"] {
+                min-height: 40px;
+            }
+            &[data-section="facilitator"] {
+                min-height: 35px;
+            }
+        }
+
+        // Fallback patterns using prime numbers
+        // (these will be overridden by JS-generated colors when initialized)
         &:nth-child(7n+1) {
             background-color: var(--sand-100);
         }

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/article-wompum.html

@@ -1,8 +1,7 @@
 <div class="wompum-container">
-    <div class="wompum-grid" 
-        data-metadata="{{ jsonify .Params }}"
-    >
-        <!-- Grid will be populated by JavaScript -->
-        <!-- 7x5 = 35 cells total -->
+  <div class="wompum-article-grid"
+       data-metadata="{{ dict "narrator" .Params.narrator "subject" .Params.subject "facilitator" .Params.facilitator | jsonify }}"
+       data-columns="7"
+       data-rows="5">
   </div>
 </div>

layouts/partials/header.html

@@ -1,5 +1,6 @@
 <!-- basic header partial in hugo with just home and about -->
-<header class="p-4 flex justify-between items-center border-b border-gray-300 mb-4">
+<header class="flex flex-col mb-4">
+  <div class="flex justify-between items-center p-4">
     <h1 class="text-2xl font-bold">
       <a href="/">{{ .Site.Title }}</a>
     </h1>
@@ -13,4 +14,12 @@
         </li>
       </ul>
     </nav>
+  </div>
+  <div class="wompum-container">
+    <div class="wompum-grid h-2"
+         data-text="{{ .Site.Title }}"
+         data-columns="7"
+         data-rows="1">
+    </div>
+  </div>
 </header>

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>

static/js/wompum.js

@@ -1,7 +1,6 @@
 class WompumGrid {
-    constructor(element, metadata) {
+    constructor(element) {
         this.gridElement = element;
-        this.metadata = metadata;
         this.gridSize = {
             columns: parseInt(element.dataset.columns) || 7,
             rows: parseInt(element.dataset.rows) || 5
@@ -10,27 +9,19 @@ class WompumGrid {
         // Set grid template columns based on data attribute or default
         this.gridElement.style.gridTemplateColumns = `repeat(${this.gridSize.columns}, 1fr)`;
         
-        // Generate sigils for each metadata component
-        this.sigils = {
-            narrator: Sigil.generate(metadata.narrator),
-            subject: Sigil.generate(metadata.subject),
-            facilitator: Sigil.generate(metadata.facilitator)
-        };
-
         // Initialize color calculator
         this.colorCalculator = new ColorCalculator();
 
-        // Store sigils as data attributes for future use
-        this.gridElement.dataset.narratorSigil = JSON.stringify(this.sigils.narrator);
-        this.gridElement.dataset.subjectSigil = JSON.stringify(this.sigils.subject);
-        this.gridElement.dataset.facilitatorSigil = JSON.stringify(this.sigils.facilitator);
+        // Generate sigil from text content if provided
+        const text = element.dataset.text || '';
+        this.sigil = Sigil.generate(text);
+        this.gridElement.dataset.sigil = JSON.stringify(this.sigil);
     }
 
-    // Get sigil digit for a cell based on its section and position
-    getSigilDigit(section, position) {
-        const sigil = this.sigils[section];
-        if (!sigil || !sigil.length) return 0;
-        return sigil[position % sigil.length];
+    // Get sigil digit for a cell based on its position
+    getSigilDigit(position) {
+        if (!this.sigil || !this.sigil.length) return 0;
+        return this.sigil[position % this.sigil.length];
     }
 
     // Get influences from adjacent cells
@@ -60,18 +51,35 @@ class WompumGrid {
         return influences;
     }
 
-    // Apply metadata-based design to the grid
+    // Create basic grid cells
+    createGrid() {
+        const totalCells = this.gridSize.columns * this.gridSize.rows;
+        
+        for (let i = 0; i < totalCells; i++) {
+            const cell = document.createElement('div');
+            const column = i % this.gridSize.columns;
+            const row = Math.floor(i / this.gridSize.columns);
+            
+            cell.className = 'wompum-cell';
+            cell.setAttribute('data-cell-index', i);
+            cell.setAttribute('data-column', column);
+            cell.setAttribute('data-row', row);
+            
+            // Set sigil digit based on cell position
+            const sigilDigit = this.getSigilDigit(i);
+            cell.setAttribute('data-sigil-digit', sigilDigit);
+            
+            this.gridElement.appendChild(cell);
+        }
+    }
+
     applyMetadataDesign() {
         const cells = this.gridElement.querySelectorAll('.wompum-cell');
         
         cells.forEach(cell => {
-            const section = cell.dataset.section;
             const column = parseInt(cell.dataset.column);
             const row = parseInt(cell.dataset.row);
-            
-            // Get sigil digit for this cell
-            const sigilDigit = this.getSigilDigit(section, row);
-            cell.dataset.sigilDigit = sigilDigit;
+            const sigilDigit = parseInt(cell.dataset.sigilDigit);
             
             // Get influences from adjacent cells
             const influences = this.getInfluences(column, row);
@@ -82,40 +90,51 @@ class WompumGrid {
         });
     }
 
-    // Initialize the grid
     init() {
         if (!this.gridElement) return;
         this.createGrid();
         this.applyMetadataDesign();
-        this.setGridAreas();
+    }
+}
+
+class ArticleGrid extends WompumGrid {
+    constructor(element, metadata) {
+        super(element);
+        this.metadata = metadata;
+        
+        // Generate sigils for each metadata component
+        this.sigils = {
+            narrator: Sigil.generate(metadata.narrator),
+            subject: Sigil.generate(metadata.subject),
+            facilitator: Sigil.generate(metadata.facilitator)
+        };
+
+        // Store sigils as data attributes
+        Object.entries(this.sigils).forEach(([key, value]) => {
+            this.gridElement.dataset[`${key}Sigil`] = JSON.stringify(value);
+        });
     }
 
-    // Define grid areas for each section
-    setGridAreas() {
-        const totalColumns = this.gridSize.columns;
-        const narratorColumns = 2;
-        const facilitatorColumns = 2;
-        const subjectColumns = totalColumns - narratorColumns - facilitatorColumns;
-
-        this.gridElement.style.gridTemplateAreas = `
-            "narrator subject facilitator"
-        `;
-        // this.gridElement.style.gridTemplateColumns = `${narratorColumns}fr ${subjectColumns}fr ${facilitatorColumns}fr`;
+    getSigilDigit(position, section) {
+        const sigil = this.sigils[section];
+        if (!sigil || !sigil.length) return 0;
+        return sigil[position % sigil.length];
     }
 
-    // Create the grid cells with position awareness
     createGrid() {
         const totalCells = this.gridSize.columns * this.gridSize.rows;
+        const narratorColumns = 2;
+        const facilitatorColumns = 2;
         
         for (let i = 0; i < totalCells; i++) {
             const cell = document.createElement('div');
             const column = i % this.gridSize.columns;
             const row = Math.floor(i / this.gridSize.columns);
             
-            // Determine which section this cell belongs to
+            // Determine section based on column position
             let section;
-            if (column < 2) section = 'narrator';
-            else if (column >= this.gridSize.columns - 2) section = 'facilitator';
+            if (column < narratorColumns) section = 'narrator';
+            else if (column >= this.gridSize.columns - facilitatorColumns) section = 'facilitator';
             else section = 'subject';
             
             cell.className = 'wompum-cell';
@@ -124,26 +143,33 @@ class WompumGrid {
             cell.setAttribute('data-column', column);
             cell.setAttribute('data-row', row);
             
+            // Set sigil digit based on section and position
+            const sigilDigit = this.getSigilDigit(row, section);
+            cell.setAttribute('data-sigil-digit', sigilDigit);
+            
             this.gridElement.appendChild(cell);
         }
     }
 }
 
-// Wait for DOM to be ready
+// Initialize grids
 document.addEventListener('DOMContentLoaded', () => {
-    // Find all grid elements
-    const gridElements = document.querySelectorAll('.wompum-grid');
+    // Initialize basic grids
+    document.querySelectorAll('.wompum-grid').forEach(element => {
+        const grid = new WompumGrid(element);
+        grid.init();
+    });
 
-    // Initialize a grid for each element found
-    gridElements.forEach(element => {
+    // Initialize article grids
+    document.querySelectorAll('.wompum-article-grid').forEach(element => {
         let metadata = {};
         try {
             metadata = JSON.parse(element.dataset.metadata || '{}');
         } catch (e) {
-            console.error('Error parsing metadata for grid:', e);
+            console.error('Error parsing metadata for article grid:', e);
         }
         
-        const wompum = new WompumGrid(element, metadata);
-        wompum.init();
+        const grid = new ArticleGrid(element, metadata);
+        grid.init();
     });
 });