Update app.js
This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42
GitHub
parent
b842ef88d0
commit
b52784805c
1 changed files with 137 additions and 211 deletions
318
public/app.js
318
public/app.js
|
|
@ -1,9 +1,4 @@
|
|||
/* ============================================================
|
||||
Self-Organizing Static Site Framework v2.3.3
|
||||
============================================================ */
|
||||
|
||||
let INDEX, CURRENT_PATH = null, PATH_TO_EL = new Map();
|
||||
|
||||
const treeEl = document.getElementById("tree");
|
||||
const mdView = document.getElementById("mdView");
|
||||
const htmlView = document.getElementById("htmlView");
|
||||
|
|
@ -17,59 +12,26 @@ const sidebar = document.querySelector(".sidebar");
|
|||
const navToggle = document.getElementById("navToggle");
|
||||
const overlay = document.querySelector(".overlay");
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Utility: ensure external libs are ready before running
|
||||
------------------------------------------------------------- */
|
||||
async function ensureLibsReady() {
|
||||
let tries = 0;
|
||||
while ((!window.marked || !window.DOMPurify) && tries < 40) {
|
||||
await new Promise(r => setTimeout(r, 100));
|
||||
tries++;
|
||||
}
|
||||
if (!window.marked) console.warn("⚠️ marked.js not detected — markdown will show as plain text.");
|
||||
if (!window.DOMPurify) console.warn("⚠️ DOMPurify not detected — HTML not sanitized.");
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Sidebar toggle and overlay
|
||||
------------------------------------------------------------- */
|
||||
navToggle.addEventListener("click", () => sidebar.classList.toggle("open"));
|
||||
overlay.addEventListener("click", () => sidebar.classList.remove("open"));
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Load and render index.json
|
||||
------------------------------------------------------------- */
|
||||
async function loadIndex() {
|
||||
await ensureLibsReady();
|
||||
const res = await fetch("/index.json", { cache: "no-store" });
|
||||
INDEX = await res.json();
|
||||
populateFilters();
|
||||
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);
|
||||
}
|
||||
|
||||
function populateFilters() {
|
||||
filterSel.innerHTML = '<option value="all">All</option>';
|
||||
for (const cat of INDEX.sections) {
|
||||
const o = document.createElement("option");
|
||||
o.value = o.textContent = cat;
|
||||
filterSel.appendChild(o);
|
||||
const opt = document.createElement("option");
|
||||
opt.value = opt.textContent = cat;
|
||||
filterSel.appendChild(opt);
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Build directory tree
|
||||
------------------------------------------------------------- */
|
||||
function rebuildTree() {
|
||||
treeEl.innerHTML = "";
|
||||
PATH_TO_EL.clear();
|
||||
|
|
@ -77,193 +39,157 @@ function rebuildTree() {
|
|||
const sort = sortSel.value;
|
||||
const query = searchBox.value.trim().toLowerCase();
|
||||
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);
|
||||
for (const c of pruned.children) treeEl.appendChild(renderNode(c));
|
||||
treeEl.querySelectorAll(".dir").forEach(d => d.classList.add("open"));
|
||||
}
|
||||
|
||||
function filterTree(node, keep) {
|
||||
if (node.type === "file") return keep(node) ? node : null;
|
||||
const kids = node.children.map(c=>filterTree(c,keep)).filter(Boolean);
|
||||
return kids.length ? {...node, children:kids} : null;
|
||||
const kids = node.children.map(c => filterTree(c, keep)).filter(Boolean);
|
||||
return kids.length ? { ...node, children: kids } : null;
|
||||
}
|
||||
|
||||
function sortDir(node, sort) {
|
||||
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;
|
||||
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));
|
||||
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;
|
||||
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(n) {
|
||||
if (n.type==="dir") {
|
||||
const d = document.createElement("div");
|
||||
d.className="dir"; d.setAttribute("aria-expanded","false");
|
||||
const lbl=document.createElement("span");
|
||||
lbl.className="label"; lbl.textContent=n.name||"/";
|
||||
lbl.addEventListener("click",()=>{
|
||||
const idx=n.children.find(c=>c.type==="file"&&/^index\.(md|html)$/i.test(c.name));
|
||||
if(idx) openPath(idx.path); else d.classList.toggle("open");
|
||||
function renderNode(node) {
|
||||
if (node.type === "dir") {
|
||||
const div = document.createElement("div");
|
||||
div.className = "dir";
|
||||
div.setAttribute("aria-expanded", "false");
|
||||
const lbl = document.createElement("span");
|
||||
lbl.className = "label";
|
||||
lbl.textContent = node.name || "/";
|
||||
lbl.addEventListener("click", () => {
|
||||
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");
|
||||
});
|
||||
d.appendChild(lbl);
|
||||
const kids=document.createElement("div");
|
||||
kids.className="children";
|
||||
n.children.forEach(c=>kids.appendChild(renderNode(c)));
|
||||
d.appendChild(kids);
|
||||
return d;
|
||||
div.appendChild(lbl);
|
||||
const kids = document.createElement("div");
|
||||
kids.className = "children";
|
||||
node.children.forEach(c => kids.appendChild(renderNode(c)));
|
||||
div.appendChild(kids);
|
||||
return div;
|
||||
}
|
||||
const a=document.createElement("a");
|
||||
a.className="file";
|
||||
a.innerHTML=`${n.pinned?'📌 ':''}${iconForExt(n.ext)} ${n.title}
|
||||
<span class="meta">(${fmtDate(n.mtime)} · ${n.name})</span>`;
|
||||
a.addEventListener("click",e=>{e.preventDefault();openPath(n.path);});
|
||||
PATH_TO_EL.set(n.path,a);
|
||||
const a = document.createElement("a");
|
||||
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.addEventListener("click", e => { e.preventDefault(); openPath(node.path); });
|
||||
PATH_TO_EL.set(node.path, a);
|
||||
return a;
|
||||
}
|
||||
|
||||
function iconForExt(ext){return ext===".md"?"📝":"🧩";}
|
||||
function fmtDate(ms){return new Date(ms).toISOString().slice(0,10);}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Path navigation
|
||||
------------------------------------------------------------- */
|
||||
function findDir(p){
|
||||
p=p.replace(/\/$/,'');
|
||||
function search(n){
|
||||
if(n.type==="dir"&&n.path===p) return n;
|
||||
for(const c of n.children||[]){const f=search(c);if(f)return f;}
|
||||
function iconForExt(ext) { return ext === ".md" ? "📝" : "🧩"; }
|
||||
function fmtDate(ms) { return new Date(ms).toISOString().slice(0, 10); }
|
||||
function findDir(path) {
|
||||
path = path.replace(/\/$/, '');
|
||||
function search(node) {
|
||||
if (node.type === "dir" && node.path === path) return node;
|
||||
for (const c of node.children || []) {
|
||||
const found = search(c);
|
||||
if (found) return found;
|
||||
}
|
||||
return search({children:INDEX.tree});
|
||||
}
|
||||
return search({ children: INDEX.tree });
|
||||
}
|
||||
|
||||
async function openPath(path){
|
||||
if(path===CURRENT_PATH) return;
|
||||
CURRENT_PATH=path;
|
||||
if(location.hash!==`#=${path}`) history.pushState(null,"",`#=${path}`);
|
||||
|
||||
let f=INDEX.flat.find(x=>x.path===path);
|
||||
if(!f){
|
||||
const dir=findDir(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);
|
||||
async function openPath(path) {
|
||||
if (path === CURRENT_PATH) return;
|
||||
CURRENT_PATH = path;
|
||||
if (location.hash !== `#=${path}`) history.pushState(null, "", `#=${path}`);
|
||||
let f = INDEX.flat.find(x => x.path === path);
|
||||
if (!f) {
|
||||
const dir = findDir(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;
|
||||
}
|
||||
|
||||
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);
|
||||
setActive(path);
|
||||
updatePager();
|
||||
if(window.innerWidth<900) sidebar.classList.remove("open");
|
||||
if (window.innerWidth < 900) sidebar.classList.remove("open");
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Markdown rendering (stable version)
|
||||
------------------------------------------------------------- */
|
||||
async function renderMarkdown(path){
|
||||
mdView.innerHTML="<p style='color:var(--muted);font-style:italic;'>Loading…</p>";
|
||||
htmlView.style.display="none";
|
||||
mdView.style.display="block";
|
||||
|
||||
try{
|
||||
const res=await fetch("/"+path);
|
||||
if(!res.ok) throw new Error("File not found: "+path);
|
||||
const text=await res.text();
|
||||
|
||||
let html=text.replace(/&/g,"&").replace(/</g,"<");
|
||||
let usedFallback=true;
|
||||
if(window.marked){ html=window.marked.parse(text); usedFallback=false; }
|
||||
let safe=html;
|
||||
if(window.DOMPurify) safe=window.DOMPurify.sanitize(html);
|
||||
|
||||
requestAnimationFrame(()=>{
|
||||
mdView.innerHTML=safe;
|
||||
mdView.scrollTop=0; // reset scroll to top
|
||||
async function renderMarkdown(path) {
|
||||
mdView.innerHTML = "<p style='color:var(--muted);font-style:italic;'>Loading…</p>";
|
||||
mdView.style.display = "block";
|
||||
htmlView.style.display = "none";
|
||||
try {
|
||||
const res = await fetch("/" + path);
|
||||
if (!res.ok) throw new Error("File not found: " + path);
|
||||
const text = await res.text();
|
||||
let html = text.replace(/&/g, '&').replace(/</g, '<');
|
||||
let usedFallback = true;
|
||||
if (window.marked) {
|
||||
html = window.marked.parse(text);
|
||||
usedFallback = false;
|
||||
}
|
||||
let safe = html;
|
||||
if (window.DOMPurify) safe = window.DOMPurify.sanitize(html);
|
||||
requestAnimationFrame(() => {
|
||||
mdView.innerHTML = safe;
|
||||
mdView.scrollTop = 0;
|
||||
mdView.classList.add("fade-in");
|
||||
mdView.style.display="block";
|
||||
});
|
||||
|
||||
if(usedFallback) console.warn("Markdown rendered as plain text (marked.js missing).");
|
||||
}catch(e){
|
||||
mdView.innerHTML=`<p style='color:red;'>${e.message}</p>`;
|
||||
if (usedFallback) console.warn("Markdown rendered as plain text: marked.js not loaded. Check CDN or vendor locally.");
|
||||
} catch (e) {
|
||||
mdView.innerHTML = `<p style='color:red;'>${e.message}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
HTML rendering
|
||||
------------------------------------------------------------- */
|
||||
function renderHTML(path){
|
||||
htmlView.src="/"+path;
|
||||
htmlView.style.display="block";
|
||||
mdView.style.display="none";
|
||||
function renderHTML(path) {
|
||||
htmlView.style.display = "none";
|
||||
mdView.style.display = "none";
|
||||
metaLine.innerHTML += " <span style='color:var(--muted);'>Loading…</span>";
|
||||
htmlView.src = "/" + path;
|
||||
htmlView.onload = () => {
|
||||
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>";
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Active state + pager
|
||||
------------------------------------------------------------- */
|
||||
function setActive(path){
|
||||
document.querySelectorAll(".file.active").forEach(el=>el.classList.remove("active"));
|
||||
const el=PATH_TO_EL.get(path);
|
||||
if(el){
|
||||
function setActive(path) {
|
||||
document.querySelectorAll(".file.active").forEach(el => el.classList.remove("active"));
|
||||
const el = PATH_TO_EL.get(path);
|
||||
if (el) {
|
||||
el.classList.add("active");
|
||||
let p=el.parentElement;
|
||||
while(p&&p!==treeEl){
|
||||
if(p.classList.contains("children")) p.parentElement.classList.add("open");
|
||||
p=p.parentElement;
|
||||
let p = el.parentElement;
|
||||
while (p && p !== treeEl) {
|
||||
if (p.classList.contains("children")) p.parentElement.classList.add("open");
|
||||
p = p.parentElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updatePager(){
|
||||
const q=searchBox.value.trim().toLowerCase();
|
||||
const list=INDEX.flat.filter(f=>
|
||||
(filterSel.value==="all"||f.path.split("/")[0]===filterSel.value)&&
|
||||
(!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;
|
||||
function updatePager() {
|
||||
const query = 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 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);
|
||||
const i=list.findIndex(x=>x.path===CURRENT_PATH);
|
||||
prevBtn.disabled=i<=0;
|
||||
nextBtn.disabled=i>=list.length-1||i<0;
|
||||
prevBtn.onclick=()=>i>0&&openPath(list[i-1].path);
|
||||
nextBtn.onclick=()=>i<list.length-1&&openPath(list[i+1].path);
|
||||
const i = list.findIndex(x => x.path === CURRENT_PATH);
|
||||
prevBtn.disabled = i <= 0;
|
||||
nextBtn.disabled = i >= list.length - 1 || i < 0;
|
||||
prevBtn.onclick = () => i > 0 && openPath(list[i - 1].path);
|
||||
nextBtn.onclick = () => i < list.length - 1 && openPath(list[i + 1].path);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Search / filter / sort
|
||||
------------------------------------------------------------- */
|
||||
let searchTimer;
|
||||
searchBox.addEventListener("input",()=>{
|
||||
clearTimeout(searchTimer);
|
||||
searchTimer=setTimeout(rebuildTree,300);
|
||||
});
|
||||
sortSel.addEventListener("change",rebuildTree);
|
||||
filterSel.addEventListener("change",rebuildTree);
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
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){
|
||||
searchBox.addEventListener("input", () => { clearTimeout(searchTimer); searchTimer = setTimeout(rebuildTree, 300); });
|
||||
sortSel.addEventListener("change", rebuildTree);
|
||||
filterSel.addEventListener("change", rebuildTree);
|
||||
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();
|
||||
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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue