Better version handling through ad-hoc element

Author: Adrian Kosmaczewski

src/css/header.css

@@ -18,6 +18,12 @@ body {
   z-index: var(--z-index-navbar);
 }
 
+.navbar-main-title {
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 10px;
+}
+
 .navbar a {
   text-decoration: none;
 }

src/js/07-vshn-search.js

@@ -2,12 +2,9 @@
   'use strict'
 
   // Find the version the user is looking at and store it in a variable
-  var currentPageVersion = 'master'
-  var currentPageVersionObjects = document.querySelectorAll('span.version')
-  if (currentPageVersionObjects && currentPageVersionObjects.length > 0) {
-    // In Antora 3.x websites, there's a <SPAN> object that shows the value of the current version
-    currentPageVersion = currentPageVersionObjects[0].innerText
-  }
+  // There's a <INPUT> object set in src/partials/header-content.hbs with the current version
+  var currentPageVersionObject = document.getElementById('search-page-version-filter')
+  var currentPageVersion = currentPageVersionObject.value
 
   // Checks whether a string is empty, blank, null or undefined
   function isEmptyOrBlank (str) {

src/partials/header-content.hbs

@@ -1,7 +1,7 @@
 <header class="header">
   <nav class="navbar">
     <div class="navbar-brand">
-      <div class="navbar-item">
+      <div class="navbar-item navbar-main-title">
         <div class="k8up_logo"></div>
         <a href="{{or site.url (or siteRootUrl siteRootPath)}}">{{site.title}}
           {{#unless (eq page.componentVersion.displayVersion "master")}}{{#unless (eq page.layout '404')}} –
@@ -17,6 +17,9 @@
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="search-field">
+            {{!-- This hidden INPUT object holds the currently displayed version of the documentation
+            and is used by the search engine code in src/js/07-vshn-search.js to filter search results --}}
+            <input id="search-page-version-filter" type="hidden" value="{{page.componentVersion.displayVersion}}">
             <input id="search-input" class="search-input" type="search" placeholder="Search">
             <button type="submit" class="search-button">
               <i class="fa fa-search"></i>
@@ -31,4 +34,4 @@
       </div>
     </div>
   </nav>
-</header>
+</header>