adds wompum lines and other wompum related goodies

assets/scss/components/_wompum.scss

@@ -7,6 +7,7 @@
         & .wompum-article-grid {
             gap: 2px;
             height: 100%; // Fill container height
+            min-height: 2px;
             grid-template-rows: repeat(var(--grid-rows, 5), 1fr); // Default 5 rows
         }
 

layouts/_default/taxonomy.html

@@ -4,13 +4,16 @@
   <h1 class="text-4xl font-bold text-center capitalize">{{ .Title }}</h1>
 </header>
 <main class="container mx-auto">
-  <ul class="mt-4 space-y-4">
+  <ul class="flex flex-col gap-4 w-full mt-4">
     {{ partial "article-list.html" (dict "Pages" .Data.Pages) }}
   </ul>
   
   <section>
-    <h2 class="text-4xl my-8 font-bold text-center">Other {{ .Data.Plural }}</h2>
+    <h2 class="text-4xl mt-8 mb-4 font-bold text-center">Other {{ .Data.Plural }}</h2>
-    <div class="tag-cloud font-iosevka text-gray-600 text-center">
+    <div class="wompum-container wompum-container--no-gap">
+      <div class="wompum-grid" data-text="Other {{ .Data.Plural }}" data-columns="4" data-rows="1"></div>
+    </div>
+    <div class="tag-cloud font-iosevka text-gray-600 text-center mt-4">
       {{ $terms := index .Site.Taxonomies .Data.Plural }}
       {{ range $term, $pages := $terms }}
         {{ if ne $term $.Title }}

layouts/index.html

@@ -7,13 +7,19 @@
   <aside class="max-w-prose w-1/4 flex flex-col gap-8 mb-8">
 
     <section>
-      <h2 class="text-2xl mb-4 font-bold">About</h2>
+      <h2 class="text-2xl font-bold mb-2">About</h2>
-      {{ .Content }}
+      <div class="wompum-container wompum-container--no-gap">
+        <div class="wompum-grid" data-text="About The Protocol Oral History Project" data-columns="4" data-rows="1"></div>
+      </div>
+      <p class="mt-4">{{ .Content }}</p>
     </section>
 
     <section>
-      <h2 class="text-2xl mb-4 font-bold">Topics</h2>
+      <h2 class="text-2xl font-bold mb-2">Topics</h2>
-      <div class="tag-cloud font-iosevka text-gray-600 text-sm">
+      <div class="wompum-container wompum-container--no-gap">
+        <div class="wompum-grid" data-text="Topics" data-columns="4" data-rows="1"></div>
+      </div>
+      <div class="tag-cloud font-iosevka text-gray-600 text-sm mt-4">
         {{ $topics := .Site.Taxonomies.topics }}
         {{ range $tag, $pages := $topics }}
         <a href="{{ "/topics/" | relLangURL }}{{ $tag | urlize }}" style="font-size: {{ add 1 (div (len $pages) 2) }}em;" data-count="{{ len $pages}}"

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>