Your first build

The project needs a configuration file, one page, and one component.

Configure Sklair

Write this to sklair.json:

{
  "$schema": "https://github.com/numelon-oss/sklair/releases/latest/download/sklair.schema.json",
  "input": "./src",
  "components": "./components",
  "layouts": "./layouts",
  "output": "./build"
}

The $schema line is optional. Editors which support JSON Schema can use it for completion and validation.

Create the component

Write this to components/SiteGreeting.html:

<!doctype html>
<html>
<head></head>
<body>
  <h1>
    Hello,
    <span sklair-text="name"></span>.
  </h1>
</body>
</html>

sklair-text="name" is a binding. It inserts the name prop as text and removes the sklair-text attribute from the result.

Use the component

Write this to src/index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Sklair site</title>
</head>
<body>
  <SiteGreeting name="world"></SiteGreeting>
</body>
</html>

The <SiteGreeting> tag is a component use. Its name attribute supplies the value read by the binding.

Compile it

Run Sklair from the directory containing sklair.json:

sklair build

Open build/index.html. Its body contains ordinary HTML:

<body>
  <h1>
    Hello,
    <span>world</span>.
  </h1>
</body>

The component tag, prop, and binding are gone. Change name, build again, mess around and inspect the output. Sklair is easiest to understand when you see what it removes.