feat: セッション詳細ページに発表資料のリンクを追加

Author: yamageji

app/pages/sessions/[id].vue

@@ -8,6 +8,7 @@ import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 import { conferenceTitle } from '~/utils/constants'
 import { speakers } from '~/utils/speakers.constants'
+import SlideSvg from '~/assets/logo/slide_logo.svg'
 
 const { locale } = useLocaleCurrent()
 const { showSpeakerInfo, getTrackColor } = useSession()
@@ -87,6 +88,17 @@ useHead({
       <div class="detailbody-explain">
         <MarkDownText :path="`sessions/${speakerData.id}/head`" />
       </div>
+      <NuxtLink
+        v-if="speakerData.session.archives?.slide"
+        :to="speakerData.session.archives?.slide"
+        target="_blank"
+        class="detailbody-slide"
+      >
+        <span class="slide-icon">
+          <SlideSvg />
+        </span>
+        <span class="slide-title">発表資料</span>
+      </NuxtLink>
       <div class="detailbody-persons">
         <SpeakerCard :speaker="speakerData" />
         <div class="person-info">
@@ -162,6 +174,28 @@ css({
       },
     },
   },
+  '.detailbody-slide': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 'calc({space.8} * 1)',
+    width: 'fit-content',
+    margin: '-40px 0 calc({space.8} * 8)',
+    '&:hover': {
+      opacity: 0.8,
+      transition: '.2s',
+    },
+  },
+  '.slide-icon': {
+    width: '40px',
+    height: '40px',
+    '::v-deep(svg)': {
+      fill: '{color.vue.blue}',
+    },
+  },
+  '.slide-title': {
+    color: '{color.vue.blue}',
+    textDecoration: 'underline',
+  },
   '.detailbody-persons': {
     fontSize: 'calc(18*{fontSize.base})',
     display: 'grid',

app/pages/sponsor-sessions/[id].vue

@@ -9,6 +9,7 @@ import { generalOg, twitterOg } from '~/utils/og.constants'
 import { conferenceTitle } from '~/utils/constants'
 import { all } from '~/utils/sponsor.constants'
 import { sponsorSpeakers } from '~/utils/sponsor-speakers.constants'
+import SlideSvg from '~/assets/logo/slide_logo.svg'
 
 const emptySponsorSpeaker: SponsorSpeaker = {
   id: '',
@@ -138,6 +139,17 @@ useHead({
       <div class="detailbody-explain">
         <MarkDownText :path="`sponsor-sessions/${sponsorSpeakerData.id}/head`" />
       </div>
+      <NuxtLink
+        v-if="sponsorSpeakerData.session.archives?.slide"
+        :to="sponsorSpeakerData.session.archives?.slide"
+        target="_blank"
+        class="detailbody-slide"
+      >
+        <span class="slide-icon">
+          <SlideSvg />
+        </span>
+        <span class="slide-title">発表資料</span>
+      </NuxtLink>
       <div
         v-for="(profile, index) in sponsorSpeakerData.profile"
         :key="index"
@@ -210,6 +222,28 @@ css({
       },
     },
   },
+  '.detailbody-slide': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 'calc({space.8} * 1)',
+    width: 'fit-content',
+    margin: '-40px 0 calc({space.8} * 8)',
+    '&:hover': {
+      opacity: 0.8,
+      transition: '.2s',
+    },
+  },
+  '.slide-icon': {
+    width: '40px',
+    height: '40px',
+    '::v-deep(svg)': {
+      fill: '{color.vue.blue}',
+    },
+  },
+  '.slide-title': {
+    color: '{color.vue.blue}',
+    textDecoration: 'underline',
+  },
   '.detailbody-persons': {
     fontSize: 'calc(18*{fontSize.base})',
     display: 'grid',

app/types/app.ts

@@ -128,6 +128,7 @@ export type Session = {
   type: 'main' | 'lt'
   track?: Tracks
   time: string
+  archives?: Archive
 }
 
 export type SpeakerProfile = {
@@ -142,6 +143,11 @@ export type SpeakerProfile = {
   mastodonUrl?: string
 }
 
+export interface Archive {
+  slide?: string
+  youtube?: string
+}
+
 /**
  * sponsor
  */

app/utils/speakers.constants.ts

@@ -101,6 +101,9 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '16:30 - 17:00',
       type: 'main',
+      archives: {
+        slide: 'https://vue-fes-japan-2023-multithread-slide.sapphi.red/1',
+      },
     },
     profile: {
       image: 'speakers/sapphi_red.png',
@@ -121,6 +124,9 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '17:15 - 17:45',
       type: 'main',
+      archives: {
+        slide: 'https://ota-meshi.github.io/vue-fes-japan-2023-slide/1',
+      },
     },
     profile: {
       image: 'speakers/ota-meshi.jpg',
@@ -140,6 +146,9 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '15:00 - 15:30',
       type: 'main',
+      archives: {
+        slide: 'https://speakerdeck.com/wattanx/demystifying-nuxt-bridge',
+      },
     },
     profile: {
       image: 'speakers/wattanx.png',
@@ -159,6 +168,9 @@ export const speakers: Speaker[] = [
       track: 'm3',
       time: '16:30 - 17:00',
       type: 'main',
+      archives: {
+        slide: 'https://speakerdeck.com/sorami/vue-fes-japan-2023',
+      },
     },
     profile: {
       image: 'speakers/sorami.png',
@@ -178,6 +190,10 @@ export const speakers: Speaker[] = [
       track: 'm3',
       time: '15:00 - 15:30',
       type: 'main',
+      archives: {
+        slide:
+          'https://speakerdeck.com/mizdra/vue-language-server-karasheng-mareta-volar-dot-js-to-soregami-meruke-neng-xing',
+      },
     },
     profile: {
       image: 'speakers/mizdra.png',
@@ -196,6 +212,9 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '15:45 - 16:15',
       type: 'main',
+      archives: {
+        slide: 'https://speakerdeck.com/nozomuikuta/deep-dive-to-unjs-and-nuxt-3',
+      },
     },
     profile: {
       image: 'speakers/nozomu_ikuta.png',
@@ -215,6 +234,9 @@ export const speakers: Speaker[] = [
       track: 'm3',
       time: '13:30 - 14:00',
       type: 'main',
+      archives: {
+        slide: 'https://yamanoku.net/vuefes-japan-2023/ja/',
+      },
     },
     profile: {
       image: 'speakers/yamanoku.png',
@@ -252,6 +274,9 @@ export const speakers: Speaker[] = [
       track: 'm3',
       time: '14:15 - 14:45',
       type: 'main',
+      archives: {
+        slide: 'https://speakerdeck.com/chinen/vue-fes-japan-2023',
+      },
     },
     profile: {
       image: 'speakers/chocodogmagic.jpg',
@@ -270,6 +295,9 @@ export const speakers: Speaker[] = [
       track: 'm3',
       time: '17:15 - 17:45',
       type: 'main',
+      archives: {
+        slide: 'https://docs.google.com/presentation/d/1sVPisJofs18G8WUitn4l53s-mXFLRTs2Q4F0hqFqS5A/edit#slide=id.p',
+      },
     },
     profile: {
       image: 'speakers/keima.jpg',
@@ -288,6 +316,10 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '14:15 - 14:45',
       type: 'main',
+      archives: {
+        slide:
+          'https://speakerdeck.com/baseballyama/vue-fes-2023-18ying-ye-ri-de350konponentogui-mo-novueapurinidezainsisutemuwodao-ru-surufang-fa',
+      },
     },
     profile: {
       image: 'speakers/baseballyama.jpeg',
@@ -310,6 +342,9 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '13:30 - 14:00',
       type: 'lt',
+      archives: {
+        slide: 'https://www.docswell.com/s/kira_puka/ZRXM6E-2023-10-25-064822',
+      },
     },
     profile: {
       image: 'speakers/kira_puka.png',
@@ -329,6 +364,10 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '13:30 - 14:00',
       type: 'lt',
+      archives: {
+        slide:
+          'https://docs.google.com/presentation/d/1KwLPyFLE0J3W9BwFmROHtgG0qQbGdYCnbEXjuJTYpJ4/edit#slide=id.g24fad336807_0_0',
+      },
     },
     profile: {
       image: 'speakers/northprint.png',
@@ -349,6 +388,9 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '13:30 - 14:00',
       type: 'lt',
+      archives: {
+        slide: 'https://speakerdeck.com/t0yohei/vue-woshi-tute-grid-system-woshi-zhuang-sitahua',
+      },
     },
     profile: {
       image: 'speakers/t0yohei.jpg',
@@ -368,6 +410,9 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '13:30 - 14:00',
       type: 'lt',
+      archives: {
+        slide: 'https://speakerdeck.com/yud0uhu/tauriniripureisusitahua',
+      },
     },
     profile: {
       image: 'speakers/yud0uhu.jpg',
@@ -387,6 +432,9 @@ export const speakers: Speaker[] = [
       track: 'medpeer',
       time: '15:45 - 16:15',
       type: 'lt',
+      archives: {
+        slide: 'https://slides-one.vercel.app/1?clicks=1',
+      },
     },
     profile: {
       image: 'speakers/53able.png',
@@ -407,6 +455,9 @@ export const speakers: Speaker[] = [
       track: 'm3',
       time: '15:45 - 16:15',
       type: 'lt',
+      archives: {
+        slide: 'https://speakerdeck.com/fuqda/subpatandenozhuang-tai-guan-li',
+      },
     },
     profile: {
       image: 'speakers/fuqda.png',
@@ -427,6 +478,9 @@ export const speakers: Speaker[] = [
       track: 'm3',
       time: '12:45 - 13:15',
       type: 'lt',
+      archives: {
+        slide: 'https://tome.app/mewton-8cb/vue-fes-2023-clnjmh8ez0044l77dwardvtga',
+      },
     },
     profile: {
       image: 'speakers/mew-ton.png',
@@ -465,6 +519,10 @@ export const speakers: Speaker[] = [
       track: 'm3',
       time: '15:45 - 16:15',
       type: 'lt',
+      archives: {
+        slide:
+          'https://speakerdeck.com/wakkn/hurusukuratutiecnoji-pan-dearunuxt-2wo3niyi-xing-si-kai-fa-noxiao-lu-xing-topahuomansuwogao-meru',
+      },
     },
     profile: {
       image: 'speakers/hitoki-wakugawa.jpg',

app/utils/sponsor-speakers.constants.ts

@@ -10,6 +10,9 @@ export const sponsorSpeakers: SponsorSpeaker[] = [
       track: 'all',
       time: '11:05 - 11:25',
       type: 'main',
+      archives: {
+        slide: 'https://speakerdeck.com/bengo4com/20231028',
+      },
     },
     profile: [
       {
@@ -33,6 +36,9 @@ export const sponsorSpeakers: SponsorSpeaker[] = [
       track: 'all',
       time: '11:25 - 11:45',
       type: 'main',
+      archives: {
+        slide: 'https://twitter.com/kyamamoto9120/status/1718138625882476906',
+      },
     },
     profile: [
       {
@@ -56,6 +62,9 @@ export const sponsorSpeakers: SponsorSpeaker[] = [
       track: 'all',
       time: '11:45 - 12:05',
       type: 'main',
+      archives: {
+        slide: 'https://speakerdeck.com/lmi/vuefes2023-link-and-motivation',
+      },
     },
     profile: [
       {
@@ -80,6 +89,9 @@ export const sponsorSpeakers: SponsorSpeaker[] = [
       track: 'medpeer',
       time: '12:30 - 12:50',
       type: 'main',
+      archives: {
+        slide: 'https://www.slideshare.net/KazuhiroKobayashikzh/vue-2-eol-2',
+      },
     },
     profile: [
       {
@@ -159,6 +171,9 @@ export const sponsorSpeakers: SponsorSpeaker[] = [
       track: 'cloudsign',
       time: '12:55 - 13:15',
       type: 'main',
+      archives: {
+        slide: 'https://speakerdeck.com/cyber_snufkin/28-vue-fes-tokyo-vue-dot-js-puroziekutoshe-ji-nobesutopurakuteisuwoqiu-mete',
+      },
     },
     profile: [
       {
@@ -182,6 +197,9 @@ export const sponsorSpeakers: SponsorSpeaker[] = [
       track: 'm3',
       time: '12:20 - 12:40',
       type: 'main',
+      archives: {
+        slide: 'https://speakerdeck.com/hacomono/nuxt-3dehazimerutesutodao-ru-zhan-lue-tochu-shou',
+      },
     },
     profile: [
       {