#SlottyMcSlotFace

I might actually have created the Slotty McSlotFace example… (I’m not sure if this calls for an intervention or not but I know I’m having fun.)

:kitten:💕

https://codeberg.org/kitten/app/src/branch/main/examples/slotty-mcslotface

#Kitten #SlottyMcSlotFace #slots #SmallWeb #web #dev

$Screenshot of screen split into quarters. On the left, two terminal windows with code, on the right, two browser windows with an illustration of a monkey-like creature with a tuft of blonde hair at the top (“normal”) and the same creature wearing a hat, glasses and false moustache in the bottom one (“disguised”). Code excerpt, top: export default ({ slot }) => html` <if ${slot.head !== undefined}> <then> ${slot.head} <else> <img src='/images/head.png' alt='Head'> </if> <if ${slot.eyes !== undefined}> <then> ${slot.eyes} <else> <img src='/images/eyes.png' alt='Eyes'> </if> <if ${slot.mouth !== undefined}> <then> ${slot.mouth} <else> Code excerpt, bottom: import Slotty from './Slotty.component.js' import Navigation from './Navigation.component.js' export default _ => html` <${Slotty}> <content for='head'> <img src='/images/disguised/head.png' alt='Head with hat.'> </content> <content for='eyes'> <img src='/images/disguised/eyes.png' alt='Eyes with glasses.'> </content> <content for='mouth'> <img src='/images/disguised/mouth.png' alt='Mouth with moustache.'> </content> </> <${Navigation} currentPage='Disguised' /> `$