crop article thumbnails (#225)

Author: aster-void

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 日間を通して来場してくださった皆様、ありがとうございました！

contents/articles/2024/12-21_kick-off-party-report/index.mdx

@@ -5,6 +5,8 @@ categories:
   - events
 image: ./image.jpg
 author: snakamura
+fit: contain
+bg_color: "#00693E"
 ---
 
 ut.code(); では 2024 年 12 月 21 日にプロジェクト発足会を行いました。

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"
 ---
 
 ## 📌 イベント概要

contents/articles/README.md

@@ -0,0 +1,36 @@
+# 記事ページ
+
+## frontmatter
+
+### 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` を使うよ。

src/components/ArticleList.astro

@@ -52,6 +52,15 @@ 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);
+
+      console.log(article.data.bg_color);
+
+      article.data.fit ??= "cover";
+      article.data.position ??= "center";
+
       const additionalProps = isFeatured
         ? {
             cellClassName: "md:col-span-2 md:row-span-2",
@@ -75,12 +84,25 @@ 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",
+                "min-h-0 w-full rounded-xl",
+                !article.data["bg_color"] && "skeleton",
                 additionalProps.imageClassName,
               ]}
+              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">

src/schema.ts

@@ -7,15 +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().nullable(),
-    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({