@joblist/algolia-search NPM

Check out /index.html for usage.

Usage

insert the <algolia-search/> custom web element with the correct configuration attributes for your application.

<algolia-search
	app-id=""
	api-key=""
	index-names=""
	routing=""
	autofocus=""
	show-reset=""

	pub-id=""
	origin=""
></algolia-search>

If you want search results on a map (or just a map with markers):

<map-list longitude="" latitude="" zoom="" markers="" origin=""></map-list>

After importing the script from a cdn, either in a javascript file or in a html file (see the file ./index.html for full reference):

// what's needed for the search
import {
	AlgoliaSearch,
	createAlgoliaScript,
} from 'https://cdn.jsdelivr.net/npm/@joblist/algolia-search@0.0.9/index.js'

// what is needed for the map
import {
	MapList,
	companiesResultsToMapMarkers, // serializer, search result -> marker
} from './src/map/index.js'

const init = async () => {
	try {
		await createAlgoliaScript()
		await createLeafletScripts()
	} catch (error) {
		return console.log('Error inserting scripts', error)
	}

	/* listen to algolia search results, to display them on the map;
		alternativelly the map is independant, and any marker would work*/
	document.querySelector('algolia-search').addEventListener('algoliaSearchResult', ({ detail }) => {
		if (detail.indexName === 'prod_companies') {
			const itemMarkers = companiesResultsToMapMarkers(detail.items)
			document.querySelector('map-list').setAttribute(
				'markers',
				JSON.stringify(itemMarkers)
			)
		}
	})

	customElements.define('map-list', MapList)
	customElements.define('algolia-search', AlgoliaSearch)

	console.log('Inited algolia scripts, algolia-search)
}
init()

Components

All attributes (of web components) are of type string: attribute-name="a-string-always"

`<algolia-search/>`

Displays a search input, results and pagination for one or more algolia search indices.

app-id = ABC123456, the algolia app id
api-key = ABC123CDE456FGH789XXXXX, the algolia app key
index-names1 minimum = prod_jobs,prod_companies, comma separated list of algolia indexes to search. The first one is the main one, and will be the only one showing pagination etc.
routing optional = false, should algolia use the URL to show current search, so we can "route" (link) to it
autofocus optional = false, should the search input be autofocused?
show-reset optional = true, should there be a "reset search" button next to the search input?
origin optional = the root url https://example.org that will be used to create links from search results

Emits an event algoliaSearchResult each time there are new search results displayed

document.querySelector('algolia-search').addEventListener('algoliaSearchResult', (event) => {})

// `event.detail` content
{
	indexName, // the name of the index searched for these results
	searchQuery, // the query that was searched for
	items, // the list of result items
}

`<map-list/>`

Display a leaflet.js map, with optional markers.

longitude = 50.000
latitude = -0.9`
zoom = 1
markers a list of markers as JSON.stringify(markers) data
origin, the root url (https://example.com/markers) for markers links, to witch /:slug (of the marker) will be appended. Alternativelly, use {} for a pattern to be replaced with the slug (https://example.com/markers/?query={})

Where markers:

const markers = [
	{
		text: 'foo',
		slug: 'my-foo-slug',
		latidute: 50.110,
		longitude: -0.09,
	},
	{
		text: bar,
		slug: 'my-bar-slug',
		latidute: 60.001,
		longitude: 10.89,
	},
]

Development

There are dependencies to this projets (npm modules), but those are hard linked from a CDN URL, and injected by the javascript as script tags in the host application. Therefore, no need to npm install.