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; }
https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/111/844/917/506/185/173/original/839c194b69b2936c.png