Add algolia docsearch (#26861)

This commit is contained in:
Joakim Sørensen 2023-04-05 08:49:19 +02:00 committed by GitHub
parent 5737c010cb
commit a368b98fc0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 42 deletions

View File

@ -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>

View File

@ -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 weve
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>
</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>