diff --git a/nuxt.config.js b/nuxt.config.js index e4116cb8bd..a0fe37340f 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -174,20 +174,19 @@ export default { ], lazy: true, langDir: 'locales', - strategy: 'no_prefix', defaultLocale: 'en', /** - * This section is critical for the current, iframed production environment - * {@link https://i18n.nuxtjs.org/options-reference/#detectbrowserlanguage} + * `detectBrowserLanguage` must be false to prevent nuxt/i18n from automatically + * setting the locale based on headers or the client-side `navigator` object. + * + * Such detection is handled at the parent level in WP.org. + * + * More info about the Nuxt i18n: + * + * - [detectBrowserLanguage](https://i18n.nuxtjs.org/options-reference/#detectbrowserlanguage) + * - [Browser language detection info](https://i18n.nuxtjs.org/browser-language-detection) * */ - detectBrowserLanguage: { - useCookie: true, - cookieKey: 'i18n_redirected', - alwaysRedirect: true, - cookieCrossOrigin: true, - cookieSecure: true, - }, - baseUrl: 'http://localhost:8443', + detectBrowserLanguage: false, vueI18n: '~/plugins/vue-i18n.js', }, /** diff --git a/src/components/VAllResultsGrid/VAllResultsGrid.vue b/src/components/VAllResultsGrid/VAllResultsGrid.vue index 287c5aea9a..dee5eb9c62 100644 --- a/src/components/VAllResultsGrid/VAllResultsGrid.vue +++ b/src/components/VAllResultsGrid/VAllResultsGrid.vue @@ -7,8 +7,8 @@ diff --git a/src/composables/use-match-routes.js b/src/composables/use-match-routes.js index b004e9cfd6..53ccab1792 100644 --- a/src/composables/use-match-routes.js +++ b/src/composables/use-match-routes.js @@ -1,17 +1,25 @@ +import { useContext } from '@nuxtjs/composition-api' import { ref, useRoute, useRouter } from '@nuxtjs/composition-api' /** * Reactive property that returns true only on the matching routes. * Note that routes are matched by name, not the url path. * + * Routes are also localized before comparison, so 'search' becomes + * 'search__en', for example. + * * @returns {{matches: import('@nuxtjs/composition-api').Ref}} */ export const useMatchRoute = (routes = []) => { + const { app } = useContext() const route = useRoute() const router = useRouter() - const matches = ref(routes.includes(route.value.name)) + const localizedRoutes = routes.map( + (route) => app.localeRoute({ name: route }).name + ) + const matches = ref(localizedRoutes.includes(route.value.name)) router.beforeEach((to, from, next) => { - matches.value = routes.includes(to.name) + matches.value = localizedRoutes.includes(to.name) next() }) return { matches } diff --git a/src/pages/audio/_id.vue b/src/pages/audio/_id.vue index d713ac32a4..5f86afbbdd 100644 --- a/src/pages/audio/_id.vue +++ b/src/pages/audio/_id.vue @@ -75,7 +75,10 @@ const AudioDetailPage = { }, beforeRouteEnter(to, from, nextPage) { nextPage((_this) => { - if (from.path === '/search/' || from.path === '/search/audio') { + if ( + from.name === _this.localeRoute({ path: '/search/' }).name || + from.name === _this.localeRoute({ path: '/search/audio' }).name + ) { _this.shouldShowBreadcrumb = true _this.breadCrumbURL = from.fullPath } diff --git a/src/pages/image/_id.vue b/src/pages/image/_id.vue index f03870cccd..bc018c40c1 100644 --- a/src/pages/image/_id.vue +++ b/src/pages/image/_id.vue @@ -61,7 +61,10 @@ const PhotoDetailPage = { }, beforeRouteEnter(to, from, nextPage) { nextPage((_this) => { - if (from.path === '/search/' || from.path === '/search/image') { + if ( + from.name === _this.localeRoute({ path: '/search/' }).name || + from.name === _this.localeRoute({ path: '/search/image' }).name + ) { _this.shouldShowBreadcrumb = true _this.breadCrumbURL = from.fullPath } diff --git a/src/pages/index.vue b/src/pages/index.vue index cba4795201..ffe2c62023 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -157,10 +157,12 @@ const HomePage = { images: setItem.images.map((imageItem) => ({ ...imageItem, src: require(`~/assets/homepage_images/${setItem.prefix}-${imageItem.index}.jpg`), - url: router.resolve({ - name: 'image-id', - params: { id: imageItem.identifier }, - }).href, + url: router.resolve( + app.localePath({ + name: 'image-id', + params: { id: imageItem.identifier }, + }) + ).href, })), }))