<div id=“search-searchbar”></div> <div id=“search-hits”></div> <div id=“search-pagination”></div>

<script src=“/assets/js/instantsearch.min.js”></script> <script src=“/assets/js/moment.min.js”></script> <script>

const search = instantsearch({
  appId: '{{ site.algolia.application_id }}',
  apiKey: '{{ site.algolia.search_only_api_key }}',
  indexName: '{{ site.algolia.index_name }}'
});

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

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

  const title = 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(' > ')
  }

  let content = "";

  if (hit.html) {
    content = hit.html;
  }

  if (hit._highlightResult.html) {
    content = hit._highlightResult.html.value;
  }

  return `
    <ul>
      <li><a class="post-link" href="${url}">${title}</a> {{#breadcrumbs}}<a href="${url_detail}" class="post-breadcrumbs">${breadcrumbs}</a>{{/breadcrumbs}} ${content}</li>
    </ul>
  `;
}

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-searchbar',
    autofocus: true,
    placeholder: 'Search...',
    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.addWidget(
  instantsearch.widgets.configure({
    hitsPerPage: 5,
    enablePersonalization: true,
  })
);

search.addWidget(
  instantsearch.widgets.pagination({
    container: '#search-pagination',
  })
);

search.start();

</script>