feat(Sessions): セッションページのコンポーネントを作成

Author: staticWagomU

2025/src/components/Sessions/Session.astro

@@ -0,0 +1,61 @@
+---
+import { User, FileText } from "@lucide/astro";
+import Card from "../Card.astro";
+
+type Props = {
+  session_id: string;
+  speaker_name: string;
+  title: string;
+  abstract: string;
+  self_introduction?: string;
+  image_url?: string;
+};
+
+const { speaker_name, title, abstract, self_introduction, image_url } = Astro.props;
+---
+
+<Card class="p-8 mb-5">
+  <div class="flex flex-col items-center gap-6 md:flex-row md:items-start">
+    <div class="flex-shrink-0">
+      <span
+        class="relative flex h-24 w-24 shrink-0 overflow-hidden rounded-full md:h-32 md:w-32"
+      >
+        <img 
+          class="aspect-square h-full w-full text-center object-cover" 
+          alt={speaker_name}
+          src={image_url || 'https://via.placeholder.com/150?text=' + encodeURIComponent(speaker_name.charAt(0))}
+        /></span
+      >
+    </div>
+    <div class="flex-1 text-center md:text-left">
+      <div class="mb-3">
+        <h3 class="mb-2 text-2xl font-bold text-gray-900 md:text-3xl">
+          {speaker_name}
+        </h3>
+      </div>
+      <div class="mb-4">
+        <p class="text-lg text-gray-600 italic">{title}</p>
+      </div>
+      <div>
+        <div class="mb-3 flex items-center justify-center md:justify-start">
+          <FileText class="mr-2 h-5 w-5 text-emerald-600" />
+          <span class="font-semibold text-gray-800">概要</span>
+        </div>
+        <p class="leading-relaxed text-gray-700" style="white-space: pre-line;">
+          {abstract}
+        </p>
+      </div>
+      {
+        self_introduction && (
+          <div>
+            <div class="mb-3 flex items-center">
+              <User class="mr-2 h-5 w-5 text-emerald-600" />
+              <span class="font-semibold text-gray-800">スピーカー紹介</span>
+            </div>
+            <p class="leading-relaxed text-gray-600">{self_introduction}</p>
+          </div>
+        )
+      }
+    </div>
+  </div>
+</Card>

2025/src/components/Sessions/index.astro

@@ -0,0 +1,26 @@
+---
+import Heading from "../Heading.astro";
+import Session from "./Session.astro";
+import { getCollection } from "astro:content";
+import { getSessionImageUrl } from "./index";
+
+const sessions = await getCollection("sessions");
+
+// 各セッションに画像URLを追加
+const sessionsWithImages = await Promise.all(
+  sessions.map(async (session) => ({
+    ...session,
+    data: {
+      ...session.data,
+      image_url: await getSessionImageUrl(session.data.session_id),
+    },
+  }))
+);
+---
+
+<section id="sessions" class="bg-white py-10 md:py-16">
+  <div class="container mx-auto px-4">
+    <Heading>セッション一覧</Heading>
+    {sessionsWithImages.sort((a, b) => a.data.start_at.getTime() - b.data.start_at.getTime()).map((session) => <Session {...session.data} />)}
+  </div>
+</section>

2025/src/components/Sessions/index.ts

@@ -0,0 +1,36 @@
+import type { ImageMetadata } from 'astro';
+
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/assets/sessions/*.{png,jpg}'
+);
+
+export async function getSessionImageUrl(sessionId: string): Promise<string> {
+  // ファイル名とsession_idのマッピング
+  const imageFiles: Record<string, string> = {
+    'atusy': 'atusy.jpg',
+    'hrsh7th': 'hrsh7th.png',
+    'kawarimidoll': 'kawarimidoll.png',
+    'kuuote': 'kuuote.png',
+    'Λlisue': 'lambdalisue.png',
+    'mikoto2000': 'mikoto2000.png',
+    'rbtnn': 'rbtnn.jpg',
+    'satoru_kitaguchi_register': 'satorunooshie.png',
+    'satoru_kitaguchi_dot': 'satorunooshie.png',
+    'teppei22': 'teppei22.jpg',
+  };
+
+  const fileName = imageFiles[sessionId];
+  if (!fileName) {
+    return '';
+  }
+
+  const imagePath = `/src/assets/sessions/${fileName}`;
+  if (images[imagePath]) {
+    const imageModule = await images[imagePath]();
+    return imageModule.default.src;
+  }
+
+  return '';
+}
+
+