add bg_color

Author: aster-void

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 日にプロジェクト発足会を行いました。

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

@@ -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` を使うよ。

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">

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({