mrhavens/thefoldwithin-earth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

regress and update html render

Browse source
This commit is contained in:
Mark Randall Havens 2025-11-09 18:43:39 +00:00
parent 9ea59800ad
commit a2c66a98dc
5 changed files with 167 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "the-fold-within", "name": "the-fold-within",
"version": "3.2.0", "version": "3.3.1",
"dependencies": { "dependencies": {
"pdf-parse": "^1.1.1" "pdf-parse": "^1.1.1"
} }

159
public/app.js
View file

@ -1,3 +1,9 @@
/**
* app.js – v3.3.1 PREVIEW + PORTAL
* High-coherence, readable, maintainable.
* No hacks. No surgery. Only truth.
*/
const els = { const els = {
menuBtn: document.getElementById("menuBtn"), menuBtn: document.getElementById("menuBtn"),
primaryNav: document.getElementById("primaryNav"), primaryNav: document.getElementById("primaryNav"),
@ -17,12 +23,13 @@ const els = {
let indexData = null; let indexData = null;
let sidebarOpen = false; let sidebarOpen = false;
let currentParent = null; let currentParent = null;
let indexFiles = null; // Cached let indexFiles = null; // Cached index files
// === INITIALIZATION ===
async function init() { async function init() {
try { try {
indexData = await (await fetch("index.json")).json(); indexData = await (await fetch("index.json")).json();
indexFiles = indexData.flat.filter(f => f.isIndex); // Cache indexFiles = indexData.flat.filter(f => f.isIndex);
populateNav(); populateNav();
populateSections(); populateSections();
populateTags(); populateTags();
@ -35,6 +42,7 @@ async function init() {
} }
} }
// === NAVIGATION ===
function populateNav() { function populateNav() {
els.primaryNav.innerHTML = '<a href="#/">Home</a>'; els.primaryNav.innerHTML = '<a href="#/">Home</a>';
const navSections = [...new Set( const navSections = [...new Set(
@ -55,11 +63,8 @@ function populateSections() {
els.sectionSelect.appendChild(opt); els.sectionSelect.appendChild(opt);
}); });
if (indexData.sections.includes("posts")) { const defaultSection = indexData.sections.includes("posts") ? "posts" : indexData.sections[0];
els.sectionSelect.value = "posts"; if (defaultSection) els.sectionSelect.value = defaultSection;
} else if (indexData.sections.length > 0) {
els.sectionSelect.value = indexData.sections[0];
}
} }
function populateTags() { function populateTags() {
@ -70,11 +75,7 @@ function populateTags() {
}); });
} }
function formatTimestamp(ms) { // === UI WIRING ===
const d = new Date(ms);
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
}
function wireUI() { function wireUI() {
els.menuBtn.addEventListener("click", () => { els.menuBtn.addEventListener("click", () => {
sidebarOpen = !sidebarOpen; sidebarOpen = !sidebarOpen;
@ -95,6 +96,7 @@ function wireUI() {
[els.tagSelect, els.sortSelect, els.searchMode].forEach(el => el.addEventListener("change", renderList)); [els.tagSelect, els.sortSelect, els.searchMode].forEach(el => el.addEventListener("change", renderList));
els.searchBox.addEventListener("input", renderList); els.searchBox.addEventListener("input", renderList);
// Close sidebar on content click (mobile)
els.content.addEventListener("click", (e) => { els.content.addEventListener("click", (e) => {
if (window.innerWidth < 1024 && document.body.classList.contains("sidebar-open")) { if (window.innerWidth < 1024 && document.body.classList.contains("sidebar-open")) {
if (!e.target.closest("#sidebar")) { if (!e.target.closest("#sidebar")) {
@ -105,6 +107,7 @@ function wireUI() {
}); });
} }
// === LIST RENDERING ===
function renderList() { function renderList() {
const section = els.sectionSelect.value; const section = els.sectionSelect.value;
const tags = Array.from(els.tagSelect.selectedOptions).map(o => o.value.toLowerCase()); const tags = Array.from(els.tagSelect.selectedOptions).map(o => o.value.toLowerCase());
@ -127,7 +130,7 @@ function renderList() {
posts.forEach(p => { posts.forEach(p => {
const li = document.createElement("li"); const li = document.createElement("li");
const pin = p.isPinned ? "Star " : ""; const pin = p.isPinned ? "Star " : "";
const time = formatTimestamp(p.ctime); const time = new Date(p.ctime).toLocaleDateString();
li.innerHTML = `<a href="#/${p.path}">${pin}${p.title}</a><small>${time}</small>`; li.innerHTML = `<a href="#/${p.path}">${pin}${p.title}</a><small>${time}</small>`;
els.postList.appendChild(li); els.postList.appendChild(li);
}); });
@ -143,7 +146,7 @@ function loadDefaultForSection(section) {
location.hash = `#/${pinned.path}`; location.hash = `#/${pinned.path}`;
} }
// NESTED HORIZON: Deep-Aware Sub-Navigation // === SUBNAV (NESTED HORIZON) ===
function renderSubNav(parent) { function renderSubNav(parent) {
const subnav = els.subNav; const subnav = els.subNav;
subnav.innerHTML = ""; subnav.innerHTML = "";
@ -159,16 +162,14 @@ function renderSubNav(parent) {
subnav.appendChild(link); subnav.appendChild(link);
}); });
requestAnimationFrame(() => { requestAnimationFrame(() => subnav.classList.add("visible"));
subnav.classList.add("visible");
});
} }
// === HASH ROUTING ===
async function handleHash() { async function handleHash() {
els.viewer.innerHTML = ""; els.viewer.innerHTML = "";
const rel = location.hash.replace(/^#\//, ""); const rel = location.hash.replace(/^#\//, "");
const parts = rel.split("/").filter(Boolean); const parts = rel.split("/").filter(Boolean);
const currentParentPath = parts.slice(0, -1).join("/") || parts[0] || null; const currentParentPath = parts.slice(0, -1).join("/") || parts[0] || null;
if (currentParentPath !== currentParent) { if (currentParentPath !== currentParent) {
@ -186,41 +187,28 @@ async function handleHash() {
if (rel.endsWith('/')) { if (rel.endsWith('/')) {
const currentPath = parts.join("/"); const currentPath = parts.join("/");
const indexFile = indexFiles.find(f => { const indexFile = indexFiles.find(f => {
const dir = f.path.split("/").slice(0, -1).join("/"); const dir = f.path.split("/").slice(0, -1).join("/");
return dir === currentPath; return dir === currentPath;
}); });
if (indexFile) { if (indexFile) {
try { if (indexFile.ext === ".md") {
if (indexFile.ext === ".md") { await renderMarkdown(indexFile.path);
const src = await fetch(indexFile.path).then(r => r.ok ? r.text() : ""); } else {
const html = marked.parse(src || `# ${currentPath.split("/").pop()}\n\nNo content yet.`); await renderIframe("/" + indexFile.path);
els.viewer.innerHTML = `<article class="markdown">${html}</article>`;
} else {
renderIframe("/" + indexFile.path);
}
} catch (e) {
els.viewer.innerHTML = `<h1>${currentPath.split("/").pop()}</h1><p>No content yet.</p>`;
} }
} else { } else {
if (topSection) { if (topSection) loadDefaultForSection(topSection);
els.sectionSelect.value = topSection; else els.viewer.innerHTML = `<h1>${currentPath.split("/").pop()}</h1><p>No content yet.</p>`;
renderList();
loadDefaultForSection(topSection);
} else {
els.viewer.innerHTML = `<h1>${currentPath.split("/").pop()}</h1><p>No content yet.</p>`;
}
} }
} } else {
else {
const file = indexData.flat.find(f => f.path === rel); const file = indexData.flat.find(f => f.path === rel);
if (!file) { if (!file) {
els.viewer.innerHTML = "<h1>404</h1><p>Not found.</p>"; els.viewer.innerHTML = "<h1>404</h1><p>Not found.</p>";
return; return;
} }
file.ext === ".md" ? await renderMarkdown(file.path) : renderIframe("/" + file.path); file.ext === ".md" ? await renderMarkdown(file.path) : await renderIframe("/" + file.path);
} }
} }
@ -229,53 +217,61 @@ async function renderMarkdown(rel) {
els.viewer.innerHTML = `<article class="markdown">${marked.parse(src || "# Untitled")}</article>`; els.viewer.innerHTML = `<article class="markdown">${marked.parse(src || "# Untitled")}</article>`;
} }
function renderIframe(src) { // === PREVIEW + PORTAL ENGINE ===
const iframe = document.createElement("iframe"); async function renderIframe(rel) {
iframe.src = src; const preview = await generatePreview(rel);
iframe.loading = "eager"; const portalBtn = `<button class="portal-btn" data-src="${rel}">Open Full Experience</button>`;
iframe.setAttribute("sandbox", "allow-same-origin allow-scripts allow-forms allow-popups");
iframe.style.width = "100vw";
iframe.style.height = "calc(100vh - var(--topbar-h) - var(--subnav-h))";
iframe.style.border = "none";
iframe.style.borderRadius = "0";
iframe.style.margin = "0";
els.viewer.appendChild(iframe); els.viewer.innerHTML = `
<div class="preview-header">${portalBtn}</div>
<article class="preview-content">${preview}</article>
`;
iframe.onload = () => { els.viewer.querySelector(".portal-btn").addEventListener("click", e => {
try { window.open(e.target.dataset.src, "_blank", "noopener,noreferrer");
const doc = iframe.contentDocument; });
const style = doc.createElement("style");
style.textContent = `
html, body {
background: transparent;
color: inherit;
font-family: inherit;
margin: 0;
padding: 3rem 4vw;
}
* { max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
`;
doc.head.appendChild(style);
const body = doc.body;
const hasContent = body && body.innerText.trim().length > 50;
if (!hasContent) {
doc.body.innerHTML = `
<div style="text-align:center;padding:6rem;font-family:Inter,sans-serif;">
<h1 style="color:#e6e3d7;">${src.split("/").pop().replace(/\..*$/, "")}</h1>
<p style="color:#888;">No content yet.</p>
</div>
`;
doc.body.style.background = "transparent";
}
} catch (e) {}
};
} }
async function generatePreview(rel) {
try {
const res = await fetch(rel);
if (!res.ok) throw new Error();
const html = await res.text();
let content = html.match(/<body[^>]*>([\s\S]*)<\/body>/i)?.[1] || html;
// Strip dangerous/interactive elements
content = content
.replace(/<script[\s\S]*?<\/script>/gi, "")
.replace(/<style[\s\S]*?<\/style>/gi, "")
.replace(/<link[^>]*rel=["']stylesheet["'][^>]*>/gi, "")
.replace(/\s+(on\w+)=["'][^"']*["']/gi, "")
.replace(/\s+style=["'][^"']*["']/gi, "");
const div = document.createElement("div");
div.innerHTML = content;
trimPreview(div, 3, 3000); // depth, char limit
return div.innerHTML || `<p>Empty content.</p>`;
} catch {
return `<p>Preview unavailable. <a href="${rel}" target="_blank" rel="noopener">Open directly</a>.</p>`;
}
}
function trimPreview(el, maxDepth, charLimit, depth = 0, chars = 0) {
if (depth > maxDepth || chars > charLimit) {
el.innerHTML = "...";
return;
}
for (const child of [...el.children]) {
trimPreview(child, maxDepth, charLimit, depth + 1, chars + child.textContent.length);
if (chars > charLimit) child.remove();
}
}
// === DEFAULT VIEW ===
function renderDefault() { function renderDefault() {
const defaultSection = indexData.sections.includes("posts") ? "posts" : (indexData.sections[0] || null); const defaultSection = indexData.sections.includes("posts") ? "posts" : indexData.sections[0];
if (defaultSection) { if (defaultSection) {
els.sectionSelect.value = defaultSection; els.sectionSelect.value = defaultSection;
renderList(); renderList();
@ -285,4 +281,5 @@ function renderDefault() {
} }
} }
// === START ===
init(); init();

103
public/index.html
View file

@ -1,63 +1,62 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>The Fold Within</title> <title>The Fold Within</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script defer src="app.js"></script> <script defer src="app.js"></script>
</head> </head>
<body> <body>
<header class="topbar"> <header class="topbar">
<button id="menuBtn" aria-label="Toggle menu">Menu</button> <button id="menuBtn" aria-label="Toggle menu">Menu</button>
<nav id="primaryNav" class="primary-nav"></nav> <nav id="primaryNav" class="primary-nav"></nav>
</header> </header>
<!-- HORIZON LAYER: Emergent Sub-Navigation --> <nav id="subNav" class="sub-nav"></nav>
<nav id="subNav" class="sub-nav"></nav>
<aside id="sidebar"> <aside id="sidebar">
<div class="sidebar-header"> <div class="sidebar-header">
<h3>Contents</h3> <h3>Contents</h3>
<button id="toggleControls" class="toggle-btn" aria-label="Toggle filters">Filters</button> <button id="toggleControls" class="toggle-btn" aria-label="Toggle filters">Filters</button>
</div>
<section id="postListSection">
<ul id="postList" role="list" aria-label="Content list"></ul>
</section>
<details id="filterPanel" class="filter-panel">
<summary>Filters & Search</summary>
<div class="filter-controls">
<label for="sectionSelect">Section</label>
<select id="sectionSelect"></select>
<label for="tagSelect">Tags</label>
<select id="tagSelect" multiple></select>
<label for="sortSelect">Sort</label>
<select id="sortSelect">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
</select>
<label for="searchMode">Search</label>
<select id="searchMode">
<option value="title">Titles</option>
<option value="content">Content</option>
</select>
<input id="searchBox" placeholder="Search...">
</div> </div>
</details>
</aside>
<main id="content" class="content"> <section id="postListSection">
<div id="viewer" class="viewer"></div> <ul id="postList" role="list" aria-label="Content list"></ul>
</main> </section>
<details id="filterPanel" class="filter-panel">
<summary>Filters & Search</summary>
<div class="filter-controls">
<label for="sectionSelect">Section</label>
<select id="sectionSelect"></select>
<label for="tagSelect">Tags</label>
<select id="tagSelect" multiple></select>
<label for="sortSelect">Sort</label>
<select id="sortSelect">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
</select>
<label for="searchMode">Search</label>
<select id="searchMode">
<option value="title">Titles</option>
<option value="content">Content</option>
</select>
<input id="searchBox" placeholder="Search...">
</div>
</details>
</aside>
<main id="content" class="content">
<div id="viewer" class="viewer"></div>
</main>
</body> </body>
</html> </html>

52
public/styles.css
View file

@ -17,6 +17,7 @@ html, body {
line-height: 1.6; line-height: 1.6;
} }
/* === TOPBAR & NAV === */
.topbar { .topbar {
position: fixed; top: 0; left: 0; right: 0; position: fixed; top: 0; left: 0; right: 0;
height: var(--topbar-h); display: flex; align-items: center; height: var(--topbar-h); display: flex; align-items: center;
@ -48,7 +49,7 @@ html, body {
text-shadow: 0 0 8px var(--accent); text-shadow: 0 0 8px var(--accent);
} }
/* NESTED HORIZON: Emergent Sub-Navigation with Animation */ /* === SUBNAV === */
.sub-nav { .sub-nav {
display: none; display: none;
position: fixed; position: fixed;
@ -92,6 +93,7 @@ html, body {
text-shadow: 0 0 6px var(--accent); text-shadow: 0 0 6px var(--accent);
} }
/* === SIDEBAR === */
#sidebar { #sidebar {
position: fixed; top: calc(var(--topbar-h) + var(--subnav-h)); left: 0; position: fixed; top: calc(var(--topbar-h) + var(--subnav-h)); left: 0;
width: 300px; bottom: 0; overflow: auto; width: 300px; bottom: 0; overflow: auto;
@ -180,7 +182,7 @@ body.sidebar-open #sidebar { transform: translateX(0); }
.content { margin-left: 300px; } .content { margin-left: 300px; }
} }
/* BREATHING HORIZON: Full-Field Viewer */ /* === VIEWER – BREATHING FIELD === */
.viewer { .viewer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -204,20 +206,19 @@ body.sidebar-open #sidebar { transform: translateX(0); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
/* HARMONIZER HEADER */ /* === PREVIEW + PORTAL === */
.harmonizer-header { .preview-header {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: rgba(255, 215, 0, 0.05); background: rgba(224, 184, 75, 0.08);
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 10;
} }
.popout-btn { .portal-btn {
background: none; background: none;
border: 1px solid var(--accent); border: 1px solid var(--accent);
color: var(--accent); color: var(--accent);
@ -225,47 +226,46 @@ body.sidebar-open #sidebar { transform: translateX(0); }
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
font-size: 0.85rem; font-size: 0.85rem;
cursor: pointer; cursor: pointer;
transition: background 0.2s ease, color 0.2s ease; transition: all 0.2s ease;
} }
.popout-btn:hover { .portal-btn:hover {
background: var(--accent); background: var(--accent);
color: var(--bg); color: var(--bg);
} }
/* HARMONIZED BODY CONTEXT */ .preview-content {
.harmonized { padding: 3rem 4vw;
background: transparent;
color: var(--fg);
font-family: 'Inter', system-ui, sans-serif;
max-width: 90ch; max-width: 90ch;
margin: auto; margin: auto;
padding: 3rem 4vw;
line-height: 1.7; line-height: 1.7;
color: var(--fg);
font-family: 'Inter', system-ui, sans-serif;
} }
.harmonized h1, .harmonized h2, .harmonized h3, .harmonized h4 { .preview-content * {
color: var(--accent); background: transparent !important;
border-bottom: 1px solid #333; color: inherit !important;
padding-bottom: 0.3em; font-family: inherit !important;
margin-top: 2em;
} }
.harmonized img, .harmonized video, .harmonized iframe { .preview-content img,
display: block; .preview-content video,
margin: 2rem auto; .preview-content iframe {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: var(--radius); border-radius: 8px;
margin: 1.5rem 0;
display: block;
} }
.harmonized a { .preview-content a {
color: var(--accent); color: var(--accent);
text-decoration: underline; text-decoration: underline;
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
.harmonized a:hover { .preview-content a:hover {
text-shadow: 0 0 6px var(--accent); text-shadow: 0 0 6px var(--accent);
} }

18
tools/generate-index.mjs
View file

@ -1,4 +1,10 @@
#!/usr/bin/env node #!/usr/bin/env node
/**
* generate-index.mjs
* Scans public/ for .md, .html, .pdf
* Builds index.json: flat list, sections, tags, hierarchies
* Zero config. Filesystem = truth.
*/
import { promises as fs } from "fs"; import { promises as fs } from "fs";
import path from "path"; import path from "path";
import pdf from "pdf-parse"; import pdf from "pdf-parse";
@ -57,7 +63,6 @@ async function collectFiles(relBase = "", flat = []) {
const rel = path.posix.join(relBase, e.name); const rel = path.posix.join(relBase, e.name);
const absPath = path.join(ROOT, rel); const absPath = path.join(ROOT, rel);
// Skip the SPA root index file entirely — it's the shell, not content
if (rel.toLowerCase() === "index.html" || rel.toLowerCase() === "index.md") continue; if (rel.toLowerCase() === "index.html" || rel.toLowerCase() === "index.md") continue;
if (e.isDirectory()) { if (e.isDirectory()) {
@ -104,24 +109,19 @@ async function collectFiles(relBase = "", flat = []) {
(async () => { (async () => {
try { try {
const flat = await collectFiles(); const flat = await collectFiles();
// Build sections: folders with non-index files
const sections = [...new Set(flat.filter(f => !f.isIndex).map(f => f.path.split("/")[0]))].sort(); const sections = [...new Set(flat.filter(f => !f.isIndex).map(f => f.path.split("/")[0]))].sort();
// Build hierarchies: parent → [child] where child has index.*
const hierarchies = {}; const hierarchies = {};
for (const f of flat.filter(f => f.isIndex)) { for (const f of flat.filter(f => f.isIndex)) {
const parts = f.path.split("/"); const parts = f.path.split("/");
if (parts.length > 2) { // e.g., essays/ai/index.md → parts[0]=essays, parts[1]=ai if (parts.length > 2) {
const parent = parts[0]; const parent = parts.slice(0, -2).join("/");
const child = parts[1]; const child = parts[parts.length - 2];
if (!hierarchies[parent]) hierarchies[parent] = []; if (!hierarchies[parent]) hierarchies[parent] = [];
if (!hierarchies[parent].includes(child)) { if (!hierarchies[parent].includes(child)) {
hierarchies[parent].push(child); hierarchies[parent].push(child);
} }
} }
} }
const allTags = [...new Set(flat.flatMap(f => f.tags))].sort(); const allTags = [...new Set(flat.flatMap(f => f.tags))].sort();
await fs.writeFile(OUT, JSON.stringify({ flat, sections, tags: allTags, hierarchies }, null, 2)); await fs.writeFile(OUT, JSON.stringify({ flat, sections, tags: allTags, hierarchies }, null, 2));