Site configuration in OlonJS: identity, header, and footer

The src/data/config/site.json file controls your site’s global identity, sticky header, and footer branding. Changes here apply across every page without modifying individual page files.

site.json structure

The file has three top-level keys: header, footer, and identity. Each key maps to a configuration block that controls a distinct part of every page.

src/data/config/site.json

{
  "header": {
    "id": "global-header",
    "type": "header",
    "data": {
      "logoText": "Inkwell",
      "logoHighlight": "journal",
      "announcement": "Collections demo: posts and tags, linked both ways",
      "menu": {
        "$ref": "../config/menu.json#/main"
      }
    },
    "settings": {
      "sticky": true
    }
  },
  "footer": {
    "id": "global-footer",
    "type": "footer",
    "data": {
      "brandText": "Inkwell",
      "tagline": "Notes on the craft of making software. An OlonJS demo tenant showing collections and cross-collection relations.",
      "email": "hello@inkwell-journal.example",
      "copyright": "© 2026 Inkwell Journal. Written slowly, shipped quietly.",
      "menu": {
        "$ref": "../config/menu.json#/footer"
      }
    },
    "settings": {
      "showLogo": true
    }
  },
  "identity": {
    "title": "Inkwell Journal"
  }
}

Key	Purpose
`header`	Global header block rendered on every page
`footer`	Global footer block rendered on every page
`identity`	Site-wide metadata such as the document title

Identity

The identity block sets site-wide metadata that applies to every page by default.

string

required

The document title used in browser tabs and as the default <title> tag for pages that do not override it. Set this to your site or brand name.

"identity": {
  "title": "Inkwell Journal"
}

Header configuration

The header block controls everything you see in the top navigation bar. Its data object holds the display fields; settings controls behaviour.

string

required

The primary wordmark text rendered in the header. Displayed in your site’s wordmark font at the configured weight.

"logoText": "Inkwell"

string

An optional second segment of the wordmark rendered in the primary accent color. Combine with logoText to create a two-tone logo treatment — for example "Inkwell" + "journal" renders the second word in your brand accent color.

"logoHighlight": "journal"

string

A short banner message shown inside the header bar. Use this for site-wide announcements, feature callouts, or demo notices. Leave the field out entirely to hide the announcement strip.

"announcement": "Collections demo: posts and tags, linked both ways"

object

required

A JSON Reference ($ref) pointing to the menu array to render in the header. The value must resolve to an array of menu item objects. See Menus for the full reference.

"menu": {
  "$ref": "../config/menu.json#/main"
}

Header settings

"settings": {
  "sticky": true
}

boolean

default:"false"

When true, the header stays fixed at the top of the viewport as the user scrolls. When false, the header scrolls with the page content.

The footer block controls the global site footer. Its data object holds branding copy and contact details; settings controls the logo display.

string

required

The brand name rendered in the footer wordmark area.

"brandText": "Inkwell"

string

A short description of your site displayed beneath the brand name in the footer. Supports plain text only.

"tagline": "Notes on the craft of making software. An OlonJS demo tenant showing collections and cross-collection relations."

string

A contact email address rendered as a mailto: link in the footer.

"email": "hello@inkwell-journal.example"

string

The copyright notice shown at the very bottom of the footer. Include the year and any legal text you require.

"copyright": "© 2026 Inkwell Journal. Written slowly, shipped quietly."

A JSON Reference ($ref) pointing to the footer menu array. Resolves to an array of link objects rendered as a navigation row in the footer.

"menu": {
  "$ref": "../config/menu.json#/footer"
}

"settings": {
  "showLogo": true
}

boolean

default:"false"

When true, the site logo is rendered alongside the brand text in the footer. When false, only the text is shown.

Get Started

Core Concepts

Building Your Site

Configuration

MCP & AI

Site configuration in OlonJS: identity, header, and footer

site.json structure

Identity

Header configuration

Header settings

Footer configuration

Footer settings

​site.json structure

​Identity

​Header configuration

​Header settings

​Footer configuration

​Footer settings

site.json structure

Identity

Header configuration

Header settings

Footer configuration

Footer settings