Nixyri/zig
1
0
Fork 0
mirror of https://github.com/ziglang/zig.git synced 2025-02-05 20:30:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

langref: rework the theming and layout

Browse Source 
* Instead of the only color scheme being dark, the language reference
   now has a light theme by default, and respects the user's light/dark
   preference via prefers-color-scheme media query. Most browsers don't
   support this yet, so we just have to wait patiently for the future to
   arrive. closes #2172.

 * Instead of a side bar index, the index is inline with the rest of the
   content. This is simpler and more friendly to all user agents, and means
   we don't need the media query for mobile devices. It also makes
   back-references work, so now headers link to the table of contents
   and the table of contents links to headers.
This commit is contained in:
Andrew Kelley 2019-04-03 17:39:07 -04:00
parent 692086f898
commit b60f2d0c9f
No known key found for this signature in database
GPG Key ID: 7C5F548F728501A9
2 changed files with 97 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
doc/docgen.zig
View File

@ -385,7 +385,7 @@ fn genToc(allocator: *mem.Allocator, tokenizer: *Tokenizer) !Toc {
last_action = Action.Open;
}
try toc.writeByteNTimes(' ', 4 + header_stack_size * 4);
try toc.print("<li><a href=\"#{}\">{}</a>", urlized, content);
try toc.print("<li><a id=\"toc-{}\" href=\"#{}\">{}</a>", urlized, urlized, content);
} else if (mem.eql(u8, tag_name, "header_close")) {
if (header_stack_size == 0) {
return parseError(tokenizer, tag_token, "unbalanced close header");
@ -706,10 +706,10 @@ fn termColor(allocator: *mem.Allocator, input: []const u8) ![]u8 {
}
const builtin_types = [][]const u8{
"f16", "f32", "f64", "f128", "c_longdouble", "c_short",
"c_ushort", "c_int", "c_uint", "c_long", "c_ulong", "c_longlong",
"c_ulonglong", "c_char", "c_void", "void", "bool", "isize",
"usize", "noreturn", "type", "anyerror", "comptime_int", "comptime_float",
"f16", "f32", "f64", "f128", "c_longdouble", "c_short",
"c_ushort", "c_int", "c_uint", "c_long", "c_ulong", "c_longlong",
"c_ulonglong", "c_char", "c_void", "void", "bool", "isize",
"usize", "noreturn", "type", "anyerror", "comptime_int", "comptime_float",
};
fn isType(name: []const u8) bool {
@ -965,7 +965,15 @@ fn genHtml(allocator: *mem.Allocator, tokenizer: *Tokenizer, toc: *Toc, out: var
try out.write("</pre>");
},
Node.HeaderOpen => |info| {
try out.print("<h{} id=\"{}\"><a href=\"#{}\">{}</a></h{}>\n", info.n, info.url, info.url, info.name, info.n);
try out.print(
"<h{} id=\"{}\"><a href=\"#toc-{}\">{}</a><a class=\"hdr\" href=\"#{}\">¶</a></h{}>\n",
info.n,
info.url,
info.url,
info.name,
info.url,
info.n,
);
},
Node.SeeAlso => |items| {
try out.write("<p>See also:</p><ul>\n");

133
doc/langref.html.in
View File

@ -6,12 +6,9 @@
<title>Documentation - The Zig Programming Language</title>
<style type="text/css">
body{
background-color:#111;
color: #bbb;
font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
}
a {
color: #88f;
text-decoration: none;
}
table, th, td {
@ -39,17 +36,15 @@
.file {
text-decoration: underline;
}
code {
pre,code {
font-size: 12pt;
}
pre > code {
display: block;
overflow: auto;
overflow-x: auto;
padding: 0.5em;
color: #ccc;
background: #222;
color: #333;
background: #f8f8f8;
}
.table-wrapper {
width: 100%;
@ -57,76 +52,109 @@
}
.tok-kw {
color: #eee;
color: #333;
font-weight: bold;
}
.tok-str {
color: #2e5;
color: #d14;
}
.tok-builtin {
color: #ff894c;
color: #0086b3;
}
.tok-comment {
color: #aa7;
color: #777;
font-style: italic;
}
.tok-fn {
color: #e33;
color: #900;
font-weight: bold;
}
.tok-null {
color: #ff8080;
color: #008080;
}
.tok-number {
color: #ff8080;
color: #008080;
}
.tok-type {
color: #68f;
color: #458;
font-weight: bold;
}
/* Desktop */
@media screen and (min-width: 56.25em) {
#nav {
width: 20em;
height: 100%;
position: fixed;
overflow-y: scroll;
left: 0;
top: 0;
padding-left: 1em;
}
#contents {
max-width: 60em;
padding-left: 22em;
padding: 1em;
padding-left: 24em;
}
}
/* Mobile */
@media screen and (max-width: 56.25em) {
body, code {
font-size: small;
}
#nav {
border-bottom: 1px solid grey;
}
#contents {
max-width: 60em;
margin: auto;
}
h1 a, h2 a, h3 a, h4 a, h5 a {
text-decoration: none;
color: #aaa;
color: #333;
}
#nav a {
color: #aaa;
text-decoration: none;
a.hdr {
visibility: hidden;
}
h1:hover > a.hdr, h2:hover > a.hdr, h3:hover > a.hdr, h4:hover > a.hdr, h5:hover > a.hdr {
visibility: visible;
}
@media (prefers-color-scheme: dark) {
body{
background-color:#111;
color: #bbb;
}
a {
color: #88f;
}
table, th, td {
border-color: grey;
}
.t2_0 {
color: grey;
}
.t31_1 {
color: red;
}
.t32_1 {
color: green;
}
.t36_1 {
color: #0086b3;
}
pre > code {
color: #ccc;
background: #222;
}
.tok-kw {
color: #eee;
}
.tok-str {
color: #2e5;
}
.tok-builtin {
color: #ff894c;
}
.tok-comment {
color: #aa7;
}
.tok-fn {
color: #e33;
}
.tok-null {
color: #ff8080;
}
.tok-number {
color: #ff8080;
}
.tok-type {
color: #68f;
}
h1 a, h2 a, h3 a, h4 a, h5 a {
color: #aaa;
}
}
</style>
</head>
<body>
<div id="nav">
<h3>Index</h3>
{#nav#}
</div>
<div id="contents">
{#header_open|Introduction#}
<p>
@ -152,6 +180,11 @@
This HTML document depends on no external files, so you can use it offline.
</p>
{#header_close#}
{#header_open|Index#}
{#nav#}
{#header_close#}
{#header_open|Hello World#}
{#code_begin|exe|hello#}