Merge branch 'develop' into feature/add-localhost-api-support

lxl-web/.env.example

@@ -1,6 +1,7 @@
 SVELTE_INSPECTOR_TOGGLE=shift-alt
 API_URL=
 ID_URL=
+USE_LOCAL_DISPLAY_JSONLD=false
 USE_LOCALHOST_API=false
 LOCALHOST_API_PORT=
-LOCALHOST_ID_PORT=
+LOCALHOST_ID_PORT=

lxl-web/src/hooks.server.ts

@@ -1,8 +1,18 @@
 import type { Handle, HandleFetch } from '@sveltejs/kit';
 import { defaultLocale, Locales } from '$lib/i18n/locales';
 import { env } from '$env/dynamic/private';
+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: 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;
@@ -39,3 +49,35 @@ export const handleFetch: HandleFetch = async ({ request, fetch }) => {
 
 	return fetch(request);
 };
+
+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"