Components

Components are ready-made custom elements provided by chimera. These include Menu, Dropdown, ThemeSwitcher, Card, Toggle and Tabs, along with layouts, code blocks and site navigation. Each one brings its own HTML, CSS and script, is styled by the theme and works on small screens. They live in chimera.components.

Menu is a navigation bar whose links fold behind a menu button on narrow screens. Inside it, a Dropdown opens a list of links without any JavaScript:

const menu = Menu {
    Link("Home", "#"),
    Link("Blog", "#"),
    Dropdown("Projects", { Link("chimera", "#"), Link("seal", "#"), Link("Luwu", "#") }),
    ThemeSwitcher(),
}

Theme switcher

ThemeSwitcher() lists every theme the page offers, each with a swatch of its colors, like the one in the menu above. The reader's pick is saved and follows them from page to page. Theming explains how to choose the themes it lists.

Cards

Card is a raised box with an optional title:

Offline

Pages work from a USB stick. No server needed.

Small

A page like this one is about 60 KB, or 12 KB compressed.

const features = Grid({
    Card("Offline", Paragraph("Pages work from a USB stick. No server needed.")),
    Card("Small", Paragraph("A page like this one is about 60 KB, or 12 KB compressed.")),
}, "14rem")

Toggles

Toggle is a button that shows and hides another element:

const spoiler = Paragraph("The butler did it.")
const reveal = Div { Toggle("Show the ending", spoiler), spoiler:hidden() }

The target can be an element or an element's id. Call hidden() on it to start it out hidden.

Tabs

Tabs shows one panel at a time with a row of tabs to switch between them:

curl -fsSL https://example.com/install.sh | sh

winget install example

brew install example

const install = Tabs({
    Tab("Linux", CodeBlock("curl -fsSL https://example.com/install.sh | sh", "bash")),
    Tab("Windows", CodeBlock("winget install example", "shell")),
    Tab("macOS", CodeBlock("brew install example", "bash")),
})

The first tab starts selected unless select("Windows") picks another. Several Tabs on one page each switch on their own.

SiteFooter, TableOfContents and Breadcrumbs are in Sites and pages.
CodeBlock and Code are in Code.
Row, Column and Grid are in Layout.

If none of them fit, write your own: a component is a class you can write in a few lines. See Custom components.