fix: add usePathWithLocal composables

Author: genj11

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',
   },
 ]

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"
         >

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"
         >

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
+}

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>

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>

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>