docsearch: Upgrade to v3 (#231)

See:
- https://docsearch.algolia.com/docs/DocSearch-v3
- https://docsearch.algolia.com/docs/migrating-from-v2

src/includes/footer.html

@@ -19,3 +19,6 @@
 <!-- Fathom - beautiful, simple website analytics -->
 <script src="https://mule.caddyserver.com/script.js" site="GVMGKAKP" honor-dnt="true" defer></script>
 <!-- / Fathom -->
+
+<!-- Algolia DocSearch -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

src/includes/head.html

@@ -1,5 +1,8 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<link rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin />
+
 <link rel="icon" href="/resources/images/favicon.png">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:400,700|Maven+Pro:400,700,900|Montserrat:400,700|PT+Mono&display=swap">
 <link rel="stylesheet" href="/resources/css/common.css">
@@ -23,9 +26,8 @@
 <meta name="twitter:image" content="https://caddyserver.com/resources/images/caddy-open-graph.jpg">
 <meta name="twitter:url" value="https://caddyserver.com/">
 
-<!-- Algolia -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<!-- Algolia DocSearch -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
 
 <!-- Global site tag (gtag.js) - Google Analytics (Stack Holdings) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-2DLB04LK4P"></script>

src/includes/header-nav.html

@@ -1,6 +1,6 @@
 <!--TODO: add class="current" to the current link-->
 <nav>
-	<input type="search" id="search" placeholder="🔍 Search...">
+	<div id="search"></div>
 	<a href="/v2">v2 <span class="new">new</span></a>
 	<a href="/download">Download</a>
 	<a href="/docs/">Documentation</a>

src/resources/css/common.css

@@ -82,29 +82,18 @@ header nav > a.current {
 	font-weight: bold;
 }
 
-/* Algolia search */
+/* Algolia DocSearch */
 #search {
-	border-radius: 5px;
-	border: 1px solid rgba(0, 0, 0, .2);
-	font-size: 14px;
-	padding: 8px;
-	background: none;
-	width: 200px;
-	max-width: 100%;
-	margin-right: 20px;
-	margin-top: 4px;
-	outline: none;
+	display: inline-block;
+	vertical-align: middle;
 }
-
-#search:focus {
-	background: #fff;
+.DocSearch-Container {
+	color: initial;
 }
-
-.algolia-autocomplete .ds-dropdown-menu {
-	width: 90%;
-	max-width: 800px;
+.DocSearch-Footer {
+	margin-top: 0;
 }
-/* End Algolia search */
+/* End Algolia DocSearch */
 
 header nav .new {
 	background-color: #ffe300;

src/resources/css/docs.css

@@ -918,13 +918,16 @@ td code {
 		color: black;
 	}
 
+	/* Algolia DocSearch */
 	#search {
-		background: rgb(28, 52, 79);
-		color: #bdd6f7;
-	}
-	#search:focus {
-		background: rgb(46, 70, 96);
+		--docsearch-searchbox-background: rgb(28, 52, 79);
+		--docsearch-searchbox-focus-background: rgb(28, 52, 79);
+		--docsearch-text-color: #bdd6f7;
+		--docsearch-muted-color: #96a9c4;
+		--docsearch-key-gradient: linear-gradient(-26.5deg, #060e17 0%, rgb(47, 62, 72) 100%);
+		--docsearch-key-shadow: inset 0 -2px 0 0 #4c4c56, inset 0 0 1px 1px rgb(70, 70, 70), 0 1px 2px 1px rgba(77, 79, 91, 0.4);
 	}
+	/* End Algolia DocSearch */
 
 	#paper1,
 	#paper2 {

src/resources/js/common.js

@@ -1,10 +1,10 @@
 document.addEventListener('DOMContentLoaded', function() {
 	// Algolia search
 	docsearch({
+		appId: "BH4D9OD16A",
 		apiKey: '14275a785f6ebd31d162f9d2d8fc0125',
 		indexName: 'caddyserver',
-		inputSelector: '#search',
-		debug: false // Set debug to true if you want to inspect the dropdown
+		container: '#search',
 	});
 });