Skip to content

Commit 984224f

Browse files
genj11genj11
authored
Merge pull request #393 from vuejs-jp/fix/add-baseurl
fix: add usePathWithLocal composables
2 parents abc119e + a2ca905 commit 984224f

File tree

13 files changed

+160
-85
lines changed

13 files changed

+160
-85
lines changed

‎apps/web/app/components/FooterPageSection.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { useI18n } from '#i18n'
33
import { useColor, useTypography } from '@vuejs-jp/composable'
44
import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
5-
import { useWithBase } from '#imports'
5+
import { usePathWithLocale } from '#imports'
66
//#region types
77
type LinkList = {
88
href: string
@@ -15,7 +15,7 @@ const { t } = useI18n()
1515
const { path: localePath } = useLocaleCurrent()
1616
const { color } = useColor()
1717
const { fontSize } = useTypography()
18-
const withBase = useWithBase()
18+
const pathWithLocale = usePathWithLocale()
1919
//#endregion
2020
2121
//#region private variables
@@ -39,19 +39,19 @@ const snsLinkList: LinkList[] = [
3939
]
4040
const internalLinkList: LinkList[] = [
4141
{
42-
href: withBase('/events'),
42+
href: '/events',
4343
text: 'related_events.title',
4444
},
4545
{
46-
href: withBase('/privacy'),
46+
href: '/privacy',
4747
text: 'privacy.title',
4848
},
4949
{
50-
href: withBase('/code-of-conduct'),
50+
href: '/code-of-conduct',
5151
text: 'code_of_conduct.title',
5252
},
5353
{
54-
href: withBase('/tokusho'),
54+
href: '/tokusho',
5555
text: 'tokusho.title',
5656
},
5757
]
@@ -94,7 +94,7 @@ const vueFesLinkList: LinkList[] = [
9494
<div class="footer-link">
9595
<ul class="footer-list">
9696
<li v-for="(link, index) in internalLinkList" :key="index">
97-
<VFTextLink :href="`${localePath}${link.href}`" color="white">
97+
<VFTextLink :href="pathWithLocale(`${link.href}`)" color="white">
9898
{{ t(link.text) }}
9999
</VFTextLink>
100100
</li>

‎apps/web/app/components/SponsorPageSection.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { useI18n } from '#i18n'
3-
import { useLocaleCurrent, useRuntimeConfig, useWithBase } from '#imports'
3+
import { useLocaleCurrent, useRuntimeConfig, usePathWithLocale } from '#imports'
44
import { useColor, useTypography } from '@vuejs-jp/composable'
55
import { useTranslation } from '@/composables/useTranslation'
66
import SponsorList from './sponsor/SponsorList.vue'
@@ -22,7 +22,7 @@ const { translate } = useTranslation()
2222
2323
const currentLocale = useLocaleCurrent().locale
2424
25-
const withBase = useWithBase()
25+
const pathWithLocale = usePathWithLocale()
2626
2727
// const periodStart = {
2828
// prefixYear: t('prefix_year'),
@@ -186,7 +186,7 @@ const personalSponsorInfo: PersonalSponsorInfo = {
186186
<div class="sponsor-buttons">
187187
<VFLinkButton
188188
class="sponsor-button"
189-
:href="withBase(`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}jobboard`)"
189+
:href="pathWithLocale('/jobboard')"
190190
background-color="vue-green/200"
191191
color="white"
192192
>

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script setup lang="ts">
22
import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
33
import { endedApplyNormal, endedCreateNamecard, ticketUrl } from '~/utils/constants'
4-
import { useWithBase } from '#imports'
4+
import { useWithBase, usePathWithLocale } from '#imports'
55
66
const { locale: currentLocale } = useLocaleCurrent()
77
const basePath = useWithBase()
8+
const pathWithLocale = usePathWithLocale()
89
</script>
910

1011
<template>
@@ -35,7 +36,7 @@ const basePath = useWithBase()
3536
<div class="buttons-wrapper">
3637
<VFLinkButton
3738
class="action-button"
38-
:href="basePath(`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}namecard/`)"
39+
:href="pathWithLocale('/namecard')"
3940
background-color="vue-green/200"
4041
color="white"
4142
>

‎apps/web/app/composables/usePathWithLocale.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { useRuntimeConfig } from '#app'
2+
import { useLocaleCurrent } from '#imports'
3+
4+
export function usePathWithLocale() {
5+
const baseUrl = useRuntimeConfig().app.baseURL
6+
const currentLocale = useLocaleCurrent().locale
7+
8+
function pathWithLocale(path: string) {
9+
const localePath = `${currentLocale.value === 'ja' ? path : `/${currentLocale.value}/${path}`}`
10+
return (baseUrl + localePath).replace(/\/\//g, '/')
11+
}
12+
13+
return pathWithLocale
14+
}

‎apps/web/app/error.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { useHead, useWithBase } from '#imports'
2+
import { useHead, usePathWithLocale } from '#imports'
33
import { useColor, useTypography } from '@vuejs-jp/composable'
44
import { conferenceTitle } from '~/utils/constants'
55
import { generalOg, twitterOg } from '~/utils/og.constants'
@@ -13,7 +13,7 @@ const props = defineProps<ErrorProps>()
1313
1414
const { fontWeight, fontSize } = useTypography()
1515
const { color } = useColor()
16-
const withBase = useWithBase()
16+
const pathWithLocale = usePathWithLocale()
1717
1818
useHead({
1919
// eslint-disable-next-line no-unused-vars
@@ -50,7 +50,7 @@ useHead({
5050
background-color="white"
5151
color="vue-blue"
5252
target=""
53-
:href="withBase('/')"
53+
:href="pathWithLocale('/')"
5454
>
5555
{{ $t('back_to_top') }}
5656
</VFLinkButton>

‎apps/web/app/pages/code-of-conduct.vue

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
2-
import { useHead, useWithBase } from '#imports'
2+
import { useHead, usePathWithLocale } from '#imports'
33
import { useColor, useTypography } from '@vuejs-jp/composable'
4-
import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
54
import { conferenceTitle, linkUrl, ogCoCDescription } from '~/utils/constants'
65
import { generalOg, twitterOg } from '~/utils/og.constants'
76
@@ -24,10 +23,9 @@ useHead({
2423
],
2524
})
2625
27-
const { path: localePath } = useLocaleCurrent()
2826
const { fontWeight, fontSize } = useTypography()
2927
const { color } = useColor()
30-
const withBase = useWithBase()
28+
const pathWithLocale = usePathWithLocale()
3129
</script>
3230

3331
<template>
@@ -59,7 +57,7 @@ const withBase = useWithBase()
5957
background-color="white"
6058
color="vue-blue"
6159
target=""
62-
:href="withBase(`${localePath}/`)"
60+
:href="pathWithLocale('/')"
6361
>
6462
{{ $t('back_to_top') }}
6563
</VFLinkButton>

‎apps/web/app/pages/events.vue

+14-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
2-
import { useFetch, useHead } from '#imports'
3-
import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
2+
import { useFetch, useHead, usePathWithLocale } from '#imports'
43
import type { RelatedEventInfo } from '@vuejs-jp/model'
54
import { conferenceTitle, linkUrl, ogRelatedEventDescription } from '~/utils/constants'
65
import { generalOg, twitterOg } from '~/utils/og.constants'
@@ -13,10 +12,15 @@ if (error.value) {
1312
}
1413
const { eventsInfo } = data.value as RelatedEvents
1514
16-
const { path: localePath } = useLocaleCurrent()
15+
const pathWithLocale = usePathWithLocale()
1716
1817
const isClose = (startedAt: string) =>
19-
new Date() > new Date(new Date(startedAt).getFullYear(), new Date(startedAt).getMonth(), new Date(startedAt).getDate())
18+
new Date() >
19+
new Date(
20+
new Date(startedAt).getFullYear(),
21+
new Date(startedAt).getMonth(),
22+
new Date(startedAt).getDate(),
23+
)
2024
2125
useHead({
2226
titleTemplate: (titleChunk) => `関連イベント | ${conferenceTitle}`,
@@ -46,7 +50,9 @@ useHead({
4650
:src="event.bannerUrl"
4751
:alt="event.title"
4852
:register-url="event.registerUrl"
49-
:register-action-text="isClose(event.startedAt) ? $t('related_events.close') : $t('related_events.register')"
53+
:register-action-text="
54+
isClose(event.startedAt) ? $t('related_events.close') : $t('related_events.register')
55+
"
5056
:disabled="isClose(event.startedAt)"
5157
>
5258
<template #title>
@@ -64,7 +70,7 @@ useHead({
6470
background-color="white"
6571
color="vue-blue"
6672
target=""
67-
:href="`${localePath}/`"
73+
:href="pathWithLocale('/')"
6874
>
6975
{{ $t('back_to_top') }}
7076
</VFLinkButton>
@@ -89,7 +95,7 @@ useHead({
8995
}
9096
9197
&:before {
92-
content: "";
98+
content: '';
9399
position: absolute;
94100
display: block;
95101
bottom: 0;
@@ -117,7 +123,7 @@ useHead({
117123
118124
@media (--tablet) {
119125
padding: 20px 0 60px;
120-
max-width: 100%
126+
max-width: 100%;
121127
}
122128
123129
li {

‎apps/web/app/pages/jobboard.vue

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
2-
import { useFetch, useHead } from '#imports'
3-
import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
2+
import { useFetch, useHead, usePathWithLocale } from '#imports'
43
import type { JobInfo } from '@vuejs-jp/model'
54
import { conferenceTitle, linkUrl, ogJobboardDescription } from '~/utils/constants'
65
import { generalOg, twitterOg } from '~/utils/og.constants'
@@ -13,7 +12,7 @@ if (error.value) {
1312
}
1413
const { allJobs } = data.value as Jobs
1514
16-
const { path: localePath } = useLocaleCurrent()
15+
const pathWithLocale = usePathWithLocale()
1716
1817
useHead({
1918
titleTemplate: (titleChunk) => `ジョブボード | ${conferenceTitle}`,
@@ -50,7 +49,7 @@ useHead({
5049
background-color="white"
5150
color="vue-blue"
5251
target=""
53-
:href="`${localePath}/`"
52+
:href="pathWithLocale('/')"
5453
>
5554
{{ $t('back_to_top') }}
5655
</VFLinkButton>
@@ -75,7 +74,7 @@ useHead({
7574
}
7675
7776
&:before {
78-
content: "";
77+
content: '';
7978
position: absolute;
8079
display: block;
8180
bottom: 0;
@@ -103,7 +102,7 @@ useHead({
103102
104103
@media (--tablet) {
105104
padding: 20px 0 60px;
106-
max-width: 100%
105+
max-width: 100%;
107106
}
108107
109108
li {

‎apps/web/app/pages/privacy.vue

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<script setup lang="ts">
2-
import { useHead, useI18n } from '#imports'
2+
import { useHead, useI18n, usePathWithLocale } from '#imports'
33
import MarkDownText from '~/components/MarkDownText.vue'
4-
import { useColor, useTypography } from '@vuejs-jp/composable'
5-
import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
4+
import { useColor } from '@vuejs-jp/composable'
65
import { conferenceTitle, linkUrl, ogPrivacyDescription } from '~/utils/constants'
76
import { generalOg, twitterOg } from '~/utils/og.constants'
87
98
const { t } = useI18n()
10-
const { path: localePath } = useLocaleCurrent()
11-
const { fontWeight, fontSize } = useTypography()
9+
const pathWithLocale = usePathWithLocale()
1210
const { color } = useColor()
1311
1412
useHead({
@@ -51,7 +49,7 @@ useHead({
5149
background-color="white"
5250
color="vue-blue"
5351
target=""
54-
:href="`${localePath}/`"
52+
:href="pathWithLocale('/')"
5553
>
5654
{{ t('back_to_top') }}
5755
</VFLinkButton>

0 commit comments

Comments
 (0)