Events page

Author: jiyuujin

.eslintrc.cjs

@@ -30,7 +30,7 @@ module.exports = {
     'vue/multi-word-component-names': [
       'error',
       {
-        ignores: ['index', 'default', 'error', 'privacy', 'register', 'users', 'Provider', '[id]'],
+        ignores: ['index', 'default', 'error', 'privacy', 'register', 'users', 'events', 'Provider', '[id]'],
       },
     ],
     'vue/multiline-html-element-content-newline': 'off',

app/assets/locale/all.ts

@@ -29,6 +29,8 @@ export default {
       save_image: '画像を保存',
       add_to_calendar: 'カレンダーに追加',
       re_edit: '再編集',
+      attendee_register: '参加者登録',
+      events: '関連イベント',
       namecard: 'ネームカード',
       start_registration: '開場・受付',
       opening: 'オープニング',
@@ -126,6 +128,8 @@ export default {
       events_panel_discussion: 'パネルディスカッション',
       panelist: 'パネラー',
       various_other_events: 'その他の各種イベント',
+      medpeer_hacomono_mntsq_event_detail:
+        'Vue.js 日本ユーザーグループ代表の kazupon さんを特別ゲストとして迎え、セッションやパネルディスカッションを行います。',
       /**
        * ticket section
        */
@@ -431,6 +435,8 @@ export default {
       save_image: 'Save Image',
       add_to_calendar: 'Add to Calendar',
       re_edit: 'Re-Edit',
+      attendee_register: 'Attendee Register',
+      events: 'Related Events',
       namecard: 'Name Card',
       start_registration: 'Doors Open, Registration Begins',
       opening: 'Opening',
@@ -529,6 +535,8 @@ export default {
       events_panel_discussion: 'Panel Discussion',
       panelist: 'Panelist',
       various_other_events: 'Various Other Events',
+      medpeer_hacomono_mntsq_event_detail:
+        'We will have a session and panel discussion with kazupon, the representative of Vue.js Japan User Group, as a special guest.',
       /**
        * ticket section
        */

app/composables/useLocale.ts

@@ -29,6 +29,7 @@ export function useLocale(path: Path) {
       .with('volunteer', () => `/${locale.value}/top/volunteer`)
       .with('childcare', () => `/${locale.value}/top/childcare`)
       .with('handson', () => `/${locale.value}/top/handson`)
+      .with('related-events', () => `/${locale.value}/top/related-events`)
       .with('privacy', () => `/${locale.value}/privacy`)
       .with('code-of-conduct', () => `/${locale.value}/code-of-conduct`)
       .with('personal-sponsors-text1', () => `/${locale.value}/top/personal-sponsors-text1`)

app/content/en/top/related-events.md

@@ -0,0 +1 @@
+Only sponsors are possible to hold events related to Vue Fes Japan 2023.

app/content/ja/top/related-events.md

@@ -0,0 +1 @@
+協賛いただいた企業の皆様に限定して、Vue Fes Japan 2023の関連イベントを開催いただけます。

app/pages/events.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import RoundButton from '~/components/button/RoundButton.vue'
+import NavPageSection from '~/components/NavPageSection.vue'
+import FooterPageSection from '~/components/FooterPageSection.vue'
+import PageTitle from '~/components/PageTitle.vue'
+import { conferenceTitle, linkUrl, ogDescription } from '~/utils/constants'
+import { generalOg, twitterOg } from '~/utils/og.constants'
+
+useHead({
+  titleTemplate: (titleChunk) => `関連イベント一覧 | ${conferenceTitle}`,
+  meta: [
+    ...generalOg({
+      title: `関連イベント一覧 | ${conferenceTitle}`,
+      description: ogDescription,
+      url: `${linkUrl}events`,
+    }),
+    ...twitterOg({
+      title: `関連イベント一覧 | ${conferenceTitle}`,
+      description: ogDescription,
+      url: `${linkUrl}events`,
+    }),
+  ],
+})
+</script>
+
+<template>
+  <main>
+    <NavPageSection />
+    <div class="events-root">
+      <PageTitle id="events" color="vue.blue" title="Events" :yamato-title="$t('words.events')" />
+
+      <div class="subtitle">
+        <MarkDownText path="related-events" />
+      </div>
+
+      <div class="event-menu">
+        <EventCard
+          src="/event/after-event/medpeer-hacomono-mntsq.png"
+          :alt="`Vue Fes Japan 2023 After Meetup`"
+          register-url="https://medpeer.connpass.com/event/297734/"
+          :register-text="$t('words.attendee_register')"
+        >
+          <template #title> Vue Fes Japan 2023 After Meetup </template>
+          <template #description>
+            {{ $t('top.medpeer_hacomono_mntsq_event_detail') }}
+          </template>
+        </EventCard>
+      </div>
+
+      <div class="back">
+        <RoundButton to="../" outline>{{ $t('words.back_top') }}</RoundButton>
+      </div>
+    </div>
+    <FooterPageSection />
+  </main>
+</template>
+
+<style lang="ts" scoped>
+css({
+  '.subtitle': {
+    display: 'grid',
+    placeItems: 'center',
+    gap: '40px',
+    '::v-deep(p)': {
+      color: '{color.vue.blue}',
+      fontWeight: 500,
+      fontSize: '18px',
+      lineHeight: '1.8',
+    },
+  },
+  '.event-menu': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '2em',
+    justifyContent: 'center',
+  },
+  '.events-root': {
+    padding: 'calc({space.8} * 10) 11.53%',
+    color: '{color.vue.blue}',
+    background: '{color.white}',
+    '::v-deep(.title)': {
+      marginBottom: 'calc({space.8} * 10)',
+    },
+    '::v-deep(p)': {
+      fontWeight: 500,
+      fontSize: '18px',
+      lineHeight: '1.8',
+      marginBottom: '1.5em',
+    },
+    '::v-deep(a)': {
+      color: '{color.vue.green}',
+      textDecoration: 'underline',
+      '&:hover': {
+        opacity: 0.4,
+        transition: '.2s',
+      },
+    },
+    '::v-deep(h2)': {
+      fontWeight: 700,
+      fontSize: '32px',
+      marginTop: '2em',
+      marginBottom: '.7em',
+    },
+  },
+  '.back': {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: 'calc({space.8} * 10)',
+    'a': {
+      textDecoration: 'none',
+    },
+  },
+  '@mobile': {
+    '.subtitle': {
+      '::v-deep(p)': {
+        fontSize: '16px',
+      },
+    },
+    '.events-root': {
+      padding: 'calc({space.8} * 10) calc({space.8} * 3)',
+      '::v-deep(.title)': {
+        marginBottom: 'calc({space.8} * 6)',
+      },
+      '::v-deep(h2)': {
+        fontSize: '20px',
+      },
+      '::v-deep(p), ::v-deep(ol), ::v-deep(ul)': {
+        fontSize: '16px',
+      },
+    },
+  },
+})
+</style>

app/public/event/after-event/medpeer-hacomono-mntsq.png

@@ -28,6 +28,7 @@ export type Path =
   | 'event'
   | 'event-vuejs-clinic'
   | 'event-panel-discussion'
+  | 'related-events'
   | 'privacy'
   | 'code-of-conduct'
   | string