mirror of
https://github.com/codeninjasuk/codeninjasuk.github.io.git
synced 2024-12-01 19:46:52 -05:00
63 lines
2.1 KiB
HTML
63 lines
2.1 KiB
HTML
|
<!-- Including InstantSearch.js library and styling -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css">
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Instanciating InstantSearch.js with Algolia credentials
|
||
|
|
const search = instantsearch({
|
||
|
|
appId: '{{ site.algolia.application_id }}',
|
||
|
|
apiKey: '{{ site.algolia.search_only_api_key }}',
|
||
|
|
indexName: '{{ site.algolia.index_name }}',
|
||
|
|
searchParameters: {
|
||
|
|
restrictSearchableAttributes: [
|
||
|
|
'title',
|
||
|
|
'content'
|
||
|
|
]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const hitTemplate = function(hit) {
|
||
|
|
const url = hit.url;
|
||
|
|
const hightlight = hit._highlightResult;
|
||
|
|
const title = hightlight.title && hightlight.title.value || "";
|
||
|
|
const content = hightlight.html && hightlight.html.value || "";
|
||
|
|
|
||
|
|
return `
|
||
|
|
<div class="list__item">
|
||
|
|
<article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
|
||
|
|
<h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2>
|
||
|
|
<div class="archive__item-excerpt" itemprop="description">${content}</div>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Adding searchbar and results widgets
|
||
|
|
search.addWidget(
|
||
|
|
instantsearch.widgets.searchBox({
|
||
|
|
container: '.search-searchbar',
|
||
|
|
{% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %}
|
||
|
|
placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}'
|
||
|
|
})
|
||
|
|
);
|
||
|
|
search.addWidget(
|
||
|
|
instantsearch.widgets.hits({
|
||
|
|
container: '.search-hits',
|
||
|
|
templates: {
|
||
|
|
item: hitTemplate,
|
||
|
|
empty: '{{ site.data.ui-text[site.locale].search_algolia_no_results | default: "No results" }}',
|
||
|
|
}
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
// Starting the search only when toggle is clicked
|
||
|
|
$(document).ready(function () {
|
||
|
|
$(".search__toggle").on("click", function() {
|
||
|
|
if(!search.started) {
|
||
|
|
search.start();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|