moved everything but the highlighting worker and some CSS which cannot be made to not dynamically import
This commit is contained in:
Pagwin
parent
63d4ef6996
commit
6a8ac4c476
11 changed files with 56 additions and 168 deletions
|
|
@ -0,0 +1,2 @@
|
|||
@import url("./layout.css");
|
||||
@import url("./colors.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
|
||||
52
resources/js/code_highlighting.mjs
Normal file
52
resources/js/code_highlighting.mjs
Normal file
|
|
@ -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();
|
||||
|
|
@ -0,0 +1 @@
|
|||
import "./code_highlighting.mjs";
|
||||
|
|
@ -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<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();
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
@ -29,11 +29,7 @@
|
|||
<script type="module" src="{{.}}"></script>
|
||||
{{/bundle_js}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/layout.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/colors.css">
|
||||
<link rel="alternate" type="application/rss+xml" title="Web Feed/RSS" href="/index.xml">
|
||||
<script type="module" src="/static/js/code_highlighting.mjs"></script>
|
||||
<script type="module" src="/static/js/setup-sw.mjs"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue