diff --git a/public/app.js b/public/app.js index 205d1de..23cfa28 100755 --- a/public/app.js +++ b/public/app.js @@ -1,60 +1,65 @@ /** - * app.js – v3.3.3 FIELD COMMENTARY EDITION - * High-coherence, readable, maintainable blueprint. + * app.js – v3.3.4 DIAGNOSTIC RESONANCE + * High-coherence, readable, maintainable. * No hacks. No surgery. Only truth. - * Enhanced with modular sanitization, resilient recursion, and inline rationale. - * - * ΔFIELD: This script orchestrates the breathing field: navigation, routing, rendering. - * Rationale: Dependency-free; async fetches for dynamic content; stateful only where essential (e.g., sidebar). - * Assumptions: index.json provides metadata; marked.js for MD; DOM elements pre-exist in HTML skeleton. + * Now with diagnostic overlays for rupture illumination. */ const els = { - menuBtn: document.getElementById("menuBtn"), /* ΔHORIZON: Toggle for sidebar. */ - primaryNav: document.getElementById("primaryNav"), /* ΔHORIZON: Top-level sections. */ - subNav: document.getElementById("subNav"), /* ΔRECURSION: Nested sub-horizons. */ - sectionSelect: document.getElementById("sectionSelect"), /* ΔFIELD: Filter by section. */ - tagSelect: document.getElementById("tagSelect"), /* ΔFIELD: Multi-tag filter. */ - sortSelect: document.getElementById("sortSelect"), /* ΔRHYTHM: Time-based sorting. */ - searchMode: document.getElementById("searchMode"), /* ΔTRUTH: Scope of search. */ - searchBox: document.getElementById("searchBox"), /* ΔTRUTH: Query input. */ - postList: document.getElementById("postList"), /* ΔFIELD: Dynamic post enumeration. */ - viewer: document.getElementById("viewer"), /* ΔFIELD: Content rendering canvas. */ - content: document.getElementById("content"), /* ΔHORIZON: Main wrapper for click events. */ - toggleControls: document.getElementById("toggleControls"), /* ΔHORIZON: Filter panel toggle. */ - filterPanel: document.getElementById("filterPanel") /* ΔFIELD: Collapsible filters. */ + menuBtn: document.getElementById("menuBtn"), + primaryNav: document.getElementById("primaryNav"), + subNav: document.getElementById("subNav"), + sectionSelect: document.getElementById("sectionSelect"), + tagSelect: document.getElementById("tagSelect"), + sortSelect: document.getElementById("sortSelect"), + searchMode: document.getElementById("searchMode"), + 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; /* ΔRECURSION: Cached metadata for all operations. */ -let sidebarOpen = false; /* ΔBREATH: State for mobile sidebar. */ -let currentParent = null; /* ΔRECURSION: Track for subnav rendering. */ -let indexFiles = null; // Cached index files /* ΔRECURSION: Pre-filtered for quick lookups. */ +let indexData = null; +let sidebarOpen = false; +let currentParent = null; +let indexFiles = null; // Cached index files + +// ΔTRUTH: Diagnostic overlay for error/clarity banners. +// Rationale: Fixed red banner for immediate visibility; z-index above topbar. +function showDiagnostic(message) { + const banner = document.createElement('div'); + banner.style = 'position: fixed; top: 0; left: 0; width: 100%; background: #ff4d4d; color: white; padding: 10px; z-index: 1001; text-align: center; font-weight: bold;'; + banner.innerHTML = message; + document.body.appendChild(banner); +} // === INITIALIZATION === -/* ΔFIELD: Async init loads data and wires UI; fallback for errors. - * Rationale: Single entry point; console log as harmony affirmation. */ async function init() { try { - indexData = await (await fetch("index.json")).json(); /* ΔTRUTH: Source of all content truth. */ - indexFiles = indexData.flat.filter(f => f.isIndex); /* ΔRECURSION: Cache for directory indices. */ - populateNav(); /* ΔHORIZON: Build primary nav from sections. */ - populateSections(); /* ΔFIELD: Populate section dropdown. */ - populateTags(); /* ΔFIELD: Populate tag multi-select. */ - wireUI(); /* ΔHORIZON: Attach all event listeners. */ - renderList(); /* ΔFIELD: Initial post list render. */ - handleHash(); /* ΔRECURSION: Process current URL state. */ - window.addEventListener("hashchange", handleHash); /* ΔRECURSION: Listen for navigation. */ - console.info('%cThe Fold Within: Harmony sustained.', 'color:#e0b84b'); /* ΔFIELD: Dev resonance. */ + indexData = await (await fetch("index.json")).json(); + if (indexData.flat.length === 0) { + showDiagnostic('index.json loaded but no content files found. Add .md or .html files to public/ sections and run node tools/generate-index.mjs.'); + } + indexFiles = indexData.flat.filter(f => f.isIndex); + populateNav(); + populateSections(); + populateTags(); + wireUI(); + renderList(); + handleHash(); + window.addEventListener("hashchange", handleHash); + console.info('%cThe Fold Within: Harmony sustained.', 'color:#e0b84b'); } catch (e) { - els.viewer.innerHTML = "

Error

Failed to load site data.

"; /* ΔTRUTH: Graceful failure. */ + showDiagnostic('Failed to load index.json. Check Network tab for 404 or console for errors. Ensure deployed from public/ directory and index.json is generated.'); + els.viewer.innerHTML = "

Error

Failed to load site data. See diagnostic banner for fixes.

"; } } // === NAVIGATION === -/* ΔHORIZON: Dynamically build primary nav from unique top-level sections. - * Rationale: Sort for alphabetical order; capitalize for aesthetics. */ function populateNav() { - els.primaryNav.innerHTML = 'Home'; /* ΔFIELD: Fixed home anchor. */ + els.primaryNav.innerHTML = 'Home'; const navSections = [...new Set( indexData.flat .filter(f => f.isIndex && f.path.split("/").length > 1) @@ -65,8 +70,6 @@ function populateNav() { }); } -/* ΔFIELD: Section dropdown with default to 'posts' if available. - * Rationale: 'all' option for broad views. */ function populateSections() { els.sectionSelect.innerHTML = ''; indexData.sections.forEach(s => { @@ -79,8 +82,6 @@ function populateSections() { if (defaultSection) els.sectionSelect.value = defaultSection; } -/* ΔFIELD: Tags as multi-select options. - * Rationale: Lowercase normalization in filters for case-insensitivity. */ function populateTags() { indexData.tags.forEach(t => { const opt = document.createElement("option"); @@ -90,42 +91,38 @@ function populateTags() { } // === UI WIRING === -/* ΔHORIZON: Attach listeners for interactivity. - * Rationale: Centralized wiring; mobile-specific sidebar close on content click. */ function wireUI() { els.menuBtn.addEventListener("click", () => { sidebarOpen = !sidebarOpen; - document.body.classList.toggle("sidebar-open", sidebarOpen); /* ΔBREATH: Class toggle for CSS-driven motion. */ + 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"; /* ΔFIELD: Dynamic label for state clarity. */ + els.toggleControls.textContent = open ? "Filters" : "Hide"; }); els.sectionSelect.addEventListener("change", () => { renderList(); - if (els.sectionSelect.value !== "all") loadDefaultForSection(els.sectionSelect.value); /* ΔRECURSION: Auto-load default on section change. */ + 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); /* ΔTRUTH: Real-time filtering on input. */ + els.searchBox.addEventListener("input", renderList); // Close sidebar on content click (mobile) 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; /* ΔHORIZON: Gesture respect for mobile usability. */ + sidebarOpen = false; } } }); } // === LIST RENDERING === -/* ΔFIELD: Dynamic filtering and sorting of posts. - * Rationale: Chainable filters; fallback message; pinned denoted with 'Star'. */ function renderList() { const section = els.sectionSelect.value; const tags = Array.from(els.tagSelect.selectedOptions).map(o => o.value.toLowerCase()); @@ -133,29 +130,30 @@ function renderList() { const mode = els.searchMode.value; const query = els.searchBox.value.toLowerCase(); - let posts = indexData.flat.filter(p => !p.isIndex); /* ΔTRUTH: Exclude indices for content focus. */ + 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))); /* ΔFIELD: AND logic for tags. */ + 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); /* ΔTRUTH: Scoped search for efficiency. */ + return text.toLowerCase().includes(query); }); } - posts.sort((a, b) => sort === "newest" ? b.mtime - a.mtime : a.mtime - b.mtime); /* ΔRHYTHM: Time-based order. */ + posts.sort((a, b) => sort === "newest" ? b.mtime - a.mtime : a.mtime - b.mtime); els.postList.innerHTML = posts.length ? "" : "
  • No posts found.
    • "; + if (!posts.length) { + showDiagnostic('No posts found in current filters. If persistent, check index.json for flat entries or add content files and regenerate.'); + } posts.forEach(p => { const li = document.createElement("li"); const pin = p.isPinned ? "Star " : ""; - const time = new Date(p.ctime).toLocaleDateString(); /* ΔRHYTHM: Human-readable date. */ + const time = new Date(p.ctime).toLocaleDateString(); li.innerHTML = `${pin}${p.title}${time}`; els.postList.appendChild(li); }); } -/* ΔRECURSION: Load pinned or latest for section fallback. - * Rationale: Prevents empty states; redirects via hash for routing consistency. */ function loadDefaultForSection(section) { const posts = indexData.flat.filter(p => p.path.split('/')[0] === section && !p.isIndex); if (!posts.length) { @@ -167,14 +165,12 @@ function loadDefaultForSection(section) { } // === SUBNAV (NESTED HORIZON) === -/* ΔRECURSION: Render subnav based on parent hierarchy. - * Rationale: Clear on change; RAF for smooth visible class addition. */ function renderSubNav(parent) { const subnav = els.subNav; subnav.innerHTML = ""; subnav.classList.remove("visible"); - if (!parent || !indexData.hierarchies?.[parent]) return; /* ΔTRUTH: Early exit if no subs. */ + if (!parent || !indexData.hierarchies?.[parent]) return; const subs = indexData.hierarchies[parent]; subs.forEach(child => { @@ -184,30 +180,28 @@ function renderSubNav(parent) { subnav.appendChild(link); }); - requestAnimationFrame(() => subnav.classList.add("visible")); /* ΔBREATH: Deferred for animation prep. */ + requestAnimationFrame(() => subnav.classList.add("visible")); } // === HASH ROUTING === -/* ΔRECURSION: Core router; parses hash, renders accordingly. - * Rationale: Resilient to edge cases; recursive via parent tracking; fallbacks to defaults. */ async function handleHash() { - els.viewer.innerHTML = ""; /* ΔFIELD: Clear canvas for fresh render. */ + els.viewer.innerHTML = ""; const rel = location.hash.replace(/^#\//, ""); const parts = rel.split("/").filter(Boolean); const currentParentPath = parts.slice(0, -1).join("/") || parts[0] || null; if (currentParentPath !== currentParent) { currentParent = currentParentPath; - renderSubNav(currentParent); /* ΔRECURSION: Update subnav on parent change. */ + renderSubNav(currentParent); } const topSection = parts[0] || null; if (topSection && indexData.sections.includes(topSection)) { els.sectionSelect.value = topSection; - renderList(); /* ΔFIELD: Sync list with section. */ + renderList(); } - if (rel === '' || rel === '#') return renderDefault(); /* ΔRECURSION: Resilient home handling. */ + if (rel === '' || rel === '#') return renderDefault(); if (!rel) return renderDefault(); @@ -215,7 +209,7 @@ async function handleHash() { const currentPath = parts.join("/"); const indexFile = indexFiles.find(f => { const dir = f.path.split("/").slice(0, -1).join("/"); - return dir === currentPath; /* ΔTRUTH: Match directory to index file. */ + return dir === currentPath; }); if (indexFile) { @@ -226,28 +220,24 @@ async function handleHash() { } } else { if (topSection) loadDefaultForSection(topSection); - else els.viewer.innerHTML = `

    ${currentPath.split("/").pop()}

    No content yet.

    `; /* ΔFIELD: Placeholder for empty dirs. */ + else els.viewer.innerHTML = `

    ${currentPath.split("/").pop()}

    No content yet.

    `; } } else { const file = indexData.flat.find(f => f.path === rel); if (!file) { - els.viewer.innerHTML = "

    404

    Not found.

    "; /* ΔTRUTH: Honest error. */ + els.viewer.innerHTML = "

    404

    Not found.

    "; return; } - file.ext === ".md" ? await renderMarkdown(file.path) : await renderIframe("/" + file.path); /* ΔFIELD: Type-based rendering. */ + file.ext === ".md" ? await renderMarkdown(file.path) : await renderIframe("/" + file.path); } } -/* ΔTRUTH: Fetch and parse Markdown; fallback to 'Untitled'. - * Rationale: Uses marked.js (assumed global); wraps in article for styling. */ async function renderMarkdown(rel) { const src = await fetch(rel).then(r => r.ok ? r.text() : ""); els.viewer.innerHTML = `
    ${marked.parse(src || "# Untitled")}
    `; } // === PREVIEW + PORTAL ENGINE === -/* ΔFIELD: Render sanitized preview with portal button. - * Rationale: Button opens full in new tab for immersion preservation. */ async function renderIframe(rel) { const preview = await generatePreview(rel); const portalBtn = ``; @@ -258,20 +248,16 @@ async function renderIframe(rel) { `; els.viewer.querySelector(".portal-btn").addEventListener("click", e => { - window.open(e.target.dataset.src, "_blank", "noopener,noreferrer"); /* ΔTRUTH: Secure external open. */ + window.open(e.target.dataset.src, "_blank", "noopener,noreferrer"); }); } -/* ΔTRUTH: Generate safe, trimmed preview from HTML. - * Rationale: Extract body; sanitize; trim recursively; fallback link on error. */ async function generatePreview(rel) { try { const res = await fetch(rel); if (!res.ok) throw new Error(); const html = await res.text(); - /* ΔTRUTH: Modular sanitizer strips scripts, styles, events, inline CSS; normalizes whitespace. - * Rationale: Prevents injection/XSS; removes phantoms for clean rhythm. */ function sanitizeHTML(html) { return html .replace(//gi, "") @@ -289,24 +275,22 @@ async function generatePreview(rel) { const div = document.createElement("div"); div.innerHTML = content; - trimPreview(div, 3, 3000); // depth, char limit /* ΔFIELD: Bounds for performance. */ + trimPreview(div, 3, 3000); // depth, char limit return div.innerHTML || `

    Empty content.

    `; } catch { - return `

    Preview unavailable. Open directly.

    `; /* ΔTRUTH: Fallback preserves access. */ + return `

    Preview unavailable. Open directly.

    `; } } -/* ΔRECURSION: Trim DOM tree to depth/char limits. - * Rationale: Cumulative total ensures balanced siblings; removes excess for preview focus. */ function trimPreview(el, maxDepth, charLimit, depth = 0, chars = 0) { if (depth > maxDepth || chars > charLimit) { - el.innerHTML = "..."; /* ΔBREATH: Ellipsis as truncation breath. */ + el.innerHTML = "..."; return; } let total = chars; for (const child of [...el.children]) { - total += child.textContent.length; /* ΔRECURSION: Pre-calculate to avoid bias. */ + total += child.textContent.length; if (total > charLimit || depth > maxDepth) { child.remove(); } else { @@ -316,8 +300,6 @@ function trimPreview(el, maxDepth, charLimit, depth = 0, chars = 0) { } // === DEFAULT VIEW === -/* ΔFIELD: Render home with default section fallback. - * Rationale: Prioritizes 'posts'; welcoming placeholder if empty. */ function renderDefault() { const defaultSection = indexData.sections.includes("posts") ? "posts" : indexData.sections[0]; if (defaultSection) { @@ -325,9 +307,10 @@ function renderDefault() { renderList(); loadDefaultForSection(defaultSection); } else { - els.viewer.innerHTML = "

    Welcome

    Add content to begin.

    "; + showDiagnostic('No sections detected in index.json. Create folders with .md/.html files in public/ and run node tools/generate-index.mjs to regenerate.'); + els.viewer.innerHTML = "

    Welcome

    Add content to begin. See diagnostic banner for details.

    "; } } // === START === -init(); /* ΔFIELD: Invoke the blueprint's origin. */ +init();