From 17b12bbceddcb3f0a036035feddc35e3e4b64cb7 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 15 May 2024 13:46:17 -0400
Subject: [PATCH 01/37] add search icon

---
 static/assets/search.svg | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 static/assets/search.svg

diff --git a/static/assets/search.svg b/static/assets/search.svg
new file mode 100644
index 0000000000..ad0c592403
--- /dev/null
+++ b/static/assets/search.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+    <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+</svg>
\ No newline at end of file

From 8ec45158756aa0b9ed17479a9aa8c2e52c56d3ed Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Sun, 26 May 2024 21:12:54 -0400
Subject: [PATCH 02/37] on second thought, hard-code the svg.

---
 sass/components/_search.scss |  5 +++++
 sass/site.scss               |  1 +
 static/assets/search.svg     |  4 ----
 templates/layouts/base.html  |  4 ++++
 templates/macros/search.html | 14 ++++++++++++++
 5 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 sass/components/_search.scss
 delete mode 100644 static/assets/search.svg
 create mode 100644 templates/macros/search.html

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
new file mode 100644
index 0000000000..f64f3964ef
--- /dev/null
+++ b/sass/components/_search.scss
@@ -0,0 +1,5 @@
+.search__icon {
+  height: 1em;
+  fill: $default-color;
+  aspect-ratio: 1/1;
+}
diff --git a/sass/site.scss b/sass/site.scss
index 1f9f0e089e..3e0f6429e4 100644
--- a/sass/site.scss
+++ b/sass/site.scss
@@ -45,6 +45,7 @@
 @import "components/on-this-page";
 @import "components/page-with-menu";
 @import "components/pr-list";
+@import "components/search";
 @import "components/sponsors";
 @import "components/syntax-theme";
 @import "components/tree-menu";
diff --git a/static/assets/search.svg b/static/assets/search.svg
deleted file mode 100644
index ad0c592403..0000000000
--- a/static/assets/search.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-    <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
-</svg>
\ No newline at end of file
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index b109aceaad..74075af571 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -1,4 +1,5 @@
 {% import "macros/header.html" as header_macros %}
+{% import "macros/search.html" as search %}
 {% import "macros/public_draft.html" as public_draft %}
 
 {# Shortcut to get the section/page. This variable will have a value except in some special pages like `404.html`. #}
@@ -162,6 +163,9 @@
                 {% block mobile_page_menu %}{% endblock mobile_page_menu %}
               </div>
               <ul class="main-menu__menu">
+                <li class="main-menu__entry">
+                  {{ search::search_button() }}
+                </li>
                 {{ header_macros::header_item(name="Getting Started", path="/learn/quick-start/getting-started",
                                 extra_class="main-menu__entry--getting-started", current_path=current_path) }}
                 {{ header_macros::header_item(name="Learn", current_path=current_path) }}
diff --git a/templates/macros/search.html b/templates/macros/search.html
new file mode 100644
index 0000000000..6961cc7c03
--- /dev/null
+++ b/templates/macros/search.html
@@ -0,0 +1,14 @@
+
+{% macro search_button(text="Search All of Bevy...") %}
+<button class="search search__button">
+  {{ search::icon() }}
+  <span> {{ text }} </span>
+</button>
+{% endmacro %}
+
+{% macro icon() %}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="search__icon">
+  <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+</svg>
+{% endmacro %}

From 46cc43ceb177ffa98fb30fad657855fcc70ec7ea Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 15 May 2024 14:24:17 -0400
Subject: [PATCH 03/37] add search button to top bar

---
 sass/components/_main-menu.scss |  3 +++
 sass/components/_search.scss    | 13 +++++++++----
 templates/layouts/base.html     |  4 ++--
 templates/macros/search.html    | 19 ++++++++++---------
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss
index 69c4a5a3e0..7c330f1a08 100644
--- a/sass/components/_main-menu.scss
+++ b/sass/components/_main-menu.scss
@@ -28,6 +28,9 @@
 
     &:hover {
       color: $color-blue;
+      svg {
+        fill: $color-blue; // (2024-05-15) only actually used by search button
+      }
     }
 
     &--active {
diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index f64f3964ef..2ddcc821ed 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -1,5 +1,10 @@
-.search__icon {
-  height: 1em;
-  fill: $default-color;
-  aspect-ratio: 1/1;
+.search-button {
+  // reset <button> defaults
+  border: none;
+  background: none;
+  &__svg {
+    height: 1em;
+    fill: $default-color;
+    aspect-ratio: 1/1;
+  }
 }
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 74075af571..7829805d05 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -1,5 +1,5 @@
 {% import "macros/header.html" as header_macros %}
-{% import "macros/search.html" as search %}
+{% import "macros/search.html" as search_button %}
 {% import "macros/public_draft.html" as public_draft %}
 
 {# Shortcut to get the section/page. This variable will have a value except in some special pages like `404.html`. #}
@@ -164,7 +164,7 @@
               </div>
               <ul class="main-menu__menu">
                 <li class="main-menu__entry">
-                  {{ search::search_button() }}
+                  {{ search::search_button(icon=true, class="main-menu__link") }}
                 </li>
                 {{ header_macros::header_item(name="Getting Started", path="/learn/quick-start/getting-started",
                                 extra_class="main-menu__entry--getting-started", current_path=current_path) }}
diff --git a/templates/macros/search.html b/templates/macros/search.html
index 6961cc7c03..b50a626508 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -1,14 +1,15 @@
-
-{% macro search_button(text="Search All of Bevy...") %}
-<button class="search search__button">
-  {{ search::icon() }}
-  <span> {{ text }} </span>
-</button>
-{% endmacro %}
-
 {% macro icon() %}
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="search__icon">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="search-button__svg">
   <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
   <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
 </svg>
 {% endmacro %}
+
+{% macro search_button(icon=false, text="Search Bevy...", class="") %}
+<button class="search-button {{ class }}" aria-label="{{ text }}">
+  {{ search::icon() }}
+  {% if not icon %}
+  <span> {{ text }} </span>
+  {% endif %}
+</button>
+{% endmacro %}

From c3177d1fd485bb439d16ae3a6631be3ef8fd2519 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 15 May 2024 14:25:33 -0400
Subject: [PATCH 04/37] rename icon() to search_icon()

---
 templates/macros/search.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/macros/search.html b/templates/macros/search.html
index b50a626508..8dc2f20f5f 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -1,4 +1,4 @@
-{% macro icon() %}
+{% macro search_icon() %}
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="search-button__svg">
   <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
   <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
@@ -7,7 +7,7 @@
 
 {% macro search_button(icon=false, text="Search Bevy...", class="") %}
 <button class="search-button {{ class }}" aria-label="{{ text }}">
-  {{ search::icon() }}
+  {{ search::search_icon() }}
   {% if not icon %}
   <span> {{ text }} </span>
   {% endif %}

From caa443077e4d4e0820d7b08ddc3c213f0e45e8d3 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 15 May 2024 15:38:51 -0400
Subject: [PATCH 05/37] styling i'm vaguely happy with

---
 sass/components/_search.scss | 47 ++++++++++++++++++++++++++++++++++++
 templates/layouts/base.html  |  3 ++-
 templates/macros/search.html | 47 +++++++++++++++++++++++++++++++++++-
 3 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 2ddcc821ed..340ad06c0c 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -2,9 +2,56 @@
   // reset <button> defaults
   border: none;
   background: none;
+
   &__svg {
     height: 1em;
     fill: $default-color;
     aspect-ratio: 1/1;
   }
 }
+
+#search-dialog {
+  $highlight: $color-pink;
+  width: min(80ch, 90%);
+  max-height: 80vh;
+  border: none;
+  background-color: transparent;
+
+  &::backdrop {
+    background-color: rgba($color-grey-800, 0.7);
+  }
+
+  .wrapper {
+    padding: 1em;
+    border: 2px solid $highlight;
+    border-radius: $border-radius;
+    background-color: $color-grey-900;
+    aspect-ratio: 3/2;
+
+    form {
+      $input-height: 2em;
+      display: flex;
+      gap: 0.5em;
+      align-items: center;
+      padding: 0.5em;
+
+      input {
+        width: 100%;
+        outline: none;
+        border: none;
+        font-size: $input-height;
+        background-color: transparent;
+        border-radius: 0;
+      }
+
+      label svg {
+        height: $input-height;
+        fill: $highlight;
+      }
+    }
+
+    .results {
+      min-height: 20ch;
+    }
+  }
+}
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 7829805d05..d52644d122 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -1,5 +1,5 @@
 {% import "macros/header.html" as header_macros %}
-{% import "macros/search.html" as search_button %}
+{% import "macros/search.html" as search %}
 {% import "macros/public_draft.html" as public_draft %}
 
 {# Shortcut to get the section/page. This variable will have a value except in some special pages like `404.html`. #}
@@ -261,5 +261,6 @@
       }
     }
     </script>
+    {{ search::search_dialog() }}
   </body>
 </html>
diff --git a/templates/macros/search.html b/templates/macros/search.html
index 8dc2f20f5f..5e222aaa24 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -6,10 +6,55 @@
 {% endmacro %}
 
 {% macro search_button(icon=false, text="Search Bevy...", class="") %}
-<button class="search-button {{ class }}" aria-label="{{ text }}">
+<button class="search-button {{ class }}" aria-label="{{ text }}" onclick="document.getElementById('search-dialog').showModal()">
   {{ search::search_icon() }}
   {% if not icon %}
   <span> {{ text }} </span>
   {% endif %}
 </button>
 {% endmacro %}
+
+{% macro search_dialog() %}
+<dialog id="search-dialog">
+  <div style="display: flex; flex-direction: column; height: 100%;">
+    <div class="wrapper" style="flex-grow: 1;">
+      <form>
+        <label>
+          {{ search::search_icon() }}
+        </label>
+        <input
+          id="search-dialog__input"
+          placeholder="Search all of Bevy..."
+          autofocus
+        >
+      </form>
+      <div class="search-what">
+        <ul>
+          <li>Everything</li>
+          <li>Quick Start</li>
+          <li>The Book</li>
+          <li>Assets</li>
+          <li>Examples</li>
+        </ul>
+      </div>
+      <div class="results" data-results="no-recent-searches">
+        <div class="no-recent-searches">
+          No Recent Searches...
+        </div>
+        <ul class="recent-searches"></ul>
+        <ul class="search-results"></ul>
+      </div>
+    </div>
+    <aside class="tip" aria-label="tip" style="display: flex; padding-top: 0.5em;">
+      <div style="margin-inline: auto">
+        <b>Tip!</b> (I'll write a script to pick a random one later)
+        <ul class="display:none">
+          <li>Open this dialog with <kbd>Ctrl+K</kbd></li>
+          <li>some second thing</li>
+          <li>some third thing</li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</dialog>
+{% endmacro %}

From a19fa3492405bbd891597c7ad8bb7eac961a9ea1 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 15 May 2024 17:49:58 -0400
Subject: [PATCH 06/37] more stuff but still no script

i don't have to write a real commit message because it's gonna get
squashed anyway
---
 .../generate_wasm_examples.sh                 |  2 +-
 sass/components/_search.scss                  | 53 +++++++++++--------
 templates/macros/search.html                  | 23 +++-----
 3 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/generate-wasm-examples/generate_wasm_examples.sh b/generate-wasm-examples/generate_wasm_examples.sh
index 304eb47cda..53a45da394 100755
--- a/generate-wasm-examples/generate_wasm_examples.sh
+++ b/generate-wasm-examples/generate_wasm_examples.sh
@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 echo Generating WASM example list...
 
diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 340ad06c0c..33a902e84e 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -21,37 +21,44 @@
     background-color: rgba($color-grey-800, 0.7);
   }
 
-  .wrapper {
+  .search-dialog__inner {
+    flex-grow: 1;
     padding: 1em;
     border: 2px solid $highlight;
     border-radius: $border-radius;
     background-color: $color-grey-900;
     aspect-ratio: 3/2;
+  }
 
-    form {
-      $input-height: 2em;
-      display: flex;
-      gap: 0.5em;
-      align-items: center;
-      padding: 0.5em;
-
-      input {
-        width: 100%;
-        outline: none;
-        border: none;
-        font-size: $input-height;
-        background-color: transparent;
-        border-radius: 0;
-      }
-
-      label svg {
-        height: $input-height;
-        fill: $highlight;
-      }
+  form {
+    $input-height: 2em;
+    display: flex;
+    gap: 0.5em;
+    align-items: center;
+    margin-bottom: 1em;
+
+    input {
+      width: 100%;
+      outline: none;
+      border: none;
+      font-size: $input-height;
+      background-color: transparent;
+      border-radius: 0;
     }
 
-    .results {
-      min-height: 20ch;
+    label svg {
+      height: $input-height;
+      fill: $highlight;
+    }
+  }
+
+  .search-dialog__recent {
+    &__none {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 5em;
+      color: $subtitle-color;
     }
   }
 }
diff --git a/templates/macros/search.html b/templates/macros/search.html
index 5e222aaa24..c016e55971 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -17,9 +17,9 @@
 {% macro search_dialog() %}
 <dialog id="search-dialog">
   <div style="display: flex; flex-direction: column; height: 100%;">
-    <div class="wrapper" style="flex-grow: 1;">
+    <div class="search-dialog__inner">
       <form>
-        <label>
+        <label aria-label="Search all of Bevy..." for="search-dialog__input">
           {{ search::search_icon() }}
         </label>
         <input
@@ -28,24 +28,17 @@
           autofocus
         >
       </form>
-      <div class="search-what">
+      <div class="search-dialog__recent">
         <ul>
-          <li>Everything</li>
-          <li>Quick Start</li>
-          <li>The Book</li>
-          <li>Assets</li>
-          <li>Examples</li>
         </ul>
-      </div>
-      <div class="results" data-results="no-recent-searches">
-        <div class="no-recent-searches">
-          No Recent Searches...
+        <div class="search-dialog__recent__none">
+          <!-- hidden by script if you have any recent searches, or if you type anything -->
+          <em>&mdash; No recent searches &mdash;</em>
         </div>
-        <ul class="recent-searches"></ul>
-        <ul class="search-results"></ul>
       </div>
+      <div class="search-dialog__results"></div>
     </div>
-    <aside class="tip" aria-label="tip" style="display: flex; padding-top: 0.5em;">
+    <aside class="search-dialog__tip" aria-label="tip" style="display: flex; padding-top: 0.5em;">
       <div style="margin-inline: auto">
         <b>Tip!</b> (I'll write a script to pick a random one later)
         <ul class="display:none">

From 4fc633d98a2f3f61b84db104ea15a3ddaceca3ed Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 15 May 2024 17:54:38 -0400
Subject: [PATCH 07/37] some comments about when things are hidden

---
 templates/macros/search.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/templates/macros/search.html b/templates/macros/search.html
index c016e55971..a15a06d510 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -28,11 +28,12 @@
           autofocus
         >
       </form>
-      <div class="search-dialog__recent">
+      <div class="search-dialog__recent" aria-label="Recent Searches">
+        <!-- hidden by script upon entering anything -->
         <ul>
         </ul>
         <div class="search-dialog__recent__none">
-          <!-- hidden by script if you have any recent searches, or if you type anything -->
+          <!-- hidden by script if you have any recent searches -->
           <em>&mdash; No recent searches &mdash;</em>
         </div>
       </div>

From a3922fe1344a0fa9aa6f6507517b50f2765dd9c7 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 15 May 2024 18:43:07 -0400
Subject: [PATCH 08/37] add history and tip randomization

---
 sass/components/_search.scss | 12 ++++++
 static/search.js             | 84 ++++++++++++++++++++++++++++++++++++
 templates/layouts/base.html  |  1 +
 templates/macros/search.html | 18 +++++---
 4 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 static/search.js

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 33a902e84e..c0de948137 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -61,4 +61,16 @@
       color: $subtitle-color;
     }
   }
+
+  .search-dialog__tip ul {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    li {
+      display: none;
+    }
+    li[data-chosen=true] {
+      display: inline;
+    }
+  }
 }
diff --git a/static/search.js b/static/search.js
new file mode 100644
index 0000000000..0fb4d4a490
--- /dev/null
+++ b/static/search.js
@@ -0,0 +1,84 @@
+const SEARCH_HISTORY_LOCALSTORAGE_KEY = "search_history"
+const SEARCH_HISTORY_MAX = 5;
+
+/**
+ * open the search dialog. no-op if already open.
+ */
+function search_open() {
+    document.getElementById("search-dialog").showModal();
+    search_history_show();
+    search_tip();
+}
+
+/**
+ * get history from localStorage
+ * clears history and returns [] if anything goes wrong
+ * @returns {string[]}
+ */
+function search_history_get() {
+    let history = localStorage.getItem(SEARCH_HISTORY_LOCALSTORAGE_KEY) ?? "[]";
+    try {
+        history = JSON.parse(history);
+    } catch {
+        console.warn(`Expected localStorage ${SEARCH_HISTORY_LOCALSTORAGE_KEY} to parse as json, but it was`, history, "clearing.");
+        localStorage.removeItem(SEARCH_HISTORY_LOCALSTORAGE_KEY);
+        return [];
+    }
+    console.trace("history from localStorage:", history)
+    if (!Array.isArray(history)) {
+        console.warn(`Expected localStorage ${SEARCH_HISTORY_LOCALSTORAGE_KEY} to be an array, but it was`, history, "clearing.")
+        localStorage.removeItem(SEARCH_HISTORY_LOCALSTORAGE_KEY);
+        return [];
+    }
+    return history;
+}
+
+/**
+ * add `search` to history in localStorage. does not update #search-dialog. returns the new history array.
+ * @param {string} search 
+ * @returns {string[]}
+ */
+function search_history_push(search) {
+    let history = search_history_get();
+    history.splice(0, 0, search);
+    if (history.length > SEARCH_HISTORY_MAX) {
+        history.pop()
+    }
+    localStorage.setItem(SEARCH_HISTORY_LOCALSTORAGE_KEY, JSON.stringify(history));
+    return history
+}
+
+/**
+ * gets search history from localStorage and updates the list in #search-dialog
+ */
+function search_history_show() {
+    let history = search_history_get();
+    let $parent = document.getElementById("search-dialog").querySelector(".search-dialog__recent");
+    let $none = $parent.querySelector(".search-dialog__recent__none");
+    let $some = $parent.querySelector(".search-dialog__recent__some");
+    let $list = $some.querySelector("ul");
+    if (history.length == 0) {
+        $some.style.display = "none";
+        $none.style.display = null;
+    } else {
+        $none.style.display = "none";
+        $some.style.display = null;
+        $list.innerHTML = ""; // remove children
+        history.forEach(item => {
+            let li = document.createElement("li");
+            li.innerText = item;
+            $list.appendChild(li)
+        });
+    }
+}
+
+/**
+ * show a new search dialog tip
+ */
+function search_tip() {
+    let $list = document.querySelector("#search-dialog aside ul");
+    let length = $list.children.length;
+    let choice = Math.floor(Math.random() * length);
+    console.trace("chose tip", choice);
+    Array.from($list.children).forEach((n, i) => n.setAttribute("data-chosen", i==choice));
+}
\ No newline at end of file
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index d52644d122..0f20b054b5 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -87,6 +87,7 @@
     <link rel="stylesheet" href="/site.css" />
     <link href="/atom.xml" rel="alternate" type="application/atom+xml" />
     <title>{{ page_title }}</title>
+    <script defer src="/search.js"></script>
     {% block head_extensions %}{% endblock head_extensions %}
   </head>
   <body>
diff --git a/templates/macros/search.html b/templates/macros/search.html
index a15a06d510..957a1bfeb2 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -6,7 +6,7 @@
 {% endmacro %}
 
 {% macro search_button(icon=false, text="Search Bevy...", class="") %}
-<button class="search-button {{ class }}" aria-label="{{ text }}" onclick="document.getElementById('search-dialog').showModal()">
+<button class="search-button {{ class }}" aria-label="{{ text }}" onclick="search_open()">
   {{ search::search_icon() }}
   {% if not icon %}
   <span> {{ text }} </span>
@@ -30,22 +30,26 @@
       </form>
       <div class="search-dialog__recent" aria-label="Recent Searches">
         <!-- hidden by script upon entering anything -->
-        <ul>
-        </ul>
         <div class="search-dialog__recent__none">
           <!-- hidden by script if you have any recent searches -->
           <em>&mdash; No recent searches &mdash;</em>
         </div>
+        <div class="search-dialog__recent__some" style="display: none;">
+          <!-- shown by script if you have any recent searches -->
+          <b>Recent Searches</b>
+          <ul>
+          </ul>
+        </div>
       </div>
       <div class="search-dialog__results"></div>
     </div>
     <aside class="search-dialog__tip" aria-label="tip" style="display: flex; padding-top: 0.5em;">
       <div style="margin-inline: auto">
-        <b>Tip!</b> (I'll write a script to pick a random one later)
-        <ul class="display:none">
+        <b>Tip!</b>
+        <ul>
           <li>Open this dialog with <kbd>Ctrl+K</kbd></li>
-          <li>some second thing</li>
-          <li>some third thing</li>
+          <li>#TODO some second thing</li>
+          <li>#TODO some third thing</li>
         </ul>
       </div>
     </aside>

From 2f230d7e50732b14dcfddadac4740727efe294d7 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 15 May 2024 18:59:39 -0400
Subject: [PATCH 09/37] set default language (required for build_search_index)

---
 config.toml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/config.toml b/config.toml
index 38e9358b76..77324b380f 100644
--- a/config.toml
+++ b/config.toml
@@ -8,6 +8,7 @@ title = "Bevy Engine"
 compile_sass = true
 
 # Whether to build a search index to be used later on by a JavaScript library
+default_language = "en"
 build_search_index = true
 
 generate_feed = true

From 5c5dfc9fd36f86bdfcd21679a8f0102850ce9f3c Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 15 May 2024 20:42:14 -0400
Subject: [PATCH 10/37] sorta kinda working

---
 sass/components/_search.scss |  9 +++++++++
 static/search.js             | 35 ++++++++++++++++++++++++++++++++++-
 templates/layouts/base.html  |  2 ++
 templates/macros/search.html |  3 ++-
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index c0de948137..af2881bb3d 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -62,6 +62,15 @@
     }
   }
 
+  .search-dialog__results {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
+    a {
+      display: block;
+    }
+  }
+
   .search-dialog__tip ul {
     display: inline;
     margin: 0;
diff --git a/static/search.js b/static/search.js
index 0fb4d4a490..fbfc338c37 100644
--- a/static/search.js
+++ b/static/search.js
@@ -1,13 +1,21 @@
 const SEARCH_HISTORY_LOCALSTORAGE_KEY = "search_history"
 const SEARCH_HISTORY_MAX = 5;
+/** 
+ * <script> tags are ordered such that this will work without checking
+ * types stolen from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/elasticlunr/index.d.ts
+ * @typedef {{score: number, ref: string, doc: {title: string, body: string}}} SearchResult
+ * @type {{search: (query: string) => SearchResult[]}}
+ */
+const SEARCH_INDEX = elasticlunr.Index.load(searchIndex);
 
 /**
- * open the search dialog. no-op if already open.
+ * opens the search dialog, updates "recent searches", and randomizes the dialog tip
  */
 function search_open() {
     document.getElementById("search-dialog").showModal();
     search_history_show();
     search_tip();
+    search_key_handler();
 }
 
 /**
@@ -81,4 +89,29 @@ function search_tip() {
     let choice = Math.floor(Math.random() * length);
     console.trace("chose tip", choice);
     Array.from($list.children).forEach((n, i) => n.setAttribute("data-chosen", i==choice));
+}
+
+/**
+ * the actual sauce. sends the search off to elasticlunr and displays the results.
+ */
+function search_key_handler(){
+    let $dialog = document.getElementById("search-dialog")
+    let $recent = $dialog.querySelector(".search-dialog__recent")
+    let $results = $dialog.querySelector(".search-dialog__results")
+    let query = $dialog.querySelector("form input").value;
+    if(query.length > 0) {
+        $recent.style.display = "none";
+    } else {
+        $recent.style.display = null;
+        return;
+    }
+    let result = SEARCH_INDEX.search(query);
+    $results.innerHTML = "";
+    result.forEach(result => {
+        let link = document.createElement("a");
+        link.href = result.ref;
+        link.role = "list-item";
+        link.innerText = `${result.doc.title}`;
+        $results.append(link);
+    });
 }
\ No newline at end of file
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 0f20b054b5..c0d7ce92d8 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -87,6 +87,8 @@
     <link rel="stylesheet" href="/site.css" />
     <link href="/atom.xml" rel="alternate" type="application/atom+xml" />
     <title>{{ page_title }}</title>
+    <script defer src="/search_index.en.js"></script>
+    <script defer src="/elasticlunr.min.js"></script>
     <script defer src="/search.js"></script>
     {% block head_extensions %}{% endblock head_extensions %}
   </head>
diff --git a/templates/macros/search.html b/templates/macros/search.html
index 957a1bfeb2..df5d30cde6 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -26,6 +26,7 @@
           id="search-dialog__input"
           placeholder="Search all of Bevy..."
           autofocus
+          onkeypress="search_key_handler()"
         >
       </form>
       <div class="search-dialog__recent" aria-label="Recent Searches">
@@ -41,7 +42,7 @@
           </ul>
         </div>
       </div>
-      <div class="search-dialog__results"></div>
+      <ul class="search-dialog__results"> </ul>
     </div>
     <aside class="search-dialog__tip" aria-label="tip" style="display: flex; padding-top: 0.5em;">
       <div style="margin-inline: auto">

From ed06fe343324d00ee9997d5fffd1bbcc48e6f27b Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 20 May 2024 16:26:24 -0400
Subject: [PATCH 11/37] add ability to click out of the search dialog

---
 static/search.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/static/search.js b/static/search.js
index fbfc338c37..6a44521d67 100644
--- a/static/search.js
+++ b/static/search.js
@@ -114,4 +114,13 @@ function search_key_handler(){
         link.innerText = `${result.doc.title}`;
         $results.append(link);
     });
-}
\ No newline at end of file
+}
+
+document.getElementById("search-dialog").addEventListener('click', function (event) {
+    // based on https://stackoverflow.com/a/69421512
+    var rect = this.getBoundingClientRect();
+    if (!(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
+        && rect.left <= event.clientX && event.clientX <= rect.left + rect.width)) {
+        this.close();
+    }
+});
\ No newline at end of file

From cbd6ef3b5451babc584383eca75adca3c1f1a8c4 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 20 May 2024 17:17:37 -0400
Subject: [PATCH 12/37] rewrite time already

declare search history out of scope
---
 sass/components/_search.scss |  14 +---
 static/search.js             | 141 +++++++++++------------------------
 templates/macros/search.html |  17 +----
 3 files changed, 49 insertions(+), 123 deletions(-)

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index af2881bb3d..ac5e0fa407 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -33,7 +33,7 @@
   form {
     $input-height: 2em;
     display: flex;
-    gap: 0.5em;
+    gap: 1em;
     align-items: center;
     margin-bottom: 1em;
 
@@ -52,19 +52,11 @@
     }
   }
 
-  .search-dialog__recent {
-    &__none {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 5em;
-      color: $subtitle-color;
-    }
-  }
-
   .search-dialog__results {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    margin: 0;
+    padding: 1em;
     gap: 1em;
     a {
       display: block;
diff --git a/static/search.js b/static/search.js
index 6a44521d67..0e46694eb8 100644
--- a/static/search.js
+++ b/static/search.js
@@ -1,111 +1,33 @@
-const SEARCH_HISTORY_LOCALSTORAGE_KEY = "search_history"
-const SEARCH_HISTORY_MAX = 5;
-/** 
- * <script> tags are ordered such that this will work without checking
- * types stolen from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/elasticlunr/index.d.ts
- * @typedef {{score: number, ref: string, doc: {title: string, body: string}}} SearchResult
- * @type {{search: (query: string) => SearchResult[]}}
- */
-const SEARCH_INDEX = elasticlunr.Index.load(searchIndex);
-
-/**
- * opens the search dialog, updates "recent searches", and randomizes the dialog tip
- */
-function search_open() {
-    document.getElementById("search-dialog").showModal();
-    search_history_show();
-    search_tip();
-    search_key_handler();
-}
-
-/**
- * get history from localStorage
- * clears history and returns [] if anything goes wrong
- * @returns {string[]}
- */
-function search_history_get() {
-    let history = localStorage.getItem(SEARCH_HISTORY_LOCALSTORAGE_KEY) ?? "[]";
-    try {
-        history = JSON.parse(history);
-    } catch {
-        console.warn(`Expected localStorage ${SEARCH_HISTORY_LOCALSTORAGE_KEY} to parse as json, but it was`, history, "clearing.");
-        localStorage.removeItem(SEARCH_HISTORY_LOCALSTORAGE_KEY);
-        return [];
-    }
-    console.trace("history from localStorage:", history)
-    if (!Array.isArray(history)) {
-        console.warn(`Expected localStorage ${SEARCH_HISTORY_LOCALSTORAGE_KEY} to be an array, but it was`, history, "clearing.")
-        localStorage.removeItem(SEARCH_HISTORY_LOCALSTORAGE_KEY);
-        return [];
-    }
-    return history;
-}
-
-/**
- * add `search` to history in localStorage. does not update #search-dialog. returns the new history array.
- * @param {string} search 
- * @returns {string[]}
- */
-function search_history_push(search) {
-    let history = search_history_get();
-    history.splice(0, 0, search);
-    if (history.length > SEARCH_HISTORY_MAX) {
-        history.pop()
-    }
-    localStorage.setItem(SEARCH_HISTORY_LOCALSTORAGE_KEY, JSON.stringify(history));
-    return history
-}
-
-/**
- * gets search history from localStorage and updates the list in #search-dialog
- */
-function search_history_show() {
-    let history = search_history_get();
-    let $parent = document.getElementById("search-dialog").querySelector(".search-dialog__recent");
-    let $none = $parent.querySelector(".search-dialog__recent__none");
-    let $some = $parent.querySelector(".search-dialog__recent__some");
-    let $list = $some.querySelector("ul");
-    if (history.length == 0) {
-        $some.style.display = "none";
-        $none.style.display = null;
-    } else {
-        $none.style.display = "none";
-        $some.style.display = null;
-        $list.innerHTML = ""; // remove children
-        history.forEach(item => {
-            let li = document.createElement("li");
-            li.innerText = item;
-            $list.appendChild(li)
-        });
-    }
-}
-
-/**
- * show a new search dialog tip
- */
-function search_tip() {
-    let $list = document.querySelector("#search-dialog aside ul");
-    let length = $list.children.length;
-    let choice = Math.floor(Math.random() * length);
-    console.trace("chose tip", choice);
-    Array.from($list.children).forEach((n, i) => n.setAttribute("data-chosen", i==choice));
-}
 
 /**
  * the actual sauce. sends the search off to elasticlunr and displays the results.
  */
-function search_key_handler(){
+function search_key_handler() {
+    console.trace("search_key_handler()")
     let $dialog = document.getElementById("search-dialog")
     let $recent = $dialog.querySelector(".search-dialog__recent")
     let $results = $dialog.querySelector(".search-dialog__results")
     let query = $dialog.querySelector("form input").value;
-    if(query.length > 0) {
+    if (query.length > 0) {
         $recent.style.display = "none";
+        $results.style.display = null;
     } else {
-        $recent.style.display = null;
+        $recent.style.display = "block";
+        $results.style.display = "none";
         return;
     }
-    let result = SEARCH_INDEX.search(query);
+    // search_history_push(query);
+    let result = SEARCH_INDEX.search(query, {
+        fields: {
+            title: { boost: 2 },
+            body: { boost: 1 }
+        },
+        expand: true
+    });
+    if (result.length == 0) {
+        console.trace("no results");
+    }
+    result = result.slice(0, SEARCH_RESULTS_LIMIT);
     $results.innerHTML = "";
     result.forEach(result => {
         let link = document.createElement("a");
@@ -123,4 +45,29 @@ document.getElementById("search-dialog").addEventListener('click', function (eve
         && rect.left <= event.clientX && event.clientX <= rect.left + rect.width)) {
         this.close();
     }
-});
\ No newline at end of file
+});
+
+/// just a contrivance to clean up the global namespace
+class __Search {
+    RESULTS_LIMIT = 10;
+    $dialog = document.getElementById("search-dialog")
+    $search_tip_list = document.querySelector("#search-dialog aside ul");
+
+    open() {
+        this.$dialog.showModal();
+        this.change_tip();
+        // search_history_show();
+        // search_key_handler();
+    }
+
+    change_tip() {
+        let length = this.$search_tip_list.children.length;
+        let choice = Math.floor(Math.random() * length);
+        console.trace("chose tip", choice);
+        Array.from(this.$search_tip_list.children).forEach(
+            (tip, i) => tip.setAttribute("data-chosen", i == choice
+        ));
+    }
+}
+
+const SEARCH = new __Search()
\ No newline at end of file
diff --git a/templates/macros/search.html b/templates/macros/search.html
index df5d30cde6..d393bc14be 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -6,7 +6,7 @@
 {% endmacro %}
 
 {% macro search_button(icon=false, text="Search Bevy...", class="") %}
-<button class="search-button {{ class }}" aria-label="{{ text }}" onclick="search_open()">
+<button class="search-button {{ class }}" aria-label="{{ text }}" onclick="SEARCH.open()">
   {{ search::search_icon() }}
   {% if not icon %}
   <span> {{ text }} </span>
@@ -26,22 +26,9 @@
           id="search-dialog__input"
           placeholder="Search all of Bevy..."
           autofocus
-          onkeypress="search_key_handler()"
+          onkeydown="SEARCH.handle()"
         >
       </form>
-      <div class="search-dialog__recent" aria-label="Recent Searches">
-        <!-- hidden by script upon entering anything -->
-        <div class="search-dialog__recent__none">
-          <!-- hidden by script if you have any recent searches -->
-          <em>&mdash; No recent searches &mdash;</em>
-        </div>
-        <div class="search-dialog__recent__some" style="display: none;">
-          <!-- shown by script if you have any recent searches -->
-          <b>Recent Searches</b>
-          <ul>
-          </ul>
-        </div>
-      </div>
       <ul class="search-dialog__results"> </ul>
     </div>
     <aside class="search-dialog__tip" aria-label="tip" style="display: flex; padding-top: 0.5em;">

From e39198a8e1e7db1b6b089f913e79c59362bdd58b Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 20 May 2024 17:21:01 -0400
Subject: [PATCH 13/37] aosdifpoaisdfm this will all be squashed anyway

---
 static/search.js             | 10 ++++++++--
 templates/macros/search.html |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/static/search.js b/static/search.js
index 0e46694eb8..3484a6949d 100644
--- a/static/search.js
+++ b/static/search.js
@@ -51,13 +51,13 @@ document.getElementById("search-dialog").addEventListener('click', function (eve
 class __Search {
     RESULTS_LIMIT = 10;
     $dialog = document.getElementById("search-dialog")
+    $input = document.getElementById("search-dialog__input")
     $search_tip_list = document.querySelector("#search-dialog aside ul");
 
     open() {
         this.$dialog.showModal();
         this.change_tip();
-        // search_history_show();
-        // search_key_handler();
+        this.search();
     }
 
     change_tip() {
@@ -68,6 +68,12 @@ class __Search {
             (tip, i) => tip.setAttribute("data-chosen", i == choice
         ));
     }
+
+    search() {
+        /** @type {string} */
+        const query = this.$input.value;
+        console.trace("Search::handle:", query);
+    }
 }
 
 const SEARCH = new __Search()
\ No newline at end of file
diff --git a/templates/macros/search.html b/templates/macros/search.html
index d393bc14be..d7d60f807c 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -26,7 +26,7 @@
           id="search-dialog__input"
           placeholder="Search all of Bevy..."
           autofocus
-          onkeydown="SEARCH.handle()"
+          onkeydown="SEARCH.search()"
         >
       </form>
       <ul class="search-dialog__results"> </ul>

From 40241e8d5892a0e05dfd66e5e1e5723e6d2f69af Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 20 May 2024 17:29:24 -0400
Subject: [PATCH 14/37] use js modules

---
 static/{search.js => search.mjs} | 4 +++-
 templates/layouts/base.html      | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)
 rename static/{search.js => search.mjs} (95%)

diff --git a/static/search.js b/static/search.mjs
similarity index 95%
rename from static/search.js
rename to static/search.mjs
index 3484a6949d..170ef8de4f 100644
--- a/static/search.js
+++ b/static/search.mjs
@@ -1,3 +1,5 @@
+import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.mjs'
+
 
 /**
  * the actual sauce. sends the search off to elasticlunr and displays the results.
@@ -76,4 +78,4 @@ class __Search {
     }
 }
 
-const SEARCH = new __Search()
\ No newline at end of file
+export default new __Search()
\ No newline at end of file
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index c0d7ce92d8..21f63dd747 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -87,9 +87,12 @@
     <link rel="stylesheet" href="/site.css" />
     <link href="/atom.xml" rel="alternate" type="application/atom+xml" />
     <title>{{ page_title }}</title>
-    <script defer src="/search_index.en.js"></script>
-    <script defer src="/elasticlunr.min.js"></script>
-    <script defer src="/search.js"></script>
+    <!-- <script defer src="/search_index.en.js"></script>
+    <script defer src="/elasticlunr.min.js"></script> -->
+    <script defer type="module">
+      import SEARCH from '/search.mjs';
+      window.SEARCH = SEARCH;
+    </script>
     {% block head_extensions %}{% endblock head_extensions %}
   </head>
   <body>

From e6db57307e375370190be090618f1802d385cf61 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 20 May 2024 17:30:06 -0400
Subject: [PATCH 15/37] don't need the underscores anymore

---
 static/search.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/search.mjs b/static/search.mjs
index 170ef8de4f..374ce01ff5 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -50,7 +50,7 @@ document.getElementById("search-dialog").addEventListener('click', function (eve
 });
 
 /// just a contrivance to clean up the global namespace
-class __Search {
+class Search {
     RESULTS_LIMIT = 10;
     $dialog = document.getElementById("search-dialog")
     $input = document.getElementById("search-dialog__input")
@@ -78,4 +78,4 @@ class __Search {
     }
 }
 
-export default new __Search()
\ No newline at end of file
+export default new Search()
\ No newline at end of file

From 5abc19b66af406111420279d134479f5d0894cf2 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 20 May 2024 18:53:39 -0400
Subject: [PATCH 16/37] working Fuse search except only with a Zola patch i
 wrote

---
 config.toml                  |  3 +++
 sass/components/_search.scss |  2 +-
 static/search.mjs            | 26 ++++++++++++++++++++++----
 templates/macros/search.html |  2 +-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/config.toml b/config.toml
index 77324b380f..12423d8e81 100644
--- a/config.toml
+++ b/config.toml
@@ -27,3 +27,6 @@ highlight_theme = "css"
 
 [extra]
 # Put all your custom variables here
+
+[search]
+index_format="fuse_json"
\ No newline at end of file
diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index ac5e0fa407..fff24ffbc9 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -52,7 +52,7 @@
     }
   }
 
-  .search-dialog__results {
+  #search-dialog__results {
     display: grid;
     grid-template-columns: 1fr 1fr;
     margin: 0;
diff --git a/static/search.mjs b/static/search.mjs
index 374ce01ff5..91c462e926 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -49,12 +49,13 @@ document.getElementById("search-dialog").addEventListener('click', function (eve
     }
 });
 
-/// just a contrivance to clean up the global namespace
 class Search {
     RESULTS_LIMIT = 10;
     $dialog = document.getElementById("search-dialog")
     $input = document.getElementById("search-dialog__input")
+    $results = document.getElementById("search-dialog__results")
     $search_tip_list = document.querySelector("#search-dialog aside ul");
+    fuse = null;
 
     open() {
         this.$dialog.showModal();
@@ -65,16 +66,33 @@ class Search {
     change_tip() {
         let length = this.$search_tip_list.children.length;
         let choice = Math.floor(Math.random() * length);
-        console.trace("chose tip", choice);
+        console.debug("chose tip", choice);
         Array.from(this.$search_tip_list.children).forEach(
             (tip, i) => tip.setAttribute("data-chosen", i == choice
         ));
     }
 
-    search() {
+    async search() {
+        let fetched = await (await fetch("/search_index.en.json")).json()
+        this.fuse ??= new Fuse(fetched, {
+            keys: ["title", "body"]
+        });
         /** @type {string} */
         const query = this.$input.value;
-        console.trace("Search::handle:", query);
+        console.debug("Search::search:", query);
+        if(query.length == 0) {
+            return;
+        }
+        let results = this.fuse.search(query);
+        console.debug(results);
+        this.$results.innerHTML = "";
+        results.slice(0, this.RESULTS_LIMIT).forEach(result => {
+            const a = document.createElement("a");
+            a.innerText = result.item.title;
+            a.role = "listitem";
+            a.href = result.item.url;
+            this.$results.appendChild(a)
+        })
     }
 }
 
diff --git a/templates/macros/search.html b/templates/macros/search.html
index d7d60f807c..3e492067ab 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -29,7 +29,7 @@
           onkeydown="SEARCH.search()"
         >
       </form>
-      <ul class="search-dialog__results"> </ul>
+      <ul id="search-dialog__results"> </ul>
     </div>
     <aside class="search-dialog__tip" aria-label="tip" style="display: flex; padding-top: 0.5em;">
       <div style="margin-inline: auto">

From 4671eb735afbe4d57802efa1c36284f268e754a7 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 20 May 2024 21:54:38 -0400
Subject: [PATCH 17/37] faffing about

---
 static/search.mjs | 49 ++++++-----------------------------------------
 1 file changed, 6 insertions(+), 43 deletions(-)

diff --git a/static/search.mjs b/static/search.mjs
index 91c462e926..687312ec59 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -1,46 +1,8 @@
 import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.mjs'
 
 
-/**
- * the actual sauce. sends the search off to elasticlunr and displays the results.
- */
-function search_key_handler() {
-    console.trace("search_key_handler()")
-    let $dialog = document.getElementById("search-dialog")
-    let $recent = $dialog.querySelector(".search-dialog__recent")
-    let $results = $dialog.querySelector(".search-dialog__results")
-    let query = $dialog.querySelector("form input").value;
-    if (query.length > 0) {
-        $recent.style.display = "none";
-        $results.style.display = null;
-    } else {
-        $recent.style.display = "block";
-        $results.style.display = "none";
-        return;
-    }
-    // search_history_push(query);
-    let result = SEARCH_INDEX.search(query, {
-        fields: {
-            title: { boost: 2 },
-            body: { boost: 1 }
-        },
-        expand: true
-    });
-    if (result.length == 0) {
-        console.trace("no results");
-    }
-    result = result.slice(0, SEARCH_RESULTS_LIMIT);
-    $results.innerHTML = "";
-    result.forEach(result => {
-        let link = document.createElement("a");
-        link.href = result.ref;
-        link.role = "list-item";
-        link.innerText = `${result.doc.title}`;
-        $results.append(link);
-    });
-}
-
 document.getElementById("search-dialog").addEventListener('click', function (event) {
+    // allow clicking out of the search dialog
     // based on https://stackoverflow.com/a/69421512
     var rect = this.getBoundingClientRect();
     if (!(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
@@ -75,20 +37,21 @@ class Search {
     async search() {
         let fetched = await (await fetch("/search_index.en.json")).json()
         this.fuse ??= new Fuse(fetched, {
-            keys: ["title", "body"]
+            keys: ["title", "body"],
+            includeMatches: true,
         });
         /** @type {string} */
         const query = this.$input.value;
-        console.debug("Search::search:", query);
+        console.debug(`search: "${query}"`);
         if(query.length == 0) {
             return;
         }
         let results = this.fuse.search(query);
-        console.debug(results);
         this.$results.innerHTML = "";
         results.slice(0, this.RESULTS_LIMIT).forEach(result => {
             const a = document.createElement("a");
-            a.innerText = result.item.title;
+            console.debug(result)
+            a.innerText = `${result.item.title}`;
             a.role = "listitem";
             a.href = result.item.url;
             this.$results.appendChild(a)

From 31ed0a4d1557d9be214d333cc2d0c2a239d13dc6 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Sun, 26 May 2024 21:10:05 -0400
Subject: [PATCH 18/37] switch back to elastic so this can actually ship
 without waiting for upstream

---
 config.toml                  |  2 +-
 sass/components/_search.scss | 23 +++++++++++++++++++++-
 static/search.mjs            | 37 +++++++++++++++++++++++-------------
 templates/layouts/base.html  |  4 ++--
 4 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/config.toml b/config.toml
index 12423d8e81..da7f1b8cfa 100644
--- a/config.toml
+++ b/config.toml
@@ -29,4 +29,4 @@ highlight_theme = "css"
 # Put all your custom variables here
 
 [search]
-index_format="fuse_json"
\ No newline at end of file
+index_format="elasticlunr_javascript"
\ No newline at end of file
diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index fff24ffbc9..1e0bf26acd 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -59,7 +59,28 @@
     padding: 1em;
     gap: 1em;
     a {
-      display: block;
+      &::before {
+        color: $subtitle-color;
+        text-decoration: none;
+        display: inline-block;
+        padding-right: 8px;
+      }
+
+      &[href^="/learn/book"]::before {
+        content: "book:";
+      }
+
+      &[href^="/learn/quick-start"]::before {
+        content: "quick start:";
+      }
+
+      &[href^="/examples"]::before {
+        content: "examples:";
+      }
+
+      &[href^="/examples-webgpu"]::before {
+        content: "examples (webgpu):";
+      }
     }
   }
 
diff --git a/static/search.mjs b/static/search.mjs
index 687312ec59..06f55afeea 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -1,6 +1,3 @@
-import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.mjs'
-
-
 document.getElementById("search-dialog").addEventListener('click', function (event) {
     // allow clicking out of the search dialog
     // based on https://stackoverflow.com/a/69421512
@@ -17,7 +14,9 @@ class Search {
     $input = document.getElementById("search-dialog__input")
     $results = document.getElementById("search-dialog__results")
     $search_tip_list = document.querySelector("#search-dialog aside ul");
-    fuse = null;
+    // <script> tags are contrived such that elasticlunr and searchIndex will be ready
+    // someday, hopefully: switch to .mjs for searchIndex and elasticlunr
+    index = elasticlunr.Index.load(window.searchIndex);
 
     open() {
         this.$dialog.showModal();
@@ -31,32 +30,44 @@ class Search {
         console.debug("chose tip", choice);
         Array.from(this.$search_tip_list.children).forEach(
             (tip, i) => tip.setAttribute("data-chosen", i == choice
-        ));
+            ));
     }
 
     async search() {
         let fetched = await (await fetch("/search_index.en.json")).json()
-        this.fuse ??= new Fuse(fetched, {
-            keys: ["title", "body"],
-            includeMatches: true,
-        });
+        /** @param {string} path */
+        function section_prio(path) {
+            if (path.startsWith("/examples")) {
+                return 0.5;
+            }
+            return 1;
+        }
         /** @type {string} */
         const query = this.$input.value;
         console.debug(`search: "${query}"`);
-        if(query.length == 0) {
+        if (query.length == 0) {
             return;
         }
-        let results = this.fuse.search(query);
+        /** @type any[] */
+        let results = this.index.search(query);
+        console.debug(results);
         this.$results.innerHTML = "";
         results.slice(0, this.RESULTS_LIMIT).forEach(result => {
             const a = document.createElement("a");
             console.debug(result)
-            a.innerText = `${result.item.title}`;
+            a.innerText = `${result.doc.title}`;
             a.role = "listitem";
-            a.href = result.item.url;
+            a.href = result.ref;
             this.$results.appendChild(a)
         })
     }
+
+    sort_key(result) {
+        if(result.item.path.startsWith("/examples")) {
+            return result.score / 2;
+        }
+        return result.score;
+    }
 }
 
 export default new Search()
\ No newline at end of file
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 21f63dd747..0066a6cd94 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -87,8 +87,8 @@
     <link rel="stylesheet" href="/site.css" />
     <link href="/atom.xml" rel="alternate" type="application/atom+xml" />
     <title>{{ page_title }}</title>
-    <!-- <script defer src="/search_index.en.js"></script>
-    <script defer src="/elasticlunr.min.js"></script> -->
+    <script defer src="/search_index.en.js"></script>
+    <script defer src="/elasticlunr.min.js"></script>
     <script defer type="module">
       import SEARCH from '/search.mjs';
       window.SEARCH = SEARCH;

From cc62b508be6547476908c2225cba59be820bd6fb Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Sun, 26 May 2024 21:37:44 -0400
Subject: [PATCH 19/37] move examples to the end

---
 sass/components/_search.scss | 26 ++++++++++++++++++++++----
 static/search.mjs            | 10 +---------
 templates/macros/search.html |  2 +-
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 1e0bf26acd..e42c9109a3 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -66,21 +66,39 @@
         padding-right: 8px;
       }
 
-      &[href^="/learn/book"]::before {
+      &[href*="/examples/"], &[href*="/examples-webgpu"] {
+        order: 10;
+      }
+
+      // vaguely in top bar order
+
+      &[href*="/learn/book/"]::before {
         content: "book:";
       }
 
-      &[href^="/learn/quick-start"]::before {
+      &[href*="/learn/quick-start/"]::before {
         content: "quick start:";
       }
 
-      &[href^="/examples"]::before {
+      &[href*="/news/"]::before {
+        content: "news:";
+      }
+
+      &[href*="/foundation/"]::before {
+        content: "foundation:";
+      }
+
+      &[href*="/examples/"]::before {
         content: "examples:";
       }
 
-      &[href^="/examples-webgpu"]::before {
+      &[href*="/examples-webgpu/"]::before {
         content: "examples (webgpu):";
       }
+
+      &[href*="/donate/"]::before {
+        content: "donate:";
+      }
     }
   }
 
diff --git a/static/search.mjs b/static/search.mjs
index 06f55afeea..0cf65c760b 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -34,14 +34,6 @@ class Search {
     }
 
     async search() {
-        let fetched = await (await fetch("/search_index.en.json")).json()
-        /** @param {string} path */
-        function section_prio(path) {
-            if (path.startsWith("/examples")) {
-                return 0.5;
-            }
-            return 1;
-        }
         /** @type {string} */
         const query = this.$input.value;
         console.debug(`search: "${query}"`);
@@ -49,7 +41,7 @@ class Search {
             return;
         }
         /** @type any[] */
-        let results = this.index.search(query);
+        let results = this.index.search(query, {});
         console.debug(results);
         this.$results.innerHTML = "";
         results.slice(0, this.RESULTS_LIMIT).forEach(result => {
diff --git a/templates/macros/search.html b/templates/macros/search.html
index 3e492067ab..84c4792eed 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -26,7 +26,7 @@
           id="search-dialog__input"
           placeholder="Search all of Bevy..."
           autofocus
-          onkeydown="SEARCH.search()"
+          onkeyup="SEARCH.search()"
         >
       </form>
       <ul id="search-dialog__results"> </ul>

From eb0318c85db62fa7d4bc515c0015c0d55f874588 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Sun, 26 May 2024 21:53:28 -0400
Subject: [PATCH 20/37] deprioritize examples in a way that doesn't mess up the
 tab order

---
 sass/components/_search.scss |  6 +++---
 static/search.mjs            | 20 ++++++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index e42c9109a3..add771dd28 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -66,9 +66,9 @@
         padding-right: 8px;
       }
 
-      &[href*="/examples/"], &[href*="/examples-webgpu"] {
-        order: 10;
-      }
+      // &[href*="/examples/"], &[href*="/examples-webgpu"] {
+      //   order: 10;
+      // }
 
       // vaguely in top bar order
 
diff --git a/static/search.mjs b/static/search.mjs
index 0cf65c760b..ed0f98c3f9 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -42,23 +42,31 @@ class Search {
         }
         /** @type any[] */
         let results = this.index.search(query, {});
+        results.forEach(result => {
+            if (result.ref.includes("/examples")) {
+                result.score /= 3;
+            }
+        });
+        results.sort((a, b) => b.score - a.score);
         console.debug(results);
         this.$results.innerHTML = "";
         results.slice(0, this.RESULTS_LIMIT).forEach(result => {
+        // results.forEach(result => {
             const a = document.createElement("a");
-            console.debug(result)
             a.innerText = `${result.doc.title}`;
             a.role = "listitem";
             a.href = result.ref;
+            a.setAttribute("data-score", result.score)
             this.$results.appendChild(a)
         })
     }
 
-    sort_key(result) {
-        if(result.item.path.startsWith("/examples")) {
-            return result.score / 2;
-        }
-        return result.score;
+    /**
+     * @param {T[]} array 
+     * @param {T => number} lookup_fn 
+     */
+    sort_by_key(array, lookup_fn) {
+        array.sort((a, b) => lookup_fn(a) - lookup_fn(b))
     }
 }
 

From 72a3fa02b37799f59e83c1c63d96908692d1cfee Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 27 May 2024 07:40:35 -0400
Subject: [PATCH 21/37] strip the host part of the url

---
 sass/components/_search.scss | 14 +++++++-------
 static/search.mjs            |  3 ++-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index add771dd28..51058cdad7 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -72,31 +72,31 @@
 
       // vaguely in top bar order
 
-      &[href*="/learn/book/"]::before {
+      &[href^="/learn/book/"]::before {
         content: "book:";
       }
 
-      &[href*="/learn/quick-start/"]::before {
+      &[href^="/learn/quick-start/"]::before {
         content: "quick start:";
       }
 
-      &[href*="/news/"]::before {
+      &[href^="/news/"]::before {
         content: "news:";
       }
 
-      &[href*="/foundation/"]::before {
+      &[href^="/foundation/"]::before {
         content: "foundation:";
       }
 
-      &[href*="/examples/"]::before {
+      &[href^="/examples/"]::before {
         content: "examples:";
       }
 
-      &[href*="/examples-webgpu/"]::before {
+      &[href^="/examples-webgpu/"]::before {
         content: "examples (webgpu):";
       }
 
-      &[href*="/donate/"]::before {
+      &[href^="/donate/"]::before {
         content: "donate:";
       }
     }
diff --git a/static/search.mjs b/static/search.mjs
index ed0f98c3f9..c375a55037 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -43,7 +43,8 @@ class Search {
         /** @type any[] */
         let results = this.index.search(query, {});
         results.forEach(result => {
-            if (result.ref.includes("/examples")) {
+            result.ref = new URL(result.ref).pathname;
+            if (result.ref.startsWith("/examples")) {
                 result.score /= 3;
             }
         });

From ee67737ad9eb7ab224bba20961c0eaba1f987a02 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 27 May 2024 07:50:40 -0400
Subject: [PATCH 22/37] prioritize results with similar paths

---
 static/search.mjs | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/static/search.mjs b/static/search.mjs
index c375a55037..b2881426bd 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -34,6 +34,7 @@ class Search {
     }
 
     async search() {
+        let current_path = window.location.pathname.split("/");
         /** @type {string} */
         const query = this.$input.value;
         console.debug(`search: "${query}"`);
@@ -44,9 +45,11 @@ class Search {
         let results = this.index.search(query, {});
         results.forEach(result => {
             result.ref = new URL(result.ref).pathname;
-            if (result.ref.startsWith("/examples")) {
-                result.score /= 3;
-            }
+            let similarity = result.ref
+                .split("/")
+                .map((part, i) => part == current_path[i])
+                .filter(v => v).length - 1;
+            result.score += 0.1 * similarity;
         });
         results.sort((a, b) => b.score - a.score);
         console.debug(results);
@@ -61,14 +64,6 @@ class Search {
             this.$results.appendChild(a)
         })
     }
-
-    /**
-     * @param {T[]} array 
-     * @param {T => number} lookup_fn 
-     */
-    sort_by_key(array, lookup_fn) {
-        array.sort((a, b) => lookup_fn(a) - lookup_fn(b))
-    }
 }
 
 export default new Search()
\ No newline at end of file

From 9017b29fdb6181ee2b7ea3d1aa5ff60c523e6840 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 27 May 2024 07:57:10 -0400
Subject: [PATCH 23/37] remove commented out line

---
 static/search.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/static/search.mjs b/static/search.mjs
index b2881426bd..dcbd92eb5e 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -55,7 +55,6 @@ class Search {
         console.debug(results);
         this.$results.innerHTML = "";
         results.slice(0, this.RESULTS_LIMIT).forEach(result => {
-        // results.forEach(result => {
             const a = document.createElement("a");
             a.innerText = `${result.doc.title}`;
             a.role = "listitem";

From 7aa371c8a573c1cb9c88d254c08a53ab380144ba Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 27 May 2024 08:19:18 -0400
Subject: [PATCH 24/37] bind ctrl+k to search

---
 static/search.mjs | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/static/search.mjs b/static/search.mjs
index dcbd92eb5e..6c03e3512b 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -8,6 +8,13 @@ document.getElementById("search-dialog").addEventListener('click', function (eve
     }
 });
 
+document.addEventListener("keydown", event => {
+    if(event.ctrlKey && event.key == "k") {
+        event.preventDefault();
+        SEARCH.open();
+    }
+})
+
 class Search {
     RESULTS_LIMIT = 10;
     $dialog = document.getElementById("search-dialog")
@@ -52,7 +59,6 @@ class Search {
             result.score += 0.1 * similarity;
         });
         results.sort((a, b) => b.score - a.score);
-        console.debug(results);
         this.$results.innerHTML = "";
         results.slice(0, this.RESULTS_LIMIT).forEach(result => {
             const a = document.createElement("a");
@@ -65,4 +71,5 @@ class Search {
     }
 }
 
-export default new Search()
\ No newline at end of file
+let SEARCH = new Search()
+export default SEARCH;
\ No newline at end of file

From c17ac07d1c0092a942a642fb7f32019643c7f58c Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 27 May 2024 09:15:00 -0400
Subject: [PATCH 25/37] seperate buttons for mobile and desktop

---
 sass/components/_main-menu.scss | 8 ++++++++
 templates/layouts/base.html     | 5 ++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss
index 7c330f1a08..84ffa599b1 100644
--- a/sass/components/_main-menu.scss
+++ b/sass/components/_main-menu.scss
@@ -141,6 +141,10 @@
       background-color: rgba($color-white, 0.05);
       border-radius: $border-radius;
     }
+
+    &__search__desktop {
+      display: none;
+    }
   }
 
   @include state-checked("mobile-menu") {
@@ -183,5 +187,9 @@
       font-weight: 500;
       text-decoration: none;
     }
+
+    &__search__mobile {
+      display: none;
+    }
   }
 }
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 0066a6cd94..8e192920ad 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -163,13 +163,16 @@
                       height="16">
               </label>
             </div>
+            <div class="main-menu__search main-menu__search__mobile">
+              {{ search::search_button(icon=true, class="main-menu__link") }}
+            </div>
             {% block mobile_page_menu_switch %}{% endblock mobile_page_menu_switch %}
             <div class="main-menu__content">
               <div class="main-menu__page-menu">
                 {% block mobile_page_menu %}{% endblock mobile_page_menu %}
               </div>
               <ul class="main-menu__menu">
-                <li class="main-menu__entry">
+                <li class="main-menu__entry main-menu__search main-menu__search__desktop">
                   {{ search::search_button(icon=true, class="main-menu__link") }}
                 </li>
                 {{ header_macros::header_item(name="Getting Started", path="/learn/quick-start/getting-started",

From c1474841228e5100eab2c1db465a1c90ab9666df Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 27 May 2024 09:23:10 -0400
Subject: [PATCH 26/37] make it good on mobile

---
 sass/components/_main-menu.scss | 16 ++++++++++++----
 sass/components/_search.scss    |  2 ++
 templates/layouts/base.html     |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss
index 84ffa599b1..26765be2ba 100644
--- a/sass/components/_main-menu.scss
+++ b/sass/components/_main-menu.scss
@@ -54,6 +54,10 @@
       outline: $focus-outline;
     }
   }
+
+  &__search {
+    display: none; // re-enabled below
+  }
 }
 
 // MODE: Off-Canvas Mobile Menu
@@ -142,8 +146,12 @@
       border-radius: $border-radius;
     }
 
-    &__search__desktop {
-      display: none;
+    &__search__mobile {
+      display: flex;
+      padding: $padding;
+      .search-button {
+        flex-grow: 1;
+      }
     }
   }
 
@@ -188,8 +196,8 @@
       text-decoration: none;
     }
 
-    &__search__mobile {
-      display: none;
+    &__search__desktop {
+      display: block;
     }
   }
 }
diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 51058cdad7..0023d4a452 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -1,4 +1,6 @@
 .search-button {
+  display: flex;
+  gap: 1em;
   // reset <button> defaults
   border: none;
   background: none;
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 8e192920ad..fe36d2f7e1 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -164,7 +164,7 @@
               </label>
             </div>
             <div class="main-menu__search main-menu__search__mobile">
-              {{ search::search_button(icon=true, class="main-menu__link") }}
+              {{ search::search_button(icon=false, class="main-menu__link") }}
             </div>
             {% block mobile_page_menu_switch %}{% endblock mobile_page_menu_switch %}
             <div class="main-menu__content">

From 73b3d1875413face01a357e7503469aa0e00592d Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Mon, 27 May 2024 10:00:29 -0400
Subject: [PATCH 27/37] rework mobile menu to use a vertical flexbox

to keep the gaps consistent
---
 sass/components/_main-menu.scss | 32 +++++++++++++++-----------------
 sass/components/_search.scss    |  1 +
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss
index 26765be2ba..f958f83db8 100644
--- a/sass/components/_main-menu.scss
+++ b/sass/components/_main-menu.scss
@@ -66,9 +66,10 @@
     $padding: 8px;
     $bottom-buffer: 60px; // Add extra length to compensate for address-bar
 
-    --main-menu-switch-height: 0px;
-
     position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
     top: 0px;
     left: -$mobile-menu-width;
     width: $mobile-menu-width;
@@ -82,8 +83,6 @@
     box-shadow: 0px 0px 16px rgba(#000, 0.3);
 
     &--with-page-menu {
-      --main-menu-switch-height: 56px;
-
       .main-menu__page-menu-switch {
         display: block;
       }
@@ -104,15 +103,22 @@
       }
     }
 
+    &__search__mobile {
+      display: flex;
+      padding: 0 $padding;
+      .search-button {
+        flex-grow: 1;
+      }
+    }
+
     &__page-menu-switch {
       display: none;
-      padding: $padding $padding 0 $padding;
-      height: var(--main-menu-switch-height);
+      padding: 0 $padding;
     }
 
     &__content {
       position: relative;
-      height: calc(100% - var(--header-height) - var(--main-menu-switch-height));
+      flex-grow: 1;
       overflow-x: hidden;
     }
 
@@ -131,13 +137,13 @@
     &__menu {
       display: flex;
       flex-direction: column;
-      padding: $padding;
+      padding: 0 $padding;
       transform: translateX(0px);
     }
 
     &__page-menu {
       margin: 0;
-      padding: $padding;
+      padding: 0 $padding;
       transform: translateX(#{$mobile-menu-width});
     }
 
@@ -145,14 +151,6 @@
       background-color: rgba($color-white, 0.05);
       border-radius: $border-radius;
     }
-
-    &__search__mobile {
-      display: flex;
-      padding: $padding;
-      .search-button {
-        flex-grow: 1;
-      }
-    }
   }
 
   @include state-checked("mobile-menu") {
diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 0023d4a452..62f31ab3a8 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -4,6 +4,7 @@
   // reset <button> defaults
   border: none;
   background: none;
+  padding: 0;
 
   &__svg {
     height: 1em;

From f78b7b10491c001f89cef8fdf88800a208714aa5 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Wed, 29 May 2024 08:49:37 -0400
Subject: [PATCH 28/37] add close button

---
 sass/components/_search.scss | 9 +++++++++
 static/search.mjs            | 4 ++++
 templates/macros/search.html | 3 +++
 3 files changed, 16 insertions(+)

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 62f31ab3a8..a1be0014de 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -18,11 +18,20 @@
   width: min(80ch, 90%);
   max-height: 80vh;
   border: none;
+  padding: 0;
   background-color: transparent;
+  overflow: visible;
 
   &::backdrop {
     background-color: rgba($color-grey-800, 0.7);
   }
+  
+  .search-dialog__close {
+    position: absolute;
+    right: -24px;
+    background: none;
+    border: none;
+  }
 
   .search-dialog__inner {
     flex-grow: 1;
diff --git a/static/search.mjs b/static/search.mjs
index 6c03e3512b..500bb3e524 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -31,6 +31,10 @@ class Search {
         this.search();
     }
 
+    close() {
+        this.$dialog.close();
+    }
+
     change_tip() {
         let length = this.$search_tip_list.children.length;
         let choice = Math.floor(Math.random() * length);
diff --git a/templates/macros/search.html b/templates/macros/search.html
index 84c4792eed..9135b639e6 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -16,6 +16,9 @@
 
 {% macro search_dialog() %}
 <dialog id="search-dialog">
+  <button aria-label="Close Dialog" class="search-dialog__close" onclick="SEARCH.close()">
+    <img src="/assets/icon-times.svg" alt="A saltire or x-cross" width="16" height="16">
+  </button>
   <div style="display: flex; flex-direction: column; height: 100%;">
     <div class="search-dialog__inner">
       <form>

From 002e02fc7494ddb33fbd0b139c654f0273b21152 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Sun, 7 Jul 2024 19:20:15 -0400
Subject: [PATCH 29/37] update config for 0.19.1

---
 config.toml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/config.toml b/config.toml
index da7f1b8cfa..8e0bf6d8a8 100644
--- a/config.toml
+++ b/config.toml
@@ -11,9 +11,8 @@ compile_sass = true
 default_language = "en"
 build_search_index = true
 
-generate_feed = true
-rss_limit = 1000
-highlight_theme = "charcoal"
+generate_feeds = true
+feed_limit = 1000
 
 taxonomies = [
     {name = "news", feed = true},
@@ -29,4 +28,4 @@ highlight_theme = "css"
 # Put all your custom variables here
 
 [search]
-index_format="elasticlunr_javascript"
\ No newline at end of file
+index_format="fuse_json"
\ No newline at end of file

From 9e022b64a7abfb19be39feca71866ca57d292385 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Sun, 7 Jul 2024 19:23:34 -0400
Subject: [PATCH 30/37] unremove padding from .search-button

---
 sass/components/_search.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index a1be0014de..7306dd6bbb 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -4,7 +4,6 @@
   // reset <button> defaults
   border: none;
   background: none;
-  padding: 0;
 
   &__svg {
     height: 1em;

From c0f3706ac378de0c184d84c7b4ad32b9aee5527a Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Sun, 7 Jul 2024 19:25:46 -0400
Subject: [PATCH 31/37] remove elasticlunr imports

---
 static/search.mjs           | 2 ++
 templates/layouts/base.html | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/search.mjs b/static/search.mjs
index 500bb3e524..6eb32ef23b 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -1,3 +1,5 @@
+import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.mjs'
+
 document.getElementById("search-dialog").addEventListener('click', function (event) {
     // allow clicking out of the search dialog
     // based on https://stackoverflow.com/a/69421512
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index fe36d2f7e1..5ab1792d97 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -87,8 +87,6 @@
     <link rel="stylesheet" href="/site.css" />
     <link href="/atom.xml" rel="alternate" type="application/atom+xml" />
     <title>{{ page_title }}</title>
-    <script defer src="/search_index.en.js"></script>
-    <script defer src="/elasticlunr.min.js"></script>
     <script defer type="module">
       import SEARCH from '/search.mjs';
       window.SEARCH = SEARCH;

From 1ef188d4ab7c1e4d17419ea0435076e88395a7a5 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Sun, 7 Jul 2024 19:28:43 -0400
Subject: [PATCH 32/37] directly set `window.SEARCH` instead of exporting

---
 static/search.mjs           | 8 ++------
 templates/layouts/base.html | 5 +----
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/static/search.mjs b/static/search.mjs
index 6eb32ef23b..1210fa74e3 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -11,7 +11,7 @@ document.getElementById("search-dialog").addEventListener('click', function (eve
 });
 
 document.addEventListener("keydown", event => {
-    if(event.ctrlKey && event.key == "k") {
+    if (event.ctrlKey && event.key == "k") {
         event.preventDefault();
         SEARCH.open();
     }
@@ -23,9 +23,6 @@ class Search {
     $input = document.getElementById("search-dialog__input")
     $results = document.getElementById("search-dialog__results")
     $search_tip_list = document.querySelector("#search-dialog aside ul");
-    // <script> tags are contrived such that elasticlunr and searchIndex will be ready
-    // someday, hopefully: switch to .mjs for searchIndex and elasticlunr
-    index = elasticlunr.Index.load(window.searchIndex);
 
     open() {
         this.$dialog.showModal();
@@ -77,5 +74,4 @@ class Search {
     }
 }
 
-let SEARCH = new Search()
-export default SEARCH;
\ No newline at end of file
+window.SEARCH = new Search()
\ No newline at end of file
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 5ab1792d97..ac18a49feb 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -87,10 +87,7 @@
     <link rel="stylesheet" href="/site.css" />
     <link href="/atom.xml" rel="alternate" type="application/atom+xml" />
     <title>{{ page_title }}</title>
-    <script defer type="module">
-      import SEARCH from '/search.mjs';
-      window.SEARCH = SEARCH;
-    </script>
+    <script defer type="module" src="/search.mjs"></script>
     {% block head_extensions %}{% endblock head_extensions %}
   </head>
   <body>

From c4e66035f58d10fd18feba860099cd1c2f4e1930 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Sun, 7 Jul 2024 23:04:24 -0400
Subject: [PATCH 33/37] technically working again

---
 config.toml                  |  3 +-
 sass/components/_search.scss |  7 +++--
 static/search.mjs            | 54 +++++++++++++++++++++---------------
 templates/macros/search.html | 20 +++++++------
 4 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/config.toml b/config.toml
index 8e0bf6d8a8..8f05e80fd5 100644
--- a/config.toml
+++ b/config.toml
@@ -28,4 +28,5 @@ highlight_theme = "css"
 # Put all your custom variables here
 
 [search]
-index_format="fuse_json"
\ No newline at end of file
+index_format="fuse_json"
+include_path = true
\ No newline at end of file
diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 7306dd6bbb..62ca300534 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -24,7 +24,7 @@
   &::backdrop {
     background-color: rgba($color-grey-800, 0.7);
   }
-  
+
   .search-dialog__close {
     position: absolute;
     right: -24px;
@@ -41,7 +41,7 @@
     aspect-ratio: 3/2;
   }
 
-  form {
+  [role=form] {
     $input-height: 2em;
     display: flex;
     gap: 1em;
@@ -69,6 +69,7 @@
     margin: 0;
     padding: 1em;
     gap: 1em;
+
     a {
       &::before {
         color: $subtitle-color;
@@ -117,9 +118,11 @@
     display: inline;
     margin: 0;
     padding: 0;
+
     li {
       display: none;
     }
+
     li[data-chosen=true] {
       display: inline;
     }
diff --git a/static/search.mjs b/static/search.mjs
index 1210fa74e3..76e8e0f495 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -4,7 +4,7 @@ document.getElementById("search-dialog").addEventListener('click', function (eve
     // allow clicking out of the search dialog
     // based on https://stackoverflow.com/a/69421512
     var rect = this.getBoundingClientRect();
-    if (!(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
+    if (event.target == this && !(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
         && rect.left <= event.clientX && event.clientX <= rect.left + rect.width)) {
         this.close();
     }
@@ -19,15 +19,29 @@ document.addEventListener("keydown", event => {
 
 class Search {
     RESULTS_LIMIT = 10;
+    FUSE_OPTIONS = {
+        keys: ["title", "body"],
+        includeMatches: true,
+        minMatchCharLength: 3,
+    };
+    index = null;
+    previous_search = null;
     $dialog = document.getElementById("search-dialog")
     $input = document.getElementById("search-dialog__input")
     $results = document.getElementById("search-dialog__results")
     $search_tip_list = document.querySelector("#search-dialog aside ul");
 
-    open() {
+    async setup() {
+        this.index ??= await (await fetch("/search_index.en.json")).json();
+        this.fuse ??= new Fuse(this.index, this.FUSE_OPTIONS);
+        console.debug("fetched search index", this.index);
+    }
+
+    async open() {
         this.$dialog.showModal();
         this.change_tip();
-        this.search();
+        await this.setup();
+        await this.search();
     }
 
     close() {
@@ -48,29 +62,25 @@ class Search {
         /** @type {string} */
         const query = this.$input.value;
         console.debug(`search: "${query}"`);
+        if (query == this.previous_search) {
+            // cursor movements trigger this function
+            return;
+        }
+        this.previous_search = query;
         if (query.length == 0) {
             return;
         }
-        /** @type any[] */
-        let results = this.index.search(query, {});
-        results.forEach(result => {
-            result.ref = new URL(result.ref).pathname;
-            let similarity = result.ref
-                .split("/")
-                .map((part, i) => part == current_path[i])
-                .filter(v => v).length - 1;
-            result.score += 0.1 * similarity;
-        });
-        results.sort((a, b) => b.score - a.score);
+        /** @type {{item: any}[]} */
+        let results = this.fuse.search(query);
+        console.debug(results);
+        let results_limit = results.slice(0, this.RESULTS_LIMIT);
         this.$results.innerHTML = "";
-        results.slice(0, this.RESULTS_LIMIT).forEach(result => {
-            const a = document.createElement("a");
-            a.innerText = `${result.doc.title}`;
-            a.role = "listitem";
-            a.href = result.ref;
-            a.setAttribute("data-score", result.score)
-            this.$results.appendChild(a)
-        })
+        results_limit.forEach((result) => {
+            let a = document.createElement("a");
+            a.innerText = result.item.title;
+            a.href = result.item.path;
+            this.$results.appendChild(a);
+        });
     }
 }
 
diff --git a/templates/macros/search.html b/templates/macros/search.html
index 9135b639e6..0c47d1a472 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -1,7 +1,8 @@
 {% macro search_icon() %}
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="search-button__svg">
   <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-  <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+  <path
+    d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
 </svg>
 {% endmacro %}
 
@@ -21,17 +22,18 @@
   </button>
   <div style="display: flex; flex-direction: column; height: 100%;">
     <div class="search-dialog__inner">
-      <form>
+      <div role="form">
         <label aria-label="Search all of Bevy..." for="search-dialog__input">
           {{ search::search_icon() }}
         </label>
-        <input
-          id="search-dialog__input"
-          placeholder="Search all of Bevy..."
-          autofocus
-          onkeyup="SEARCH.search()"
-        >
-      </form>
+        <input id="search-dialog__input" placeholder="Search all of Bevy..." autofocus onkeyup="SEARCH.search()">
+        <select>
+          <option value="everything">Everything</option>
+          <option value="docs">Docs</option>
+          <option value="assets">Assets</option>
+          <option value="examples">Examples</option>
+        </select>
+      </div>
       <ul id="search-dialog__results"> </ul>
     </div>
     <aside class="search-dialog__tip" aria-label="tip" style="display: flex; padding-top: 0.5em;">

From 6c58fec2978a2e08c085c5704598b559bf0df602 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Tue, 9 Jul 2024 10:27:55 -0400
Subject: [PATCH 34/37] change the placeholder when changing the dropdown

---
 static/search.mjs            | 18 ++++++++++++++++++
 templates/macros/search.html |  4 ++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/static/search.mjs b/static/search.mjs
index 76e8e0f495..f304acf74c 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -29,6 +29,7 @@ class Search {
     $dialog = document.getElementById("search-dialog")
     $input = document.getElementById("search-dialog__input")
     $results = document.getElementById("search-dialog__results")
+    $select = document.getElementById("search-dialog__select")
     $search_tip_list = document.querySelector("#search-dialog aside ul");
 
     async setup() {
@@ -40,6 +41,7 @@ class Search {
     async open() {
         this.$dialog.showModal();
         this.change_tip();
+        this.update_placeholder();
         await this.setup();
         await this.search();
     }
@@ -82,6 +84,22 @@ class Search {
             this.$results.appendChild(a);
         });
     }
+
+    update_placeholder() {
+        let second_part = "";
+        switch (this.$select.value) {
+            case "docs":
+                second_part = "'s Documentation";
+                break;
+            case "assets":
+                second_part = "'s Assets";
+                break;
+            case "examples":
+                second_part = "'s Examples";
+                break;
+        }
+        this.$input.setAttribute("placeholder", `Search Bevy${second_part}...`)
+    }
 }
 
 window.SEARCH = new Search()
\ No newline at end of file
diff --git a/templates/macros/search.html b/templates/macros/search.html
index 0c47d1a472..c021d22051 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -26,8 +26,8 @@
         <label aria-label="Search all of Bevy..." for="search-dialog__input">
           {{ search::search_icon() }}
         </label>
-        <input id="search-dialog__input" placeholder="Search all of Bevy..." autofocus onkeyup="SEARCH.search()">
-        <select>
+        <input id="search-dialog__input" autofocus onkeyup="SEARCH.search()">
+        <select id="search-dialog__select" onchange="SEARCH.update_placeholder()">
           <option value="everything">Everything</option>
           <option value="docs">Docs</option>
           <option value="assets">Assets</option>

From da46706b2448de967bcfa71902ee1286e4f17581 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Tue, 9 Jul 2024 10:31:06 -0400
Subject: [PATCH 35/37] add a semi

---
 static/search.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/search.mjs b/static/search.mjs
index f304acf74c..f5f67e09fe 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -98,7 +98,7 @@ class Search {
                 second_part = "'s Examples";
                 break;
         }
-        this.$input.setAttribute("placeholder", `Search Bevy${second_part}...`)
+        this.$input.setAttribute("placeholder", `Search Bevy${second_part}...`);
     }
 }
 

From e732d398121e8317610a6a828e48b664c99320f1 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Tue, 9 Jul 2024 10:32:13 -0400
Subject: [PATCH 36/37] update_placeholder => change_placeholder

to match change_tip()
---
 sass/components/_search.scss |  2 +-
 static/search.mjs            | 33 +++++++++++++++++----------------
 templates/macros/search.html |  4 ++--
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 62ca300534..9917fe60a2 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -101,7 +101,7 @@
       }
 
       &[href^="/examples/"]::before {
-        content: "examples:";
+        content: "examples (webgl):";
       }
 
       &[href^="/examples-webgpu/"]::before {
diff --git a/static/search.mjs b/static/search.mjs
index f5f67e09fe..b2584dbdf3 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -41,7 +41,7 @@ class Search {
     async open() {
         this.$dialog.showModal();
         this.change_tip();
-        this.update_placeholder();
+        this.change_placeholder();
         await this.setup();
         await this.search();
     }
@@ -59,6 +59,22 @@ class Search {
             ));
     }
 
+    change_placeholder() {
+        let second_part = "";
+        switch (this.$select.value) {
+            case "docs":
+                second_part = "'s Documentation";
+                break;
+            case "assets":
+                second_part = "'s Assets";
+                break;
+            case "examples":
+                second_part = "'s Examples";
+                break;
+        }
+        this.$input.setAttribute("placeholder", `Search Bevy${second_part}...`);
+    }
+
     async search() {
         let current_path = window.location.pathname.split("/");
         /** @type {string} */
@@ -85,21 +101,6 @@ class Search {
         });
     }
 
-    update_placeholder() {
-        let second_part = "";
-        switch (this.$select.value) {
-            case "docs":
-                second_part = "'s Documentation";
-                break;
-            case "assets":
-                second_part = "'s Assets";
-                break;
-            case "examples":
-                second_part = "'s Examples";
-                break;
-        }
-        this.$input.setAttribute("placeholder", `Search Bevy${second_part}...`);
-    }
 }
 
 window.SEARCH = new Search()
\ No newline at end of file
diff --git a/templates/macros/search.html b/templates/macros/search.html
index c021d22051..ca86b7a7d8 100644
--- a/templates/macros/search.html
+++ b/templates/macros/search.html
@@ -27,9 +27,9 @@
           {{ search::search_icon() }}
         </label>
         <input id="search-dialog__input" autofocus onkeyup="SEARCH.search()">
-        <select id="search-dialog__select" onchange="SEARCH.update_placeholder()">
+        <select id="search-dialog__select" onchange="SEARCH.change_placeholder()">
           <option value="everything">Everything</option>
-          <option value="docs">Docs</option>
+          <option value="docs">Documentation</option>
           <option value="assets">Assets</option>
           <option value="examples">Examples</option>
         </select>

From d93bdd0f7ac92497359f24b89d5019db6c5584c4 Mon Sep 17 00:00:00 2001
From: SIGSTACKFAULT <sigstackfault@gmail.com>
Date: Tue, 9 Jul 2024 10:37:56 -0400
Subject: [PATCH 37/37] focus the search input if the dialog is already open

---
 static/search.mjs | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/static/search.mjs b/static/search.mjs
index b2584dbdf3..ff0d15a943 100644
--- a/static/search.mjs
+++ b/static/search.mjs
@@ -39,11 +39,16 @@ class Search {
     }
 
     async open() {
-        this.$dialog.showModal();
-        this.change_tip();
-        this.change_placeholder();
-        await this.setup();
-        await this.search();
+        if(this.$dialog.getAttribute("open") !== null) {
+            // already open
+            this.$input.focus();
+        } else {
+            this.$dialog.showModal();
+            this.change_tip();
+            this.change_placeholder();
+            await this.setup();
+            await this.search();
+        }
     }
 
     close() {