Thanks for visiting and reading! You probably want to go back or to the index now.
diff --git a/makefile b/makefile index 46f864c..ea761af 100644 --- a/makefile +++ b/makefile @@ -12,6 +12,11 @@ build: static/font.css static/styles.css ; @${HUGO} .PHONY: public public: build +.PHONY: serve +serve: + @stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css & + @${HUGO} serve + .PHONY: dev dev: @stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css & @@ -31,9 +36,6 @@ publish: clean-css public ; @netlify ${NETLIFY_DEPLOY} && echo "Run \`make publi .PHONY: publish-prod publish-prod: clean-css public ; @netlify ${NETLIFY_DEPLOY} --prod -static/font.css: src/stylus/font.styl - stylus --compress $< -o $@ - static/styles.css: src/stylus/styles.styl $(shell find src/stylus -regex ".*\.styl") stylus --compress $< -o $@ diff --git a/src/stylus/core.styl b/src/stylus/core.styl index e6863aa..db3dc0a 100644 --- a/src/stylus/core.styl +++ b/src/stylus/core.styl @@ -3,6 +3,11 @@ code, pre ul, ol { padding-left: 2em } +// hide main content until js runs +// a noscript tag contains a stylesheet that counters this +body.nojs > main, body.nojs > footer + visibility hidden + a cursor pointer text-decoration-skip-ink auto diff --git a/static/global.mjs b/static/global.mjs index 06fcd89..314124c 100644 --- a/static/global.mjs +++ b/static/global.mjs @@ -1,4 +1,5 @@ import { Theme } from "./theme.mjs"; +import "./preload.mjs"; document.querySelectorAll(".js-only").forEach((a) => a.classList.remove("js-only") @@ -21,8 +22,6 @@ if (localStorage.getItem("align") === null) { localStorage.setItem("align", "center"); } -initAlign(); - const toggleAlign = (ev) => { localStorage.setItem( "align", @@ -82,6 +81,11 @@ function initCodeCopyButtons() { }); } -window.addEventListener("load", (_ev) => { - initCodeCopyButtons(); -}); +window.addEventListener("load", initAlign); +window.addEventListener("load", initCodeCopyButtons); +window.addEventListener("DOMContentLoaded", () => { + document.querySelectorAll(".nojs").forEach(e => { + e.classList.remove("nojs") + }) +}) + diff --git a/static/preload.mjs b/static/preload.mjs new file mode 100644 index 0000000..a40fd79 --- /dev/null +++ b/static/preload.mjs @@ -0,0 +1,80 @@ +const cache = {} +const main = document.querySelector("html > body > main") +const originalMain = main.innerHTML +cache[window.location.href] = [originalMain, document.title] +history.replaceState([window.location.href, 0, 0], "") + +const MINUTE_MS = 1000 * 60 + +async function putCache(href) { + if (cache[href] === undefined && href != window.location.href) { + cache[href] = ["", ""] + console.debug(`Preloading ${href}...`) + const html = await (await fetch(href)).text() + const doc = new DOMParser().parseFromString(html, "text/html") + cache[href] = [doc.querySelector("html > body > main").innerHTML, doc.title] + console.debug(`Preloaded ${href}`) + setTimeout(() => { + delete cache[href] + console.debug(`Cleared cached page: ${href}`) + }, 5 * MINUTE_MS) + } +} + +function loadCache(href) { + if (cache[href]) { + const [html, title] = cache[href] + if (html != "" || title != "") { + main.innerHTML = html + document.title = title + return true + } + } + return false +} + +function preloadinate() { + // TODO: some kind of expiration? + document.querySelectorAll("a").forEach(el => { + // TODO: this would ideally happen in the background (service worker)? + if (el.href.indexOf("#") == -1 && el.href.indexOf(".") == -1 && (el.href.startsWith("https://lyte.dev") || el.href.startsWith("http://localhost:1313"))) { + el.addEventListener("mouseover", (_ev) => putCache(el.href)) + el.addEventListener("click", ev => { + if (el.href == window.location.href) { + ev.preventDefault() + return false + } + if (cache[el.href] && cache[el.href][0] != "") { + const rep = [window.location.href, window.scrollX, window.scrollY] + history.replaceState(rep, "") + console.log("replaceState: ", rep) + if (!loadCache(el.href)) { + return true + } + window.scrollTo(0, 0) + history.pushState([el.href, 0, 0], "", el.href) + preloadinate() + ev.preventDefault() + return false + } + }) + } + }) +} + +window.addEventListener("popstate", ev => { + if (ev.state) { + const [href, x, y] = ev.state + if (!loadCache(href)) { + window.location.reload() + } + requestAnimationFrame(() => { + console.log(`Scrolling to ${x}, ${y}`) + window.scrollTo(x, y) + }) + preloadinate() + } else { + } +}) + +window.addEventListener("load", preloadinate); diff --git a/static/theme.mjs b/static/theme.mjs index 08ddcd2..01d4514 100644 --- a/static/theme.mjs +++ b/static/theme.mjs @@ -53,7 +53,6 @@ export class Theme { document.body.classList.remove(`light-theme`) document.body.classList.remove(`dark-theme`) document.body.classList.remove(`system-theme`) - console.log(this, this.getNext()) document.body.classList.add(`${this.#theme}-theme`) }