fix project fit and position

Author: aster-void

contents/projects/hackathon/2023-08-17/call-paper.md

@@ -3,8 +3,11 @@ title: Call Paper
 date: 2023-08-17
 kind: hackathon
 status: finished
+
 image:
   src: ./call-paper.png
+  position: left
+
 description: 論文の引用関係を可視化できるアプリ
 github: https://github.com/ut-code/call-paper
 website: https://call-paper.pages.dev

contents/projects/hackathon/2023-08-17/denigma.md

@@ -5,6 +5,8 @@ kind: hackathon
 status: dead
 image:
   src: ./denigma.png
+  position: left
+
 description: "暗号解読ゲーム。シーザー暗号やRSA暗号など、基本的な暗号に触れてみよう！"
 github: https://github.com/ut-code/denigma
 website: https://utcode-denigma.onrender.com/

contents/projects/hackathon/2023-08-17/music-app.md

@@ -5,6 +5,10 @@ kind: hackathon
 status: finished
 image:
   src: ./music-app.png
+  position: top
+  fit: contain
+  bg: white
+
 description: その日の気分にあった作業用BGMを生成してくれるアプリ
 github: https://github.com/ut-code/music-app
 website: https://ut-code.github.io/music-app

contents/projects/hackathon/2024-06-08/typing-script.md

@@ -6,6 +6,9 @@ date: 2024-06-08
 description: ソースコードに特化したタイピング練習サイトです。
 image:
   src: ./typing-script.png
+  fit: contain
+  bg: white
+
 website: https://ut-code.github.io/TypingScript
 github: https://github.com/ut-code/TypingScript
 ---

contents/projects/hackathon/2025-02-22/gemmit.md

@@ -6,6 +6,9 @@ status: released
 description: "Git の差分から Gemini がコミットメッセージを考えてくれるツール"
 image:
   src: ./gemmit.png
+  position: top
+  bg: white
+
 members:
   - rtakanaka
 tags:

src/components/ArticleList.astro

@@ -87,11 +87,10 @@ const articlesWithExcerpts = await Promise.all(
               fit={article.data.fit}
               src={article.data.image}
               class:list={[
-                "min-h-0 w-full rounded-xl",
+                "aspect-5/3 min-h-0 w-full rounded-xl",
                 !article.data["bg_color"] && "skeleton",
               ]}
               style={{
-                "aspect-ratio": "5 / 3",
                 "object-fit": article.data.fit,
                 ...(article.data.bg_color
                   ? {

src/components/ProjectList.astro

@@ -29,15 +29,12 @@ const { projects, variant = "full" } = props;
             height={(600 * 3) / 5}
             class:list={[
               "aspect-5/3 w-full",
-              !project.data.image.bg && "skeleton",
+              project.data.image.fit !== "contain" && "skeleton",
             ]}
             style={{
               "object-fit": project.data.image.fit,
-              ...(project.data.image.bg
-                ? {
-                    "background-color": project.data.image.bg,
-                  }
-                : {}),
+              "object-position": project.data.image.position,
+              "background-color": project.data.image.bg,
             }}
           />
           <div class="p-4">

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

@@ -33,9 +33,16 @@ const { Content } = await render(project);
       <Picture
         loading="eager"
         formats={["avif", "webp"]}
-        class="skeleton w-full object-cover lg:w-150 lg:rounded-2xl"
+        class="skeleton aspect-5/3 w-full object-cover lg:w-150 lg:rounded-2xl"
         alt="プロジェクト画像"
         src={project.data.image.src}
+        position={project.data.image.position}
+        width="1000"
+        height="600"
+        style={{
+          "object-position": project.data.image.position,
+          "object-fit": project.data.image.fit,
+        }}
       />
       <div class="container mx-auto mt-8 px-4 lg:mx-0 lg:flex-1">
         <p class="flex items-center gap-1 text-gray-600">

src/schema.ts

@@ -7,6 +7,8 @@ export type Article = z.infer<ReturnType<typeof CreateArticleSchema>>;
 export type Member = z.infer<ReturnType<typeof CreateMemberSchema>>;
 export type Project = z.infer<ReturnType<typeof CreateProjectSchema>>;
 
+const Position = z.enum(["center", "top", "bottom", "left", "right"]);
+const Fit = z.enum(["cover", "contain", "fill", "none"]);
 export const CreateArticleSchema = ({ image }: { image: ImageFunction }) =>
   z
     .object({
@@ -19,8 +21,8 @@ export const CreateArticleSchema = ({ image }: { image: ImageFunction }) =>
       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(),
+      fit: Fit.optional(),
+      position: Position.default("center"),
       bg_color: z.string().optional(),
     })
     .refine(
@@ -51,7 +53,8 @@ export const CreateProjectSchema = ({ image }: { image: ImageFunction }) =>
     date: z.date(),
     image: z.object({
       src: image(),
-      fit: z.enum(["cover", "contain", "fill"]).optional().default("cover"),
+      position: Position.default("center"),
+      fit: Fit.default("cover"),
       bg: z.string().optional().default("whitesmoke"),
     }),
     description: z.string(),