Permalink
Browse files

add Algolia as a search engine

  • Loading branch information...
sawilde committed Mar 23, 2017
1 parent 9db56da commit 4c4e6983c9d8e6daefb9bb5af9fa7ed44f40af0f
@@ -0,0 +1,35 @@
.algolia-autocomplete {
width: 80%;
max-width: 710px;
}
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
width: 100%;
min-height: 30px;
text-indent: 10px;
}
.aa-input {
border-radius: 20px;
background: url(../images/Algolia_logo_bg-white.png) no-repeat;
background-size: 10%;
background-position: 98% 50%;
}
.algolia-autocomplete .aa-hint {
color: #999;
}
.algolia-autocomplete .aa-dropdown-menu {
width: 100%;
background-color: #fff;
border: 1px solid #999;
border-top: none;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
cursor: pointer;
padding: 5px 4px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
background-color: #B2D7FF;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
font-weight: bold;
font-style: normal;
}
Binary file not shown.
Binary file not shown.
@@ -16,12 +16,13 @@
<link rel="shortcut icon" href="{{asset "/favicon.ico"}}">

{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/nav-menu-button.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/fa-screen.css"}}" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/algolia.css"}}" />

{{!-- Ghost outputs important style and meta data with this tag --}}
{{ghost_head}}
@@ -20,8 +20,30 @@

{{!-- The main content area on the homepage --}}
<main id="content" class="content" role="main">

<div style="text-align: center;">
<input type="search" placeholder="Search posts" id="search-input" />
</div>

{{!-- The tag below includes the post loop - partials/loop.hbs --}}
{{> "loop"}}


<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script>
var client = algoliasearch('94Y9VHH6O4', '888a2872fa5c97504b2fc816b7247aa6')
var index = client.initIndex('siteIndex');
autocomplete('#search-input', { hint: false }, [
{
source: autocomplete.sources.hits(index, { hitsPerPage: 7 }),
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.title.value.link(suggestion.url);
}
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
console.log(suggestion, dataset);
});
</script>
</main>

0 comments on commit 4c4e698

Please sign in to comment.