{% if site.algolia %} <!– Including InstantSearch.js library and styling –> <script src=“cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js”>> <script src=“cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js”>> <link rel=“stylesheet” type=“text/css” href=“cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css”> <link rel=“stylesheet” type=“text/css” href=“cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css”>

<script>

// Instanciating InstantSearch.js with Algolia credentials const search = instantsearch({

appId: '{{ site.algolia.application_id }}',
indexName: '{{ site.algolia.index_name }}',
apiKey: '{{ site.algolia.search_only_api_key }}'

});

const hitTemplate = function(hit) {

let date = '';
if (hit.date) {
  date = moment.unix(hit.date).format('MMM D, YYYY');
}

let url = `{{ site.baseurl }}${hit.url}#${hit.anchor}`;

const title = hit._highlightResult.html && hit._highlightResult.title.value;

let breadcrumbs = '';
if (hit._highlightResult.headings) {
  breadcrumbs = hit._highlightResult.headings.map(match => {
    return `<span class="post-breadcrumb">${match.value}</span>`
  }).join(' > ')
}

const content = hit._highlightResult.html && hit._highlightResult.html.value;

return `
<div class="post-item">
  <h3 class="uk-heading-line post-link""><a class="uk-link-text" href="${url}">${title}</a></h3>
  <span uk-icon="calendar"></span> <span class="uk-article-meta post-meta">${date}</span><br>
  {{#breadcrumbs}}<a href="${url}" class="post-breadcrumbs">${breadcrumbs}</a>{{/breadcrumbs}}<br>
  <div class="content">
    <div class="post-snippet">${content}</div>
  </div>
</div>
`;

}

search.addWidget(

instantsearch.widgets.searchBox({
  container: '#search-searchbar',
  placeholder: 'Search your feelings...',
  poweredBy: true // This is required if you're on the free Community plan
})

);

search.addWidget(

instantsearch.widgets.hits({
  container: '#search-hits',
  templates: {
    item: hitTemplate
  }
})

);

search.start(); </script>

<style> .ais-search-box {

max-width: 98%;
margin-bottom: 15px;
font-size: 16px;

} .post-item {

margin-bottom: 30px;

} .post-link .ais-Highlight {

color: #1e87f0;
font-style: normal;
text-decoration: underline;

} .post-breadcrumbs {

padding-top: 15px;
color: #424242;
display: block;

} .post-breadcrumb {

font-size: 18px;
color: #424242;

} .post-breadcrumb .ais-Highlight {

color: #1e87f0;
font-weight: bold;
font-style: normal;

} .post-snippet .ais-Highlight {

color: #1e87f0;
font-style: normal;
font-weight: bold;

} .post-snippet img {

display: none;

} </style> {% endif %}