From adbd294e3029d72311f92f564ce0c949c6f1b9fb Mon Sep 17 00:00:00 2001
From: Drew <webmaster@dhornbein.com>
Date: Mon, 7 Apr 2025 17:55:41 -0600
Subject: [PATCH] adds wompum lines and other wompum related goodies
---
assets/scss/components/_wompum.scss | 1 +
layouts/_default/taxonomy.html | 9 ++--
layouts/index.html | 14 ++++--
layouts/partials/article-list.html | 2 +-
layouts/partials/related-articles.html | 3 ++
layouts/partials/wompum-demo.html | 60 ++++++++++++++++++++------
6 files changed, 67 insertions(+), 22 deletions(-)
diff --git a/assets/scss/components/_wompum.scss b/assets/scss/components/_wompum.scss
index 1a79b9e..6eba325 100644
--- a/assets/scss/components/_wompum.scss
+++ b/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
}
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 7af1b29..f2f079a 100644
--- a/layouts/_default/taxonomy.html
+++ b/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>
- <div class="tag-cloud font-iosevka text-gray-600 text-center">
+ <h2 class="text-4xl mt-8 mb-4 font-bold text-center">Other {{ .Data.Plural }}</h2>
+ <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 }}
diff --git a/layouts/index.html b/layouts/index.html
index 25665e9..00abc54 100644
--- a/layouts/index.html
+++ b/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>
- {{ .Content }}
+ <h2 class="text-2xl font-bold mb-2">About</h2>
+ <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>
- <div class="tag-cloud font-iosevka text-gray-600 text-sm">
+ <h2 class="text-2xl font-bold mb-2">Topics</h2>
+ <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}}"
diff --git a/layouts/partials/article-list.html b/layouts/partials/article-list.html
index d5d6f57..cbdee43 100644
--- a/layouts/partials/article-list.html
+++ b/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>
diff --git a/layouts/partials/related-articles.html b/layouts/partials/related-articles.html
index 5134ef7..cf87cd8 100644
--- a/layouts/partials/related-articles.html
+++ b/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>
diff --git a/layouts/partials/wompum-demo.html b/layouts/partials/wompum-demo.html
index 75f769f..d0dbeee 100644
--- a/layouts/partials/wompum-demo.html
+++ b/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>