Components

Your guide to writing and using Static components

About Component

Components are reusable building blocks for your static site.

You can define a component in a file with the .html extension in the components directory.

Components use a mixture of HTML and EJS templates to render dynamic content.

Component tags are case sensitive. Components should be defined using kebab-case but can only be used in SnakeCase.

Defining a Component: Attributes

<!-- components/header.html -->
<header class="space-y-1 mt-3 mb-10">
    <h1 class="text-xl sm:text-3xl md:text-4xl font-semibold">
        <%= title %>
    </h1>
    <p class="text-zinc-400">
        <%= subtitle %>
    </p>
</header>

This component defines a header with a title and subtitle. The title and subtitle are dynamic values that can be passed when the component is used, like this:

<Header title="Welcome!" subtitle="This is a header component." />

Defining a Component: Slots

<!-- components/hero.html -->
<header class="py-10 space-y-3 text-center {{class}}">
    <h1 class="text-xl sm:text-3xl md:text-4xl lg:text-5xl font-semibold">
        <%= title %>
    </h1>
    <p class="text-sm sm:text-xl text-blue-400 max-w-2xl mx-auto">
        <%= subtitle %>
    </p>
    <slot name="actions"></slot>
</header>

This component defines a hero section with a title and subtitle, and an optional slot for actions. You can use the slot like this:

<Hero title="Welcome!" subtitle="This is a hero component.">
    <template slot="actions">
        <button class="bg-blue-500 text-white px-4 py-2 rounded">Get Started</button>
    </template>
</Hero>

This will render the hero section with the title, subtitle, and a button in the actions slot.