adds wompum lines and other wompum related goodies

layouts/partials/article-list.html

@@ -5,7 +5,7 @@
     {{- $page = .page -}}
 {{- end -}}
 <li class="flex gap-4 items-center">
-  <a class="flex-1 min-w-0 wompum-container h-full" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
+  <a class="flex-1 min-w-0 wompum-container wompum-container--aspect-ratio h-full block" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
   <time class="text-gray-800 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
     <p>{{ $page.Date.Format "Jan" }}</p>
     <p>{{ $page.Date.Format "02" }}</p>

layouts/partials/related-articles.html

@@ -30,6 +30,9 @@
 {{- if gt (len $finalArticles) 0 -}}
 <div class="related-articles flex flex-col gap-4">
     <h2 class="title text-3xl font-bold">Related Articles</h2>
+    <div class="wompum-container wompum-container--no-gap">
+        <div class="wompum-grid" data-text="Related Articles" data-columns="8" data-rows="1"></div>
+    </div>
     <ul class="flex flex-col gap-4 w-full">
       {{ partial "article-list" (dict "Pages" $finalArticles) }}
     </ul>

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>