Documentation Page UI

This project is a customized UI bundle for Antora, based on the Antora default UI. It provides the branding and layout for the Trento documentation site. Checkout the whole documentation at Antora Default UI Documentation.

Project Structure

src/            # UI source files (layouts, partials, helpers)
preview-src/    # Demo content for local preview
public/         # Output directory for preview site
build/          # Build artifacts including ui-bundle.zip
gulpfile.js     # Gulp tasks for building the UI

Install dependencies

npm i

Supported build tasks

npx gulp --tasks-simple

You should see:

default          // Runs the default task, typically an alias for 'build'
clean            // Removes generated files and directories (e.g., build/, public/)
lint             // Lints JavaScript and stylesheet source files
format           // Applies formatting to source files using configured linters
build            // Runs the full build process: clean, lint, format, bundle
bundle           // Compiles and copies UI assets into the 'public/' folder
bundle:pack      // Creates a zip archive of the UI bundle as 'ui-bundle.zip' in the build/ folder
preview          // Starts a local preview server using content in preview-src/
preview:build    // Builds a static site for preview into the 'public/' directory

Develop and Preview Changes

To continuously build and preview your UI as you make changes, run:

npx gulp preview

This starts a local development server using the content in preview-src/, allowing you to see updates live in the browser.

Build the UI Bundle

When you’re ready to package the UI for use in the actual documentation site, run:

npx gulp bundle

This command creates a compiled UI bundle (ui-bundle.zip) in the build/ directory.

The Trento documentation site uses this bundle from the trento-antora-ui/build/ui-bundle.zip path in the playbook configuration.

Customize the UI

To learn how to customize templates, partials, helpers, and other UI components, refer to the official Antora UI customization guide:

https://docs.antora.org/antora-ui-default/templates/