Commit d70c30055e

Andrew Kelley <andrew@ziglang.org>
2019-10-07 20:29:01
generated docs: better navigation
1 parent 9237461
Changed files (2)
lib
std
special
lib/std/special/docs/index.html
@@ -22,9 +22,32 @@
             padding:1em;
             overflow-x: auto;
         }
+        nav {
+            width: 10em;
+            position: fixed;
+            left: 0;
+            top: 0;
+            height: 100vh;
+            overflow: auto;
+        }
+        nav h2 {
+            font-size: 1.2em;
+            text-decoration: underline;
+            margin: 0;
+            padding: 0.5em 0;
+            text-align: center;
+        }
+        nav p {
+            margin: 0;
+            padding: 0;
+            text-align: center;
+        }
+        section {
+            margin-left: 10em;
+        }
         #listNav {
             list-style-type: none;
-            margin: 0;
+            margin: 0.5em 0 0 0;
             padding: 0;
             overflow: hidden;
             background-color: #333;
@@ -36,7 +59,7 @@
             display: block;
             color: #fff;
             text-align: center;
-            padding: .8em .8em;
+            padding: .5em .8em;
             text-decoration: none;
         }
         #listNav li a:hover {
@@ -46,14 +69,30 @@
             background-color: #4CAF50;
         }
 
+        #listPkgs {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            background-color: #f1f1f1;
+        }
+        #listPkgs li a {
+            display: block;
+            color: #000;
+            padding: 8px 16px;
+            text-decoration: none;
+        }
+        #listPkgs li a:hover {
+            background-color: #555;
+            color: #fff;
+        }
+
         #logo {
-            width: 5em;
-            float: left;
-            padding: 0 1em 0 0;
+            width: 8em;
+            padding: 0.5em 1em;
         }
 
         #search {
-            width: 90%;
+            width: 100%;
         }
 
         @media (prefers-color-scheme: dark) {
@@ -67,11 +106,35 @@
             pre{
                 background-color:#2A2A2A;
             }
+            #listPkgs {
+                background-color: #333;
+            }
+            #listPkgs li a {
+                color: #fff;
+            }
+            #listPkgs li a:hover {
+                background-color: #555;
+                color: #fff;
+            }
         }
     </style>
   </head>
   <body>
-    <img alt="ZIG" id="logo" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNTAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmN2E0MWQiPjxwYXRoIGQ9Im0wIDEwdjgwaDE5bDYtMTAgMTItMTBoLTE3di00MGgxNXYtMjB6bTQwIDB2MjBoNjJ2LTIwem05MSAwLTYgMTAtMTIgMTBoMTd2NDBoLTE1djIwaDM1di04MHptLTgzIDYwdjIwaDYydi0yMHoiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIvPjxwYXRoIGQ9Im0zNyA3MC0xOCAyMHYtMTV6Ii8+PHBhdGggZD0ibTExMyAzMCAxOC0yMHYxNXoiLz48cGF0aCBkPSJtOTYuOTggMTAuNjMgMzYuMjgtMTAuNC04MC4yOSA4OS4xNy0zNi4yOCAxMC40eiIvPjwvZz48L3N2Zz4K"></img>
+    <nav>
+      <img alt="ZIG" id="logo" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNTAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmN2E0MWQiPjxwYXRoIGQ9Im0wIDEwdjgwaDE5bDYtMTAgMTItMTBoLTE3di00MGgxNXYtMjB6bTQwIDB2MjBoNjJ2LTIwem05MSAwLTYgMTAtMTIgMTBoMTd2NDBoLTE1djIwaDM1di04MHptLTgzIDYwdjIwaDYydi0yMHoiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIvPjxwYXRoIGQ9Im0zNyA3MC0xOCAyMHYtMTV6Ii8+PHBhdGggZD0ibTExMyAzMCAxOC0yMHYxNXoiLz48cGF0aCBkPSJtOTYuOTggMTAuNjMgMzYuMjgtMTAuNC04MC4yOSA4OS4xNy0zNi4yOCAxMC40eiIvPjwvZz48L3N2Zz4K"></img>
+      <div id="sectPkgs" class="hidden">
+        <h2>Packages</h2>
+        <ul id="listPkgs">
+        </ul>
+      </div>
+      <div id="sectInfo" class="hidden">
+        <h2>Zig Version</h2>
+        <p id="tdZigVer"></p>
+        <h2>Target</h2>
+        <p id="tdTarget"></p>
+      </div>
+    </nav>
+    <section>
     <input type="search" id="search" autocomplete="off" spellcheck="false" placeholder="`s` to search, `?` to see more options">
     <p id="status">Loading...</p>
     <div id="sectNav" class="hidden"><ul id="listNav"></ul></div>
@@ -81,11 +144,6 @@
     <div id="fnDocs" class="hidden"></div>
     <div id="sectSearchResults" class="hidden"><ul id="listSearchResults"></ul></div>
     <div id="sectSearchNoResults" class="hidden"><p>No search results.</p></div>
-    <div id="sectPkgs" class="hidden">
-        <h2>Packages</h2>
-        <ul id="listPkgs">
-        </ul>
-    </div>
     <div id="sectTypes" class="hidden">
         <h2>Types</h2>
         <ul id="listTypes">
@@ -96,6 +154,7 @@
         <ul id="listFns">
         </ul>
     </div>
+    </section>
     <script src="data.js"></script>
     <script src="main.js"></script>
   </body>
lib/std/special/docs/main.js
@@ -15,6 +15,10 @@
     var domSectSearchResults = document.getElementById("sectSearchResults");
     var domListSearchResults = document.getElementById("listSearchResults");
     var domSectSearchNoResults = document.getElementById("sectSearchNoResults");
+    var domSectInfo = document.getElementById("sectInfo");
+    var domListInfo = document.getElementById("listInfo");
+    var domTdTarget = document.getElementById("tdTarget");
+    var domTdZigVer = document.getElementById("tdZigVer");
 
     var searchTimer = null;
     var escapeHtmlReplacements = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
@@ -69,14 +73,18 @@
         domSectTypes.classList.add("hidden");
         domSectFns.classList.add("hidden");
         domSectSearchResults.classList.add("hidden");
+        domSectInfo.classList.add("hidden");
 
         renderTitle();
+        renderInfo();
+        renderPkgList();
 
         if (curNavSearch !== "") {
             return renderSearch();
         }
 
-        var pkg = zigAnalysis.packages[zigAnalysis.rootPkg];
+        var rootPkg = zigAnalysis.packages[zigAnalysis.rootPkg];
+        var pkg = rootPkg;
         curNav.pkgObjs = [pkg];
         for (var i = 0; i < curNav.pkgNames.length; i += 1) {
             var childPkg = zigAnalysis.packages[pkg.table[curNav.pkgNames[i]]];
@@ -109,9 +117,6 @@
 
         renderNav();
 
-        var lastPkg = curNav.pkgObjs[curNav.pkgObjs.length - 1];
-        renderPkgList(lastPkg);
-
         var lastDecl = curNav.declObjs[curNav.declObjs.length - 1];
         if (lastDecl.type != null) {
             var typeObj = zigAnalysis.types[lastDecl.type];
@@ -175,18 +180,26 @@
         domSectNav.classList.remove("hidden");
     }
 
+    function renderInfo() {
+        domTdZigVer.textContent = zigAnalysis.params.zigVersion;
+        domTdTarget.textContent = zigAnalysis.params.target;
+
+        domSectInfo.classList.remove("hidden");
+    }
+
     function render404() {
         domStatus.textContent = "404 Not Found";
         domStatus.classList.remove("hidden");
     }
 
-    function renderPkgList(pkg) {
+    function renderPkgList() {
+        var rootPkg = zigAnalysis.packages[zigAnalysis.rootPkg];
         var list = [];
-        for (var key in pkg.table) {
+        for (var key in rootPkg.table) {
             if (key === "root" && rootIsStd) continue;
             list.push({
                 name: key,
-                pkg: pkg.table[key],
+                pkg: rootPkg.table[key],
             });
         }
         list.sort(function(a, b) {
@@ -359,6 +372,9 @@
                 curNav.declNames = parts[1].split(".");
             }
         }
+        if (domSearch.value !== curNavSearch) {
+            domSearch.value = curNavSearch;
+        }
         render();
     }
 
@@ -455,10 +471,6 @@
         }
     }
     function renderSearch() {
-        if (domSearch.value !== curNavSearch) {
-            domSearch.value = curNavSearch;
-        }
-
         var matchedDecls = [];
         var terms = curNavSearch.split(/[ \r\n\t]+/);
         decl_loop: for (var declIndex = 0; declIndex < zigAnalysis.decls.length; declIndex += 1) {