Mastodon Feed
aral@mastodon.ar.al ("Aral Balkan") wrote:
Coming soon (likely this afternoon, I’m writing tests and docs and updating examples as we speak)…
This is the sort of thing you’ll be able to do with Markdown pages. Just pop any arbitrary JavaScript you want in the new script block in the front matter and then import and use components as well as plain old JavaScript tagged template variable interpolation (not shown in this example) inside your Markdown.
The screen has all the code (sans the end of the last line of CSS and the closing tags for the and in the Reactions component, which I couldn’t make fit without reducing the font size) for the example you see in the browser with functional buttons that persist their state to Kitten’s built-in default database.
When I say all the code, I mean all the code. There is no scaffolding. Those two files are the only two files in the project.
#Kitten #SmallWeb #SmallTech #HTML #CSS #JavaScript #JS #Markdown #web #dev #comingSoon
![Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 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} />) } --- <!-- raw HTML omitted --> # 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} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3](https://files.mastodon.social/cache/media%5Fattachments/files/115/049/187/012/900/120/original/853c0c34a3e659b1.png)