Login

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.ar.al is one of the many independent Mastodon servers you can use to participate in the fediverse.
This is my personal fediverse server.

Administered by:

Server stats:

1
active users

mastodon.ar.al: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.8

Aral Balkan

Very excited about the latest feature/workflow I’m adding to Kitten. I call it… 🥁

✨ Streaming HTML ✨

Implement back-end functionality and stream HTML updates to the client without writing any front-end JavaScript.

Just give your forms names and listen for them in an onConnect() handler you export from your page. Kitten handles everything else – setting up a WebSocket route for you, mapping triggers to events, etc. – thanks to Kitten + magic 🪄

Screenshot of Helix Editor showing the contents of index.page.js. The highlighted area is in an exported page route (`export default () => kitten.html`) inside a div: <form name='add'> <label for='postUrl'>Post link:</label> <${PostLinkInput} /> <${AddButton} /> </form> Full listing of source code visible in screenshot follows: export default () => kitten.html` <page water> <markdown> # Streamiverse settings Browse and curate your stream. ## Add to stream </markdown> <div> <form name='add'> <label for='postUrl'>Post link:</label> <${PostLinkInput} /> <${AddButton} /> </form> <details id='hint'> <summary>Help</summary> <p>Copy the post link from the context menu on the date of the post.</p> <img class='thumb' src='./copy-link.png' alt='Screenshot of Mastodon interface showing the context menu open on a post’s link with the Copy Link option showing.'> </details> <markdown> ## View and remove posts </markdown> <form name='remove'> <${PostsList}> ${kitten.db.posts.map(post => kitten.html`<${Post} post=${post} showRemoveButton />`)} </> </form> </div> <style> label { display: block; } input, button { display: inline-block; } input { width: 42ch; } ul { padding: 0; }
Screenshot of code: Highlighted code is inside exported function onConnect (_request, and page): page.on('add', async data => { // Show status update. page.send(kitten.html`<${AddButton} busy/>`) // Calculate the status API URL and fetch the post. const postUrl = new URL(data.postUrl) const fediverseServer = postUrl.origin const postId = postUrl.pathname.substring(postUrl.pathname.lastIndexOf('/') + 1) const statusApiUrl = `${fediverseServer}/api/v1/statuses/${postId}` const post = await (await fetch(statusApiUrl)).json() // Persist the post. kitten.db.posts.push(post) // Clear URL input (replace it with a fresh one). page.send(kitten.html`<${PostLinkInput} />`) // Re-enable the Add button. page.send(kitten.html`<${AddButton} />`) // Show the new post at the top of the list. page.send(kitten.html` <${PostsList}> <${Post} post=${post} showRemoveButton /> </> `) Above onConnect handler is a comment: When an onConnect() handler is exported from a page, Kitten automatically creates a WebSocket route and wires it up to call the handler with a page (PageSocket instance). When an HTMX request is triggered, Kitten maps the name of the triggering DOM element to an event handler for the event with the same name that you listen for on that page reference. As you are handling the workload of a call on the server, you can stream updates to the page by sending snippets of HTML formatted using HTMX conventions.
#Kitten#SmallWeb#StreamingHTML
Jan 30, 2024, 12:43 PM·Public·Web
9boosts·28favorites
ExploreLive feeds
About