can configure crops

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,7 @@ categories:
   - events
 image: ./image.jpg
 author: snakamura
+fit: contain
 ---
 
 ut.code(); では 2024 年 12 月 21 日にプロジェクト発足会を行いました。

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 されます。

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

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(),