doc: prevent displaying empty version picker

PR-URL: nodejs#15420
Fixes: nodejs#15396
Reviewed-By: James M Snell <[email protected]>
Reviewed-By: Refael Ackermann <[email protected]>
Reviewed-By: Evan Lucas <[email protected]>
Reviewed-By: Ruben Bridgewater <[email protected]>

Author: Chris Young

doc/api_assets/style.css

@@ -91,6 +91,15 @@ em code {
 
 #gtoc li {
   display: inline;
+  border-right: 1px #000 solid;
+  margin-right: 0.4em;
+  padding-right: 0.4em;
+}
+
+#gtoc li:last-child {
+  border-right: none;
+  margin-right: 0;
+  padding-right: 0;
 }
 
 li.version-picker {
@@ -118,6 +127,9 @@ ol.version-picker {
 
 #gtoc ol.version-picker li {
   display: block;
+  border-right: 0;
+  margin-right: 0;
+  width: 100%;
 }
 
 ol.version-picker li a {

doc/template.html

@@ -25,18 +25,15 @@ <h1>Node.js __VERSION__ Documentation</h1>
         <div id="gtoc">
           <ul>
             <li>
-              <a href="index.html" name="toc">Index</a> |
+              <a href="index.html" name="toc">Index</a>
             </li>
             <li>
-              <a href="all.html">View on single page</a> |
+              <a href="all.html">View on single page</a>
             </li>
             <li>
-              <a href="__FILENAME__.json">View as JSON</a> |
-            </li>
-            <li class="version-picker">
-              <a href="#">View another version <span>&#x25bc;</span></a>
-              __ALTDOCS__
+              <a href="__FILENAME__.json">View as JSON</a>
             </li>
+            __ALTDOCS__
           </ul>
         </div>
         <hr>

tools/doc/html.js

@@ -33,7 +33,6 @@ var gtocPath = path.resolve(path.join(
 var gtocLoading = null;
 var gtocData = null;
 var docCreated = null;
-var nodeVersion = null;
 
 /**
  * opts: input, filename, template, nodeVersion.
@@ -211,9 +210,17 @@ function altDocs(filename) {
     return html + '</a></li>';
   }
 
-  const lis = (vs) => vs.filter(lte).map(li).join('\n');
+  const lis = versions.filter(lte).map(li).join('\n');
 
-  return `<ol class="version-picker">${lis(versions)}</ol>`;
+  if (!lis.length)
+    return '';
+
+  return `
+    <li class="version-picker">
+      <a href="#">View another version <span>&#x25bc;</span></a>
+      <ol class="version-picker">${lis}</ol>
+    </li>
+  `;
 }
 
 // handle general body-text replacements