dhorn/Protocol-oral-history-project
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

enhance grid layout and functionality for articles; improve spacing and sigil generation

Browse Source
This commit is contained in:
Drew 2025-04-07 12:22:06 -06:00
parent ac88d5e4d0
commit fa2579bc08
4 changed files with 144 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
assets/scss/components/_wompum.scss
View File

@ -4,24 +4,57 @@
margin: 0 auto; margin: 0 auto;
} }
&-grid { &-grid,
&-article-grid {
display: grid; display: grid;
gap: 0; gap: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
.single-default &-grid, // General grid styles
.single-article &-grid { &-grid {
gap: 1rem; 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 { &-cell {
width: 100%; width: 100%;
min-height: 30px; transition: background-color 0.3s ease;
// Default background for uninitialized cells
background-color: var(--sand-500); 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) { &:nth-child(7n+1) {
background-color: var(--sand-100); background-color: var(--sand-100);
} }

11
layouts/partials/article-wompum.html
View File

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

37
layouts/partials/header.html
View File

@ -1,16 +1,25 @@
<!-- basic header partial in hugo with just home and about --> <!-- 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">
<h1 class="text-2xl font-bold"> <div class="flex justify-between items-center p-4">
<a href="/">{{ .Site.Title }}</a> <h1 class="text-2xl font-bold">
</h1> <a href="/">{{ .Site.Title }}</a>
<nav class="font-iosevka"> </h1>
<ul class="flex gap-4"> <nav class="font-iosevka">
<li> <ul class="flex gap-4">
<a href="/" class="hover:text-blue-700">Home</a> <li>
</li> <a href="/" class="hover:text-blue-700">Home</a>
<li> </li>
<a href="/about" class="hover:text-blue-700">About</a> <li>
</li> <a href="/about" class="hover:text-blue-700">About</a>
</ul> </li>
</nav> </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> </header>

128
static/js/wompum.js
View File

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