Skip to content

Commit 6e1599d

Browse files
jiyuujinjiyuujin
authored
Merge pull request #337 from vuejs-jp/feature/sharemap
feat: page for share urls
2 parents 8aca9d7 + 6ddafe1 commit 6e1599d

File tree

5 files changed

+261
-7
lines changed

5 files changed

+261
-7
lines changed

‎apps/web/app/lang/en.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,9 @@
212212
"title": "Team",
213213
"volunteer_title": "Volunteer Staff"
214214
},
215+
"staff": {
216+
"title": "Staff"
217+
},
215218
"message": {
216219
"title": "Message"
217220
},
@@ -271,5 +274,8 @@
271274
},
272275
"time-table": {
273276
"title": "Time table"
277+
},
278+
"sharemap": {
279+
"title": "Share URL"
274280
}
275281
}

‎apps/web/app/lang/ja.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,9 @@
230230
"title": "チーム",
231231
"volunteer_title": "ボランティアスタッフ"
232232
},
233+
"staff": {
234+
"title": "スタッフ"
235+
},
233236
"message": {
234237
"title": "メッセージ"
235238
},
@@ -289,5 +292,8 @@
289292
},
290293
"time-table": {
291294
"title": "タイムテーブル"
295+
},
296+
"sharemap": {
297+
"title": "シェアURL"
292298
}
293299
}

‎apps/web/app/pages/sharemap.vue

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<script setup lang="ts">
2+
import { useFetch, useHead } from '#imports'
3+
import type { SpeakerCategory, SpeakerInfo, SponsorCategory, SponsorInfo, StaffInfo } from '@vuejs-jp/model'
4+
import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
5+
import { conferenceTitle, linkUrl, ogSharemapDescription } from '~/utils/constants'
6+
import { generalOg, twitterOg } from '~/utils/og.constants'
7+
8+
type _SpeakerCategory = Extract<SpeakerCategory, 'sessionSpeakers' | 'lightningTalkSpeakers' | 'sponsorSessionSpeakers'>
9+
type Speakers = Record<_SpeakerCategory, SpeakerInfo>
10+
11+
type Sponsors = Record<SponsorCategory, SponsorInfo>
12+
13+
type Staffs = Record<'allStaffs', StaffInfo>
14+
15+
const { data: speakers, error: error1 } = await useFetch('/api/speakers')
16+
const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = speakers.value as Speakers
17+
if (error1.value) {
18+
console.error(error1.value)
19+
}
20+
const { data: sponsors, error: error2 } = await useFetch('/api/sponsors')
21+
const {
22+
platinumSponsors,
23+
goldSponsors,
24+
silverSponsors,
25+
bronzeSponsors,
26+
specialNamingRightSponsors,
27+
namingRightSponsors,
28+
specialLunchSponsors,
29+
lunchSponsors,
30+
afterPartySponsors,
31+
nameCardSponsors,
32+
simultaneousInterpretationSponsors,
33+
childcareSponsors,
34+
handsonSponsors,
35+
mediaSponsors,
36+
toolSponsors,
37+
} = sponsors.value as Sponsors
38+
if (error2.value) {
39+
console.error(error2.value)
40+
}
41+
const { data: staffs, error: error3 } = await useFetch('/api/staffs')
42+
const { allStaffs } = staffs.value as Staffs
43+
if (error3.value) {
44+
console.error(error3.value)
45+
}
46+
47+
const { path: localePath } = useLocaleCurrent()
48+
49+
useHead({
50+
// eslint-disable-next-line no-unused-vars
51+
titleTemplate: (titleChunk) => `シェアURL | ${conferenceTitle}`,
52+
meta: [
53+
...generalOg({
54+
title: `シェアURL | ${conferenceTitle}`,
55+
description: ogSharemapDescription,
56+
url: `${linkUrl}sharemap`,
57+
}),
58+
...twitterOg({
59+
title: `シェアURL | ${conferenceTitle}`,
60+
description: ogSharemapDescription,
61+
url: `${linkUrl}sharemap`,
62+
}),
63+
],
64+
})
65+
</script>
66+
67+
<template>
68+
<VFPageHeading>{{ $t('sharemap.title') }}</VFPageHeading>
69+
<div class="sharemap">
70+
<div class="sharemap-body">
71+
<div>
72+
<h2>{{ $t('speaker.title') }}</h2>
73+
<VFTextLink
74+
v-for="speaker in [...sessionSpeakers.list, ...lightningTalkSpeakers.list, ...sponsorSessionSpeakers.list]"
75+
:key="speaker.id"
76+
:href="`/sessions/${speaker.detail_page_id}/share`"
77+
color="vue-blue"
78+
target="_blank"
79+
>
80+
{{ speaker.name_ja }}
81+
</VFTextLink>
82+
</div>
83+
<div>
84+
<h2>{{ $t('sponsor.title') }}</h2>
85+
<VFTextLink
86+
v-for="sponsor in Array.from(
87+
new Map(
88+
[
89+
...platinumSponsors.list,
90+
...goldSponsors.list,
91+
...silverSponsors.list,
92+
...bronzeSponsors.list,
93+
...specialNamingRightSponsors.list,
94+
...namingRightSponsors.list,
95+
...specialLunchSponsors.list,
96+
...lunchSponsors.list,
97+
...afterPartySponsors.list,
98+
...nameCardSponsors.list,
99+
...simultaneousInterpretationSponsors.list,
100+
...childcareSponsors.list,
101+
...handsonSponsors.list,
102+
...mediaSponsors.list,
103+
...toolSponsors.list,
104+
]
105+
.map((item) => [JSON.stringify(item), item])
106+
)
107+
.values()
108+
)"
109+
:key="sponsor.id"
110+
:href="`/sponsors/${sponsor.detail_page_id}/share`"
111+
color="vue-blue"
112+
target="_blank"
113+
>
114+
{{ sponsor.name }}
115+
</VFTextLink>
116+
</div>
117+
<div>
118+
<h2>{{ $t('staff.title') }}</h2>
119+
<VFTextLink
120+
v-for="staff in allStaffs.list"
121+
:key="staff.id"
122+
:href="`/staffs/${staff.detail_page_id}/share`"
123+
color="vue-blue"
124+
target="_blank"
125+
>
126+
{{ staff.name }}
127+
</VFTextLink>
128+
</div>
129+
</div>
130+
<div class="back">
131+
<VFLinkButton
132+
class="back-action"
133+
background-color="white"
134+
color="vue-blue"
135+
target=""
136+
:href="`${localePath}/`"
137+
>
138+
{{ $t('back_to_top') }}
139+
</VFLinkButton>
140+
</div>
141+
</div>
142+
</template>
143+
144+
<style scoped>
145+
@import url('../assets/base.css');
146+
@import url('../assets/media.css');
147+
148+
.sharemap {
149+
margin: 0;
150+
padding: 0 1.5%;
151+
background-image: linear-gradient(#fff, #ebf0f5);
152+
position: relative;
153+
z-index: 0;
154+
overflow: hidden;
155+
156+
@media (--tablet) {
157+
padding: 0 6%;
158+
}
159+
160+
&:before {
161+
content: "";
162+
position: absolute;
163+
display: block;
164+
bottom: 0;
165+
left: 0;
166+
width: 100%;
167+
height: 100%;
168+
background-image: url('/form-bg.png');
169+
background-size: auto;
170+
background-repeat: repeat;
171+
background-position: bottom left;
172+
opacity: 0.8;
173+
mix-blend-mode: overlay;
174+
z-index: -1;
175+
}
176+
}
177+
178+
.sharemap-body {
179+
margin: 0 auto;
180+
padding: 60px 0 120px;
181+
width: 100%;
182+
max-width: 960px;
183+
display: flex;
184+
flex-wrap: wrap;
185+
justify-content: center;
186+
gap: 40px;
187+
188+
> div {
189+
@media (--tablet) {
190+
width: 100%;
191+
}
192+
}
193+
194+
@media (--tablet) {
195+
padding: 20px 0 60px;
196+
max-width: 100%;
197+
}
198+
199+
a {
200+
border-radius: 12px;
201+
overflow: hidden;
202+
display: block;
203+
}
204+
}
205+
206+
.back {
207+
margin: 40px auto 120px;
208+
width: 100%;
209+
max-width: 260px;
210+
}
211+
.back-action {
212+
--height-button: 66px;
213+
214+
height: var(--height-button);
215+
border-radius: var(--height-button);
216+
}
217+
218+
@media (--tablet) {
219+
.back-action {
220+
--height-button: 58px;
221+
}
222+
}
223+
224+
@media (--mobile) {
225+
.back {
226+
width: 100%;
227+
padding: 0 23.5px;
228+
margin-top: 30px;
229+
margin-bottom: 60px;
230+
}
231+
.back-action {
232+
--height-button: 58px;
233+
}
234+
}
235+
</style>

‎apps/web/app/utils/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ export const ogPrivacyDescription = 'Vue Fes Japan 2024 のプライバシーポ
1010

1111
export const ogTokushoDescription = 'Vue Fes Japan 2024 の特定商取引法に基づく表記です。'
1212

13+
export const ogSharemapDescription = 'Vue Fes Japan 2024 のシェア URL 集です。'
14+
1315
export const ogSpeakerDescription = 'Vue Fes Japan 2024 のスピーカー、セッション情報です。'
1416

1517
export const ogSponsorDescription = 'Vue Fes Japan 2024 のスポンサー情報です。'

‎apps/web/netlify.toml

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
[[redirects]]
2-
from = "/2024/*"
3-
to = "/2024/index.html"
4-
status = 200
2+
from = "/2024/*"
3+
to = "/2024/index.html"
4+
status = 200
5+
6+
[[redirects]]
7+
from = "/*"
8+
to = "/2024/:splat"
9+
status = 301
510

611
[[redirects]]
7-
from = "/*"
8-
to = "/2024/:splat"
9-
status = 301
12+
from = "/2024/sharemap"
13+
to = "/2024/sharemap/index.html"
14+
status = 200
1015

1116
[[redirects]]
1217
from = "/2024/jobboard"
@@ -49,4 +54,4 @@ status = 301
4954
status = 200
5055

5156
[functions.server]
52-
external_node_modules = ["chrome-aws-lambda"]
57+
external_node_modules = ["chrome-aws-lambda"]

0 commit comments

Comments
 (0)