Getting Started
This guide will walk you through creating your first web page using Coralite, a static site generator built around HTML modules.
Coralite templates represent a simpler form of web components. They allow you to create custom elements using "template" and "slot" elements, but they do not use the Shadow DOM, as they're server-side rendered and there is no hydration.
Project Structure
Create a new project directory with the following structure:
my-coralite-site/
├── src/
│ ├── templates/
│ │ ├── header.html
│ │ ├── body.html
│ │ └── footer.html
│ └── pages/
│ └── index.html
└── dist/
Creating Templates
Header template
Every template must have an "id" attribute that matches its usage in pages, in this case our header template has the id of "coralite-header".
Take note in the example below the use of double curly braces {{ title }} will display the attribute value
Just like Web Components can pass data to templates through both attribute values and slots so can Coralite templates, however, Coralite templates use a special syntax with double curly braces to display the attribute values.
<!-- my-coralite-site/src/templates/header.html -->
<template id="coralite-header">
<h1>{{ title }}</h1>
</template>Use Header Template
In order to use the template in pages, the custom element name must match the template id.
<!-- my-coralite-site/src/pages/index.html -->
<html lang="en">
<head>
<title>My coralite site</title>
</head>
<body>
<coralite-header title="My Title"></coralite-header>
</body>
</html>Building your site
To manually build the example, run the following command:
coralite -t src/templates -p src/pages -o distIf you've followed the build script step on the installation guide, run the build script:
npm run build