Pagwin/new_blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

attempt 2 at light dark demo 4

Browse source
This commit is contained in:
Pagwin 2025-09-02 16:04:47 -04:00
parent 986b7e8fe1
commit 8f9ae95a00
3 changed files with 34 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
notes
View file

@ -3,6 +3,7 @@ https://randoma11y.com/
https://fonts.google.com/knowledge/choosing_type
https://www.goatcounter.com/
https://web.dev/articles/optimize-webfont-loading
https://tinylytics.app/
noted fonts:
Moderat mono https://tightype.com/typefaces/moderat-mono

4
static/demos/light-dark-demo-4/index.html
View file

@ -68,10 +68,10 @@
await navigator.serviceWorker.register("sw.js");
</script>
<p>Here is some example text</p>
<form action="" method="get">
<form action="/light-dark-toggle" method="get">
<input id="full-demo" type="submit" value="Fully enhanced demo">
</form>
<form action="" method="get">
<form action="/light-dark-toggle" method="get">
<input id="min-demo" type="submit" value="No javascript simulation">
</form>
</body>

37
static/demos/light-dark-demo-4/sw.js
View file

@ -6,10 +6,13 @@ self.addEventListener("fetch", event =>{
event.respondWith((async ()=>{
const resp = await fetch(event.request);
const body = await resp.text();
return new Response(body.replace("<body>", '<body class="toggled">'), {
headers:resp.headers,
status: resp.status
});
const url = new URL(event.request.url);
if(url.pathname.endsWith("light-dark-toggle")){
return await handle_redirect(req);
}
else {
return await handle_html(req,resp);
}
})());
})
@ -34,7 +37,14 @@ async function handle_redirect(req){
transaction.commit();
};
};
await Promise.all([up_promise, suc_promise])
await Promise.all([up_promise, suc_promise]);
const referrer = request.headers.get('Referer') || '/';
return new Response("You should be getting redirected back to the page you came from shortly",{
status: 302,
headers: {
'Location': referrer
}
})
}
function IDB_cond_create(db, objectStoreName, opts={}){
return new Promise((res)=>{
@ -61,6 +71,21 @@ function toggleLightDark(transaction){
});
}
async function handle_html(req){
async function handle_html(req, resp){
// TODO: read from indexDB to figure out if we fiddle with the body classes or not
const obj_store = transaction.objectStore("light-dark-store");
const grab = obj_store.get(1);
const toggled = await (new Promise((res)=>{
grab.onsuccess = (event)=>{
const val = event.result;
const toggled = !!val;
res(toggled);
}
}));
if(!toggled) return resp;
return new Response(body.replace("<body>", '<body class="toggled">'), {
headers:resp.headers,
status: resp.status
});
}