From c00547c8437b992aa073378ab165aa40b073e1b4 Mon Sep 17 00:00:00 2001 From: Vika Date: Fri, 15 Jul 2022 02:18:14 +0300 Subject: PoC for modularity and WIP built-in Micropub client rework This is the living, breathing proof that Kittybox can be split into independent components without sacrificing any functionality. Just make sure all neccesary backing storage components are available to the modules that need them. Also the Micropub client was split into several files, because it's about to get much bigger and more full-featured. Yes, I am going to write it in vanilla JavaScript. I don't trust anything from NPM to run on my computer. Not anymore. Not after the node-ipc malware fiasco. And I am definitely not going to spin up a VM or a Docker container (who uses Docker containers as a security measure?) to hack on my own code. Cargo can at least be sandboxed inside Nix, where it can't do much harm. NPM basically requires unrestricted network access to download dependencies, and it runs arbitrary code upon **downloading** them. Cargo and rust-analyzer, on the other hand, can be configured to not trust the source code and its dependencies (for example, Cargo doesn't execute code on fetching dependencies - only on building, and rust-analyzer's proc-macro expansion support can be sacrificed for more security). --- kittybox-rs/companion-lite/index.html | 77 ++++++++++++++++++++++++++++++ kittybox-rs/companion-lite/main.js | 70 +++++++++++++++++++++++++++ kittybox-rs/companion-lite/micropub_api.js | 43 +++++++++++++++++ kittybox-rs/companion-lite/style.css | 47 ++++++++++++++++++ 4 files changed, 237 insertions(+) create mode 100644 kittybox-rs/companion-lite/index.html create mode 100644 kittybox-rs/companion-lite/main.js create mode 100644 kittybox-rs/companion-lite/micropub_api.js create mode 100644 kittybox-rs/companion-lite/style.css (limited to 'kittybox-rs/companion-lite') diff --git a/kittybox-rs/companion-lite/index.html b/kittybox-rs/companion-lite/index.html new file mode 100644 index 0000000..b643ba2 --- /dev/null +++ b/kittybox-rs/companion-lite/index.html @@ -0,0 +1,77 @@ + + + + Kittybox-Micropub debug client + + + + + + + + + + + + diff --git a/kittybox-rs/companion-lite/main.js b/kittybox-rs/companion-lite/main.js new file mode 100644 index 0000000..da7e6e1 --- /dev/null +++ b/kittybox-rs/companion-lite/main.js @@ -0,0 +1,70 @@ +import { query_channels, submit } from "./micropub_api.js"; + +function get_token() { + return form.elements.access_token.value +} + +const form = document.getElementById("micropub"); +const channel_select_radio = document.getElementById("select_channels"); + +channel_select_radio.onclick = async () => { + const channels = await query_channels(form.action, get_token()) + if (channels !== undefined) { + populate_channel_list(channels) + } +} + +const no_channel_radio = document.getElementById("no_channel"); +no_channel_radio.onclick = () => { + document.getElementById("channels").style.display = "none"; + const channel_list = document.getElementById("channels_target") + channel_list.innerHTML = ""; +} + +function construct_body(form) { + return { + type: ["h-entry"], + properties: { + content: [form.elements.content.value], + name: form.elements.name.value ? [form.elements.name.value] : undefined, + category: form.elements.category.value ? form.elements.category.value.split(",").map(val => val.trim()) : undefined, + channel: form.elements.channel_select.value ? Array.from(form.elements.channel).map(i => i.checked ? i.value : false).filter(i => i) : undefined + } + } +} + +function populate_channel_list(channels) { + document.getElementById("channels").style.display = "block"; + const channel_list = document.getElementById("channels_target") + channel_list.innerHTML = ""; + channels.forEach((channel) => { + const template = document.getElementById("channel_selector").content.cloneNode(true) + const input = template.querySelector("input") + const label = template.querySelector("label") + input.id = `channel_selector_option_${channel.uid}` + input.value = channel.uid + label.for = input.id + label.innerHTML = `${channel.name}` + + channel_list.appendChild(template) + }) +} + +form.onsubmit = async (event) => { + event.preventDefault() + const mf2 = construct_body(form); + console.log(JSON.stringify(mf2)); + try { + submit(form.action, get_token(), mf2) + } catch (e) { + // TODO show errors to user + + return + } + form.clear() +} + +document.getElementById("authorized").style.display = "block"; +// Local Variables: +// js-indent-level: 4 +// End: diff --git a/kittybox-rs/companion-lite/micropub_api.js b/kittybox-rs/companion-lite/micropub_api.js new file mode 100644 index 0000000..402c075 --- /dev/null +++ b/kittybox-rs/companion-lite/micropub_api.js @@ -0,0 +1,43 @@ +export async function query_channels(endpoint, token) { + const response = await fetch(endpoint + "?q=config", { + headers: { + "Authorization": `Bearer ${get_token()}` + } + }) + + const config = await response.json(); + + return config["channels"] +} + +export async function submit(endpoint, token, mf2) { + try { + const response = await fetch(endpoint, { + method: "POST", + headers: { + "Authorization": `Bearer ${token}`, + "Content-Type": "application/json" + }, + body: JSON.stringify(mf2) + }) + + + if (response.status != 201 || response.status != 202) { + let err = await response.json(); + console.error("Micropub error!", err); + + return err; + } else { + return { + "location": response.headers.get("Location") + } + } + } catch (e) { + console.error("Network error!", e) + throw e + } +} + +// Local Variables: +// js-indent-level: 4 +// End: diff --git a/kittybox-rs/companion-lite/style.css b/kittybox-rs/companion-lite/style.css new file mode 100644 index 0000000..09ed398 --- /dev/null +++ b/kittybox-rs/companion-lite/style.css @@ -0,0 +1,47 @@ +* { + box-sizing: border-box; +} + +:root { + font-family: sans-serif; +} + +body { + margin: 0; +} + +body > main { + margin: auto; + max-width: 1024px; +} + +h1.header { + margin-top: 0.75em; + text-align: center; +} + +fieldset + fieldset, +fieldset + input, +section + section, +section + fieldset +{ + margin-top: 0.75em; +} + +input[type="submit"] { + margin-left: auto; + display: block; +} + +form > fieldset > section > label { + width: 100%; + display: block; +} + +form > fieldset > section > input, form > fieldset > section > textarea { + width: 100%; +} + +textarea { + min-height: 10em; +} -- cgit 1.4.1