refactor: separate fetch-favicon into its own lib fn

Author: aster-void

src/lib/fetch-favicon.ts

@@ -0,0 +1,61 @@
+import { load as cheerioLoad } from "cheerio";
+
+/**
+   @param siteBaseURL - it should only contain base url of the site
+   
+   TODO: what about GH Pages? do they work?
+ */
+export async function fetchFavicon(
+  siteBaseURL: string,
+): Promise<string | undefined> {
+  const websiteRes = await fetch(siteBaseURL);
+  if (!websiteRes.ok) {
+    return undefined;
+  }
+
+  // fetch link[rel="icon"].href
+  {
+    const html = await websiteRes.text();
+    const querySelector = cheerioLoad(html);
+    const iconHref = querySelector(
+      "link[rel='icon'], link[rel='shortcut icon']",
+    )[0]?.attribs.href;
+    if (iconHref) {
+      const iconUrl = new URL(iconHref, siteBaseURL);
+      const iconRes = await fetch(iconUrl);
+      const contentType = iconRes.headers.get("content-type");
+      if (!contentType)
+        console.warn(
+          `header "Content-Type" not found while fetching ${iconUrl.toString()}`,
+        );
+      if (iconRes.ok) {
+        return base64DataURL(
+          contentType,
+          Buffer.from(await iconRes.arrayBuffer()),
+        );
+      }
+    }
+  }
+
+  // fetch /favicon.ico
+  {
+    const faviconRes = await fetch(
+      `${new URL(siteBaseURL).origin}/favicon.ico`,
+    );
+    const contentType =
+      faviconRes.headers.get("content-type") ?? "image/vnd.microsoft.icon";
+    if (faviconRes.ok && !contentType.startsWith("text/")) {
+      return base64DataURL(
+        contentType,
+        Buffer.from(await faviconRes.arrayBuffer()),
+      );
+    }
+  }
+
+  return undefined;
+}
+
+function base64DataURL(contentType: string | null, buf: Buffer) {
+  const dataType = contentType ? `${contentType};base64` : "base64";
+  return `data:${dataType},${buf.toString("base64")}`;
+}

src/pages/projects/[...id].astro

@@ -4,11 +4,11 @@ import { render } from "astro:content";
 import JoinUsCTA from "+/components/common/JoinUsCTA.astro";
 import ActionButton from "+/components/utils/ActionButton.astro";
 import GlobalLayout from "+/layouts/GlobalLayout.astro";
+import { fetchFavicon } from "+/lib/fetch-favicon";
 import { getProjects } from "+/query";
 import { Focus } from "+/schema.ts";
 import type { GetStaticPaths } from "astro";
 import { Icon } from "astro-icon/components";
-import { load as cheerioLoad } from "cheerio";
 
 export const getStaticPaths = (async () => {
   const projects = await getProjects("all");
@@ -22,27 +22,7 @@ const { Content } = await render(project);
 
 let iconSrc: string | undefined = undefined;
 if (project.data.website && project.data.status !== "dead") {
-  const websiteRes = await fetch(project.data.website);
-  if (websiteRes.ok) {
-    const websiteHtml = await websiteRes.text();
-    const website = cheerioLoad(websiteHtml);
-    const iconHref = website("link[rel='icon'], link[rel='shortcut icon']")[0]
-      ?.attribs.href;
-    if (iconHref) {
-      const faviconRes = await fetch(new URL(iconHref, project.data.website));
-      iconSrc = `data:${faviconRes.headers.get("content-type")};base64,${Buffer.from(await faviconRes.arrayBuffer()).toString("base64")}`;
-    } else {
-      const faviconRes = await fetch(
-        `${new URL(project.data.website).origin}/favicon.ico`,
-      );
-      if (
-        faviconRes.ok &&
-        !faviconRes.headers.get("content-type")?.startsWith("text/")
-      ) {
-        iconSrc = `data:${faviconRes.headers.get("content-type")};base64,${Buffer.from(await faviconRes.arrayBuffer()).toString("base64")}`;
-      }
-    }
-  }
+  iconSrc = await fetchFavicon(project.data.website);
 }
 ---