Add search powered by Algolia

This commit is contained in:
Paulus Schoutsen 2017-06-22 00:17:49 -07:00
parent e553a58e6c
commit 6bc3041fe2
7 changed files with 84 additions and 6 deletions

View file

@ -9,4 +9,12 @@
<nav>
{% include site/navigation.html %}
</nav>
<div class='search-container' style='display: none'>
<div class='search'>
<i class="icon-search"></i>
<input id='search' placeholder='Search the docs…'>
<a href='#' class='close'><i class="icon-remove-sign"></i></a>
</div>
</div>
</div>

View file

@ -16,4 +16,5 @@
<li><a href="/developers/">Developers</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/help/">Need help?</a></li>
<li><a href='#' class='show-search'><i class="icon-search"></i></a></li>
</ul>

View file

@ -0,0 +1,20 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
apiKey: 'ae96d94b201c5444c8a443093edf3efb',
indexName: 'home-assistant',
inputSelector: '#search',
debug: false // Set debug to true if you want to inspect the dropdown
});
document.querySelector('.search .close').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'none';
});
document.querySelector('.show-search').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'block';
document.getElementById('toggle').checked = false;
document.querySelector('.search-container input').focus();
});
</script>

View file

@ -5,8 +5,9 @@
{% include javascripts/google_analytics.html %}
{% include javascripts/disqus.html %}
{% include javascripts/algolia.html %}
{% if page.sidebar != false %}
{% include javascripts/github.html %}
{% include javascripts/delicious.html %}
{% endif %}
{% endif %}

View file

@ -6,7 +6,7 @@ layout: compress
<body {% if page.body_id %} id="{{ page.body_id }}"{% endif %}>
<header>
<header class='site-header'>
{% include site/header.html %}
</header>
@ -42,4 +42,4 @@ layout: compress
{% include javascripts/scripts.html %}
</body>
</html>
</html>