Update app.js

This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42 2025-11-08 15:06:28 -06:00 committed by GitHub
parent 69f5ccad09
commit 181dc90855
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -26,20 +26,17 @@ const state = {
init(); init();
async function init(){ async function init(){
// ensure libs present before any rendering
const ok = await waitForLibs(3000); const ok = await waitForLibs(3000);
if (!ok){ if (!ok){
els.viewer.innerHTML = `<p style="color:#f66">Markdown renderer failed to load. Check /lib/marked.min.js and /lib/purify.min.js.</p>`; els.viewer.innerHTML = `<p style="color:#f66">Markdown renderer failed to load. Check /lib/marked.min.js and /lib/purify.min.js.</p>`;
return; return;
} }
// restore desktop collapse
try { state.desktopCollapsed = localStorage.getItem("desktopCollapsed")==="1"; } catch {} try { state.desktopCollapsed = localStorage.getItem("desktopCollapsed")==="1"; } catch {}
wireToggles(); wireToggles();
onResizeMode(); onResizeMode();
// load index
try{ try{
const res = await fetch("/index.json", { cache:"no-cache" }); const res = await fetch("/index.json", { cache:"no-cache" });
if (!res.ok) throw new Error(res.status); if (!res.ok) throw new Error(res.status);
@ -146,7 +143,6 @@ function renderTree(){
</a>`; </a>`;
}).join(""); }).join("");
// close overlay on mobile when a link is clicked
els.tree.addEventListener("click", (evt)=>{ els.tree.addEventListener("click", (evt)=>{
if (!evt.target.closest("a[data-path]")) return; if (!evt.target.closest("a[data-path]")) return;
if (!window.matchMedia("(min-width:1025px)").matches){ if (!window.matchMedia("(min-width:1025px)").matches){
@ -159,7 +155,6 @@ function renderTree(){
/* ---------- Routing & Rendering ---------- */ /* ---------- Routing & Rendering ---------- */
function onRoute(){ function onRoute(){
const hash = location.hash || "#/"; const hash = location.hash || "#/";
// Handle section routes like #/fieldnotes
const sectionMatch = hash.match(/^#\/(essays|fieldnotes|posts)\/?$/i); const sectionMatch = hash.match(/^#\/(essays|fieldnotes|posts)\/?$/i);
if (sectionMatch){ if (sectionMatch){
state.section = sectionMatch[1].toLowerCase(); state.section = sectionMatch[1].toLowerCase();
@ -182,7 +177,6 @@ function onRoute(){
const ext = rel.split(".").pop().toLowerCase(); const ext = rel.split(".").pop().toLowerCase();
if (ext==="md") return renderMarkdown(rel); if (ext==="md") return renderMarkdown(rel);
if (ext==="html") return renderHTML(rel); if (ext==="html") return renderHTML(rel);
// Try md then html as a convenience
renderMarkdown(rel).catch(()=>renderHTML(rel)); renderMarkdown(rel).catch(()=>renderHTML(rel));
} }
@ -195,7 +189,6 @@ async function renderMarkdown(rel){
const safe = window.DOMPurify.sanitize(html); const safe = window.DOMPurify.sanitize(html);
els.viewer.innerHTML = safe; els.viewer.innerHTML = safe;
// ensure we start at top; no reserved phantom space
els.viewer.scrollIntoView({ block:"start", behavior:"instant" }); els.viewer.scrollIntoView({ block:"start", behavior:"instant" });
} }
@ -204,6 +197,7 @@ async function renderHTML(rel){
iframe.setAttribute("sandbox","allow-same-origin allow-scripts allow-forms"); iframe.setAttribute("sandbox","allow-same-origin allow-scripts allow-forms");
iframe.style.width = "100%"; iframe.style.width = "100%";
iframe.style.border = "0"; iframe.style.border = "0";
iframe.style.margin = "0";
iframe.loading = "eager"; iframe.loading = "eager";
els.viewer.innerHTML = ""; els.viewer.innerHTML = "";
@ -217,12 +211,28 @@ async function renderHTML(rel){
iframe.style.height = h + "px"; iframe.style.height = h + "px";
}catch{} }catch{}
}; };
iframe.addEventListener("load", ()=>{ iframe.addEventListener("load", ()=>{
size();
try{ try{
const ro = new ResizeObserver(size); const d = iframe.contentDocument || iframe.contentWindow.document;
ro.observe(iframe.contentDocument.documentElement);
// 🔒 Reset default UA margins so content sits flush like Markdown
const s = d.createElement("style");
s.textContent = `
html,body{margin:0;padding:0;background:transparent}
body>*:first-child{margin-top:0}
`;
d.head.appendChild(s);
// Track dynamic growth
try{
const ro = new ResizeObserver(size);
ro.observe(d.documentElement);
ro.observe(d.body);
}catch{}
}catch{} }catch{}
size();
setTimeout(size, 250); setTimeout(size, 250);
setTimeout(size, 800); setTimeout(size, 800);
}); });