generated docs: better navigation

This commit is contained in:
Andrew Kelley 2019-10-07 14:29:01 -04:00
parent 9237461b24
commit d70c30055e
No known key found for this signature in database
GPG Key ID: 7C5F548F728501A9
2 changed files with 94 additions and 23 deletions

View File

@ -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>

View File

@ -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) {