Fix search, upgrade Algolia docsearch v3 (#30241)

_config.yml

@@ -84,7 +84,7 @@ collections:
 
 #Search
 algolia:
-  api_key: "ae96d94b201c5444c8a443093edf3efb"
+  api_key: "ba6f7e6d97b3d3d2f778978c742a47c6"
 
 # Twitter
 twitter_user: balloob

sass/custom/_paulus.scss

@@ -12,33 +12,27 @@ $primary-color: #1abcf2;
   }
 }
 
-.search-container {
+.docsearch {
-  position: absolute;
+  .DocSearch-Button {
-  top: 0;
+    padding: 0px;
-  left: 0;
+    margin-top: 16px;
-  right: 0;
+    margin-left: 0px;
-  bottom: 0;
+    margin-right: 0px;
-  background-color: white;
+    background: none;
-  padding-top: 19px;
+    &:hover {
-  padding-right: 15%;
+      box-shadow: none;
-
-  .search {
-    max-width: 500px;
-    width: 100%;
-    border-bottom: 2px solid $primary-color;
-    float: right;
-
-    .algolia-autocomplete {
-      width: calc(100% - 64px);
-      margin: 0 10px;
-    }
-
-    input {
-      border: 0;
-      width: 100%;
-      outline: none;
     }
   }
+  .DocSearch-Button-Placeholder {
+    display: none;
+  }
+  .DocSearch-Button-Keys {
+    display: none;
+  }
+  .DocSearch-Search-Icon {
+    margin-right: 8px;
+    color: $primary-color;
+  }
 }
 
 .integration-alert-container {
@@ -75,12 +69,6 @@ a.integration-alert {
 }
 
 @media only screen and (max-width: $menu-collapse) {
-  .search-container {
-    z-index: 20;
-    padding-right: 5px;
-    padding-left: 5px;
-  }
-
   .feedback {
     margin-bottom: 32px;
   }
@@ -895,6 +883,12 @@ code {
 
       .search404-container {
         margin-bottom: 32px;
+        display: grid;
+
+        #search404 {
+          display: flex;
+          justify-self: center;
+        }
       }
     }
   }
@@ -908,9 +902,11 @@ code {
 
       .search404-container {
         margin-bottom: 32px;
+        display: grid;
 
         #search404 {
-          width: 420px;
+          display: flex;
+          justify-self: center;
         }
       }
     }

source/404.html

@@ -8,24 +8,15 @@ body_id: not_found
 <h2>Oh no! This page does not exist 😞</h2>
 
 <div class='search404-container'>
-    <div class='search404'>
+    <div id="search404"></div>
-        <i class="icon-search"></i>
-            <input id='search404' placeholder='Search the documentation …'>
-        <a href='#' class='search404-close'><i class="icon-remove-sign"></i></a>
-    </div>
 </div>
 
-<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@3/dist/umd/index.min.js"></script>
 <script type="text/javascript">
 docsearch({
-  apiKey: '{{ site.algolia.api_key }}',
+  container: '#search404',
+  appId: 'FBHBYS3J0U',
   indexName: 'home-assistant',
-  inputSelector: '#search404',
+  apiKey: "{{ site.algolia.api_key }}",
-  debug: false // Set debug to true if you want to inspect the dropdown
-});
-
-document.querySelector('.search404-close').addEventListener('click', function(ev) {
-  ev.preventDefault();
-  document.querySelector('#search404').value = "";
 });
 </script>

source/_includes/javascripts/scripts.html

@@ -1,29 +1,16 @@
 <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.3.1/lite-youtube.js"></script>
 
 <script src="{{ '/javascripts/prism.js' | cache_buster }}" type="text/javascript" defer></script>
-
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@3/dist/umd/index.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
-<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
 <script type="text/javascript">
 docsearch({
-  apiKey: "{{ site.algolia.api_key }}",
+  container: '#docsearch',
+  appId: 'FBHBYS3J0U',
   indexName: 'home-assistant',
-  inputSelector: '#search',
+  apiKey: "{{ site.algolia.api_key }}",
-  debug: false // Set debug to true if you want to inspect the dropdown
 });
-
 document.querySelector('.site-title').addEventListener('contextmenu', function(ev) {
   ev.preventDefault();
   document.location.assign("https://design.home-assistant.io/#brand/logo")
 });
-document.querySelector('.search .close').addEventListener('click', function(ev) {
-  ev.preventDefault();
-  document.querySelector('.search-container').style.display = 'none';
-});
-document.querySelector('.show-search').addEventListener('click', function(ev) {
-  ev.preventDefault();
-  document.querySelector('.search-container').style.display = 'block';
-  document.getElementById('toggle').checked = false;
-  document.querySelector('.search-container input').focus();
-});
 </script>

source/_includes/site/head.html

@@ -29,6 +29,7 @@
     <meta name="twitter:image" content="{{ page.og_image | default: "/images/default-social.png" | prepend: site.url }}">
     {% if site.social.mastodon.account %}<link rel="me" href="{{ site.social.mastodon.account }}">{% endif %}
 
+    <link href="https://cdn.jsdelivr.net/npm/@docsearch/css@3/dist/style.min.css" rel="stylesheet" />
     <link href="{{ '/stylesheets/prism.css' | cache_buster }}" rel="stylesheet">
     <link href="{{ '/stylesheets/screen.css' | cache_buster }}" media="screen, projection, print" rel="stylesheet">
     <link href="{{ site.subscribe_rss }}" rel="alternate" title="{{ site.title }}" type="application/atom+xml">

source/_includes/site/header.html

@@ -49,18 +49,10 @@
           <li><a href="/blog/">Blog</a></li>
           <li><a href="/help/">Need help?</a></li>
           <li>
-            <a href="#" class="show-search" aria-label="Show search" ><i class="icon-search"></i></a>
+            <div class="docsearch" id="docsearch"></div>
           </li>
         </ul>
       </nav>
-
-      <div class="search-container" style="display: none">
-        <div class="search">
-          <i class="icon-search"></i>
-          <input id="search" placeholder="Search the documentation…" />
-          <a href="#" class="close"><i class="icon-remove-sign"></i></a>
-        </div>
-      </div>
     </div>
   </div>
 </div>