> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Site configuration in OlonJS: identity, header, and footer

> Configure your OlonJS site's global identity, header, and footer settings through site.json — the single source of truth for site-wide layout.

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.

```json src/data/config/site.json theme={null}
{
  "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.

<ParamField body="identity.title" type="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.

  ```json theme={null}
  "identity": {
    "title": "Inkwell Journal"
  }
  ```
</ParamField>

***

## Header configuration

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

<ParamField body="header.data.logoText" type="string" required>
  The primary wordmark text rendered in the header. Displayed in your site's wordmark font at the configured weight.

  ```json theme={null}
  "logoText": "Inkwell"
  ```
</ParamField>

<ParamField body="header.data.logoHighlight" type="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.

  ```json theme={null}
  "logoHighlight": "journal"
  ```
</ParamField>

<ParamField body="header.data.announcement" type="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.

  ```json theme={null}
  "announcement": "Collections demo: posts and tags, linked both ways"
  ```
</ParamField>

<ParamField body="header.data.menu" type="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](/configuration/menu) for the full reference.

  ```json theme={null}
  "menu": {
    "$ref": "../config/menu.json#/main"
  }
  ```
</ParamField>

### Header settings

```json theme={null}
"settings": {
  "sticky": true
}
```

<ParamField body="header.settings.sticky" type="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.
</ParamField>

***

## Footer configuration

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

<ParamField body="footer.data.brandText" type="string" required>
  The brand name rendered in the footer wordmark area.

  ```json theme={null}
  "brandText": "Inkwell"
  ```
</ParamField>

<ParamField body="footer.data.tagline" type="string">
  A short description of your site displayed beneath the brand name in the footer. Supports plain text only.

  ```json theme={null}
  "tagline": "Notes on the craft of making software. An OlonJS demo tenant showing collections and cross-collection relations."
  ```
</ParamField>

<ParamField body="footer.data.email" type="string">
  A contact email address rendered as a `mailto:` link in the footer.

  ```json theme={null}
  "email": "hello@inkwell-journal.example"
  ```
</ParamField>

<ParamField body="footer.data.copyright" type="string">
  The copyright notice shown at the very bottom of the footer. Include the year and any legal text you require.

  ```json theme={null}
  "copyright": "© 2026 Inkwell Journal. Written slowly, shipped quietly."
  ```
</ParamField>

<ParamField body="footer.data.menu" type="object" required>
  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.

  ```json theme={null}
  "menu": {
    "$ref": "../config/menu.json#/footer"
  }
  ```
</ParamField>

### Footer settings

```json theme={null}
"settings": {
  "showLogo": true
}
```

<ParamField body="footer.settings.showLogo" type="boolean" default="false">
  When `true`, the site logo is rendered alongside the brand text in the footer. When `false`, only the text is shown.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.