mrhavens/thefoldwithin-earth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Update index.html

Browse source
This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42 2025-11-08 14:19:36 -06:00 • committed by GitHub
parent 9f759c7e13
commit efdfd39560
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 123 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

162
public/index.html
View file

@ -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>