Identity and appearance
Title, description, branding, colours, colour mode, base path and canonical URL.
These settings decide what the page is called, where it lives and how it
looks. They are deliberately separate: title is an identity, branding is
what a visitor sees.
Title and description
Defaults to "Heyo Status". Used in page metadata, feed titles,
notification subjects and subscription email. It is not rendered as
header or footer text.
Defaults to "Real-time service status and uptime.". Used in metadata and
the feed channel description.
Branding
| Configuration | Header result |
|---|---|
{ logo: "/logo.svg" } | Logo only. |
{ logo: "/logo.svg", name: "Acme" } | Logo with a label beside it. |
{ name: "Acme" } | Text only. |
{} | No brand element at all. |
Generated projects ship a replaceable Heyo mark at public/heyo.svg and
configure branding: { logo: "/heyo.svg" }. Swap the file, or point logo at
your own asset. The logo is rendered as a plain <img>, so an SVG or a raster
image both work.
Colours
Both are optional CSS colour values, published as tokens on the page container. They tint the accents layered over the heyo-ui palette; the status colours themselves — up, degraded, down, maintenance — intentionally stay tied to the shared semantic tokens so one page never shows two different greens for the same idea.
Colour mode
"system", "light" or "dark". It is the initial preference: the page
persists a visitor's choice in localStorage under heyo-status-theme and
the toggle in the header switches it. In system mode no data-mode attribute
is written at all, which hands the decision back to the operating system
rather than freezing today's preference into the document.
To avoid a flash of the wrong palette, render the bootstrap script in the document head — generated templates already do:
See Colour mode.
Theme
One of slate, fern, onyx, dune, reed. It is the only switch: the
stylesheet you import contains every bundled theme's tokens, scoped to the
data-theme attribute the page publishes, so changing the theme never changes
an import. See Themes.
Base path
The mount point of the catch-all route. statusPage.handler strips it from
the incoming URL, so every endpoint is reachable at basePath + path, and the
UI derives feed and subscription links from the same value.
Rules enforced by validation:
- must start with
/ - must not be exactly
"/" - must not contain
//, a query string or a fragment - trailing slashes are trimmed
Change it only together with the route file that mounts it:
Canonical URL
siteUrl must be HTTP(S) with no query string or fragment; a trailing slash
is removed. It is used for:
- absolute links in RSS and Atom entries,
- the View Status Page button and footer in notifications,
- confirmation and unsubscribe links in subscription email.
When it is absent, those URLs fall back to the request origin, which is fine locally and wrong behind a proxy that rewrites the host. Set it before publishing.