Merge pull request #353 from vuejs-jp/enhance/add-cocktail-bash-image

add cocktail-bash image

Author: jiyuujin

apps/web/app/components/EventPageSection.vue

@@ -27,8 +27,8 @@ const { panelEventPanelers } = props.data as Panelers
       <EventCard id="welcome-vuejs-community" title="welcome-vuejs-community">
         <PanelerList :panelers="panelEventPanelers.list['welcome-vuejs-community']" />
       </EventCard>
-      <EventCard title="vuejs-handson">
-        <EventMultipleAssets />
+      <EventCard id="handson" title="vuejs-handson">
+        <EventMultipleAssets :title-list="['vuejs-handson', 'vuejs-handson']" :img-height="256" />
       </EventCard>
       <div class="event-body-column column-2">
         <EventCard title="creative-wall" font-class="title-2" padding-class="content-2">
@@ -40,9 +40,11 @@ const { panelEventPanelers } = props.data as Panelers
         <EventCard title="tattoo-space" font-class="title-2" padding-class="content-2">
           <EventAsset title="tattoo-space" :margin-top="16" />
         </EventCard>
-        <EventCard title="cocktail-bash" font-class="title-2" padding-class="content-2" />
         <EventCard title="sponsor-booth-fotolary" font-class="title-2" padding-class="content-2" />
       </div>
+      <EventCard id="cocktail-bash" title="cocktail-bash">
+        <EventMultipleAssets :title-list="['cocktail-bash']" />
+      </EventCard>
     </div>
   </div>
 </template>

apps/web/app/components/event/EventAsset.vue

@@ -2,7 +2,7 @@
 import type { Event } from '@vuejs-jp/model'
 
 interface EventAssetProps {
-  title: Extract<Event, 'creative-wall' | 'free-drinks-and-snacks' | 'tattoo-space'>
+  title: Extract<Event, 'creative-wall' | 'free-drinks-and-snacks' | 'tattoo-space' | 'cocktail-bash'>
   marginTop?: number
 }
 

apps/web/app/components/event/EventMultipleAssets.vue

@@ -2,18 +2,21 @@
 import type { Event } from '@vuejs-jp/model'
 
 interface EventMultipleAssetsProps {
-  title?: Extract<Event, 'vuejs-handson'>
+  titleList: Extract<Event, 'vuejs-handson' | 'cocktail-bash'>[]
+  imgHeight?: number
 }
 
-const props = withDefaults(defineProps<EventMultipleAssetsProps>(), {
-  title: 'vuejs-handson',
-})
+const props = defineProps<EventMultipleAssetsProps>()
 </script>
 
 <template>
-  <div class="eventcard-images">
-    <img :src="`/event/${title}-1.png`" alt="" />
-    <img :src="`/event/${title}-2.png`" alt="" />
+  <div
+    class="eventcard-images"
+    :style="{
+      '--head-img-height': `${imgHeight}px`,
+    }"
+  >
+    <img v-for="(title, key) in titleList" :key :src="`/event/${title}-${key + 1}.png`" alt="" />
   </div>
 </template>
 
@@ -32,8 +35,6 @@ const props = withDefaults(defineProps<EventMultipleAssetsProps>(), {
 }
 
 .eventcard-images ::v-deep(img) {
-  --head-img-height: 256px;
-
   padding: 0;
   margin: 0 auto;
   height: var(--head-img-height);

apps/web/app/content/en/cocktail_bash.md

@@ -1,4 +1,5 @@
-To further liven up Vue Fes Japan, we are excited to introduce our original cocktails this time! Inspired by Vue.js, as well as Pinia and Vite, these are special cocktails exclusively available at Vue Fes Japan. We've also prepared non-alcoholic versions so that minors and those who do not consume alcohol can enjoy them too. Please savor a drink in commemoration of your visit!
+To make Vue Fes Japan even more exciting, we’re thrilled to introduce our original cocktails! These special drinks are inspired by Vue.js, as well as Pinia and Vite, and can only be enjoyed at Vue Fes Japan. We also have non-alcoholic cocktails available for those underage or who prefer not to drink alcohol. Be sure to treat yourself to a drink as a memorable keepsake from your visit!
 
-*Original cocktails will be available only at the after-party.
-*Limited quantities available for each variety.
+*Please note that the original cocktails will only be available at the after-party.
+
+*Quantities are limited for each drink.

apps/web/app/content/ja/cocktail_bash.md

@@ -1,4 +1,5 @@
 Vue Fes Japan をより盛り上げるべく、満を持して今回はオリジナルカクテルを用意しました！Vue.js はもちろん、Pinia や Vite などをイメージした、Vue Fes Japan でしか飲むことができない特別なカクテルです。未成年の方やアルコールが飲めない方にもお楽しみいただけるよう、ノンアルコールカクテルも用意しています。来場の記念に一杯、是非ご堪能ください！
 
 ※オリジナルカクテルのご提供は、アフターパーティーのみとなります。
+
 ※各種数量限定でのご提供となります。