From f831f9dd1c440bfd3b07dc29b1bbd742c1540aa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Tue, 25 Jun 2024 21:12:44 +0200
Subject: [PATCH 1/2] feat(search): readded favicons with proxying

---
 src/lib/components/results/general/single.svelte | 8 ++++++--
 src/lib/functions/api/proxyimage.js              | 4 +++-
 src/lib/types/search/result.js                   | 1 +
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/results/general/single.svelte b/src/lib/components/results/general/single.svelte
index d661eb09..902db1f4 100644
--- 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 { proxyImageLink } 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 != ''
+			? proxyImageLink(result.url, result.favicon_hash, true)
+			: 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
index 490832f4..42f08424 100644
--- 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;
diff --git a/src/lib/types/search/result.js b/src/lib/types/search/result.js
index a55471f7..72cd9e7a 100644
--- 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.

From d220ba9b054bfac8544421e3463c06c18b28d717 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Tue, 25 Jun 2024 21:19:47 +0200
Subject: [PATCH 2/2] fix(proxy): extract uri for favicon proxying to improve
 privacy and increase cache hit

---
 .../components/results/general/single.svelte    |  4 ++--
 src/lib/functions/api/proxyimage.js             | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/results/general/single.svelte b/src/lib/components/results/general/single.svelte
index 902db1f4..430b36ed 100644
--- a/src/lib/components/results/general/single.svelte
+++ b/src/lib/components/results/general/single.svelte
@@ -1,6 +1,6 @@
 <script>
 	import Logo from '$lib/assets/logo.svg';
-	import { proxyImageLink } from '$lib/functions/api/proxyimage';
+	import { proxyFaviconLink } from '$lib/functions/api/proxyimage';
 
 	/**
 	 * @typedef {object} Props
@@ -12,7 +12,7 @@
 
 	const favicon =
 		result.favicon_hash && result.favicon_hash != ''
-			? proxyImageLink(result.url, result.favicon_hash, true)
+			? proxyFaviconLink(result.url, result.favicon_hash)
 			: Logo;
 
 	const shortDesc =
diff --git a/src/lib/functions/api/proxyimage.js b/src/lib/functions/api/proxyimage.js
index 42f08424..efc2a004 100644
--- a/src/lib/functions/api/proxyimage.js
+++ b/src/lib/functions/api/proxyimage.js
@@ -27,3 +27,20 @@ export function proxyImageLink(url, hash, favicon = false) {
 
 	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);
+}