From 097e4862d96cc009990ebf95f0169ec55cd0f844 Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Tue, 25 Mar 2025 16:46:40 +0900
Subject: [PATCH 1/2] can configure crops

---
 .../2024/11-26_komaba-festival/index.mdx        |  1 +
 .../2024/12-21_kick-off-party-report/index.mdx  |  1 +
 contents/articles/README.md                     | 17 +++++++++++++++++
 src/components/ArticleList.astro                | 17 +++++++++++++++--
 src/schema.ts                                   |  4 +++-
 5 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 contents/articles/README.md

diff --git a/contents/articles/2024/11-26_komaba-festival/index.mdx b/contents/articles/2024/11-26_komaba-festival/index.mdx
index ff69e739..858139dc 100644
--- a/contents/articles/2024/11-26_komaba-festival/index.mdx
+++ b/contents/articles/2024/11-26_komaba-festival/index.mdx
@@ -5,6 +5,7 @@ categories:
   - events
 image: ./image1.jpg
 author: kmanabe
+position: top
 ---
 
 ut.code(); は、2024 年 11 月 22 〜 24 日の合計 3 日間駒場祭に企画を出展しました。今回も多くの方にお越しいただきました。3 日間を通して来場してくださった皆様、ありがとうございました！
diff --git a/contents/articles/2024/12-21_kick-off-party-report/index.mdx b/contents/articles/2024/12-21_kick-off-party-report/index.mdx
index b73dfbbb..de523c87 100644
--- a/contents/articles/2024/12-21_kick-off-party-report/index.mdx
+++ b/contents/articles/2024/12-21_kick-off-party-report/index.mdx
@@ -5,6 +5,7 @@ categories:
   - events
 image: ./image.jpg
 author: snakamura
+fit: contain
 ---
 
 ut.code(); では 2024 年 12 月 21 日にプロジェクト発足会を行いました。
diff --git a/contents/articles/README.md b/contents/articles/README.md
new file mode 100644
index 00000000..3d4f0c6f
--- /dev/null
+++ b/contents/articles/README.md
@@ -0,0 +1,17 @@
+# 記事ページ
+
+## frontmatter
+
+| キー          | 必須 | 説明                                                                           |
+| ------------- | ---- | ---|
+| `title`       | ✅   | 記事タイトル|
+| `date`        | ✅   | **記事を書いた** 日。|
+| `image`       | ✅   | イメージ画像 |
+| `fit` | | (画像) object-fit。 default = "cover" |
+| `position` | | (画像) object-position。 (縦軸上から 横軸左から)。default = "50% 50%" |
+| `categories`  |      | 何なんだろうね。 |
+| `author`|  | 著者の id |
+
+## 画像
+
+縦横比 3:5 に crop されます。
diff --git a/src/components/ArticleList.astro b/src/components/ArticleList.astro
index e9e4256d..3a5d6b97 100644
--- a/src/components/ArticleList.astro
+++ b/src/components/ArticleList.astro
@@ -52,6 +52,14 @@ const articlesWithExcerpts = await Promise.all(
   {
     articlesWithExcerpts.map(({ article, text }, i) => {
       const isFeatured = enlarge && i % 11 === 0; // 11 記事ごとに大きく表示する
+      const baseW = 400;
+      const imageWidth = baseW * (isFeatured ? 2 : 1);
+      const imageHeight = baseW * (3 / 5) * (isFeatured ? 2 : 1);
+
+      article.data.fit ??= "cover";
+      article.data.position ??= "center";
+      console.log(article.data);
+
       const additionalProps = isFeatured
         ? {
             cellClassName: "md:col-span-2 md:row-span-2",
@@ -75,12 +83,17 @@ const articlesWithExcerpts = await Promise.all(
             <Picture
               loading={i < 5 ? loading : "lazy"}
               formats={["avif", "webp"]}
-              alt="カバー画像"
+              position={article.data.position}
+              width={imageWidth}
+              height={imageHeight}
+              alt=""
+              fit={article.data.fit}
               src={article.data.image}
               class:list={[
-                "skeleton min-h-0 w-full rounded-xl object-center",
+                "skeleton min-h-0 w-full rounded-xl",
                 additionalProps.imageClassName,
               ]}
+              style={`aspect-ratio: 5 / 3; object-fit: ${article.data.fit}; object-position: ${article.data.position}`}
             />
             <div class="mt-4 p-1">
               <time class="block text-sm text-gray-500">
diff --git a/src/schema.ts b/src/schema.ts
index e8990da4..8938cacb 100644
--- a/src/schema.ts
+++ b/src/schema.ts
@@ -11,7 +11,9 @@ export const CreateArticleSchema = ({ image }: { image: ImageFunction }) =>
     date: z
       .date()
       .transform((date) => new TZDate(date).withTimeZone("Asia/Tokyo")),
-    title: z.string().nullable(),
+    title: z.string(),
+    fit: z.string().optional(),
+    position: z.string().optional(),
     image: image(),
     categories: z.array(z.string()).optional(),
     author: reference("members").optional(),

From 7e03e2290fc1c2b9535a44fe19650548c84ad60f Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Tue, 25 Mar 2025 17:40:42 +0900
Subject: [PATCH 2/2] add bg_color

---
 .../12-21_kick-off-party-report/index.mdx     |  1 +
 .../2025/03-24_joint-welcome-session/index.md |  4 +-
 contents/articles/README.md                   | 45 +++++++++++++------
 src/components/ArticleList.astro              | 15 +++++--
 src/schema.ts                                 | 36 ++++++++++-----
 5 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/contents/articles/2024/12-21_kick-off-party-report/index.mdx b/contents/articles/2024/12-21_kick-off-party-report/index.mdx
index de523c87..19987d17 100644
--- a/contents/articles/2024/12-21_kick-off-party-report/index.mdx
+++ b/contents/articles/2024/12-21_kick-off-party-report/index.mdx
@@ -6,6 +6,7 @@ categories:
 image: ./image.jpg
 author: snakamura
 fit: contain
+bg_color: "#00693E"
 ---
 
 ut.code(); では 2024 年 12 月 21 日にプロジェクト発足会を行いました。
diff --git a/contents/articles/2025/03-24_joint-welcome-session/index.md b/contents/articles/2025/03-24_joint-welcome-session/index.md
index 406136c1..0245be53 100644
--- a/contents/articles/2025/03-24_joint-welcome-session/index.md
+++ b/contents/articles/2025/03-24_joint-welcome-session/index.md
@@ -2,9 +2,11 @@
 title: 東大エンジニア系サークル合同新歓を開催します
 image: ./thumbnail.png
 categories:
-- event
+  - event
 author: ykobayashi
 date: 2025-03-24
+fit: contain
+bg_color: "#A5FFD3"
 ---
 
 ## 📌 イベント概要
diff --git a/contents/articles/README.md b/contents/articles/README.md
index 3d4f0c6f..d1f7a8a4 100644
--- a/contents/articles/README.md
+++ b/contents/articles/README.md
@@ -2,16 +2,35 @@
 
 ## frontmatter
 
-| キー          | 必須 | 説明                                                                           |
-| ------------- | ---- | ---|
-| `title`       | ✅   | 記事タイトル|
-| `date`        | ✅   | **記事を書いた** 日。|
-| `image`       | ✅   | イメージ画像 |
-| `fit` | | (画像) object-fit。 default = "cover" |
-| `position` | | (画像) object-position。 (縦軸上から 横軸左から)。default = "50% 50%" |
-| `categories`  |      | 何なんだろうね。 |
-| `author`|  | 著者の id |
-
-## 画像
-
-縦横比 3:5 に crop されます。
+### base
+
+- title: string
+  - 記事タイトル。
+
+- date: Date
+  - **記事を書いた**日。
+
+- author: string & keyof Member
+  - 著者。
+
+- categories: string[]
+  - 何なんだろうね。
+
+### image 系
+
+- image: path
+  - タイトル画像。記事一覧とトップで使うよ。
+  - 縦横比 3:5 に crop されるよ。
+
+- fit?: "cover" | "contain" | fill" | "none" = "cover"
+  - `object-fit`
+  - Astro のビルド段階で Sharp に渡されるよ。
+  - <https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit>
+
+- position?: "center" | "left" | "right" | "top" | "bottom"
+  - `object-position`
+  - Astro のビルド段階で Sharp に渡されるよ。
+
+- bg_color?: string
+  - ロード中や画像の漏れたところに見せる背景色。
+  - 設定しないと DaisyUI の `skeleton` を使うよ。
diff --git a/src/components/ArticleList.astro b/src/components/ArticleList.astro
index 3a5d6b97..61f4f19a 100644
--- a/src/components/ArticleList.astro
+++ b/src/components/ArticleList.astro
@@ -56,9 +56,10 @@ const articlesWithExcerpts = await Promise.all(
       const imageWidth = baseW * (isFeatured ? 2 : 1);
       const imageHeight = baseW * (3 / 5) * (isFeatured ? 2 : 1);
 
+      console.log(article.data.bg_color);
+
       article.data.fit ??= "cover";
       article.data.position ??= "center";
-      console.log(article.data);
 
       const additionalProps = isFeatured
         ? {
@@ -90,10 +91,18 @@ const articlesWithExcerpts = await Promise.all(
               fit={article.data.fit}
               src={article.data.image}
               class:list={[
-                "skeleton min-h-0 w-full rounded-xl",
+                "min-h-0 w-full rounded-xl",
+                !article.data["bg_color"] && "skeleton",
                 additionalProps.imageClassName,
               ]}
-              style={`aspect-ratio: 5 / 3; object-fit: ${article.data.fit}; object-position: ${article.data.position}`}
+              style={`
+              aspect-ratio: 5 / 3;
+              object-fit: ${article.data.fit};
+              ${
+                article.data.bg_color
+                  ? `background-color: ${article.data.bg_color}`
+                  : ""
+              }`}
             />
             <div class="mt-4 p-1">
               <time class="block text-sm text-gray-500">
diff --git a/src/schema.ts b/src/schema.ts
index 8938cacb..40d354a1 100644
--- a/src/schema.ts
+++ b/src/schema.ts
@@ -7,17 +7,31 @@ export type Member = z.infer<ReturnType<typeof CreateMemberSchema>>;
 export type Project = z.infer<ReturnType<typeof CreateProjectSchema>>;
 
 export const CreateArticleSchema = ({ image }: { image: ImageFunction }) =>
-  z.object({
-    date: z
-      .date()
-      .transform((date) => new TZDate(date).withTimeZone("Asia/Tokyo")),
-    title: z.string(),
-    fit: z.string().optional(),
-    position: z.string().optional(),
-    image: image(),
-    categories: z.array(z.string()).optional(),
-    author: reference("members").optional(),
-  });
+  z
+    .object({
+      // base
+      title: z.string(),
+      date: z
+        .date()
+        .transform((date) => new TZDate(date).withTimeZone("Asia/Tokyo")),
+      author: reference("members").optional(),
+      categories: z.array(z.string()).optional(),
+      // 画像系
+      image: image(),
+      fit: z.enum(["cover", "contain", "fill", "none"]).optional(),
+      position: z.enum(["center", "top", "bottom", "left", "right"]).optional(),
+      bg_color: z.string().optional(),
+    })
+    .refine(
+      (self) => {
+        const bad = self.fit === "contain" && self.bg_color === undefined;
+        return !bad;
+      },
+      {
+        message: "fit: contain の場合、 bg_color を指定する必要があります",
+        path: ["bg_color"],
+      },
+    );
 
 export const CreateProjectSchema = ({ image }: { image: ImageFunction }) =>
   z.object({