From a368b98fc0c5e8a91072b2a1605923969c6be2de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Wed, 5 Apr 2023 08:49:19 +0200
Subject: [PATCH] Add algolia docsearch (#26861)

---
 source/_includes/head.html   |  2 ++
 source/_includes/search.html | 54 ++++++++----------------------------
 2 files changed, 14 insertions(+), 42 deletions(-)

diff --git a/source/_includes/head.html b/source/_includes/head.html
index eb046acc042..2b752b7bd7b 100644
--- a/source/_includes/head.html
+++ b/source/_includes/head.html
@@ -32,4 +32,6 @@
     <link rel='shortcut icon' href='{{ site.baseurl }}images/favicon.ico' />
     <link rel='icon' type='image/png' href='{{ site.baseurl }}images/favicon-192x192.png' sizes='192x192' />
     <script defer src="{{ site.baseurl }}assets/js/jquery.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
   </head>
diff --git a/source/_includes/search.html b/source/_includes/search.html
index e93a1624bc7..d9d4594d378 100644
--- a/source/_includes/search.html
+++ b/source/_includes/search.html
@@ -1,5 +1,5 @@
 <div class="h-full w-full fixed z-[-1] bg-[#0101018f] top-0" id="algolia-search-box">
-    <div class="w-[90%] md:w-[50%] mx-auto left-[-50%] translate-[-50%] mt-5 md:mt-[100px]">
+    <div class="w-[90%] md:w-[25%] mx-auto left-[-25%] translate-[-50%] mt-5 md:mt-[100px]">
         <div class="flex justify-between">
             <div class="  shadow-md shadow-gray-600 w-full mr-3 bg-white p-3 rounded-full flex">
                 <p
@@ -7,8 +7,8 @@
                     <img width="19.19" src="{{ site.baseurl }}images/icon/search.svg" />
 
                 </p>
-                <input class="w-[80%] pl-3 text-lg  font-semibold text-black focus:outline-none"
-                    placeholder="alright">
+                <input id="algolia-search-input" class="w-[80%] pl-3 text-lg  font-semibold text-black focus:outline-none"
+                    placeholder="Search..." autofocus>
 
             </div>
             <div
@@ -21,43 +21,13 @@
             </div>
 
         </div>
-        <div class=" bg-white h-fit rounded-3xl p-4 shadow-xl shadow-gray-900 mt-5">
-            <div class="search-result">
-                <div class="bg-[#F8F8F8] rounded-md p-3 mb-3">
-                    <div class="flex justify-between font-semibold text-[16px]">
-                        <p class="">Onboarding Home Assistant</p>
-                        <p class="opacity-40">Getting Started</p>
-                    </div>
-                    <div class="bg-white rounded-sm p-1 mt-2">
-                        <p class="text-[#41BDF5] text-[14px]">Alright<span class="text-black opacity-40">, you made
-                                it here. The tough part is done.</span></p>
-                    </div>
-
-                </div>
-                <div class="bg-[#F8F8F8] rounded-md p-3 mb-3">
-                    <div class="flex justify-between font-semibold text-[16px]">
-                        <p class="">Splitting up the configuration</p>
-                        <p class="opacity-40">Docs / Configuration</p>
-                    </div>
-                    <div class="bg-white rounded-sm p-1 mt-2">
-                        <p class="text-[#41BDF5] text-[14px]">Alright<span class="text-black opacity-40">, so we’ve
-                                got the single integrations and the include statements in the base ...</span></p>
-                    </div>
-
-                </div>
-                <div class="bg-[#F8F8F8] rounded-md p-3">
-                    <div class="flex justify-between font-semibold text-[16px]">
-                        <p class="">Template Light</p>
-                        <p class="opacity-40">Integration</p>
-                    </div>
-                    <div class="bg-white rounded-sm p-1 mt-2">
-                        <p class="text-[#41BDF5] text-[14px]">Template Light<span
-                                class="text-black opacity-40"></span></p>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-
     </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+    docsearch({
+      apiKey: "{{ site.algolia.api_key }}",
+      indexName: 'home-assistant',
+      inputSelector: '#algolia-search-input',
+      debug: false // Set debug to true if you want to inspect the dropdown
+    });
+</script>
\ No newline at end of file