Recent searches
Search options
Administered by:
#kitten
New Kitten release
• Minor fix: Styles automatically gathered and de-duplicated from the body into the head are now placed _after_ other items in the <head> slot. Since you would expect styles added to the body of the page to override ones in the head, this now brings Kitten’s behaviour in-line with authoring expectations.
Enjoy!
Just have to share this, the babies are purring and snoozing curled up together because they love each other so much.
Cute & Funny Animals 
New Kitten update
• 
Kitten HTML templates and kitten.Component render functions can now be async.
This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.
So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)
I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.
The kitten.Component version also has a refresh button that streams a different three to the page.
For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.
Enjoy!
![const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/812/670/834/838/original/228733ad125b57f4.png "const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`")
![class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/813/076/463/648/original/22f714259e01b4f8.png "class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}")
Our team of world-class veterinary specialists is ready to do everything we can to give Kelly a future, but it’s been an intense couple of weeks with so many #animals needing our help, and we need your support more than ever. If you also believe that this tiny #kitten deserves a chance, please donate. Even a few dollars helps: http://www.mspca.org/pca 
#catsofmastodon #massachusetts #rescuecat #rescuecats #cat #cats #kittens
This is Kelly. She’s an 8 week old who plays, purrs and tries to explore like any other #kitten her age, but something inside of her body is very wrong. She has a congenital diaphragmatic hernia, a hole in her diaphragm that’s letting her abdominal organs push into her chest.
There’s a surgery we can do to fix this, but it’s risky given her age and tiny size. If we don’t do the surgery though, her condition is fatal 1/
With all the turmoil and vitriol in the news today, here is something calming. A puppy and a kitten who are friends. 
so our cat leo turned out to be pregnant too AND SHE HAD KITTENS but she had them underneath the house except for one she left in the yard (????) and when my sister brought that one in and tried to put them in her room, leo was like 'NO' and decided that my den was the shelter space for this kitten
yes we need to get them a box or some other form of shelter for warmth, we KNOW. they were just born a few hours ago. #cat #kitten #CatsOfMastodon
here is dippy's surviving kitten, they turn a week old tomorrow #cat #kitten #CatsOfMastodon
