From e40db96e288a64aadd13bcbb119f3fc6bbae0c7e Mon Sep 17 00:00:00 2001
From: genj11 <kanno@stanfoot.com>
Date: Tue, 1 Apr 2025 21:13:57 +0900
Subject: [PATCH 1/4] fix: add usePathWithLocal composables

---
 apps/web/app/components/FooterPageSection.vue      | 12 ++++++------
 apps/web/app/components/SponsorPageSection.vue     |  6 +++---
 apps/web/app/components/ticket/NamecardSection.vue |  5 +++--
 apps/web/app/composables/usePathWithLocale.ts      | 14 ++++++++++++++
 apps/web/app/error.vue                             |  6 +++---
 apps/web/app/pages/code-of-conduct.vue             |  8 +++-----
 apps/web/app/pages/tokusho.vue                     |  8 +++-----
 7 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 apps/web/app/composables/usePathWithLocale.ts

diff --git a/apps/web/app/components/FooterPageSection.vue b/apps/web/app/components/FooterPageSection.vue
index 4cea9341..fffb9737 100644
--- a/apps/web/app/components/FooterPageSection.vue
+++ b/apps/web/app/components/FooterPageSection.vue
@@ -2,7 +2,7 @@
 import { useI18n } from '#i18n'
 import { useColor, useTypography } from '@vuejs-jp/composable'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
-import { useWithBase } from '#imports'
+import { usePathWithLocale } from '#imports'
 //#region types
 type LinkList = {
   href: string
@@ -15,7 +15,7 @@ const { t } = useI18n()
 const { path: localePath } = useLocaleCurrent()
 const { color } = useColor()
 const { fontSize } = useTypography()
-const withBase = useWithBase()
+const pathWithLocale = usePathWithLocale()
 //#endregion
 
 //#region private variables
@@ -39,19 +39,19 @@ const snsLinkList: LinkList[] = [
 ]
 const internalLinkList: LinkList[] = [
   {
-    href: withBase('/events'),
+    href: pathWithLocale('/events'),
     text: 'related_events.title',
   },
   {
-    href: withBase('/privacy'),
+    href: pathWithLocale('/privacy'),
     text: 'privacy.title',
   },
   {
-    href: withBase('/code-of-conduct'),
+    href: pathWithLocale('/code-of-conduct'),
     text: 'code_of_conduct.title',
   },
   {
-    href: withBase('/tokusho'),
+    href: pathWithLocale('/tokusho'),
     text: 'tokusho.title',
   },
 ]
diff --git a/apps/web/app/components/SponsorPageSection.vue b/apps/web/app/components/SponsorPageSection.vue
index e359ad73..1a843e61 100644
--- a/apps/web/app/components/SponsorPageSection.vue
+++ b/apps/web/app/components/SponsorPageSection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from '#i18n'
-import { useLocaleCurrent, useRuntimeConfig, useWithBase } from '#imports'
+import { useLocaleCurrent, useRuntimeConfig, usePathWithLocale } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
 import { useTranslation } from '@/composables/useTranslation'
 import SponsorList from './sponsor/SponsorList.vue'
@@ -22,7 +22,7 @@ const { translate } = useTranslation()
 
 const currentLocale = useLocaleCurrent().locale
 
-const withBase = useWithBase()
+const pathWithLocale = usePathWithLocale()
 
 // const periodStart = {
 //   prefixYear: t('prefix_year'),
@@ -186,7 +186,7 @@ const personalSponsorInfo: PersonalSponsorInfo = {
       <div class="sponsor-buttons">
         <VFLinkButton
           class="sponsor-button"
-          :href="withBase(`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}jobboard`)"
+          :href="pathWithLocale('/jobboard')"
           background-color="vue-green/200"
           color="white"
         >
diff --git a/apps/web/app/components/ticket/NamecardSection.vue b/apps/web/app/components/ticket/NamecardSection.vue
index cda2eca4..caef6137 100644
--- a/apps/web/app/components/ticket/NamecardSection.vue
+++ b/apps/web/app/components/ticket/NamecardSection.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { endedApplyNormal, endedCreateNamecard, ticketUrl } from '~/utils/constants'
-import { useWithBase } from '#imports'
+import { useWithBase, usePathWithLocale } from '#imports'
 
 const { locale: currentLocale } = useLocaleCurrent()
 const basePath = useWithBase()
+const pathWithLocale = usePathWithLocale()
 </script>
 
 <template>
@@ -35,7 +36,7 @@ const basePath = useWithBase()
       <div class="buttons-wrapper">
         <VFLinkButton
           class="action-button"
-          :href="basePath(`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}namecard/`)"
+          :href="pathWithLocale('/namecard')"
           background-color="vue-green/200"
           color="white"
         >
diff --git a/apps/web/app/composables/usePathWithLocale.ts b/apps/web/app/composables/usePathWithLocale.ts
new file mode 100644
index 00000000..2e464c25
--- /dev/null
+++ b/apps/web/app/composables/usePathWithLocale.ts
@@ -0,0 +1,14 @@
+import { useRuntimeConfig } from '#app'
+import { useLocaleCurrent } from '#imports'
+
+export function usePathWithLocale() {
+  const baseUrl = useRuntimeConfig().app.baseURL
+  const currentLocale = useLocaleCurrent().locale
+
+  function pathWithLocale(path: string) {
+    const localePath = `${currentLocale.value === 'ja' ? path : `/${currentLocale.value}/${path}`}`
+    return (baseUrl + localePath).replace(/\/\//g, '/')
+  }
+
+  return pathWithLocale
+}
\ No newline at end of file
diff --git a/apps/web/app/error.vue b/apps/web/app/error.vue
index 2e3f54ca..021a7e42 100644
--- a/apps/web/app/error.vue
+++ b/apps/web/app/error.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHead, useWithBase } from '#imports'
+import { useHead, usePathWithLocale } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
 import { conferenceTitle } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
@@ -13,7 +13,7 @@ const props = defineProps<ErrorProps>()
 
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
-const withBase = useWithBase()
+const pathWithLocale = usePathWithLocale()
 
 useHead({
   // eslint-disable-next-line no-unused-vars
@@ -50,7 +50,7 @@ useHead({
         background-color="white"
         color="vue-blue"
         target=""
-        :href="withBase('/')"
+        :href="pathWithLocale('/')"
       >
         {{ $t('back_to_top') }}
       </VFLinkButton>
diff --git a/apps/web/app/pages/code-of-conduct.vue b/apps/web/app/pages/code-of-conduct.vue
index d5bd82b6..1f028fff 100644
--- a/apps/web/app/pages/code-of-conduct.vue
+++ b/apps/web/app/pages/code-of-conduct.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useHead, useWithBase } from '#imports'
+import { useHead, usePathWithLocale } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
-import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { conferenceTitle, linkUrl, ogCoCDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 
@@ -24,10 +23,9 @@ useHead({
   ],
 })
 
-const { path: localePath } = useLocaleCurrent()
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
-const withBase = useWithBase()
+const pathWithLocale = usePathWithLocale()
 </script>
 
 <template>
@@ -59,7 +57,7 @@ const withBase = useWithBase()
         background-color="white"
         color="vue-blue"
         target=""
-        :href="withBase(`${localePath}/`)"
+        :href="pathWithLocale('/')"
       >
         {{ $t('back_to_top') }}
       </VFLinkButton>
diff --git a/apps/web/app/pages/tokusho.vue b/apps/web/app/pages/tokusho.vue
index a090ac82..fc22f548 100644
--- a/apps/web/app/pages/tokusho.vue
+++ b/apps/web/app/pages/tokusho.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useHead, useWithBase } from '#imports'
+import { useHead, usePathWithLocale } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
-import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { conferenceTitle, linkUrl, ogTokushoDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 
@@ -24,10 +23,9 @@ useHead({
   ],
 })
 
-const { path: localePath } = useLocaleCurrent()
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
-const withBase = useWithBase()
+const pathWithLocale = usePathWithLocale()
 </script>
 
 <template>
@@ -59,7 +57,7 @@ const withBase = useWithBase()
         background-color="white"
         color="vue-blue"
         target=""
-        :href="withBase(`${localePath}/`)"
+        :href="pathWithLocale('/')"
       >
         {{ $t('back_to_top') }}
       </VFLinkButton>

From 5806ae18e20e6b91a569b817962be56eaad491c6 Mon Sep 17 00:00:00 2001
From: genj11 <kanno@stanfoot.com>
Date: Tue, 1 Apr 2025 21:22:20 +0900
Subject: [PATCH 2/4] fix: remove duplicated local

---
 apps/web/app/components/FooterPageSection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/app/components/FooterPageSection.vue b/apps/web/app/components/FooterPageSection.vue
index fffb9737..72b322fb 100644
--- a/apps/web/app/components/FooterPageSection.vue
+++ b/apps/web/app/components/FooterPageSection.vue
@@ -94,7 +94,7 @@ const vueFesLinkList: LinkList[] = [
       <div class="footer-link">
         <ul class="footer-list">
           <li v-for="(link, index) in internalLinkList" :key="index">
-            <VFTextLink :href="`${localePath}${link.href}`" color="white">
+            <VFTextLink :href="`${link.href}`" color="white">
               {{ t(link.text) }}
             </VFTextLink>
           </li>

From 3946e47577c54b351fa1eb385b8e9e1608678429 Mon Sep 17 00:00:00 2001
From: genj11 <kanno@stanfoot.com>
Date: Tue, 1 Apr 2025 21:30:24 +0900
Subject: [PATCH 3/4] fix: add basePath & locale on back-link

---
 apps/web/app/pages/events.vue              | 22 +++++----
 apps/web/app/pages/jobboard.vue            | 11 +++--
 apps/web/app/pages/privacy.vue             | 10 ++---
 apps/web/app/pages/sessions/[id]/index.vue | 52 +++++++++++++++++-----
 apps/web/app/pages/sharemap.vue            | 39 +++++++++-------
 apps/web/app/pages/sponsors/[id]/index.vue | 50 +++++++++++++++------
 6 files changed, 124 insertions(+), 60 deletions(-)

diff --git a/apps/web/app/pages/events.vue b/apps/web/app/pages/events.vue
index 5e65e8b5..21174fe5 100644
--- a/apps/web/app/pages/events.vue
+++ b/apps/web/app/pages/events.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useFetch, useHead } from '#imports'
-import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+import { useFetch, useHead, usePathWithLocale } from '#imports'
 import type { RelatedEventInfo } from '@vuejs-jp/model'
 import { conferenceTitle, linkUrl, ogRelatedEventDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
@@ -13,10 +12,15 @@ if (error.value) {
 }
 const { eventsInfo } = data.value as RelatedEvents
 
-const { path: localePath } = useLocaleCurrent()
+const pathWithLocale = usePathWithLocale()
 
 const isClose = (startedAt: string) =>
-  new Date() > new Date(new Date(startedAt).getFullYear(), new Date(startedAt).getMonth(), new Date(startedAt).getDate())
+  new Date() >
+  new Date(
+    new Date(startedAt).getFullYear(),
+    new Date(startedAt).getMonth(),
+    new Date(startedAt).getDate(),
+  )
 
 useHead({
   titleTemplate: (titleChunk) => `関連イベント | ${conferenceTitle}`,
@@ -46,7 +50,9 @@ useHead({
           :src="event.bannerUrl"
           :alt="event.title"
           :register-url="event.registerUrl"
-          :register-action-text="isClose(event.startedAt) ? $t('related_events.close') : $t('related_events.register')"
+          :register-action-text="
+            isClose(event.startedAt) ? $t('related_events.close') : $t('related_events.register')
+          "
           :disabled="isClose(event.startedAt)"
         >
           <template #title>
@@ -64,7 +70,7 @@ useHead({
         background-color="white"
         color="vue-blue"
         target=""
-        :href="`${localePath}/`"
+        :href="pathWithLocale('/')"
       >
         {{ $t('back_to_top') }}
       </VFLinkButton>
@@ -89,7 +95,7 @@ useHead({
   }
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     display: block;
     bottom: 0;
@@ -117,7 +123,7 @@ useHead({
 
   @media (--tablet) {
     padding: 20px 0 60px;
-    max-width: 100%
+    max-width: 100%;
   }
 
   li {
diff --git a/apps/web/app/pages/jobboard.vue b/apps/web/app/pages/jobboard.vue
index 1ca08651..cc88066c 100644
--- a/apps/web/app/pages/jobboard.vue
+++ b/apps/web/app/pages/jobboard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useFetch, useHead } from '#imports'
-import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+import { useFetch, useHead, usePathWithLocale } from '#imports'
 import type { JobInfo } from '@vuejs-jp/model'
 import { conferenceTitle, linkUrl, ogJobboardDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
@@ -13,7 +12,7 @@ if (error.value) {
 }
 const { allJobs } = data.value as Jobs
 
-const { path: localePath } = useLocaleCurrent()
+const pathWithLocale = usePathWithLocale()
 
 useHead({
   titleTemplate: (titleChunk) => `ジョブボード | ${conferenceTitle}`,
@@ -50,7 +49,7 @@ useHead({
         background-color="white"
         color="vue-blue"
         target=""
-        :href="`${localePath}/`"
+        :href="pathWithLocale('/')"
       >
         {{ $t('back_to_top') }}
       </VFLinkButton>
@@ -75,7 +74,7 @@ useHead({
   }
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     display: block;
     bottom: 0;
@@ -103,7 +102,7 @@ useHead({
 
   @media (--tablet) {
     padding: 20px 0 60px;
-    max-width: 100%
+    max-width: 100%;
   }
 
   li {
diff --git a/apps/web/app/pages/privacy.vue b/apps/web/app/pages/privacy.vue
index 250caa05..57240021 100644
--- a/apps/web/app/pages/privacy.vue
+++ b/apps/web/app/pages/privacy.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { useHead, useI18n } from '#imports'
+import { useHead, useI18n, usePathWithLocale } from '#imports'
 import MarkDownText from '~/components/MarkDownText.vue'
-import { useColor, useTypography } from '@vuejs-jp/composable'
-import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+import { useColor } from '@vuejs-jp/composable'
 import { conferenceTitle, linkUrl, ogPrivacyDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 
 const { t } = useI18n()
-const { path: localePath } = useLocaleCurrent()
-const { fontWeight, fontSize } = useTypography()
+const pathWithLocale = usePathWithLocale()
 const { color } = useColor()
 
 useHead({
@@ -51,7 +49,7 @@ useHead({
         background-color="white"
         color="vue-blue"
         target=""
-        :href="`${localePath}/`"
+        :href="pathWithLocale('/')"
       >
         {{ t('back_to_top') }}
       </VFLinkButton>
diff --git a/apps/web/app/pages/sessions/[id]/index.vue b/apps/web/app/pages/sessions/[id]/index.vue
index d55e91a5..637974cd 100644
--- a/apps/web/app/pages/sessions/[id]/index.vue
+++ b/apps/web/app/pages/sessions/[id]/index.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { createError, useAsyncData, useHead, useRoute, useRuntimeConfig } from '#imports'
+import {
+  createError,
+  useAsyncData,
+  useHead,
+  useRoute,
+  useRuntimeConfig,
+  usePathWithLocale,
+} from '#imports'
 import type { Speaker } from '@vuejs-jp/model'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { useSupabase } from '~/composables/useSupabase'
@@ -28,6 +35,7 @@ if (!speakerData[0].detail_page_id) {
 const { range } = useRange()
 const { color, trackName } = useSession()
 const currentLocale = useLocaleCurrent().locale
+const pathWithLocale = usePathWithLocale()
 
 useHead({
   titleTemplate: (titleChunk) => `${speakerData[0].session_title_ja} | ${conferenceTitle}`,
@@ -53,16 +61,30 @@ useHead({
   <div class="session-detail">
     <div class="session-detail-body">
       <div class="detailbody-tags">
-        <VFTag :label="trackName(speakerData[0].session_place)" :background="color(speakerData[0].session_place)" />
-        <VFTag :label="range(speakerData[0].session_time_from, speakerData[0].session_time_duration)" background="vue-green/200" />
+        <VFTag
+          :label="trackName(speakerData[0].session_place)"
+          :background="color(speakerData[0].session_place)"
+        />
+        <VFTag
+          :label="range(speakerData[0].session_time_from, speakerData[0].session_time_duration)"
+          background="vue-green/200"
+        />
       </div>
 
       <VFTitle id="session-detail" class="detailbody-title">
-        {{ currentLocale === 'ja' ? (speakerData[0].session_title_ja ?? 'TBD') : (speakerData[0].session_title_en ?? 'TBD') }}
+        {{
+          currentLocale === 'ja'
+            ? speakerData[0].session_title_ja ?? 'TBD'
+            : speakerData[0].session_title_en ?? 'TBD'
+        }}
       </VFTitle>
 
       <div class="detailbody-explain">
-        {{ currentLocale === 'ja' ? (speakerData[0].session_description_ja ?? 'TBD') : (speakerData[0].session_description_en ?? 'TBD') }}
+        {{
+          currentLocale === 'ja'
+            ? speakerData[0].session_description_ja ?? 'TBD'
+            : speakerData[0].session_description_en ?? 'TBD'
+        }}
       </div>
 
       <div v-if="speakerData[0].session_doc_url" class="detailbody-archives">
@@ -73,7 +95,11 @@ useHead({
           color="vue-blue"
           class="detailbody-archive-slide"
         >
-          {{ currentLocale === 'ja' ? speakerData[0].session_doc_title_ja : speakerData[0].session_doc_title_en }}
+          {{
+            currentLocale === 'ja'
+              ? speakerData[0].session_doc_title_ja
+              : speakerData[0].session_doc_title_en
+          }}
         </VFTextLink>
       </div>
 
@@ -81,14 +107,18 @@ useHead({
         <VFSpeaker
           :image="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"
+          :division="
+            currentLocale === 'en' ? speakerData[0].position_en : speakerData[0].position_ja
+          "
           :name="currentLocale === 'en' ? speakerData[0].name_en : speakerData[0].name_ja"
           :github-id="speakerData[0].github_id"
           :x-id="speakerData[0].x_id"
           loading="eager"
         />
         <div class="person-info">
-          {{ currentLocale === 'ja' ? speakerData[0].description_ja : speakerData[0].description_en }}
+          {{
+            currentLocale === 'ja' ? speakerData[0].description_ja : speakerData[0].description_en
+          }}
         </div>
       </div>
 
@@ -98,7 +128,7 @@ useHead({
           background-color="white"
           color="vue-blue"
           target=""
-          :href="currentLocale === 'ja' ? '/' : `${currentLocale}/`"
+          :href="pathWithLocale('/')"
         >
           {{ $t('back_to_top') }}
         </VFLinkButton>
@@ -124,7 +154,7 @@ useHead({
   }
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     display: block;
     bottom: 0;
@@ -151,7 +181,7 @@ useHead({
 
   @media (--tablet) {
     padding: 20px 0 60px;
-    max-width: 100%
+    max-width: 100%;
   }
 
   .detailbody-title {
diff --git a/apps/web/app/pages/sharemap.vue b/apps/web/app/pages/sharemap.vue
index 35a4816a..c11c8077 100644
--- a/apps/web/app/pages/sharemap.vue
+++ b/apps/web/app/pages/sharemap.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
-import { useFetch, useHead } from '#imports'
-import type { PanelerInfo, SpeakerCategory, SpeakerInfo, SponsorCategory, SponsorInfo, StaffCategory, StaffInfo } from '@vuejs-jp/model'
-import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+import { useFetch, useHead, usePathWithLocale } from '#imports'
+import type {
+  PanelerInfo,
+  SpeakerCategory,
+  SpeakerInfo,
+  SponsorCategory,
+  SponsorInfo,
+  StaffCategory,
+  StaffInfo,
+} from '@vuejs-jp/model'
 import { conferenceTitle, linkUrl, ogSharemapDescription } from '~/utils/constants'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 
-type _SpeakerCategory = Extract<SpeakerCategory, 'sessionSpeakers' | 'lightningTalkSpeakers' | 'sponsorSessionSpeakers'>
+type _SpeakerCategory = Extract<
+  SpeakerCategory,
+  'sessionSpeakers' | 'lightningTalkSpeakers' | 'sponsorSessionSpeakers'
+>
 type _PanelerCategory = Extract<SpeakerCategory, 'panelEventPanelers'>
 type Speakers = Record<_SpeakerCategory, SpeakerInfo>
 type Panelers = Record<_PanelerCategory, PanelerInfo>
@@ -15,7 +25,8 @@ type Sponsors = Record<SponsorCategory, SponsorInfo>
 type Staffs = Record<StaffCategory, StaffInfo>
 
 const { data: speakers, error: error1 } = await useFetch('/api/speakers')
-const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = speakers.value as Speakers
+const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } =
+  speakers.value as Speakers
 const { panelEventPanelers } = speakers.value as Panelers
 if (error1.value) {
   console.error(error1.value)
@@ -47,7 +58,7 @@ if (error3.value) {
   console.error(error3.value)
 }
 
-const { path: localePath } = useLocaleCurrent()
+const pathWithLocale = usePathWithLocale()
 
 useHead({
   // eslint-disable-next-line no-unused-vars
@@ -84,10 +95,8 @@ useHead({
                 ...sponsorSessionSpeakers.list,
                 ...panelEventPanelers.list['nextgen-frontend-crosstalk'],
                 ...panelEventPanelers.list['welcome-vuejs-community'],
-              ]
-              .map((item) => [JSON.stringify(item), item])
-            )
-            .values()
+              ].map((item) => [JSON.stringify(item), item]),
+            ).values(),
           )"
           :key="speaker.id"
           :href="`/sessions/${speaker.detail_page_id}/share`"
@@ -118,10 +127,8 @@ useHead({
                 ...handsonSponsors.list,
                 ...mediaSponsors.list,
                 ...toolSponsors.list,
-              ]
-              .map((item) => [JSON.stringify(item), item])
-            )
-            .values()
+              ].map((item) => [JSON.stringify(item), item]),
+            ).values(),
           )"
           :key="sponsor.id"
           :href="`/sponsors/${sponsor.detail_page_id}/share`"
@@ -150,7 +157,7 @@ useHead({
         background-color="white"
         color="vue-blue"
         target=""
-        :href="`${localePath}/`"
+        :href="pathWithLocale('/')"
       >
         {{ $t('back_to_top') }}
       </VFLinkButton>
@@ -175,7 +182,7 @@ useHead({
   }
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     display: block;
     bottom: 0;
diff --git a/apps/web/app/pages/sponsors/[id]/index.vue b/apps/web/app/pages/sponsors/[id]/index.vue
index a4ead956..99d5d4cd 100644
--- a/apps/web/app/pages/sponsors/[id]/index.vue
+++ b/apps/web/app/pages/sponsors/[id]/index.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { createError, useAsyncData, useHead, useRoute, useRuntimeConfig } from '#imports'
+import {
+  createError,
+  useAsyncData,
+  useHead,
+  useRoute,
+  useRuntimeConfig,
+  usePathWithLocale,
+} from '#imports'
 import type { Job, Speaker, Sponsor } from '@vuejs-jp/model'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { useSupabase } from '~/composables/useSupabase'
@@ -38,6 +45,7 @@ const { data: jobs } = await useAsyncData('jobs', async () => {
 const jobData = jobs.value?.data as Job[]
 
 const currentLocale = useLocaleCurrent().locale
+const pathWithLocale = usePathWithLocale()
 const { color: updateColor } = useColor()
 const { color, borderColor, isMoreSilver } = useSponsor()
 
@@ -75,10 +83,14 @@ useHead({
         :style="
           isMoreSilver(sponsorData[0].tag)
             ? { gridTemplateColumns: 'auto 1fr' }
-            : { gridTemplateColumns: '1fr', justifyContent: 'center' }"
+            : { gridTemplateColumns: '1fr', justifyContent: 'center' }
+        "
       >
         <div class="detailhead-left">
-          <p class="detailhead-img" :style="{ border: `1px solid ${updateColor(borderColor(sponsorData[0].tag))}` }">
+          <p
+            class="detailhead-img"
+            :style="{ border: `1px solid ${updateColor(borderColor(sponsorData[0].tag))}` }"
+          >
             <img
               :src="`${sponsorData[0].image_url}`"
               :alt="sponsorData[0].name"
@@ -97,13 +109,17 @@ useHead({
           </a>
         </div>
         <div v-if="isMoreSilver(sponsorData[0].tag)" class="detailhead-right">
-          {{ currentLocale === 'ja' ? sponsorData[0].description_ja : sponsorData[0].description_en }}
+          {{
+            currentLocale === 'ja' ? sponsorData[0].description_ja : sponsorData[0].description_en
+          }}
         </div>
       </div>
 
       <div v-if="sponsorData[0].speaker_id?.length !== 0" class="detailbody-persons">
         <h3 class="sponsor-subtitle">
-          {{ `${sponsorData[0].name}の${speakerData[0].session_type === 'sponsor-session' ? 'スポンサーセッション' : 'スポンサーLT'}` }}
+          {{
+            `${sponsorData[0].name}の${speakerData[0].session_type === 'sponsor-session' ? 'スポンサーセッション' : 'スポンサーLT'}`
+          }}
         </h3>
         <div class="sponsor-session-info">
           <div class="avatar-info">
@@ -120,10 +136,18 @@ useHead({
           </div>
           <div class="person-info">
             <h4>
-              {{ currentLocale === 'ja' ? speakerData[0].session_title_ja : speakerData[0].session_title_en }}
+              {{
+                currentLocale === 'ja'
+                  ? speakerData[0].session_title_ja
+                  : speakerData[0].session_title_en
+              }}
             </h4>
             <p>
-              {{ currentLocale === 'ja' ? speakerData[0].session_description_ja : speakerData[0].session_description_en }}
+              {{
+                currentLocale === 'ja'
+                  ? speakerData[0].session_description_ja
+                  : speakerData[0].session_description_en
+              }}
             </p>
           </div>
         </div>
@@ -144,7 +168,7 @@ useHead({
           background-color="white"
           color="vue-blue"
           target=""
-          :href="currentLocale === 'ja' ? '/' : `${currentLocale}/`"
+          :href="pathWithLocale('/')"
         >
           {{ $t('back_to_top') }}
         </VFLinkButton>
@@ -170,7 +194,7 @@ useHead({
   }
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     display: block;
     bottom: 0;
@@ -198,7 +222,7 @@ useHead({
 
   @media (--tablet) {
     padding: 20px 0 60px;
-    max-width: 100%
+    max-width: 100%;
   }
 
   .detailhead-tags {
@@ -211,7 +235,7 @@ useHead({
 
   .detailhead-body {
     display: flex;
-    color: #292C33;
+    color: #292c33;
     gap: calc(var(--unit) * 5);
     padding: calc(var(--unit) * 2.5) 0 calc(var(--unit) * 5);
   }
@@ -282,7 +306,7 @@ useHead({
     text-decoration: underline;
     margin-top: calc(var(--unit) * 2);
     &:hover {
-      transition: .2s;
+      transition: 0.2s;
     }
   }
 
@@ -364,7 +388,7 @@ useHead({
   .detailbody-jobboard ::v-deep(a) {
     width: 460px;
 
-    @media(--mobile) {
+    @media (--mobile) {
       width: 100%;
     }
   }

From a2ca9057650579eda76bcb303613675c6c979e9f Mon Sep 17 00:00:00 2001
From: genj11 <kanno@stanfoot.com>
Date: Tue, 1 Apr 2025 21:39:53 +0900
Subject: [PATCH 4/4] refactor: internalLinkList with pathWithLocale

---
 apps/web/app/components/FooterPageSection.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/components/FooterPageSection.vue b/apps/web/app/components/FooterPageSection.vue
index 72b322fb..e4833a4a 100644
--- a/apps/web/app/components/FooterPageSection.vue
+++ b/apps/web/app/components/FooterPageSection.vue
@@ -39,19 +39,19 @@ const snsLinkList: LinkList[] = [
 ]
 const internalLinkList: LinkList[] = [
   {
-    href: pathWithLocale('/events'),
+    href: '/events',
     text: 'related_events.title',
   },
   {
-    href: pathWithLocale('/privacy'),
+    href: '/privacy',
     text: 'privacy.title',
   },
   {
-    href: pathWithLocale('/code-of-conduct'),
+    href: '/code-of-conduct',
     text: 'code_of_conduct.title',
   },
   {
-    href: pathWithLocale('/tokusho'),
+    href: '/tokusho',
     text: 'tokusho.title',
   },
 ]
@@ -94,7 +94,7 @@ const vueFesLinkList: LinkList[] = [
       <div class="footer-link">
         <ul class="footer-list">
           <li v-for="(link, index) in internalLinkList" :key="index">
-            <VFTextLink :href="`${link.href}`" color="white">
+            <VFTextLink :href="pathWithLocale(`${link.href}`)" color="white">
               {{ t(link.text) }}
             </VFTextLink>
           </li>