lucos_search_component

Web Component for searching lucOS data

Technologies used

• ES Modules
• Web Components

Usage

Include the following in your javascript:

import 'lucos_search_component';

Then pick the relevant component

Search

Searches all items available in lucos_arachne

Include the following in your html:

<span is="lucos-search">
	<select multiple>
		<option selected>https://contacts.l42.eu/people/2</option>
		<option selected>https://eolas.l42.eu/metadata/place/2/</option>
		<option selected>https://media-metadata.l42.eu/tracks/13713</option>
	</select>
</span>

Selected options use the item's URI as their value.

The following attributes can be added to the lucos-search span:

• data-api-key [required] — a valid API key for the production instance of lucos_arachne, as generated by lucos_creds.
• data-types — A comma separated list of item types to search for (defaults to all types).
• data-exclude-types — A comma separated list of item types to exclude from the search (ignored if data-types is set).

Languages

Language selector, grouped by language families.

Include the following in your html:

<span is="lucos-lang">
	<select multiple>
		<option selected>en</option>
		<option selected>ga</option>
		<option selected>ain</option>
	</select>
</span>

Selected options use a language's ISO 639 code. Note: lucos_arachne has a mixture of ISO 639-1, ISO 639-2, ISO 639-3 and ISO 639-6 codes as well as some custom codes for artificial languages. The code used must match what's in lucos_arachne.

The following attributes can be added to the lucos-lang span:

• data-api-key [required] — a valid API key for the production instance of lucos_arachne, as generated by lucos_creds.
• data-no-lang — The name to give for a "no language" option. Defaults to not having a no language option. If selected, the code returned will be zxx (The ISO 639 code which denotes absence of linguistic content)
• data-common — A comma separated list of language codes to put in a separate "Common Languages" group at the top of the selections. This removes the provided languages from their normal family; they'll only be listed under Common Languages. Unrecognised language codes in this list are ignored.

Manual Testing

Expects a .env file in the root directory with the following environment variables:

• KEY_LUCOS_ARACHNE - an API for lucos_arachne, as set by lucos_creds

(The .env file can be automatically generated using the command scp -P 2202 "creds.l42.eu:${PWD##*/}/development/.env" ., assuming the correct credentials are in place)

Run:

npm run example

This uses webpack to build the javascript and then opens a html page which includes the web component