Doc search improvements (#24567)

- `/` is now a hotkey to jump to the search
- Search results now are in line with the page (previously on small
screens it would be off centre)
- Jumping to a search result inside the page or via TOC will now hide
the search results (previously the results got in the way)

Example site here: https://tranquil-scone-c159b6.netlify.app/main.html

doc/nimdoc.css

@@ -770,11 +770,10 @@ div.topic {
 
 div.search_results {
   background-color: var(--third-background);
-  margin: 3vh 5vw;
   padding: 1em;
   border: 1px solid #4d4d4d;
-  position: fixed;
-  top: 10px;
+  position: sticky;
+  top: 1em;
   isolation: isolate;
   max-width: calc(100vw - 6em);
   z-index: 1;

nimdoc/testproject/expected/nimdoc.out.css

@@ -770,11 +770,10 @@ div.topic {
 
 div.search_results {
   background-color: var(--third-background);
-  margin: 3vh 5vw;
   padding: 1em;
   border: 1px solid #4d4d4d;
-  position: fixed;
-  top: 10px;
+  position: sticky;
+  top: 1em;
   isolation: isolate;
   max-width: calc(100vw - 6em);
   z-index: 1;

tools/dochack/dochack.nim

@@ -303,25 +303,49 @@ var
   timer: Timeout
   loadIndexFut: Future[void] = nil
 
+proc hideSearch() =
+  ## hides the search results element
+  # If its nil, then results haven't been shown anyways
+  if not oldToc.isNil:
+    replaceById("tocRoot", oldToc)
+
+proc runSearch() =
+  ## Runs a search and shows the results in the page
+  let elem = document.getElementById("searchInput")
+  let value = elem.value
+  if value != "":
+    if oldtoc.isNil:
+      oldtoc = document.getElementById("tocRoot")
+    let results = dosearch(value)
+    replaceById("tocRoot", results)
+  else:
+    hideSearch()
+
 proc search*() {.exportc.} =
-  proc wrapper() =
-    let elem = document.getElementById("searchInput")
-    let value = elem.value
-    if value.len != 0:
-      if oldtoc.isNil:
-        oldtoc = document.getElementById("tocRoot")
-      let results = dosearch(value)
-      replaceById("tocRoot", results)
-    elif not oldtoc.isNil:
-      replaceById("tocRoot", oldtoc)
   # Start loading index as soon as user starts typing.
   # Will only be loaded the once anyways
   if loadIndexFut == nil:
     loadIndexFut = loadIndex()
     # Run wrapper once loaded so we don't miss the users query
-    discard loadIndexFut.then(wrapper)
+    discard loadIndexFut.then(runSearch)
   if timer != nil: clearTimeout(timer)
-  timer = setTimeout(wrapper, 400)
+  timer = setTimeout(runSearch, 400)
+
+# Register `/` hotkey to jump to search
+window.addEventListener("keypress") do (e: Event):
+  if KeyboardEvent(e).key == "/":
+    e.preventDefault()
+    let searchElem = document.getElementById("searchInput")
+    searchElem.focus()
+    searchElem.parentElement.scrollIntoView()
+
+    # Run search, so results are shown again if user is jumping back to
+    # a partial search
+    runSearch()
+
+# Hide the search results when we jump around the page so we can read the page
+window.addEventListener("hashchange") do (e: Event):
+  hideSearch()
 
 proc copyToClipboard*() {.exportc.} =
     {.emit: """
@@ -331,23 +355,23 @@ proc copyToClipboard*() {.exportc.} =
       const allPreTags = document.querySelectorAll("pre:not(.line-nums)")
 
       allPreTags.forEach((e) => {
-      
+
           const div = document.createElement("div")
           div.classList.add("copyToClipBoard")
-    
+
           const preTag = document.createElement("pre")
           preTag.innerHTML = e.innerHTML
-    
+
           const button = document.createElement("button")
-          button.value = e.textContent.replace('...', '') 
+          button.value = e.textContent.replace('...', '')
           button.classList.add("copyToClipBoardBtn")
           button.style.cursor = "pointer"
-    
+
           div.appendChild(preTag)
           div.appendChild(button)
-    
+
           e.outerHTML = div.outerHTML
-      
+
       })
     }
 
@@ -372,7 +396,7 @@ proc copyToClipboard*() {.exportc.} =
             e.target.nextElementSibling.style.setProperty("--clipboard-image", "var(--clipboard-image-normal)")
         }
     })
-    
+
     window.addEventListener("DOMContentLoaded", updatePreTags)
 
     """