Merge pull request #393 from vuejs-jp/fix/add-baseurl

genj11 · web-flow · commit 984224fa5127 · 2025-04-01T21:40:07.000+09:00
fix: add usePathWithLocal composables
diff --git 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: '/events',
     text: 'related_events.title',
   },
   {
-    href: withBase('/privacy'),
+    href: '/privacy',
     text: 'privacy.title',
   },
   {
-    href: withBase('/code-of-conduct'),
+    href: '/code-of-conduct',
     text: 'code_of_conduct.title',
   },
   {
-    href: withBase('/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="`${localePath}${link.href}`" color="white">
+            <VFTextLink :href="pathWithLocale(`${link.href}`)" color="white">
               {{ t(link.text) }}
             </VFTextLink>
           </li>
diff --git 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
@@ -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
@@ -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
+}
diff --git 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
@@ -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/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
@@ -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
@@ -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
diff --git a/apps/web/app/pages/sharemap.vue b/apps/web/app/pages/sharemap.vue
diff --git a/apps/web/app/pages/sponsors/[id]/index.vue b/apps/web/app/pages/sponsors/[id]/index.vue
diff --git a/apps/web/app/pages/tokusho.vue b/apps/web/app/pages/tokusho.vue
