| 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+4-2
| ... | ... | @@ -1,11 +1,13 @@ |
| 1 | 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 | 5 | - feat: language manual gets a pleasing redesign |
| 5 | - feat: add boolean `and` and `or` operator keywords | |
| 6 | 6 | - feat: allow any expression as a function body |
| 7 | - feat: add boolean `and` and `or` operator keywords | |
| 7 | 8 | - feat: add `assert` keyword |
| 8 | 9 | - feat: add safety checks for array out of bounds |
| 10 | - feat(js): block expressions are lowered to comma chains if possible | |
| 9 | 11 | - fix: coerce `break` operands and implicit breaks to result type |
| 10 | 12 | - fix: coerce results when `if` expression branches merge |
| 11 | 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 { |
| 271 | 271 | \\</button> |
| 272 | 272 | ); |
| 273 | 273 | |
| 274 | var next_tab_id: usize = 0; | |
| 275 | ||
| 274 | 276 | pub fn write(code: CodeExample, w: std.io.AnyWriter) !void { |
| 275 | 277 | try w.writeAll("<figure class=\"file\">"); |
| 276 | 278 | try w.print("<figcaption>{}</figcaption>", .{fmtHtmlEscape(code.filename, false)}); |
| ... | ... | @@ -283,12 +285,17 @@ const CodeExample = struct { |
| 283 | 285 | } |
| 284 | 286 | try w.writeAll("</code></pre>"); |
| 285 | 287 | |
| 288 | const tab_id = next_tab_id; | |
| 289 | next_tab_id += 1; | |
| 290 | ||
| 286 | 291 | if (code.terminal) |terminal| { |
| 287 | 292 | try w.writeAll("<section class=\"tabs\">"); |
| 293 | try w.print("<input class=\"tab-output\"name=\"tab{0d}\"type=\"radio\"id=\"output{0d}\"value=\"output\"checked=true/>", .{tab_id}); | |
| 294 | try w.print("<input class=\"tab-js\"name=\"tab{0d}\"type=\"radio\"id=\"js{0d}\"value=\"js\"/>", .{tab_id}); | |
| 288 | 295 | if (code.javascript != null) { |
| 289 | 296 | try w.writeAll("<div role=\"tablist\">"); |
| 290 | try w.writeAll("<label id=\"output-tab\" role=\"tab\" for=\"output\">Output</label>"); | |
| 291 | try w.writeAll("<label id=\"js-tab\" role=\"tab\" for=\"js\">Compiled JS</label>"); | |
| 297 | try w.print("<label class=\"button-output\"id=\"output-tab\"role=\"tab\"for=\"output{d}\">Output</label>", .{tab_id}); | |
| 298 | try w.print("<label class=\"button-js\"id=\"js-tab\"role=\"tab\"for=\"js{d}\">Compiled JS</label>", .{tab_id}); | |
| 292 | 299 | try w.writeAll("</div>"); |
| 293 | 300 | } else { |
| 294 | 301 | // ??? |
src/manual/style.css+25-27
| ... | ... | @@ -29,16 +29,21 @@ |
| 29 | 29 | box-sizing: border-box; |
| 30 | 30 | } |
| 31 | 31 | |
| 32 | html, body { | |
| 33 | width: 100%; | |
| 34 | overscroll-behavior-x: none; | |
| 35 | } | |
| 36 | ||
| 32 | 37 | body { |
| 33 | 38 | background-color: var(--base); |
| 34 | 39 | color: var(--text); |
| 35 | 40 | font-family: var(--font-text); |
| 36 | 41 | color-scheme: light dark; |
| 37 | 42 | display: flex; |
| 43 | max-width: 100vw; | |
| 38 | 44 | } |
| 39 | 45 | |
| 40 | 46 | main { |
| 41 | width: 100%; | |
| 42 | 47 | max-width: 80ch; |
| 43 | 48 | padding: 1rem; |
| 44 | 49 | padding-top: 2rem; |
| ... | ... | @@ -146,7 +151,7 @@ th, td { |
| 146 | 151 | } |
| 147 | 152 | |
| 148 | 153 | aside { |
| 149 | position: sticky; | |
| 154 | position: fixed; | |
| 150 | 155 | top: 0; |
| 151 | 156 | left: 0; |
| 152 | 157 | height: 100dvh; |
| ... | ... | @@ -236,13 +241,8 @@ aside a:hover { |
| 236 | 241 | margin: 0; |
| 237 | 242 | } |
| 238 | 243 | |
| 239 | #hidden-menu-checkbox, [name="tabs"] { | |
| 240 | display: block; | |
| 241 | width: 1px; | |
| 242 | height: 1px; | |
| 243 | position: fixed; | |
| 244 | top: -3px; | |
| 245 | left: -3px; | |
| 244 | input { | |
| 245 | display: none; | |
| 246 | 246 | } |
| 247 | 247 | |
| 248 | 248 | #menu-btn, #clickable-background { |
| ... | ... | @@ -292,8 +292,17 @@ main a:active { |
| 292 | 292 | top: -0.125em; |
| 293 | 293 | } |
| 294 | 294 | |
| 295 | /* Desktop layout */ | |
| 296 | @media (min-width: 1001px) { | |
| 297 | .aside-spacer { | |
| 298 | content: " "; | |
| 299 | display: block; | |
| 300 | flex: 0 0 40ch; | |
| 301 | } | |
| 302 | } | |
| 303 | ||
| 295 | 304 | /* Tablet/small screen layout */ |
| 296 | @media screen and (max-width: 1000px) { | |
| 305 | @media (max-width: 1000px) { | |
| 297 | 306 | html { |
| 298 | 307 | scroll-padding-top: 5rem; |
| 299 | 308 | } |
| ... | ... | @@ -374,7 +383,7 @@ main a:active { |
| 374 | 383 | } |
| 375 | 384 | |
| 376 | 385 | /* Mobile layout */ |
| 377 | @media screen and (max-width: 600px) { | |
| 386 | @media (max-width: 600px) { | |
| 378 | 387 | main { |
| 379 | 388 | padding: 3rem 1rem; |
| 380 | 389 | } |
| ... | ... | @@ -478,6 +487,7 @@ pre, code { |
| 478 | 487 | overflow-y: scroll; |
| 479 | 488 | color: var(--text); |
| 480 | 489 | position: relative; |
| 490 | white-space: pre-wrap; | |
| 481 | 491 | } |
| 482 | 492 | |
| 483 | 493 | .file pre.terminal { |
| ... | ... | @@ -506,25 +516,13 @@ pre, code { |
| 506 | 516 | display: none; |
| 507 | 517 | } |
| 508 | 518 | |
| 509 | [name="tabs"][value="output"]:checked ~ main .file .tabs .output { | |
| 510 | display: block; | |
| 511 | } | |
| 512 | ||
| 513 | [name="tabs"][value="output"]:checked | |
| 514 | ~ main | |
| 515 | .file | |
| 516 | .tabs | |
| 517 | [role="tab"][for="output"] { | |
| 518 | font-weight: bold; | |
| 519 | background-color: var(--base); | |
| 520 | border-top: 2px solid var(--accent); | |
| 521 | } | |
| 522 | ||
| 523 | [name="tabs"][value="js"]:checked ~ main .file .tabs .js { | |
| 519 | .tab-output:checked ~ .output, | |
| 520 | .tab-js:checked ~ .js { | |
| 524 | 521 | display: block; |
| 525 | 522 | } |
| 526 | 523 | |
| 527 | [name="tabs"][value="js"]:checked ~ main .file .tabs [role="tab"][for="js"] { | |
| 524 | .tab-js:checked ~ div .button-js, | |
| 525 | .tab-output:checked ~ div .button-output { | |
| 528 | 526 | font-weight: bold; |
| 529 | 527 | border-top: 2px solid var(--accent); |
| 530 | 528 | background-color: var(--base); |
src/manual/template.html+1-2
| ... | ... | @@ -9,8 +9,6 @@ |
| 9 | 9 | </head> |
| 10 | 10 | <body> |
| 11 | 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 | 12 | <aside> |
| 15 | 13 | <div id="top-part"> |
| 16 | 14 | <label |
| ... | ... | @@ -77,6 +75,7 @@ |
| 77 | 75 | |
| 78 | 76 | <label id="clickable-background" for="hidden-menu-checkbox"></label> |
| 79 | 77 | </aside> |
| 78 | <div class="aside-spacer"></div> | |
| 80 | 79 | <main id="main"> |
| 81 | 80 | {contents} |
| 82 | 81 | </main> |