Conversation

Notices

1. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 01-May-2025 20:49:25 JST Aral Balkan

   Coming soon: Generic script blocks in markdown pages in Kitten¹

   The line between what you can do from a Markdown page vs what you can do from a JavaScript page in Kitten continues to blur… soon, you’ll be able to add a generic script block to the front matter of your Markdown pages for quick little things.

   e.g., In the screenshots you see all the code necessary to create the page with the reactions component which actually persists the results to your data. That is all the code in your app. Nothing else. No scaffolding or anything else. Seriously :)

   ¹ https://kitten.small-web.org

   #Kitten #SmallWeb #markdown #components #JavaScript #comingSoon #web #dev

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 01-May-2025 20:50:11 JST Aral Balkan

     in reply to

     Alt text for second image (code listings) is here due to arbitrary character limit on alt text in Mastodon:

     Source code for the only two files in the project that created the example:

     index.page.md:

     ---
     title: An interactive markdown page
     imports:
     - import Reaction from './Reaction.fragment.js'
     script: |
     // Initialise database if necessary.
     if (kitten.db.reactions === undefined) { kitten.db.reactions = {} }
     if (kitten.db.reactions.Heart === undefined) { kitten.db.reactions.Heart = 0 }
     if (kitten.db.reactions.Confetti === undefined) { kitten.db.reactions.Confetti = 0 }
     if (kitten.db.reactions.Smiley === undefined) { kitten.db.reactions.Smiley = 0 }

     let page

     export function onConnect (data) {
     page = data.page
     }

     export function onReaction (data) {
     kitten.db.reactions[data.type]++
     page.send(kitten.html`<${Reaction} />`)
     }
     ---
     <page css>

     # Hello!

     While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block.

     ## Reactions{id=your-reactions}

     <${Reaction} />

     Reaction.fragment.js:

     /**
     Simple Reactions control.

     Broadcasts «reaction» event.
     */
     function Button ({ Icon }) {
     const iconName = Icon.name
     return kitten.html`
     <div class='reaction'>
     <button
     name='reaction'
     data='type:"${iconName}"'
     connect
     >
     <${Icon} weight=duotone alt=${Icon.name} colour=deeppink><title>${Icon.name}</title></>
     </button>
     ${kitten.db.reactions[iconName]}
     </div>
     `
     }

     export default function Reactions () {
     return kitten.html`
     <div id='reactions' morph>
     <${Button} Icon=${kitten.icons.h.Heart} />
     <${Button} Icon=${kitten.icons.c.Confetti} />
     <${Button} Icon=${kitten.icons.s.Smiley} />
     <style>
     button { background: var(--background-alt); }
     button:hover { background: var(--background); }
     #reactions { display: flex; }
     .reaction { display: flex; flex-direction: column; align-items: center; font-size: 2em;}
     </style>
     </div>
     `
     }

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 02-May-2025 00:22:14 JST Aral Balkan

     in reply to

     Oh, and here’s what it looks like if you use Kitten’s class-based pages and components instead.

     (You can have the event handling encapsulated on the component itself. Kitten automatically bubbles events up the component tree on the server side.)

     #Kitten #SmallWeb #markdown #components #JavaScript #comingSoon #web #dev

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 02-May-2025 00:22:57 JST Aral Balkan

     in reply to

     Alt text for third image (code listing) is here to due to arbitrary character limit on alt text in Mastodon:

     Source code of Reaction.fragment.js:

     /**
     Simple Reactions control.
     */
     // @ts-check
     import kitten from '@small-web/kitten'

     // Initialise database if necessary.
     if (kitten.db.reactions === undefined) { kitten.db.reactions = {} }
     if (kitten.db.reactions.Heart === undefined) { kitten.db.reactions.Heart = 0 }
     if (kitten.db.reactions.Confetti === undefined) { kitten.db.reactions.Confetti = 0 }
     if (kitten.db.reactions.Smiley === undefined) { kitten.db.reactions.Smiley = 0 }

     export default class Reactions extends kitten.Page {
     html () {
     return kitten.html`
     <div id='reactions' morph>
     <page css>
     <${Button.connectedTo(this, {Icon: kitten.icons.h.Heart})} />
     <${Button.connectedTo(this, {Icon: kitten.icons.c.Confetti})} />
     <${Button.connectedTo(this, {Icon: kitten.icons.s.Smiley})} />
     <style>
     button { background: var(--background-alt); }
     button:hover { background: var(--background); }
     #reactions { display: flex; }
     .reaction { display: flex; flex-direction: column; align-items: center; font-size: 2em;}
     </style>
     </div>
     `
     }

     /** @param {{ type: string }} data */
     onReaction (data) {
     kitten.db.reactions[data.type]++
     this.update()
     }
     }

     class Button extends kitten.Component {
     html ({ Icon }) {
     const iconName = this.data.Icon.name
     return kitten.html`
     <div class='reaction'>
     <button
     name='reaction'
     data='type:"${iconName}"'
     connect
     >
     <${this.data.Icon}
     weight=duotone
     alt=${iconName}
     colour=deeppink
     >
     <title>${iconName}</title>
     </>
     </button>
     ${kitten.db.reactions[iconName]}
     </div>
     `
     }
     }