aboutsummaryrefslogtreecommitdiff
path: root/_includes/search/algolia-search-scripts.html
diff options
context:
space:
mode:
Diffstat (limited to '_includes/search/algolia-search-scripts.html')
-rw-r--r--_includes/search/algolia-search-scripts.html54
1 files changed, 54 insertions, 0 deletions
diff --git a/_includes/search/algolia-search-scripts.html b/_includes/search/algolia-search-scripts.html
new file mode 100644
index 0000000..a6bc9d2
--- /dev/null
+++ b/_includes/search/algolia-search-scripts.html
@@ -0,0 +1,54 @@
+<!-- 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 title = hit._highlightResult.title.value;
+ const content = hit._highlightResult.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
+ }
+ })
+);
+
+// Starting the search
+search.start();
+</script>