Update index.html
This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42
GitHub
parent
9f759c7e13
commit
efdfd39560
1 changed files with 123 additions and 39 deletions
|
|
@ -1,60 +1,67 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="theme-color" content="#0b0c10" />
|
||||||
<title>The Fold Within</title>
|
<title>The Fold Within</title>
|
||||||
|
|
||||||
<!-- Security and preload -->
|
<!-- Styles -->
|
||||||
<meta http-equiv="Content-Security-Policy"
|
<link rel="stylesheet" href="./styles.css" />
|
||||||
content="default-src 'self';
|
|
||||||
script-src 'self';
|
|
||||||
style-src 'self' 'unsafe-inline';
|
|
||||||
img-src 'self' data:;
|
|
||||||
connect-src 'self';
|
|
||||||
frame-src 'self';">
|
|
||||||
|
|
||||||
<link rel="preload" href="/styles.css" as="style">
|
<!-- Markdown + Sanitizer -->
|
||||||
<link rel="stylesheet" href="/styles.css">
|
<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 -->
|
<style>
|
||||||
<script src="/lib/marked.min.js"></script>
|
/* Minimal fade-in startup */
|
||||||
<script src="/lib/purify.min.js"></script>
|
body { opacity: 0; transition: opacity 0.6s ease-in; }
|
||||||
|
body.ready { opacity: 1; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<!-- ============================================================
|
||||||
|
TOPBAR NAVIGATION
|
||||||
|
============================================================ -->
|
||||||
<header class="topbar">
|
<header class="topbar">
|
||||||
<button id="navToggle">☰</button>
|
<button id="navToggle" title="Toggle Navigation">☰</button>
|
||||||
<a href="/">Home</a>
|
<a href="#=" class="brand">The Fold Within</a>
|
||||||
<a href="/about/">About</a>
|
<nav>
|
||||||
<a href="/essays/">Essays</a>
|
<a href="#=index.html">Home</a>
|
||||||
<a href="/fieldnotes/">Fieldnotes</a>
|
<a href="#=about.html">About</a>
|
||||||
|
<a href="#=essays/index.html">Essays</a>
|
||||||
|
<a href="#=fieldnotes/index.html">Fieldnotes</a>
|
||||||
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
LAYOUT WRAPPER
|
||||||
|
============================================================ -->
|
||||||
<div class="page">
|
<div class="page">
|
||||||
|
<!-- Sidebar -->
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<select id="filter"></select>
|
<select id="sortOrder">
|
||||||
<select id="sort">
|
<option value="newest">Newest</option>
|
||||||
<option value="new">Newest</option>
|
<option value="oldest">Oldest</option>
|
||||||
<option value="old">Oldest</option>
|
|
||||||
<option value="name">Name</option>
|
|
||||||
</select>
|
</select>
|
||||||
|
<input id="search" placeholder="Search titles..." />
|
||||||
|
</div>
|
||||||
|
<div id="fileTree">
|
||||||
|
<!-- auto-generated file tree will appear here -->
|
||||||
</div>
|
</div>
|
||||||
<input id="search" type="text" placeholder="Search titles...">
|
|
||||||
<nav id="tree"></nav>
|
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<main class="content">
|
<!-- Overlay for mobile -->
|
||||||
<div id="meta" class="meta"></div>
|
<div class="overlay"></div>
|
||||||
<div id="mdWarn" class="md-warn" style="display:none;">
|
|
||||||
Markdown fallback active — libraries not loaded.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="mdView" class="viewer" style="display:none;"></div>
|
<!-- Content Area -->
|
||||||
<iframe id="htmlView"
|
<main class="content">
|
||||||
sandbox="allow-scripts allow-forms allow-popups allow-modals allow-downloads"
|
<!-- Markdown View -->
|
||||||
style="display:none;"></iframe>
|
<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">
|
<div class="pager">
|
||||||
<button id="prev">← Prev</button>
|
<button id="prev">← Prev</button>
|
||||||
|
|
@ -63,7 +70,84 @@
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue