Merge pull request #385 from vuejs-jp/enhance/photo-section

PhotoPageSection
vuejs-jp · Nov 11, 2024 · a9e515a · a9e515a
2 parents 1718d39 + 2d394e9
commit a9e515a
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 2 deletions.
diff --git a/apps/web/app/components/PhotoPageSection.vue b/apps/web/app/components/PhotoPageSection.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { cc0LicenseUrl, photos } from '~/utils/constants'
+</script>
+
+<template>
+  <section class="photos-container">
+    <div class="photos">
+      <VFTitle id="photo" class="title">
+        {{ $t('photo.title') }}
+      </VFTitle>
+      <div>
+        <p>{{ $t('photo.subtitle1') }}</p>
+        <i18n-t keypath="photo.subtitle2" tag="p">
+          <template #license>
+            <a :href="cc0LicenseUrl" target="_blank">
+              {{ $t('photo.cc0_license') }}
+            </a>
+          </template>
+        </i18n-t>
+        <ul>
+          <li v-for="(photo, key) in photos" :key>
+            <NuxtLink :to="photo.url" target="_blank">
+              {{ photo.title }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+@import url('~/assets/media.css');
+
+.photos-container {
+  --container-padding: calc(var(--unit) * 15) 6%;
+
+  padding: var(--container-padding);
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(8px);
+}
+
+.photos {
+  --content-max-width: calc(var(--unit) * 96);
+
+  display: grid;
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  width: 100%;
+}
+
+.title {
+  --content-padding-bottom: calc(var(--unit) * 5);
+
+  text-align: center;
+  padding-bottom: var(--content-padding-bottom);
+  line-height: 1.2;
+}
+
+.photos p {
+  margin: 0 0 16px;
+}
+
+.photos li {
+  list-style: disc;
+  list-style-position: inside;
+}
+
+.photos a {
+  color: var(--color-vue-blue);
+  text-decoration: underline;
+}
+
+.photos a:hover {
+  text-decoration: none;
+}
+
+@media (--tablet) {
+  .photos-container {
+    --container-padding: 60px 6%;
+  }
+
+  .photos {
+    --content-padding-bottom: 30px;
+  }
+}
+</style>
diff --git a/apps/web/app/components/TopPageSection.vue b/apps/web/app/components/TopPageSection.vue
@@ -51,10 +51,10 @@ const getAnchorPath = computed(
             class="link-button"
             background-color="vue-green/200"
             color="white"
-            :href="getAnchorPath('events')"
+            :href="getAnchorPath('#photo')"
             target="_top"
           >
-            {{ $t('related_events.title') }}
+            {{ $t('photo.title') }}
           </VFLinkButton>
         </div>
       </div>

diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
@@ -287,5 +287,11 @@
     "title": "Related Events",
     "register": "Register for the event",
     "close": "The event has ended"
+  },
+  "photo": {
+    "title": "Photo",
+    "cc0_license": "CC0 License",
+    "subtitle1": "Thank you to everyone who participated in Vue Fes Japan 2024.",
+    "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."
   }
 }
diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
@@ -305,5 +305,11 @@
     "title": "関連イベント",
     "register": "イベントに参加する",
     "close": "イベントは終了しました"
+  },
+  "photo": {
+    "title": "写真",
+    "cc0_license": "CC0 ライセンス",
+    "subtitle1": "Vue Fes Japan 2024 にご参加いただいたみなさん、ありがとうございました。",
+    "subtitle2": "当日撮影された写真を {license} にて公開しますので、ブログや SNS などにご自由にお使いください。"
   }
 }
diff --git a/apps/web/app/pages/index.vue b/apps/web/app/pages/index.vue
@@ -44,6 +44,7 @@ useHead({
 
 <template>
   <TopPageSection />
+  <PhotoPageSection />
   <TimeTablePageSection v-if="config.public.showTimetable" />
   <SpeakerPageSection :data="speakers" />
   <EventPageSection v-if="config.public.showEvent" :data="speakers" />

diff --git a/apps/web/app/utils/constants.ts b/apps/web/app/utils/constants.ts
@@ -61,6 +61,76 @@ export const endedCreateNamecard = true
 
 export const displayNameMaxLength = 24
 
+export const photos = [
+  {
+    title: '前日準備',
+    url: 'https://photos.app.goo.gl/Qq7LcRQfP8sUqXVg9',
+  },
+  {
+    title: '開場前',
+    url: 'https://photos.app.goo.gl/NxEiCqx2XvmvSwke9',
+  },
+  {
+    title: '受付',
+    url: 'https://photos.app.goo.gl/kYenfefma4eroTbv9',
+  },
+  {
+    title: 'メドピアトラック',
+    url: 'https://photos.app.goo.gl/J5evxzqJpP9mf3LX9',
+  },
+  {
+    title: 'MNTSQが全ての合意をフェアにするぞトラック',
+    url: 'https://photos.app.goo.gl/HboMLxQr1xgi2STf9',
+  },
+  {
+    title: 'kickflowトラック',
+    url: 'https://photos.app.goo.gl/PXj8vMvStuiXHEbz5',
+  },
+  {
+    title: 'Vueトラック',
+    url: 'https://photos.app.goo.gl/dCRgb7iLbhuE5E2Y7',
+  },
+  {
+    title: 'ランチタイム',
+    url: 'https://photos.app.goo.gl/B2XigeF4vvjqvb6k8',
+  },
+  {
+    title: 'スポンサーブース',
+    url: 'https://photos.app.goo.gl/KSM61FxLSVFaAAzC9',
+  },
+  {
+    title: 'Vue Fes Store',
+    url: 'https://photos.app.goo.gl/cy2ArVhND9q5UP9cA',
+  },
+  {
+    title: 'タトゥースペース',
+    url: 'https://photos.app.goo.gl/dKjcEKCxKZ6GcgmU7',
+  },
+  {
+    title: 'フリードリンク＆スナック',
+    url: 'https://photos.app.goo.gl/tJmuumFGhG7NwJTq8',
+  },
+  {
+    title: 'クリエイティブウォール',
+    url: 'https://photos.app.goo.gl/fyZimXfrTS8X57RR8',
+  },
+  {
+    title: '休憩・充電スペース',
+    url: 'https://photos.app.goo.gl/JWfmeEAv7nv5LnGB9',
+  },
+  {
+    title: 'アフターパーティー',
+    url: 'https://photos.app.goo.gl/jGcNhC8mVERtjh8Q9',
+  },
+  {
+    title: 'その他スナップ',
+    url: 'https://photos.app.goo.gl/41FTQDQivv4FuRTP7',
+  },
+]
+
+export const cc0LicenseUrl =
+  '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'
+
 export const personalSponsors = [
   'Yuhei FUJITA',
   'jiyuujin',