Update app.js

public/app.js

@@ -1,90 +1,191 @@
-let INDEX = null;
+// Elements
-let CURRENT_PATH = null;
+const sidebar   = document.getElementById("sidebar");
 const treeEl    = document.getElementById("tree");
 const metaEl    = document.getElementById("meta");
 const mdView    = document.getElementById("mdView");
 const htmlView  = document.getElementById("htmlView");
+const errorBox  = document.getElementById("errorBox");
 const sortSel   = document.getElementById("sortSel");
 const filterSel = document.getElementById("filterSel");
+const searchBox = document.getElementById("searchBox");
 const navToggle = document.getElementById("navToggle");
+const backdrop  = document.getElementById("backdrop");
 
-navToggle.addEventListener("click", () =>
+// State
-  document.querySelector(".sidebar").classList.toggle("open")
+let INDEX = null;
-);
+let CURRENT_PATH = null;
+let PATH_TO_EL = new Map();
 
+// Drawer controls (mobile)
+navToggle.addEventListener("click", () => sidebar.classList.toggle("open"));
+backdrop.addEventListener("click", () => sidebar.classList.remove("open"));
+
+// -------- Boot --------
+window.addEventListener("DOMContentLoaded", async () => {
+  await loadIndex();
+  if (!INDEX) return;
+
+  sortSel.addEventListener("change", rebuildTree);
+  filterSel.addEventListener("change", rebuildTree);
+  searchBox.addEventListener("input", rebuildTree);
+
+  window.addEventListener("popstate", () => {
+    const hp = location.hash.startsWith("#=") ? location.hash.slice(2) : null;
+    if (hp) openPath(hp, {push:false});
+  });
+
+  const initial = location.hash.startsWith("#=") ? location.hash.slice(2) : null;
+  if (initial) openPath(initial, {push:false});
+  else autoOpenLatest();
+});
+
+// -------- Data loading --------
 async function loadIndex() {
-  try {
+  try{
-    const res = await fetch("index.json");
+    const res = await fetch("index.json",{cache:"no-store"});
     INDEX = await res.json();
-  } catch {
-    treeEl.innerHTML = "<p style='color:red'>index.json missing. run the build.</p>";
-    return;
-  }
     rebuildTree();
-  autoOpenLatest();
+  }catch(e){
+    treeEl.innerHTML = "<p style='color:#ff7a7a'>index.json missing. run the build.</p>";
+  }
 }
 
+// -------- Tree building / sorting / filtering --------
 function rebuildTree() {
+  if (!INDEX) return;
+  PATH_TO_EL.clear();
   treeEl.innerHTML = "";
-  const roots = ["pinned", "posts"];
+
-  for (const root of roots) {
+  const sort = sortSel.value;
-    const dir = INDEX.tree.find(d => d.name === root);
+  const filter = filterSel.value;
-    if (dir) {
+  const query = searchBox.value.trim().toLowerCase();
-      const h = document.createElement("div");
+
-      h.className = "dir";
+  const roots = INDEX.tree
-      h.textContent = root;
+    .filter(d => filter==="all" || d.name===filter)
-      treeEl.appendChild(h);
+    .map(d => deepClone(d));
-      dir.children.forEach(f => treeEl.appendChild(renderFile(f)));
+
-    }
+  roots.forEach(r => {
-  }
+    applySort(r, sort);
+    const filtered = applySearch(r, query);
+    if (filtered) treeEl.appendChild(renderNode(filtered));
+  });
+
+  // Auto-expand top dirs
+  treeEl.querySelectorAll(".dir").forEach(d => d.classList.add("open"));
 }
 
-function renderFile(f) {
+function deepClone(obj){ return JSON.parse(JSON.stringify(obj)); }
+function getDate(n){ return n.mtime || 0; }
+
+function applySort(dir, sort) {
+  if (dir.type !== "dir") return;
+  const cmp =
+    sort==="alpha" ? (a,b)=> (a.title||a.name).localeCompare(b.title||b.name) :
+    sort==="old"   ? (a,b)=> getDate(a)-getDate(b) :
+                     (a,b)=> getDate(b)-getDate(a);
+  dir.children.sort((a,b)=>{
+    if (a.type!==b.type){ return a.type==="dir" ? -1 : 1; } // dirs first
+    return cmp(a,b);
+  });
+  dir.children.forEach(c => c.type==="dir" && applySort(c, sort));
+}
+
+function applySearch(node, q) {
+  if (!q) return node;
+  if (node.type==="file"){
+    const t = (node.title||node.name).toLowerCase();
+    return t.includes(q)? node : null;
+  }
+  const kids = node.children.map(c=>applySearch(c,q)).filter(Boolean);
+  if (!kids.length) return null;
+  node.children = kids;
+  return node;
+}
+
+// Recursive renderer
+function renderNode(node){
+  if (node.type==="dir"){
+    const wrap = document.createElement("div");
+    wrap.className = "dir";
+    wrap.setAttribute("role","treeitem");
+    const lbl = document.createElement("div");
+    lbl.className = "label";
+    lbl.textContent = node.name;
+    lbl.addEventListener("click", () => wrap.classList.toggle("open"));
+    const kids = document.createElement("div");
+    kids.className = "children";
+    node.children.forEach(c => kids.appendChild(renderNode(c)));
+    wrap.append(lbl, kids);
+    return wrap;
+  } else {
     const a = document.createElement("a");
     a.className = "file";
-  a.textContent = (f.pinned ? "📌 " : "") + f.name;
+    a.setAttribute("role","treeitem");
-  a.addEventListener("click", e => {
+    a.href = `#=${node.path}`;
-    e.preventDefault();
+    a.innerHTML = `${node.pinned?'<span class="pin">PIN</span> ':''}${escapeHtml(node.title||node.name)}`;
-    openPath(f.path);
+    a.addEventListener("click", e => { e.preventDefault(); openPath(node.path); });
-  });
+    PATH_TO_EL.set(node.path, a);
     return a;
+  }
 }
 
-function autoOpenLatest() {
+function escapeHtml(s){ return s.replace(/[&<>"']/g,c=>({ "&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#39;" }[c])); }
-  if (!INDEX.flat?.length) return;
+
-  const sorted = [...INDEX.flat].sort((a,b)=>b.mtime - a.mtime);
+// -------- Opening / rendering files --------
-  openPath(sorted[0].path);
+function autoOpenLatest(){
+  if (!INDEX?.flat?.length) return;
+  const latest = [...INDEX.flat].sort((a,b)=>getDate(b)-getDate(a))[0];
+  if (latest) openPath(latest.path,{push:false});
 }
 
-async function openPath(path) {
+async function openPath(path,{push=true}={}){
-  if (path === CURRENT_PATH) return;
+  if (!INDEX) return;
+  if (path===CURRENT_PATH) return;
+  const f = INDEX.flat.find(x=>x.path===path);
+  if (!f){ showError("File not found."); return; }
+
   CURRENT_PATH = path;
+  if (push && location.hash!==`#=${path}`) history.pushState(null,"",`#=${path}`);
 
-  const f = INDEX.flat.find(x => x.path === path);
+  hideError();
-  if (!f) return;
+  setActive(path);
+  metaEl.textContent = `${f.pinned?"Pinned • ":""}${new Date(getDate(f)).toISOString().slice(0,10)} • ${f.title||f.name}`;
 
-  metaEl.textContent = `${f.pinned ? "Pinned • " : ""}${new Date(f.mtime).toISOString().slice(0,10)} • ${f.name}`;
+  if (f.ext === ".md") {
+    await renderMarkdown(path);
+  } else {
+    renderHTML(path);
+  }
 
-  if (f.ext === ".md") await renderMarkdown(path);
+  // close drawer on mobile
-  else await renderHTML(path);
+  if (window.innerWidth < 900) sidebar.classList.remove("open");
-
-  if (window.innerWidth < 900)
-    document.querySelector(".sidebar").classList.remove("open");
 }
 
-async function renderMarkdown(path) {
+async function renderMarkdown(path){
-  htmlView.style.display = "none";
+  htmlView.style.display="none";
-  mdView.style.display = "block";
+  mdView.style.display="block";
-  const res = await fetch(path);
+  try{
-  const text = await res.text();
+    const res = await fetch(path,{cache:"no-store"});
-  const html = DOMPurify.sanitize(marked.parse(text));
+    if (!res.ok) throw new Error(res.statusText);
+    const txt = await res.text();
+    const html = window.DOMPurify?.sanitize(window.marked?.parse(txt) || txt) || txt;
     mdView.innerHTML = html;
+  }catch(e){
+    showError("Failed to load Markdown.");
+  }
 }
 
-async function renderHTML(path) {
+function renderHTML(path){
-  mdView.style.display = "none";
+  mdView.style.display="none";
-  htmlView.style.display = "block";
+  htmlView.style.display="block";
   htmlView.src = path;
 }
 
-window.addEventListener("DOMContentLoaded", loadIndex);
+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");
+}
+
+function showError(msg){ errorBox.textContent = msg; errorBox.hidden = false; }
+function hideError(){ errorBox.hidden = true; }