Update app.js
This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42
GitHub
parent
819e530a1a
commit
631458e6e6
1 changed files with 55 additions and 80 deletions
135
public/app.js
135
public/app.js
|
|
@ -1,5 +1,4 @@
|
|||
const els = {
|
||||
body: document.body,
|
||||
menuBtn: document.getElementById("menuBtn"),
|
||||
primaryNav: document.getElementById("primaryNav"),
|
||||
sectionSelect: document.getElementById("sectionSelect"),
|
||||
|
|
@ -9,12 +8,11 @@ const els = {
|
|||
searchBox: document.getElementById("searchBox"),
|
||||
postList: document.getElementById("postList"),
|
||||
viewer: document.getElementById("viewer"),
|
||||
content: document.getElementById("content")
|
||||
content: document.getElementById("content"),
|
||||
toggleControls: document.getElementById("toggleControls"),
|
||||
filterPanel: document.getElementById("filterPanel")
|
||||
};
|
||||
|
||||
const sectionIcons = { essays: '✍️', fieldnotes: '📓', pinned: '📌' };
|
||||
const tagIcons = { /* Optional: e.g., 'tech': '🔧' */ };
|
||||
|
||||
let indexData = null;
|
||||
let sidebarOpen = false;
|
||||
|
||||
|
|
@ -29,36 +27,33 @@ async function init() {
|
|||
handleHash();
|
||||
window.addEventListener("hashchange", handleHash);
|
||||
} catch (e) {
|
||||
els.viewer.innerHTML = "<h1>Error Loading Site</h1><p>Failed to load index data. Please refresh or check connection.</p>";
|
||||
els.viewer.innerHTML = "<h1>Error</h1><p>Failed to load site data.</p>";
|
||||
}
|
||||
}
|
||||
|
||||
function populateNav() {
|
||||
els.primaryNav.innerHTML = '<a href="#/">Home</a>';
|
||||
indexData.sections.filter(s => indexData.flat.some(f => f.path.split('/')[0] === s && f.isIndex)).forEach(s => {
|
||||
els.primaryNav.innerHTML += `<a href="#/${s}/">${s.charAt(0).toUpperCase() + s.slice(1)}</a>`;
|
||||
indexData.sections.forEach(s => {
|
||||
const hasIndex = indexData.flat.some(f => f.path.startsWith(s + "/") && f.isIndex);
|
||||
if (hasIndex) {
|
||||
els.primaryNav.innerHTML += `<a href="#/${s}/">${s.charAt(0).toUpperCase() + s.slice(1)}</a>`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function populateSections() {
|
||||
els.sectionSelect.innerHTML = '<option value="all">All Sections</option>';
|
||||
indexData.sections.forEach(s => {
|
||||
const icon = sectionIcons[s] ? `${sectionIcons[s]} ` : '';
|
||||
const opt = document.createElement("option");
|
||||
opt.value = s;
|
||||
opt.textContent = `${icon}${s}`;
|
||||
opt.value = s; opt.textContent = s;
|
||||
els.sectionSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
function populateTags() {
|
||||
els.tagSelect.innerHTML = '';
|
||||
indexData.tags.forEach(t => {
|
||||
const icon = tagIcons[t] ? `${tagIcons[t]} ` : '';
|
||||
const opt = document.createElement("option");
|
||||
opt.value = t;
|
||||
opt.textContent = `${icon}${t}`;
|
||||
opt.title = `Filter by ${t}`;
|
||||
opt.value = t; opt.textContent = t;
|
||||
els.tagSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
|
@ -68,14 +63,23 @@ function wireUI() {
|
|||
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", () => {
|
||||
if (window.matchMedia("(max-width:1024px)").matches && document.body.classList.contains("sidebar-open")) {
|
||||
if (window.innerWidth < 1024 && document.body.classList.contains("sidebar-open")) {
|
||||
document.body.classList.remove("sidebar-open");
|
||||
sidebarOpen = false;
|
||||
}
|
||||
|
|
@ -89,65 +93,47 @@ function renderList() {
|
|||
const mode = els.searchMode.value;
|
||||
const query = els.searchBox.value.toLowerCase();
|
||||
|
||||
let posts = indexData.flat.filter(p => !p.isIndex); // Exclude index from lists
|
||||
let posts = indexData.flat.filter(p => !p.isIndex);
|
||||
if (section !== "all") posts = posts.filter(p => p.path.split('/')[0] === section);
|
||||
if (tags.length > 0) posts = posts.filter(p => tags.every(t => p.tags.includes(t)));
|
||||
if (tags.length) posts = posts.filter(p => tags.every(t => p.tags.includes(t)));
|
||||
if (query) {
|
||||
posts = posts.filter(p => {
|
||||
const searchText = mode === "content" ? (p.title + ' ' + p.excerpt).toLowerCase() : p.title.toLowerCase();
|
||||
return searchText.includes(query);
|
||||
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 ? "" : "<li>No matching posts found. Try adjusting filters.</li>";
|
||||
for (const p of posts) {
|
||||
els.postList.innerHTML = posts.length ? "" : "<li>No posts found.</li>";
|
||||
posts.forEach(p => {
|
||||
const li = document.createElement("li");
|
||||
const pin = p.isPinned ? "★ " : "";
|
||||
li.innerHTML = `<a href="#/${p.path}">${pin}${p.title}</a><br><small>${new Date(p.mtime).toISOString().split("T")[0]}</small>`;
|
||||
const pin = p.isPinned ? "Star " : "";
|
||||
li.innerHTML = `<a href="#/${p.path}">${pin}${p.title}</a><small>${new Date(p.mtime).toISOString().split("T")[0]}</small>`;
|
||||
els.postList.appendChild(li);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadDefaultForSection(section) {
|
||||
const posts = indexData.flat.filter(p => p.path.split('/')[0] === section && !p.isIndex); // Exclude index
|
||||
const posts = indexData.flat.filter(p => p.path.split('/')[0] === section && !p.isIndex);
|
||||
if (!posts.length) {
|
||||
els.viewer.innerHTML = `<h1>${section.charAt(0).toUpperCase() + section.slice(1)}</h1><p>No content yet. Add files and redeploy!</p>`;
|
||||
els.viewer.innerHTML = `<h1>${section}</h1><p>No content yet.</p>`;
|
||||
return;
|
||||
}
|
||||
const pinned = posts.filter(p => p.isPinned).sort((a, b) => b.mtime - a.mtime)[0];
|
||||
const toLoad = pinned || posts.sort((a, b) => b.mtime - a.mtime)[0];
|
||||
location.hash = '#/' + toLoad.path;
|
||||
const pinned = posts.find(p => p.isPinned) || posts.sort((a,b) => b.mtime - a.mtime)[0];
|
||||
location.hash = `#/${pinned.path}`;
|
||||
}
|
||||
|
||||
async function handleHash() {
|
||||
els.viewer.classList.remove("fade-in");
|
||||
els.viewer.innerHTML = "";
|
||||
void els.viewer.offsetWidth;
|
||||
els.viewer.classList.add("fade-in");
|
||||
const rel = location.hash.replace(/^#\//, "");
|
||||
if (!rel) return renderDefault();
|
||||
|
||||
if (rel.endsWith('/')) {
|
||||
const section = rel.replace(/\/$/, '');
|
||||
if (!indexData.sections.includes(section)) {
|
||||
els.viewer.innerHTML = '<h1>404: Section Not Found</h1><p>Try navigating from the menu.</p>';
|
||||
return;
|
||||
}
|
||||
const indexFile = indexData.flat.find(f => f.path.split('/')[0] === section && f.isIndex);
|
||||
const section = rel.slice(0, -1);
|
||||
const indexFile = indexData.flat.find(f => f.path.startsWith(section + "/") && f.isIndex);
|
||||
if (indexFile) {
|
||||
// Load index for top nav
|
||||
try {
|
||||
if (indexFile.ext === ".md") {
|
||||
await renderMarkdown(indexFile.path);
|
||||
} else {
|
||||
renderIframe(indexFile.path);
|
||||
}
|
||||
} catch (e) {
|
||||
els.viewer.innerHTML = '<h1>Error Loading Index</h1><p>Unable to load section index.</p>';
|
||||
}
|
||||
indexFile.ext === ".md" ? await renderMarkdown(indexFile.path) : renderIframe(indexFile.path);
|
||||
} else {
|
||||
// Dynamic load for drop-down style
|
||||
els.sectionSelect.value = section;
|
||||
renderList();
|
||||
loadDefaultForSection(section);
|
||||
|
|
@ -155,54 +141,43 @@ async function handleHash() {
|
|||
} else {
|
||||
const file = indexData.flat.find(f => f.path === rel);
|
||||
if (!file) {
|
||||
els.viewer.innerHTML = '<h1>404: File Not Found</h1><p>Check the URL or search again.</p>';
|
||||
els.viewer.innerHTML = "<h1>404</h1><p>Not found.</p>";
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (file.ext === ".md") {
|
||||
await renderMarkdown(file.path);
|
||||
} else {
|
||||
renderIframe(file.path);
|
||||
}
|
||||
} catch (e) {
|
||||
els.viewer.innerHTML = '<h1>Error Loading Content</h1><p>Unable to load. File may be invalid.</p>';
|
||||
}
|
||||
file.ext === ".md" ? await renderMarkdown(file.path) : renderIframe(file.path);
|
||||
}
|
||||
}
|
||||
|
||||
async function renderMarkdown(rel) {
|
||||
const src = await fetch(rel).then(r => { if (!r.ok) throw new Error('Fetch failed'); return r.text(); });
|
||||
const html = marked.parse(src);
|
||||
els.viewer.innerHTML = `<article>${html}</article>`;
|
||||
const src = await fetch(rel).then(r => r.ok ? r.text() : Promise.reject());
|
||||
els.viewer.innerHTML = `<article class="markdown">${marked.parse(src)}</article>`;
|
||||
}
|
||||
|
||||
function renderIframe(rel) {
|
||||
const iframe = document.createElement("iframe");
|
||||
iframe.setAttribute("sandbox", "allow-same-origin allow-scripts allow-forms");
|
||||
iframe.loading = "eager";
|
||||
iframe.src = "/" + rel;
|
||||
iframe.loading = "eager";
|
||||
iframe.setAttribute("sandbox", "allow-same-origin allow-scripts allow-forms");
|
||||
els.viewer.appendChild(iframe);
|
||||
iframe.addEventListener("load", () => {
|
||||
|
||||
iframe.onload = () => {
|
||||
if (rel.endsWith('.pdf')) return;
|
||||
try {
|
||||
const d = iframe.contentDocument || iframe.contentWindow.document;
|
||||
const s = d.createElement("style");
|
||||
s.textContent = `
|
||||
html,body{margin:0;padding:0;background:transparent;color:#e6e3d7;font:16px/1.6 Inter,ui-sans-serif;}
|
||||
main,article,section{max-width:720px;margin:auto;padding:2rem;}
|
||||
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;}
|
||||
`;
|
||||
d.head.appendChild(s);
|
||||
doc.head.appendChild(style);
|
||||
} catch {}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function renderDefault() {
|
||||
const latest = [...indexData.flat].sort((a, b) => b.mtime - a.mtime)[0];
|
||||
if (latest) {
|
||||
location.hash = "#/" + latest.path;
|
||||
} else {
|
||||
els.viewer.innerHTML = '<h1>Welcome to The Fold Within</h1><p>Add content to sections and redeploy to get started.</p>';
|
||||
}
|
||||
const latest = indexData.flat.filter(f => !f.isIndex).sort((a,b) => b.mtime - a.mtime)[0];
|
||||
if (latest) location.hash = `#/${latest.path}`;
|
||||
else els.viewer.innerHTML = "<h1>Welcome</h1><p>Add content to begin.</p>";
|
||||
}
|
||||
|
||||
init();
|
||||
Loading…
Add table
Add a link
Reference in a new issue