Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp last month
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} />`) } --- <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} /> 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
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} />`) } --- <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} /> 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
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} />`) } --- <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} /> 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
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp last month
Three windows: top-left, source of page.js version of Kitten count example, bottom-left, source of page.md version, and on the right, the output in a browser. Top-left: kitten.db.kittens ??= { count: 0 } export default () => kitten.html` <h1>Kitten count</h1> <p>${'🐱️'.repeat(++kitten.db.kittens.count)}</p> ` Bottom-left: --- script: | kitten.db.kittens ??= { count: 0 } --- # Kitten count ${'🐱️'.repeat(++kitten.db.kittens.count)} Right: Kitten count (heading) and 15 🐱️ emojis.
Three windows: top-left, source of page.js version of Kitten count example, bottom-left, source of page.md version, and on the right, the output in a browser. Top-left: kitten.db.kittens ??= { count: 0 } export default () => kitten.html` <h1>Kitten count</h1> <p>${'🐱️'.repeat(++kitten.db.kittens.count)}</p> ` Bottom-left: --- script: | kitten.db.kittens ??= { count: 0 } --- # Kitten count ${'🐱️'.repeat(++kitten.db.kittens.count)} Right: Kitten count (heading) and 15 🐱️ emojis.
Three windows: top-left, source of page.js version of Kitten count example, bottom-left, source of page.md version, and on the right, the output in a browser. Top-left: kitten.db.kittens ??= { count: 0 } export default () => kitten.html` <h1>Kitten count</h1> <p>${'🐱️'.repeat(++kitten.db.kittens.count)}</p> ` Bottom-left: --- script: | kitten.db.kittens ??= { count: 0 } --- # Kitten count ${'🐱️'.repeat(++kitten.db.kittens.count)} Right: Kitten count (heading) and 15 🐱️ emojis.
Home Login