algolia.html

---
layout: default
title: Search
permalink: /search/
---

<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css">
<base href="{{ site.baseurl }}">

<div id="search-searchbar"></div>
<div id="search-hits"></div>
<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}#${hit.anchor}`;

	if (hit._highlightResult.title !== undefined && hit._highlightResult.html !== undefined) {

		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(' > ')
		}
		const content = hit._highlightResult.html.value;

		return `
		<div class="post-item">
		  <span class="post-meta">${date}</span>
		  <h2><a class="post-link" href="${url}">${title}</a></h2>
		  {{#breadcrumbs}}<a href="${url}" class="post-breadcrumbs">${breadcrumbs}</a>{{/breadcrumbs}}
		  <div class="post-snippet">${content}</div>
		</div>
	  	`;
	}
}


search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-searchbar',
    placeholder: 'Search into posts...',
    poweredBy: true
  })
);

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

search.start();

</script>


<style>
.ais-search-box {
  max-width: 100%;
  margin-bottom: 15px;
}
.post-item {
  margin-bottom: 30px;
}
.post-link .ais-Highlight {
  color: #111;
  font-style: normal;
  text-decoration: underline;
}
.post-breadcrumbs {
  color: #424242;
  display: block;
}
.post-breadcrumb {
  font-size: 18px;
  color: #424242;
}
.post-breadcrumb .ais-Highlight {
  font-weight: bold;
  font-style: normal;
}
.post-snippet .ais-Highlight {
  color: #2a7ae2;
  font-style: normal;
  font-weight: bold;
}
.post-snippet img {
  display: none;
}
</style>