Antora

Document writer <olivier.nicolas@insa-lyon.fr>
vxxx, 2022-xx-xx

Installation

For more information, check the Official website

Install node.js
Then install Antora: here

Examples

A few minimal examples of how to set antora up for your documentation.

Example1

Example2

Build

Considering the above examples, in their root directory , run:

npx antora antora-playbook.yml

It will generate the build directory.

Customization

The UI (User Interface)

How to modify the Antora’s default UI:

Download

$ git clone https://gitlab.com/antora/antora-ui-default.git
$ cd antora-ui-default

Installs

In the above folder, run:

$ npm install
$ npm install gulp-cli

Build the UI

Run:

$ gulp bundle

This will generate: build/ui-bundle.zip

You can then use it in your Antora project by linking to it in your Antora playbook:

ui:
  bundle:
    url: $PATH_TO_UI/ui-bundle.zip

Modify the UI

Modifications made in antora-ui-default/src:

antora-ui-default
└── src
    ├── css
    │   ├── colors.css
    │   ├── font.css
    │   └── site.css
    └── partials
        └── header-content.hbs

File content

antora-ui-default/src/css/colors.css

.blue {
  color: blue;
}

.red {
  color: red;
}

.green {
  color: green;
}

.aqua {
  color: aqua;
}

.fuchsia {
  color: fuchsia;
}

.orange {
  color: orange;
}

.violet {
  color: #c71585;
}

.BrightBlue {
  color: #00f;
}

.LightBlue {
  color: #19bdff;
}

.BrightRed {
  color: #f00;
}

.LightRed {
  color: #ff6347;
}

.BrightGreen {
  color: green;
}

.LightGreen {
  color: #0f0;
}

antora-ui-default/src/css/font.css

.big {
  font-size: 25px;
  color: blue;
}

antora-ui-default/src/css/site.css

@import "typeface-roboto.css";
@import "typeface-roboto-mono.css";
@import "vars.css";
@import "base.css";
@import "body.css";
@import "nav.css";
@import "main.css";
@import "toolbar.css";
@import "breadcrumbs.css";
@import "page-versions.css";
@import "toc.css";
@import "doc.css";
@import "pagination.css";
@import "header.css";
@import "footer.css";
@import "highlight.css";
@import "print.css";
@import "colors.css";
@import "font.css";

antora-ui-default/src/css/header-content.hbs

<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item">{{site.title}}</a>
      {{#if env.SITE_SEARCH_PROVIDER}}
      <div class="navbar-item search hide-for-print">
        <div id="search-field" class="field">
          <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}>
        </div>
      </div>
      {{/if}}
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </nav>
</header>