feat: preconnect api and small opensearch changes

src/lib/components/preconnect/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { createApiUrl } from '$lib/functions/api/createurl';
+
+	const apiUrlStr = createApiUrl().toString().replace(/\/$/, '');
+</script>
+
+<svelte:head>
+	<link rel="dns-prefetch" href={apiUrlStr} crossorigin="anonymous" />
+	<link rel="preconnect" href={apiUrlStr} crossorigin="anonymous" />
+</svelte:head>

src/lib/components/searchbox/main.svelte

@@ -22,7 +22,7 @@
 	function handleSubmit(e) {
 		if (query === '') {
 			e.preventDefault();
-		} else {
+		} else if (!loading) {
 			loading = true;
 		}
 	}

src/lib/functions/api/createurl.js

@@ -3,7 +3,7 @@ import { env } from '$env/dynamic/public';
 
 /**
  * Create an API URL
- * @param {string} path
+ * @param {string} [path]
  * @param {URLSearchParams} [params]
  * @returns {URL}
  */
@@ -14,7 +14,7 @@ export function createApiUrl(path, params) {
 		throw error(500, 'PUBLIC_API_URI env is not defined');
 	}
 
-	const apiUrl = (apiUri.endsWith('/') ? apiUri : apiUri + '/') + path;
+	const apiUrl = (apiUri.endsWith('/') ? apiUri : apiUri + '/') + (path ?? '');
 	const urll = new URL(apiUrl);
 
 	if (params) {

src/routes/+layout.svelte

@@ -1,9 +1,12 @@
 <script>
 	import '../app.css';
+	import Preconnect from '$lib/components/preconnect/main.svelte';
 	import ThemeToggle from '$lib/components/themetoggle/main.svelte';
 	import Footer from '$lib/components/footer/main.svelte';
 </script>
 
+<Preconnect />
+
 <ThemeToggle />
 
 <main class="min-h-[90lvh]">

src/routes/opensearch.xml/+server.js

@@ -1,54 +1,72 @@
 import { error } from '@sveltejs/kit';
 import { env } from '$env/dynamic/public';
 
-/** @returns {string} */
-function getInstanceUrl() {
-	const instanceUri = env.PUBLIC_URI;
-	if (!instanceUri) {
-		error(500, 'PUBLIC_URI is not set');
-	}
+const opensearchType = 'application/opensearchdescription+xml';
 
-	const instanceUrl = `${instanceUri}${instanceUri.endsWith('/') ? '' : '/'}`;
-	return instanceUrl;
+/** @type {import('./$types').RequestHandler} */
+export async function GET() {
+	const body = getOpensearchXml('GET');
+	return new Response(body, {
+		headers: {
+			'Content-Type': opensearchType
+		}
+	});
 }
 
-/** @returns {string} */
-function getSearchUrl() {
-	const instanceUrl = getInstanceUrl();
-	return `${instanceUrl}search`;
+/** @type {import('./$types').RequestHandler} */
+export async function POST() {
+	const body = getOpensearchXml('POST');
+	return new Response(body, {
+		headers: {
+			'Content-Type': opensearchType
+		}
+	});
 }
 
-// function getSuggestionsUrl() {
-// 	const instanceUrl = getInstanceUrl();
-// 	return `${instanceUrl}suggestions`;
-// }
-
 /**
  * @param {'GET' | 'POST'} opensearchMethod - The method to use for searching
  * @returns {string} - The OpenSearch XML body
  */
-function getOpenSearchXml(opensearchMethod) {
+function getOpensearchXml(opensearchMethod) {
 	const instanceName = env.PUBLIC_INSTANCE_NAME ?? 'Hearchco';
+	const instanceNameShort = instanceName.slice(
+		0,
+		instanceName.length > 16 ? 16 : instanceName.length
+	);
+
+	const description =
+		env.PUBLIC_DESCRIPTION ??
+		'Hearchco is a distributed and fast metasearch engine that respects your privacy.';
+	const descriptionShort = description.slice(
+		0,
+		description.length > 1024 ? 1024 : description.length
+	);
+
+	const faviconType = 'image/x-icon';
+	const faviconSize = 16;
+
 	const instanceUrl = getInstanceUrl();
 	const searchUrl = getSearchUrl();
+	const faviconUrl = getFaviconUrl();
 	// TODO: const suggestionsUrl = getSuggestionsUrl();
 
 	const searchUrlTag =
 		opensearchMethod === 'GET'
-			? `<Url rel="results" type="text/html" method="${opensearchMethod}" template="${searchUrl}?q={searchTerms}"/>`
-			: `<Url rel="results" type="text/html" method="${opensearchMethod}" template="${searchUrl}">
+			? `<Url rel="results" type="text/html" method="${opensearchMethod}" template="${searchUrl}?q={searchTerms}" />`
+			: `
+			<Url rel="results" type="text/html" method="${opensearchMethod}" template="${searchUrl}">
 				<Param name="q" value="{searchTerms}" />
-			</Url>`;
+			</Url>
+			`;
 
 	// TODO: <Url rel="suggestions" type="application/x-suggestions+json" method="{{ opensearch_method }}" template="{{ url_for('autocompleter', _external=True) }}?q={searchTerms}"/>
 	const body = `
 <?xml version="1.0" encoding="utf-8"?>
 <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
-	<ShortName>${instanceName}</ShortName>
-	<LongName>Hearchco metasearch engine</LongName>
-	<Description>Hearchco is a distributed and fast metasearch engine that respects your privacy.</Description>
+	<ShortName>${instanceNameShort}</ShortName>
+	<Description>${descriptionShort}</Description>
 	<InputEncoding>UTF-8</InputEncoding>
-	<Image type="image/svg">/favicon.svg</Image>
+	<Image width="${faviconSize}" height="${faviconSize}" type="${faviconType}">${faviconUrl}</Image>
 	${searchUrlTag}
 	<Url rel="self" type="application/opensearchdescription+xml" method="${opensearchMethod}" template="${instanceUrl}opensearch.xml" />
 	<Query role="example" searchTerms="Hearchco" />
@@ -59,24 +77,30 @@ function getOpenSearchXml(opensearchMethod) {
 	return body;
 }
 
-/** @type {import('./$types').RequestHandler} */
-export async function GET() {
-	const opensearchMethod = 'GET';
-	const body = getOpenSearchXml(opensearchMethod);
-	return new Response(body, {
-		headers: {
-			'Content-Type': 'application/opensearchdescription+xml'
-		}
-	});
+/** @returns {string} */
+function getInstanceUrl() {
+	const instanceUri = env.PUBLIC_URI;
+	if (!instanceUri) {
+		error(500, 'PUBLIC_URI is not set');
+	}
+
+	const instanceUrl = `${instanceUri}${instanceUri.endsWith('/') ? '' : '/'}`;
+	return instanceUrl;
 }
 
-/** @type {import('./$types').RequestHandler} */
-export async function POST() {
-	const opensearchMethod = 'POST';
-	const body = getOpenSearchXml(opensearchMethod);
-	return new Response(body, {
-		headers: {
-			'Content-Type': 'application/opensearchdescription+xml'
-		}
-	});
+/** @returns {string} */
+function getSearchUrl() {
+	const instanceUrl = getInstanceUrl();
+	return `${instanceUrl}search`;
+}
+
+/** @returns {string} */
+function getFaviconUrl() {
+	const instanceUrl = getInstanceUrl();
+	return `${instanceUrl}favicon.ico`;
 }
+
+// function getSuggestionsUrl() {
+// 	const instanceUrl = getInstanceUrl();
+// 	return `${instanceUrl}suggestions`;
+// }