8/6のサブイベントの内容掲載

app/lib/data.tsx

@@ -904,39 +904,3 @@ EventHubは、マーケティング、営業のためのウェビナー・カン
     },
   ],
 };
-
-export const SUB_EVENTS = [
-  {
-    title: "【学生向け】来年は TSKaigi に登壇するぞ！LT会&交流会で学生エンジニアと繋がろう！",
-    description: `初LT大歓迎！TS好きな学生も触ったことない学生も集まってワイワイ盛り上がろう！
-
-カンファレンスに登壇してるエンジニアってかっこいいですよね！
-
-でも、登壇するにはハードルが高い...そんなあなたに向けて、今回は学生限定のTSKaigiサブイベントとしてLT会を企画しました。
-この機会をきっかけにし、ぜひ来年のTSKaigiではプロポーザルを出しましょう！
-`,
-    sponsorList: ["株式会社Progate", "エムスリー株式会社"],
-    tags: ["学生向け", "公募枠あり", "オンラインあり"],
-    date: "5/17",
-    day: "金",
-    link: "https://progate.connpass.com/event/318009/",
-    thumbnail: "/subevent_5_17.png",
-  },
-  {
-    title: "TSKaigi 2024 After Talk",
-    description: `TSKaigi本編に引き続き、TypeScriptに関する発表の場を提供するとともに、TSKaigiコミュニティの活性化を図ることを目的としています。
-
-TSKaigi 2024にご参加された方はもちろん、参加できなかった方、プロポーザルが惜しくも採択されなかった方も、ぜひこの機会にご参加ください。
-
-本編の熱気に続き、セッションやLTを通してTypeScriptの知見を共有し、そして懇親会では横のつながりを深めましょう！
-
-オフライン・オンライン問わず、皆様のご参加をスタッフ一同心よりお待ちしております。
-`,
-    sponsorList: ["株式会社LayerX", "株式会社Helpfeel", "アセンド株式会社"],
-    tags: ["公募枠あり", "オンラインあり"],
-    date: "6/4",
-    day: "火",
-    link: "https://layerx.connpass.com/event/318123/",
-    thumbnail: "/subevent_6_4.png",
-  },
-];

app/subevents/const/index.ts

@@ -0,0 +1,70 @@
+import type { StaticImageData } from "next/image";
+
+import eventImage517 from "../image/subevent_5_17.png";
+import eventImage64 from "../image/subevent_6_4.png";
+import eventImage86 from "../image/subevent_8_6.png";
+
+type EventTag = "公募枠あり" | "オンラインあり" | "学生向け" | "公式イベント";
+
+type SubEvent = {
+  title: string;
+  description: string[];
+  sponsorList: string[];
+  tags: EventTag[] | string[]; // 補完を表示しつつ任意入力を許可
+  date: Date;
+  /**
+   * スポンサーの方法
+   * - `"hosting"` : 主催がスポンサー企業
+   * - `"sponsored"` : 主催がTSKaigi 協賛がスポンサー企業
+   */
+  sponsorType: "hosting" | "sponsored";
+  link: `https://${string}` | `http://${string}`;
+  thumbnail: StaticImageData;
+};
+
+export const SUB_EVENTS = [
+  {
+    title: "TSKaigiサブイベント #1 フロントエンド",
+    description: [
+      "TSKaigiサブイベントは、TypeScriptコミュニティの活性化のために、TSKaigi運営チームが開催する定期イベントです！",
+      "オンライン・オフライン合わせて2000名以上にご参加いただいたTSKaigi2024では、フロントエンドからハードウェアまで、様々な分野のセッションを展開しました。",
+      "一方、定期開催するTSKaigiサブイベントでは、特定の「テーマ」を設定し、そのテーマに関したセッションやLTを募集いたします！皆さんの興味のある領域やテーマの回で、ぜひご参加ください！",
+      "初回となる今回は、王道「フロントエンド」をテーマとし、TypeScriptとフロントエンドに関するトークを行います！ゲストセッションとして、TSKaigi2024の選考委員も務めてくださったうひょさんさんにもトークを行っていただく予定です。（イベント後は懇親会も予定しています。）",
+    ],
+    sponsorList: ["TBD"],
+    sponsorType: "sponsored",
+    tags: ["公募枠あり", "オンラインあり", "公式イベント"],
+    date: new Date("2024-08-06"),
+    link: "https://typescript-jpc.connpass.com/event/325001/",
+    thumbnail: eventImage86,
+  },
+  {
+    title: "【学生向け】来年は TSKaigi に登壇するぞ！LT会&交流会で学生エンジニアと繋がろう！",
+    description: [
+      "初LT大歓迎！TS好きな学生も触ったことない学生も集まってワイワイ盛り上がろう！",
+      "カンファレンスに登壇してるエンジニアってかっこいいですよね！",
+      "でも、登壇するにはハードルが高い...そんなあなたに向けて、今回は学生限定のTSKaigiサブイベントとしてLT会を企画しました。この機会をきっかけにし、ぜひ来年のTSKaigiではプロポーザルを出しましょう！",
+    ],
+    sponsorList: ["株式会社Progate", "エムスリー株式会社"],
+    sponsorType: "hosting",
+    tags: ["学生向け", "公募枠あり", "オンラインあり"],
+    date: new Date("2024-05-17"),
+    link: "https://progate.connpass.com/event/318009/",
+    thumbnail: eventImage517,
+  },
+  {
+    title: "TSKaigi 2024 After Talk",
+    description: [
+      "TSKaigi本編に引き続き、TypeScriptに関する発表の場を提供するとともに、TSKaigiコミュニティの活性化を図ることを目的としています。",
+      "TSKaigi 2024にご参加された方はもちろん、参加できなかった方、プロポーザルが惜しくも採択されなかった方も、ぜひこの機会にご参加ください。",
+      "本編の熱気に続き、セッションやLTを通してTypeScriptの知見を共有し、そして懇親会では横のつながりを深めましょう！",
+      "オフライン・オンライン問わず、皆様のご参加をスタッフ一同心よりお待ちしております。",
+    ],
+    sponsorList: ["株式会社LayerX", "株式会社Helpfeel", "アセンド株式会社"],
+    sponsorType: "hosting",
+    tags: ["公募枠あり", "オンラインあり"],
+    date: new Date("2024-06-04"),
+    link: "https://layerx.connpass.com/event/318123/",
+    thumbnail: eventImage64,
+  },
+] as const satisfies SubEvent[];

app/subevents/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Container from "../ui/container";
 import { FaExternalLinkAlt } from "react-icons/fa";
-import { SUB_EVENTS } from "../lib/data";
+import { SUB_EVENTS } from "./const";
 
 const Tag = ({ children }: { children: string }) => {
   return (
@@ -24,36 +24,57 @@ const SubEventPage = () => {
         <p className="mt-1 text-sm">※ 正確な情報は各イベントページをご確認ください。</p>
       </div>
       <div className="mt-10 flex flex-col gap-8">
-        {SUB_EVENTS.map(({ title, link, description, tags, date, day, thumbnail, sponsorList }) => (
-          <div
-            key={title}
-            className="flex flex-col rounded-xl bg-white p-4 text-slate-800 md:flex-row"
-          >
-            <div className="w-full shrink-0 border-b border-b-slate-200 border-r-slate-200 p-2 pb-4 pr-8 text-3xl md:w-[112px] md:border-b-0 md:border-r md:p-4">
-              {date}
-              <br />
-              <span className="text-xl">({day})</span>
-            </div>
-            <div className="p-2 pt-4 md:p-4">
-              <a href={link} target="_blank" rel="noopener noreferrer">
-                <h2 className="text-xl font-bold underline hover:no-underline">
-                  {title}
-                  <FaExternalLinkAlt className="ml-2 inline" size={14} />
-                </h2>
-              </a>
-              <a href={link} target="_blank" rel="noopener noreferrer">
-                <img src={thumbnail} alt={title} className="mt-4 max-h-[200px]" />
-              </a>
-              <p className="mt-4 whitespace-pre-line">{description}</p>
-              <div className="mt-4 flex flex-wrap gap-2">
-                {tags.map((tag) => (
-                  <Tag key={tag}>{tag}</Tag>
-                ))}
+        {/* FIXME: Next.jsが新しい配列のメソッドに対応していないのでsortを使っているがtoSortedを利用したい: https://github.com/vercel/next.js/issues/58242 */}
+        {SUB_EVENTS.sort((prev, next) => next.date.getTime() - prev.date.getTime()).map(
+          ({ title, link, description, tags, date, thumbnail, sponsorList, sponsorType }) => {
+            const weekday = new Intl.DateTimeFormat("ja-JP", {
+              weekday: "narrow",
+            }).format(date);
+            const localeDate = new Intl.DateTimeFormat("ja-JP", {
+              day: "2-digit",
+              month: "2-digit",
+            }).format(date);
+
+            return (
+              <div
+                key={title}
+                className="flex flex-col rounded-xl bg-white p-4 text-slate-800 md:flex-row"
+              >
+                <div className="w-full shrink-0 border-b border-b-slate-200 border-r-slate-200 p-2 pb-4 pr-8 text-3xl md:w-[112px] md:border-b-0 md:border-r md:p-4">
+                  {localeDate}
+                  <br />
+                  <span className="text-xl">({weekday})</span>
+                </div>
+                <div className="p-2 pt-4 md:p-4">
+                  <a href={link} target="_blank" rel="noopener noreferrer">
+                    <h2 className="text-xl font-bold underline hover:no-underline">
+                      {title}
+                      <FaExternalLinkAlt className="ml-2 inline" size={14} />
+                    </h2>
+                  </a>
+                  <a href={link} target="_blank" rel="noopener noreferrer">
+                    <img src={thumbnail.src} alt={title} className="mt-4 max-h-[200px]" />
+                  </a>
+                  <div className="pb-4 pt-2">
+                    {description.map((text, index) => (
+                      <p key={index} className="mt-4 whitespace-pre-line">
+                        {text}
+                      </p>
+                    ))}
+                  </div>
+                  <div className="mt-4 flex flex-wrap gap-2">
+                    {tags.map((tag) => (
+                      <Tag key={tag}>{tag}</Tag>
+                    ))}
+                  </div>
+                  <div className="mt-4 w-full text-end text-sm">
+                    {sponsorType === "hosting" ? "実施" : "スポンサー"}: {sponsorList.join("、")}
+                  </div>
+                </div>
               </div>
-              <div className="mt-4 w-full text-end text-sm">実施: {sponsorList.join("、")}</div>
-            </div>
-          </div>
-        ))}
+            );
+          },
+        )}
       </div>
     </Container>
   );

custom.d.ts

@@ -0,0 +1,5 @@
+// CIでのTypeCheckではnext-env.d.tsが生成されておらず画像への参照がエラーになるので個別で定義
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpeg";
+declare module "*.jpg";