Update app.js

public/app.js

@@ -9,39 +9,46 @@ const els = {
   content: document.getElementById("content")
 };
 
+const staticPages = new Set(["about", "contact", "legal"]);
+
 let indexData = null;
-let state = { section: "posts", sort: "newest", query: "", sidebarOpen: false };
+let sidebarOpen = false;
 
 async function init() {
+  try {
     indexData = await (await fetch("index.json")).json();
     populateSections();
     wireUI();
     renderList();
     handleHash();
     window.addEventListener("hashchange", handleHash);
+  } catch (e) {
+    els.viewer.innerHTML = "<h1>Error Loading Index</h1><p>Failed to load site data. Please try refreshing.</p>";
+  }
 }
 
 function populateSections() {
   els.sectionSelect.innerHTML = "";
   indexData.sections.forEach(s => {
     const opt = document.createElement("option");
-    opt.value = s; opt.textContent = s;
+    opt.value = s;
+    opt.textContent = s;
     els.sectionSelect.appendChild(opt);
   });
 }
 
 function wireUI() {
   els.menuBtn.addEventListener("click", () => {
-    state.sidebarOpen = !state.sidebarOpen;
+    sidebarOpen = !sidebarOpen;
-    document.body.classList.toggle("sidebar-open", state.sidebarOpen);
+    document.body.classList.toggle("sidebar-open", sidebarOpen);
   });
-  els.sectionSelect.addEventListener("change", ()=>renderList());
+  els.sectionSelect.addEventListener("change", renderList);
-  els.sortSelect.addEventListener("change", ()=>renderList());
+  els.sortSelect.addEventListener("change", renderList);
-  els.searchBox.addEventListener("input", ()=>renderList());
+  els.searchBox.addEventListener("input", renderList);
   els.content.addEventListener("click", () => {
     if (window.matchMedia("(max-width:1024px)").matches && document.body.classList.contains("sidebar-open")) {
       document.body.classList.remove("sidebar-open");
-      state.sidebarOpen = false;
+      sidebarOpen = false;
     }
   });
 }
@@ -51,28 +58,57 @@ function renderList(){
   const sort = els.sortSelect.value;
   const query = els.searchBox.value.toLowerCase();
 
-  let posts = indexData.flat.filter(p=>p.path.startsWith(section));
+  let posts = indexData.flat.filter(p => p.path.split('/')[0] === section);
   if (query) posts = posts.filter(p => p.title.toLowerCase().includes(query));
   posts.sort((a, b) => sort === "newest" ? b.mtime - a.mtime : a.mtime - b.mtime);
 
   els.postList.innerHTML = "";
   for (const p of posts) {
     const li = document.createElement("li");
-    li.innerHTML = `<a href="#/${p.path}">${p.title}</a><br><small>${new Date(p.mtime).toISOString().split("T")[0]}</small>`;
+    const pin = p.pinned ? "&#9733; " : "";
+    li.innerHTML = `<a href="#/${p.path}">${pin}${p.title}</a><br><small>${new Date(p.mtime).toISOString().split("T")[0]}</small>`;
     els.postList.appendChild(li);
   }
 }
 
 async function handleHash() {
+  els.viewer.innerHTML = ""; // Clear viewer to avoid stale content
   const rel = location.hash.replace(/^#\//, "");
   if (!rel) return renderDefault();
+
+  if (rel.endsWith('/')) {
+    const section = rel.replace(/\/$/, '');
+    if (staticPages.has(section)) {
+      renderHTML(section + '/index.html');
+    } else if (indexData.sections.includes(section)) {
+      els.sectionSelect.value = section;
+      renderList();
+      const sectionPosts = indexData.flat.filter(p => p.path.split('/')[0] === section);
+      if (sectionPosts.length === 0) {
+        els.viewer.innerHTML = `<h1>${section.charAt(0).toUpperCase() + section.slice(1)}</h1><p>No posts in this section yet.</p>`;
+      } else {
+        const latest = sectionPosts.sort((a, b) => b.mtime - a.mtime)[0];
+        location.hash = '#/' + latest.path; // Triggers hashchange to load
+      }
+    } else {
+      els.viewer.innerHTML = '<h1>404 Not Found</h1>';
+    }
+  } else {
     const file = indexData.flat.find(f => f.path === rel);
-  if (!file) return;
+    if (!file) {
+      els.viewer.innerHTML = '<h1>404 Not Found</h1>';
+      return;
+    }
+    try {
       file.ext === ".md" ? await renderMarkdown(file.path) : renderHTML(file.path);
+    } catch (e) {
+      els.viewer.innerHTML = '<h1>Error Loading Content</h1><p>Failed to load the file. Please try another.</p>';
+    }
+  }
 }
 
 async function renderMarkdown(rel) {
-  const src = await fetch(rel).then(r=>r.text());
+  const src = await fetch(rel).then(r => { if (!r.ok) throw new Error(); return r.text(); });
   const html = marked.parse(src);
   els.viewer.innerHTML = `<article>${html}</article>`;
 }
@@ -82,7 +118,6 @@ function renderHTML(rel){
   iframe.setAttribute("sandbox", "allow-same-origin allow-scripts allow-forms");
   iframe.loading = "eager";
   iframe.src = "/" + rel;
-  els.viewer.innerHTML = "";
   els.viewer.appendChild(iframe);
   iframe.addEventListener("load", () => {
     try {