Antora UI

This section contains additional documentation for the drostan.org version of the UI.

Adapting the Antora default UI

  1. Create a fork of the Antora Default UI repository.

  2. Specify the appropriate branches and repository specified under bundle-stable and bundle-dev to let Gitlab build a bundle for the UI.

  3. Use the URL of your fork in the Antora playbook.

    Example for my version: repository under rolfkleef, branch drostan
    ui:
      bundle:
        url: https://gitlab.com/rolfkleef/antora-ui-default/-/jobs/artifacts/drostan/raw/build/ui-bundle.zip?job=bundle-stable
        snapshot: true
      supplemental_files: antora-supplemental-ui

Once a new version of the UI is built, instruct Antora to get the new version with the --fetch command line parameter.

Use the supplemental files to override a selection of files in the bundle.

The CSS files are processed and packed in the bundle. You can only override it as a whole.

The Handlebars templates are present as sources in the bundle. It is possible to override an HBS template by including a new one via the supplemental_files folder.

Add a specific brand link via nav-brand.hbs
<a class="navbar-item" href="{{{or site.url (or siteRootUrl siteRootPath)}}}/index.html">nav-brand</a>
Add the links to sections of documentation via nav-sections.hbs
{{!-- only override this file in supplemental files to add a list of sections --}}
<a class="navbar-item" href="{{{url}}}">{{{title}}}</a>
To remove the sections dropdown menu, override nav-section-dropdown.hbs
{{!-- option 1: create an empty supplemental file if you do not want a section menu --}}
{{!-- option 2: create a single item <a class-"navbar-item" href="...">{{site.title}}</a> --}}
{{!-- option 3: create a dropdown and override the link list nav-sections.hbs --}}
<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link">{{site.title}}</a>
  <div class="navbar-dropdown">
    {{> nav-sections }}
  </div>
</div>

Page role "wide"

To make the document section of a page stretch to its maximum width, add:

= Page Title
:page-role: wide

(rest of the page)
Twitter LinkedIn Github Gitlab Meetup RSS Miro Trello Zotero Hypothesis