プロジェクトページにfaviconを追加

Author: na-trium-144

bun.lock

@@ -14,6 +14,7 @@
         "astro": "^5.7.12",
         "astro-icon": "^1.1.5",
         "bits-ui": "^1.4.8",
+        "cheerio": "^1.0.0",
         "daisyui": "^5.0.35",
         "date-fns": "^4.1.0",
         "markdown-to-txt": "^2.0.1",

package.json

@@ -33,6 +33,7 @@
     "astro": "^5.7.12",
     "astro-icon": "^1.1.5",
     "bits-ui": "^1.4.8",
+    "cheerio": "^1.0.0",
     "daisyui": "^5.0.35",
     "date-fns": "^4.1.0",
     "markdown-to-txt": "^2.0.1",

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

@@ -8,6 +8,7 @@ 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");
@@ -18,6 +19,30 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths;
 const { project } = Astro.props;
 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) {
+      iconSrc = new URL(iconHref, project.data.website).toString();
+    } else {
+      const faviconRes = await fetch(
+        `${new URL(project.data.website).origin}/favicon.ico`,
+      );
+      if (
+        faviconRes.ok &&
+        !faviconRes.headers.get("content-type")?.startsWith("text/")
+      ) {
+        iconSrc = faviconRes.url;
+      }
+    }
+  }
+}
 ---
 
 <GlobalLayout
@@ -95,7 +120,11 @@ const { Content } = await render(project);
         {
           project.data.website && project.data.status !== "dead" && (
             <ActionButton to={project.data.website} class="my-6">
-              <Icon name="feather:globe" class="mr-2 inline-block h-6 w-6" />
+              {iconSrc ? (
+                <img src={iconSrc} alt="favicon" class="inline-block h-6 w-6" />
+              ) : (
+                <Icon name="feather:globe" class="inline-block h-6 w-6" />
+              )}
               {project.data.title} へ
             </ActionButton>
           )