From 9ad541d4641de5762680942183463ac02125246b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mark=20Randall=20Havens=20=E2=96=B3=20The=20Empathic=20Tec?= =?UTF-8?q?hnologist=20=E2=9F=81=20Doctor=20Who=2042?= Date: Sat, 8 Nov 2025 23:29:53 -0600 Subject: [PATCH] Update app.js --- public/app.js | 269 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 268 insertions(+), 1 deletion(-) diff --git a/public/app.js b/public/app.js index 558e780..da748e0 100755 --- a/public/app.js +++ b/public/app.js @@ -6,4 +6,271 @@ const els = { tagSelect: document.getElementById("tagSelect"), sortSelect: document.getElementById("sortSelect"), searchMode: document.getElementById("searchMode"), - searchBox: \ No newline at end of file + searchBox: document.getElementById("searchBox"), + postList: document.getElementById("postList"), + viewer: document.getElementById("viewer"), + content: document.getElementById("content"), + toggleControls: document.getElementById("toggleControls"), + filterPanel: document.getElementById("filterPanel") +}; + +let indexData = null; +let sidebarOpen = false; +let currentParentSection = null; + +async function init() { + try { + indexData = await (await fetch("index.json")).json(); + populateNav(); + populateSections(); + populateTags(); + wireUI(); + renderList(); + handleHash(); + window.addEventListener("hashchange", handleHash); + } catch (e) { + els.viewer.innerHTML = "

Error

Failed to load site data.

"; + } +} + +// TOP NAV: Only real section folders with index.* +function populateNav() { + els.primaryNav.innerHTML = 'Home'; + const navSections = [...new Set( + indexData.flat + .filter(f => f.isIndex && f.path.split("/").length > 1) + .map(f => f.path.split("/")[0]) + )].sort(); + navSections.forEach(s => { + els.primaryNav.innerHTML += `${s.charAt(0).toUpperCase() + s.slice(1)}`; + }); +} + +// DROPDOWN: Only sections with NON-index files +function populateSections() { + els.sectionSelect.innerHTML = ''; + indexData.sections.forEach(s => { + const opt = document.createElement("option"); + opt.value = s; opt.textContent = s; + els.sectionSelect.appendChild(opt); + }); + + if (indexData.sections.includes("posts")) { + els.sectionSelect.value = "posts"; + } else if (indexData.sections.length > 0) { + els.sectionSelect.value = indexData.sections[0]; + } +} + +function populateTags() { + indexData.tags.forEach(t => { + const opt = document.createElement("option"); + opt.value = t; opt.textContent = t; + els.tagSelect.appendChild(opt); + }); +} + +function formatTimestamp(ms) { + 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() { + els.menuBtn.addEventListener("click", () => { + sidebarOpen = !sidebarOpen; + document.body.classList.toggle("sidebar-open", sidebarOpen); + }); + + els.toggleControls.addEventListener("click", () => { + const open = els.filterPanel.open; + els.filterPanel.open = !open; + els.toggleControls.textContent = open ? "Filters" : "Hide"; + }); + + els.sectionSelect.addEventListener("change", () => { + renderList(); + if (els.sectionSelect.value !== "all") loadDefaultForSection(els.sectionSelect.value); + }); + + [els.tagSelect, els.sortSelect, els.searchMode].forEach(el => el.addEventListener("change", renderList)); + els.searchBox.addEventListener("input", renderList); + + els.content.addEventListener("click", (e) => { + if (window.innerWidth < 1024 && document.body.classList.contains("sidebar-open")) { + if (!e.target.closest("#sidebar")) { + document.body.classList.remove("sidebar-open"); + sidebarOpen = false; + } + } + }); +} + +function renderList() { + const section = els.sectionSelect.value; + const tags = Array.from(els.tagSelect.selectedOptions).map(o => o.value.toLowerCase()); + const sort = els.sortSelect.value; + const mode = els.searchMode.value; + const query = els.searchBox.value.toLowerCase(); + + let posts = indexData.flat.filter(p => !p.isIndex); + if (section !== "all") posts = posts.filter(p => p.path.split('/')[0] === section); + if (tags.length) posts = posts.filter(p => tags.every(t => p.tags.includes(t))); + if (query) { + posts = posts.filter(p => { + const text = mode === "content" ? p.title + " " + p.excerpt : p.title; + return text.toLowerCase().includes(query); + }); + } + posts.sort((a, b) => sort === "newest" ? b.mtime - a.mtime : a.mtime - b.mtime); + + els.postList.innerHTML = posts.length ? "" : "
  • No posts found.
    • "; + posts.forEach(p => { + const li = document.createElement("li"); + const pin = p.isPinned ? "Star " : ""; + const time = formatTimestamp(p.ctime); + li.innerHTML = `${pin}${p.title}${time}`; + els.postList.appendChild(li); + }); +} + +function loadDefaultForSection(section) { + const posts = indexData.flat.filter(p => p.path.split('/')[0] === section && !p.isIndex); + if (!posts.length) { + els.viewer.innerHTML = `

    ${section}

    No content yet.

    `; + return; + } + const pinned = posts.find(p => p.isPinned) || posts.sort((a,b) => b.mtime - a.mtime)[0]; + location.hash = `#/${pinned.path}`; +} + +// HORIZON LAYER: Emergent Sub-Navigation +function renderSubNav(parent) { + const subnav = els.subNav; + subnav.innerHTML = ""; + subnav.classList.remove("visible"); + + if (!parent || !indexData.hierarchies?.[parent]) return; + + const subs = indexData.hierarchies[parent]; + subs.forEach(child => { + const link = document.createElement("a"); + link.href = `#/${parent}/${child}/`; + link.textContent = child.charAt(0).toUpperCase() + child.slice(1); + subnav.appendChild(link); + }); + + requestAnimationFrame(() => { + subnav.classList.add("visible"); + }); +} + +async function handleHash() { + els.viewer.innerHTML = ""; + const rel = location.hash.replace(/^#\//, ""); + const parts = rel.split("/").filter(Boolean); + + let parentSection = null; + if (parts.length >= 1) { + parentSection = parts[0]; + } + + // Update subnav if parent changed + if (parentSection !== currentParentSection) { + currentParentSection = parentSection; + renderSubNav(parentSection); + } + + if (!rel) return renderDefault(); + + if (rel.endsWith('/')) { + const section = parts[0]; + const indexFile = indexData.flat.find(f => + f.path.startsWith(section + "/") && f.isIndex + ); + + if (indexFile) { + try { + if (indexFile.ext === ".md") { + const src = await fetch(indexFile.path).then(r => r.ok ? r.text() : ""); + const html = marked.parse(src || `# ${section}\n\nNo content yet.`); + els.viewer.innerHTML = `
    ${html}
    `; + } else { + const iframe = document.createElement("iframe"); + iframe.src = "/" + indexFile.path; + iframe.loading = "eager"; + iframe.setAttribute("sandbox", "allow-same-origin allow-scripts allow-forms"); + els.viewer.appendChild(iframe); + + iframe.onload = () => { + try { + const doc = iframe.contentDocument; + const body = doc.body; + const hasContent = body && body.innerText.trim().length > 50; + if (!hasContent) { + doc.body.innerHTML = ` +
    +

    ${section}

    +

    No content yet.

    +
    + `; + doc.body.style.background = "#0b0b0b"; + } + } catch (e) {} + }; + } + } catch (e) { + els.viewer.innerHTML = `

    ${section}

    No content yet.

    `; + } + } else { + els.sectionSelect.value = section; + renderList(); + loadDefaultForSection(section); + } + } else { + const file = indexData.flat.find(f => f.path === rel); + if (!file) { + els.viewer.innerHTML = "

    404

    Not found.

    "; + return; + } + file.ext === ".md" ? await renderMarkdown(file.path) : renderIframe(file.path); + } +} + +async function renderMarkdown(rel) { + const src = await fetch(rel).then(r => r.ok ? r.text() : ""); + els.viewer.innerHTML = `
    ${marked.parse(src || "# Untitled")}
    `; +} + +function renderIframe(rel) { + const iframe = document.createElement("iframe"); + iframe.src = "/" + rel; + iframe.loading = "eager"; + iframe.setAttribute("sandbox", "allow-same-origin allow-scripts allow-forms"); + els.viewer.appendChild(iframe); + + iframe.onload = () => { + try { + const doc = iframe.contentDocument; + const style = doc.createElement("style"); + style.textContent = ` + html,body{background:#0b0b0b;color:#e6e3d7;font-family:Inter,sans-serif;margin:0;padding:2rem;} + *{max-width:720px;margin:auto;} + img, video, iframe {max-width:100%;height:auto;} + `; + doc.head.appendChild(style); + } catch (e) {} + }; +} + +function renderDefault() { + const defaultSection = indexData.sections.includes("posts") ? "posts" : (indexData.sections[0] || null); + if (defaultSection) { + els.sectionSelect.value = defaultSection; + renderList(); + loadDefaultForSection(defaultSection); + } else { + els.viewer.innerHTML = "

    Welcome

    Add content to begin.

    "; + } +} + +init(); \ No newline at end of file