diff --git a/static/css/colors.css b/resources/css/colors.css similarity index 100% rename from static/css/colors.css rename to resources/css/colors.css diff --git a/resources/css/entry.css b/resources/css/entry.css index e69de29..39998d3 100644 --- a/resources/css/entry.css +++ b/resources/css/entry.css @@ -0,0 +1,2 @@ +@import url("./layout.css"); +@import url("./colors.css"); diff --git a/static/css/layout.css b/resources/css/layout.css similarity index 99% rename from static/css/layout.css rename to resources/css/layout.css index 3977a59..80927fa 100644 --- a/static/css/layout.css +++ b/resources/css/layout.css @@ -1,5 +1,5 @@ @layer pre-load, reset, baseline, overload-1, print; -@import url("/static/css/reset.css") layer(reset); +@import url("./reset.css") layer(reset); /* * saving this for when doing a table of contents, position: sticky isn't good enough diff --git a/static/css/reset.css b/resources/css/reset.css similarity index 100% rename from static/css/reset.css rename to resources/css/reset.css diff --git a/resources/js/code_highlighting.mjs b/resources/js/code_highlighting.mjs new file mode 100644 index 0000000..f87d6a0 --- /dev/null +++ b/resources/js/code_highlighting.mjs @@ -0,0 +1,52 @@ +//TODO: rip shit shit out as soon as psb handles syntax highlighting, +//wtf am I doing fetching the CSS here rather than via a link tag + +// setup web worker to avoid causing issues for the rendering thread +async function setup() { + // start fetching css sooner rather than latter + const baseCssProm = fetch( + "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css", + ).then((res) => res.text()); + const lightCssProm = fetch("/static/css/light-code.css").then((res) => + res.text() + ); + const darkCssProm = fetch("/static/css/dark-code.css").then((res) => + res.text() + ); + + const code = document.querySelectorAll("pre.sourceCode"); + const worker = new Worker("/static/js/code_highlighting_worker.mjs"); + worker.onmessage = (event) => { + const [index, newTxt] = event.data; + code[index].innerHTML = newTxt; + }; + for (let i = 0; i < code.length; i++) { + worker.postMessage([i, code[i].textContent]); + } + for (const c of code) { + c.classList.add("hljs"); + } + + // setting up the css for highlighting with previously fetched css + const baseStylesheet = new CSSStyleSheet(); + const lightThemeSheet = new CSSStyleSheet(); + const darkThemeSheet = new CSSStyleSheet(); + + //shenanigans done to avoid awaiting each promise sequentially + await Promise.all([ + (async () => { + return await baseStylesheet.replace(await baseCssProm); + })(), + (async () => { + return await lightThemeSheet.replace(await lightCssProm); + })(), + (async () => { + return await darkThemeSheet.replace(await darkCssProm); + })(), + ]); + document.adoptedStyleSheets.push(baseStylesheet); + document.adoptedStyleSheets.push(lightThemeSheet); + document.adoptedStyleSheets.push(darkThemeSheet); +} +addEventListener("load", setup); +if (document.readyState == "complete") await setup(); diff --git a/resources/js/entry.mjs b/resources/js/entry.mjs index e69de29..7d7bd47 100644 --- a/resources/js/entry.mjs +++ b/resources/js/entry.mjs @@ -0,0 +1 @@ +import "./code_highlighting.mjs"; diff --git a/static/js/code_highlighting.mjs b/static/js/code_highlighting.mjs deleted file mode 100644 index e1e1e87..0000000 --- a/static/js/code_highlighting.mjs +++ /dev/null @@ -1,38 +0,0 @@ -// setup web worker to avoid causing issues for the rendering thread -async function setup(){ - // start fetching css sooner rather than latter - const baseCssProm = fetch("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css").then(res=>res.text()); - const lightCssProm = fetch("/static/css/light-code.css").then(res=>res.text()); - const darkCssProm = fetch("/static/css/dark-code.css").then(res=>res.text()); - - const code = document.querySelectorAll("pre.sourceCode"); - const worker = new Worker('/static/js/code_highlighting_worker.mjs'); - worker.onmessage = (event) => { - const [index, newTxt] = event.data; - code[index].innerHTML = newTxt; - } - for(let i = 0;i{return await baseStylesheet.replace(await baseCssProm)})(), - (async()=>{return await lightThemeSheet.replace(await lightCssProm)})(), - (async()=>{return await darkThemeSheet.replace(await darkCssProm)})(), - ]); - document.adoptedStyleSheets.push(baseStylesheet); - document.adoptedStyleSheets.push(lightThemeSheet); - document.adoptedStyleSheets.push(darkThemeSheet); - -} -addEventListener('load', setup); -if(document.readyState == "complete") await setup(); diff --git a/static/js/color-mode.mjs b/static/js/color-mode.mjs deleted file mode 100644 index 2c2dd4e..0000000 --- a/static/js/color-mode.mjs +++ /dev/null @@ -1,80 +0,0 @@ -// DEPRECATED in favor of using in browser theme handling 8a7917a0cd34bd7637d9a9a8ad327e4b847cdeed is last commit using this -// This code is deprecated due to the js doing some amount of fighting with inbuilt browser capabilities, such as https://developer.chrome.com/blog/paint-holding - - -// (FALSE before being removed this was a module allowing for a flash of the layout without colors) this script is intentionally not a module so it'll block loading the document until we set color mode - -// shamelessly stolen from https://www.joshwcomeau.com/react/dark-mode/ -export function getInitialColorMode() { - const persistedColorPreference = - window.localStorage.getItem('color-mode'); - const hasPersistedPreference = - typeof persistedColorPreference === 'string'; - - // If the user has explicitly chosen light or dark, - // let's use it. Otherwise, this value will be null. - if (hasPersistedPreference) { - return persistedColorPreference; - } - - // If they haven't been explicit, let's check the media query - const mql = window.matchMedia('(prefers-color-scheme: dark)'); - const hasMediaQueryPreference = typeof mql.matches === 'boolean'; - - if (hasMediaQueryPreference) { - return mql.matches ? 'dark' : 'light'; - } - - // If they are using a browser/OS that doesn't support - // color themes, let's default to 'light'. - return 'light'; -} -export function setMode(mode, options){ - if(options == undefined){ - options = {}; - } - const {store} = options; - if(document.body.classList.contains("light")){ - document.body.classList.replace("light", mode); - } - else if (document.body.classList.contains("dark")){ - document.body.classList.replace("dark", mode); - } - else { - document.body.classList.add(color_mode); - } - if(store == undefined || store){ - localStorage.setItem("color-mode", mode); - } -} -// repeats set code but who cares, the logic is different -export function toggleMode(){ - let mode; - if(document.body.classList.contains("light")){ - document.body.classList.replace("light", "dark"); - mode = "dark"; - } - else if (document.body.classList.contains("dark")){ - document.body.classList.replace("dark", "light"); - mode = "light"; - } - else { - throw new Error("cannot toggle theme it isn't set yet"); - } - localStorage.setItem("color-mode", mode); -} - -// start grabbing the css in the background -const bg_css = (async ()=>{ - const css_txt = fetch("/static/css/colors.css").then(res=>res.text()); - const css = new CSSStyleSheet(); - await css.replace(await css_txt); - return css; -})(); - -// set color mode -const color_mode = getInitialColorMode(); -setMode(color_mode, {store:false}); - -// now that color mode is set lets go actually set the css -document.adoptedStyleSheets.push(await bg_css); diff --git a/static/js/setup-sw.mjs b/static/js/setup-sw.mjs deleted file mode 100644 index e69de29..0000000 diff --git a/static/js/simple-live-reload.mjs b/static/js/simple-live-reload.mjs deleted file mode 100644 index 915cae1..0000000 --- a/static/js/simple-live-reload.mjs +++ /dev/null @@ -1,45 +0,0 @@ -"use strict"; - -// CREDIT: https://leanrada.com/notes/simple-live-reload -// ACHIVE: https://web.archive.org/web/20250418234708/https://leanrada.com/notes/simple-live-reload/ - -let watching = new Set(); -watch(location.href); - -new PerformanceObserver((list) => { - for (const entry of list.getEntries()) { - watch(entry.name); - } -}).observe({ type: "resource", buffered: true }); - -function watch(urlString) { - if (!urlString) return; - const url = new URL(urlString); - if (url.origin !== location.origin) return; - - if (watching.has(url.pathname)) return; - watching.add(url.pathname); - - console.log("watching", url.pathname); - - let lastModified, etag; - - async function check() { - const res = await fetch(url, { method: "head" }); - const newLastModified = res.headers.get("Last-Modified"); - const newETag = res.headers.get("ETag"); - - if ( - (lastModified !== undefined || etag !== undefined) && - (lastModified !== newLastModified || etag !== newETag) - ) { - location.reload(); - } - - lastModified = newLastModified; - etag = newETag; - } - - setInterval(check, 1000); -} - diff --git a/templates/default.html b/templates/default.html index 23c93fb..20a73e5 100644 --- a/templates/default.html +++ b/templates/default.html @@ -29,11 +29,7 @@ {{/bundle_js}} - - - -