Update @nuxtjs/i18n to edge version

Signed-off-by: Olga Bulat <obulat@gmail.com>
WordPress · Jan 25, 2024 · 7b4f880 · 7b4f880
1 parent 6d8fe71
commit 7b4f880
Show file tree

Hide file tree

Showing 23 changed files with 351 additions and 541 deletions.
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
@@ -4,7 +4,7 @@ import { isProd } from "./src/utils/node-env"
 import locales from "./src/locales/scripts/valid-locales.json"
 import { meta as commonMeta } from "./src/constants/meta"
 
-import type { LocaleObject } from "vue-i18n-routing"
+import type { LocaleObject } from "@nuxtjs/i18n"
 
 const favicons = [
   // SVG favicon

diff --git a/frontend/package.json b/frontend/package.json
@@ -63,7 +63,6 @@
     "@floating-ui/dom": "^1.5.3",
     "@intlify/core-base": "^9.8.0",
     "@intlify/message-compiler": "^9.8.0",
-    "@nuxtjs/i18n": "^8.0.0",
     "@nuxtjs/plausible": "^0.2.4",
     "@nuxtjs/sitemap": "^5.0.2",
     "@nuxtjs/tailwindcss": "^6.10.3",
@@ -88,6 +87,7 @@
   },
   "devDependencies": {
     "@nuxt/test-utils": "^3.9.0",
+    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge@8.0.0-28432155.c9bdcd7",
     "@playwright/test": "1.40.1",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.0.1",

diff --git a/frontend/src/app.vue b/frontend/src/app.vue
@@ -1,18 +1,27 @@
 <template>
   <div>
-    <div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
-      <VSkipToContentButton />
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
-      <VGlobalAudioSection />
-    </div>
-    <div id="modal"></div>
+    <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir" />
+    <Body>
+      <div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
+        <VSkipToContentButton />
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+        <VGlobalAudioSection />
+      </div>
+      <div id="modal"></div>
+    </Body>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, useRoute, useCookie } from "#imports"
+import {
+  computed,
+  onMounted,
+  useRoute,
+  useCookie,
+  useLocaleHead,
+} from "#imports"
 
 import { useUiStore } from "~/stores/ui"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
@@ -22,6 +31,11 @@ import type { OpenverseCookieState } from "~/types/cookies"
 
 import VSkipToContentButton from "~/components/VSkipToContentButton.vue"
 
+const head = useLocaleHead({
+  addDirAttribute: true,
+  identifierAttribute: "id",
+})
+
 /**
  * Lifecycle hooks in async setup should be called before the first await.
  */

diff --git a/frontend/src/components/VBanner/VBanners.vue b/frontend/src/components/VBanner/VBanners.vue
@@ -16,63 +16,50 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineAsyncComponent } from "#imports"
+<script setup lang="ts">
+import { defineAsyncComponent, useNuxtApp } from "#imports"
 
-import { computed, defineComponent } from "vue"
+import { computed } from "vue"
 
 import { useUiStore } from "~/stores/ui"
 import usePages from "~/composables/use-pages"
 
 import type { TranslationBannerId, BannerId } from "~/types/banners"
 
-export default defineComponent({
-  name: "VBanners",
-  components: {
-    VTranslationStatusBanner: defineAsyncComponent(
-      () => import("~/components/VBanner/VTranslationStatusBanner.vue")
-    ),
-    VAnalyticsNotice: defineAsyncComponent(
-      () => import("~/components/VBanner/VAnalyticsNotice.vue")
-    ),
-  },
-  setup() {
-    const uiStore = useUiStore()
+const VTranslationStatusBanner = defineAsyncComponent(
+  () => import("~/components/VBanner/VTranslationStatusBanner.vue")
+)
+const VAnalyticsNotice = defineAsyncComponent(
+  () => import("~/components/VBanner/VAnalyticsNotice.vue")
+)
+const uiStore = useUiStore()
+const {
+  $i18n: { localeProperties },
+} = useNuxtApp()
 
-    const shouldShowTranslationBanner = computed(
-      () => uiStore.shouldShowTranslationBanner
-    )
-    const shouldShowAnalyticsBanner = computed(
-      () => uiStore.shouldShowAnalyticsBanner
-    )
+const shouldShowTranslationBanner = computed(() =>
+  uiStore.shouldShowTranslationBanner(localeProperties.value)
+)
+const shouldShowAnalyticsBanner = computed(
+  () => uiStore.shouldShowAnalyticsBanner
+)
 
-    const translationBannerId = computed<TranslationBannerId>(
-      () => uiStore.translationBannerId
-    )
+const translationBannerId = computed<TranslationBannerId>(
+  () => `translation-${localeProperties.value.code}`
+)
 
-    const { current: currentPage } = usePages()
-    const variant = computed(() =>
-      ["", "index"].includes(currentPage.value) ? "dark" : "regular"
-    )
+const { current: currentPage } = usePages()
+const variant = computed(() =>
+  ["", "index"].includes(currentPage.value) ? "dark" : "regular"
+)
 
-    const dismissBanner = (bannerKey: BannerId) => {
-      uiStore.dismissBanner(bannerKey)
-    }
+const dismissBanner = (bannerKey: BannerId) => {
+  uiStore.dismissBanner(bannerKey)
+}
 
-    const showBanners = computed(() =>
-      [shouldShowTranslationBanner, shouldShowAnalyticsBanner].some(
-        (item) => item.value
-      )
-    )
-
-    return {
-      translationBannerId,
-      shouldShowTranslationBanner,
-      shouldShowAnalyticsBanner,
-      showBanners,
-      dismissBanner,
-      variant,
-    }
-  },
-})
+const showBanners = computed(() =>
+  [shouldShowTranslationBanner, shouldShowAnalyticsBanner].some(
+    (item) => item.value
+  )
+)
 </script>
diff --git a/frontend/src/components/VHeader/VHeaderInternal.vue b/frontend/src/components/VHeader/VHeaderInternal.vue
@@ -103,7 +103,7 @@ import VPopoverContent from "~/components/VPopover/VPopoverContent.vue"
 import VWordPressLink from "~/components/VHeader/VWordPressLink.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
-const emit = defineEmits(["close"])
+const emit = defineEmits(["close", "open"])
 const menuButtonRef = ref<{ $el: HTMLElement } | null>(null)
 const nodeRef = ref<HTMLElement | null>(null)
 const modalContentRef = ref<{

diff --git a/frontend/src/components/VHeader/VPageLinks.vue b/frontend/src/components/VHeader/VPageLinks.vue
@@ -7,7 +7,7 @@
   >
     <VItem
       v-for="(page, i) of allPages"
-      :key="i"
+      :key="page.id"
       as="VLink"
       :is-first="i === 0"
       :selected="currentPage === page.id"
@@ -50,78 +50,47 @@
   </ul>
 </template>
 
-<script lang="ts">
-import { type PropType, defineComponent, computed } from "vue"
+<script setup lang="ts">
+import { computed } from "vue"
 
 import usePages from "~/composables/use-pages"
 
-import { defineEvent } from "~/types/emits"
-
 import VItemGroup from "~/components/VItemGroup/VItemGroup.vue"
 import VItem from "~/components/VItemGroup/VItem.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VPageLinks",
-  components: {
-    VIcon,
-    VItem,
-    VItemGroup,
-    VLink,
-  },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * In `dark` mode (in the modal), the links are white and the background is dark charcoal.
      * In `light` mode, the links are dark charcoal and the background is transparent.
      *
      * @default 'light'
      */
-    mode: {
-      type: String as PropType<"light" | "dark">,
-      default: "light",
-    },
+    mode?: "light" | "dark"
     /**
      * Pass the tailwind classes to style the nav links.
      *
      * @default ''
      */
-    navLinkClasses: {
-      type: String,
-      default: "",
-    },
-    variant: {
-      type: String as PropType<"links" | "itemgroup">,
-      default: "links",
-    },
-    isInModal: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    close: defineEvent(),
-  },
-  setup(props, { emit }) {
-    const { all: allPages, current: currentPage } = usePages()
+    navLinkClasses?: string
+    variant?: "links" | "itemgroup"
+    isInModal?: boolean
+  }>(),
+  { mode: "light", navLinkClasses: "", variant: "links", isInModal: false }
+)
 
-    // The modal isn't closed if we click on the current page link,
-    // so we need to close it manually.
-    const onClick = () => emit("close")
+const emit = defineEmits(["open", "close"])
 
-    const isLinkExternal = (item: (typeof allPages)[number]) =>
-      !item.link.startsWith("/")
+const { all: allPages, current: currentPage } = usePages()
 
-    const externalIconSize = computed(() => (props.isInModal ? 6 : 4))
+// The modal isn't closed if we click on the current page link,
+// so we need to close it manually.
+const onClick = () => emit("close")
 
-    return {
-      allPages,
-      currentPage,
-      onClick,
-      isLinkExternal,
+const isLinkExternal = (item: (typeof allPages)[number]) =>
+  !item.link.startsWith("/")
 
-      externalIconSize,
-    }
-  },
-})
+const externalIconSize = computed(() => (props.isInModal ? 6 : 4))
 </script>
diff --git a/frontend/src/components/VHeader/VWordPressLink.vue b/frontend/src/components/VHeader/VWordPressLink.vue
@@ -17,20 +17,14 @@
     </i18n-t>
   </VLink>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import VLink from "~/components/VLink.vue"
 import VSvg from "~/components/VSvg/VSvg.vue"
 
-import type { PropType } from "vue"
-
-export default {
-  name: "VWordPressLink",
-  components: { VLink, VSvg },
-  props: {
-    mode: {
-      type: String as PropType<"dark" | "light">,
-      default: "light",
-    },
-  },
-}
+withDefaults(
+  defineProps<{
+    mode?: "dark" | "light"
+  }>(),
+  { mode: "light" }
+)
 </script>
diff --git a/frontend/src/components/VLanguageSelect/VLanguageSelect.vue b/frontend/src/components/VLanguageSelect/VLanguageSelect.vue
@@ -22,7 +22,7 @@ import VSelectField, {
   type Choice,
 } from "~/components/VSelectField/VSelectField.vue"
 
-import type { LocaleObject } from "vue-i18n-routing"
+import type { LocaleObject } from "@nuxtjs/i18n"
 
 /**
  * Presents a way for the users to change the app locale and use a translated