Ekdohibs/zig
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

generated docs: better navigation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
lib/std/special/docs/index.html
View File

@ -22,9 +22,32 @@
padding:1em; padding:1em;
overflow-x: auto; 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 { #listNav {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0.5em 0 0 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #333;
@ -36,7 +59,7 @@
display: block; display: block;
color: #fff; color: #fff;
text-align: center; text-align: center;
padding: .8em .8em; padding: .5em .8em;
text-decoration: none; text-decoration: none;
} }
#listNav li a:hover { #listNav li a:hover {
@ -46,14 +69,30 @@
background-color: #4CAF50; 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 { #logo {
width: 5em; width: 8em;
float: left; padding: 0.5em 1em;
padding: 0 1em 0 0;
} }
#search { #search {
width: 90%; width: 100%;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -67,11 +106,35 @@
pre{ pre{
background-color:#2A2A2A; background-color:#2A2A2A;
} }
#listPkgs {
background-color: #333;
}
#listPkgs li a {
color: #fff;
}
#listPkgs li a:hover {
background-color: #555;
color: #fff;
}
} }
</style> </style>
</head> </head>
<body> <body>
<nav>
<img alt="ZIG" id="logo" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNTAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmN2E0MWQiPjxwYXRoIGQ9Im0wIDEwdjgwaDE5bDYtMTAgMTItMTBoLTE3di00MGgxNXYtMjB6bTQwIDB2MjBoNjJ2LTIwem05MSAwLTYgMTAtMTIgMTBoMTd2NDBoLTE1djIwaDM1di04MHptLTgzIDYwdjIwaDYydi0yMHoiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIvPjxwYXRoIGQ9Im0zNyA3MC0xOCAyMHYtMTV6Ii8+PHBhdGggZD0ibTExMyAzMCAxOC0yMHYxNXoiLz48cGF0aCBkPSJtOTYuOTggMTAuNjMgMzYuMjgtMTAuNC04MC4yOSA4OS4xNy0zNi4yOCAxMC40eiIvPjwvZz48L3N2Zz4K"></img> <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"> <input type="search" id="search" autocomplete="off" spellcheck="false" placeholder="`s` to search, `?` to see more options">
<p id="status">Loading...</p> <p id="status">Loading...</p>
<div id="sectNav" class="hidden"><ul id="listNav"></ul></div> <div id="sectNav" class="hidden"><ul id="listNav"></ul></div>
@ -81,11 +144,6 @@
<div id="fnDocs" class="hidden"></div> <div id="fnDocs" class="hidden"></div>
<div id="sectSearchResults" class="hidden"><ul id="listSearchResults"></ul></div> <div id="sectSearchResults" class="hidden"><ul id="listSearchResults"></ul></div>
<div id="sectSearchNoResults" class="hidden"><p>No search results.</p></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"> <div id="sectTypes" class="hidden">
<h2>Types</h2> <h2>Types</h2>
<ul id="listTypes"> <ul id="listTypes">
@ -96,6 +154,7 @@
<ul id="listFns"> <ul id="listFns">
</ul> </ul>
</div> </div>
</section>
<script src="data.js"></script> <script src="data.js"></script>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>

34
lib/std/special/docs/main.js
View File

@ -15,6 +15,10 @@
var domSectSearchResults = document.getElementById("sectSearchResults"); var domSectSearchResults = document.getElementById("sectSearchResults");
var domListSearchResults = document.getElementById("listSearchResults"); var domListSearchResults = document.getElementById("listSearchResults");
var domSectSearchNoResults = document.getElementById("sectSearchNoResults"); 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 searchTimer = null;
var escapeHtmlReplacements = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" }; var escapeHtmlReplacements = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
@ -69,14 +73,18 @@
domSectTypes.classList.add("hidden"); domSectTypes.classList.add("hidden");
domSectFns.classList.add("hidden"); domSectFns.classList.add("hidden");
domSectSearchResults.classList.add("hidden"); domSectSearchResults.classList.add("hidden");
domSectInfo.classList.add("hidden");
renderTitle(); renderTitle();
renderInfo();
renderPkgList();
if (curNavSearch !== "") { if (curNavSearch !== "") {
return renderSearch(); return renderSearch();
} }
var pkg = zigAnalysis.packages[zigAnalysis.rootPkg]; var rootPkg = zigAnalysis.packages[zigAnalysis.rootPkg];
var pkg = rootPkg;
curNav.pkgObjs = [pkg]; curNav.pkgObjs = [pkg];
for (var i = 0; i < curNav.pkgNames.length; i += 1) { for (var i = 0; i < curNav.pkgNames.length; i += 1) {
var childPkg = zigAnalysis.packages[pkg.table[curNav.pkgNames[i]]]; var childPkg = zigAnalysis.packages[pkg.table[curNav.pkgNames[i]]];
@ -109,9 +117,6 @@
renderNav(); renderNav();
var lastPkg = curNav.pkgObjs[curNav.pkgObjs.length - 1];
renderPkgList(lastPkg);
var lastDecl = curNav.declObjs[curNav.declObjs.length - 1]; var lastDecl = curNav.declObjs[curNav.declObjs.length - 1];
if (lastDecl.type != null) { if (lastDecl.type != null) {
var typeObj = zigAnalysis.types[lastDecl.type]; var typeObj = zigAnalysis.types[lastDecl.type];
@ -175,18 +180,26 @@
domSectNav.classList.remove("hidden"); domSectNav.classList.remove("hidden");
} }
function renderInfo() {
domTdZigVer.textContent = zigAnalysis.params.zigVersion;
domTdTarget.textContent = zigAnalysis.params.target;
domSectInfo.classList.remove("hidden");
}
function render404() { function render404() {
domStatus.textContent = "404 Not Found"; domStatus.textContent = "404 Not Found";
domStatus.classList.remove("hidden"); domStatus.classList.remove("hidden");
} }
function renderPkgList(pkg) { function renderPkgList() {
var rootPkg = zigAnalysis.packages[zigAnalysis.rootPkg];
var list = []; var list = [];
for (var key in pkg.table) { for (var key in rootPkg.table) {
if (key === "root" && rootIsStd) continue; if (key === "root" && rootIsStd) continue;
list.push({ list.push({
name: key, name: key,
pkg: pkg.table[key], pkg: rootPkg.table[key],
}); });
} }
list.sort(function(a, b) { list.sort(function(a, b) {
@ -359,6 +372,9 @@
curNav.declNames = parts[1].split("."); curNav.declNames = parts[1].split(".");
} }
} }
if (domSearch.value !== curNavSearch) {
domSearch.value = curNavSearch;
}
render(); render();
} }
@ -455,10 +471,6 @@
} }
} }
function renderSearch() { function renderSearch() {
if (domSearch.value !== curNavSearch) {
domSearch.value = curNavSearch;
}
var matchedDecls = []; var matchedDecls = [];
var terms = curNavSearch.split(/[ \r\n\t]+/); var terms = curNavSearch.split(/[ \r\n\t]+/);
decl_loop: for (var declIndex = 0; declIndex < zigAnalysis.decls.length; declIndex += 1) { decl_loop: for (var declIndex = 0; declIndex < zigAnalysis.decls.length; declIndex += 1) {