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

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

@ -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);
}

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

@ -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>

11
layouts/partials/header.html
View File

@ -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>

122
static/js/wompum.js
View File

@ -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();
}
}
// Define grid areas for each section
setGridAreas() {
const totalColumns = this.gridSize.columns;
const narratorColumns = 2;
const facilitatorColumns = 2;
const subjectColumns = totalColumns - narratorColumns - facilitatorColumns;
class ArticleGrid extends WompumGrid {
constructor(element, metadata) {
super(element);
this.metadata = metadata;
this.gridElement.style.gridTemplateAreas = `
"narrator subject facilitator"
`;
// this.gridElement.style.gridTemplateColumns = `${narratorColumns}fr ${subjectColumns}fr ${facilitatorColumns}fr`;
// 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);
});
}
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();
});
});