Aral Balkan @aral

Recent searches

Search options

Only available when logged in.

New in Kitten¹: Markdown fragments

You can now write your Markdown in separate .fragment.md files and `import()` them as if they were JavaScript modules, just like you can with HTML and CSS fragments.

And while they don’t support props, they do support slots (including named slots, which you can use as poor man’s props.)

Enjoy!

¹ https://codeberg.org/kitten/app

Screenshot of code open in Helix Editor (active tab: index.page.js, inactive tabs: Markdown.fragment.md, Markup.fragment.md, Styles.fragment.md):

import Markup from './Markup.fragment.html'
import Styles from './Styles.fragment.css'
import Markdown from './Markdown.fragment.md'

export default () => kitten.html
<page css>
<${Markup} />

<${Markdown}>
<content for='title'>This is the title</content>
<content for='date'>${new Date()}</content>
<button>I’ve been slotted in.</button>
</>

<${Styles} />

$Screenshot of code for Markdown.fragment.md: ## And this is from a markdown file As is this. - Title: __${SLOT.title}__ - Date: __${SLOT.date}__ ${SLOT} And the content above was slotted into a markdown file.$

Screenshot of code for Markup.fragment.html:

<div>
<h1>This is from an HTML fragment.</h1>
<p>As is this.</p>
</div>

Screenshot of the resulting page, rendered in a web browser:

H1: This is from an HTML fragment.

Paragraph: As is this.

H2: And this is from a markdown file

Paragraph: As is this.

List item: Title: This is the title

List item: Date: Wed Mar 13 2024 20:07:03 GMT+0000 (Greenwich Mean Time)

Button: I’ve been slotted in.

Paragraph: And the content above was slotted into a markdown file.

#Kitten #SmallWeb #web

Mar 13, 2024, 08:18 PM··Web

9boosts·30favorites

**Aral Balkan** @aral · Mar 20, 2024 *

Mar 20, 2024 *

Aral Balkan @aral

Quick heads up: I’ve just deployed a fix that escapes backticks in Markdown fragments and generally makes the Markdown fragment support more robust in Kitten.

https://codeberg.org/kitten/app

(Remember that updating Kitten is as easy as running `kitten update` from the command-line. Or just run the one-line installation command again from the Install section of the site, whichever you find easiest. Either way, it literally only takes a couple of seconds.)

#Kitten #SmallWeb #Markdown #web dev

Codeberg.orgappA web development kit that’s small, purrs, and loves you.

**Michael Kinder** @michael@foggymtndrifter.social · Mar 13, 2024

Mar 13, 2024

Michael Kinder @michael@foggymtndrifter.social

@aral This is awesome! I'm gonna play around with Kitten this weekend. I've been meaning to get my site back up for around 3 years but always dreaded it. Kitten seems to be just the thing for my Small Web site.

**Aral Balkan** @aral · Mar 13, 2024

Mar 13, 2024

Aral Balkan @aral

@michael Yay! Let me know how you get on with it and ping me if you have any issues :)

**Shankar** @shankarux@mastodon.social · Mar 14, 2024

Mar 14, 2024

Shankar @shankarux@mastodon.social

@aral oh my this is fantastic. I use Astro and while it has slotting, named slots are so much more intuitive.

**Aral Balkan** @aral · Mar 14, 2024

Mar 14, 2024

Aral Balkan @aral

@shankarux Thanks, Shankar. Do let me know how you get on if you have a play with it (and ping me if you run into any issues; it’s still pre-release but the core functionality is pretty mature at this point) :)

**Shankar** @shankarux@mastodon.social · Mar 14, 2024

Mar 14, 2024

Shankar @shankarux@mastodon.social

@aral sure will try it out!

**andre** @andre@fedi.jaenis.ch · Mar 21, 2024

Mar 21, 2024

andre @andre@fedi.jaenis.ch

@aral Um, the Debian bug (bash: line 226: sysctl: Command not found.) is still present. You might want to handle the Buffer, though. Codeberg is currently under scheduled maintenance.

$ kitten update
Kitten
by Aral Balkan, Small Technology Foundation

Version 1-d4efab-20.7.0-20240311091735
Born 2024/03/11 at 09:17:35 UTC (Pisces)
Fav. colour #d4efab ███
API version 1
Runtime Node.js 20.7.0
╭───────────────────────────────────────────╮
│ Like this? Fund us! │
│ │
│ We’re a tiny, independent not-for-profit. │
│ https://small-tech.org/fund-us │
╰───────────────────────────────────────────╯
Need help?
https://codeberg.org/kitten/app/issues

Updating Kitten to latest available package…

Latest available package:

Version : 1-46f381-20.7.0-20240320151559
Created on: Wed Mar 20 2024 16:15:59 GMT+0100 (Mitteleuropäische Normalzeit)
bash: Zeile 226: sysctl: Kommando nicht gefunden.

Error: upgrade failed. Details:
Error: Command failed: curl -sL https://kittens.small-web.org/install/1/ | bash -s -- 1
bash: Zeile 226: sysctl: Kommando nicht gefunden.

at checkExecSyncError (node:child_process:890:11)
at execSync (node:child_process:962:15)
at Ou.upgrade (file://$HOME/.local/share/small-tech.org/kitten/app/kitten-bundle.js:856:1799)
at RHe (file://$HOME/.local/share/small-tech.org/kitten/app/kitten-bundle.js:1299:111)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
status: 127,
signal: null,
output: [
null,
<Buffer f0 9f 90 b1 20 49 6e 73 74 61 6c 6c 69 6e 67 20 4b 69 74 74 65 6e e2 80 a6 0a 0a 20 20 e2 80 a2 20 57 65 62 20 69 6e 73 74 61 6c 6c 20 64 65 74 65 63 ... 120 more bytes>,
<Buffer 62 61 73 68 3a 20 5a 65 69 6c 65 20 32 32 36 3a 20 73 79 73 63 74 6c 3a 20 4b 6f 6d 6d 61 6e 64 6f 20 6e 69 63 68 74 20 67 65 66 75 6e 64 65 6e 2e 0a>
],
pid: 39309,
stdout: <Buffer f0 9f 90 b1 20 49 6e 73 74 61 6c 6c 69 6e 67 20 4b 69 74 74 65 6e e2 80 a6 0a 0a 20 20 e2 80 a2 20 57 65 62 20 69 6e 73 74 61 6c 6c 20 64 65 74 65 63 ... 120 more bytes>,
stderr: <Buffer 62 61 73 68 3a 20 5a 65 69 6c 65 20 32 32 36 3a 20 73 79 73 63 74 6c 3a 20 4b 6f 6d 6d 61 6e 64 6f 20 6e 69 63 68 74 20 67 65 66 75 6e 64 65 6e 2e 0a>
}