doc: prevent displaying empty version picker

PR-URL: https://github.com/nodejs/node/pull/15420
Fixes: https://github.com/nodejs/node/issues/15396
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Refael Ackermann <refack@gmail.com>
Reviewed-By: Evan Lucas <evanlucas@me.com>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>

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,8 @@ ol.version-picker {
 
 #gtoc ol.version-picker li {
   display: block;
+  border-right: 0;
+  margin-right: 0;
 }
 
 ol.version-picker li a {

doc/template.html

@@ -25,18 +25,15 @@
         <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

@@ -232,9 +232,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