Merge pull request #982 from vuejs-jp/main

Author: ubugeeei

app/layouts/default.vue

@@ -85,11 +85,19 @@ const cta = computed(() =>
 
 const { y } = useScroll(window);
 const isShowedSpMenu = computed(() => {
-  const targetBp: Breakpoint[] = isWidenContent.value ? ["mobile-wide", "mobile"] : ["mobile"];
+  const targetBp: Breakpoint[]
+    = isTimetable.value
+      ? ["pc", "mobile-wide", "mobile"]
+      : isWidenContent.value
+        ? ["mobile-wide", "mobile"]
+        : ["mobile"];
   return targetBp.includes(bp.value) && (!isRoot.value || y.value > 450);
 });
 const isShowedSpCta = computed(() => {
-  const targetBp: Breakpoint[] = isWidenContent.value ? ["pc", "mobile-wide", "mobile"] : ["mobile-wide", "mobile"];
+  const targetBp: Breakpoint[]
+    = isTimetable.value || isWidenContent.value
+      ? ["pc", "mobile-wide", "mobile"]
+      : ["mobile-wide", "mobile"];
   return targetBp.includes(bp.value) && (!isRoot.value || y.value > 450);
 });
 
@@ -102,7 +110,6 @@ const WIDE_ROUTE_NAMES: RoutesNamesList[] = [
   "sponsors",
   "sponsors-sponsorId",
   "event",
-  "timetable",
   "related-events",
   "store",
 ];
@@ -114,6 +121,8 @@ const isWidenContent = computed(() =>
     .includes(route.name?.toString() ?? ""),
 );
 
+const isTimetable = computed(() => localeRoute("timetable" as string).name === route.name?.toString());
+
 // scroll behavior
 watch(() => route.hash, async (hash) => {
   if (hash === "") {
@@ -150,7 +159,7 @@ watch(() => route.hash, async (hash) => {
           <VFMenu :items="menuItems" />
         </div>
       </div>
-      <div class="content" :class="{ 'widen-content': isWidenContent }">
+      <div class="content" :class="{ 'widen-content': isWidenContent, 'timetable': isTimetable }">
         <VFHeader :is-root class="header" />
 
         <main class="main">
@@ -220,6 +229,7 @@ watch(() => route.hash, async (hash) => {
   justify-content: center;
   min-width: 700px;
   max-width: 700px;
+  transition: unset;
 
   @media (--mobile) {
     row-gap: 1rem;
@@ -230,10 +240,18 @@ watch(() => route.hash, async (hash) => {
     flex-basis: auto;
   }
 
+  &.timetable {
+    width: 90%;
+    max-width: 1400px;
+
+    @media (--mobile) {
+      min-width: 0;
+      width: 100%;
+    }
+  }
+
   &.widen-content {
     min-width: 960px;
-    /* min-width: 95%; */
-    transition: unset;
 
     @media (--mobile) {
       min-width: 0;

app/pages/_components/StaffGridItem.vue

@@ -3,7 +3,7 @@ import { computed } from "vue";
 
 export type StaffItemProps = {
   name: string;
-  avatarUrl: string;
+  avatarUrl?: string;
   socialUrls?: {
     x?: string;
     github?: string;

app/pages/ticket/index.vue

@@ -33,6 +33,9 @@ const localeRoute = useLocaleRoute();
 const isSoldOutAfterParty = import.meta.vfFeatures.soldOutAfterParty;
 const isSoldOutEarlyBirdAfterParty = import.meta.vfFeatures.soldOutEarlyBirdAfterParty || import.meta.vfFeatures.soldOutEarlyBird;
 const isSoldOutEarlyBird = import.meta.vfFeatures.soldOutEarlyBird;
+const isSoldOutGeneral = import.meta.vfFeatures.soldOutGeneral;
+const isSoldOutHandsOn = import.meta.vfFeatures.soldOutHandsOn;
+const isSoldOutIndividualSponsor = import.meta.vfFeatures.soldOutIndividualSponsor;
 
 const isLoading = ref(false);
 
@@ -94,9 +97,10 @@ useSeoMeta({
                 <span class="ticket-badge-price">
                   <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
                   <span class="ticket-badge-price-type">{{ t('ticket.standard') }}</span>
-                  <span class="ticket-badge-price-value">
+                  <span class="ticket-badge-price-value" :class="{ 'sold-out': isSoldOutGeneral }">
                     <span class="ticket-badge-price-unit" :class="locale">{{ t("ticket.priceUnit") }}</span>{{ (Number(t('ticket.generalTicket.standardPrice'))).toLocaleString() }}
                   </span>
+                  <span v-if="isSoldOutGeneral" class="sold-out-label">{{ t('ticket.soldOut') }}</span>
                 </span>
               </div>
             </div>
@@ -147,9 +151,10 @@ useSeoMeta({
               </h2>
               <div class="ticket-badge-prices">
                 <span class="ticket-badge-price">
-                  <span class="ticket-badge-price-value">
+                  <span class="ticket-badge-price-value" :class="{ 'sold-out': isSoldOutHandsOn }">
                     <span class="ticket-badge-price-unit" :class="locale">{{ t("ticket.priceUnit") }}</span>{{ (Number(t('ticket.handsOn.price'))).toLocaleString() }}
                   </span>
+                  <span v-if="isSoldOutHandsOn" class="sold-out-label">{{ t('ticket.soldOut') }}</span>
                 </span>
               </div>
             </div>
@@ -172,9 +177,10 @@ useSeoMeta({
               </h2>
               <div class="ticket-badge-prices">
                 <span class="ticket-badge-price">
-                  <span class="ticket-badge-price-value">
+                  <span class="ticket-badge-price-value" :class="{ 'sold-out': isSoldOutIndividualSponsor }">
                     <span class="ticket-badge-price-unit" :class="locale">{{ t("ticket.priceUnit") }}</span>{{ (Number(t('ticket.individual.price'))).toLocaleString() }}
                   </span>
+                  <span v-if="isSoldOutIndividualSponsor" class="sold-out-label">{{ t('ticket.soldOut') }}</span>
                 </span>
               </div>
             </div>

app/pages/timetable/_components/TimetableCard.vue

@@ -7,8 +7,8 @@ import SliderIcon from "~icons/icons/timetable-slider.svg";
 const {
   type,
   title,
-  sessionStart,
-  sessionEnd,
+  startTime,
+  endTime,
   speakers,
   slide,
   track,
@@ -47,9 +47,9 @@ const hoverColor = computed(() => `var(--color-${accentColorName.value}-accent-h
           {{ t(`timetable.track.${track}`) }}
         </div>
       </template>
-      <div v-if="sessionStart" class="time">
+      <div v-if="startTime" class="time">
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        {{ sessionStart }} - {{ sessionEnd }}
+        {{ startTime }} - {{ endTime }}
       </div>
       <template v-if="type === 'schedule'">
         <div class="schedule-title">
@@ -152,6 +152,7 @@ const hoverColor = computed(() => `var(--color-${accentColorName.value}-accent-h
   font-family: IBMPlexSansJP-Bold;
   font-size: 16px;
   text-align: left;
+  white-space: pre-wrap;
 
   a {
     font-family: IBMPlexSansJP-Bold;

app/pages/timetable/_components/TimetableCell.vue

@@ -7,8 +7,8 @@ import SliderIcon from "~icons/icons/timetable-slider.svg";
 const {
   type,
   title,
-  sessionStart,
-  sessionEnd,
+  startTime,
+  endTime,
   speakers,
   slide,
   colspan,
@@ -44,16 +44,16 @@ const hoverColor = `var(--color-${accentColorName.value}-accent-hover)`;
 <template>
   <td class="cell" :colspan="colspan" :rowspan="rowspan" :class="{ 'cell--schedule': type === 'schedule' }">
     <div class="cell-inner">
-      <div v-if="sessionStart && type !== 'schedule'" class="time">
+      <div v-if="startTime && type !== 'schedule'" class="time">
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        {{ sessionStart }} - {{ sessionEnd }}
+        {{ startTime }} - {{ endTime }}
       </div>
 
       <template v-if="type === 'schedule'">
         <div class="schedule-content">
-          <div v-if="sessionStart" class="time">
+          <div v-if="startTime" class="time">
             <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-            {{ sessionStart }} - {{ sessionEnd }}
+            {{ startTime }} - {{ endTime }}
           </div>
           <div class="schedule-title">
             {{ title }}
@@ -160,6 +160,7 @@ const hoverColor = `var(--color-${accentColorName.value}-accent-hover)`;
   font-family: IBMPlexSansJP-Bold;
   font-size: 16px;
   text-align: left;
+  white-space: pre-wrap;
   a {
     all: inherit;
     cursor: pointer;

cspell.config.yaml

@@ -182,6 +182,7 @@ words:
   - sasagawaki
   - Sasaki
   - Sato
+  - Satouuuuuu
   - sayn
   - senbei
   - Seyschab

i18n/en/index.yaml

@@ -304,10 +304,11 @@ timetable:
   platinumSponsorSession: "Platinum Sponsor Session"
   lunchTime: "Lunch Time"
   studentSupportProgram: "Student Support Program"
+  studentSupportProgramSessionTitle: "【Student Support Program】\nTalents discovered by kazupon ─ Developer discovery techniques that change Vue.js and the OSS ecosystem"
   break: "Break"
   beginnerHandsOn: "Beginner Hands-on"
   intermediateHandsOn: "Intermediate Hands-on"
-  panelDiscussion: "Panel Discussion"
+  crossTalkTitle: "【Panel Discussion】\nThe Future of Frontend: Visions from React, Vue.js, and Svelte for the Next Decade"
   lightningTalk: "Lightning Talk"
   transition: "Transition"
   afterParty: "After Party\nsupported by Tenshoku-DRAFT"

i18n/en/speakers.ts

@@ -6,7 +6,7 @@ const evan = {
   id: "yyx990803",
   name: "Evan You",
   affiliation: "Creator of Vue.js & Vite",
-  talkSchedule: "10:11 - 10:50",
+  talkSchedule: "10:10 - 10:50",
   talkTrack: "hacomono" as const,
   avatarUrl: "/images/avatars/evan-you.png",
   attendedIndex: 1,
@@ -30,7 +30,12 @@ export const SESSION_SPEAKERS: Speaker[] = [
     attendedIndex: 4,
     color: "purple",
     talkTitle: import.meta.vfFeatures.guestDetailsDaniel ? "Beyond the Framework: Building for the Next Decade of the Web" : "TBD",
-    talkOverview: import.meta.vfFeatures.guestDetailsDaniel ? `Frontend tooling moves at breakneck speed, but the foundations of great web applications remain surprisingly constant. In this talk, Daniel explores how to architect projects that will thrive across technology shifts — from framework migrations to evolving hosting landscapes. Drawing from his work leading the Nuxt core team and collaborating with global developer communities, Daniel shares patterns, pitfalls, and practical strategies for building software that stays resilient, adaptable, and joyful to work on.` : undefined,
+    talkOverview: import.meta.vfFeatures.guestDetailsDaniel
+      ? `Frontend tooling moves at breakneck speed, but the foundations of great web applications remain surprisingly constant.
+
+In this talk, Daniel explores how to architect projects that will thrive across technology shifts — from framework migrations to evolving hosting landscapes.
+Drawing from his work leading the Nuxt core team and collaborating with global developer communities, Daniel shares patterns, pitfalls, and practical strategies for building software that stays resilient, adaptable, and joyful to work on.`
+      : undefined,
     socialUrls: {
       github: "https://github.com/danielroe",
       bluesky: "https://bsky.app/profile/danielroe.dev",
@@ -63,7 +68,16 @@ export const SESSION_SPEAKERS: Speaker[] = [
     attendedIndex: 6,
     color: "navy",
     talkTitle: import.meta.vfFeatures.guestDetailsAkryum ? "rstore and the challenge of building a local-first store" : "TBD",
-    talkOverview: import.meta.vfFeatures.guestDetailsAkryum ? `We will explore what is rstore and how it works as a flexible state management solution. Let's answer many interesting questions like: What does local-first mean? How is rstore different from pinia? How was it made extensible to support many use cases? What is data federation? How to make an offline sync engine?` : undefined,
+    talkOverview: import.meta.vfFeatures.guestDetailsAkryum
+      ? `We will explore what is rstore and how it works as a flexible state management solution.
+
+Let's answer many interesting questions like:
+・What does local-first mean?
+・How is rstore different from pinia?
+・How was it made extensible to support many use cases?
+・What is data federation?
+・How to make an offline sync engine?`
+      : undefined,
     socialUrls: {
       github: "https://github.com/Akryum",
       x: "https://x.com/Akryum",
@@ -97,7 +111,10 @@ export const SESSION_SPEAKERS: Speaker[] = [
     attendedIndex: 8,
     color: "purple",
     talkTitle: import.meta.vfFeatures.guestDetailsOgawa ? "Inside Vitest: Test Framework Architecture Deep Dive" : "TBD",
-    talkOverview: import.meta.vfFeatures.guestDetailsOgawa ? "This talk explores what makes Vitest architecturally unique, including how it leverages Vite's broad framework ecosystem and plugin capabilities, its runtime agnostic architecture that enables running the same tests across Node.js, browsers, and edge environments, and the implementation of core testing features like mocking, coverage, and parallel execution systems. By understanding the internals, you'll learn better testing practices and test performance optimization techniques to improve your software development workflow." : undefined,
+    talkOverview: import.meta.vfFeatures.guestDetailsOgawa
+      ? `This talk explores what makes Vitest architecturally unique, including how it leverages Vite's broad framework ecosystem and plugin capabilities, its runtime agnostic architecture that enables running the same tests across Node.js, browsers, and edge environments, and the implementation of core testing features like mocking, coverage, and parallel execution systems.
+By understanding the internals, you'll learn better testing practices and test performance optimization techniques to improve your software development workflow.`
+      : undefined,
     socialUrls: {
       github: "https://github.com/hi-ogawa",
       bluesky: "https://bsky.app/profile/hiogawa.bsky.social",

i18n/ja/index.yaml

@@ -303,10 +303,11 @@ timetable:
   platinumSponsorSession: "プラチナスポンサーセッション"
   lunchTime: "ランチタイム"
   studentSupportProgram: "学生支援プログラム"
+  studentSupportProgramSessionTitle: "【学生支援プログラム】\nkazuponが見つけた才能たち ─ Vue.jsそしてOSSエコシステムを変える開発者発掘術"
   break: "休憩"
   beginnerHandsOn: "初級者向けハンズオン"
   intermediateHandsOn: "中級者向けハンズオン"
-  panelDiscussion: "パネルディスカッション"
+  crossTalkTitle: "【パネルディスカッション】\nフロントエンドの未来を語る ─ React/Vue.js/Svelte が見据える次の 10 年"
   lightningTalk: "ライトニングトーク"
   transition: "転換"
   afterParty: "アフターパーティー\nsupported by 転職ドラフト"