From 297900ecfcb864e068fb7ca8ee66914d86c13d2a Mon Sep 17 00:00:00 2001
From: jiyuujin <jiyuujinunite@gmail.com>
Date: Mon, 11 Nov 2024 16:10:41 +0900
Subject: [PATCH 1/2] PhotoPageSection

---
 apps/web/app/components/PhotoPageSection.vue | 81 ++++++++++++++++++++
 apps/web/app/components/TopPageSection.vue   |  4 +-
 apps/web/app/lang/en.json                    |  5 ++
 apps/web/app/lang/ja.json                    |  5 ++
 apps/web/app/pages/index.vue                 |  1 +
 apps/web/app/utils/constants.ts              | 67 ++++++++++++++++
 6 files changed, 161 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/app/components/PhotoPageSection.vue

diff --git a/apps/web/app/components/PhotoPageSection.vue b/apps/web/app/components/PhotoPageSection.vue
new file mode 100644
index 00000000..0088d89f
--- /dev/null
+++ b/apps/web/app/components/PhotoPageSection.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { 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>
+        <p>{{ $t('photo.subtitle2') }}</p>
+        <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>
\ No newline at end of file
diff --git a/apps/web/app/components/TopPageSection.vue b/apps/web/app/components/TopPageSection.vue
index 4f00120e..da83e22d 100644
--- 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
index e7969e5f..0e1ff77a 100644
--- a/apps/web/app/lang/en.json
+++ b/apps/web/app/lang/en.json
@@ -287,5 +287,10 @@
     "title": "Related Events",
     "register": "Register for the event",
     "close": "The event has ended"
+  },
+  "photo": {
+    "title": "Photo",
+    "subtitle1": "Thank you to everyone who participated in Vue Fes Japan 2024.",
+    "subtitle2": "The photos taken on the day will be published under a CC0 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
index 48499b6e..defa9293 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -305,5 +305,10 @@
     "title": "関連イベント",
     "register": "イベントに参加する",
     "close": "イベントは終了しました"
+  },
+  "photo": {
+    "title": "写真",
+    "subtitle1": "Vue Fes Japan 2024 にご参加いただいたみなさん、ありがとうございました。",
+    "subtitle2": "当日撮影された写真を CC0 ライセンスにて公開しますので、ブログや SNS などにご自由にお使いください。"
   }
 }
diff --git a/apps/web/app/pages/index.vue b/apps/web/app/pages/index.vue
index 44579589..759d5056 100644
--- 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
index 3d681434..e370920d 100644
--- a/apps/web/app/utils/constants.ts
+++ b/apps/web/app/utils/constants.ts
@@ -61,6 +61,73 @@ 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 personalSponsors = [
   'Yuhei FUJITA',
   'jiyuujin',

From 2d394e94f1a8c9828b996cfd89ffd9a4a82c50e5 Mon Sep 17 00:00:00 2001
From: jiyuujin <jiyuujinunite@gmail.com>
Date: Mon, 11 Nov 2024 16:53:44 +0900
Subject: [PATCH 2/2] add CC0 License url

---
 apps/web/app/components/PhotoPageSection.vue | 10 ++++++++--
 apps/web/app/lang/en.json                    |  3 ++-
 apps/web/app/lang/ja.json                    |  3 ++-
 apps/web/app/utils/constants.ts              |  3 +++
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/components/PhotoPageSection.vue b/apps/web/app/components/PhotoPageSection.vue
index 0088d89f..603aea8a 100644
--- a/apps/web/app/components/PhotoPageSection.vue
+++ b/apps/web/app/components/PhotoPageSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { photos } from '~/utils/constants'
+import { cc0LicenseUrl, photos } from '~/utils/constants'
 </script>
 
 <template>
@@ -10,7 +10,13 @@ import { photos } from '~/utils/constants'
       </VFTitle>
       <div>
         <p>{{ $t('photo.subtitle1') }}</p>
-        <p>{{ $t('photo.subtitle2') }}</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">
diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
index 0e1ff77a..df5aa454 100644
--- a/apps/web/app/lang/en.json
+++ b/apps/web/app/lang/en.json
@@ -290,7 +290,8 @@
   },
   "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 CC0 license, so feel free to use them on blogs, social media, and other platforms."
+    "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
index defa9293..f15c4566 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -308,7 +308,8 @@
   },
   "photo": {
     "title": "写真",
+    "cc0_license": "CC0 ライセンス",
     "subtitle1": "Vue Fes Japan 2024 にご参加いただいたみなさん、ありがとうございました。",
-    "subtitle2": "当日撮影された写真を CC0 ライセンスにて公開しますので、ブログや SNS などにご自由にお使いください。"
+    "subtitle2": "当日撮影された写真を {license} にて公開しますので、ブログや SNS などにご自由にお使いください。"
   }
 }
diff --git a/apps/web/app/utils/constants.ts b/apps/web/app/utils/constants.ts
index e370920d..42025066 100644
--- a/apps/web/app/utils/constants.ts
+++ b/apps/web/app/utils/constants.ts
@@ -128,6 +128,9 @@ export const photos = [
   },
 ]
 
+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',