Merge pull request #206 from vim-jp/feature/2025/add_timetable

スケジュールを追加

Author: staticWagomU

2025/src/components/Schedule.astro

@@ -0,0 +1,42 @@
+---
+import Card from "../Card.astro";
+import { Clock, User } from "@lucide/astro";
+import { getScheduleCardStyle, formatTime } from "./index.ts";
+
+type Props = {
+  start_at: Date;
+  end_at: Date;
+  title: string;
+  session_id?: string;
+  speaker_name?: string;
+};
+
+const { title, start_at, end_at, speaker_name } = Astro.props;
+const [cardClass, Icon] = getScheduleCardStyle(title);
+---
+
+<Card class=`p-2 mb-5 ${cardClass}`>
+  <div class="p-4">
+    <div class="space-y-2">
+      <div class="flex items-center text-sm">
+        <Clock class="mr-2 h-4 w-4 flex-shrink-0 text-green-900" />
+        <span class="font-bold text-gray-800"
+          >{formatTime(start_at)} - {formatTime(end_at)}</span
+        >
+        {
+          speaker_name && (
+            <div class="ml-5 flex items-center">
+              <User class="mr-2 h-4 w-4 text-gray-600" />
+              <span class="text-gray-600">{speaker_name}</span>
+            </div>
+          )
+        }
+      </div><div class="flex items-center">
+        <Icon class="mr-3 h-4 w-4 flex-shrink-0 text-gray-900" />
+        <h3 class="min-w-0 flex-1 text-base leading-tight font-semibold">
+          {title}
+        </h3>
+      </div>
+    </div>
+  </div>
+</Card>

2025/src/components/Schedule/TimeTable.astro

@@ -0,0 +1,19 @@
+---
+import { getCollection } from "astro:content";
+import Heading from "../Heading.astro";
+import TimeTable from "./TimeTable.astro";
+
+const timetable = await getCollection("timetable");
+---
+
+<section id="schedule" class="bg-white py-10 md:py-16">
+  <div class="container mx-auto max-w-4xl px-4">
+    <Heading>スケジュール</Heading>
+    {
+      timetable
+        .shift()
+        ?.data.sort((a, b) => a.start_at.getTime() - b.start_at.getTime())
+        .map((schedule) => <TimeTable {...schedule} />)
+    }
+  </div>
+</section>

2025/src/components/Schedule/index.astro

@@ -0,0 +1,25 @@
+import { MicVocal, Zap, Coffee } from "@lucide/astro";
+
+export const getScheduleCardStyle = (title: string) => {
+  const isBreak = ["Short break", "Lunch break"].includes(title);
+  if (isBreak) {
+    return ["bg-gray-50 border-gray-200", Coffee];
+  }
+  const isLightningTalks = title === "Lightning talks";
+  if (isLightningTalks) {
+    return ["bg-yellow-50 border-yellow-200", Zap];
+  }
+
+  const isOtherEvent = ["Opening", "Closing", "After party"].includes(title);
+  if (isOtherEvent) {
+    return ["bg-blue-50 border-blue-200", MicVocal];
+  }
+
+  return ["bg-green-50", MicVocal];
+};
+
+export const formatTime = (date: Date): string => {
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  return `${hours}:${minutes}`;
+};

2025/src/components/Schedule/index.ts

@@ -1,5 +1,4 @@
-import { glob } from "astro/loaders";
-// src/content/config.ts
+import { file, glob } from "astro/loaders";
 import { defineCollection, z } from "astro:content";
 
 const sponsors = defineCollection({
@@ -15,6 +14,19 @@ const sponsors = defineCollection({
   }),
 });
 
+const timetable = defineCollection({
+  loader: file("./src/content/timetable.toml"),
+  schema: z.array(
+    z.object({
+      title: z.string(),
+      start_at: z.coerce.date(),
+      end_at: z.coerce.date(),
+      speaker_name: z.string().optional(),
+      session_id: z.string().optional(),
+    }),
+  ),
+});
+
 const sessions = defineCollection({
   loader: glob({
     pattern: "*.toml",
@@ -35,4 +47,5 @@ const sessions = defineCollection({
 export const collections = {
   sponsors,
   sessions,
+  timetable,
 };

2025/src/content/config.ts

@@ -1,7 +1,7 @@
 ---
 import AboutVimConf from "../../components/AboutVimConf.astro";
 import KeynoteSpeakers from "../../components/KeynoteSpeakers/index.astro";
-import Schedule from "../../components/Schedule.astro";
+import Schedule from "../../components/Schedule/index.astro";
 import Sponsors from "../../components/Sponsors/index.astro";
 import Staff from "../../components/Staff/index.astro";
 import Top from "../../components/Top.astro";