タイムテーブルを追加

.gitignore

@@ -1,8 +1,9 @@
 # build output
 dist/
 
-# News OGP images (generated at build / dev server start)
+# OGP images (generated at build / dev server start)
 public/og/news/*.png
+public/og/timetable/*.png
 
 # generated types
 .astro/

astro.config.mjs

@@ -11,4 +11,7 @@ export default defineConfig({
     defaultLocale: "ja",
     locales: ["en", "ja"],
   },
+  devToolbar: {
+    enabled: false,
+  },
 });

src/components/Footer.astro

@@ -152,8 +152,8 @@ const tokushouText =
   }
 
   .social-icon {
-    width: 24px;
-    height: 24px;
+    width: 30px;
+    height: 30px;
   }
 
   hr {

src/components/GlobalStyles.astro

@@ -17,6 +17,8 @@
     --primitive-light-cyan: #eefffd;
     --primitive-red: #fd7045;
     --primitive-color: #ffffff;
+    --primitive-green: #4fc35b;
+    --primitive-purple: #8585dc;
 
     --radius-section: 80px;
     --radius-section-sp: 80px;
@@ -28,10 +30,13 @@
     --surface-disabled: var(--primitive-light-gray);
     --surface-primary-dark: var(--primitive-red);
     --surface-secondary-dark: var(--primitive-navy);
-    --surface-room-a: var(--primitive-blue);
-    --surface-room-a-light: var(--primitive-light-blue);
-    --surface-room-b: var(--primitive-cyan);
-    --surface-room-b-light: var(--primitive-light-cyan);
+    --surface-session: var(--primitive-blue);
+    --surface-session-light: var(--primitive-light-blue);
+    --surface-workshop: var(--primitive-cyan);
+    --surface-workshop-light: var(--primitive-light-cyan);
+    --surface-beginner: var(--primitive-green);
+    --surface-intermediate: var(--primitive-blue);
+    --surface-advanced: var(--primitive-purple);
 
     --text-primary: var(--primitive-black);
     --text-secondary: var(--primitive-dark-gray);

src/components/Header.astro

@@ -191,7 +191,13 @@ const pathname = Astro.url.pathname;
       <li class="navigation-menu-item">
         <TextLink href={getRelativeLocaleUrl(currentLocale)} text="Home" />
       </li>
-      <li>
+      <li class="navigation-menu-item">
+        <TextLink
+          href={getRelativeLocaleUrl(currentLocale, "timetable")}
+          text="Timetable"
+        />
+      </li>
+      <li class="navigation-menu-item">
         <TextLink
           href={getRelativeLocaleUrl(currentLocale, "staffs")}
           text="Staffs"
@@ -205,11 +211,6 @@ const pathname = Astro.url.pathname;
         />
       </li>
       <!-- <li>
-        <a href={getRelativeLocaleUrl(currentLocale, "timetable")}>
-          Timetable
-        </a>
-      </li>
-      <li>
         <a href={getRelativeLocaleUrl(currentLocale, "jobboard")}>
           Job Board
         </a>

src/components/news/NewsArticlePage.astro

@@ -3,7 +3,7 @@ import { render, type CollectionEntry } from "astro:content";
 import { getRelativeLocaleUrl } from "astro:i18n";
 import { constants } from "../../constants";
 import SubPage from "../../layouts/SubPage.astro";
-import { getNewsOgImagePublicPath } from "../../utils/generateNewsOgImage";
+import { getNewsOgImagePublicPath } from "../../utils/generateOgImage";
 import BackLink from "../ui/BackLink.astro";
 import SectionTitle from "../ui/SectionTitle.astro";
 

src/components/timetable/DifficultyBadge.astro

@@ -0,0 +1,88 @@
+---
+import StarIcon from "../../assets/icons/star.svg";
+
+export type DifficultyBadgeVariant = "card" | "detail";
+
+type Props = {
+  difficulty: "beginner" | "intermediate" | "advanced";
+  variant?: DifficultyBadgeVariant;
+};
+
+const { difficulty, variant = "card" } = Astro.props as Props;
+
+const textClass =
+  variant === "detail" ? "text-body-large-strong" : "text-body-small-strong";
+
+const currentLocale = Astro.currentLocale || "ja";
+
+const displayText =
+  currentLocale === "ja"
+    ? {
+        beginner: "初心者向け",
+        intermediate: "中級者向け",
+        advanced: "上級者向け",
+      }
+    : {
+        beginner: "Beginner",
+        intermediate: "Intermediate",
+        advanced: "Advanced",
+      };
+---
+
+<div class="badge" data-difficulty={difficulty} data-variant={variant}>
+  <StarIcon class="star-icon" />
+  <span class={textClass}>{displayText[difficulty]}</span>
+</div>
+
+<style>
+  .badge {
+    display: flex;
+    gap: var(--space-xxs);
+    color: var(--text-on-fill);
+    border-radius: var(--radius-objects);
+    width: fit-content;
+    align-items: center;
+  }
+
+  .badge[data-difficulty="beginner"] {
+    background-color: var(--surface-beginner);
+  }
+
+  .badge[data-difficulty="intermediate"] {
+    background-color: var(--surface-intermediate);
+  }
+
+  .badge[data-difficulty="advanced"] {
+    background-color: var(--surface-advanced);
+  }
+
+  .badge span {
+    margin-top: -2px;
+  }
+
+  .star-icon {
+    fill: var(--text-on-fill);
+  }
+
+  .badge[data-variant="card"] {
+    padding: 0 var(--space-xs) 0 var(--space-xxs);
+  }
+
+  .badge[data-variant="detail"] {
+    padding: var(--space-xxxs) var(--space-s) var(--space-xxxs) var(--space-xs);
+  }
+
+  .badge[data-variant="card"] .star-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  .badge[data-variant="detail"] .star-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .badge[data-variant="detail"] span {
+    margin-top: 0;
+  }
+</style>

src/components/timetable/card.astro

@@ -0,0 +1,31 @@
+---
+import type { Program } from "./program";
+import LongSessionCard from "./card/LongSession.astro";
+import OrganizerCard from "./card/Organizer.astro";
+import ShortTalkCard from "./card/ShortTalk.astro";
+import SponsorSessionCard from "./card/SponsorSession.astro";
+import WorkshopCard from "./card/Workshop.astro";
+import BlankCard from "./card/Blank.astro";
+
+type Props = {
+  program: Program;
+};
+
+const { program } = Astro.props as Props;
+---
+
+{
+  program.type === "organizer" ? (
+    <OrganizerCard program={program} />
+  ) : program.type === "longSession" ? (
+    <LongSessionCard program={program} />
+  ) : program.type === "shortTalk" ? (
+    <ShortTalkCard program={program} />
+  ) : program.type === "sponsorSession" ? (
+    <SponsorSessionCard program={program} />
+  ) : program.type === "workshop" ? (
+    <WorkshopCard program={program} />
+  ) : program.type === "blank" ? (
+    <BlankCard spHeight={program.spHeight} />
+  ) : null
+}

src/components/timetable/card/Blank.astro

@@ -0,0 +1,34 @@
+---
+interface Props {
+  spHeight?: string;
+}
+
+const { spHeight } = Astro.props;
+
+const isCollapsedOnSp =
+  spHeight === undefined || spHeight === "0" || spHeight === "0px";
+---
+
+<div
+  class="card"
+  data-blank-collapsed-sp={isCollapsedOnSp ? "" : undefined}
+  style={!isCollapsedOnSp && spHeight
+    ? `--blank-sp-height: ${spHeight}`
+    : undefined}
+></div>
+
+<style>
+  .card {
+    height: 100%;
+  }
+
+  @media screen and (max-width: 768px) {
+    .card[data-blank-collapsed-sp] {
+      display: none;
+    }
+
+    .card:not([data-blank-collapsed-sp]) {
+      height: var(--blank-sp-height);
+    }
+  }
+</style>

src/components/timetable/card/LongSession.astro

@@ -0,0 +1,104 @@
+---
+import type { ProgramLongSession } from "../program";
+import DifficultyBadge from "../DifficultyBadge.astro";
+import { getRelativeLocaleUrl } from "astro:i18n";
+
+type Props = {
+  program: Extract<ProgramLongSession, { type: "longSession" }>;
+};
+
+const { program } = Astro.props as Props;
+const currentLocale = Astro.currentLocale || "ja";
+---
+
+<div class="card">
+  <div class="metadata-container text-body-medium-strong">
+    <div class="time-container">
+      <span>{program.timeString}</span>
+    </div>
+    <DifficultyBadge difficulty={program.difficulty} />
+  </div>
+  <a
+    class="title-container text-body-large-strong"
+    href={getRelativeLocaleUrl(currentLocale, `timetable/${program.id}`)}
+    class="text-body-large-strong"
+  >
+    <div class="text-wrapper">
+      <span>{program.title}</span>
+    </div>
+  </a>
+  <div class="footer-container">
+    <div class="speaker-container">
+      <img class="icon" src={program.speaker.avatar} />
+      <span class="text-body-small-strong">{program.speaker.name}</span>
+    </div>
+    <span class="text-body-small">Long Session(40min)</span>
+  </div>
+</div>
+
+<style>
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxxs);
+    padding: var(--space-xs) var(--space-s);
+    border-radius: var(--radius-objects);
+    background-color: var(--surface-session-light);
+    min-height: 300px;
+    box-sizing: border-box;
+  }
+
+  .card .metadata-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .card .metadata-container .time-container {
+    flex: 1;
+  }
+
+  .card .title-container {
+    color: var(--text-primary);
+    transition: color 0.1s ease-in-out;
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    height: 56px;
+  }
+
+  .card .title-container:hover {
+    color: var(--text-accent);
+  }
+
+  .card .title-container .text-wrapper {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    height: fit-content;
+  }
+
+  .card .title-container span {
+    margin: auto 0;
+    height: fit-content;
+  }
+
+  .card .footer-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .card .footer-container .speaker-container {
+    display: flex;
+    gap: var(--space-xxxs);
+  }
+
+  .card .footer-container .speaker-container .icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+</style>