Skip to main content

Items tagged with: PhosphorIcons

Search

Items tagged with: PhosphorIcons

#dev #web #javascript #html #css #nodejs #SmallWeb #kitten #htmx #icons #streaminghtml #Markdown #websocket #phosphoricons

Coming soon: Kittenā€™s Settings pages are shedding their emoji for elegant `kitten.icons` thanks to the recently integrated Phosphor icons set by @minoraxis and @rektdeckard

kitten.small-web.org

#Kitten #SmallWeb #design #icons #PhosphorIcons #web #dev

Screenshot of Kittenā€™s Settingā€™s page with a navigation on the left and main section on the right. Kitten is selected in the nav. A duotone icon of a cat is present both by the selected navigation item and by the heading in the main section. Navigation sections, each with a duotone icon: General Kitten Domain App Evergreen Web Security Identity Secrets State Overview Sessions Pages Requests Data Full text: Kitten Version 0-e4fe54-22.11.0-20250422125104 Born 2025/04/22 at 12:51:04 UTC (Taurus) Favourite colour #e4fe54 API version 0 (prelease, expect breaking changes) Runtime Node.js 22.11.0 Youā€™re running a development version thatā€™s more recent than the latest released Kitten (0-b47f54-22.11.0-20250417164339) that was born on 2025/04/17 at 16:43:39 UTC (Aries). Button: Downgrade Kitten to release version
Screenshot of the Domain section of the Kitten settings view. The icon for the section is a simple duotone house. Full text: Domain (text box), disabled. Showing ā€œlocalhostā€ [Callout: pink border, pink shooting star icon.] Use the --domain flag to set the domain when running in development mode. In addition to localhost, Kitten has support for place1.localhost - place4.localhost for testing Small Web apps (peer-to-peer web apps) locally. Deployment Here are some ways you can deploy your site when youā€™re ready to. Using Domain: Use an existing Small Web host like small-web.org. Run your own instance of Domain and deploy using that. On any computer that runs Linux[1]: Deploy your site to any server (like a tiny single-board computer or your own VPS server somewhere) using Kittenā€™s deploy command and point your domainā€™s DNS to its IP address manually. For more details, please see the Deploying a Kitten applicaton section of the Kitten Reference guide. With systemd (this is not some political statement; itā€™s justā€¦
Screenshot of Secrets section of Kitten Settings. The icon for the section is a stylised password field with a caret and two asterisks. Full text: Secrets These secrets are generated in your browser. They are not sent to or stored on your server. Please do not share these with anyone. ed25519 private key This is the secret that protects your main public identity (ed25519 private key). You should keep your ed25519 private key in your password manager. Password field. Show and Copy buttons ssh private key If you add this to the ~/.ssh directory on your computer, alongside your public ssh key, you can ssh into your server. (Each time your OpenSSH private key is derived from your ed25519 private key, it will be a little different ā€“ by 12 characters, to be precise. This is normal and the keys are all equivalent.) Password field. Show and Copy buttons
Screenshot of State:sessions section of Kitten settings. The icon for the section is a clock with dots on its periphery from the twelve oā€™clock to three oā€™clock position. The page has a list of sessions, including a dutotone green rounded checkout icon for those that are authenticated. The other fields include Age, ID, and events. Ages are shown as ~4 hours, ~3 hours, etc. The IDs are random strings (e.g., C8XJabPBVEc0FJoHi18Su6H6) And all the shown pages have 0 events listed.
#dev #design #web #SmallWeb #kitten #icons #phosphoricons @Tobias Fried @Helena Zhang

New Kitten feature: Icons!

You can now make use of a subset of the icons in the Phosphor icons set by @minoraxis and @rektdeckard.

kitten.small-web.org/referenceā€¦

Search through them in your editor by referencing `kitten.icons.categories` and `kitten.icons.tags`.

Add this to a file called index.page.js and run `kitten` to see a large duotone pink cat (because why not?):

export default function () {
return kitten.html`
<${kitten.icons.c.Cat}
size=40%
weight=duotone
colour=deeppink
/>
`
}

(And yes, the set includes icons for the fediverse. This one of the reasons I chose it.) ;)

Enjoy!

:kitten:šŸ’•

#Kitten #SmallWeb #SmallTech #icons #PhosphorIcons #web #dev #HTML #CSS #JavaScript #SVG #NodeJS #authoring #intellisense

Screenshot of the all icons example at the end of this section showing the icons sorted alphabetically and rendered in duotone deep pink. The icons starting with a and b are visible in the browser.
#dev #web #javascript #html #css #SmallTech #nodejs #SmallWeb #kitten #svg #icons #authoring #phosphoricons #intellisense @Tobias Fried @Helena Zhang

Coming tomorrow to Kittenā€¦ Kitten icons!

Kitten will have built-in support for the Phosphor icons set with full authoring-time language intelligence where you can search for icons via category and tag (in addition to the canonical alphabetical categorisation).

Thought this was going to take me a few hours but it took a few days thanks to running into issues with size limits, type inference from JavaScript types in modules, etc., with the TypeScript language server but I believe Iā€™ve finally cracked it :)

:kitten: šŸ’•

#Kitten #SmallWeb #icons #PhosphorIcons #staticTypes #taxonomy #web #dev #TypeScript #languageServer

Screenshot of detail of a Kitten template open in a code editor. Author is editing Kitten component reference in a markdown block, within a H2 header. The caret is at <${kitten.icons.tags. and the autocompletion box is open showing a list of possible fields: a11y, accessibility, accessible, accomodations, account, accounts, accuracy, acrobat, activity, add. The reasty of the line of code reads } weight=duotone size=1.5em/>
#dev #web #SmallWeb #typescript #kitten #taxonomy #icons #languageserver #phosphoricons #statictypes

ā‡§