search.liquid

---
layout: page
title: Search
description: Search this Site
---

<style>
[v-cloak] {display: none}
</style>

{% raw %}
<div id="app" v-cloak>
	<form data-members-form="subscribe" class="subscribe-form">
	<div v-cloak class="form-group">
		<input v-model="search" class="subscribe-email" type="search"> 
		<button @click.prevent="doSearch" class="button"><span v-if="searching">Searching...</span><span v-else>Search</span></button>
	</div>
	</form>

	<div v-if="noResults">
		<p>
		Sorry, but there were no results.
		</p>
	</div>
	<div v-if="results && !noResults">
		<p v-if="numResults > 1">
		There were {{numResults}} total results for this search.
		</p><p v-else>
		There was one total result for this search.
		</p>
		<p v-for="(result,idx) in results" :key="idx">
		{{ idx+1}}) <a :href="result.url" @click="track(result.url, result.objectID, idx+1)">{{result.title}}</a><br/>
		Published: {{ result.date }}<br/>
		Excerpt: <span v-html="result._snippetResult.content.value"></span>
		</p>
	</div>
</div>

<p>
 <img src="/images/algolia.webp" title="Search by Algolia">
</p>
{% endraw %}

<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.6.3";

!function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e[s]=e[s]||function(){
(e[s].queue=e[s].queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],
i.async=1,i.src=n,c.parentNode.insertBefore(i,c)
}(window,document,"script",ALGOLIA_INSIGHTS_SRC,"aa");

// Initialize library
aa('init', {
	appId: 'WFABFE7Z9Q',
	apiKey: 'd1c88c3f98648a69f11cdd9d5a87de08'
});
</script>

<script>
const app = new Vue({
	el:'#app',
	data: {
		search:'',
    	searching:false,
		algolia_client:null,
		algolia_index:null,
		results:null,
		numResults:null,
    	noResults:false, 
		queryID:null
	},
	created() {
		this.client = algoliasearch('WFABFE7Z9Q', 'd1c88c3f98648a69f11cdd9d5a87de08');
		this.index = this.client.initIndex('raymondcamden');
		// support url param search
		let qp = new URLSearchParams(window.location.search);
		let search = qp.get('search');
		if(search) {
			this.search = search;
			this.doSearch();
		}
	},
	methods: {
		async doSearch() {
			this.results = null;
			if(this.search === '') return;
			this.searching = true;
			this.noResults = false;
			console.log('search for '+this.search);
			let resultsRaw = await this.index.search(this.search,{
				attributesToRetrieve:['title', 'url','date'],
				attributesToSnippet:['content'],
				hitsPerPage: 50,
				clickAnalytics:true
			});
			//console.log('results', resultsRaw);

			let options = { year: 'numeric', month: 'long', day: 'numeric' };
			let formatter = new Intl.DateTimeFormat('en-US',options);
			resultsRaw.hits.forEach(h => {
				h.date = formatter.format(new Date(h.date));
			});
			this.results = resultsRaw.hits;
			this.numResults = resultsRaw.nbHits;
			this.searching = false;
			this.noResults = this.results.length === 0;
			this.queryID = resultsRaw.queryID;
		},
		track(url,id, pos) {			
			aa('clickedObjectIDsAfterSearch', {
				eventName: 'click_on_search_page',
				index: 'raymondcamden',
				queryID: this.queryID,
				objectIDs:[id],
				positions:[pos]
			});
		}
	}
})
</script>