<html> <head> <meta charset="utf-8"> <title>Kittybox-Micropub debug client</title> <style type="text/css"> * { 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; } </style> <script type="module"> const form = document.getElementById("micropub"); const channel_select_radio = document.getElementById("select_channels"); channel_select_radio.onclick = async () => { const channels = await query_channels() 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 } } } async function query_channels() { const response = await fetch(form.action + "?q=config", { headers: { "Authorization": `Bearer ${form.elements.access_token.value}` } }) const config = await response.json(); return config["channels"] } 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 = `<a href="${channel.uid}">${channel.name}</a>` channel_list.appendChild(template) }) } form.onsubmit = async (event) => { event.preventDefault() console.log(JSON.stringify(construct_body(form))) try { const response = await fetch(form.action, { method: form.method, headers: { "Authorization": `Bearer ${form.elements.access_token.value}`, "Content-Type": "application/json" }, body: JSON.stringify(construct_body(form)) }) if (response.status != 201 || response.status != 202) { console.error(await response.json()); } if (response.headers.get("Location")) { window.location.href = response.headers.get("Location"); } } catch (e) { console.error(e) } } </script> </head> <body> <h1 class="header">Kittybox-Micropub debug client</h1> <main> <p> In a pinch? Lost your Micropub client, but need to make a quick announcement? Worry not, the debug client has your back. <i>I just hope you have a spare Micropub token stored somewhere like I do...</i> </p> <form action="/micropub" method="POST" id="micropub"> <fieldset> <legend>Authorization details</legend> <section> <label for="access_token">Access token:</label> <input id="access_token" name="access_token" type="password"> <p><a href="https://gimme-a-token.5eb.nl/" target="_blank">Get an access token (will open in a new tab)</a></p> </section> </fieldset> <fieldset> <legend>Post details:</legend> <section> <label for="name">Name (leave blank for an unnamed post):</label> <input id="name" type="text"> </section> <section> <label for="content">Content:</label> <textarea id="content" placeholder="Your post's text goes here"></textarea> </section> <section> <label for="category">Categories (separeted by commas):</label> <input id="category" type="text"> </section> <fieldset> <legend>Channels</legend> <section> <input type="radio" id="no_channel" name="channel_select" checked value=""> <label for="no_channel">Default channel only</label> </section> <section> <input type="radio" id="select_channels" name="channel_select" value="on"> <label for="select_channels">Select channels manually</label> </section> <fieldset id="channels" style="display: none"> <legend>Available channels:</legend> <template id="channel_selector"> <section> <input type="checkbox" name="channel" id="" value=""> <label for=""></label> </section> </template> <div id="channels_target"></div> </fieldset> </fieldset> </fieldset> <input type="submit"> </form> </main> </body> </html>