From 9c9f440794d6c700dbbcf7bc410d954c694a36c1 Mon Sep 17 00:00:00 2001
From: chloe caruso <git@paperclover.net>
Date: Sun, 27 Oct 2024 02:25:04 -0700
Subject: [PATCH] fix: bugs in the manual generator

---
 CHANGELOG.md                   |  6 ++--
 src/manual/generate_manual.zig | 11 +++++--
 src/manual/style.css           | 52 ++++++++++++++++------------------
 src/manual/template.html       |  3 +-
 4 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b2cdddfab73437c4e9666c37c0f23b07d6ffd14..de7dd96d450826c1470e12cde31eb153e40ef39b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,13 @@
 ## 0.1.7
 
-- chore: rename the language to "ix"
+- news: rename the language to "ix"
+- breaking: new CLI interface
 - feat: language manual gets a pleasing redesign
-- feat: add boolean `and` and `or` operator keywords
 - feat: allow any expression as a function body
+- feat: add boolean `and` and `or` operator keywords
 - feat: add `assert` keyword
 - feat: add safety checks for array out of bounds
+- feat(js): block expressions are lowered to comma chains if possible
 - fix: coerce `break` operands and implicit breaks to result type
 - fix: coerce results when `if` expression branches merge
 - fix: ensure if branch results to a runtime value when the condition is not compile-time known
diff --git a/src/manual/generate_manual.zig b/src/manual/generate_manual.zig
index fe5b542200397c48a47dda1f35e145b9f67b423c..8bbe0bbcafe28c3f697d9207a8f14f124d83cb06 100644
--- a/src/manual/generate_manual.zig
+++ b/src/manual/generate_manual.zig
@@ -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.writeAll("<label id=\"js-tab\" role=\"tab\" for=\"js\">Compiled JS</label>");
+                try w.print("<label class=\"button-output\"id=\"output-tab\"role=\"tab\"for=\"output{d}\">Output</label>", .{tab_id});
+                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 {
                 // ???
diff --git a/src/manual/style.css b/src/manual/style.css
index db484ff010ffab8dc922b623be556f90af98881e..ecc604d22c8569f27ba75366a3c845040bcde4ba 100644
--- a/src/manual/style.css
+++ b/src/manual/style.css
@@ -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"] {
-  display: block;
-  width: 1px;
-  height: 1px;
-  position: fixed;
-  top: -3px;
-  left: -3px;
+input {
+  display: none;
 }
 
 #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,
+.tab-js:checked ~ .js {
   display: block;
 }
 
-[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);
diff --git a/src/manual/template.html b/src/manual/template.html
index 31f077c3371d04e33113372fa16db616cc650e5a..7310a511a030c5b102141b7be9b0739bcd27ba35 100644
--- a/src/manual/template.html
+++ b/src/manual/template.html
@@ -9,8 +9,6 @@
   </head>
   <body>
     <input type="checkbox" id="hidden-menu-checkbox" />
-    <input name="tabs" type="radio" id="output" value="output" checked="true" />
-    <input name="tabs" type="radio" id="js" value="js" />
     <aside>
       <div id="top-part">
         <label
@@ -77,6 +75,7 @@
 
       <label id="clickable-background" for="hidden-menu-checkbox"></label>
     </aside>
+    <div class="aside-spacer"></div>
     <main id="main">
       {contents}
     </main>
-- 
2.54.0