Keep the doc sidebar on the screen while scrolling (#19851)

* [docgen] Group sidebar sections into <details> (open by default)

* [docgen] Consistent indentation in generated HTML

(this is a boon for working on docgen's html/css output)

* [docgen] Move Source/Edit buttons inside main div

This makes styling the documentation significantly easier.

* [docgen] Somewhat consistent CSS formatting

* [docgen] Keep the sidebar onscreen while scrolling

* [docgen] Tweak CSS for the sticky sidebar

* [docgen] search type=text ==> type=search

* [docgen] Update expected doc output

* [docgen] Fix Group by Type sidebar placement bug

* [docgen] Curse you, whitespace (fix tests)

* [docgen] Fix rst2html tests

Co-authored-by: sandytypical <43030857+xflywind@users.noreply.github.com>
This commit is contained in:
JJ 2022-06-15 06:40:56 -07:00 • committed by GitHub
commit e7e8f437c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 1401 additions and 1610 deletions

View file

@ -1,12 +1,11 @@
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- This file is generated by Nim. -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nimdoc/test_out_index_dot_html/foo</title>
<!-- Favicon -->
<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAUAAAAF////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAIAAABbAAAAlQAAAKIAAACbAAAAmwAAAKIAAACVAAAAWwAAAAL///8A////AP///wD///8A////AAAAABQAAADAAAAAYwAAAA3///8A////AP///wD///8AAAAADQAAAGMAAADAAAAAFP///wD///8A////AP///wAAAACdAAAAOv///wD///8A////AP///wD///8A////AP///wD///8AAAAAOgAAAJ3///8A////AP///wAAAAAnAAAAcP///wAAAAAoAAAASv///wD///8A////AP///wAAAABKAAAAKP///wAAAABwAAAAJ////wD///8AAAAAgQAAABwAAACIAAAAkAAAAJMAAACtAAAAFQAAABUAAACtAAAAkwAAAJAAAACIAAAAHAAAAIH///8A////AAAAAKQAAACrAAAAaP///wD///8AAAAARQAAANIAAADSAAAARf///wD///8AAAAAaAAAAKsAAACk////AAAAADMAAACcAAAAnQAAABj///8A////AP///wAAAAAYAAAAGP///wD///8A////AAAAABgAAACdAAAAnAAAADMAAAB1AAAAwwAAAP8AAADpAAAAsQAAAE4AAAAb////AP///wAAAAAbAAAATgAAALEAAADpAAAA/wAAAMMAAAB1AAAAtwAAAOkAAAD/AAAA/wAAAP8AAADvAAAA3gAAAN4AAADeAAAA3gAAAO8AAAD/AAAA/wAAAP8AAADpAAAAtwAAAGUAAAA/AAAA3wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAADfAAAAPwAAAGX///8A////AAAAAEgAAADtAAAAvwAAAL0AAADGAAAA7wAAAO8AAADGAAAAvQAAAL8AAADtAAAASP///wD///8A////AP///wD///8AAAAAO////wD///8A////AAAAAIcAAACH////AP///wD///8AAAAAO////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A//8AAP//AAD4HwAA7/cAAN/7AAD//wAAoYUAAJ55AACf+QAAh+EAAAAAAADAAwAA4AcAAP5/AAD//wAA//8AAA=="/>
@ -17,94 +16,89 @@
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600' rel='stylesheet' type='text/css'/>
<!-- CSS -->
<title>nimdoc/test_out_index_dot_html/foo</title>
<link rel="stylesheet" type="text/css" href="nimdoc.out.css">
<!-- JS -->
<script type="text/javascript" src="dochack.js"></script>
</head>
<body>
<div class="document" id="documentId">
<div class="container">
<h1 class="title">nimdoc/test_out_index_dot_html/foo</h1>
<div class="row">
<div class="document" id="documentId">
<div class="container">
<h1 class="title">nimdoc/test_out_index_dot_html/foo</h1>
<div class="row">
<div class="three columns">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
&nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
</div>
<div id="global-links">
<ul class="simple">
<li>
<a href="theindex.html">Index</a>
</li>
</ul>
</div>
<div id="searchInputDiv">
Search: <input type="text" id="searchInput"
onkeyup="search()" />
</div>
<div>
Group by:
<select onchange="groupBy(this.value)">
<option value="section">Section</option>
<option value="type">Type</option>
</select>
</div>
<ul class="simple simple-toc" id="toc-list">
<li>
<a class="reference reference-toplevel" href="#12" id="62">Procs</a>
<ul class="simple simple-toc-section">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
&nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
</div>
<div id="global-links">
<ul class="simple">
<li><a href="theindex.html">Index</a></li>
</ul>
</div>
<div id="searchInputDiv">
Search: <input type="search" id="searchInput" onkeyup="search()"/>
</div>
<div>
Group by:
<select onchange="groupBy(this.value)">
<option value="section">Section</option>
<option value="type">Type</option>
</select>
</div>
<div id="tocRoot"></div>
<ul class="simple simple-toc" id="toc-list">
<li>
<details open>
<summary><a class="reference reference-toplevel" href="#12" id="62">Procs</a></summary>
<ul class="simple simple-toc-section">
<ul class="simple nested-toc-section">foo
<li><a class="reference" href="#foo"
title="foo()">foo()</a></li>
<li><a class="reference" href="#foo" title="foo()">foo()</a></li>
</ul>
</ul>
</ul>
</ul>
</details>
</li>
</ul>
</div>
<div class="nine columns" id="content">
<div id="tocRoot"></div>
<p class="module-desc"></p>
<div class="section" id="12">
<h1><a class="toc-backref" href="#12">Procs</a></h1>
<dl class="item">
<div id="foo-procs-all">
<div id="foo">
<dt><pre><span class="Keyword">proc</span> <a href="#foo"><span class="Identifier">foo</span></a><span class="Other">(</span><span class="Other">)</span> {.<span><span class="Other pragmadots">...</span></span><span class="pragmawrap"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span>.}</pre></dt>
<dd>
I do foo
</dd>
<p class="module-desc"></p>
<div class="section" id="12">
<h1><a class="toc-backref" href="#12">Procs</a></h1>
<dl class="item">
<div id="foo-procs-all">
<div id="foo">
<dt><pre><span class="Keyword">proc</span> <a href="#foo"><span class="Identifier">foo</span></a><span class="Other">(</span><span class="Other">)</span> {.<span><span class="Other pragmadots">...</span></span><span class="pragmawrap"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span>.}</pre></dt>
<dd>
I do foo
</dd>
</div>
</div>
</dl></div>
</dl>
</div>
</div>
</div>
<div class="row">
<div class="twelve-columns footer">
<span class="nim-sprite"></span>
<br/>
<br>
<small style="color: var(--hint);">Made with Nim. Generated: 1970-01-02 03:46:40 UTC</small>
</div>
</div>
</div>
</div>
</body>
</html>