Merge pull request #398 from vuejs-jp/chore/storage-to-local-cp

Supabase Storage から Local の管理へ切り替え

Author: jiyuujin

apps/web/app/components/SpeakerPageSection.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import SpeakerCfp from '~/components/speaker/SpeakerCfp.vue'
 import { useLocaleCurrent } from '@/composables/useLocaleCurrent'
+import { useSupabaseStorage } from '@/composables/useSupabaseStorage'
 import type { SpeakerCategory, SpeakerInfo } from '@vuejs-jp/model'
 import { useRuntimeConfig } from '#imports'
+import { REDIRECT_URL } from '~/utils/environment.constants'
 
 type _SpeakerCategory = Extract<SpeakerCategory, 'sessionSpeakers' | 'lightningTalkSpeakers' | 'sponsorSessionSpeakers'>
 type Speakers = Record<_SpeakerCategory, SpeakerInfo>
@@ -14,6 +16,8 @@ const props = defineProps<{
 const config = useRuntimeConfig()
 const currentLocale = useLocaleCurrent().locale
 
+const { getStaticAvatarUrl } = useSupabaseStorage()
+
 const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = props.data as Speakers
 </script>
 
@@ -32,7 +36,7 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = props
               :to="`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}sessions/${speaker.detail_page_id}`"
             >
               <VFSpeaker
-                :image="speaker.image_url"
+                :image="getStaticAvatarUrl(speaker.image_url)"
                 :company="currentLocale === 'en' ? speaker.company_en : speaker.company_ja"
                 :division="currentLocale === 'en' ? speaker.position_en : speaker.position_ja"
                 :name="currentLocale === 'en' ? speaker.name_en : speaker.name_ja"
@@ -42,7 +46,7 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = props
             </NuxtLink>
             <VFSpeaker
               v-else
-              :image="speaker.image_url"
+              :image="getStaticAvatarUrl(speaker.image_url)"
               :company="currentLocale === 'en' ? speaker.company_en : speaker.company_ja"
               :division="currentLocale === 'en' ? speaker.position_en : speaker.position_ja"
               :name="currentLocale === 'en' ? speaker.name_en : speaker.name_ja"
@@ -68,7 +72,7 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = props
               :to="`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}sessions/${speaker.detail_page_id}`"
             >
               <VFSpeaker
-                :image="speaker.image_url"
+                :image="getStaticAvatarUrl(speaker.image_url)"
                 :company="currentLocale === 'en' ? speaker.company_en : speaker.company_ja"
                 :division="currentLocale === 'en' ? speaker.position_en : speaker.position_ja"
                 :name="currentLocale === 'en' ? speaker.name_en : speaker.name_ja"
@@ -78,7 +82,7 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = props
             </NuxtLink>
             <VFSpeaker
               v-else
-              :image="speaker.image_url"
+              :image="getStaticAvatarUrl(speaker.image_url)"
               :company="currentLocale === 'en' ? speaker.company_en : speaker.company_ja"
               :division="currentLocale === 'en' ? speaker.position_en : speaker.position_ja"
               :name="currentLocale === 'en' ? speaker.name_en : speaker.name_ja"
@@ -99,7 +103,7 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = props
               :to="`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}sessions/${speaker.detail_page_id}`"
             >
               <VFSpeaker
-                :image="speaker.image_url"
+                :image="getStaticAvatarUrl(speaker.image_url)"
                 :company="currentLocale === 'en' ? speaker.company_en : speaker.company_ja"
                 :division="currentLocale === 'en' ? speaker.position_en : speaker.position_ja"
                 :name="currentLocale === 'en' ? speaker.name_en : speaker.name_ja"
@@ -109,7 +113,7 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = props
             </NuxtLink>
             <VFSpeaker
               v-else
-              :image="speaker.image_url"
+              :image="getStaticAvatarUrl(speaker.image_url)"
               :company="currentLocale === 'en' ? speaker.company_en : speaker.company_ja"
               :division="currentLocale === 'en' ? speaker.position_en : speaker.position_ja"
               :name="currentLocale === 'en' ? speaker.name_en : speaker.name_ja"

apps/web/app/components/event/PanelerList.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { Speaker } from '@vuejs-jp/model'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+import { useSupabaseStorage } from '~/composables/useSupabaseStorage'
 
 interface PanelerListProps {
   panelers: Speaker[]
 }
 
 const props = defineProps<PanelerListProps>()
 
+const { getStaticAvatarUrl } = useSupabaseStorage()
+
 const currentLocale = useLocaleCurrent().locale
 </script>
 
@@ -16,7 +19,7 @@ const currentLocale = useLocaleCurrent().locale
     <VFSpeaker
       v-for="paneler in panelers"
       :key="paneler.id"
-      :image="paneler.image_url"
+      :image="getStaticAvatarUrl(paneler.image_url)"
       :company="currentLocale === 'en' ? paneler.company_en : paneler.company_ja"
       :division="currentLocale === 'en' ? paneler.position_en : paneler.position_en"
       :name="currentLocale === 'en' ? paneler.name_en : paneler.name_ja"

apps/web/app/components/sponsor/SponsorList.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { PersonalSponsorInfo, SponsorInfo } from '@vuejs-jp/model'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+import { useSupabaseStorage } from '~/composables/useSupabaseStorage'
 
 type Props = SponsorInfo & {
   personal?: PersonalSponsorInfo
 }
 
 defineProps<Props>()
 
+const { getStaticAvatarUrl } = useSupabaseStorage()
+
 const currentLocale = useLocaleCurrent().locale
 </script>
 
@@ -24,7 +27,7 @@ const currentLocale = useLocaleCurrent().locale
         >
           <img
             class="sponsor-list-item-image"
-            :src="item['image_url']"
+            :src="getStaticAvatarUrl(item.image_url)"
             :alt="item.name"
             loading="lazy"
           />

apps/web/app/components/ticket/NamecardSection.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
-import { endedApplyNormal, endedCreateNamecard, ticketUrl } from '~/utils/constants'
+import { endedApplyNormal, endedCreateNamecard, isDone, ticketUrl } from '~/utils/constants'
 import { useWithBase, usePathWithLocale } from '#imports'
 
-const { locale: currentLocale } = useLocaleCurrent()
 const basePath = useWithBase()
 const pathWithLocale = usePathWithLocale()
 </script>
@@ -39,6 +37,7 @@ const pathWithLocale = usePathWithLocale()
           :href="pathWithLocale('/namecard')"
           background-color="vue-green/200"
           color="white"
+          :disabled="isDone"
         >
           {{ endedCreateNamecard ? $t('namecard.confirmNamecard') : $t('namecard.createNamecard') }}
         </VFLinkButton>

apps/web/app/composables/useSupabaseStorage.ts

@@ -1,15 +1,22 @@
 import { useRuntimeConfig } from '#imports'
 import { bucket } from '@vuejs-jp/model'
+import { REDIRECT_URL } from '../utils/environment.constants'
 
 export function useSupabaseStorage() {
   const config = useRuntimeConfig()
   const { supabaseUrl } = config.public
 
+  function getStaticAvatarUrl(avatarUrl?: string) {
+    if (!avatarUrl) return `${REDIRECT_URL}/supabase/common/default.png`
+
+    return `${REDIRECT_URL}/supabase/common/${new URL(avatarUrl).pathname.split('/').pop()}`
+  }
+
   function getFullAvatarUrl(avatarUrl: string) {
     if (!avatarUrl) return `${supabaseUrl}/storage/v1/object/public/${bucket}/default.png`
     if (avatarUrl?.startsWith(supabaseUrl)) return avatarUrl
     return `${supabaseUrl}/storage/v1/object/public/${bucket}${avatarUrl}`
   }
 
-  return { getFullAvatarUrl }
+  return { getStaticAvatarUrl, getFullAvatarUrl }
 }

apps/web/app/pages/jobboard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useFetch, useHead, usePathWithLocale } from '#imports'
+import { useSupabaseStorage } from '~/composables/useSupabaseStorage'
 import type { JobInfo } from '@vuejs-jp/model'
 import { conferenceTitle, linkUrl, ogJobboardDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
@@ -12,6 +13,8 @@ if (error.value) {
 }
 const { allJobs } = data.value as Jobs
 
+const { getStaticAvatarUrl } = useSupabaseStorage()
+
 const pathWithLocale = usePathWithLocale()
 
 useHead({
@@ -39,7 +42,7 @@ useHead({
     <ul class="jobboard-body">
       <li v-for="(job, index) in allJobs.list" :key="index">
         <nuxt-link :to="job.link_url" target="_blank">
-          <img :src="job.image_url" :alt="job.image_alt" />
+          <img :src="getStaticAvatarUrl(job.image_url)" :alt="job.image_alt" />
         </nuxt-link>
       </li>
     </ul>

apps/web/app/pages/sessions/[id]/index.vue

@@ -11,6 +11,7 @@ import type { Speaker } from '@vuejs-jp/model'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { useSupabase } from '~/composables/useSupabase'
 import { useSession } from '~/composables/useSession'
+import { useSupabaseStorage } from '~/composables/useSupabaseStorage'
 import { conferenceTitle, linkUrl, ogSpeakerDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 import { useRange } from '@vuejs-jp/composable'
@@ -36,6 +37,7 @@ const { range } = useRange()
 const { color, trackName } = useSession()
 const currentLocale = useLocaleCurrent().locale
 const pathWithLocale = usePathWithLocale()
+const { getStaticAvatarUrl } = useSupabaseStorage()
 
 useHead({
   titleTemplate: (titleChunk) => `${speakerData[0].session_title_ja} | ${conferenceTitle}`,
@@ -105,7 +107,7 @@ useHead({
 
       <div class="detailbody-persons">
         <VFSpeaker
-          :image="speakerData[0].image_url"
+          :image="getStaticAvatarUrl(speakerData[0].image_url)"
           :company="currentLocale === 'en' ? speakerData[0].company_en : speakerData[0].company_ja"
           :division="
             currentLocale === 'en' ? speakerData[0].position_en : speakerData[0].position_ja

apps/web/app/pages/sessions/[id]/share.vue

@@ -9,6 +9,7 @@ import {
 } from '#imports'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { useSupabase } from '~/composables/useSupabase'
+import { useSupabaseStorage } from '~/composables/useSupabaseStorage'
 import { conferenceTitle, linkUrl, ogSpeakerDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 import type { Speaker } from '@vuejs-jp/model'
@@ -32,6 +33,8 @@ if (!speakerData[0].detail_page_id) {
 
 const currentLocale = useLocaleCurrent().locale
 
+const { getStaticAvatarUrl } = useSupabaseStorage()
+
 function copyUrl() {
   const element = document.createElement('input')
   element.value = `https://vuefes.jp/2024/namecard/${id}/share`
@@ -73,7 +76,7 @@ useHead({
       class="session"
       :user="{
         display_name: speakerData[0].name_ja,
-        avatar_url: speakerData[0].image_url,
+        avatar_url: getStaticAvatarUrl(speakerData[0].image_url),
         role: 'speaker',
       }"
     />

apps/web/app/pages/sponsors/[id]/index.vue

@@ -11,6 +11,7 @@ import type { Job, Speaker, Sponsor } from '@vuejs-jp/model'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { useSupabase } from '~/composables/useSupabase'
 import { useSponsor } from '~/composables/useSponsor'
+import { useSupabaseStorage } from '~/composables/useSupabaseStorage'
 import { conferenceTitle, linkUrl, ogSponsorDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 import { useColor } from '@vuejs-jp/composable'
@@ -48,6 +49,7 @@ const currentLocale = useLocaleCurrent().locale
 const pathWithLocale = usePathWithLocale()
 const { color: updateColor } = useColor()
 const { color, borderColor, isMoreSilver } = useSponsor()
+const { getStaticAvatarUrl } = useSupabaseStorage()
 
 useHead({
   titleTemplate: (titleChunk) => `${sponsorData[0].name} | ${conferenceTitle}`,
@@ -92,7 +94,7 @@ useHead({
             :style="{ border: `1px solid ${updateColor(borderColor(sponsorData[0].tag))}` }"
           >
             <img
-              :src="`${sponsorData[0].image_url}`"
+              :src="getStaticAvatarUrl(sponsorData[0].image_url)"
               :alt="sponsorData[0].name"
               width="570"
               height="322"
@@ -126,7 +128,7 @@ useHead({
             <VFSpeaker
               v-for="(speaker, index) in speakerData"
               :key="index"
-              :image="speaker.image_url"
+              :image="getStaticAvatarUrl(speaker.image_url)"
               :company="currentLocale === 'en' ? speaker.company_en : speaker.company_ja"
               :division="currentLocale === 'en' ? speaker.position_en : speaker.position_ja"
               :name="currentLocale === 'en' ? speaker.name_en : speaker.name_ja"
@@ -158,7 +160,7 @@ useHead({
           {{ `${sponsorData[0].name}のジョブボード` }}
         </h3>
         <nuxt-link :to="jobData[0].link_url" target="_blank">
-          <img :src="jobData[0].image_url" :alt="jobData[0].image_alt" />
+          <img :src="getStaticAvatarUrl(jobData[0].image_url)" :alt="jobData[0].image_alt" />
         </nuxt-link>
       </div>
 

apps/web/app/pages/sponsors/[id]/share.vue

@@ -9,6 +9,7 @@ import {
 } from '#imports'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { useSupabase } from '~/composables/useSupabase'
+import { useSupabaseStorage } from '~/composables/useSupabaseStorage'
 import { conferenceTitle, linkUrl, ogSponsorDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 import type { Sponsor } from '@vuejs-jp/model'
@@ -32,6 +33,8 @@ if (!sponsorData[0].detail_page_id) {
 
 const currentLocale = useLocaleCurrent().locale
 
+const { getStaticAvatarUrl } = useSupabaseStorage()
+
 function copyUrl() {
   const element = document.createElement('input')
   element.value = `https://vuefes.jp/2024/namecard/${id}/share`
@@ -73,7 +76,7 @@ useHead({
       class="session"
       :user="{
         display_name: sponsorData[0].name,
-        avatar_url: sponsorData[0].share_image_url,
+        avatar_url: getStaticAvatarUrl(sponsorData[0].share_image_url),
         role: 'sponsor',
       }"
     />