Alavi | علوی
@alavi@techhub.social  ·  activity timestamp last week
⚯ Michel de Cryptadamus ⚯
@cryptadamist@universeodon.com  ·  activity timestamp 3 weeks ago
⚯ Michel de Cryptadamus ⚯
@cryptadamist@universeodon.com  ·  activity timestamp 3 weeks ago
Ben Ramsey
Ben Ramsey boosted
Dmytro (Dima) Oliinyk :paw:
@dima@blog.dol.ch  ·  activity timestamp 4 weeks ago
Dmytro (Dima) Oliinyk :paw:
@dima@blog.dol.ch  ·  activity timestamp 4 weeks ago
Giacomo Tesio
@giacomo@snac.tesio.it  ·  activity timestamp 4 weeks ago
Giacomo Tesio
@giacomo@snac.tesio.it  ·  activity timestamp 4 weeks ago
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
alcinnz
alcinnz boosted
Martin Owens :inkscape:
@doctormo@floss.social  ·  activity timestamp 3 months ago
Jon Ippolito
@jonippolito@digipres.club  ·  activity timestamp 2 months ago
Jon Ippolito
@jonippolito@digipres.club  ·  activity timestamp 2 months ago
alcinnz
Cassidy James :gg: :fh:
alcinnz and 1 other boosted
Micah Ilbery :sloth_coffee:
@micahilbery@slothsneed.coffee  ·  activity timestamp 3 months ago
Home Login