From f5c406a84c06c26db578b1716a44a7f0578ab4f5 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Sun, 12 Nov 2023 04:34:30 +0100
Subject: [PATCH] feat: favicon api always return an image

When the api cannot fetch the remote favicon, we return a placeholder image
---
 next.config.js                       |   5 ++++-
 public/empty-image.png               | Bin 0 -> 596 bytes
 src/components/Links/LinkFavicon.tsx |   2 ++
 src/pages/api/favicon.ts             |   7 ++++++-
 src/utils/link.ts                    |   2 +-
 5 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 public/empty-image.png

diff --git a/next.config.js b/next.config.js
index fe0dce2..4952686 100644
--- a/next.config.js
+++ b/next.config.js
@@ -23,7 +23,10 @@ const config = {
   experimental: {
     webpackBuildWorker: true
   },
-  output: "standalone"
+  output: "standalone",
+  env: {
+    baseUrl: process.env.NEXTAUTH_URL
+  }
 };
 
 module.exports = config;
diff --git a/public/empty-image.png b/public/empty-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..1cb3567dc7bbb6a3d43f56534766cc5ecb372018
GIT binary patch
literal 596
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyjR8I(u0Yzp<EVZ6F}wDoK!zQV
z-Eq{a8OS(h-*L>g^*Bftj4Y;t*g$c+cA(Tz`%b7hP>WR;gbfmR=sfDs3YCIrwCg?y
zGzwxeganDVA9VoRSozW*9_R?Ik|4iehWBaZ-w*xbJfY6}^2t2bWm6)8RxRwQ6a8Em
zuOM~z)_Gl_d+TRfpV`su+t*+4hJk@G!qdeu#Nu@8<o3R10|A%m#RnHUYj}Dn|9$q~
z{)1Su>NVF6^~To1nH$qzI)~izSyTGQ<8;TqmtDLwEZCGUU)_H{a(81`gM!e3U?+3M
z$}jvU!nYrrHADN;!l?$;RmFY@VIdDCB6Y?81g)Pi=l*BmD~hSf`<EUuT>Pf($l8gL
zyT9;t$#7ZMiCg$uv7~6XSSX11$+*{Tes}B_w?VhuU9%JQ60KjJ`|_HaX=W`lm>_GY
zzQ!in;F`Yz`zp216a7voU%OU#DvP^rhIRkv9gqBcT4!C^QgX7(mTSt9H-(E>uDub9
z{v_}&m`y}MV&V-JIiXA24m@g@sk?2y?lYG#zbA{%-fZT&>!>SlD#|_Gb#Kg$yex4h
z=b1$ljpv`38usw8>;A_lWo|LAT7SVRY`W$*cIl>r{d*S&Pw<`o*z1h&*AJUoA5Sdo
v*WP<g+jf54vI^Tns|+??*|_uP)Bo&$vJGC&xgI(N7&8o>u6{1-oD!M<{+<yf

literal 0
HcmV?d00001

diff --git a/src/components/Links/LinkFavicon.tsx b/src/components/Links/LinkFavicon.tsx
index 073581c..5c4765f 100644
--- a/src/components/Links/LinkFavicon.tsx
+++ b/src/components/Links/LinkFavicon.tsx
@@ -13,6 +13,8 @@ interface LinkFaviconProps {
   noMargin?: boolean;
 }
 
+// The Favicon API should always return an image, so it's not really useful to keep the loader nor placeholder icon,
+// but for slow connections and other random stuff, I'll keep this
 export default function LinkFavicon({
   url,
   size = 32,
diff --git a/src/pages/api/favicon.ts b/src/pages/api/favicon.ts
index 3cdc88c..21eb7a2 100644
--- a/src/pages/api/favicon.ts
+++ b/src/pages/api/favicon.ts
@@ -1,5 +1,7 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import { parse } from "node-html-parser";
+import { createReadStream } from "node:fs";
+import { resolve } from "node:path";
 
 const USER_AGENT =
   "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0";
@@ -62,7 +64,10 @@ export default async function handler(
   } catch (error) {
     const errorMessage = error?.message || "Unable to retrieve favicon";
     console.log("[Favicon]", `[second: ${faviconRequestUrl}]`, errorMessage);
-    res.status(404).send({ error: errorMessage, text: documentAsText });
+
+    const readStream = createReadStream(resolve(process.cwd(), "./public/empty-image.png"));
+    res.writeHead(206);
+    readStream.pipe(res);
   }
 }
 
diff --git a/src/utils/link.ts b/src/utils/link.ts
index e502eff..5aeb15a 100644
--- a/src/utils/link.ts
+++ b/src/utils/link.ts
@@ -1,3 +1,3 @@
 export function faviconLinkBuilder(origin: string) {
-  return `http://localhost:3000/api/favicon?url=${origin}`;
+  return `${process.env.baseUrl}/api/favicon?url=${origin}`;
 }