caandt/u.twoha.cc
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add dynamic stylesheet loading

Browse source
This commit is contained in:
caandt 2024-09-13 16:28:20 -05:00
parent 04abd9f5b4
commit 95423a7e4d
4 changed files with 32 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
build.py
View file

@ -64,13 +64,17 @@ def make_page(page, dest):
post = frontmatter.loads(page) post = frontmatter.loads(page)
post['title'] = post['title'] post['title'] = post['title']
post.content = re.sub(r"py{{ (.+?) }}", lambda x: str(eval(x.group(1))), post.content) 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' - {"&#x03BC.twoha.cc" if minimal else "u.twoha.cc"}') out = base.replace('{{ content }}', post.content).replace('{{ title }}', post['title'] + f' - {"&#x03BC.twoha.cc" if minimal else "u.twoha.cc"}')
path_write(dest, out)
if not minimal: if not minimal:
dump = json.dumps(post.metadata) dump = json.dumps(post.metadata)
assert '-->' not in dump assert '-->' not in dump
content = f'<!--{dump}-->\n{post.content}' content = f'<!--{dump}-->\n{post.content}'
sheets = (f'<link href="{x}" rel="stylesheet">' 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(outdir / '_partial' / dest.relative_to(outdir), content)
path_write(dest, out)
else:
path_write(dest, out)
def main(_): def main(_):
outdir.mkdir(exist_ok=True, parents=True) outdir.mkdir(exist_ok=True, parents=True)
@ -122,6 +126,7 @@ def md_to_html(path):
html = markdown.markdown(input.content, extensions=ext) html = markdown.markdown(input.content, extensions=ext)
return f'''--- return f'''---
title: {repr(input['title'])} title: {repr(input['title'])}
sheets: ["/static/highlight.css"]
--- ---
<div class="container"> <div class="container">
<article class="panel"> <article class="panel">

15
static/router.js
View file

@ -1,7 +1,8 @@
import { popup } from '/static/util.js'; import { popup, addSheet } from '/static/util.js';
const content = document.getElementById('content'); const content = document.getElementById('content');
let currentPathname = new URL(window.location).pathname; let currentPathname = new URL(window.location).pathname;
let sheets = {};
async function loadContent(u, push=false) { async function loadContent(u, push=false) {
const sheet = window.document.styleSheets[0]; const sheet = window.document.styleSheets[0];
@ -21,6 +22,18 @@ async function _loadContent(u, push=false) {
if (r.ok) { if (r.ok) {
let t = await r.text(); let t = await r.text();
let metadata = JSON.parse(t.substring(4, t.indexOf('-->\n'))) 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; content.innerHTML = t;
if (push) if (push)
history.pushState('', '', u); history.pushState('', '', u);

10
static/util.js
View file

@ -19,3 +19,13 @@ export function shuffle(array) {
[array[i], array[j]] = [array[j], array[i]]; [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);
});
}

3
templates/base.html
View file

@ -4,8 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title> <title>{{ title }}</title>
<link href="/static/style.css" rel="stylesheet"> {{ sheets }}
<link href="/static/highlight.css" rel="stylesheet">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
</head> </head>
<body> <body>