Merge pull request #11511 from thaJeztah/header_render

Generate top-navigation instead of using javascript

_data/toc.yaml

@@ -15,6 +15,8 @@ horizontalnav:
 - title: Samples
   path: /samples/
   node: samples
+  # TODO unify navbbar links: homepage currently has a custom "articles" link
+  hide_home: true
 
 home: {}
 

_includes/body-landing.html

@@ -2,48 +2,26 @@
   <nav class="navbar header">
     <div class="container">
       <div class="navbar-header">
-        <button
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-content" aria-expanded="false">
-          type="button"
-          class="navbar-toggle collapsed"
-          data-toggle="collapse"
-          data-target="#header-content"
-          aria-expanded="false"
-        >
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="/">
-          <img
+          <img src="/images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs" />
-            src="/images/docker-docs-logo.svg"
-            alt="Docker Docs"
-            title="Docker Docs"
-          />
         </a>
       </div>
       <div class="collapse navbar-collapse" id="header-content">
         <ul class="nav navbar-nav">
-          <li class="active">
+        {%- for entry in site.data.toc.horizontalnav -%}
-            <a href="/">Home</a>
+          {%- if entry.hide_home -%}{% continue %}{%- endif -%}
-          </li>
+          <li{% if entry.node == "home" %} class=active{% endif %}><a href="{{ entry.path }}" id="{{ entry.node }}">{{ entry.title }}</a></li>
-          <li>
+        {%- endfor -%}
-            <a href="/get-started/overview/">Guides</a>
+          <li><a href="https://www.docker.com/blog/">Articles</a></li>
-          </li>
-          <li>
-            <a href="/engine/">Product manuals</a>
-          </li>
-          <li>
-            <a href="/reference/">Reference</a>
-          </li>
-          <li>
-            <a href="https://www.docker.com/blog/">Articles</a>
-          </li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
-          <li>
+          <li>{% include theme-switch.html %}</li>
-            {% include theme-switch.html %}
-          </li>
         </ul>
       </div>
     </div>

_includes/header-landing.html

@@ -1,21 +0,0 @@
-<div class="header">
-    <div class="fan"></div>
-    <div class="container-fluid">
-        <div class="row">
-            <div class="container-fluid">
-                <div class="navbar-header">
-                    <img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
-                </div>
-                <div class="navbar-collapse collapse">
-                    <ul class="primary nav navbar-nav">
-                        <li><a href="https://www.docker.com/why-docker">Why Docker?</a></li>
-                        <li><a href="https://docs.docker.com/get-started/">Get started</a></li>
-                        <li><a href="https://www.docker.com/products">Products</a></li>
-                        <li><a href="https://docker.com/docker-community">Community</a></li>
-                    </ul>
-                    </div>
-                <!--/.nav-collapse -->
-            </nav>
-        </div>
-    </div>
-</div>

_includes/header.html

@@ -1,5 +1,4 @@
 <nav class="nav-secondary navbar navbar-fixed-top">
-    <!-- <div class="fan"></div> -->
     <div class="container-fluid">
         <div class="navbar-header">
             <a href="/">

_includes/navigation.html

@@ -23,7 +23,9 @@
 <div class="nav-container hidden-sm hidden-xs">
     <div id="tabs">
         <ul class="tabs jsTOCHorizontal">
-
+        {%- for entry in site.data.toc.horizontalnav -%}
+          <li><a href="{{ entry.path }}" id="{{ entry.node }}">{{ entry.title }}</a></li>
+        {%- endfor -%}
         </ul>
     </div>
     <div class="ctrl-right">

js/docs.js

@@ -26,36 +26,33 @@ function navClicked(sourceLink) {
     }
 }
 
-var outputHorzTabs = [];
 var outputLetNav = [];
 var totalTopics = 0;
-var currentSection;
-var sectionToHighlight;
 
-function findMyTopic(tree) {
+function pageIsInSection(tree) {
     function processBranch(branch) {
-        for (var k = 0; k < branch.length; k++) {
+        for (let k = 0; k < branch.length; k++) {
             if (branch[k].section) {
                 processBranch(branch[k].section);
             } else {
                 if (branch[k].path === pageURL && !branch[k].nosync) {
-                    thisIsIt = true;
+                    found = true;
                     break;
                 }
             }
         }
     }
 
-    var thisIsIt = false;
+    let found = false;
     processBranch(tree);
-    return thisIsIt;
+    return found;
 }
 
 function walkTree(tree) {
-    for (var j = 0; j < tree.length; j++) {
+    for (let j = 0; j < tree.length; j++) {
         totalTopics++;
         if (tree[j].section) {
-            var sectionHasPath = findMyTopic(tree[j].section);
+            let sectionHasPath = pageIsInSection(tree[j].section);
             outputLetNav.push('<li><a onclick="navClicked(' + totalTopics + ')" data-target="#item' + totalTopics + '" data-toggle="collapse" data-parent="#stacked-menu"')
             if (sectionHasPath) {
                 outputLetNav.push('aria-expanded="true"')
@@ -72,14 +69,12 @@ function walkTree(tree) {
                 outputLetNav.push("false");
             }
             outputLetNav.push('">');
-            var subTree = tree[j].section;
+            walkTree(tree[j].section);
-            walkTree(subTree);
             outputLetNav.push("</ul></li>");
         } else {
             // just a regular old topic; this is a leaf, not a branch; render a link!
             outputLetNav.push('<li><a href="' + tree[j].path + '"')
             if (tree[j].path === pageURL && !tree[j].nosync) {
-                sectionToHighlight = currentSection;
                 outputLetNav.push('class="active currentPage"')
             }
             outputLetNav.push(">" + tree[j].title + "</a></li>")
@@ -88,27 +83,15 @@ function walkTree(tree) {
 }
 
 function renderNav(docstoc) {
-    for (var i = 0; i < docstoc.horizontalnav.length; i++) {
+    for (let i = 0; i < docstoc.horizontalnav.length; i++) {
-        if (docstoc.horizontalnav[i].node !== "glossary") {
+        if (docstoc.horizontalnav[i].path === pageURL || pageIsInSection(docstoc[docstoc.horizontalnav[i].node])) {
-            currentSection = docstoc.horizontalnav[i].node;
+            // This is the current section. Set the corresponding header-nav link
-            // build vertical nav
+            // to active, and build the left-hand (vertical) navigation
-            var itsHere = findMyTopic(docstoc[docstoc.horizontalnav[i].node]);
+            document.getElementById(docstoc.horizontalnav[i].node).closest("li").classList.add("active")
-            if (itsHere || docstoc.horizontalnav[i].path === pageURL) {
+            walkTree(docstoc[docstoc.horizontalnav[i].node]);
-                walkTree(docstoc[docstoc.horizontalnav[i].node]);
+            document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join("");
-            }
         }
-        // build horizontal nav
-        outputHorzTabs.push('<li id="' + docstoc.horizontalnav[i].node + '"');
-        if (docstoc.horizontalnav[i].path === pageURL || docstoc.horizontalnav[i].node === sectionToHighlight) {
-            outputHorzTabs.push(' class="active"');
-        }
-        outputHorzTabs.push('><a href="' + docstoc.horizontalnav[i].path + '">' + docstoc.horizontalnav[i].title + "</a></li>\n");
     }
-    document.querySelectorAll('.jsTOCHorizontal').forEach(function(element) {
-        element.innerHTML = outputHorzTabs.join("");
-    });
-    document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join("");
-
     // Scroll the current menu item into view. We actually pick the item *above*
     // the current item to give some headroom above
     scrollMenuItem("#jsTOCLeftNav a.currentPage")
@@ -136,12 +119,10 @@ function scrollMenuItem(selector) {
 }
 
 function highlightRightNav(heading) {
-    if (document.location.pathname.indexOf("/glossary/") < 0) {
+    $("#my_toc a.active").removeClass("active");
-        $("#my_toc a.active").removeClass("active");
 
-        if (heading !== "title") {
+    if (heading !== "title") {
-            $("#my_toc a[href='#" + heading + "']").addClass("active");
+        $("#my_toc a[href='#" + heading + "']").addClass("active");
-        }
     }
 }