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

Update app.js

Browse source
This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42 2025-11-08 12:59:27 -06:00 • committed by GitHub
parent 151a42140b
commit 1ed336df18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 181 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

311
public/app.js
View file

@ -1,195 +1,246 @@
/* ============================================================
Self-Organizing Static Site Framework v2.4 (Local Libs)
============================================================ */
let INDEX, CURRENT_PATH = null, PATH_TO_EL = new Map(); let INDEX, CURRENT_PATH = null, PATH_TO_EL = new Map();
const treeEl = document.getElementById("tree");
const mdView = document.getElementById("mdView"); const treeEl = document.getElementById("tree");
const htmlView = document.getElementById("htmlView"); const mdView = document.getElementById("mdView");
const metaLine = document.getElementById("meta"); const mdWarn = document.getElementById("mdWarn");
const sortSel = document.getElementById("sort"); const htmlView = document.getElementById("htmlView");
const metaLine = document.getElementById("meta");
const sortSel = document.getElementById("sort");
const filterSel = document.getElementById("filter"); const filterSel = document.getElementById("filter");
const searchBox = document.getElementById("search"); const searchBox = document.getElementById("search");
const prevBtn = document.getElementById("prev"); const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next"); const nextBtn = document.getElementById("next");
const sidebar = document.querySelector(".sidebar"); const sidebar = document.querySelector(".sidebar");
const navToggle = document.getElementById("navToggle"); const navToggle = document.getElementById("navToggle");
const overlay = document.querySelector(".overlay"); const overlay = document.querySelector(".overlay");
/* Sidebar toggle */
navToggle.addEventListener("click", () => sidebar.classList.toggle("open")); navToggle.addEventListener("click", () => sidebar.classList.toggle("open"));
overlay.addEventListener("click", () => sidebar.classList.remove("open")); overlay.addEventListener("click", () => sidebar.classList.remove("open"));
/* Load index */
async function loadIndex() { async function loadIndex() {
// No CDN race now; libs are local. Still, surface diagnostics:
if (!window.marked) console.warn("⚠️ marked.js not detected.");
if (!window.DOMPurify) console.warn("⚠️ DOMPurify not detected.");
const res = await fetch("/index.json", { cache: "no-store" }); const res = await fetch("/index.json", { cache: "no-store" });
INDEX = await res.json(); INDEX = await res.json();
populateFilters(); populateFilters();
rebuildTree(); rebuildTree();
window.addEventListener("popstate", () => { const hp = location.hash.startsWith("#=") ? location.hash.slice(2) : null; if (hp) openPath(hp); });
const init = location.hash.startsWith("#=") ? location.hash.slice(2) : INDEX.flat.sort((a, b) => b.mtime - a.mtime)[0]?.path; window.addEventListener("popstate", () => {
const hp = location.hash.startsWith("#=") ? location.hash.slice(2) : null;
if (hp) openPath(hp);
});
const init = location.hash.startsWith("#=")
? location.hash.slice(2)
: INDEX.flat.sort((a,b)=>b.mtime-a.mtime)[0]?.path;
openPath(init); openPath(init);
} }
function populateFilters() { function populateFilters() {
filterSel.innerHTML = '<option value="all">All</option>'; filterSel.innerHTML = '<option value="all">All</option>';
for (const cat of INDEX.sections) { for (const cat of INDEX.sections) {
const opt = document.createElement("option"); const o = document.createElement("option");
opt.value = opt.textContent = cat; o.value = o.textContent = cat;
filterSel.appendChild(opt); filterSel.appendChild(o);
} }
} }
function rebuildTree() { function rebuildTree() {
treeEl.innerHTML = ""; treeEl.innerHTML = "";
PATH_TO_EL.clear(); PATH_TO_EL.clear();
const filter = filterSel.value; const filter = filterSel.value;
const sort = sortSel.value; const sort = sortSel.value;
const query = searchBox.value.trim().toLowerCase(); const query = searchBox.value.trim().toLowerCase();
const root = { type: "dir", children: INDEX.tree }; const root = { type: "dir", children: INDEX.tree };
const pruned = filterTree(root, f => (filter === "all" || f.path.split("/")[0] === filter) && (!query || (f.title || f.name).toLowerCase().includes(query))); const pruned = filterTree(root, f =>
(filter==="all" || f.path.split("/")[0]===filter) &&
(!query || (f.title||f.name).toLowerCase().includes(query))
);
sortDir(pruned, sort); sortDir(pruned, sort);
for (const c of pruned.children) treeEl.appendChild(renderNode(c)); for (const c of pruned.children) treeEl.appendChild(renderNode(c));
treeEl.querySelectorAll(".dir").forEach(d => d.classList.add("open")); treeEl.querySelectorAll(".dir").forEach(d => d.classList.add("open"));
} }
function filterTree(node, keep) { function filterTree(node, keep) {
if (node.type === "file") return keep(node) ? node : null; if (node.type === "file") return keep(node) ? node : null;
const kids = node.children.map(c => filterTree(c, keep)).filter(Boolean); const kids = node.children.map(c=>filterTree(c,keep)).filter(Boolean);
return kids.length ? { ...node, children: kids } : null; return kids.length ? {...node, children:kids} : null;
} }
function sortDir(node, sort) { function sortDir(node, sort) {
const cmp = sort === "name" ? (a, b) => a.name.localeCompare(b.name) : const cmp = sort==="name" ? (a,b)=>a.name.localeCompare(b.name)
sort === "old" ? (a, b) => a.mtime - b.mtime : (a, b) => b.mtime - a.mtime; : sort==="old" ? (a,b)=>a.mtime-b.mtime
node.children.sort((a, b) => (a.type === "dir" && b.type !== "dir") ? -1 : (a.type !== "dir" && b.type === "dir") ? 1 : cmp(a, b)); : (a,b)=>b.mtime-a.mtime;
node.children.forEach(c => c.type === "dir" && sortDir(c, sort)); node.children.sort((a,b)=>
(a.type==="dir"&&b.type!=="dir")?-1:
(a.type!=="dir"&&b.type==="dir")?1:cmp(a,b));
node.children.forEach(c=>c.type==="dir"&&sortDir(c,sort));
} }
function renderNode(node) { function renderNode(n) {
if (node.type === "dir") { if (n.type==="dir") {
const div = document.createElement("div"); const d = document.createElement("div");
div.className = "dir"; d.className="dir"; d.setAttribute("aria-expanded","false");
div.setAttribute("aria-expanded", "false"); const lbl=document.createElement("span");
const lbl = document.createElement("span"); lbl.className="label"; lbl.textContent=n.name||"/";
lbl.className = "label"; lbl.addEventListener("click",()=>{
lbl.textContent = node.name || "/"; const idx=n.children.find(c=>c.type==="file"&&/^index\.(md|html)$/i.test(c.name));
lbl.addEventListener("click", () => { if(idx) openPath(idx.path); else d.classList.toggle("open");
const idx = node.children.find(c => c.type === "file" && /^index\.(md|html)$/i.test(c.name));
if (idx) openPath(idx.path);
else div.classList.toggle("open");
}); });
div.appendChild(lbl); d.appendChild(lbl);
const kids = document.createElement("div"); const kids=document.createElement("div");
kids.className = "children"; kids.className="children";
node.children.forEach(c => kids.appendChild(renderNode(c))); n.children.forEach(c=>kids.appendChild(renderNode(c)));
div.appendChild(kids); d.appendChild(kids);
return div; return d;
} }
const a = document.createElement("a"); const a=document.createElement("a");
a.className = "file"; a.className="file";
a.innerHTML = `${node.pinned ? '<span class="pin">📌</span>' : ''}${iconForExt(node.ext)} ${node.title} <span class="meta">(${fmtDate(node.mtime)} · ${node.name})</span>`; a.innerHTML=`${n.pinned?'📌 ':''}${iconForExt(n.ext)} ${n.title}
a.addEventListener("click", e => { e.preventDefault(); openPath(node.path); }); <span class="meta">(${fmtDate(n.mtime)} · ${n.name})</span>`;
PATH_TO_EL.set(node.path, a); a.addEventListener("click",e=>{e.preventDefault();openPath(n.path);});
PATH_TO_EL.set(n.path,a);
return a; return a;
} }
function iconForExt(ext) { return ext === ".md" ? "📝" : "🧩"; } function iconForExt(ext){return ext===".md"?"📝":"🧩";}
function fmtDate(ms) { return new Date(ms).toISOString().slice(0, 10); } function fmtDate(ms){return new Date(ms).toISOString().slice(0,10);}
function findDir(path) {
path = path.replace(/\/$/, ''); function findDir(p){
function search(node) { p=p.replace(/\/$/,'');
if (node.type === "dir" && node.path === path) return node; function search(n){
for (const c of node.children || []) { if(n.type==="dir"&&n.path===p) return n;
const found = search(c); for(const c of n.children||[]){const f=search(c);if(f)return f;}
if (found) return found;
}
} }
return search({ children: INDEX.tree }); return search({children:INDEX.tree});
} }
async function openPath(path) {
if (path === CURRENT_PATH) return; async function openPath(path){
CURRENT_PATH = path; if(path===CURRENT_PATH) return;
if (location.hash !== `#=${path}`) history.pushState(null, "", `#=${path}`); CURRENT_PATH=path;
let f = INDEX.flat.find(x => x.path === path); if(location.hash!==`#=${path}`) history.pushState(null,"",`#=${path}`);
if (!f) {
const dir = findDir(path); let f=INDEX.flat.find(x=>x.path===path);
if (dir) { if(!f){
const idx = dir.children.find(c => c.type === "file" && /^index\.(md|html)$/i.test(c.name)); const dir=findDir(path);
if (idx) return openPath(idx.path); if(dir){
const idx=dir.children.find(c=>c.type==="file"&&/^index\.(md|html)$/i.test(c.name));
if(idx) return openPath(idx.path);
} }
metaLine.textContent = "Path not found: " + path; metaLine.textContent="Path not found: "+path;
return; return;
} }
metaLine.textContent = `${f.pinned ? "📌 " : ""}${fmtDate(f.mtime)} • ${f.name}`;
if (f.ext === ".md") await renderMarkdown(f.path); metaLine.textContent=`${f.pinned?"📌 ":""}${fmtDate(f.mtime)} • ${f.name}`;
if(f.ext===".md") await renderMarkdown(f.path);
else renderHTML(f.path); else renderHTML(f.path);
setActive(path); setActive(path);
updatePager(); updatePager();
if (window.innerWidth < 900) sidebar.classList.remove("open"); if(window.innerWidth<900) sidebar.classList.remove("open");
} }
async function renderMarkdown(path) {
mdView.innerHTML = "<p style='color:var(--muted);font-style:italic;'>Loading…</p>"; /* ---------- Markdown (robust) ---------- */
mdView.style.display = "block"; async function renderMarkdown(path){
htmlView.style.display = "none"; mdWarn.style.display = "none";
try { mdView.innerHTML="<p class='loading-note'>Loading…</p>";
const res = await fetch("/" + path); htmlView.style.display="none";
if (!res.ok) throw new Error("File not found: " + path); mdView.style.display="block";
const text = await res.text();
let html = text.replace(/&/g, '&amp;').replace(/</g, '&lt;'); try{
let usedFallback = true; const res=await fetch("/"+path, { cache: "no-store" });
if(!res.ok) throw new Error("File not found: "+path);
const text=await res.text();
let usedFallback = false;
let html;
if (window.marked) { if (window.marked) {
html = window.marked.parse(text); html = window.marked.parse(text);
usedFallback = false; } else {
// explicit, visible signal
usedFallback = true;
html = text.replace(/&/g,"&amp;").replace(/</g,"&lt;");
} }
let safe = html;
if (window.DOMPurify) safe = window.DOMPurify.sanitize(html); const safe = window.DOMPurify ? window.DOMPurify.sanitize(html) : html;
requestAnimationFrame(() => {
requestAnimationFrame(()=>{
mdView.innerHTML = safe; mdView.innerHTML = safe;
mdView.scrollTop = 0; mdView.scrollTop = 0;
mdView.classList.add("fade-in"); mdView.classList.add("fade-in");
mdView.style.display = "block";
if (usedFallback) mdWarn.style.display = "block";
}); });
if (usedFallback) console.warn("Markdown rendered as plain text: marked.js not loaded. Check CDN or vendor locally.");
} catch (e) { }catch(e){
mdView.innerHTML = `<p style='color:red;'>${e.message}</p>`; mdView.innerHTML=`<p style='color:red;'>${e.message}</p>`;
} }
} }
function renderHTML(path) {
htmlView.style.display = "none"; /* ---------- HTML ---------- */
mdView.style.display = "none"; function renderHTML(path){
metaLine.innerHTML += " <span style='color:var(--muted);'>Loading…</span>"; htmlView.src="/"+path;
htmlView.src = "/" + path; htmlView.style.display="block";
htmlView.onload = () => { mdView.style.display="none";
htmlView.style.display = "block";
htmlView.classList.add("fade-in");
metaLine.innerHTML = metaLine.innerHTML.replace(" Loading…", "");
};
htmlView.onerror = () => metaLine.innerHTML += " <span style='color:red;'>Load failed.</span>";
} }
function setActive(path) {
document.querySelectorAll(".file.active").forEach(el => el.classList.remove("active")); /* ---------- Active + Pager ---------- */
const el = PATH_TO_EL.get(path); function setActive(path){
if (el) { document.querySelectorAll(".file.active").forEach(el=>el.classList.remove("active"));
const el=PATH_TO_EL.get(path);
if(el){
el.classList.add("active"); el.classList.add("active");
let p = el.parentElement; let p=el.parentElement;
while (p && p !== treeEl) { while(p&&p!==treeEl){
if (p.classList.contains("children")) p.parentElement.classList.add("open"); if(p.classList.contains("children")) p.parentElement.classList.add("open");
p = p.parentElement; p=p.parentElement;
} }
} }
} }
function updatePager() { function updatePager(){
const query = searchBox.value.trim().toLowerCase(); const q=searchBox.value.trim().toLowerCase();
const list = INDEX.flat.filter(f => (filterSel.value === "all" || f.path.split("/")[0] === filterSel.value) && (!query || f.title.toLowerCase().includes(query))); const list=INDEX.flat.filter(f=>
const cmp = sortSel.value === "name" ? (a, b) => a.name.localeCompare(b.name) : (filterSel.value==="all"||f.path.split("/")[0]===filterSel.value)&&
sortSel.value === "old" ? (a, b) => a.mtime - b.mtime : (a, b) => b.mtime - a.mtime; (!q||f.title.toLowerCase().includes(q))
);
const cmp=sortSel.value==="name"?(a,b)=>a.name.localeCompare(b.name)
:sortSel.value==="old"?(a,b)=>a.mtime-b.mtime
:(a,b)=>b.mtime-a.mtime;
list.sort(cmp); list.sort(cmp);
const i = list.findIndex(x => x.path === CURRENT_PATH); const i=list.findIndex(x=>x.path===CURRENT_PATH);
prevBtn.disabled = i <= 0; prevBtn.disabled=i<=0;
nextBtn.disabled = i >= list.length - 1 || i < 0; nextBtn.disabled=i>=list.length-1||i<0;
prevBtn.onclick = () => i > 0 && openPath(list[i - 1].path); prevBtn.onclick=()=>i>0&&openPath(list[i-1].path);
nextBtn.onclick = () => i < list.length - 1 && openPath(list[i + 1].path); nextBtn.onclick=()=>i<list.length-1&&openPath(list[i+1].path);
} }
/* Controls */
let searchTimer; let searchTimer;
searchBox.addEventListener("input", () => { clearTimeout(searchTimer); searchTimer = setTimeout(rebuildTree, 300); }); searchBox.addEventListener("input",()=>{
sortSel.addEventListener("change", rebuildTree); clearTimeout(searchTimer);
filterSel.addEventListener("change", rebuildTree); searchTimer=setTimeout(rebuildTree,300);
document.body.addEventListener("click", e => { });
const a = e.target.closest("a[href]"); sortSel.addEventListener("change",rebuildTree);
if (!a) return; filterSel.addEventListener("change",rebuildTree);
const href = a.getAttribute("href");
if (href.startsWith("/") && !href.startsWith("//") && !a.target) { /* Internal link interception */
document.body.addEventListener("click",e=>{
const a=e.target.closest("a[href]");
if(!a) return;
const href=a.getAttribute("href");
if(href.startsWith("/")&&!href.startsWith("//")&&!a.target){
e.preventDefault(); e.preventDefault();
openPath(href.replace(/^\//, "")); openPath(href.replace(/^\//,""));
} }
}); });
window.addEventListener("resize", () => { if (window.innerWidth < 900) sidebar.classList.remove("open"); });
window.addEventListener("DOMContentLoaded", loadIndex); window.addEventListener("resize",()=>{ if(window.innerWidth<900) sidebar.classList.remove("open"); });
window.addEventListener("DOMContentLoaded",loadIndex);