Overhaul Antora UI to match Konflux docs

.github/workflows/docs.yml

@@ -35,11 +35,11 @@ jobs:
         with:
           node-version: '20'
 
-      - name: Install Antora
-        run: npm i -g @antora/cli@3.1 @antora/site-generator@3.1
+      - name: Install Antora and extensions
+        run: npm i -g @antora/cli@3.1 @antora/site-generator@3.1 @antora/lunr-extension@1.0.0-alpha.13
 
       - name: Build site
-        run: antora --fetch antora-playbook.yml
+        run: SITE_SEARCH_PROVIDER=lunr antora --fetch antora-playbook.yml
 
       - name: Disable Jekyll
         run: touch build/site/.nojekyll

antora-playbook.yml

@@ -14,5 +14,9 @@ ui:
     snapshot: true
   supplemental_files: docs/supplemental-ui
 
+antora:
+  extensions:
+  - '@antora/lunr-extension'
+
 output:
   dir: build/site

docs/antora.yml

@@ -12,6 +12,7 @@ asciidoc:
     idseparator: '-'
     idprefix: ''
     experimental: ''
+    pagination: ''
     # Product attributes
     TSFName: 'Trusted Software Factory'
     TSFShortName: 'TSF'

docs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "tsf-docs",
+  "private": true,
+  "devDependencies": {
+    "@antora/lunr-extension": "^1.0.0-alpha.13",
+    "antora": "^3.1.14"
+  },
+  "scripts": {
+    "build": "antora generate --clean --fetch ../antora-playbook.yml"
+  }
+}

docs/supplemental-ui/css/main.css

@@ -0,0 +1,69 @@
+.navbar .button {
+  display: inline-flex;
+  -webkit-box-align: center;
+  align-items: center;
+  background: #fff;
+  border: 1px solid #e1e1e1;
+  border-radius: 0.5rem;
+  height: auto;
+  font-size: 18px;
+  color: #222;
+  padding: 1em;
+  margin: 0.8em;
+  white-space: nowrap;
+}
+
+.navbar-burger {
+  margin-left: 0;
+}
+
+.nav-list .nav-item.is-current-page {
+  border-left: 0.5rem solid #c6c6c6;
+  padding-left: 1rem;
+  margin-left: -1.5rem;
+  background-color: #dadada;
+}
+
+.nav-container {
+  width: 17rem;
+}
+
+.nav-container .nav {
+  background-color: #eee;
+}
+
+.doc .title {
+  font-weight: bold;
+  color: #3a415f;
+}
+
+.doc .admonitionblock .icon {
+  border-radius: 1rem;
+}
+
+.navbar-brand .navbar-item:first-child a {
+  margin-top: 5px;
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 0;
+  margin-top: 2rem;
+  border-top: 1px solid #e1e1e1;
+}
+
+.pagination .prev a,
+.pagination .next a {
+  color: #1565c0;
+  text-decoration: none;
+}
+
+.pagination .prev a:hover,
+.pagination .next a:hover {
+  text-decoration: underline;
+}
+
+.pagination .next {
+  margin-left: auto;
+}

docs/supplemental-ui/partials/footer-content.hbs

@@ -1 +1,4 @@
-
+<footer class="footer" style="text-align: center;">
+  <a href="https://github.com/redhat-appstudio/tsf-cli" target="_blank">Source on GitHub</a>
+  | <a href="https://github.com/redhat-appstudio/tsf-cli/issues/new?title=%5BDOCS%5D+&labels=documentation" target="_blank">Raise an issue</a>
+</footer>

docs/supplemental-ui/partials/head-styles.hbs

@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
-<link rel="stylesheet" href="{{uiRootPath}}/css/extra.css">
+    <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
+    <link rel="stylesheet" href="{{{uiRootPath}}}/css/main.css">

docs/supplemental-ui/partials/header-content.hbs

@@ -1,13 +1,26 @@
 <header class="header" role="banner">
   <nav class="navbar">
     <div class="navbar-brand">
-      <a class="navbar-item" href="{{or siteRootPath (or site.url siteRootPath)}}">{{site.title}}</a>
+      <div class="navbar-item">
+        <button class="navbar-burger" data-target="topbar-nav">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+        <a href="{{site.url}}/">{{site.title}}</a>
+      </div>
     </div>
-    <div class="navbar-menu">
+    <div id="topbar-nav" class="navbar-menu">
       <div class="navbar-end">
-        <div class="navbar-item">
-          <a class="button" href="https://github.com/redhat-appstudio/tsf-cli/issues/new?title=%5BDOCS%5D+&labels=documentation">Raise an issue</a>
+        <div class="button"><a href="https://github.com/redhat-appstudio/tsf-cli" target="_blank">Home</a></div>
+        <div class="button"><a href="https://github.com/redhat-appstudio/tsf-cli/issues/new?title=%5BDOCS%5D+&labels=documentation&body=Page:%20{{{page.url}}}" target="_blank">Raise an issue</a></div>
+        {{#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}}
       </div>
     </div>
   </nav>

docs/supplemental-ui/partials/pagination.hbs

@@ -0,0 +1,10 @@
+{{#if (or page.previous page.next)}}
+<nav class="pagination">
+  {{#with page.previous}}
+  <span class="prev"><a href="{{{relativize ./url}}}">&#8249; Prev: {{{./content}}}</a></span>
+  {{/with}}
+  {{#with page.next}}
+  <span class="next"><a href="{{{relativize ./url}}}">Next: {{{./content}}} &#8250;</a></span>
+  {{/with}}
+</nav>
+{{/if}}