Commit 9c9f440794d6c700dbbcf7bc410d954c694a36c1 | ix

author	chloe caruso <git@paperclover.net> 2024-10-27 02:25:04-07:00
committer	dave caruso <me@paperdave.net> 2024-10-27 13:39:45-07:00
log	9c9f440794d6c700dbbcf7bc410d954c694a36c1
tree	bef24e4da39fdd956011327c252d77bcc1bd8b89
parent	fd9bc5492894391c36ce4ee485e103ceb0255f76
signature	Commit is signed but in an unrecognized format.

fix: bugs in the manual generator

4 files changed, 39 insertions(+), 33 deletions(-)

CHANGELOG.md
src
- manual

CHANGELOG.md+4-2

...	@@ -1,11 +1,13 @@	...	@@ -1,11 +1,13 @@
1	## 0.1.7	1	## 0.1.7
2		2
3	- chore: rename the language to "ix"	3	- news: rename the language to "ix"
		4	- breaking: new CLI interface
4	- feat: language manual gets a pleasing redesign	5	- feat: language manual gets a pleasing redesign
5	- feat: add boolean `and` and `or` operator keywords
6	- feat: allow any expression as a function body	6	- feat: allow any expression as a function body
		7	- feat: add boolean `and` and `or` operator keywords
7	- feat: add `assert` keyword	8	- feat: add `assert` keyword
8	- feat: add safety checks for array out of bounds	9	- feat: add safety checks for array out of bounds
		10	- feat(js): block expressions are lowered to comma chains if possible
9	- fix: coerce `break` operands and implicit breaks to result type	11	- fix: coerce `break` operands and implicit breaks to result type
10	- fix: coerce results when `if` expression branches merge	12	- fix: coerce results when `if` expression branches merge
11	- fix: ensure if branch results to a runtime value when the condition is not compile-time known	13	- fix: ensure if branch results to a runtime value when the condition is not compile-time known

src/manual/generate_manual.zig+9-2

 @@ -271,6 +271,8 @@ const CodeExample = struct {
         \\</button>
     );
+    var next_tab_id: usize = 0;
     pub fn write(code: CodeExample, w: std.io.AnyWriter) !void {
         try w.writeAll("<figure class=\"file\">");
         try w.print("<figcaption>{}</figcaption>", .{fmtHtmlEscape(code.filename, false)});
 @@ -283,12 +285,17 @@ const CodeExample = struct {
         }
         try w.writeAll("</code></pre>");
+        const tab_id = next_tab_id;
+        next_tab_id += 1;
         if (code.terminal) |terminal| {
             try w.writeAll("<section class=\"tabs\">");
+            try w.print("<input class=\"tab-output\"name=\"tab{0d}\"type=\"radio\"id=\"output{0d}\"value=\"output\"checked=true/>", .{tab_id});
+            try w.print("<input class=\"tab-js\"name=\"tab{0d}\"type=\"radio\"id=\"js{0d}\"value=\"js\"/>", .{tab_id});
             if (code.javascript != null) {
                 try w.writeAll("<div role=\"tablist\">");
-                try w.writeAll("<label id=\"output-tab\" role=\"tab\" for=\"output\">Output</label>");
+                try w.print("<label class=\"button-output\"id=\"output-tab\"role=\"tab\"for=\"output{d}\">Output</label>", .{tab_id});
-                try w.writeAll("<label id=\"js-tab\" role=\"tab\" for=\"js\">Compiled JS</label>");
+                try w.print("<label class=\"button-js\"id=\"js-tab\"role=\"tab\"for=\"js{d}\">Compiled JS</label>", .{tab_id});
                 try w.writeAll("</div>");
             } else {
                 // ???

src/manual/style.css+25-27

 @@ -29,16 +29,21 @@
   box-sizing: border-box;
 }
+html, body {
+  width: 100%;
+  overscroll-behavior-x: none;
+}
 body {
   background-color: var(--base);
   color: var(--text);
   font-family: var(--font-text);
   color-scheme: light dark;
   display: flex;
+  max-width: 100vw;
 }
 main {
-  width: 100%;
   max-width: 80ch;
   padding: 1rem;
   padding-top: 2rem;
 @@ -146,7 +151,7 @@ th, td {
 }
 aside {
-  position: sticky;
+  position: fixed;
   top: 0;
   left: 0;
   height: 100dvh;
 @@ -236,13 +241,8 @@ aside a:hover {
   margin: 0;
 }
-#hidden-menu-checkbox, [name="tabs"] {
+input {
-  display: block;
+  display: none;
-  width: 1px;
-  height: 1px;
-  position: fixed;
-  top: -3px;
-  left: -3px;
 }
 #menu-btn, #clickable-background {
 @@ -292,8 +292,17 @@ main a:active {
   top: -0.125em;
 }
+/* Desktop layout */
+@media (min-width: 1001px) {
+  .aside-spacer {
+    content: " ";
+    display: block;
+    flex: 0 0 40ch;
+  }
+}
 /* Tablet/small screen layout */
-@media screen and (max-width: 1000px) {
+@media (max-width: 1000px) {
   html {
     scroll-padding-top: 5rem;
   }
 @@ -374,7 +383,7 @@ main a:active {
 }
 /* Mobile layout */
-@media screen and (max-width: 600px) {
+@media (max-width: 600px) {
   main {
     padding: 3rem 1rem;
   }
 @@ -478,6 +487,7 @@ pre, code {
   overflow-y: scroll;
   color: var(--text);
   position: relative;
+  white-space: pre-wrap;
 }
 .file pre.terminal {
 @@ -506,25 +516,13 @@ pre, code {
   display: none;
 }
-[name="tabs"][value="output"]:checked ~ main .file .tabs .output {
+.tab-output:checked ~ .output,
-  display: block;
+.tab-js:checked ~ .js {
-}
-[name="tabs"][value="output"]:checked
-  ~ main
-  .file
-  .tabs
-  [role="tab"][for="output"] {
-  font-weight: bold;
-  background-color: var(--base);
-  border-top: 2px solid var(--accent);
-}
-[name="tabs"][value="js"]:checked ~ main .file .tabs .js {
   display: block;
 }
-[name="tabs"][value="js"]:checked ~ main .file .tabs [role="tab"][for="js"] {
+.tab-js:checked ~ div .button-js,
+.tab-output:checked ~ div .button-output {
   font-weight: bold;
   border-top: 2px solid var(--accent);
   background-color: var(--base);

src/manual/template.html+1-2

...	@@ -9,8 +9,6 @@	...	@@ -9,8 +9,6 @@
9	</head>	9	</head>
10	<body>	10	<body>
11	<input type="checkbox" id="hidden-menu-checkbox" />	11	<input type="checkbox" id="hidden-menu-checkbox" />
12	<input name="tabs" type="radio" id="output" value="output" checked="true" />
13	<input name="tabs" type="radio" id="js" value="js" />
14	<aside>	12	<aside>
15	<div id="top-part">	13	<div id="top-part">
16	<label	14	<label
...	@@ -77,6 +75,7 @@	...	@@ -77,6 +75,7 @@
77		75
78	<label id="clickable-background" for="hidden-menu-checkbox"></label>	76	<label id="clickable-background" for="hidden-menu-checkbox"></label>
79	</aside>	77	</aside>
		78	<div class="aside-spacer"></div>
80	<main id="main">	79	<main id="main">
81	{contents}	80	{contents}
82	</main>	81	</main>