Generate display decorated data (#943)

A first stab at generating "display decorated" data

Changes

* Add utility classes VocabUtil and DisplayUtil that wrap vocab, context and display data and operations
    * Make singletons of these preloaded with vocab/display data available on the server side
* Option to load display.jsonld from local filesystem definitions repo (placed beside lxlvewer repo) for testing
* USE_LOCAL_DISPLAY_JSONLD=true
* Data structure for search results
* Example of using decorated data in entity page and search page
* Rename /search route to /find. So that it matches XL search API)
* Token for e.g. Identifier "<@type> <value>" e.g . "ISBN 9783833148408"
* ISNI/ORCID formatting

TODO:
* TESTS (I postponed this until we're happy with the design of the decorate data)
* "mappings" in SearchResult, i.e. representation of the active query
* transliterated values (e.g. titles) in language containers
* type coercion (code, langCode, langCodeFull -> code^^ISO639-2, code^^ISO639-3 etc.)
* fresnel:allProperties?
   
We can split/move/rename "xl.ts" (e.g. to lxljs) when it has become more stable

lxl-web/.env.example

@@ -1,3 +1,4 @@
 SVELTE_INSPECTOR_TOGGLE=shift-alt
 API_URL=
 ID_URL=
+USE_LOCAL_DISPLAY_JSONLD=false

lxl-web/src/hooks.server.ts

@@ -1,6 +1,16 @@
 import { defaultLocale, Locales } from '$lib/i18n/locales';
+import { USE_LOCAL_DISPLAY_JSONLD } from '$env/static/private';
+import { env } from '$env/dynamic/private';
+import { DisplayUtil, VocabUtil } from '$lib/utils/xl';
+import fs from 'fs';
+
+let utilCache;
 
 export const handle = async ({ event, resolve }) => {
+	const [vocabUtil, displayUtil] = await loadUtilCached();
+	event.locals.vocab = vocabUtil;
+	event.locals.display = displayUtil;
+
 	// set HTML lang
 	// https://github.com/sveltejs/kit/issues/3091#issuecomment-1112589090
 	const path = event.url.pathname;
@@ -16,3 +26,35 @@ export const handle = async ({ event, resolve }) => {
 		transformPageChunk: ({ html }) => html.replace('%lang%', lang)
 	});
 };
+
+async function loadUtilCached() {
+	if (!utilCache) {
+		utilCache = loadUtil();
+	}
+	return utilCache;
+}
+
+// TODO move
+// TODO error handling
+async function loadUtil() {
+	const [contextRes, vocabRes, displayRes] = await Promise.all([
+		fetch(`${env.ID_URL}/context.jsonld`),
+		fetch(`${env.ID_URL}/vocab/data.jsonld`),
+		fetch(`${env.ID_URL}/vocab/display/data.jsonld`)
+	]);
+
+	const context = await contextRes.json();
+	const vocab = await vocabRes.json();
+	let display = await displayRes.json();
+
+	if (USE_LOCAL_DISPLAY_JSONLD === 'true') {
+		const path = '../../definitions/source/vocab/display.jsonld';
+		const displayJson = fs.readFileSync(path, { encoding: 'utf8' });
+		display = JSON.parse(displayJson);
+		console.warn(`USE_LOCAL_DISPLAY_JSONLD true. Using ${path}`);
+	}
+
+	const vocabUtil = new VocabUtil(vocab, context);
+	const displayUtil = new DisplayUtil(display, vocabUtil);
+	return [vocabUtil, displayUtil];
+}

lxl-web/src/lib/components/Search.svelte

@@ -26,7 +26,7 @@
 	}
 </script>
 
-<form action="search" on:submit={handleSubmit}>
+<form action="find" on:submit={handleSubmit}>
 	<!-- svelte-ignore a11y-autofocus -->
 	<input
 		type="search"