layout	title
page	Search

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-dImjLPUsG/6p3+i7gVKBiDM8EemJAhQ0VvkRK2pVsQY=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-3s8yn/IU/hV+UjoqczP+9xDS1VXIpMf3QYRUi9XoG0Y=" crossorigin="anonymous"></script> <script> const searchClient = algoliasearch( '{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}' ); const search = instantsearch({ indexName: '{{ site.algolia.index_name }}', searchClient, searchFunction: function(helper) { if(helper.state.query != '') { helper.search(); } }, routing: true }); search.addWidgets([ instantsearch.widgets.searchBox({ container: '#search-searchbar', showSubmit: false, placeholder: 'Just type here and see the magic happen...', }), instantsearch.widgets.poweredBy({ container: '#search-powered-by', theme: 'dark', }), instantsearch.widgets.hits({ container: '#search-hits', templates: { item(hit, { html, components }) { let formattedDate = 'No Date' if(hit.date != undefined) { const date = new Date(hit.date * 1000) const localeStringOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' } formattedDate = date.toLocaleString('en-US', localeStringOptions) } return html`

${components.Highlight({ hit, attribute: 'title' })}

${formattedDate} ${components.Snippet({ hit, attribute: 'content' })}

`; }, }, }) ]); search.start(); </script> <style> .ais-SearchBox-input { width: 100%; font-size: 20px; padding: 10px; border-radius: 7px; border: 1px solid #aaa; appearance: none; } .ais-SearchBox-input:focus { outline: 0; } .ais-SearchBox-reset { margin-left: -27px; } .ais-SearchBox-reset svg { display: block; fill: #aaa; width: 15px; height: 15px; } #search-powered-by { margin-top: 0.3em; margin-bottom: 2em; } .ais-PoweredBy-link { margin-left: auto; font-size: 0.8em; } </style>