Layouts & Templates

Layouts & Templates

The UI bundle uses Handlebars as its template engine. Two layouts define page structure, 27 partials compose reusable UI components, and 9 helpers provide conditional logic.

Layouts

File Lines Purpose

src/layouts/default.hbs

11

Main page layout: assembles head, header, body, footer

src/layouts/404.hbs

11

Error page with custom styling and nav link

Partial Composition Tree

default.hbs orchestrates all partials in this hierarchy:

default.hbs
├── head.hbs
│   ├── head-prelude.hbs        DOCTYPE + lang
│   ├── head-title.hbs          <title> tag
│   ├── head-icons.hbs          Favicons
│   ├── head-meta.hbs           Meta tags (charset, viewport, description)
│   ├── head-scripts.hbs        Preload scripts
│   ├── head-styles.hbs         FOUC prevention script + CSS link
│   └── head-info.hbs           Author, canonical, component meta
├── header.hbs
│   ├── header-content.hbs      Enterprise navbar (5 dropdown menus)
│   └── header-scripts.hbs      Mobile navbar JS
├── body.hbs
│   ├── nav.hbs
│   │   ├── nav-toggle.hbs      Sidebar toggle button
│   │   └── nav-menu.hbs
│   │       └── nav-tree.hbs    Recursive tree rendering
│   ├── nav-explore.hbs         Component explorer panel
│   ├── main.hbs
│   │   ├── toolbar.hbs         Version/edit controls
│   │   ├── breadcrumbs.hbs     Breadcrumb trail
│   │   ├── article.hbs         Article content wrapper
│   │   ├── toc.hbs             Table of contents sidebar
│   │   └── pagination.hbs      Prev/next page links
│   └── edit-this-page.hbs      GitHub edit link
└── footer.hbs
    ├── footer-content.hbs      Copyright + site info
    └── footer-scripts.hbs      Loads domus-ui.js + highlight.js

Partial Inventory

Partial Lines Purpose

header-content.hbs

115

Enterprise navbar with Components, Runbooks, Tools, Linux, GitHub dropdowns

nav-explore.hbs

26

Component explorer — lists all site components with version badges

nav-tree.hbs

21

Recursive Handlebars each loop for sidebar nav tree rendering

head-scripts.hbs

20

Script preloading

head-info.hbs

20

Author, canonical URL, component metadata

breadcrumbs.hbs

20

Breadcrumb trail generation with relativize helper

pagination.hbs

16

Previous/next page navigation links

page-versions.hbs

12

Version selector dropdown

head-styles.hbs

12

FOUC prevention inline script + CSS stylesheet link

nav-menu.hbs

11

Sidebar menu wrapper (includes nav-tree)

main.hbs

11

Page body: toolbar + breadcrumbs + article + toc + pagination

article-404.hbs

10

404 error page content

toolbar.hbs

9

Page toolbar (version selector, edit link)

nav.hbs

8

Sidebar container (toggle + menu)

head.hbs

7

Assembles all head-* partials

article.hbs

7

Article content wrapper

footer-scripts.hbs

6

Loads site.js, domus-ui.js, highlight.js (async), search scripts

edit-this-page.hbs

5

GitHub edit link (conditional on editUrl)

footer-content.hbs

4

Copyright line with year helper

body.hbs

4

Body wrapper (nav + main + footer)

toc.hbs

3

Right sidebar table of contents

head-prelude.hbs

2

DOCTYPE declaration + html lang

header.hbs

2

Header wrapper

footer.hbs

2

Footer wrapper

nav-toggle.hbs

1

Sidebar toggle button

head-title.hbs

1

Document title tag

head-meta.hbs

1

Charset + viewport + description meta tags

head-icons.hbs

1

Favicon links

header-scripts.hbs

1

Header-level script loading

Handlebars Helpers

Helper Lines Purpose

relativize.js

24

Convert absolute paths to relative (used for asset URLs)

and.js

9

Logical AND for conditional blocks

or.js

9

Logical OR for conditional blocks

detag.js

7

Strip HTML tags from strings

eq.js

3

Equality comparison

ne.js

3

Not-equal comparison

not.js

3

Logical NOT

increment.js

3

Increment a number by 1 (used in nav tree depth)

year.js

3

Return current year (used in footer copyright)

Data Context

Key variables available in all templates:

Variable Description

site.title

Site title from playbook (e.g., "Domus Digitalis")

site.url

Site base URL

site.keys

Site-wide custom keys

page.title

Current page title

page.component

Current component object (name, title, versions)

page.navigation

Navigation tree for current component

page.editUrl

GitHub edit URL (if configured)

uiRootPath

Relative path to UI assets (_/)

siteRootPath

Relative path to site root

env.SITE_SEARCH_PROVIDER

Search provider (e.g., "lunr")