Merge pull request #200 from vuejs-jp/enhance/event-page-section

EventPageSection (WIP)

Author: jiyuujin

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Event } from '@vuejs-jp/model'
+
+interface EventAssetProps {
+  title: Extract<Event, 'creative-wall' | 'refreshment-space' | 'tattoo-booth'>
+}
+
+const props = defineProps<EventAssetProps>()
+</script>
+
+<template>
+  <div class="eventcard-image">
+    <img :src="`/event/${title}.png`" alt="" />
+  </div>
+</template>
+
+<style scoped>
+.eventcard-image {
+  --head-img-width: 292px;
+}
+
+.eventcard-image ::v-deep(img) {
+  width: var(--head-img-width);
+
+  @media (--mobile) {
+    --head-img-width: 100%;
+  }
+}
+</style>

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

@@ -11,10 +11,32 @@ const props = defineProps<EventCardProps>()
 <template>
   <VFEventFrame :title="$t(`event.${title.replaceAll('-', '_')}`)">
     <template #content>
-      <MarkdownText :path="title.replaceAll('-', '_')" />
+      <div class="eventcard-content">
+        <MarkDownText :path="title.replaceAll('-', '_')" />
+      </div>
     </template>
     <template #default>
-      Test
+      <slot />
     </template>
   </VFEventFrame>
 </template>
+
+<style scoped>
+.eventcard-content {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 25.6px;
+  color: var(--color-vue-blue);
+}
+
+.eventcard-content ::v-deep(a) {
+  color: var(--color-vue-green200);
+  text-decoration: underline;
+}
+
+.eventcard-content ::v-deep(a:hover) {
+  opacity: 0.4;
+  transition: .2s;
+}
+
+</style>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Event } from '@vuejs-jp/model'
+
+interface EventMultipleAssetsProps {
+  title?: Extract<Event, 'vuejs-handson'>
+}
+
+const props = withDefaults(defineProps<EventMultipleAssetsProps>(), {
+  title: 'vuejs-handson',
+})
+</script>
+
+<template>
+  <div class="eventcard-images">
+    <img :src="`/event/${title}-1.png`" alt="" />
+    <img :src="`/event/${title}-2.png`" alt="" />
+  </div>
+</template>
+
+<style scoped>
+@import url('~/assets/media.css');
+
+.eventcard-images {
+  display: flex;
+  gap: calc(var(--unit) * 1.5);
+
+  @media (--mobile) {
+    flex-direction: column;
+  }
+}
+
+.eventcard-images ::v-deep(img) {
+  --head-img-height: 192px;
+
+  height: var(--head-img-height);
+}
+</style>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { Speaker } from '@vuejs-jp/model'
+import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+
+interface PanelerListProps {
+  panelers: Speaker[]
+}
+
+const props = defineProps<PanelerListProps>()
+
+const currentLocale = useLocaleCurrent().locale
+</script>
+
+<template>
+  <h4>{{ $t('event.scheduled_speakers') }}</h4>
+  <div class="eventcard-persons">
+    <VFSpeaker
+      v-for="paneler in panelers"
+      :key="paneler.id"
+      :image="paneler.image_url"
+      :company="currentLocale === 'en' ? paneler.caption_en : paneler.caption_ja"
+      :division="currentLocale === 'en' ? paneler.description_en : paneler.description_ja"
+      :name="currentLocale === 'en' ? paneler.name_en : paneler.name_ja"
+      :github-id="paneler.github_id"
+      :x-id="paneler.x_id"
+    />
+  </div>
+</template>
+
+<style scoped>
+.eventcard-persons {
+  --head-img-width: 193px;
+
+  display: flex;
+  gap: calc(var(--unit) * 2);
+}
+
+.eventcard-persons ::v-deep(img) {
+  width: var(--head-img-width);
+
+  @media (--mobile) {
+    --head-img-width: 93px;
+  }
+}
+</style>

apps/web/app/lang/en.json

@@ -23,6 +23,8 @@
     "end_ampm": "pm"
   },
   "event": {
+    "title": "Event",
+    "scheduled_speakers": "Scheduled Speakers",
     "welcome_vuejs_community": "Welcome to the Vue.js community!",
     "vuejs_handson": "Vue.js / Nuxt Hands-on",
     "nextgen_frontend_crosstalk": "Next generation front-end crosstalk",

apps/web/app/lang/ja.json

@@ -41,6 +41,8 @@
     "end_minute": "00"
   },
   "event": {
+    "title": "イベント",
+    "scheduled_speakers": "登壇予定者",
     "welcome_vuejs_community": "Vue.jsコミュニティにようこそ！",
     "vuejs_handson": "Vue.js / Nuxt ハンズオン",
     "nextgen_frontend_crosstalk": "次世代フロントエンドクロストーク",