Phase 05: UI Bundle

Phase 5: UI Bundle

The UI bundle controls the look and feel of the generated site — header, footer, sidebar, fonts, colors. You have three options.

Option A: Default Antora UI (Recommended to Start)

No setup required. The playbook already references it:

ui:
  bundle:
    url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/HEAD/raw/build/ui-bundle.zip?job=bundle-stable
    snapshot: true

This gives a clean, professional documentation site out of the box.

Option B: Pre-Built Theme

Several community themes exist. Replace the url in the playbook:

ui:
  bundle:
    url: https://github.com/<org>/<theme>/releases/latest/download/ui-bundle.zip
    snapshot: true

Option C: Custom UI Bundle (Advanced)

Fork the Antora default UI and customize:

git clone https://gitlab.com/antora/antora-ui-default.git team-ui
cd team-ui
npm install

Key files to customize:

File Purpose

src/css/site.css

Global styles — colors, fonts, spacing

src/layouts/default.hbs

Page layout template (Handlebars)

src/partials/header-content.hbs

Site header — logo, title, nav links

src/partials/footer-content.hbs

Site footer

src/img/

Logo and favicon

Build and use locally:

# Build the UI bundle
npx gulp bundle

# Reference in playbook
# ui:
#   bundle:
#     url: ../team-ui/build/ui-bundle.zip
#     snapshot: true

Only pursue Option C after the hub and spokes are working. The default UI is sufficient for production.