diff --git a/documentation/index.html b/documentation/index.html new file mode 100644 index 0000000..652ad27 --- /dev/null +++ b/documentation/index.html @@ -0,0 +1,159 @@ + + + + + NOCLIP + + + + +
+ +
+
+
+
Title
+
+

Some written description

+
+
+ 
const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+
+
+

Some written description

+
+
+ 
const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+
+
+

Some written description

+
+
+
+
Title The Second
+
+

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.

+

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.

+

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.

+

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.

+

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.

+
+
+ 
const std = @import("std");
+const subcommand = cmd: {
+    var cmd = CommandBuilder(void){
+        .description =
+        \\Perform some sort of work
+        \\
+        \\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.
+        ,
+    };
+    cmd.add_flag(.{}, .{
+        .name = "flag",
+        .truthy = .{ .short_tag = "-f", .long_tag = "--flag" },
+        .falsy = .{ .long_tag = "--no-flag" },
+        .env_var = "NOCLIP_SUBFLAG",
+    });
+    cmd.add_argument(.{ .OutputType = []const u8 }, .{ .name = "argument" });
+    break :cmd cmd;
+};
+
+
+

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.

+

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.

+

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.

+

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.

+

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.

+
+
+ 
const std = @import("std");
+lonst lubcommand = cmd: {
+    var cmd = CommandBuilder(void){
+        .description =
+        \\Perform some sort of work
+        \\
+        \\This subcommand is a mystery. It probably does something, but nobody is sure what.
+        ,
+    };
+    cmd.add_flag(.{}, .{
+        .name = "flag",
+        .truthy = .{ .short_tag = "-f", .long_tag = "--flag" },
+        .falsy = .{ .long_tag = "--no-flag" },
+        .env_var = "NOCLIP_SUBFLAG",
+    });
+    cmd.add_argument(.{ .OutputType = []const u8 }, .{ .name = "argument" });
+    break :cmd cmd;
+};
+
+
+
+
Title The Third
+
+

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.

+

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.

+

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.

+

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.

+

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.

+
+
+ 
const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+
+
+

Some written description

+
+
+ 
const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+const std = @import("std");
+
+
+
+
+
+ + diff --git a/documentation/style.css b/documentation/style.css new file mode 100644 index 0000000..ea7ea34 --- /dev/null +++ b/documentation/style.css @@ -0,0 +1,235 @@ +@charset "UTF-8"; + +:root { +/* Base16-Eighties, lightly modified*/ + --gray-n2: #1E1E1E; + --gray-n1: #262626; + --gray-0: #2D2D2D; + --gray-1: #393939; + --gray-2: #515151; + --gray-3: #747369; + --gray-4: #A09F93; + --gray-5: #D3D0C8; /* foreground */ + --gray-6: #E8E6DF; + --gray-7: #F2F0EC; + --red: #F2777A; + --orange: #F99157; + --yellow: #FFCC66; + --green: #99CC99; + --aqua: #66CCCC; + --blue: #6699CC; + --purple: #CC99CC; + --pink: #CC7799; + +/* Semantic aliases*/ + --background-color: var(--gray-0); + --foreground-color: var(--gray-5); + --nav-color: var(--gray-n2); + --sidebar-color: var(--gray-n1); + --border-color: var(--gray-1); + + --example-min-width: 950px; + --description-max-width: 850px; + --description-min-width: 600px; + --section-header-height: 70px; + --nav-sidebar-width: 270px; +} + +/*@media (prefers-color-scheme: dark) {*/ +@media (prefers-color-scheme: light) { + :root { + --background-color: var(--gray-7); + --foreground-color: var(--gray-1); + --sidebar-color: var(--gray-6); + --border-color: var(--gray-6); + } +} + +body { + background: var(--background-color); + color: var(--foreground-color); + margin: 0; + font-size: 16pt; + font-family: sans-serif; +} + +pre { margin: 0; } + +p { + color: var(--gray-5); + hyphens: auto; + -webkit-hyphens: auto; + margin: 0; +} + +p + p { + text-indent: 1em; +} + +body .layout { + height: 100vh; + display: grid; + grid-template-rows: 1fr; + grid-template-columns: var(--nav-sidebar-width) 1fr; + grid-template-areas: "sidebar doc"; + max-width: 100vw; +} + +body .layout .sidebar { + grid-area: sidebar; +/* border-right: 2px solid var(--border-color);*/ + background: var(--nav-color); + overflow: scroll; +} + +body .layout .sidebar nav { + padding-bottom: 1em; +} + +body .layout .sidebar .header { + position: sticky; + top: 0; + background: var(--nav-color); + height: var(--section-header-height); + line-height: var(--section-header-height); + font-size: 20pt; + padding: 0 30px; +} + +body .layout .sidebar .nav a { + color: var(--gray-4); + text-decoration: none; +} + +body .layout .sidebar .nav a:hover { + color: var(--blue); +} + +body .layout .sidebar .nav .item { + box-sizing: border-box; + padding: 0.2em 30px; +} + +body .layout .doc { + grid-area: doc; + height: 100vh; + overflow-y: scroll; +} + +body .layout .doc .doc-padding { + padding-bottom: 80vh; + max-width: 100%; +} + +body .layout .doc section { + display: grid; + grid-template-columns: minmax(var(--description-min-width), var(--description-max-width)) minmax(var(--example-min-width), 1fr); + grid-template-areas: "description example"; +} + +body .layout .doc section .header { + grid-column-start: description; + grid-column-end: example; + background: var(--sidebar-color); + font-size: 20pt; + line-height: var(--section-header-height); + padding: 0 1ex; +/* position: sticky;*/ +/* top: 0;*/ +/* border-bottom: 1px solid var(--border-color);*/ +} + +body .layout .doc section .description { + grid-column-start: description; + grid-column-end: description; + box-sizing: border-box; + padding: 1em; + text-align: justify; +} + +body .layout .doc section .example { + grid-column-start: example; + grid-column-end: example; + overflow: visible; +} + +body .layout .doc section .example .codebox { + box-sizing: border-box; + position: sticky; + top: 0; + overflow-x: scroll; + background: var(--sidebar-color); + padding: 1em 1em; + border-bottom: 15px solid var(--background-color); +} + +body .layout .doc section .example .code-markup { + counter-reset: example; + font-size: 12pt; + line-height: 1.3; +/* border-left: 2px inset black;*/ +/* box-shadow: 10px 0 10px -10px var(--gray-n2) inset;*/ +/* top: var(--section-header-height);*/ +} + +body .layout .doc section .example .code-markup .line { + padding-right: 1em; +} + +.code-markup .keyword { color: var(--purple); } +.code-markup .builtin { color: var(--aqua); } +.code-markup .string { color: var(--green); } +.code-markup .test { color: var(--pink); } + +/*It turns out these have to come after the directives they override.*/ +@media (max-width: 1820px) { + body .layout .doc section { + display: grid; + grid-template-columns: 1fr; + grid-template-areas: "header" "description" "example"; + } + + body .layout .doc section .description { + max-width: var(--description-max-width); + } + + body .layout .doc section .example .codebox { + max-width: calc(100vw - var(--nav-sidebar-width)); + border-bottom: none; + } + + body .layout .doc section .example .code-markup { + position: initial; + } + + body .layout .doc section .example:last-child { + margin-bottom: 15px; + } +} + +@media (max-width: 1220px) { + body .layout { + display: grid; + grid-template-rows: auto auto; + grid-template-columns: 1fr; + grid-template-areas: "sidebar" "doc"; + max-width: 100vw; + } + + body .layout .sidebar { + overflow: visible; + } + + body .layout .doc { + overflow-y: initial; + } + + body .layout .doc section .description { + width: 100%; + margin: auto; + } + + body .layout .doc section .example .codebox { + max-width: 100vw; + } +}