Commit b60f2d0c9f

Andrew Kelley <andrew@ziglang.org>
2019-04-03 23:39:07
langref: rework the theming and layout
* 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.
master
1 parent 692086f
Changed files (2)
doc
docgen.zig
langref.html.in
doc/docgen.zig
@@ -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");
doc/langref.html.in
@@ -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#}