Public
- Public
- Network
- Groups
- Featured
- Popular
- People

Conversation

Notices

Embed this notice
Aral Balkan (aral@mastodon.ar.al)'s status on Sunday, 03-Mar-2024 22:49:25 JST Aral Balkan

You can now create HTML and CSS fragments in Kitten.
This introduces two new file extensions (.fragment.html and .fragment.css) and you can import these fragments into your pages and into other components and fragments as if they were JavaScript modules*.
HTML fragments also support slots.
Example:
https://codeberg.org/kitten/app/src/branch/main/examples/html-and-css-fragments
*Thanks to Kitten’s behind-the-scenes use of a custom ES Module Loader.
#Kitten #SmallWeb #web #dev #html #css #JavaScript #components #fragments #slots
In conversation about 9 months ago from mastodon.ar.al permalink
Attachments
1. Screenshot of terminal window on left, web browser on right. Terminal window has hx (Helix Editor) running, showing 23 lines of code, with the first two highlighted: import Styles from './Styles.fragment.css' import Markup from './Markup.fragment.html' export default async () => kitten.html` <page css> <h1>HTML and CSS fragments</h1> <${Markup}> <div>I’m content from index.page.js for the default slot.</div> <content for='other'> <div>I’m content from index.page.js for a named slot.</div> </content> </> <${Styles} /> <style> /* Override styles from the imported style fragment. */ :root { --accent-colour: lightblue; --border-width: 4px; } </style> ` The browser shows a heading (HTML and CSS fragments). The rest of the content is in a blue border: I’m some HTML from Markup.fragment.html. In a pink border box, indented: I’m content from index.page.js for the default slot. Back to default indentation, out of the pink border box: I’m some other HTML Markup.fragment.html. In another pink border box, indented: I’m content from index.page.js for a named slot. Back to default indentation again: I’m yet more HTML Markup.fragment.html.
  https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/112/032/022/285/011/743/original/0f12b6ffe92ebaeb.png
2. Screenshot of terminal window showing hx (Helix Editor) with two panes. Left pane, selected, shows source of Markup.fragment.html: <div class='box'> <p>I’m some HTML from Markup.fragment.html.</p> ${SLOT} <p>I’m some other HTML Markup.fragment.html.</p> ${SLOT.other} <p>I’m yet more HTML Markup.fragment.html.</p> </div> Right pane shows source of Styles.fragment.css: /* I’m some CSS */ :root { --accent-colour: red; --border-width: 2px; } div { border: var(--border-width) solid var(--accent-colour); margin: 1em; padding: 1em; } /* Show slotted divs with a different colour. */ div > div { border-color: lightpink; }
  https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/112/032/044/950/950/448/original/5b1d6e886eccdcd6.png
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Sunday, 03-Mar-2024 22:50:54 JST Aral Balkan
  in reply to
  
  (Feels good to close two-year-old feature requests.) :)
  https://codeberg.org/kitten/app/issues/25
  https://codeberg.org/kitten/app/issues/26
  :kitten: 💕
  #Kitten #SmallWeb #web #dev #html #css #JavaScript #ESM #loaders #NodeJS
  In conversation about 9 months ago permalink
  Attachments
  1. Domain not in remote thumbnail source whitelist: codeberg.org
    
    Add HTML loader
    
    from kitten
    
    Currently, the only way to include HTML is to wrap it in an ``` html`…` ``` template tag in a JavaScript file (.component, .fragment). But you might want to include some static HTML in an .html file: ```js import someStaticHtml from './static.html' ``` This loader will load th...
  2. Untitled attachment
    
    Invalid filename.
- Embed this notice
  happycoyote12 (happycoyote12@mastodon.social)'s status on Monday, 04-Mar-2024 00:31:20 JST happycoyote12
  in reply to
  
  @aral Your toot got to thinking, maybe you can help me out or direct me to where I can get help for MS Win 10 Error code 0xc0000428 & 0xc000000f? I tried all the fixes on YouTube. None worked, for me. Just asking. You got nothing? That's OK. Thanks in advance.
  
  In conversation about 9 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Monday, 04-Mar-2024 00:31:20 JST Aral Balkan
  in reply to
  - happycoyote12
  @happycoyote12 Sorry, I don’t really use windows. Apparently it’s about a corrupted boot? Maybe try this: https://www.wintips.org/fix-error-0xc0000428-0xc0000225-0xc000000f-at-windows-boot/
  In conversation about 9 months ago permalink
  Attachments
  1. Domain not in remote thumbnail source whitelist: www.wintips.org
    
    FIX ERROR 0xc0000428, 0xc0000225 or 0xc000000f at Windows Boot (Windows 10/8.1/8/7/Vista)
    
    from Konstantinos Tsoukalas
    
    The most common methods to fix the following BSOD errors at Windows Boot: ERROR 0xc0000428, 0xc0000225, 0xc000000f (Windows 10, 8.1, 8, 7 or Vista)
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Monday, 04-Mar-2024 01:11:23 JST Aral Balkan
  in reply to
  
  PS. Both the async declaration on the route and the box class on the div in the example are superfluous and left over from when I was experimenting with it. Neither are necessary in here.
  
  In conversation about 9 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Monday, 04-Mar-2024 04:06:43 JST Aral Balkan
  in reply to
  - Mayank
  @hi_mayank Like regular JavaScript components/fragments in Kitten (.component.js/.fragment.js files), HTML and CSS fragments actually get converted to JavaScript modules.
  So, for example, my.fragment.html:
```html
<div>
<h2>Slot ahead</h2>
${SLOT}
</div>
```
  Would get converted into:
```js
export default ({SLOT = ''}) => kitten.html`
<div>
<h2>Slot ahead</h2>
${SLOT}
</div>
`
```
  Hope that helps clarify the reasoning. I’m trying not to introduce extra syntax whenever possible :)
  In conversation about 9 months ago permalink
  Attachments
  1. Untitled attachment
- Embed this notice
  Mayank (hi_mayank@hachyderm.io)'s status on Monday, 04-Mar-2024 04:06:44 JST Mayank
  in reply to
  
  @aral i'm curious about the choice to use JS interpolation syntax (`${SLOT}`) inside the fragment markup, vs just using HTML (`<my-slot>` or `<Slot>`) 🤔
  
  In conversation about 9 months ago permalink

Public

Conversation

Notices

Feeds