mirror of
https://github.com/nim-lang/Nim.git
synced 2026-01-04 12:07:51 +00:00
The default HTML template for nimdoc currently initializes the dark mode switch and pragma dots when the onload event is fired. But since the onload event does not fire until all external resources (images, stylesheets, fonts, etc.) have been loaded, the light theme is shown for a brief moment before the document is fully loaded, and it switches to the dark theme. This is quite jarring, especially on slower internet connections. So let's instead initialize these things on the DOMContentLoaded event, which is fired right after the document has been parsed and the initial DOM structure is ready. This means that we now display the dark mode immediately, without having to wait for external resources to load first. For reference, see: - https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event - https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event I have updated the snapshot tests in `nimdoc/`, and done some manual testing of both the theme switch and the pragma dots, to confirm that this does not break anything. Please let me know if I've missed anything.
294 lines
11 KiB
INI
294 lines
11 KiB
INI
# This is the config file for the documentation generator.
|
|
# (c) 2016 Andreas Rumpf
|
|
# Feel free to edit the templates as you need. If you modify this file, it
|
|
# might be worth updating the hardcoded values in packages/docutils/rstgen.nim
|
|
|
|
split.item.toc = "20"
|
|
# too long entries in the table of contents wrap around
|
|
# after this number of characters
|
|
|
|
doc.section = """
|
|
<div class="section" id="$sectionID">
|
|
<h1><a class="toc-backref" href="#$sectionID">$sectionTitle</a></h1>
|
|
<dl class="item">
|
|
$content
|
|
</dl></div>
|
|
"""
|
|
|
|
doc.section.toc = """
|
|
<li>
|
|
<a class="reference reference-toplevel" href="#$sectionID" id="$sectionTitleID">$sectionTitle</a>
|
|
<ul class="simple simple-toc-section">
|
|
$content
|
|
</ul>
|
|
</li>
|
|
"""
|
|
|
|
doc.section.toc2 = """
|
|
<ul class="simple nested-toc-section">$plainName
|
|
$content
|
|
</ul>
|
|
"""
|
|
|
|
# Chunk of HTML emitted for each entry in the HTML table of contents.
|
|
# Available variables are:
|
|
# * $desc: the actual docstring of the item.
|
|
# * $header: the full version of name, including types, pragmas, tags, etc.
|
|
# * $header_plain: like header but without HTML, for attribute embedding.
|
|
# * $itemID: numerical unique entry of the item in the HTML.
|
|
# * $itemSym: short symbolic name of the item for easier hyperlinking.
|
|
# * $itemSymEnc: quoted version for URLs or attributes.
|
|
# * $itemSymOrID: the symbolic name or the ID if that is not unique.
|
|
# * $itemSymOrIDEnc: quoted version for URLs or attributes.
|
|
# * $name: reduced name of the item.
|
|
# * $seeSrc: generated HTML from doc.item.seesrc (if some switches are used).
|
|
|
|
doc.item = """
|
|
<a id="$itemSymOrID"></a>
|
|
<dt><pre>$header</pre></dt>
|
|
<dd>
|
|
$deprecationMsg
|
|
$desc
|
|
$seeSrc
|
|
</dd>
|
|
"""
|
|
|
|
# Chunk of HTML emitted for each entry in the HTML table of contents.
|
|
# See doc.item for available substitution variables.
|
|
doc.item.toc = """
|
|
<li><a class="reference" href="#$itemSymOrIDEnc"
|
|
title="$header_plain">$name</a></li>
|
|
"""
|
|
|
|
# This is used for TOC items which are grouped by the same name (e.g. procs).
|
|
doc.item.tocTable = """
|
|
<li><a class="reference" href="#$itemSymOrIDEnc"
|
|
title="$header_plain">$itemSymOrID</a></li>
|
|
"""
|
|
|
|
|
|
|
|
# HTML rendered for doc.item's seeSrc variable. Note that this will render to
|
|
# the empty string if you don't pass anything through --git.url. Available
|
|
# substitutaion variables here are:
|
|
# * $commit: branch/commit to use in source link.
|
|
# * $devel: branch to use in edit link.
|
|
# * $path: relative path to the file being processed.
|
|
# * $line: line of the item in the original source file.
|
|
# * $url: whatever you did pass through the --git.url switch (which also
|
|
# gets variables path/line replaced!)
|
|
doc.item.seesrc = """ <a
|
|
href="${url}/tree/${commit}/${path}#L${line}"
|
|
class="link-seesrc" target="_blank">Source</a>
|
|
<a href="${url}/edit/${devel}/${path}#L${line}" class="link-seesrc" target="_blank" >Edit</a>
|
|
"""
|
|
|
|
doc.deprecationmsg = """
|
|
<div class="deprecation-message">
|
|
<b>$label</b> $message
|
|
</div>
|
|
"""
|
|
|
|
doc.toc = """
|
|
<ul class="simple simple-toc" id="toc-list">
|
|
$content
|
|
</ul>
|
|
"""
|
|
|
|
doc.body_toc_groupsection = """
|
|
<div class="search-groupby">
|
|
Group by:
|
|
<select onchange="groupBy(this.value)">
|
|
<option value="section">Section</option>
|
|
<option value="type">Type</option>
|
|
</select>
|
|
</div>
|
|
"""
|
|
|
|
@if boot:
|
|
# This is enabled with the "boot" directive to generate
|
|
# the compiler documentation.
|
|
# As a user, tweak the block below instead.
|
|
# You can add your own global-links entries
|
|
doc.body_toc_group = """
|
|
<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>
|
|
<em>Dark Mode</em>
|
|
</div>
|
|
<div id="global-links">
|
|
<ul class="simple-boot">
|
|
<li>
|
|
<a href="manual.html">Manual</a>
|
|
</li>
|
|
<li>
|
|
<a href="lib.html">Standard library</a>
|
|
</li>
|
|
<li>
|
|
<a href="$theindexhref">Index</a>
|
|
</li>
|
|
<li>
|
|
<a href="compiler/$theindexhref">Compiler docs</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://nim-lang.github.io/fusion/theindex.html">Fusion docs</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="searchInputDiv">
|
|
Search: <input type="text" id="searchInput"
|
|
onkeyup="search()" />
|
|
</div>
|
|
$body_toc_groupsection
|
|
$tableofcontents
|
|
</div>
|
|
$seeSrc
|
|
<div class="nine columns" id="content">
|
|
<div id="tocRoot"></div>
|
|
$deprecationMsg
|
|
<p class="module-desc">$moduledesc</p>
|
|
$content
|
|
</div>
|
|
</div>
|
|
"""
|
|
|
|
@else
|
|
# keep in sink with other `doc.body_toc_group` or better, refactor
|
|
doc.body_toc_group = """
|
|
<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>
|
|
<em>Dark Mode</em>
|
|
</div>
|
|
<div id="global-links">
|
|
<ul class="simple">
|
|
<li>
|
|
<a href="$theindexhref">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>
|
|
$tableofcontents
|
|
</div>
|
|
$seeSrc
|
|
<div class="nine columns" id="content">
|
|
<div id="tocRoot"></div>
|
|
$deprecationMsg
|
|
<p class="module-desc">$moduledesc</p>
|
|
$content
|
|
</div>
|
|
</div>
|
|
"""
|
|
@end
|
|
|
|
doc.body_toc %= "${doc.body_toc_group}" # should only be used for boot
|
|
|
|
doc.body_no_toc = """
|
|
$moduledesc
|
|
$content
|
|
"""
|
|
|
|
doc.listing_start = "<pre class=\"listing\">"
|
|
doc.listing_end = "</pre>"
|
|
|
|
# * $analytics: Google analytics location, includes <script> tags
|
|
doc.file = """<?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">
|
|
<!-- This file is generated by Nim. -->
|
|
<html xmlns="http://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">
|
|
|
|
<!-- 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=="/>
|
|
<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH4QQQEwksSS9ZWwAAAk1JREFUWMPtll2ITVEUx39nn/O7Y5qR8f05wtCUUr6ZIS++8pEnkZInPImneaCQ5METNdOkeFBKUhMPRIkHKfEuUZSUlGlKPN2TrgfncpvmnntnmlEyq1Z7t89/rf9a6+y99oZxGZf/XeIq61EdtgKXgdXA0xrYAvBjOIF1AI9zvjcC74BSpndrJPkBWDScTF8Aa4E3wDlgHbASaANmVqlcCnwHvgDvgVfAJ+AikAAvgfVZwLnSVZHZaOuKoQi3ZOMi4NkYkpe1p4J7A8BpYAD49hfIy/oqG0+hLomiKP2L5L+1ubn5115S+3OAn4EnwBlgMzCjyt6ZAnQCJ4A7wOs88iRJHvw50HoujuPBoCKwHWiosy8MdfZnAdcHk8dxXFJ3VQbQlCTJvRBCGdRbD4M6uc5glpY3eAihpN5S5w12diSEcCCEcKUO4ljdr15T76ur1FDDLIQQ3qv71EdDOe3Kxj3leRXyk+pxdWnFWod6Wt2bY3de3aSuUHcPBVimHs7mK9WrmeOF6lR1o9qnzskh2ar2qm1qizpfXaPeVGdlmGN5pb09qMxz1Xb1kLqgzn1RyH7JUXW52lr5e/Kqi9qpto7V1atuUzfnARrV7jEib1T76gG2qxdGmXyiekkt1GswPTtek0aBfJp6YySGBfWg2tPQ0FAYgf1stUfdmdcjarbYJEniKIq6gY/Aw+zWHAC+p2labGpqiorFYgGYCEzN7oQdQClN07O1/EfDyGgC0ALMBdYAi4FyK+4H3gLPsxfR1zRNi+NP7nH5J+QntnXe5B5mpfQAAAAASUVORK5CYII=">
|
|
|
|
<!-- Google fonts -->
|
|
<link href='https://fonts.googleapis.com/css?family=Lato:400,600,900' rel='stylesheet' type='text/css'/>
|
|
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600' rel='stylesheet' type='text/css'/>
|
|
|
|
<!-- CSS -->
|
|
<title>$title</title>
|
|
<link rel="stylesheet" type="text/css" href="$nimdoccss">
|
|
|
|
<script type="text/javascript" src="$dochackjs"></script>
|
|
|
|
<script type="text/javascript">
|
|
function main() {
|
|
var pragmaDots = document.getElementsByClassName("pragmadots");
|
|
for (var i = 0; i < pragmaDots.length; i++) {
|
|
pragmaDots[i].onclick = function(event) {
|
|
// Hide tease
|
|
event.target.parentNode.style.display = "none";
|
|
// Show actual
|
|
event.target.parentNode.nextElementSibling.style.display = "inline";
|
|
}
|
|
}
|
|
|
|
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
|
|
function switchTheme(e) {
|
|
if (e.target.checked) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
localStorage.setItem('theme', 'light');
|
|
}
|
|
}
|
|
|
|
toggleSwitch.addEventListener('change', switchTheme, false);
|
|
|
|
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
|
|
if (currentTheme) {
|
|
document.documentElement.setAttribute('data-theme', currentTheme);
|
|
|
|
if (currentTheme === 'dark') {
|
|
toggleSwitch.checked = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', main);
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="document" id="documentId">
|
|
<div class="container">
|
|
<h1 class="title">$title</h1>
|
|
$content
|
|
<div class="row">
|
|
<div class="twelve-columns footer">
|
|
<span class="nim-sprite"></span>
|
|
<br/>
|
|
<small style="color: var(--hint);">Made with Nim. Generated: $date $time UTC</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
$analytics
|
|
</body>
|
|
</html>
|
|
"""
|