Merge pull request #329 from hearchco/as/feat/favicon-proxy

feat(search): readded favicons with proxying
hearchco · Jun 26, 2024 · b21cfe3 · b21cfe3
2 parents 5107297 + d220ba9
commit b21cfe3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/src/lib/components/results/general/single.svelte b/src/lib/components/results/general/single.svelte
@@ -1,5 +1,6 @@
 <script>
 	import Logo from '$lib/assets/logo.svg';
+	import { proxyFaviconLink } from '$lib/functions/api/proxyimage';
 
 	/**
 	 * @typedef {object} Props
@@ -9,7 +10,10 @@
 	/** @type {Props} */
 	let { result } = $props();
 
-	// const favicon = result.favicon && result.favicon != '' ? result.favicon : Logo;
+	const favicon =
+		result.favicon_hash && result.favicon_hash != ''
+			? proxyFaviconLink(result.url, result.favicon_hash)
+			: Logo;
 
 	const shortDesc =
 		result.description.length > 500 ? result.description.slice(0, 497) + '...' : result.description;
@@ -34,7 +38,7 @@
 			<div
 				class="max-5xs:hidden inline-block align-middle mb-0.5 mr-0.5 size-5 bg-neutral-100 dark:bg-neutral-700 rounded-md overflow-hidden"
 			>
-				<img class="p-[1px] size-full object-contain" src={Logo} alt="" />
+				<img class="p-[1px] size-full object-contain" src={favicon} alt="🐹" loading="lazy" />
 			</div>
 			{result.title}
 		</h1>

diff --git a/src/lib/functions/api/proxyimage.js b/src/lib/functions/api/proxyimage.js
@@ -5,14 +5,16 @@ import { createApiUrl } from '$lib/functions/api/createurl';
  * Create a public API URL for the proxy image endpoint
  * @param {string} url
  * @param {string} hash
+ * @param {boolean} [favicon]
  * @returns {string}
  */
-export function proxyImageLink(url, hash) {
+export function proxyImageLink(url, hash, favicon = false) {
 	// must be done like this instead of concatSearchParams because URL musn't be encoded
 	const params = new URLSearchParams();
 	// ordered alphabetically to increase cache hits
 	params.set('hash', hash);
 	params.set('url', url);
+	params.set('favicon', favicon.toString());
 
 	/** @type {URL} */
 	let apiUrl;
@@ -25,3 +27,20 @@ export function proxyImageLink(url, hash) {
 
 	return apiUrl.toString();
 }
+
+/**
+ * Create a public API URL for the proxy favicon image endpoint
+ * @param {string} url
+ * @param {string} hash
+ * @returns {string}
+ */
+export function proxyFaviconLink(url, hash) {
+	const uriPattern = '^(http(s?))(://)([^/]+)';
+	const uriRegex = new RegExp(uriPattern);
+	const uriMatch = url.match(uriRegex);
+	if (!uriMatch || uriMatch.length == 0) {
+		throw error(400, 'Invalid URL');
+	}
+	const uri = uriMatch[0];
+	return proxyImageLink(uri, hash, true);
+}
diff --git a/src/lib/types/search/result.js b/src/lib/types/search/result.js
@@ -8,6 +8,7 @@
  * @property {string} title - The title of the result.
  * @property {string} description - The description of the result.
  * @property {EngineRankType[]} engine_ranks - Rankings on different search engines.
+ * @property {string} favicon_hash - Hash required for proxying the favicon.
  * ImageResultType
  * @property {ImageFormatType} original - The original image format details.
  * @property {ImageFormatType} thumbnail - The thumbnail image format details.