updated things???

experiments/site-themes/index.html

@@ -0,0 +1,33 @@
+---
+title: Site Theming
+description: Apply custom CSS to most pages on here.
+slug: themes
+---
+
+<div id="app">
+    <noscript>You need JS on for this to work.</noscript>
+    <div>Loading... (or your browser is bad)</div>
+</div>
+
+<script src="/assets/js/mithril.js"></script>
+<script defer src="./index.js">
+</script>
+<style>
+button {
+    border: 1px solid black;
+    background: lightgray;
+    border-radius: 0;
+    padding: 0.5em;
+    margin-right: -1px;
+}
+
+.toolbar {
+    margin-bottom: 1em;
+    margin-top: 1em;
+}
+
+.style-input {
+    width: 100%;
+    min-height: 50vh;
+}
+</style>

experiments/site-themes/index.js

@@ -0,0 +1,48 @@
+let currentStyle = localStorage.getItem("user-stylesheet") || ""
+
+if (!customStyleEl) {
+    customStyleEl = document.createElement("style")
+    customStyleEl.appendChild(document.createTextNode(customStyle))
+    customStyleEl.onload = () => console.log("Loaded custom styles")
+    customStyleEl.id = "custom-style"
+    document.head.appendChild(customStyleEl)
+}
+
+const saveStyles = () => { localStorage.setItem("user-stylesheet", currentStyle) }
+const applyStyles = () => {
+    try { document.head.removeChild(customStyleEl) } catch {}
+    while (customStyleEl.firstChild) { customStyleEl.removeChild(customStyleEl.firstChild) }
+    customStyleEl.appendChild(document.createTextNode(currentStyle))
+    document.head.appendChild(customStyleEl)
+}
+const removeStyles = () => {
+    document.head.removeChild(customStyleEl)
+}
+
+const handleTab = ev => {
+    if (ev.keyCode === 9) { // tab
+        const start = ev.target.selectionStart
+        const end = ev.target.selectionEnd
+        const value = ev.target.value
+        ev.target.value = value.substring(0, start) + "\t" + value.substring(end)
+        ev.target.selectionStart = ev.target.selectionEnd = start + 1
+        ev.preventDefault()
+    }
+}
+
+const inputOnCreate = vnode => { vnode.dom.value = currentStyle }
+
+const App = {
+    view: () => m("", [
+        m("em", "Due to browser limitations, this currently cannot tell you about errors or warnings in your stylesheet. You can check your browser console for these, probably."),
+        m(".toolbar", [
+            m("button", { onclick: () => { saveStyles(); applyStyles() } }, "Save & Apply"),
+            m("button", { onclick: saveStyles }, "Save"),
+            m("button", { onclick: applyStyles }, "Apply"),
+            m("button", { onclick: removeStyles }, "Remove")
+        ]),
+        m("textarea.style-input", { oncreate: inputOnCreate, oninput: ev => { currentStyle = ev.target.value }, onkeydown: handleTab }),
+    ])
+}
+
+m.mount(document.getElementById("app"), App)