Skip to content

Commit 7fff312

Browse files
jiyuujinjiyuujin
authored
Merge pull request #589 from vuejs-jp/enhance/related-events-layout
Events page
2 parents 61e2823 + 8dd49f1 commit 7fff312

File tree

9 files changed

+154
-2
lines changed

9 files changed

+154
-2
lines changed

‎.eslintrc.cjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = {
3030
'vue/multi-word-component-names': [
3131
'error',
3232
{
33-
ignores: ['index', 'default', 'error', 'privacy', 'register', 'users', 'Provider', '[id]'],
33+
ignores: ['index', 'default', 'error', 'privacy', 'register', 'users', 'events', 'Provider', '[id]'],
3434
},
3535
],
3636
'vue/multiline-html-element-content-newline': 'off',

‎app/assets/locale/all.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export default {
2929
save_image: '画像を保存',
3030
add_to_calendar: 'カレンダーに追加',
3131
re_edit: '再編集',
32+
attendee_register: '参加者登録',
33+
events: '関連イベント',
3234
namecard: 'ネームカード',
3335
start_registration: '開場・受付',
3436
opening: 'オープニング',
@@ -126,6 +128,9 @@ export default {
126128
events_panel_discussion: 'パネルディスカッション',
127129
panelist: 'パネラー',
128130
various_other_events: 'その他の各種イベント',
131+
medpeer_hacomono_mntsq_event_title: 'kazuponさん登壇！Vue Fes Japan 2023 After Meetup',
132+
medpeer_hacomono_mntsq_event_detail:
133+
'Vue Fes Japan 2023 のアフターイベントとして、メドピア株式会社、MNTSQ株式会社、及び株式会社hacomonoが合同でイベントを開催します。 Vue.js 日本ユーザーグループ代表の kazupon さんを特別ゲストとして迎え、セッションやパネルディスカッションを行います。 5年ぶりのオフラインでの開催となる Vue Fes Japan 2023 の感想や思い出を語り合いましょう！',
129134
/**
130135
* ticket section
131136
*/
@@ -431,6 +436,8 @@ export default {
431436
save_image: 'Save Image',
432437
add_to_calendar: 'Add to Calendar',
433438
re_edit: 'Re-Edit',
439+
attendee_register: 'Attendee Register',
440+
events: 'Related Events',
434441
namecard: 'Name Card',
435442
start_registration: 'Doors Open, Registration Begins',
436443
opening: 'Opening',
@@ -529,6 +536,10 @@ export default {
529536
events_panel_discussion: 'Panel Discussion',
530537
panelist: 'Panelist',
531538
various_other_events: 'Various Other Events',
539+
medpeer_hacomono_mntsq_event_title:
540+
'kazupon will be speaking at Vue Fes Japan 2023 After Meetup!',
541+
medpeer_hacomono_mntsq_event_detail:
542+
"Medpeer, Inc., MNTSQ, LTD. and hacomono, Inc. will hold a joint event as an after event of Vue Fes Japan 2023. Vue.js Japan User Group Representative, Mr. Kazupon, will be a special guest at the event, which will include sessions and panel discussions. Let's discuss your thoughts and memories of Vue Fes Japan 2023, the first offline event in 5 years!",
532543
/**
533544
* ticket section
534545
*/

‎app/components/event/EventCard.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@ const props = defineProps({
3131
<slot name="description" />
3232
</div>
3333
<div v-if="registerUrl && registerText" class="register">
34-
<RoundButton :href="registerUrl">{{ registerText }}</RoundButton>
34+
<RoundButton :href="registerUrl" target="_blank" rel="noreferrer">
35+
{{ registerText }}
36+
</RoundButton>
3537
</div>
3638
</div>
3739
</template>

‎app/composables/useLocale.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export function useLocale(path: Path) {
2929
.with('volunteer', () => `/${locale.value}/top/volunteer`)
3030
.with('childcare', () => `/${locale.value}/top/childcare`)
3131
.with('handson', () => `/${locale.value}/top/handson`)
32+
.with('related-events', () => `/${locale.value}/top/related-events`)
3233
.with('privacy', () => `/${locale.value}/privacy`)
3334
.with('code-of-conduct', () => `/${locale.value}/code-of-conduct`)
3435
.with('personal-sponsors-text1', () => `/${locale.value}/top/personal-sponsors-text1`)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Only sponsors are possible to hold events related to Vue Fes Japan 2023.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
協賛いただいた企業の皆様に限定して、Vue Fes Japan 2023の関連イベントを開催いただけます。

‎app/pages/events.vue

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<script setup lang="ts">
2+
import RoundButton from '~/components/button/RoundButton.vue'
3+
import NavPageSection from '~/components/NavPageSection.vue'
4+
import FooterPageSection from '~/components/FooterPageSection.vue'
5+
import PageTitle from '~/components/PageTitle.vue'
6+
import { conferenceTitle, linkUrl, ogDescription } from '~/utils/constants'
7+
import { generalOg, twitterOg } from '~/utils/og.constants'
8+
9+
useHead({
10+
titleTemplate: (titleChunk) => `関連イベント一覧 | ${conferenceTitle}`,
11+
meta: [
12+
...generalOg({
13+
title: `関連イベント一覧 | ${conferenceTitle}`,
14+
description: ogDescription,
15+
url: `${linkUrl}events`,
16+
}),
17+
...twitterOg({
18+
title: `関連イベント一覧 | ${conferenceTitle}`,
19+
description: ogDescription,
20+
url: `${linkUrl}events`,
21+
}),
22+
],
23+
})
24+
</script>
25+
26+
<template>
27+
<main>
28+
<NavPageSection />
29+
<div class="events-root">
30+
<PageTitle id="events" color="vue.blue" title="Events" :yamato-title="$t('words.events')" />
31+
32+
<div class="subtitle">
33+
<MarkDownText path="related-events" />
34+
</div>
35+
36+
<div class="event-menu">
37+
<EventCard
38+
src="/event/after-event/medpeer-hacomono-mntsq.png"
39+
:alt="$t('top.medpeer_hacomono_mntsq_event_title')"
40+
register-url="https://medpeer.connpass.com/event/297734/"
41+
:register-text="$t('words.attendee_register')"
42+
>
43+
<template #title>
44+
{{ $t('top.medpeer_hacomono_mntsq_event_title') }}
45+
</template>
46+
<template #description>
47+
{{ $t('top.medpeer_hacomono_mntsq_event_detail') }}
48+
</template>
49+
</EventCard>
50+
</div>
51+
52+
<div class="back">
53+
<RoundButton to="../" outline>{{ $t('words.back_top') }}</RoundButton>
54+
</div>
55+
</div>
56+
<FooterPageSection />
57+
</main>
58+
</template>
59+
60+
<style lang="ts" scoped>
61+
css({
62+
'.subtitle': {
63+
display: 'grid',
64+
placeItems: 'center',
65+
gap: '40px',
66+
'::v-deep(p)': {
67+
color: '{color.vue.blue}',
68+
fontWeight: 500,
69+
fontSize: '18px',
70+
lineHeight: '1.8',
71+
},
72+
},
73+
'.event-menu': {
74+
display: 'flex',
75+
flexWrap: 'wrap',
76+
gap: '2em',
77+
justifyContent: 'center',
78+
},
79+
'.events-root': {
80+
padding: 'calc({space.8} * 10) 11.53%',
81+
color: '{color.vue.blue}',
82+
background: '{color.white}',
83+
'::v-deep(.title)': {
84+
marginBottom: 'calc({space.8} * 10)',
85+
},
86+
'::v-deep(p)': {
87+
fontWeight: 500,
88+
fontSize: '18px',
89+
lineHeight: '1.8',
90+
marginBottom: '1.5em',
91+
},
92+
'::v-deep(a)': {
93+
color: '{color.vue.green}',
94+
textDecoration: 'underline',
95+
'&:hover': {
96+
opacity: 0.4,
97+
transition: '.2s',
98+
},
99+
},
100+
'::v-deep(h2)': {
101+
fontWeight: 700,
102+
fontSize: '32px',
103+
marginTop: '2em',
104+
marginBottom: '.7em',
105+
},
106+
},
107+
'.back': {
108+
display: 'flex',
109+
justifyContent: 'center',
110+
marginTop: 'calc({space.8} * 10)',
111+
'a': {
112+
textDecoration: 'none',
113+
},
114+
},
115+
'@mobile': {
116+
'.subtitle': {
117+
'::v-deep(p)': {
118+
fontSize: '16px',
119+
},
120+
},
121+
'.events-root': {
122+
padding: 'calc({space.8} * 10) calc({space.8} * 3)',
123+
'::v-deep(.title)': {
124+
marginBottom: 'calc({space.8} * 6)',
125+
},
126+
'::v-deep(h2)': {
127+
fontSize: '20px',
128+
},
129+
'::v-deep(p), ::v-deep(ol), ::v-deep(ul)': {
130+
fontSize: '16px',
131+
},
132+
},
133+
},
134+
})
135+
</style>

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

45.1 KB
Loading

‎app/types/app.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export type Path =
2828
| 'event'
2929
| 'event-vuejs-clinic'
3030
| 'event-panel-discussion'
31+
| 'related-events'
3132
| 'privacy'
3233
| 'code-of-conduct'
3334
| string

0 commit comments

Comments
 (0)