From 4ef567ba41b7b9f83eb26d52128125b6837beb2f Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 15:01:55 +0200
Subject: [PATCH 01/11] feat: make help modal disappear if you click outside it

---
 lib/docs/main.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/lib/docs/main.js b/lib/docs/main.js
index 41a03322d9af..2bb796f49b4b 100644
--- a/lib/docs/main.js
+++ b/lib/docs/main.js
@@ -132,6 +132,12 @@ var zigAnalysis;
     location.hash = "#root";
   }
 
+  // make the modal disappear if you click outside it
+  domHelpModal.addEventListener("click", ev => {
+    if (ev.target.className == "help-modal")
+      domHelpModal.classList.add("hidden");
+  })
+
   window.addEventListener("hashchange", onHashChange, false);
   window.addEventListener("keydown", onWindowKeyDown, false);
   onHashChange();

From 6354851909749d9741d520ead2d1f9e517df3548 Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 15:05:58 +0200
Subject: [PATCH 02/11] fix: "dialog" -> "modal"

"Dialog" is the incorrect term here because a dialog is a separate window that still lets you use the app
but a modal is a window where you can't continue using the app until you close it.
---
 lib/docs/index.html | 11 +++++------
 lib/docs/main.js    |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/lib/docs/index.html b/lib/docs/index.html
index dbcb54288afd..5d6f3818639a 100644
--- a/lib/docs/index.html
+++ b/lib/docs/index.html
@@ -294,7 +294,6 @@
         padding: 1px 1em;
       }
 
-      /* help dialog */
       .help-modal {
         display: flex;
         width: 100%;
@@ -308,7 +307,7 @@
         backdrop-filter: blur(0.3em);
       }
 
-      .help-modal > .dialog {
+      .help-modal > .modal {
         max-width: 97vw;
         max-height: 97vh;
         overflow: auto;
@@ -707,12 +706,12 @@ <h2>Tests</h2>
         <div class="flex-filler"></div>
       </div>
     </div>
-    <div id="helpDialog" class="hidden">
+    <div id="helpModal" class="hidden">
       <div class="help-modal">
-        <div class="dialog">
+        <div class="modal">
           <h1>Keyboard Shortcuts</h1>
-          <dl><dt><kbd>?</kbd></dt><dd>Show this help dialog</dd></dl>
-          <dl><dt><kbd>Esc</kbd></dt><dd>Clear focus; close this dialog</dd></dl>
+          <dl><dt><kbd>?</kbd></dt><dd>Show this help modal</dd></dl>
+          <dl><dt><kbd>Esc</kbd></dt><dd>Clear focus; close this modal</dd></dl>
           <dl><dt><kbd>s</kbd></dt><dd>Focus the search field</dd></dl>
           <dl><dt><kbd>↑</kbd></dt><dd>Move up in search results</dd></dl>
           <dl><dt><kbd>↓</kbd></dt><dd>Move down in search results</dd></dl>
diff --git a/lib/docs/main.js b/lib/docs/main.js
index 2bb796f49b4b..55546ce056b0 100644
--- a/lib/docs/main.js
+++ b/lib/docs/main.js
@@ -48,7 +48,7 @@ var zigAnalysis;
   let domPrivDeclsBox = document.getElementById("privDeclsBox");
   let domTdZigVer = document.getElementById("tdZigVer");
   let domHdrName = document.getElementById("hdrName");
-  let domHelpModal = document.getElementById("helpDialog");
+  let domHelpModal = document.getElementById("helpModal");
 
   let searchTimer = null;
 

From df8cfb1273e7b99ff5de0164c676d291191a72c6 Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 15:09:26 +0200
Subject: [PATCH 03/11] feat: new search placeholder

This new search placeholder looks much nicer because it allows HTML inside it which
the `placeholder` attribute on `<input>`s doesn't allow.
I tested it for all kinds of cases and it seems to work pretty well.
---
 lib/docs/index.html | 17 ++++++++++-------
 lib/docs/main.js    | 12 ++++++++++++
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/lib/docs/index.html b/lib/docs/index.html
index 5d6f3818639a..48af4ab58512 100644
--- a/lib/docs/index.html
+++ b/lib/docs/index.html
@@ -190,11 +190,11 @@
         box-shadow: 0 0.3em 1em 0.125em var(--search-sh-color);
       }
 
-      .docs .search::placeholder {
-        font-size: 1rem;
-        font-family: var(--ui);
-        color: var(--tx-color);
-        opacity: 0.5;
+      #searchPlaceholder {
+        position: absolute;
+        pointer-events: none;
+        top: 5px;
+        left: 5px;
       }
 
       .docs a {
@@ -334,7 +334,7 @@
         margin-right: 0.5em;
       }
 
-      .help-modal kbd {
+      kbd {
         display: inline-block;
         padding: 0.3em 0.2em;
         font-size: 1.2em;
@@ -614,7 +614,10 @@ <h2><span>Zig Version</span></h2>
       <div class="flex-right">
         <div class="wrap">
           <section class="docs">
-            <input type="search" class="search" id="search" autocomplete="off" spellcheck="false" placeholder="`s` to search, `?` to see more options">
+            <div style="position: relative">
+              <span id="searchPlaceholder"><kbd>S</kbd> to search, <kbd>?</kbd> for more options</span>
+              <input type="search" class="search" id="search" autocomplete="off" spellcheck="false">
+            </div>
             <p id="status">Loading...</p>
             <div id="sectNav" class="hidden"><ul id="listNav"></ul></div>
             <div id="fnProto" class="hidden">
diff --git a/lib/docs/main.js b/lib/docs/main.js
index 55546ce056b0..ebbae537142f 100644
--- a/lib/docs/main.js
+++ b/lib/docs/main.js
@@ -49,6 +49,7 @@ var zigAnalysis;
   let domTdZigVer = document.getElementById("tdZigVer");
   let domHdrName = document.getElementById("hdrName");
   let domHelpModal = document.getElementById("helpModal");
+  const domSearchPlaceholder = document.getElementById("searchPlaceholder");
 
   let searchTimer = null;
 
@@ -103,6 +104,13 @@ var zigAnalysis;
   // let nodesToCallsMap = indexNodesToCalls();
 
   domSearch.addEventListener("keydown", onSearchKeyDown, false);
+  domSearch.addEventListener("focus", ev => {
+    domSearchPlaceholder.classList.add("hidden");
+  });
+  domSearch.addEventListener("blur", ev => {
+    if (domSearch.value.length == 0)
+      domSearchPlaceholder.classList.remove("hidden");
+  });
   domPrivDeclsBox.addEventListener(
     "change",
     function () {
@@ -2623,6 +2631,10 @@ var zigAnalysis;
     updateCurNav();
     if (domSearch.value !== curNavSearch) {
       domSearch.value = curNavSearch;
+      if (domSearch.value.length == 0)
+        domSearchPlaceholder.classList.remove("hidden");
+      else
+        domSearchPlaceholder.classList.add("hidden");
     }
     render();
     if (imFeelingLucky) {

From 2f0abe63d4d630583e2163779bd26aaad13e18ea Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 15:16:27 +0200
Subject: [PATCH 04/11] fix: disable search bar before loading

This fixes the new search placeholder not disappearing if you type before
it finished loading, and maybe some other things.
---
 lib/docs/index.html | 2 +-
 lib/docs/main.js    | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/docs/index.html b/lib/docs/index.html
index 48af4ab58512..7e8022556f80 100644
--- a/lib/docs/index.html
+++ b/lib/docs/index.html
@@ -616,7 +616,7 @@ <h2><span>Zig Version</span></h2>
           <section class="docs">
             <div style="position: relative">
               <span id="searchPlaceholder"><kbd>S</kbd> to search, <kbd>?</kbd> for more options</span>
-              <input type="search" class="search" id="search" autocomplete="off" spellcheck="false">
+              <input type="search" class="search" id="search" autocomplete="off" spellcheck="false" disabled>
             </div>
             <p id="status">Loading...</p>
             <div id="sectNav" class="hidden"><ul id="listNav"></ul></div>
diff --git a/lib/docs/main.js b/lib/docs/main.js
index ebbae537142f..dee8c8a611bd 100644
--- a/lib/docs/main.js
+++ b/lib/docs/main.js
@@ -51,6 +51,8 @@ var zigAnalysis;
   let domHelpModal = document.getElementById("helpModal");
   const domSearchPlaceholder = document.getElementById("searchPlaceholder");
 
+  domSearch.disabled = false;
+
   let searchTimer = null;
 
   let escapeHtmlReplacements = {

From ee72868f923eda2693c8ef624fa04f48606c06f1 Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 15:17:59 +0200
Subject: [PATCH 05/11] style: format

This is mostly manually formatted. I couldn't find a good HTML formatter for this file.
It also converts a bunch of tabs to spaces.
---
 lib/docs/index.html | 85 ++++++++++++++++++++++-----------------------
 1 file changed, 42 insertions(+), 43 deletions(-)

diff --git a/lib/docs/index.html b/lib/docs/index.html
index 7e8022556f80..2328719caf28 100644
--- a/lib/docs/index.html
+++ b/lib/docs/index.html
@@ -294,6 +294,7 @@
         padding: 1px 1em;
       }
 
+      /* help modal */
       .help-modal {
         display: flex;
         width: 100%;
@@ -351,12 +352,12 @@
         cursor: default;
       }
 
-	  #listFns dt {
-		  font-family: var(--mono);
-	  }
-	  .argBreaker {
-		  display: none;
-	  }
+      #listFns dt {
+        font-family: var(--mono);
+      }
+      .argBreaker {
+        display: none;
+      }
 
       /* tokens */
       .tok-kw {
@@ -390,7 +391,6 @@
 
       /* dark mode */
       @media (prefers-color-scheme: dark) {
-
         :root {
           --tx-color: #bbb;
           --bg-color: #111;
@@ -456,7 +456,6 @@
         .tok-type {
             color: #68f;
         }
-
       }
 
       @media only screen and (max-width: 750px) {
@@ -543,7 +542,7 @@
   <body class="canvas">
     <div class="banner">
       This is a beta autodoc build; expect bugs and missing information.
-      <a href="https://github.com/ziglang/zig/wiki/How-to-contribute-to-Autodoc">Report an Issue</a>, 
+      <a href="https://github.com/ziglang/zig/wiki/How-to-contribute-to-Autodoc">Report an Issue</a>,
       <a href="https://github.com/ziglang/zig/wiki/How-to-contribute-to-Autodoc">Contribute</a>,
       <a href="https://github.com/ziglang/zig/wiki/How-to-read-the-standard-library-source-code">Learn more about stdlib source code</a>.
     </div>
@@ -554,43 +553,43 @@
           <div class="logo">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 140">
             <g fill="#F7A41D">
-            	<g>
-            		<polygon points="46,22 28,44 19,30"/>
-            		<polygon points="46,22 33,33 28,44 22,44 22,95 31,95 20,100 12,117 0,117 0,22" shape-rendering="crispEdges"/>
-            		<polygon points="31,95 12,117 4,106"/>
-            	</g>
-            	<g>
-            		<polygon points="56,22 62,36 37,44"/>
-            		<polygon points="56,22 111,22 111,44 37,44 56,32" shape-rendering="crispEdges"/>
-            		<polygon points="116,95 97,117 90,104"/>
-            		<polygon points="116,95 100,104 97,117 42,117 42,95" shape-rendering="crispEdges"/>
-            		<polygon points="150,0 52,117 3,140 101,22"/>
-            	</g>
-            	<g>
-            		<polygon points="141,22 140,40 122,45"/>
-            		<polygon points="153,22 153,117 106,117 120,105 125,95 131,95 131,45 122,45 132,36 141,22" shape-rendering="crispEdges"/>
-            		<polygon points="125,95 130,110 106,117"/>
-            	</g>
+              <g>
+                <polygon points="46,22 28,44 19,30"/>
+                <polygon points="46,22 33,33 28,44 22,44 22,95 31,95 20,100 12,117 0,117 0,22" shape-rendering="crispEdges"/>
+                <polygon points="31,95 12,117 4,106"/>
+              </g>
+              <g>
+                <polygon points="56,22 62,36 37,44"/>
+                <polygon points="56,22 111,22 111,44 37,44 56,32" shape-rendering="crispEdges"/>
+                <polygon points="116,95 97,117 90,104"/>
+                <polygon points="116,95 100,104 97,117 42,117 42,95" shape-rendering="crispEdges"/>
+                <polygon points="150,0 52,117 3,140 101,22"/>
+              </g>
+              <g>
+                <polygon points="141,22 140,40 122,45"/>
+                <polygon points="153,22 153,117 106,117 120,105 125,95 131,95 131,45 122,45 132,36 141,22" shape-rendering="crispEdges"/>
+                <polygon points="125,95 130,110 106,117"/>
+              </g>
             </g>
             <style>
             #text { fill: #121212 }
             @media (prefers-color-scheme: dark) { #text { fill: #f2f2f2 } }
             </style>
             <g id="text">
-            	<g>
-            		<polygon points="260,22 260,37 229,40 177,40 177,22" shape-rendering="crispEdges"/>
-            		<polygon points="260,37 207,99 207,103 176,103 229,40 229,37"/>
-            		<polygon points="261,99 261,117 176,117 176,103 206,99" shape-rendering="crispEdges"/>
-            	</g>
-            	<rect x="272" y="22" shape-rendering="crispEdges" width="22" height="95"/>
-            	<g>
-            		<polygon points="394,67 394,106 376,106 376,81 360,70 346,67" shape-rendering="crispEdges"/>
-            		<polygon points="360,68 376,81 346,67"/>
-            		<path d="M394,106c-10.2,7.3-24,12-37.7,12c-29,0-51.1-20.8-51.1-48.3c0-27.3,22.5-48.1,52-48.1    c14.3,0,29.2,5.5,38.9,14l-13,15c-7.1-6.3-16.8-10-25.9-10c-17,0-30.2,12.9-30.2,29.5c0,16.8,13.3,29.6,30.3,29.6    c5.7,0,12.8-2.3,19-5.5L394,106z"/>
-            	</g>
+              <g>
+                <polygon points="260,22 260,37 229,40 177,40 177,22" shape-rendering="crispEdges"/>
+                <polygon points="260,37 207,99 207,103 176,103 229,40 229,37"/>
+                <polygon points="261,99 261,117 176,117 176,103 206,99" shape-rendering="crispEdges"/>
+              </g>
+              <rect x="272" y="22" shape-rendering="crispEdges" width="22" height="95"/>
+              <g>
+                <polygon points="394,67 394,106 376,106 376,81 360,70 346,67" shape-rendering="crispEdges"/>
+                <polygon points="360,68 376,81 346,67"/>
+                <path d="M394,106c-10.2,7.3-24,12-37.7,12c-29,0-51.1-20.8-51.1-48.3c0-27.3,22.5-48.1,52-48.1    c14.3,0,29.2,5.5,38.9,14l-13,15c-7.1-6.3-16.8-10-25.9-10c-17,0-30.2,12.9-30.2,29.5c0,16.8,13.3,29.6,30.3,29.6    c5.7,0,12.8-2.3,19-5.5L394,106z"/>
+              </g>
             </g>
             </svg>
-         </div>
+          </div>
           <div id="sectMainPkg" class="hidden">
             <h2><span>Main Package</span></h2>
             <ul class="packages">
@@ -605,10 +604,10 @@ <h2><span>Dependencies</span></h2>
             <h2><span>Zig Version</span></h2>
             <p class="str" id="tdZigVer"></p>
           </div>
-		  <div>
-			  <input id="privDeclsBox" type="checkbox"/>
-        <label for="privDeclsBox">Internal Doc Mode</label>
-		  </div>
+          <div>
+            <input id="privDeclsBox" type="checkbox"/>
+            <label for="privDeclsBox">Internal Doc Mode</label>
+          </div>
         </nav>
       </div>
       <div class="flex-right">
@@ -704,7 +703,7 @@ <h2>Tests</h2>
                 </table>
               </div>
             </div>
-		  </section>
+          </section>
         </div>
         <div class="flex-filler"></div>
       </div>

From beba29c24f33edcd603050ce65f2f3c358223aab Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 15:34:38 +0200
Subject: [PATCH 06/11] feat: make shadow of `<kbd>`s look nicer

---
 lib/docs/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/docs/index.html b/lib/docs/index.html
index 2328719caf28..67412bd7acb9 100644
--- a/lib/docs/index.html
+++ b/lib/docs/index.html
@@ -348,7 +348,7 @@
         border-bottom-color: #c6cbd1;
         border: solid 0.0625em;
         border-radius: 0.1875em;
-        box-shadow: inset 0 -0.0625em 0 #c6cbd1;
+        box-shadow: inset 0 -0.2em 0 #c6cbd1;
         cursor: default;
       }
 

From e921dd11361cf62128f4c6417f6d7313dd403455 Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 15:38:32 +0200
Subject: [PATCH 07/11] style: missing semi

---
 lib/docs/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/docs/main.js b/lib/docs/main.js
index dee8c8a611bd..77f2e2c55007 100644
--- a/lib/docs/main.js
+++ b/lib/docs/main.js
@@ -146,7 +146,7 @@ var zigAnalysis;
   domHelpModal.addEventListener("click", ev => {
     if (ev.target.className == "help-modal")
       domHelpModal.classList.add("hidden");
-  })
+  });
 
   window.addEventListener("hashchange", onHashChange, false);
   window.addEventListener("keydown", onWindowKeyDown, false);

From 2f5afe119412a53bc6cefb5fa395438231fce829 Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 15:53:20 +0200
Subject: [PATCH 08/11] let -> const for dom elements

These should never be reassigned.
---
 lib/docs/main.js | 92 ++++++++++++++++++++++++------------------------
 1 file changed, 46 insertions(+), 46 deletions(-)

diff --git a/lib/docs/main.js b/lib/docs/main.js
index 77f2e2c55007..bce1a69ff538 100644
--- a/lib/docs/main.js
+++ b/lib/docs/main.js
@@ -3,52 +3,52 @@
 var zigAnalysis;
 
 (function () {
-  let domStatus = document.getElementById("status");
-  let domSectNav = document.getElementById("sectNav");
-  let domListNav = document.getElementById("listNav");
-  let domSectMainPkg = document.getElementById("sectMainPkg");
-  let domSectPkgs = document.getElementById("sectPkgs");
-  let domListPkgs = document.getElementById("listPkgs");
-  let domSectTypes = document.getElementById("sectTypes");
-  let domListTypes = document.getElementById("listTypes");
-  let domSectTests = document.getElementById("sectTests");
-  let domListTests = document.getElementById("listTests");
-  let domSectNamespaces = document.getElementById("sectNamespaces");
-  let domListNamespaces = document.getElementById("listNamespaces");
-  let domSectErrSets = document.getElementById("sectErrSets");
-  let domListErrSets = document.getElementById("listErrSets");
-  let domSectFns = document.getElementById("sectFns");
-  let domListFns = document.getElementById("listFns");
-  let domSectFields = document.getElementById("sectFields");
-  let domListFields = document.getElementById("listFields");
-  let domSectGlobalVars = document.getElementById("sectGlobalVars");
-  let domListGlobalVars = document.getElementById("listGlobalVars");
-  let domSectValues = document.getElementById("sectValues");
-  let domListValues = document.getElementById("listValues");
-  let domFnProto = document.getElementById("fnProto");
-  let domFnProtoCode = document.getElementById("fnProtoCode");
-  let domSectParams = document.getElementById("sectParams");
-  let domListParams = document.getElementById("listParams");
-  let domTldDocs = document.getElementById("tldDocs");
-  let domSectFnErrors = document.getElementById("sectFnErrors");
-  let domListFnErrors = document.getElementById("listFnErrors");
-  let domTableFnErrors = document.getElementById("tableFnErrors");
-  let domFnErrorsAnyError = document.getElementById("fnErrorsAnyError");
-  let domFnExamples = document.getElementById("fnExamples");
-  // let domListFnExamples = (document.getElementById("listFnExamples"));
-  let domFnNoExamples = document.getElementById("fnNoExamples");
-  let domDeclNoRef = document.getElementById("declNoRef");
-  let domSearch = document.getElementById("search");
-  let domSectSearchResults = document.getElementById("sectSearchResults");
-
-  let domListSearchResults = document.getElementById("listSearchResults");
-  let domSectSearchNoResults = document.getElementById("sectSearchNoResults");
-  let domSectInfo = document.getElementById("sectInfo");
-  // let domTdTarget = (document.getElementById("tdTarget"));
-  let domPrivDeclsBox = document.getElementById("privDeclsBox");
-  let domTdZigVer = document.getElementById("tdZigVer");
-  let domHdrName = document.getElementById("hdrName");
-  let domHelpModal = document.getElementById("helpModal");
+  const domStatus = document.getElementById("status");
+  const domSectNav = document.getElementById("sectNav");
+  const domListNav = document.getElementById("listNav");
+  const domSectMainPkg = document.getElementById("sectMainPkg");
+  const domSectPkgs = document.getElementById("sectPkgs");
+  const domListPkgs = document.getElementById("listPkgs");
+  const domSectTypes = document.getElementById("sectTypes");
+  const domListTypes = document.getElementById("listTypes");
+  const domSectTests = document.getElementById("sectTests");
+  const domListTests = document.getElementById("listTests");
+  const domSectNamespaces = document.getElementById("sectNamespaces");
+  const domListNamespaces = document.getElementById("listNamespaces");
+  const domSectErrSets = document.getElementById("sectErrSets");
+  const domListErrSets = document.getElementById("listErrSets");
+  const domSectFns = document.getElementById("sectFns");
+  const domListFns = document.getElementById("listFns");
+  const domSectFields = document.getElementById("sectFields");
+  const domListFields = document.getElementById("listFields");
+  const domSectGlobalVars = document.getElementById("sectGlobalVars");
+  const domListGlobalVars = document.getElementById("listGlobalVars");
+  const domSectValues = document.getElementById("sectValues");
+  const domListValues = document.getElementById("listValues");
+  const domFnProto = document.getElementById("fnProto");
+  const domFnProtoCode = document.getElementById("fnProtoCode");
+  const domSectParams = document.getElementById("sectParams");
+  const domListParams = document.getElementById("listParams");
+  const domTldDocs = document.getElementById("tldDocs");
+  const domSectFnErrors = document.getElementById("sectFnErrors");
+  const domListFnErrors = document.getElementById("listFnErrors");
+  const domTableFnErrors = document.getElementById("tableFnErrors");
+  const domFnErrorsAnyError = document.getElementById("fnErrorsAnyError");
+  const domFnExamples = document.getElementById("fnExamples");
+  // const domListFnExamples = (document.getElementById("listFnExamples"));
+  const domFnNoExamples = document.getElementById("fnNoExamples");
+  const domDeclNoRef = document.getElementById("declNoRef");
+  const domSearch = document.getElementById("search");
+  const domSectSearchResults = document.getElementById("sectSearchResults");
+
+  const domListSearchResults = document.getElementById("listSearchResults");
+  const domSectSearchNoResults = document.getElementById("sectSearchNoResults");
+  const domSectInfo = document.getElementById("sectInfo");
+  // const domTdTarget = (document.getElementById("tdTarget"));
+  const domPrivDeclsBox = document.getElementById("privDeclsBox");
+  const domTdZigVer = document.getElementById("tdZigVer");
+  const domHdrName = document.getElementById("hdrName");
+  const domHelpModal = document.getElementById("helpModal");
   const domSearchPlaceholder = document.getElementById("searchPlaceholder");
 
   domSearch.disabled = false;

From 60b04b0988cdedb4bb9e1c67d0775a317510b703 Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 16:00:53 +0200
Subject: [PATCH 09/11] style: some more formatting

---
 lib/docs/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/docs/index.html b/lib/docs/index.html
index 67412bd7acb9..848b13070547 100644
--- a/lib/docs/index.html
+++ b/lib/docs/index.html
@@ -27,7 +27,7 @@
         --help-sh-color: rgba(0, 0, 0, 0.75);
       }
 
-      html, body { margin: 0; padding:0; height: 100%; }
+      html, body { margin: 0; padding: 0; height: 100%; }
 
       a {
         text-decoration: none;
@@ -207,9 +207,9 @@
 
       .docs pre {
         font-family: var(--mono);
-        font-size:1em;
-        background-color:#F5F5F5;
-        padding:1em;
+        font-size: 1em;
+        background-color: #F5F5F5;
+        padding: 1em;
         overflow-x: auto;
       }
 
@@ -225,7 +225,7 @@
         border-bottom: 0.0625rem dashed;
       }
 
-      .docs  h2 {
+      .docs h2 {
         font-size: 1.3em;
         margin: 0.5em 0;
         padding: 0;

From 943f4eb515ec03499cf7b37d80b964e15502bfc8 Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 16:07:32 +0200
Subject: [PATCH 10/11] fix: use brighter bg color for help modal in light mode

You can see this issue in the video.
---
 lib/docs/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/docs/index.html b/lib/docs/index.html
index 848b13070547..c506eac3dd95 100644
--- a/lib/docs/index.html
+++ b/lib/docs/index.html
@@ -25,6 +25,7 @@
         --search-bg-color-focus: #ffffff;
         --search-sh-color: rgba(0, 0, 0, 0.18);
         --help-sh-color: rgba(0, 0, 0, 0.75);
+        --help-bg-color: #aaa;
       }
 
       html, body { margin: 0; padding: 0; height: 100%; }
@@ -314,7 +315,7 @@
         overflow: auto;
         font-size: 1rem;
         color: #fff;
-        background-color: #333;
+        background-color: var(--help-bg-color);
         border: 0.125rem solid #000;
         box-shadow: 0 0.5rem 2.5rem 0.3rem var(--help-sh-color);
       }
@@ -407,6 +408,7 @@
           --search-bg-color-focus: #000;
           --search-sh-color: rgba(255, 255, 255, 0.28);
           --help-sh-color: rgba(142, 142, 142, 0.5);
+          --help-bg-color: #333;
         }
 
         .docs pre {

From ff6d2e632f8191ae7cbb048770ef2ecff00f72c7 Mon Sep 17 00:00:00 2001
From: r00ster91 <r00ster91@proton.me>
Date: Sat, 6 Aug 2022 19:45:50 +0200
Subject: [PATCH 11/11] fix: cleanup recent changes

---
 lib/docs/main.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/lib/docs/main.js b/lib/docs/main.js
index 3b5a907536f1..f171326b2ea0 100644
--- a/lib/docs/main.js
+++ b/lib/docs/main.js
@@ -2768,7 +2768,7 @@ var zigAnalysis;
                 });
               }
 
-              // Generic fun/ction
+              // Generic function
               if (value.kind == typeKinds.Fn && value.generic_ret != null) {
                 let resolvedVal = resolveValue({ expr: value.generic_ret });
                 if ("type" in resolvedVal.expr) {
@@ -3362,12 +3362,11 @@ var zigAnalysis;
         return operatorCompare(a.decl.name, b.decl.name);
       });
 
-
-      var searchTrimmed = false
-      var searchTrimResultsMaxItems = 200
+      let searchTrimmed = false;
+      const searchTrimResultsMaxItems = 200;
       if (searchTrimResults && matchedItems.length > searchTrimResultsMaxItems) {
-          matchedItems = matchedItems.slice(0, searchTrimResultsMaxItems)
-          searchTrimmed = true
+        matchedItems = matchedItems.slice(0, searchTrimResultsMaxItems);
+        searchTrimmed = true;
       }
 
       // Build up the list of search results