Antora UI Customizations

To customize the interface for this project:

Download a clean copy of Antora Default UI

Modify the navbar

Replace src/partials/header-content.hbs with the code below. These changes add an icon to the navbar, remove items we don’t want, and add navigation buttons.

src/partials/header-content.hbs

<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <!-- <a class="navbar-item" href="{{or site.url (or siteRootUrl siteRootPath)}}">{{site.title}}</a> -->
      <a class="navbar-item" href="{{siteRootPath}}/index.html"><img src="{{uiRootPath}}/img/nun_logo.png">&nbsp;{{site.title}}</a>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <!-- Add a Home button to the navbar -->
        <a class="navbar-item" href="{{siteRootPath}}/index.html">Home</a>
        <!-- Add pagination buttons to the header -->
        <div class="navbar-item">
          {{#if page.parent}}
          <span class="control"><a class="button is-primary" href="{{{siteRootPath}}}{{{page.parent.url}}}">Parent</a></span>&nbsp;&nbsp;
          {{/if}}
          {{#if page.previous}}
          <span class="control"><a class="button is-primary" href="{{{siteRootPath}}}{{{page.previous.url}}}">Prev</a></span>&nbsp;&nbsp;
          {{/if}}
          {{#if page.next}}
          <span class="control"><a class="button is-primary" href="{{{siteRootPath}}}{{{page.next.url}}}">Next</a></span>
          {{/if}}
        </div>
      </div>
    </div>
  </nav>
</header>

Save changes and close the file.

Copy logo.png to the src/img folder.
To change the color of the navbar, edit src/css/header.css. Change the background color for .navbar to navy.
src/css/header.css
```
.navbar {
  background: navy;
```

Add info and navigation options to the footer

Edit src/partials/footer-content.hbs to add navigation options the footer, with a table that displays information about the current page. Set the contents of this file to the listing below.

src/partials/footer-content.hbs

<footer class="footer">
<!-- <p style="text-align: center;">Welcome to {{site.title}}</p> -->
<p style="text-align: center;">
  <a href="#">Top</a>&nbsp;&nbsp;
  {{#if page.parent}}
  <a href="{{{siteRootPath}}}{{{page.parent.url}}}">Parent</a>&nbsp;&nbsp;
  {{/if}}
  {{#if page.previous}}
  <a href="{{{siteRootPath}}}{{{page.previous.url}}}">Prev</a>&nbsp;&nbsp;
  {{/if}}
  {{#if page.next}}
  <a href="{{{siteRootPath}}}{{{page.next.url}}}">Next</a>
  {{/if}}
</p>
<!-- see also https://docs.antora.org/antora/2.3/page/intrinsic-attributes/#site-and-configuration-attributes -->
<style>
  table, th, td {
  padding: 10px;
  border: 1px solid black;
  border-collapse: collapse;
  }
</style>
<table style="width:100%">
  <tr>
    <th>Page Title</th>
    <th>File Name</th>
    <th>Component</th>
    <th>Module</th>
    <th>Version</th>
  </tr>
  <tr>
    <td>{{page.title}}</td>
    <td>{{page.url}}</td>
    <td>{{page.component.title}}</td>
    <td>{{page.module}}</td>
    <td>{{page.version}}</td>
  </tr>
</table>
</footer>

Save changes and close the file.

Run gulp pack

The last step is to pack the file, using the gulp pack command. Packing ensures that the UI is valid before creating build\ui-bundle.zip--the UI file in your playbook.

Open terminal.
Type cd followed by a space, followed by the path to the Antora UI folder. Press enter.
Enter gulp pack. If the pack succeeds, you’re ready to go.

What to do if gulp pack fails

Sometimes, a UI will no longer pack. One solution is to download the default UI, edit its files as described above, and then to execute npm install from a terminal session inside the UI folder. Alternately, replace the node_modules folder in your custom UI with node_modules from a clean Antora default UI.

Summary

Customization changes the following files:

src/css/header.css is updated to change the navbar color.
src/img/logo.png is added as a new graphic.
src/partials/header-content.hbs is modified to take out and add items.
src/partials/footer-content.hbs is modified to add navigation options and info about the current page.

Because node_modules can get screwed up, it’s good practice to keep track of changes made to your UI, so that you can recreate your work.