Commit b60f2d0c9fa1d31c817ed39f87cf7619ff742dd3 | zig

author	Andrew Kelley <andrew@ziglang.org> 2019-04-03 17:39:07-04:00
committer	Andrew Kelley <andrew@ziglang.org> 2019-04-03 17:39:07-04:00
log	b60f2d0c9fa1d31c817ed39f87cf7619ff742dd3
tree	6ae57341ea7eefcabc532178cce6c6d72d5fa1fc
parent	692086f898522ecde96742391140bca1212bf4fe
signature	Commit is signed but in an unrecognized format.

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.

2 files changed, 97 insertions(+), 56 deletions(-)

doc
- docgen.zig
- langref.html.in

doc/docgen.zig+14-6

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

doc/langref.html.in+83-50

...	...	@@ -6,12 +6,9 @@
6	6	<title>Documentation - The Zig Programming Language</title>
7	7	<style type="text/css">
8	8	body{
9		background-color:#111;
10		color: #bbb;
11	9	font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
12	10	}
13	11	a {
14		color: #88f;
15	12	text-decoration: none;
16	13	}
17	14	table, th, td {
...	...	@@ -39,17 +36,15 @@
39	36	.file {
40	37	text-decoration: underline;
41	38	}
42		code {
	39	pre,code {
43	40	font-size: 12pt;
44	41	}
45	42	pre > code {
46	43	display: block;
47	44	overflow: auto;
48
49		overflow-x: auto;
50	45	padding: 0.5em;
51		color: #ccc;
52		background: #222;
	46	color: #333;
	47	background: #f8f8f8;
53	48	}
54	49	.table-wrapper {
55	50	width: 100%;
...	...	@@ -57,76 +52,109 @@
57	52	}
58	53
59	54	.tok-kw {
60		color: #eee;
	55	color: #333;
61	56	font-weight: bold;
62	57	}
63	58	.tok-str {
64		color: #2e5;
	59	color: #d14;
65	60	}
66	61	.tok-builtin {
67		color: #ff894c;
	62	color: #0086b3;
68	63	}
69	64	.tok-comment {
70		color: #aa7;
	65	color: #777;
71	66	font-style: italic;
72	67	}
73	68	.tok-fn {
74		color: #e33;
	69	color: #900;
75	70	font-weight: bold;
76	71	}
77	72	.tok-null {
78		color: #ff8080;
	73	color: #008080;
79	74	}
80	75	.tok-number {
81		color: #ff8080;
	76	color: #008080;
82	77	}
83	78	.tok-type {
84		color: #68f;
	79	color: #458;
85	80	font-weight: bold;
86	81	}
87	82
88		/* Desktop */
89		@media screen and (min-width: 56.25em) {
90		#nav {
91		width: 20em;
92		height: 100%;
93		position: fixed;
94		overflow-y: scroll;
95		left: 0;
96		top: 0;
97		padding-left: 1em;
98		}
99		#contents {
100		max-width: 60em;
101		padding-left: 22em;
102		padding: 1em;
103		padding-left: 24em;
104		}
105		}
106		/* Mobile */
107		@media screen and (max-width: 56.25em) {
108		body, code {
109		font-size: small;
110		}
111		#nav {
112		border-bottom: 1px solid grey;
113		}
	83	#contents {
	84	max-width: 60em;
	85	margin: auto;
114	86	}
	87
115	88	h1 a, h2 a, h3 a, h4 a, h5 a {
116	89	text-decoration: none;
117		color: #aaa;
	90	color: #333;
118	91	}
119		#nav a {
120		color: #aaa;
121		text-decoration: none;
	92
	93	a.hdr {
	94	visibility: hidden;
	95	}
	96	h1:hover > a.hdr, h2:hover > a.hdr, h3:hover > a.hdr, h4:hover > a.hdr, h5:hover > a.hdr {
	97	visibility: visible;
	98	}
	99
	100	@media (prefers-color-scheme: dark) {
	101	body{
	102	background-color:#111;
	103	color: #bbb;
	104	}
	105	a {
	106	color: #88f;
	107	}
	108	table, th, td {
	109	border-color: grey;
	110	}
	111	.t2_0 {
	112	color: grey;
	113	}
	114	.t31_1 {
	115	color: red;
	116	}
	117	.t32_1 {
	118	color: green;
	119	}
	120	.t36_1 {
	121	color: #0086b3;
	122	}
	123	pre > code {
	124	color: #ccc;
	125	background: #222;
	126	}
	127	.tok-kw {
	128	color: #eee;
	129	}
	130	.tok-str {
	131	color: #2e5;
	132	}
	133	.tok-builtin {
	134	color: #ff894c;
	135	}
	136	.tok-comment {
	137	color: #aa7;
	138	}
	139	.tok-fn {
	140	color: #e33;
	141	}
	142	.tok-null {
	143	color: #ff8080;
	144	}
	145	.tok-number {
	146	color: #ff8080;
	147	}
	148	.tok-type {
	149	color: #68f;
	150	}
	151	h1 a, h2 a, h3 a, h4 a, h5 a {
	152	color: #aaa;
	153	}
122	154	}
123	155	</style>
124	156	</head>
125	157	<body>
126		<div id="nav">
127		<h3>Index</h3>
128		{#nav#}
129		</div>
130	158	<div id="contents">
131	159	{#header_open\|Introduction#}
132	160	<p>
...	...	@@ -152,6 +180,11 @@
152	180	This HTML document depends on no external files, so you can use it offline.
153	181	</p>
154	182	{#header_close#}
	183
	184	{#header_open\|Index#}
	185	{#nav#}
	186	{#header_close#}
	187
155	188	{#header_open\|Hello World#}
156	189
157	190	{#code_begin\|exe\|hello#}