NOCLIP/documentation/index.html
torque 3fda934808
docs: fiddle around with collapsible nav
This probably needs polishing. Or just not to be done in the first
place.
2023-04-06 18:31:29 -07:00

162 lines
22 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NOCLIP</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="icon.png">
</head>
<body>
<div class="layout"> <!-- flex or grid -->
<aside class="sidebar">
<!-- <div class="header">NOCLIP</div> -->
<input id="destroyer-of-navs" class="collapse-toggle" type="checkbox">
<label for="destroyer-of-navs" class="header collapse-label" tabindex="0">NOCLIP</label>
<nav class="nav collapse-view">
<a href="#title"><div class="item">Title</div></a>
<a href="#title-2"><div class="item">Title The Second</div></a>
<a href="#title-3"><div class="item">Title The Third</div></a>
</nav>
</aside>
<main class="doc">
<div class="doc-padding">
<section>
<div id="title" class="header">Title</div>
<div class="description">
<p>Some written description</p>
</div>
<div class="example"><div class="codebox">
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span></code></pre>
</div></div>
<div class="description">
<p>Some written description</p>
</div>
<div class="example"><div class="codebox">
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span></code></pre>
</div></div>
<div class="description">
<p>Some written description</p>
</div>
</section>
<section>
<div id="title-2" class="header">Title The Second</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet blandit nisi, id tempor tortor. Aliquam feugiat luctus molestie. Maecenas vel consequat mauris, ut volutpat enim. Suspendisse in mauris nibh. Maecenas viverra enim quis nibh cursus condimentum. Aenean eleifend ante in magna vestibulum imperdiet ut ut augue. Sed cursus nunc turpis, sit amet congue ex varius a. Sed a lorem volutpat, tempus lectus vitae, vulputate dui. In eu convallis neque. Suspendisse potenti.</p>
<p>Vestibulum venenatis mi facilisis ullamcorper fringilla. Integer posuere arcu ac ante consequat malesuada. Phasellus condimentum ornare diam in fermentum. Cras dictum consequat vehicula. Aliquam varius mattis diam sit amet imperdiet. Nunc nec orci bibendum, porta purus nec, facilisis enim. Etiam ultrices sodales quam, a scelerisque quam dapibus et. Mauris dapibus viverra leo id bibendum. Donec congue tempor tortor, ac consectetur augue rutrum ut. Nullam blandit accumsan nibh et iaculis.</p>
<p>Ut hendrerit magna et turpis rutrum suscipit. Phasellus nulla enim, tincidunt sit amet mi vitae, vehicula posuere enim. Praesent vitae libero sollicitudin, faucibus nisl facilisis, pulvinar elit. Ut id magna id enim bibendum iaculis eget non orci. Aliquam elementum felis quam, quis varius felis malesuada non. Sed bibendum dui aliquet tortor rutrum, nec iaculis nisi dapibus. Donec condimentum est sed ligula volutpat, vitae consequat leo euismod. Integer nec erat magna. Curabitur non pellentesque magna, quis ultrices libero. Aenean mattis ut orci a gravida. Nullam dapibus aliquam lorem, vitae hendrerit mauris.</p>
<p>Integer nec elit aliquam, fringilla lacus ac, venenatis purus. Etiam mattis interdum bibendum. Pellentesque tincidunt ex ut hendrerit molestie. Mauris non enim porttitor nibh pretium auctor. Nulla vehicula commodo diam ac suscipit. Fusce blandit convallis erat et mattis. Nunc sagittis efficitur purus, at mattis magna sagittis sit amet. Quisque nec purus placerat, posuere tortor non, feugiat purus. Suspendisse eget dapibus mauris, eget dictum quam. Praesent turpis risus, interdum quis porttitor eu, faucibus ut nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam nunc mauris, ac ullamcorper magna imperdiet sed. Ut quam mi, tincidunt vitae pretium id, aliquam sed ipsum. Proin quam massa, cursus in nisl non, lacinia egestas sem.</p>
<p>Nullam interdum lorem a mi rhoncus ullamcorper. Nulla malesuada lectus rhoncus turpis ullamcorper, eget faucibus purus elementum. Quisque consectetur ornare risus, non mattis quam pretium at. Etiam laoreet velit a risus dapibus maximus. Nam non ornare magna, eu accumsan erat. Sed mattis sodales orci, et sagittis neque placerat vel. In hac habitasse platea dictumst. Pellentesque posuere tincidunt nisi, eu faucibus nunc pulvinar nec. Morbi tempus a mi non eleifend. Sed gravida orci auctor risus consequat, at iaculis est vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt, purus sed pellentesque blandit, ante lacus mollis risus, et cursus magna nibh nec eros.</p>
</div>
<div class="example"><div class="codebox">
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line>const subcommand = cmd: {</span>
<span class=line> <span class="keyword">var</span> cmd = CommandBuilder(void){</span>
<span class=line> .description =</span>
<span class=line> <span class="string">\\Perform some sort of work</span></span>
<span class=line> <span class="string">\\</span></span>
<span class=line> <span class="string">\\This subcommand is a mystery. It probably does something, but nobody is sure what. This line just keeps going on forever and it never stops and it's very wide and I wish you could see how incredibly wide it is, it's so wide it's just the widest thing you can imagine, but even wider than that somehow.</span></span>
<span class=line> ,</span>
<span class=line> };</span>
<span class=line> cmd.add_flag(.{}, .{</span>
<span class=line> .name = "flag",</span>
<span class=line> .truthy = .{ .short_tag = "-f", .long_tag = "--flag" },</span>
<span class=line> .falsy = .{ .long_tag = "--no-flag" },</span>
<span class=line> .env_var = "NOCLIP_SUBFLAG",</span>
<span class=line> });</span>
<span class=line> cmd.add_argument(.{ .OutputType = []const u8 }, .{ .name = "argument" });</span>
<span class=line> break :cmd cmd;</span>
<span class=line>};</span></code></pre>
</div></div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet blandit nisi, id tempor tortor. Aliquam feugiat luctus molestie. Maecenas vel consequat mauris, ut volutpat enim. Suspendisse in mauris nibh. Maecenas viverra enim quis nibh cursus condimentum. Aenean eleifend ante in magna vestibulum imperdiet ut ut augue. Sed cursus nunc turpis, sit amet congue ex varius a. Sed a lorem volutpat, tempus lectus vitae, vulputate dui. In eu convallis neque. Suspendisse potenti.</p>
<p>Vestibulum venenatis mi facilisis ullamcorper fringilla. Integer posuere arcu ac ante consequat malesuada. Phasellus condimentum ornare diam in fermentum. Cras dictum consequat vehicula. Aliquam varius mattis diam sit amet imperdiet. Nunc nec orci bibendum, porta purus nec, facilisis enim. Etiam ultrices sodales quam, a scelerisque quam dapibus et. Mauris dapibus viverra leo id bibendum. Donec congue tempor tortor, ac consectetur augue rutrum ut. Nullam blandit accumsan nibh et iaculis.</p>
<p>Ut hendrerit magna et turpis rutrum suscipit. Phasellus nulla enim, tincidunt sit amet mi vitae, vehicula posuere enim. Praesent vitae libero sollicitudin, faucibus nisl facilisis, pulvinar elit. Ut id magna id enim bibendum iaculis eget non orci. Aliquam elementum felis quam, quis varius felis malesuada non. Sed bibendum dui aliquet tortor rutrum, nec iaculis nisi dapibus. Donec condimentum est sed ligula volutpat, vitae consequat leo euismod. Integer nec erat magna. Curabitur non pellentesque magna, quis ultrices libero. Aenean mattis ut orci a gravida. Nullam dapibus aliquam lorem, vitae hendrerit mauris.</p>
<p>Integer nec elit aliquam, fringilla lacus ac, venenatis purus. Etiam mattis interdum bibendum. Pellentesque tincidunt ex ut hendrerit molestie. Mauris non enim porttitor nibh pretium auctor. Nulla vehicula commodo diam ac suscipit. Fusce blandit convallis erat et mattis. Nunc sagittis efficitur purus, at mattis magna sagittis sit amet. Quisque nec purus placerat, posuere tortor non, feugiat purus. Suspendisse eget dapibus mauris, eget dictum quam. Praesent turpis risus, interdum quis porttitor eu, faucibus ut nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam nunc mauris, ac ullamcorper magna imperdiet sed. Ut quam mi, tincidunt vitae pretium id, aliquam sed ipsum. Proin quam massa, cursus in nisl non, lacinia egestas sem.</p>
<p>Nullam interdum lorem a mi rhoncus ullamcorper. Nulla malesuada lectus rhoncus turpis ullamcorper, eget faucibus purus elementum. Quisque consectetur ornare risus, non mattis quam pretium at. Etiam laoreet velit a risus dapibus maximus. Nam non ornare magna, eu accumsan erat. Sed mattis sodales orci, et sagittis neque placerat vel. In hac habitasse platea dictumst. Pellentesque posuere tincidunt nisi, eu faucibus nunc pulvinar nec. Morbi tempus a mi non eleifend. Sed gravida orci auctor risus consequat, at iaculis est vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt, purus sed pellentesque blandit, ante lacus mollis risus, et cursus magna nibh nec eros.</p>
</div>
<div class="example"><div class="codebox">
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="test">lonst</span> lubcommand = cmd: {</span>
<span class=line> <span class="keyword">var</span> cmd = CommandBuilder(void){</span>
<span class=line> .description =</span>
<span class=line> <span class="string">\\Perform some sort of work</span></span>
<span class=line> <span class="string">\\</span></span>
<span class=line> <span class="string">\\This subcommand is a mystery. It probably does something, but nobody is sure what.</span></span>
<span class=line> ,</span>
<span class=line> };</span>
<span class=line> cmd.add_flag(.{}, .{</span>
<span class=line> .name = "flag",</span>
<span class=line> .truthy = .{ .short_tag = "-f", .long_tag = "--flag" },</span>
<span class=line> .falsy = .{ .long_tag = "--no-flag" },</span>
<span class=line> .env_var = "NOCLIP_SUBFLAG",</span>
<span class=line> });</span>
<span class=line> cmd.add_argument(.{ .OutputType = []const u8 }, .{ .name = "argument" });</span>
<span class=line> break :cmd cmd;</span>
<span class=line>};</span></code></pre>
</div></div>
</section>
<section>
<div id="title-3" class="header">Title The Third</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet blandit nisi, id tempor tortor. Aliquam feugiat luctus molestie. Maecenas vel consequat mauris, ut volutpat enim. Suspendisse in mauris nibh. Maecenas viverra enim quis nibh cursus condimentum. Aenean eleifend ante in magna vestibulum imperdiet ut ut augue. Sed cursus nunc turpis, sit amet congue ex varius a. Sed a lorem volutpat, tempus lectus vitae, vulputate dui. In eu convallis neque. Suspendisse potenti.</p>
<p>Vestibulum venenatis mi facilisis ullamcorper fringilla. Integer posuere arcu ac ante consequat malesuada. Phasellus condimentum ornare diam in fermentum. Cras dictum consequat vehicula. Aliquam varius mattis diam sit amet imperdiet. Nunc nec orci bibendum, porta purus nec, facilisis enim. Etiam ultrices sodales quam, a scelerisque quam dapibus et. Mauris dapibus viverra leo id bibendum. Donec congue tempor tortor, ac consectetur augue rutrum ut. Nullam blandit accumsan nibh et iaculis.</p>
<p>Ut hendrerit magna et turpis rutrum suscipit. Phasellus nulla enim, tincidunt sit amet mi vitae, vehicula posuere enim. Praesent vitae libero sollicitudin, faucibus nisl facilisis, pulvinar elit. Ut id magna id enim bibendum iaculis eget non orci. Aliquam elementum felis quam, quis varius felis malesuada non. Sed bibendum dui aliquet tortor rutrum, nec iaculis nisi dapibus. Donec condimentum est sed ligula volutpat, vitae consequat leo euismod. Integer nec erat magna. Curabitur non pellentesque magna, quis ultrices libero. Aenean mattis ut orci a gravida. Nullam dapibus aliquam lorem, vitae hendrerit mauris.</p>
<p>Integer nec elit aliquam, fringilla lacus ac, venenatis purus. Etiam mattis interdum bibendum. Pellentesque tincidunt ex ut hendrerit molestie. Mauris non enim porttitor nibh pretium auctor. Nulla vehicula commodo diam ac suscipit. Fusce blandit convallis erat et mattis. Nunc sagittis efficitur purus, at mattis magna sagittis sit amet. Quisque nec purus placerat, posuere tortor non, feugiat purus. Suspendisse eget dapibus mauris, eget dictum quam. Praesent turpis risus, interdum quis porttitor eu, faucibus ut nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam nunc mauris, ac ullamcorper magna imperdiet sed. Ut quam mi, tincidunt vitae pretium id, aliquam sed ipsum. Proin quam massa, cursus in nisl non, lacinia egestas sem.</p>
<p>Nullam interdum lorem a mi rhoncus ullamcorper. Nulla malesuada lectus rhoncus turpis ullamcorper, eget faucibus purus elementum. Quisque consectetur ornare risus, non mattis quam pretium at. Etiam laoreet velit a risus dapibus maximus. Nam non ornare magna, eu accumsan erat. Sed mattis sodales orci, et sagittis neque placerat vel. In hac habitasse platea dictumst. Pellentesque posuere tincidunt nisi, eu faucibus nunc pulvinar nec. Morbi tempus a mi non eleifend. Sed gravida orci auctor risus consequat, at iaculis est vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt, purus sed pellentesque blandit, ante lacus mollis risus, et cursus magna nibh nec eros.</p>
</div>
<div class="example"><div class="codebox">
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span></code></pre>
</div></div>
<div class="description">
<p>Some written description</p>
</div>
<div class="example"><div class="codebox">
<pre class="code-markup"><code class="lang-zig"><span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span>
<span class=line><span class="keyword">const</span> std = <span class="builtin">@import</span>(<span class="string">"std"</span>);</span></code></pre>
</div></div>
</section>
</div>
</main>
</div>
</body>
</html>