The new integrated Markdown parser I’ve been implementing in Kitten has been kicking my ass for the past few weeks but I think I finally have it fully working and seamlessly so. Expect a new release this/next week that brings the parsing of Markdown pages (.page.md files) in your apps up to the standard of the recently-improved runtime Markdown parsing in Kitten HTML tagged-template strings (within <markdown>…</markdown> blocks).
The coolest thing is I was able to implement this without introducing any new syntax. In fact, I was able to simplify things so that you can now add arbitrary JavaScript to your Markdown pages within a multi-line script block in the YAML front matter (script: |) and use JavaScript string interpolation syntax in your Markdown (and, of course, Kitten components and conditionals, which, themselves, rely on string interpolation).
The only place where you have to deviate from standard Markdown in your Markdown pages is if you have JavaScript string interpolations or Kitten components/conditionals in code fences within your Markdown. In that case, you’ll have to escape them (e.g., <\${Component} />, \<if \${something}>something\</if>, etc.). And, to be fair, the person most impacted by this is likely me as the Kitten documentation at https://kitten.small-web.org is written in Kitten so I had a lot of escaping to do. But for any other use case, it means that things should just work and work exactly as they do in JavaScript pages (page.js files).
Anyway, so this is going to be a breaking change so I thought I’d give you (the three of you playing with Kitten right now?) a heads up. Of course, I’ll be updating the documentation to reflect all this.
(Remember, Kitten is in pre-release and it’s the framework I’m building/using to create Catalyst – the Small Web hosting solution – and Yarn – a small web – peer to peer – personal site app. So Kitten isn’t the means, not the end. And, at least until the Version 1 API freeze, things can and will break. That said, there’s nothing stopping you from playing with it now and, to be fair, at this point, such breaking changes should become rarer and rarer).
💕
#Kitten #SmallWeb#SmallTech #web #dev#Markdown#JavaScript#HTML#CSS#JavaScript#NodeJS
![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](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/115/049/184/562/940/121/original/3683dc4fa5099f6b.png)
