Skip to content

Commit 1db99b0

Browse files
kristoff-itkristoff-it
authored
Merge pull request #12347 from r00ster91/nicedocs
autodoc: various improvements
2 parents 396eb73 + ff6d2e6 commit 1db99b0

File tree

2 files changed

+138
-117
lines changed

2 files changed

+138
-117
lines changed

‎lib/docs/index.html

Lines changed: 66 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@
2525
--search-bg-color-focus: #ffffff;
2626
--search-sh-color: rgba(0, 0, 0, 0.18);
2727
--help-sh-color: rgba(0, 0, 0, 0.75);
28+
--help-bg-color: #aaa;
2829
}
2930

30-
html, body { margin: 0; padding:0; height: 100%; }
31+
html, body { margin: 0; padding: 0; height: 100%; }
3132

3233
a {
3334
text-decoration: none;
@@ -190,11 +191,11 @@
190191
box-shadow: 0 0.3em 1em 0.125em var(--search-sh-color);
191192
}
192193

193-
.docs .search::placeholder {
194-
font-size: 1rem;
195-
font-family: var(--ui);
196-
color: var(--tx-color);
197-
opacity: 0.5;
194+
#searchPlaceholder {
195+
position: absolute;
196+
pointer-events: none;
197+
top: 5px;
198+
left: 5px;
198199
}
199200

200201
.docs a {
@@ -207,9 +208,9 @@
207208

208209
.docs pre {
209210
font-family: var(--mono);
210-
font-size:1em;
211-
background-color:#F5F5F5;
212-
padding:1em;
211+
font-size: 1em;
212+
background-color: #F5F5F5;
213+
padding: 1em;
213214
overflow-x: auto;
214215
}
215216

@@ -225,7 +226,7 @@
225226
border-bottom: 0.0625rem dashed;
226227
}
227228

228-
.docs h2 {
229+
.docs h2 {
229230
font-size: 1.3em;
230231
margin: 0.5em 0;
231232
padding: 0;
@@ -294,7 +295,7 @@
294295
padding: 1px 1em;
295296
}
296297

297-
/* help dialog */
298+
/* help modal */
298299
.help-modal {
299300
display: flex;
300301
width: 100%;
@@ -308,13 +309,13 @@
308309
backdrop-filter: blur(0.3em);
309310
}
310311

311-
.help-modal > .dialog {
312+
.help-modal > .modal {
312313
max-width: 97vw;
313314
max-height: 97vh;
314315
overflow: auto;
315316
font-size: 1rem;
316317
color: #fff;
317-
background-color: #333;
318+
background-color: var(--help-bg-color);
318319
border: 0.125rem solid #000;
319320
box-shadow: 0 0.5rem 2.5rem 0.3rem var(--help-sh-color);
320321
}
@@ -335,7 +336,7 @@
335336
margin-right: 0.5em;
336337
}
337338

338-
.help-modal kbd {
339+
kbd {
339340
display: inline-block;
340341
padding: 0.3em 0.2em;
341342
font-size: 1.2em;
@@ -348,16 +349,16 @@
348349
border-bottom-color: #c6cbd1;
349350
border: solid 0.0625em;
350351
border-radius: 0.1875em;
351-
box-shadow: inset 0 -0.0625em 0 #c6cbd1;
352+
box-shadow: inset 0 -0.2em 0 #c6cbd1;
352353
cursor: default;
353354
}
354355

355-
#listFns dt {
356-
font-family: var(--mono);
357-
}
358-
.argBreaker {
359-
display: none;
360-
}
356+
#listFns dt {
357+
font-family: var(--mono);
358+
}
359+
.argBreaker {
360+
display: none;
361+
}
361362

362363
/* tokens */
363364
.tok-kw {
@@ -391,7 +392,6 @@
391392

392393
/* dark mode */
393394
@media (prefers-color-scheme: dark) {
394-
395395
:root {
396396
--tx-color: #bbb;
397397
--bg-color: #111;
@@ -408,6 +408,7 @@
408408
--search-bg-color-focus: #000;
409409
--search-sh-color: rgba(255, 255, 255, 0.28);
410410
--help-sh-color: rgba(142, 142, 142, 0.5);
411+
--help-bg-color: #333;
411412
}
412413

413414
.docs pre {
@@ -457,7 +458,6 @@
457458
.tok-type {
458459
color: #68f;
459460
}
460-
461461
}
462462

463463
@media only screen and (max-width: 750px) {
@@ -544,7 +544,7 @@
544544
<body class="canvas">
545545
<div class="banner">
546546
This is a beta autodoc build; expect bugs and missing information.
547-
<a href="https://github.com/ziglang/zig/wiki/How-to-contribute-to-Autodoc">Report an Issue</a>,
547+
<a href="https://github.com/ziglang/zig/wiki/How-to-contribute-to-Autodoc">Report an Issue</a>,
548548
<a href="https://github.com/ziglang/zig/wiki/How-to-contribute-to-Autodoc">Contribute</a>,
549549
<a href="https://github.com/ziglang/zig/wiki/How-to-read-the-standard-library-source-code">Learn more about stdlib source code</a>.
550550
</div>
@@ -555,43 +555,43 @@
555555
<div class="logo">
556556
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 140">
557557
<g fill="#F7A41D">
558-
<g>
559-
<polygon points="46,22 28,44 19,30"/>
560-
<polygon points="46,22 33,33 28,44 22,44 22,95 31,95 20,100 12,117 0,117 0,22" shape-rendering="crispEdges"/>
561-
<polygon points="31,95 12,117 4,106"/>
562-
</g>
563-
<g>
564-
<polygon points="56,22 62,36 37,44"/>
565-
<polygon points="56,22 111,22 111,44 37,44 56,32" shape-rendering="crispEdges"/>
566-
<polygon points="116,95 97,117 90,104"/>
567-
<polygon points="116,95 100,104 97,117 42,117 42,95" shape-rendering="crispEdges"/>
568-
<polygon points="150,0 52,117 3,140 101,22"/>
569-
</g>
570-
<g>
571-
<polygon points="141,22 140,40 122,45"/>
572-
<polygon points="153,22 153,117 106,117 120,105 125,95 131,95 131,45 122,45 132,36 141,22" shape-rendering="crispEdges"/>
573-
<polygon points="125,95 130,110 106,117"/>
574-
</g>
558+
<g>
559+
<polygon points="46,22 28,44 19,30"/>
560+
<polygon points="46,22 33,33 28,44 22,44 22,95 31,95 20,100 12,117 0,117 0,22" shape-rendering="crispEdges"/>
561+
<polygon points="31,95 12,117 4,106"/>
562+
</g>
563+
<g>
564+
<polygon points="56,22 62,36 37,44"/>
565+
<polygon points="56,22 111,22 111,44 37,44 56,32" shape-rendering="crispEdges"/>
566+
<polygon points="116,95 97,117 90,104"/>
567+
<polygon points="116,95 100,104 97,117 42,117 42,95" shape-rendering="crispEdges"/>
568+
<polygon points="150,0 52,117 3,140 101,22"/>
569+
</g>
570+
<g>
571+
<polygon points="141,22 140,40 122,45"/>
572+
<polygon points="153,22 153,117 106,117 120,105 125,95 131,95 131,45 122,45 132,36 141,22" shape-rendering="crispEdges"/>
573+
<polygon points="125,95 130,110 106,117"/>
574+
</g>
575575
</g>
576576
<style>
577577
#text { fill: #121212 }
578578
@media (prefers-color-scheme: dark) { #text { fill: #f2f2f2 } }
579579
</style>
580580
<g id="text">
581-
<g>
582-
<polygon points="260,22 260,37 229,40 177,40 177,22" shape-rendering="crispEdges"/>
583-
<polygon points="260,37 207,99 207,103 176,103 229,40 229,37"/>
584-
<polygon points="261,99 261,117 176,117 176,103 206,99" shape-rendering="crispEdges"/>
585-
</g>
586-
<rect x="272" y="22" shape-rendering="crispEdges" width="22" height="95"/>
587-
<g>
588-
<polygon points="394,67 394,106 376,106 376,81 360,70 346,67" shape-rendering="crispEdges"/>
589-
<polygon points="360,68 376,81 346,67"/>
590-
<path d="M394,106c-10.2,7.3-24,12-37.7,12c-29,0-51.1-20.8-51.1-48.3c0-27.3,22.5-48.1,52-48.1 c14.3,0,29.2,5.5,38.9,14l-13,15c-7.1-6.3-16.8-10-25.9-10c-17,0-30.2,12.9-30.2,29.5c0,16.8,13.3,29.6,30.3,29.6 c5.7,0,12.8-2.3,19-5.5L394,106z"/>
591-
</g>
581+
<g>
582+
<polygon points="260,22 260,37 229,40 177,40 177,22" shape-rendering="crispEdges"/>
583+
<polygon points="260,37 207,99 207,103 176,103 229,40 229,37"/>
584+
<polygon points="261,99 261,117 176,117 176,103 206,99" shape-rendering="crispEdges"/>
585+
</g>
586+
<rect x="272" y="22" shape-rendering="crispEdges" width="22" height="95"/>
587+
<g>
588+
<polygon points="394,67 394,106 376,106 376,81 360,70 346,67" shape-rendering="crispEdges"/>
589+
<polygon points="360,68 376,81 346,67"/>
590+
<path d="M394,106c-10.2,7.3-24,12-37.7,12c-29,0-51.1-20.8-51.1-48.3c0-27.3,22.5-48.1,52-48.1 c14.3,0,29.2,5.5,38.9,14l-13,15c-7.1-6.3-16.8-10-25.9-10c-17,0-30.2,12.9-30.2,29.5c0,16.8,13.3,29.6,30.3,29.6 c5.7,0,12.8-2.3,19-5.5L394,106z"/>
591+
</g>
592592
</g>
593593
</svg>
594-
</div>
594+
</div>
595595
<div id="sectMainPkg" class="hidden">
596596
<h2><span>Main Package</span></h2>
597597
<ul class="packages">
@@ -606,16 +606,19 @@ <h2><span>Dependencies</span></h2>
606606
<h2><span>Zig Version</span></h2>
607607
<p class="str" id="tdZigVer"></p>
608608
</div>
609-
<div>
610-
<input id="privDeclsBox" type="checkbox"/>
611-
<label for="privDeclsBox">Internal Doc Mode</label>
612-
</div>
609+
<div>
610+
<input id="privDeclsBox" type="checkbox"/>
611+
<label for="privDeclsBox">Internal Doc Mode</label>
612+
</div>
613613
</nav>
614614
</div>
615615
<div class="flex-right">
616616
<div class="wrap">
617617
<section class="docs">
618-
<input type="search" class="search" id="search" autocomplete="off" spellcheck="false" placeholder="`s` to search, `?` to see more options">
618+
<div style="position: relative">
619+
<span id="searchPlaceholder"><kbd>S</kbd> to search, <kbd>?</kbd> for more options</span>
620+
<input type="search" class="search" id="search" autocomplete="off" spellcheck="false" disabled>
621+
</div>
619622
<p id="status">Loading...</p>
620623
<div id="sectNav" class="hidden"><ul id="listNav"></ul></div>
621624
<div id="fnProto" class="hidden">
@@ -703,17 +706,17 @@ <h2>Tests</h2>
703706
</table>
704707
</div>
705708
</div>
706-
</section>
709+
</section>
707710
</div>
708711
<div class="flex-filler"></div>
709712
</div>
710713
</div>
711-
<div id="helpDialog" class="hidden">
714+
<div id="helpModal" class="hidden">
712715
<div class="help-modal">
713-
<div class="dialog">
716+
<div class="modal">
714717
<h1>Keyboard Shortcuts</h1>
715-
<dl><dt><kbd>?</kbd></dt><dd>Show this help dialog</dd></dl>
716-
<dl><dt><kbd>Esc</kbd></dt><dd>Clear focus; close this dialog</dd></dl>
718+
<dl><dt><kbd>?</kbd></dt><dd>Show this help modal</dd></dl>
719+
<dl><dt><kbd>Esc</kbd></dt><dd>Clear focus; close this modal</dd></dl>
717720
<dl><dt><kbd>s</kbd></dt><dd>Focus the search field</dd></dl>
718721
<dl><dt><kbd>↑</kbd></dt><dd>Move up in search results</dd></dl>
719722
<dl><dt><kbd>↓</kbd></dt><dd>Move down in search results</dd></dl>

0 commit comments

Comments
 (0)