Settings reference
Every setting the build reads, grouped by file. Settings in a demo override site.json; settings in a page override its demo.
src/config/site.json#
| Setting | Example | Meaning |
|---|
name | "Harbour & Vine" | Business name: header, footer, titles, copyright. |
tagline | "Seasonal cooking" | Default page description. |
logo | { "image": "", "imageLight": "", "height": 38 } | Your logo files; empty uses the built-in mark. See Branding. |
email, phone, address | | Contact details for footers, top bars and contact sections. |
social | { "instagram": "https://…" } | Social icons and links (Bootstrap Icons brand names; x for X). |
formAction | "send.php" | Where forms send. "#" = demo mode. See Forms. |
newsletterAction | "https://…" | Where newsletter boxes send (falls back to formAction). |
headHtml, bodyEndHtml | "<script …></script>" | Code added to every page (analytics, chat widgets). |
shareImage | "https://…/share.jpg" | Picture shown when a page is shared on social media. |
showDemoSwitcher | true | The “Demos” tab on the left. |
colorSwitcher, colors | true, [ … ] | The palette button and its default schemes. |
theme | | Default colours and fonts; see the theme table below. |
footer | | Default footer; see Footer. |
src/demos/<demo>/demo.json#
| Setting | Meaning |
|---|
name, category, order, description | How the demo is listed on the overview page and in the demo switcher. |
brand | Use a different business name for this demo only. |
currency | Symbol for prices stored as numbers, e.g. "$", "€", "£". |
theme | This demo's colours and fonts (see below). |
colors, colorSwitcher | Colour switcher schemes for this demo, or false to hide it. |
header | style, topbar, cta. See Header and menu. |
nav | Menu links and dropdowns. |
footer | Overrides for site.json's footer. |
contact | { "address", "phone", "email" } overriding site.json. |
headHtml, bodyEndHtml, shareImage | As in site.json, for this demo only (added after the site-wide code). |
unlisted | true builds the demo but hides it from the overview and switcher. |
Theme settings#
| Setting | Example |
|---|
primary, accent, dark, light, text, heading, bg | "#1f3d2b" |
onPrimary, onAccent | Force the text colour on primary/accent (normally automatic). |
headingFont, bodyFont | "Playfair Display" |
headingFontSpec, bodyFontSpec | "Bebas+Neue" for single-weight fonts |
fontsUrl | A complete Google Fonts (or other) stylesheet URL |
headingWeight, headingTransform, headingSpacing | 700, "uppercase", "-0.02em" |
radius, buttonRadius | "14px", "99px" |
logoMark | Colour of the built-in logo mark |
Page files: src/demos/<demo>/pages/<page>.json#
| Setting | Meaning |
|---|
title, description | Browser title and search description. May contain {item.field} on detail pages. |
sections | The page's content. See Pages and sections. |
header | Header settings for this page only, e.g. { "style": "light", "topbar": null }. |
each, prefix | Make this a detail-page template for a data.json collection. See Data and detail pages. |
headHtml, shareImage | Extra head code or share picture for this page. |
Data references#
| Write | Gives |
|---|
{ "$data": "rooms" } | Every record in the rooms collection (with optional limit, where, slugs, exclude). |
"@rooms" | The whole collection. |
"@rooms#ocean-villa" | One record by slug. |
"@item", "@item.title" | On a detail page: the current record, or one of its fields. |
Omnira