Upgrade DocSearch UI to v3

layouts/partials/head.html

@@ -64,7 +64,10 @@
     ga('send', 'pageview');
   </script>
   {{ end }}
-  <!-- Algolia DocSearch, Reference: https://community.algolia.com/docsearch/dropdown.html -->
+  <!-- Algolia DocSearch v3, Reference: https://docsearch.algolia.com/docs/DocSearch-v3 -->
   <!-- Before the closing </head> -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
-</head>
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
+  />
+</head>

layouts/partials/header.html

@@ -20,10 +20,7 @@
           {{ end }}
           <span class="navbar-item">
             <p class="control has-icons-right">
-              <input class="input" type="text" placeholder="Search">
-              <span class="icon is-small is-right">
-                <i class="fa fa-search"></i>
-              </span>
+              <div id="docsearch"></div>
             </p>
           </span>
           <!--

layouts/partials/scripts-footer.html

@@ -1,21 +1,16 @@
 {{/* partial "cookies-popup.html" . */}}
 {{ partial "javascript.html" . }}
-{{ if eq (getenv "HUGO_ENV") "production" }}
-<!-- Algolia DocSearch, Reference: https://community.algolia.com/docsearch/dropdown.html -->
+<!-- Algolia DocSearch, Reference: https://docsearch.algolia.com/docs/DocSearch-v3 -->
 <!-- Before the closing </body> -->
-<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
+<script src="{{ "js/docsearch-v3.js" | relURL }}"></script>
+{{ if eq (getenv "HUGO_ENV") "production" }}
 <script>
   docsearch({
-    // Your apiKey and indexName will be given to you once
-    // we create your config
-    apiKey: {{ getenv "SEARCH_API_KEY" }},
+    container: '#docsearch',
+    appId: {{ getenv "SEARCH_APP_ID" }},
     indexName: {{ getenv "SEARCH_INDEX_NAME" }},
-    appId: {{ getenv "SEARCH_APP_ID" }}, // Should be only included if you are running DocSearch on your own.
-    // Replace inputSelector with a CSS selector
-    // matching your search input
-    inputSelector: 'input',
-    // Set debug to true if you want to inspect the dropdown
-    debug: false,
+    apiKey: {{ getenv "SEARCH_API_KEY" }},
   });
 </script>
-{{ end }}
+{{ end }}

static/js/docsearch-v3.js

@@ -0,0 +1,2 @@
+import docsearch from '@docsearch/js';
+import '@docsearch/css';