/// const duration = 0.2 globalThis.addEventListener("load", () => { patch_page() }) globalThis.addEventListener("popstate", () => { transition_to(window.location.href) }) function patch_page() { document.querySelectorAll("a").forEach(el => { el.addEventListener("click", async ev => { ev.preventDefault() await transition_to(el.href) }) }) } async function transition_to(href) { const trigger_load = prepare_load(href) await fade(false) trigger_load() } function prepare_load(href) { const r_promise = fetch(href) return async () => { const r = await r_promise const rt = await r.text() const [head, body] = rt.split("")[1].split("")[0].split("") document.head.innerHTML = head document.body.innerHTML = body fade(true) window.history.pushState({}, "", href) patch_page() } } function fade(dir) { const overlay = document.createElement("div") overlay.style.position = "absolute" overlay.style.left = "0px" overlay.style.top = "0px" overlay.style.width = "100vw" overlay.style.height = "100vh" overlay.style.backgroundColor = dir ? "black" : "transparent" overlay.style.transition = `background-color ${duration}s` overlay.style.zIndex = 99999; setTimeout(() => { overlay.style.backgroundColor = dir ? "transparent" : "black" }, 0) document.body.appendChild(overlay) return new Promise(res => { setTimeout(() => { if (dir) document.body.removeChild(overlay) res() }, duration * 1000) }) }