feat: migrate to DocSearch v3

Author: schuer

_includes/head.html

@@ -11,10 +11,13 @@
     <!-- Google Search Console Verification -->
     <meta name="google-site-verification" content="ioXn_nowJicMMFvLjFUGAq20R66CkPiGJ0mXmktqoZU" />
 
+    <!-- preconnect -->
+    <link rel="preconnect" href="https://KA4S83EGGX-dsn.algolia.net" crossorigin />
+
     <!-- styles -->
     <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
 
     <!-- urls -->
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">

_includes/header.html

@@ -13,12 +13,7 @@
   </a>
 </div>
 
-<div class="header__search">
-  <div class="searchfield">
-    <input class="searchfield__input" type="text" name="q" placeholder="Tricks durchsuchen">
-    <i class="searchfield__icon">{% include svg/search.svg %}</i>
-  </div>
-</div>
+<div class="header__search" id="docsearch"></div>
 
 <div class="header__options">
   <a class="header__link header__link--github" href="https://github.com/FriendsOfREDAXO/tricks">{% include svg/github.svg %}</a>

_layouts/default.html

@@ -44,14 +44,21 @@
     <div class="cover"></div>
 
     <!-- docsearch -->
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-    <script type="text/javascript"> docsearch({
-     apiKey: '8151557aef4f704ed7be18edde51bc74',
-     indexName: 'redaxo_tricks',
-     inputSelector: '.searchfield__input',
-     debug: false
-    });
-    </script>
+    <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+    <script>docsearch({
+      appId: 'KA4S83EGGX',
+      apiKey: '27bcabae898668f3b0412435394d4ee5',
+      indexName: 'redaxo_tricks',
+      container: '#docsearch',
+      maxResultsPerGroup: 25,
+      placeholder: 'Tricks durchsuchen',
+      translations: {
+        button: {
+          buttonText: 'Tricks durchsuchen',
+          buttonAriaLabel: 'Tricks durchsuchen',
+        },
+      }
+    });</script>
 
     <!-- scripts -->
     <script src="{{ '/assets/vendor/pjax.js/pjax.min.js' | relative_url }}"></script>

_sass/_algolia-autocomplete.scss

@@ -61,6 +61,9 @@
 .header__search {
   flex: 1;
   margin: 0 2vw 0 5vw;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 
   @include md {
     margin: 0 5vw;

_sass/_header.scss

@@ -7,7 +7,6 @@
 @import "variables";
 @import "mixins";
 
-@import "algolia-autocomplete";
 @import "authors";
 @import "avatar";
 @import "base";