feat: override favicon from project frontmatter

Author: aster-void

contents/projects/coursemate/favicon.avif

@@ -13,6 +13,7 @@ tags: [TypeScript, React]
 
 thumbnail:
   src: ./thumbnail.png
+favicon: ./favicon.avif
 
 social:
   github: https://github.com/ut-code/coursemate

contents/projects/coursemate/index.md

@@ -14,26 +14,27 @@
 
 ## frontmatter
 
-| キー              | 必須 | 型           | 説明                                                                                                  |
-| ----------------- | ---- | ------------ | ----------------------------------------------------------------------------------------------------- |
-| `app.name`        | ✅   | string       | プロジェクト名                                                                                        |
-| `app.description` | ✅   | string       | プロジェクトの短い説明。                                                                              |
-| `app.url`         |      | string->url  | アプリにアクセスできる URL。                                                                          |
-| `app.platform`    | ✅   | string[]     | ソフトウェアの配布プラットフォーム。`web`, `mobile`, `desktop`, `cli`。                               |
-| `app.domain`      | ✅   | string[]     | ソフトウェアの種別 (クソ雑ドキュメント)。 `app`, `game`, `tool`, `site`, `learn` (教材), `lib` など。 |
-| `order`           |      | number?      | 表示順。指定されなかった場合は `date` 降順でソートされます。                                          |
-| `date`            | ✅   | date         | 記事の初回執筆日。ソートのみで利用しています。                                                        |
-| `kind`            | ✅   | string       | アプリケーションの開発体系。`long-term`, `festival`, `hackathon` の 3 つ。                            |
-| `status`          | ✅   | string       | プロジェクトの現状。詳細は `src/schema.ts` を参照。                                                   |
-| `members`         |      | string[]?    | プロジェクトのメンバー。まだメンバーページを作ってなくても問題ないです。                              |
-| `tags`            |      | string[]?    | 使用されている技術。タグごとのフィルタリング機能等は提供していません。                                |
-| `thumbnail.src`   | ✅   | string->path | イメージファイルへの markdown からの相対パス。                                                        |
-| `thumbnail.fit`   |      | string?      | イメージのクロップ方法。 default = "cover"。                                                          |
-| `thumbnail.bg`    |      | string?      | イメージの背景色。ロード中と `crop` = "contain" のときの背景に使われています。                        |
-| `social.github`   |      | string->url? | プロジェクトの GitHub 上での URL。                                                                    |
-| `social.website`  |      | string->url? | プロジェクトのウェブサイトの URL。(`app.url` と別で広報用などの Website がある場合)                   |
-| `social.youtube`  |      | string->url? | プロジェクトの YouTube 上での URL。                                                                   |
-| `social.twitter`  |      | string->url? | プロジェクトのツイッター (現 X) の URL。                                                              |
+| キー              | 必須 | 型            | 説明                                                                                                  |
+| ----------------- | ---- | ------------- | ----------------------------------------------------------------------------------------------------- |
+| `app.name`        | ✅   | string        | プロジェクト名                                                                                        |
+| `app.description` | ✅   | string        | プロジェクトの短い説明。                                                                              |
+| `app.url`         |      | string->url   | アプリにアクセスできる URL。                                                                          |
+| `app.platform`    | ✅   | string[]      | ソフトウェアの配布プラットフォーム。`web`, `mobile`, `desktop`, `cli`。                               |
+| `app.domain`      | ✅   | string[]      | ソフトウェアの種別 (クソ雑ドキュメント)。 `app`, `game`, `tool`, `site`, `learn` (教材), `lib` など。 |
+| `order`           |      | number?       | 表示順。指定されなかった場合は `date` 降順でソートされます。                                          |
+| `date`            | ✅   | date          | 記事の初回執筆日。ソートのみで利用しています。                                                        |
+| `kind`            | ✅   | string        | アプリケーションの開発体系。`long-term`, `festival`, `hackathon` の 3 つ。                            |
+| `status`          | ✅   | string        | プロジェクトの現状。詳細は `src/schema.ts` を参照。                                                   |
+| `members`         |      | string[]?     | プロジェクトのメンバー。まだメンバーページを作ってなくても問題ないです。                              |
+| `tags`            |      | string[]?     | 使用されている技術。タグごとのフィルタリング機能等は提供していません。                                |
+| `thumbnail.src`   | ✅   | string->path  | イメージファイルへの markdown からの相対パス。                                                        |
+| `thumbnail.fit`   |      | string?       | イメージのクロップ方法。 default = "cover"。                                                          |
+| `thumbnail.bg`    |      | string?       | イメージの背景色。ロード中と `crop` = "contain" のときの背景に使われています。                        |
+| `favicon`         |      | string->path? | 強制的に使わせる Favicon。指定しない場合は、アプリの URL から自動で引っ張ってきます。                 |
+| `social.github`   |      | string->url?  | プロジェクトの GitHub 上での URL。                                                                    |
+| `social.website`  |      | string->url?  | プロジェクトのウェブサイトの URL。(`app.url` と別で広報用などの Website がある場合)                   |
+| `social.youtube`  |      | string->url?  | プロジェクトの YouTube 上での URL。                                                                   |
+| `social.twitter`  |      | string->url?  | プロジェクトのツイッター (現 X) の URL。                                                              |
 
 ## body について
 

docs/contents/projects.md

@@ -22,15 +22,13 @@ const { Content } = await render(project);
 
 let iconSrc: string | undefined = undefined;
 if (project.data.status !== "dead") {
-  if (project.data.app.url) {
+  if (project.data.favicon) iconSrc = project.data.favicon.src;
+  if (!iconSrc && project.data.app.url) {
     iconSrc = await fetchFavicon(project.data.app.url);
   }
   if (!iconSrc && project.data.social?.website) {
     iconSrc = await fetchFavicon(project.data.social.website);
   }
-  if (!iconSrc && project.data.social?.twitter) {
-    iconSrc = await fetchFavicon(project.data.social.twitter);
-  }
 }
 ---
 

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

@@ -74,6 +74,7 @@ export const CreateProjectSchema = ({ image }: { image: ImageFunction }) =>
     order: z.number().optional(),
     date: z.date(),
     thumbnail: Thumbnail({ image }),
+    favicon: image().optional(),
     tags: z.array(z.string()).optional().default([]),
     social: z
       .object({