Search improvement (#1034)

* Search improvement This is a bigger update to the search functionality on the site. I updated the LunrJS library, which powers our search. The latest version has some extra features like fuzzy search and term presence. This is now enabled and highlighted to users on the search page via an expandable "Search tips" section. For simple single-term searches, the site uses a slightly fuzzy search. So if you type "bech31", it will also find "bech32". Or if you type "wxllet", it will also find "wallet". Helps with those small typos or easy-to-misspell technical terms. I also removed our SEO placeholder pages from the search index. These are currently causing search results that read "..." on the site. Not pretty. The search page is also removed from search results. Search results now also have a small dot next to them to indicate the quality/confidence of the result. Green is a good match, grey is just an OK match. Colors can range in between those two based on the scores. The search tips are a little hidden, just being visible on the search page. Would be nice to include them somehow in the search modal as well, without cluttering things up. Probably good to test this thoroughly before finalizing. * Adding tool tip to search result match quality indicator Still a bit hidden, but at least there's a way now to see what the gray or green circle means. * Removing two console logs * Fixing small bug per feedback
BitcoinDesign · Sep 22, 2023 · f5739bf · f5739bf
1 parent d7a79ce
commit f5739bf
Show file tree

Hide file tree

Showing 8 changed files with 362 additions and 115 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -39,11 +39,10 @@
     </div>
 
     <div class="search-input-wrap" id="toggled-search" aria-hidden="true">
-      <form action="/search.html" method="get">
-        <input type="text" id="search-input" name="query" class="search-input" tabindex="0" placeholder="Search" aria-label="Search {{ site.title }}" autocomplete="off">
+      <form action="/search" method="get">
+        <input type="text" id="search-input" name="query" class="search-input" tabindex="0" placeholder="Search..." aria-label="Search {{ site.title }}" autocomplete="off">
       </form>
       <ul id="search-results"></ul>
     </div>
-
   </div>
 </header>
diff --git a/_sass/minima/_search-page.scss b/_sass/minima/_search-page.scss
@@ -13,20 +13,24 @@
 
   form {
     input {
-        display: block;
-        width: 100%;
-        height: 60px;
-        border: 1px solid rgba(var(--front), 0.2);
-        font-size: 27px;
-        padding-left: 20px;
-        padding-right: 20px;
-        box-sizing: border-box;
-
-        &:active,
-        &:focus {
-            border-color: var(--primary-color);
-            outline: none;
-        }
+      display: block;
+      width: 100%;
+      height: 60px;
+      border: 1px solid rgba(var(--front), 0.2);
+      font-size: 27px;
+      padding-left: 20px;
+      padding-right: 20px;
+      box-sizing: border-box;
+
+      &:active,
+      &:focus {
+        border-color: var(--primary-color);
+        outline: none;
+      }
+
+      &::placeholder {
+        color: #cccccc;
+      }
     }
   }
 
@@ -36,45 +40,110 @@
     margin: 20px 0 0 0;
 
     li {
-        h3 {
-            margin-top: 0;
-            margin-bottom: 0;
-            font-size: 18px;
-            line-height: 1.2;
-            color: var(--frontHex);
-            transition: color 100ms $ease;
+      border-bottom: 1px solid #ededed;
+
+      h3 {
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: 18px;
+        line-height: 1.2;
+        color: var(--frontHex);
+        transition: color 100ms $ease;
+
+        span {
+          margin-left: 5px;
+          vertical-align: middle;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 4px;
+          transform: translateY(-1px);
         }
+      }
 
-        a {
-            display: block;
-            padding: 15px 0;
-            transition: background-color 100ms $ease;
-
-            p {
-                margin-top: 5px;
-                margin-bottom: 0;
-                font-size: 16px;
-                line-height: 1.4;
-                color: rgba(var(--front), 0.7);
-            }
+      a {
+        display: block;
+        padding: 15px 0;
+        transition: background-color 100ms $ease;
+
+        p {
+            margin-top: 5px;
+            margin-bottom: 0;
+            font-size: 16px;
+            line-height: 1.4;
+            color: rgba(var(--front), 0.7);
+        }
 
-            &:hover {
-                text-decoration: none;
-                background-color: rgba(var(--primary-color-rgb), 0.05);
+        &:hover {
+            text-decoration: none;
+            background-color: rgba(var(--primary-color-rgb), 0.05);
 
-                h3 {
-                    color: var(--primary-color);
-                }
+            h3 {
+                color: var(--primary-color);
             }
         }
+      }
+
+      &.no-results {
+        padding: 15px 0;
+      }
+    }
+  }
+
+  #search-tips {
+    padding: 15px 0;
+
+    button {
+      appearance: none;
+      background-color: transparent;
+      border-width: 0;
+      padding: 0;
+      display: flex;
+      gap: 3px;
+      font-size: 15px;
+      align-items: center;
+      transition: all 150ms $ease;
 
-        > h3 {
-            padding: 15px 0;
+      svg {
+        width: 14px;
+        height: 14px;
+        transition: all 150ms $ease;
+      }
+
+      &:hover {
+        color: var(--primary-color);
+        cursor: pointer;
+      }
+
+      &[aria-expanded="true"] {
+        svg {
+          transform: rotate(90deg);
         }
+      }
+    }
+  }
+
+  #search-tips-content {
+    p {
+      font-size: 15px;
+    }
 
-        & + li {
-            border-top: 1px solid #ededed;
+    ul {
+      margin-top: 5px;
+
+      li {
+        font-size: 15px;
+
+        em {
+          font-style: normal;
+          font-weight: 500;
+          color: var(--front);
         }
+      }
+
+      & + p {
+        margin-top: 5px;
+      }
     }
   }
 }
diff --git a/_sass/minima/_site-header.scss b/_sass/minima/_site-header.scss
@@ -188,6 +188,16 @@
                         line-height: 1.2;
                         color: var(--frontHex);
                         transition: color 100ms $ease;
+
+                        span {
+                            margin-left: 5px;
+                            vertical-align: middle;
+                            display: inline-block;
+                            width: 8px;
+                            height: 8px;
+                            border-radius: 4px;
+                            transform: translateY(-1px);
+                        }
                     }
 
                     a {