From efdfd395605ec0740f5b37fbe741ed919c55fe0b 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?=
 <mark.r.havens@gmail.com>
Date: Sat, 8 Nov 2025 14:19:36 -0600
Subject: [PATCH] Update index.html

---
 public/index.html | 162 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 123 insertions(+), 39 deletions(-)
diff --git a/public/index.html b/public/index.html
index c715c81..4a0c854 100755
--- a/public/index.html
+++ b/public/index.html
@@ -1,60 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="#0b0c10" />
   <title>The Fold Within</title>
 
-  <!-- Security and preload -->
-  <meta http-equiv="Content-Security-Policy"
-        content="default-src 'self';
-                 script-src 'self';
-                 style-src 'self' 'unsafe-inline';
-                 img-src 'self' data:;
-                 connect-src 'self';
-                 frame-src 'self';">
+  <!-- Styles -->
+  <link rel="stylesheet" href="./styles.css" />
 
-  <link rel="preload" href="/styles.css" as="style">
-  <link rel="stylesheet" href="/styles.css">
+  <!-- Markdown + Sanitizer -->
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
 
-  <!-- Local libraries -->
-  <script src="/lib/marked.min.js"></script>
-  <script src="/lib/purify.min.js"></script>
+  <style>
+    /* Minimal fade-in startup */
+    body { opacity: 0; transition: opacity 0.6s ease-in; }
+    body.ready { opacity: 1; }
+  </style>
 </head>
-
 <body>
+  <!-- ============================================================
+       TOPBAR NAVIGATION
+       ============================================================ -->
   <header class="topbar">
-    <button id="navToggle">☰</button>
-    <a href="/">Home</a>
-    <a href="/about/">About</a>
-    <a href="/essays/">Essays</a>
-    <a href="/fieldnotes/">Fieldnotes</a>
+    <button id="navToggle" title="Toggle Navigation">☰</button>
+    <a href="#=" class="brand">The Fold Within</a>
+    <nav>
+      <a href="#=index.html">Home</a>
+      <a href="#=about.html">About</a>
+      <a href="#=essays/index.html">Essays</a>
+      <a href="#=fieldnotes/index.html">Fieldnotes</a>
+    </nav>
   </header>
 
+  <!-- ============================================================
+       LAYOUT WRAPPER
+       ============================================================ -->
   <div class="page">
+    <!-- Sidebar -->
     <aside class="sidebar">
       <div class="controls">
-        <select id="filter"></select>
-        <select id="sort">
-          <option value="new">Newest</option>
-          <option value="old">Oldest</option>
-          <option value="name">Name</option>
+        <select id="sortOrder">
+          <option value="newest">Newest</option>
+          <option value="oldest">Oldest</option>
         </select>
+        <input id="search" placeholder="Search titles..." />
+      </div>
+      <div id="fileTree">
+        <!-- auto-generated file tree will appear here -->
       </div>
-      <input id="search" type="text" placeholder="Search titles...">
-      <nav id="tree"></nav>
     </aside>
 
-    <main class="content">
-      <div id="meta" class="meta"></div>
-      <div id="mdWarn" class="md-warn" style="display:none;">
-        Markdown fallback active — libraries not loaded.
-      </div>
+    <!-- Overlay for mobile -->
+    <div class="overlay"></div>
 
-      <div id="mdView" class="viewer" style="display:none;"></div>
-      <iframe id="htmlView"
-              sandbox="allow-scripts allow-forms allow-popups allow-modals allow-downloads"
-              style="display:none;"></iframe>
+    <!-- Content Area -->
+    <main class="content">
+      <!-- Markdown View -->
+      <article id="mdView" class="viewer fade-in"></article>
+
+      <!-- HTML View (iframe for dynamic HTML files) -->
+      <iframe id="htmlView" class="viewer fade-in" style="display:none;"></iframe>
 
       <div class="pager">
         <button id="prev">← Prev</button>
@@ -63,7 +70,84 @@
     </main>
   </div>
 
-  <div class="overlay"></div>
-  <script src="/app.js"></script>
+  <!-- ============================================================
+       SCRIPTS
+       ============================================================ -->
+  <script src="./app.js"></script>
+
+  <script>
+    // ============================================================
+    // FILE TREE INDEXER (CLIENT-SIDE DIRECTORY READER SIMULATION)
+    // ============================================================
+    document.addEventListener("DOMContentLoaded", async () => {
+      const treeEl = document.getElementById("fileTree");
+
+      // simple directory crawl using pre-generated /index.json if available
+      let indexData;
+      try {
+        const res = await fetch("./index.json");
+        indexData = res.ok ? await res.json() : null;
+      } catch (e) {
+        indexData = null;
+      }
+
+      if (indexData) {
+        treeEl.innerHTML = renderTree(indexData);
+        attachTreeHandlers();
+      } else {
+        // fallback: manual message
+        treeEl.innerHTML = `
+          <div class="md-warn">
+            <strong>File index not found.</strong><br>
+            Deploy a JSON index at <code>/index.json</code> or statically list your files.
+          </div>`;
+      }
+    });
+
+    // Recursive tree renderer
+    function renderTree(node, depth = 0) {
+      if (!node) return "";
+      if (node.type === "file") {
+        const icon = node.name.endsWith(".md")
+          ? "📄"
+          : node.name.endsWith(".html")
+          ? "🧩"
+          : "📁";
+        return `<div class="file" data-path="${node.path}" style="margin-left:${depth *
+          10}px">${icon} ${node.name}</div>`;
+      }
+      if (node.type === "dir") {
+        return `
+          <div class="dir" style="margin-left:${depth * 10}px">
+            <div class="label">${node.name}</div>
+            <div class="children">
+              ${(node.children || [])
+                .map((child) => renderTree(child, depth + 1))
+                .join("")}
+            </div>
+          </div>`;
+      }
+      return "";
+    }
+
+    // Expand/Collapse folders and attach file click
+    function attachTreeHandlers() {
+      document.querySelectorAll(".dir .label").forEach((label) => {
+        label.addEventListener("click", () => {
+          label.parentElement.classList.toggle("open");
+        });
+      });
+
+      document.querySelectorAll(".file").forEach((file) => {
+        file.addEventListener("click", () => {
+          const path = file.dataset.path;
+          if (path) window.location.hash = `#=${path}`;
+        });
+      });
+    }
+
+    // Fade-in after DOM ready
+    window.addEventListener("load", () => document.body.classList.add("ready"));
+  </script>
 </body>
 </html>
\ No newline at end of file
