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

Update main.js

Browse source
This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42 2025-10-16 19:45:05 -05:00 • committed by GitHub
parent 9b6154fbda
commit 066c5cab80
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 31 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

48
main.js
View file

@ -1,14 +1,13 @@
// main.js — client router + markdown renderer // main.js — client router + markdown renderer for The Fold Within
// Routes:
// #/ -> index
// #/post/:id -> render that post
const state = { const state = {
posts: [], posts: [],
bySlug: new Map() bySlug: new Map(),
}; };
function $(sel) { return document.querySelector(sel); } function $(sel) {
return document.querySelector(sel);
}
window.addEventListener("hashchange", router); window.addEventListener("hashchange", router);
document.addEventListener("DOMContentLoaded", init); document.addEventListener("DOMContentLoaded", init);
@ -18,13 +17,10 @@ async function init() {
const res = await fetch("posts/posts.json", { cache: "no-cache" }); const res = await fetch("posts/posts.json", { cache: "no-cache" });
if (!res.ok) throw new Error("Could not load posts index."); if (!res.ok) throw new Error("Could not load posts index.");
state.posts = await res.json(); state.posts = await res.json();
state.bySlug = new Map(state.posts.map(p => [p.slug, p])); state.bySlug = new Map(state.posts.map((p) => [p.slug, p]));
// render index initially, or route if hash present
router(); router();
} catch (err) { } catch (err) {
const container = $("#posts"); $("#posts").innerHTML = `<p class="error">⚠️ ${err.message}</p>`;
if (container) container.innerHTML = `<p class="error">⚠️ ${err.message}</p>`;
} }
} }
@ -42,9 +38,16 @@ function router() {
function renderIndex() { function renderIndex() {
const postsContainer = $("#posts"); const postsContainer = $("#posts");
if (!postsContainer) return; if (!postsContainer) return;
// Clear any loading message
postsContainer.innerHTML = ""; postsContainer.innerHTML = "";
state.posts.forEach(post => { if (!state.posts.length) {
postsContainer.innerHTML = `<p class="error">⚠️ No posts found.</p>`;
return;
}
state.posts.forEach((post) => {
const article = document.createElement("article"); const article = document.createElement("article");
article.innerHTML = ` article.innerHTML = `
<div class="thumb"></div> <div class="thumb"></div>
@ -52,9 +55,10 @@ function renderIndex() {
<p class="date">${new Date(post.date).toLocaleDateString()}</p> <p class="date">${new Date(post.date).toLocaleDateString()}</p>
<p>${post.excerpt}</p> <p>${post.excerpt}</p>
`; `;
article.addEventListener("click", () => { article.addEventListener(
location.hash = `/post/${post.slug}`; "click",
}); () => (location.hash = `/post/${post.slug}`)
);
postsContainer.appendChild(article); postsContainer.appendChild(article);
}); });
} }
@ -72,12 +76,22 @@ async function renderPost(slug) {
const res = await fetch(`posts/${meta.file}`, { cache: "no-cache" }); const res = await fetch(`posts/${meta.file}`, { cache: "no-cache" });
if (!res.ok) throw new Error("Post file missing."); if (!res.ok) throw new Error("Post file missing.");
const md = await res.text(); const md = await res.text();
const html = marked.parse(md);
// remove front-matter before rendering
const clean = md.replace(/^---[\s\S]*?---/, "").trim();
const html = marked.parse(clean);
const date = new Date(meta.date).toLocaleDateString();
main.innerHTML = ` main.innerHTML = `
<section class="post"> <section class="post">
<a href="#/" id="back">← Back to Archive</a> <a href="#/" id="back">← Back to Archive</a>
<div class="markdown">${html}</div> <div class="markdown">
<h1>${meta.title}</h1>
<p class="date">${date}</p>
<hr/>
${html}
</div>
</section> </section>
`; `;