From 95423a7e4d82c0efd5d877daa6b3a846f814f047 Mon Sep 17 00:00:00 2001 From: caandt Date: Fri, 13 Sep 2024 16:28:20 -0500 Subject: [PATCH] add dynamic stylesheet loading --- build.py | 9 +++++++-- static/router.js | 15 ++++++++++++++- static/util.js | 10 ++++++++++ templates/base.html | 3 +-- 4 files changed, 32 insertions(+), 5 deletions(-) diff --git a/build.py b/build.py index 3acd31c..9f7ed49 100644 --- a/build.py +++ b/build.py @@ -64,13 +64,17 @@ def make_page(page, dest): post = frontmatter.loads(page) post['title'] = post['title'] post.content = re.sub(r"py{{ (.+?) }}", lambda x: str(eval(x.group(1))), post.content) - out = base.replace('{{ content }}', post.content).replace('{{ title }}', post['title']) #+ f' - {"μ.twoha.cc" if minimal else "u.twoha.cc"}') - path_write(dest, out) + out = base.replace('{{ content }}', post.content).replace('{{ title }}', post['title'] + f' - {"μ.twoha.cc" if minimal else "u.twoha.cc"}') if not minimal: dump = json.dumps(post.metadata) assert '-->' not in dump content = f'\n{post.content}' + sheets = (f'' for x in ['/static/style.css', *post.get('sheets', [])]) + out = out.replace('{{ sheets }}', '\n'.join(sheets)) path_write(outdir / '_partial' / dest.relative_to(outdir), content) + path_write(dest, out) + else: + path_write(dest, out) def main(_): outdir.mkdir(exist_ok=True, parents=True) @@ -122,6 +126,7 @@ def md_to_html(path): html = markdown.markdown(input.content, extensions=ext) return f'''--- title: {repr(input['title'])} +sheets: ["/static/highlight.css"] ---
diff --git a/static/router.js b/static/router.js index 2550c42..8cb9b7d 100644 --- a/static/router.js +++ b/static/router.js @@ -1,7 +1,8 @@ -import { popup } from '/static/util.js'; +import { popup, addSheet } from '/static/util.js'; const content = document.getElementById('content'); let currentPathname = new URL(window.location).pathname; +let sheets = {}; async function loadContent(u, push=false) { const sheet = window.document.styleSheets[0]; @@ -21,6 +22,18 @@ async function _loadContent(u, push=false) { if (r.ok) { let t = await r.text(); let metadata = JSON.parse(t.substring(4, t.indexOf('-->\n'))) + let newSheets = metadata.sheets ?? []; + let loading = [] + for (let s in sheets) + if (!newSheets.includes(s)) + sheets[s].disabled = true; + for (let s of newSheets) { + if (!sheets[s]) + loading.push(addSheet(s).then(e => sheets[s] = e)); + else if (sheets[s].disabled) + sheets[s].disabled = false; + } + await Promise.all(loading); content.innerHTML = t; if (push) history.pushState('', '', u); diff --git a/static/util.js b/static/util.js index 6ddcb07..f5a1a33 100644 --- a/static/util.js +++ b/static/util.js @@ -19,3 +19,13 @@ export function shuffle(array) { [array[i], array[j]] = [array[j], array[i]]; } } +export function addSheet(href) { + return new Promise((res, rej) => { + let link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = href; + link.onload = () => res(link); + link.onerror = () => rej(); + document.head.appendChild(link); + }); +} diff --git a/templates/base.html b/templates/base.html index 255fec4..6cde981 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,8 +4,7 @@ {{ title }} - - + {{ sheets }}