merge main into production (sold out after party ticket) (#973)

* feat: sold out after party (#969)

* feat: feature flags improvement (#970)

* wip

* save

* feat: feature flags improvement

* save

* save

* Update modules/00.feature-flags.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update modules/00.feature-flags.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* feat: timetable (#908)

* add: image

* Create timetable.ts

* feat: i18n

* feat: timetable component

* wip feat: timetable page

* feat: timetable schedule

* wip table内容調整

* feat: PC timetable

* feat: sp style

* feat: en

* Update cspell.config.yaml

* fix: lint

* wip feat: og

* fix: 時間修正・ハンズオンタイトル修正

Keynote（Evan You） 10:11-10:50
Hands-on1 12:50-14:50（セッションタイトルもBeginner Hands-onに）
Hands-on2 15:10-17:10（セッションタイトルもIntermediate Hands-onに）
ランチタイム明け1つめのセッション時間、終わりを13:40→13:20

* fmt

* feat: 戻るボタンを正しく戻るにする

composablesに切り出してもいい？

* chore: timetableのトラックをstickyに

* chore: 学生支援とパネルディスカッションにスピーカーの追加

* update: timetable ja

aaaaaa~~~~~~

* en

* chore

* feat: eventへのリンク

* feat: 登壇時間と場所の追加

* Update TimetableCell.vue

* chore

* fix: 時間微修正

* save

* feat: server side i18n

* save

* save

* save

* save

* save

* save

* save

* save

* save

* save

* feat: server i18n

* chore: remove unused

---------

Co-authored-by: ubugeeei <ubuge1122@gmail.com>

* chore: eslint ignore path

* chore: add timetable og image

* feat: staff (#930)

* feat: add staff grid components and i18n labels

* feat: add core staff info

* feat: add leader section and fix styles

* fix: x link and image paths

* feat: add volunteer, minimize images

* chore: add staff name to cSpell

* fix: linter

* chore: optimize image sizes

* fix: layout

* chore: add feature flags

* save

* save

* save

* save

* save

* save

* save

---------

Co-authored-by: ubugeeei <ubuge1122@gmail.com>

* chore: shuffle on client

* chore: aspect-ratio

* feat: guiest details (#971)

* feat: closing early bird (#972)

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: csy19 <43460318+csy19@users.noreply.github.com>
Co-authored-by: Hal <102022084+Hal-Spidernight@users.noreply.github.com>

Author: 4 people

.github/workflows/ci.yml

@@ -36,6 +36,7 @@ jobs:
       - name: Check Building
         run: pnpm build
         env:
+          NODE_OPTIONS: '--max-old-space-size=4096'
           AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_R2_ACCESS_KEY_ID: ${{ secrets.CLOUDFLARE_R2_ACCESS_KEY_ID }}

.gitignore

@@ -29,4 +29,5 @@ logs
 # Local Netlify folder
 .netlify
 
-app/components/_i18n
+app/components/_i18n
+server/i18n/generated

README.md

@@ -21,6 +21,80 @@ pnpm install
 pnpm dev
 ```
 
+## Feature Flags Module
+
+This project includes a custom Nuxt module for managing feature flags with full TypeScript support.
+
+### Features
+
+- **Type-safe**: Auto-generates TypeScript definitions for all feature flags
+- **Universal**: Works seamlessly in both client and server environments
+- **Build-time resolution**: All feature flags are resolved during build step, not at runtime
+- **Zero runtime overhead**: Flags are replaced at build time with constants
+- **Tree-shaking friendly**: Unused code paths are eliminated from the final bundle
+
+### Configuration
+
+Configure feature flags in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  featureFlags: {
+    timetable: true,
+    soldOutAfterParty: false,
+  }
+})
+```
+
+### Usage
+
+#### Dynamic Component Import
+
+Use feature flags with dynamic imports to conditionally load components:
+
+```vue
+<script setup lang="ts">
+// Conditionally import component based on feature flag
+const BetaFeature = import.meta.vfFeatures.betaFeature 
+  ? defineAsyncComponent(() => import('~/components/BetaFeature.vue'))
+  : null;
+</script>
+
+<template>
+  <div>
+    <BetaFeature v-if="BetaFeature" />
+  </div>
+</template>
+```
+
+#### Page-level Feature Flags
+
+Control page generation with Nuxt's `ignore` option:
+
+This approach completely excludes pages from the build, resulting in smaller bundle sizes and true 404s when features are disabled.
+
+See: https://nuxt.com/docs/4.x/api/nuxt-config#ignore
+
+#### Server API Routes
+
+Control API endpoints with feature flags:
+
+```ts
+// server/api/timetable.get.ts
+export default defineEventHandler(async (event) => {
+  // Block API if feature is disabled
+  if (!import.meta.vfFeatures.timetable) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Endpoint not available'
+    });
+  }
+
+  // Return timetable data
+  return await getTimetableData();
+});
+```
+
 ## Plans Overview
 
 ### Features

app/constant.ts

@@ -12,6 +12,7 @@ export const HOME_HEADING_ID = {
   access: "access",
   studentSupport: "student-support",
   store: "store",
+  staff: "staff",
 
   // NOTE: Be careful as it is hardcoded in MDC
   contact: "contact-form",

app/layouts/default.vue

@@ -37,9 +37,8 @@ const menuItems = computed<MenuItemProps[]>(() =>
     {
       id: HOME_HEADING_ID.timetable,
       label: "Timetable",
-      // TODO:
-      routeName: localeRoute({ name: "index" }).name,
-      disabled: !__FEATURE_TIMETABLE__,
+      routeName: localeRoute({ name: "timetable" }).name,
+      disabled: !import.meta.vfFeatures.timetable,
     },
     {
       id: HOME_HEADING_ID.speaker,
@@ -103,6 +102,7 @@ const WIDE_ROUTE_NAMES: RoutesNamesList[] = [
   "sponsors",
   "sponsors-sponsorId",
   "event",
+  "timetable",
   "related-events",
   "store",
 ];
@@ -232,6 +232,7 @@ watch(() => route.hash, async (hash) => {
 
   &.widen-content {
     min-width: 960px;
+    /* min-width: 95%; */
     transition: unset;
 
     @media (--mobile) {

app/pages/_components/SectionStaff.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { HOME_HEADING_ID } from "~/constant";
+import { useI18n, useFetch, useBreakpoint, computed, onMounted } from "#imports";
+import { VFSection } from "#components";
+
+import StaffGrid from "./StaffGrid.vue";
+import type { Staff } from "~~/server/api/staffs/index.get";
+
+const { t } = useI18n();
+const bp = useBreakpoint();
+
+const { data: staffList } = await useFetch("/api/staffs", { deep: true });
+
+const leaderColumns = computed(() => {
+  return bp.value === "pc" ? 3 : 2;
+});
+
+const coreColumns = computed(() => {
+  return bp.value === "pc" ? 4 : 3;
+});
+
+onMounted(() => {
+  if (!staffList.value) return;
+  staffList.value.leaders = shuffleNonPinned(staffList.value.leaders);
+  staffList.value.cores = shuffleNonPinned(staffList.value.cores);
+});
+function shuffleArray<T>(array: T[]): T[] {
+  const shuffled = [...array];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i]!, shuffled[j]!] = [shuffled[j]!, shuffled[i]!];
+  }
+  return shuffled;
+}
+
+function shuffleNonPinned(staffArray: Staff[]): Staff[] {
+  const pinned = staffArray.filter(staff => staff.pinned);
+  const nonPinned = staffArray.filter(staff => !staff.pinned);
+  const shuffledNonPinned = shuffleArray(nonPinned);
+  return [...pinned, ...shuffledNonPinned];
+}
+</script>
+
+<template>
+  <VFSection :id="HOME_HEADING_ID.staff" :title="t('staff.title')">
+    <p class="staff-description">
+      {{ t('staff.description') }}
+    </p>
+    <template v-if="staffList">
+      <StaffGrid
+        :staff-list="staffList.leaders"
+        grid-mode="leader"
+        :columns="leaderColumns"
+      />
+      <StaffGrid
+        :staff-list="staffList.cores"
+        grid-mode="core"
+        :columns="coreColumns"
+      />
+
+      <VFHeading id="volunteer-staff">
+        {{ t('staff.volunteer') }}
+      </VFHeading>
+
+      <StaffGrid
+        :staff-list="staffList.volunteers"
+        grid-mode="volunteer"
+      />
+    </template>
+  </VFSection>
+</template>
+
+<style scoped>
+.staff-description {
+  margin: 2rem 0;
+  word-break: break-all;
+}
+</style>

app/pages/_components/StaffGrid.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import StaffGridItem, { type StaffItemProps } from "./StaffGridItem.vue";
+
+const {
+  staffList,
+  gridMode,
+  columns,
+} = defineProps<{
+  staffList: StaffItemProps[];
+  gridMode: "leader" | "core" | "volunteer";
+  columns?: number;
+}>();
+
+const gridClass = computed(() => `staff-grid staff-grid-${gridMode}`);
+
+const gridStyle = computed(() =>
+  columns && (gridMode === "leader" || gridMode === "core")
+    ? { gridTemplateColumns: `repeat(${columns}, 1fr)` }
+    : {},
+);
+</script>
+
+<template>
+  <div :class="gridClass" :style="gridStyle">
+    <StaffGridItem
+      v-for="(staff, idx) in staffList" :key="idx" class="staff-member"
+      v-bind="{ ...staff, gridMode }"
+    />
+  </div>
+</template>
+
+<style scoped>
+@import "~/assets/styles/custom-media-query.css";
+
+.staff-grid {
+  display: grid;
+  margin-bottom: 1.5rem;
+}
+
+.staff-grid-leader {
+  gap: 1rem;
+}
+
+.staff-grid-core {
+  gap: 0.9rem;
+}
+
+.staff-grid-volunteer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: left;
+  margin: 1.5rem 0 0 0;
+}
+</style>

app/pages/_components/StaffGridItem.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { computed } from "vue";
+
+export type StaffItemProps = {
+  name: string;
+  avatarUrl: string;
+  socialUrls?: {
+    x?: string;
+    github?: string;
+  };
+};
+</script>
+
+<script setup lang="ts">
+const {
+  name,
+  avatarUrl,
+  socialUrls,
+  gridMode,
+} = defineProps<StaffItemProps & { gridMode: "leader" | "core" | "volunteer" }>();
+
+const gridItemClass = computed(() => `staff-link-${gridMode}`);
+
+const linkComp = computed(() => socialUrls?.x ? socialUrls.x : socialUrls?.github);
+</script>
+
+<template>
+  <NuxtLink
+    v-if="linkComp"
+    :to="linkComp"
+    external
+    target="_blank"
+    class="staff"
+    :class="gridItemClass"
+  >
+    <img :src="avatarUrl" :alt="name" />
+    <p class="font-bold">{{ name }}</p>
+  </NuxtLink>
+
+  <div v-else class="staff" :class="gridItemClass">
+    <img v-if="avatarUrl" :src="avatarUrl" :alt="name" loading="lazy" />
+    <p class="font-bold">
+      {{ name }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+@import "~/assets/styles/custom-media-query.css";
+
+.staff {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: #444;
+  margin-bottom: 1rem;
+
+  p {
+    width: 100%;
+    text-align: left;
+    overflow-wrap: break-word;
+    color: var(--color-text-default);
+    margin-top: 1rem;
+
+    @media (--mobile) {
+      margin-top: 0.75rem;
+    }
+  }
+
+  &.staff-link-leader,
+  &.staff-link-core {
+    p {
+      font-size: 18px;
+      font-family: IBMPlexSansJP-Bold;
+
+      @media (--mobile) {
+        font-size: 16px;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+      border-radius: 8%;
+      border: 0.5px solid #ddd;
+      aspect-ratio: 1 / 1;
+    }
+  }
+
+  &.staff-link-volunteer {
+    margin-bottom: 0;
+
+    p {
+      margin: 0.3rem 0.6rem;
+      text-align: left;
+
+      @media (--mobile) {
+        font-size: 14px;
+        margin: 0 0.6rem;
+      }
+    }
+  }
+}
+</style>