WIP

zigtools · Aug 10, 2024 · 86c3bdf · 86c3bdf
1 parent d3ee859
commit 86c3bdf
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 81 deletions.
diff --git a/assets/install.js b/assets/install.js
@@ -1,4 +1,16 @@
-const updateDetails = () => {
+const form = document.querySelector("form");
+const zigVersion = document.getElementById("zig-version");
+const error = document.getElementById("zig-version-error");
+
+const params = new Proxy(new URLSearchParams(window.location.search), {
+  get: (searchParams, name) => searchParams.get(name),
+  set: (searchParams, name, value) => searchParams.set(name, value),
+});
+
+const zigVersionRegex =
+  /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-dev\.(\d+)\+([0-9a-fA-F]{7,9}))?$/;
+
+function updateDetails() {
   if (window.location.hash) {
     let node = document.getElementById(window.location.hash.substring(1));
     while (node) {
@@ -8,22 +20,9 @@ const updateDetails = () => {
       node = node.parentElement;
     }
   }
-};
-
-window.onload = updateDetails;
-window.onhashchange = () => {
-  updateDetails();
-  if (window.location.hash) {
-    document.getElementById(window.location.hash.substring(1)).scrollIntoView();
-  }
-};
-
-const params = new Proxy(new URLSearchParams(window.location.search), {
-  get: (searchParams, name) => searchParams.get(name),
-  set: (searchParams, name, value) => searchParams.set(name, value),
-});
-document.getElementById("zig-version").value = params["zig_version"];
+}
 
+/** https://stackoverflow.com/a/18650828 */
 function formatBytes(bytes, decimals = 2) {
   if (!+bytes) return "0 Bytes";
 
@@ -46,31 +45,7 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
-async function update() {
-  const versionInput = document.getElementById("zig-version");
-
-  const url = new URL("https://releases.zigtools.org/v1/zls/select-version");
-  url.searchParams.set("zig_version", versionInput.value);
-  url.searchParams.set("compatibility", params["compatibility"] ?? "full");
-  const response = await fetch(url);
-  const json = await response.json();
-
-  if ("message" in json) {
-    versionInput.setCustomValidity(json.message);
-    document.getElementById("build-from-source-result").style.display = "none";
-    document.getElementById("prebuilt-binary-result").style.display = "none";
-    return;
-  } else {
-    versionInput.setCustomValidity("");
-  }
-
-  if (!("version" in json) || !("date" in json)) {
-    alert("418 I'm a teapot");
-    document.getElementById("build-from-source-result").style.display = "none";
-    document.getElementById("prebuilt-binary-result").style.display = "none";
-    return;
-  }
-
+function createBinaryTable(json) {
   const heading = document.createElement("tr");
   for (const item of ["OS", "Arch", "Filename", "Signature", "Size"]) {
     const th = document.createElement("th");
@@ -129,15 +104,76 @@ async function update() {
   table.appendChild(thead);
   table.appendChild(tbody);
 
-  document.getElementById("prebuilt-binary-table").innerHTML = table.outerHTML;
+  return table;
+}
+
+function displayZigVersionMessage(message) {
+  if (message) {
+    zigVersion.className = "invalid";
+    error.textContent = message;
+    error.className = "error active";
+  } else {
+    zigVersion.className = "valid";
+    error.textContent = "";
+    error.className = "error";
+  }
+}
+
+async function update() {
+  if (zigVersion.value.length === 0) return;
+
+  if (!zigVersionRegex.test(zigVersion.value)) {
+    displayZigVersionMessage("Invalid Zig Version!");
+    return false;
+  }
+
+  const buildFromSourceResult = document.getElementById(
+    "build-from-source-result"
+  );
+  const prebuiltBinaryResult = document.getElementById(
+    "prebuilt-binary-result"
+  );
+  const prebuiltBinaryTable = document.getElementById("prebuilt-binary-table");
+
+  const url = new URL("https://releases.zigtools.org/v1/zls/select-version");
+  url.searchParams.set("zig_version", zigVersion.value);
+  url.searchParams.set("compatibility", params["compatibility"] ?? "full");
+
+  const response = await fetch(url);
+  json = await response.json();
+
+  if ("error" in json) {
+    console.trace();
+    displayZigVersionMessage(`Internal Failure: ${json.error}`);
+    return false;
+  }
+
+  if ("message" in json) {
+    displayZigVersionMessage(json.message);
+    buildFromSourceResult.style.display = "none";
+    prebuiltBinaryResult.style.display = "none";
+    return;
+  } else {
+    displayZigVersionMessage();
+  }
+
+  if (!("version" in json) || !("date" in json)) {
+    alert("418 I'm a teapot");
+    buildFromSourceResult.style.display = "none";
+    prebuiltBinaryResult.style.display = "none";
+    return false;
+  }
+
+  const table = createBinaryTable(json);
+  prebuiltBinaryTable.innerHTML = table.outerHTML;
 
-  document.getElementById("build-from-source-result").style.display = "none";
-  document.getElementById("prebuilt-binary-result").style.display = "none";
+  buildFromSourceResult.style.display = "none";
+  prebuiltBinaryResult.style.display = "none";
   switch (params["compatibility"]) {
     default:
     case "full": {
-      document.getElementById("build-from-source-result").style.display = "";
-      
+      buildFromSourceResult.style.display = "";
+
       // `indexOf` returns `-1` when not found, how convenient...
       const tag = json.version.substring(json.version.indexOf("+") + 1);
 
@@ -149,12 +185,54 @@ git checkout ${tag}
 zig build -Doptimize=ReleaseSafe`;
     }
     case "only-runtime": {
-      document.getElementById("prebuilt-binary-result").style.display = "";
+      prebuiltBinaryResult.style.display = "";
       break;
     }
   }
 }
 
+window.addEventListener("load", () => {
+  updateDetails();
+
+  const isValid =
+    zigVersion.value.length === 0 || zigVersionRegex.test(zigVersion.value);
+  zigVersion.className = isValid ? "valid" : "invalid";
+});
+
+zigVersion.addEventListener("input", () => {
+  const isValid =
+    zigVersion.value.length === 0 || zigVersionRegex.test(zigVersion.value);
+  if (isValid) {
+    displayZigVersionMessage();
+  } else {
+    zigVersion.className = "invalid";
+  }
+});
+
+form.addEventListener("submit", (event) => {
+  const isValid =
+    zigVersion.value.length === 0 || zigVersionRegex.test(zigVersion.value);
+  if (!isValid) {
+    event.preventDefault();
+    displayZigVersionMessage("Invalid Zig Version!");
+    return false;
+  }
+  displayZigVersionMessage();
+
+  return true;
+});
+
+window.addEventListener("hashchange", () => {
+  updateDetails();
+  if (window.location.hash) {
+    document
+      .getElementById(window.location.hash.substring(1))
+      ?.scrollIntoView();
+  }
+});
+
+zigVersion.value = params["zig_version"] ?? "";
+
 if (params["zig_version"]) {
   update();
-}
+}
diff --git a/assets/style.css b/assets/style.css
@@ -155,6 +155,8 @@ li a {
 
 #content,
 #header > :not(nav) {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   align-self: center;
   box-sizing: border-box;
@@ -209,7 +211,7 @@ li a {
     --text-highlight-color: #eee;
     --link-color: #eee;
     --pre-background-color: #191919;
-    --pre-foreground-color: #eee;
+    --pre-foreground-color: #c8c8c8;
     --nav-background-color: #242424;
 
     --comment: hsl(270, 10%, 55%);

diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml
@@ -33,6 +33,7 @@
         <a href="https://github.com/zigtools/www.zigtools.org">Website</a>
         was made with
         <a href="https://github.com/kristoff-it/zine">Zine</a></p>
+      <!-- by someone who has no clue about web design -->
     </footer>
   </body>
 </html>
diff --git a/layouts/zls-install.shtml b/layouts/zls-install.shtml
@@ -2,15 +2,20 @@
 <title id="title" var="$page.title"></title>
 <head id="head">
   <style>
+    #content,
+    #header > :not(nav) {
+      max-width: min(58rem, 100vw);
+    }
+
     h1,
     h2 {
       align-self: center;
       text-align: center;
     }
 
     h1 {
-      margin-top: 1rem;
-      margin-bottom: 1rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
     }
 
     h3 {
@@ -34,12 +39,6 @@
       padding-bottom: 1rem;
     }
 
-    .tagline {
-      font-size: 1rem;
-      font-style: italic;
-      margin: 0.25rem 0;
-    }
-
     .vscode-banner {
       display: flex;
       width: fit-content;
@@ -68,7 +67,6 @@
     #prebuilt-binary-result {
       display: block;
       overflow: auto;
-      white-space: nowrap;
     }
 
     #prebuilt-binary-result pre {
@@ -102,32 +100,55 @@
       content: "+" !important;
     }
 
+    .form-input-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .form-button-container {
+      display: flex;
+    }
+
     form {
-      display:flex;
+      display: flex;
       flex-direction: column;
-      margin: 1rem 4rem;
-      gap: 0.5rem;
+      gap: 0.75rem;
+      margin-top: 2rem;
+      margin-left: auto;
+      margin-right: auto;
     }
 
     form input {
-      text-align: center;
       outline: none;
-      background-color: transparent;
+      text-align: center;
+      font-size: xx-large;
       border-width: 0;
       border-bottom-width: 3px;
-      padding: 0.5rem;
-      margin-top: 1.5rem;
-      font-size: xx-large;
 
+      background-color: transparent;
       color: #000;
       border-color: var(--zig-orange);
     }
 
+    form input.invalid {
+      border-color: red;
+    }
+
     form button {
-      flex: 1 1 0%;
-      padding: 0.5rem;
+      flex: 1 1 0;
+      padding: 0.75rem;
       border: 1px solid;
       border-color: #666;
+      font-size: large;
+    }
+
+    #zig-version-error {
+      background-color: var(--pre-background-color);
+      border-radius: 0 0 1rem 1rem;
+    }
+
+    #zig-version-error.active {
+      padding: 0.5rem 1rem;
     }
 
     @media (prefers-color-scheme: dark) {
@@ -159,23 +180,20 @@
         users only need the
         <a href="https://marketplace.visualstudio.com/items?itemName=ziglang.vscode-zig">official Zig Language extension</a>.
       </p>
-      <p class="tagline">No need to manually install Zig or ZLS.</p>
+      <p><em>No need to manually install Zig or ZLS.</em></p>
     </div>
   </div>
-  <form>
-    <input
-    type="text"
-    id="zig-version"
-    name="zig_version"
-    placeholder="What is your Zig Version?"
-    required
-  >
-    <!-- pattern="(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d\*)" -->
-    <div style="display: flex; gap: 0.5rem">
-      <button id="button-from-source" class="install-button" type="submit" name="compatibility" value="full">
+  <form name="ZLS Version Selection" aria-label="ZLS Version Selection">
+    <div class="form-input-container">
+      <label for="zig-version">Zig Version</label>
+      <input title="the Zig version you are using" type="text" id="zig-version" name="zig_version" required>
+      <span id="zig-version-error" aria-live="polite"></span>
+    </div>
+    <div class="form-button-container">
+      <button title="manually build ZLS from source" id="button-from-source" class="install-button" type="submit" name="compatibility" value="full">
         Build From Source
       </button>
-      <button id="button-binary" class="install-button" type="submit" name="compatibility" value="only-runtime">
+      <button title="download a prebuilt binary of ZLS" id="button-binary" class="install-button" type="submit" name="compatibility" value="only-runtime">
         Prebuilt Binary
       </button>
     </div>