Skip to content

Commit a9e515a

Browse files
jiyuujinjiyuujin
authored
Merge pull request #385 from vuejs-jp/enhance/photo-section
PhotoPageSection
2 parents 1718d39 + 2d394e9 commit a9e515a

File tree

6 files changed

+172
-2
lines changed

6 files changed

+172
-2
lines changed

‎apps/web/app/components/PhotoPageSection.vue

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<script setup lang="ts">
2+
import { cc0LicenseUrl, photos } from '~/utils/constants'
3+
</script>
4+
5+
<template>
6+
<section class="photos-container">
7+
<div class="photos">
8+
<VFTitle id="photo" class="title">
9+
{{ $t('photo.title') }}
10+
</VFTitle>
11+
<div>
12+
<p>{{ $t('photo.subtitle1') }}</p>
13+
<i18n-t keypath="photo.subtitle2" tag="p">
14+
<template #license>
15+
<a :href="cc0LicenseUrl" target="_blank">
16+
{{ $t('photo.cc0_license') }}
17+
</a>
18+
</template>
19+
</i18n-t>
20+
<ul>
21+
<li v-for="(photo, key) in photos" :key>
22+
<NuxtLink :to="photo.url" target="_blank">
23+
{{ photo.title }}
24+
</NuxtLink>
25+
</li>
26+
</ul>
27+
</div>
28+
</div>
29+
</section>
30+
</template>
31+
32+
<style scoped>
33+
@import url('~/assets/media.css');
34+
35+
.photos-container {
36+
--container-padding: calc(var(--unit) * 15) 6%;
37+
38+
padding: var(--container-padding);
39+
background: rgba(255, 255, 255, 0.75);
40+
backdrop-filter: blur(8px);
41+
}
42+
43+
.photos {
44+
--content-max-width: calc(var(--unit) * 96);
45+
46+
display: grid;
47+
max-width: var(--content-max-width);
48+
margin: 0 auto;
49+
width: 100%;
50+
}
51+
52+
.title {
53+
--content-padding-bottom: calc(var(--unit) * 5);
54+
55+
text-align: center;
56+
padding-bottom: var(--content-padding-bottom);
57+
line-height: 1.2;
58+
}
59+
60+
.photos p {
61+
margin: 0 0 16px;
62+
}
63+
64+
.photos li {
65+
list-style: disc;
66+
list-style-position: inside;
67+
}
68+
69+
.photos a {
70+
color: var(--color-vue-blue);
71+
text-decoration: underline;
72+
}
73+
74+
.photos a:hover {
75+
text-decoration: none;
76+
}
77+
78+
@media (--tablet) {
79+
.photos-container {
80+
--container-padding: 60px 6%;
81+
}
82+
83+
.photos {
84+
--content-padding-bottom: 30px;
85+
}
86+
}
87+
</style>

‎apps/web/app/components/TopPageSection.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ const getAnchorPath = computed(
5151
class="link-button"
5252
background-color="vue-green/200"
5353
color="white"
54-
:href="getAnchorPath('events')"
54+
:href="getAnchorPath('#photo')"
5555
target="_top"
5656
>
57-
{{ $t('related_events.title') }}
57+
{{ $t('photo.title') }}
5858
</VFLinkButton>
5959
</div>
6060
</div>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,5 +287,11 @@
287287
"title": "Related Events",
288288
"register": "Register for the event",
289289
"close": "The event has ended"
290+
},
291+
"photo": {
292+
"title": "Photo",
293+
"cc0_license": "CC0 License",
294+
"subtitle1": "Thank you to everyone who participated in Vue Fes Japan 2024.",
295+
"subtitle2": "The photos taken on the day will be published under a {license}, so feel free to use them on blogs, social media, and other platforms."
290296
}
291297
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,5 +305,11 @@
305305
"title": "関連イベント",
306306
"register": "イベントに参加する",
307307
"close": "イベントは終了しました"
308+
},
309+
"photo": {
310+
"title": "写真",
311+
"cc0_license": "CC0 ライセンス",
312+
"subtitle1": "Vue Fes Japan 2024 にご参加いただいたみなさん、ありがとうございました。",
313+
"subtitle2": "当日撮影された写真を {license} にて公開しますので、ブログや SNS などにご自由にお使いください。"
308314
}
309315
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ useHead({
4444

4545
<template>
4646
<TopPageSection />
47+
<PhotoPageSection />
4748
<TimeTablePageSection v-if="config.public.showTimetable" />
4849
<SpeakerPageSection :data="speakers" />
4950
<EventPageSection v-if="config.public.showEvent" :data="speakers" />

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,76 @@ export const endedCreateNamecard = true
6161

6262
export const displayNameMaxLength = 24
6363

64+
export const photos = [
65+
{
66+
title: '前日準備',
67+
url: 'https://photos.app.goo.gl/Qq7LcRQfP8sUqXVg9',
68+
},
69+
{
70+
title: '開場前',
71+
url: 'https://photos.app.goo.gl/NxEiCqx2XvmvSwke9',
72+
},
73+
{
74+
title: '受付',
75+
url: 'https://photos.app.goo.gl/kYenfefma4eroTbv9',
76+
},
77+
{
78+
title: 'メドピアトラック',
79+
url: 'https://photos.app.goo.gl/J5evxzqJpP9mf3LX9',
80+
},
81+
{
82+
title: 'MNTSQが全ての合意をフェアにするぞトラック',
83+
url: 'https://photos.app.goo.gl/HboMLxQr1xgi2STf9',
84+
},
85+
{
86+
title: 'kickflowトラック',
87+
url: 'https://photos.app.goo.gl/PXj8vMvStuiXHEbz5',
88+
},
89+
{
90+
title: 'Vueトラック',
91+
url: 'https://photos.app.goo.gl/dCRgb7iLbhuE5E2Y7',
92+
},
93+
{
94+
title: 'ランチタイム',
95+
url: 'https://photos.app.goo.gl/B2XigeF4vvjqvb6k8',
96+
},
97+
{
98+
title: 'スポンサーブース',
99+
url: 'https://photos.app.goo.gl/KSM61FxLSVFaAAzC9',
100+
},
101+
{
102+
title: 'Vue Fes Store',
103+
url: 'https://photos.app.goo.gl/cy2ArVhND9q5UP9cA',
104+
},
105+
{
106+
title: 'タトゥースペース',
107+
url: 'https://photos.app.goo.gl/dKjcEKCxKZ6GcgmU7',
108+
},
109+
{
110+
title: 'フリードリンク＆スナック',
111+
url: 'https://photos.app.goo.gl/tJmuumFGhG7NwJTq8',
112+
},
113+
{
114+
title: 'クリエイティブウォール',
115+
url: 'https://photos.app.goo.gl/fyZimXfrTS8X57RR8',
116+
},
117+
{
118+
title: '休憩・充電スペース',
119+
url: 'https://photos.app.goo.gl/JWfmeEAv7nv5LnGB9',
120+
},
121+
{
122+
title: 'アフターパーティー',
123+
url: 'https://photos.app.goo.gl/jGcNhC8mVERtjh8Q9',
124+
},
125+
{
126+
title: 'その他スナップ',
127+
url: 'https://photos.app.goo.gl/41FTQDQivv4FuRTP7',
128+
},
129+
]
130+
131+
export const cc0LicenseUrl =
132+
'https://creativecommons.jp/sciencecommons/aboutcc0/#:~:text=CC0%20%E3%81%A8%E3%81%AF%E3%80%81%E7%A7%91%E5%AD%A6%E8%80%85,%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82'
133+
64134
export const personalSponsors = [
65135
'Yuhei FUJITA',
66136
'jiyuujin',

0 commit comments

Comments
 (0)