Toitlang.org

This is the official site for the open source programming language Toit.

It is built with SvelteKit.

Developing

npm install
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

CSS

This project is using only valid CSS but with two preprocessors (via postcss) that allow to use future CSS spec:

• postcss-nesting that allows to use the new css nesting spec (beware that this behaves differently to the way SASS nesting works)
• postcssLabFunction that allows to use the new lab and lch CSS color spec

In addition to these preprocessors, we added the linearClamp function which is defined in ./tool/postcss-linear-clamp.cjs. See the docs there on how to use it.

Where it makes sense, the SUIT naming convention is used. If it's a simple component with a few elements then they can be styled directly. But if it's a reusable component (like .Button) then a SUIT component should be created.

Icons

All icons are imported via unplugin-icons. If possible, the feather icon pack should be used (careful: there are two feather packs).

Building

This page is built with the static svelte kit adapter, so all pages are prebuilt as static html pages and then served by GitHub Pages.

Run this command to build the site:

npm run build

You can preview the built app with npm run preview.

Testing

Tests are written with cypress.

npx cypress run # Simply runs the test
npx cypress open # Opens the cypress test runner

License

See LICENSE file.