feat(next.config.js): set up locales

vtexdocs · Apr 13, 2023 · f80c881 · f80c881
1 parent 37e2a90
commit f80c881
Show file tree

Hide file tree

Showing 37 changed files with 668 additions and 362 deletions.
diff --git a/next.config.js b/next.config.js
@@ -35,7 +35,8 @@ const nextConfig = {
     return config
   },
   env: {
-    navigationJsonUrl: 'https://developers.vtex.com/navigation.json',
+    navigationJsonUrl:
+      'https://leafy-mooncake-7c2e5e.netlify.app/navigation.json',
     contentOrg: '',
     contentRepo: '',
     contentBranch: '',
@@ -44,7 +45,7 @@ const nextConfig = {
     return []
   },
   i18n: {
-    locales: ['en'],
+    locales: ['en', 'pt', 'es'],
     defaultLocale: 'en',
   },
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devportal",
-  "version": "1.9.8",
+  "version": "1.9.6",
   "private": true,
   "engines": {
     "npm": "please-use-yarn",
@@ -31,7 +31,8 @@
     "algoliasearch": "^4.14.2",
     "chalk": "^5.2.0",
     "copy-text-to-clipboard": "^3.0.1",
-    "googleapis": "^39.2.0",
+    "google-auth-library": "^8.7.0",
+    "googleapis": "^117.0.0",
     "highlight.js": "^11.6.0",
     "highlightjs-curl": "^1.3.0",
     "http-proxy": "^1.18.1",
@@ -52,6 +53,7 @@
     "react-dom": "^18.2.0",
     "react-instantsearch-dom": "^6.37.0",
     "react-intersection-observer": "^9.2.2",
+    "react-intl": "^6.3.2",
     "react-markdown": "^8.0.3",
     "react-toastify": "^9.1.1",
     "rehype-highlight": "^5.0.2",

diff --git a/src/components/contributors/index.tsx b/src/components/contributors/index.tsx
@@ -2,8 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Box, Flex, Grid, IconCaret, Text } from '@vtex/brand-ui'
 
 import Tooltip from 'components/tooltip'
-
-import { getMessages } from 'utils/get-messages'
+import { useIntl } from 'react-intl'
 
 import styles from './styles'
 import { ContributorsType } from 'utils/getFileContributors'
@@ -14,7 +13,7 @@ interface Props {
 }
 
 const Contributors = ({ contributors }: Props) => {
-  const messages = getMessages()
+  const intl = useIntl()
 
   const [showAll, setShowAll] = useState(false)
   const [pageWidth, setPageWidth] = useState(0)
@@ -46,7 +45,9 @@ const Contributors = ({ contributors }: Props) => {
     <Flex sx={styles.container}>
       <Flex sx={styles.titleContainer}>
         <Text sx={styles.title}>
-          {messages['api_guide_documentation_page_contributors.title']}
+          {intl.formatMessage({
+            id: 'api_guide_documentation_page_contributors.title',
+          })}
         </Text>
         <Text sx={styles.count}>{contributors.length}</Text>
       </Flex>
@@ -87,7 +88,9 @@ const Contributors = ({ contributors }: Props) => {
         >
           <Text>
             {showAll
-              ? messages['api_guide_documentation_page_contributors.toggleText']
+              ? intl.formatMessage({
+                  id: 'api_guide_documentation_page_contributors.toggleText',
+                })
               : `+ ${
                   contributors.length - minRows * photosPerRow
                 } contributors`}

diff --git a/src/components/documentation-section-card/index.tsx b/src/components/documentation-section-card/index.tsx
@@ -1,19 +1,19 @@
 import Link from 'next/link'
 import { Flex, Text } from '@vtex/brand-ui'
 
-import { getMessages } from 'utils/get-messages'
 import type { DocDataElement } from 'utils/typings/types'
 import Tooltip from 'components/tooltip'
 import styles from './styles'
 import { useEffect, useRef, useState } from 'react'
+import { useIntl } from 'react-intl'
 
 const DocumentationSectionCard = ({
   Icon,
   title,
   description,
   link,
 }: DocDataElement) => {
-  const messages = getMessages()
+  const intl = useIntl()
   const [tooltipState, setTooltipState] = useState(false)
   const [tooltipDescription, setTooltipDescription] = useState(description)
   const descriptionRef = useRef<HTMLElement>()
@@ -57,11 +57,9 @@ const DocumentationSectionCard = ({
             sx={styles.quickStartedContainer}
           >
             <Text className="learnMoreText" sx={styles.learnMoreText}>
-              {
-                messages[
-                  'landing_page_documentation_documentation_card.learnMoreText'
-                ]
-              }
+              {intl.formatMessage({
+                id: 'landing_page_documentation_documentation_card.learnMoreText',
+              })}
             </Text>
           </Flex>
         </Flex>

diff --git a/src/components/documentation-section/index.tsx b/src/components/documentation-section/index.tsx
@@ -2,22 +2,25 @@ import { Box, Flex, Text } from '@vtex/brand-ui'
 
 import DocumentationSectionCard from '../documentation-section-card'
 
-import { messages } from 'utils/constants'
-import { documentationData as cards } from 'utils/constants'
+import { documentationData } from 'utils/constants'
 
 import styles from './styles'
+import { useIntl } from 'react-intl'
 
 const DocumentationSection = () => {
+  const intl = useIntl()
   return (
     <Box sx={styles.sectionContainer}>
       <Text sx={styles.title}>
-        {messages['landing_page_documentation.title']}
+        {intl.formatMessage({
+          id: 'landing_page_documentation.title',
+        })}
       </Text>
       <Flex
         sx={styles.cardsContainer}
         data-cy="documentation-section-card-list"
       >
-        {cards.map((card) => (
+        {documentationData(intl).map((card) => (
           <DocumentationSectionCard key={card.title} {...card} />
         ))}
       </Flex>

diff --git a/src/components/dropdown-menu/index.tsx b/src/components/dropdown-menu/index.tsx
@@ -2,18 +2,20 @@ import { Box } from '@vtex/brand-ui'
 
 import DocumentationCard from 'components/documentation-card'
 import { documentationData, updatesData } from 'utils/constants'
+import { useIntl } from 'react-intl'
 
 import styles from './styles'
 
 const DropdownMenu = () => {
+  const intl = useIntl()
   return (
     <Box sx={styles.outerContainer}>
       <Box sx={styles.innerContainer} data-cy="dropdown-menu">
         <Box
           sx={styles.documentationContainer}
           data-cy="dropdown-menu-first-section"
         >
-          {documentationData.map((card) => (
+          {documentationData(intl).map((card) => (
             <DocumentationCard
               containerType="dropdown"
               key={card.title}
@@ -25,7 +27,7 @@ const DropdownMenu = () => {
           sx={styles.updatesContainer}
           data-cy="dropdown-menu-second-section"
         >
-          {updatesData.map((card) => (
+          {updatesData(intl).map((card) => (
             <DocumentationCard
               containerType="dropdown"
               key={card.title}

diff --git a/src/components/education-section/index.tsx b/src/components/education-section/index.tsx
@@ -5,40 +5,57 @@ import GithubIcon from 'components/icons/github-icon'
 import HelpCenterIcon from 'components/icons/helpcenter-icon'
 import CommunityIcon from 'components/icons/community-icon'
 import { getGithubURL, getHelpCenterURL, getCommunityURL } from 'utils/get-url'
-import { getMessages } from 'utils/get-messages'
 
 import styles from './styles'
-
-const messages = getMessages()
-
-const educationChannels = [
-  {
-    title: messages['landing_page_education_github.title'],
-    description: messages['landing_page_education_github.description'],
-    textLink: messages['landing_page_education_github.textLink'],
-    link: getGithubURL(),
-    icon: GithubIcon,
-  },
-  {
-    title: messages['landing_page_education_help_center.title'],
-    description: messages['landing_page_education_help_center.description'],
-    textLink: messages['landing_page_education_help_center.textLink'],
-    link: getHelpCenterURL(),
-    icon: HelpCenterIcon,
-  },
-  {
-    title: messages['landing_page_education_community.title'],
-    description: messages['landing_page_education_community.description'],
-    textLink: messages['landing_page_education_community.textLink'],
-    link: getCommunityURL(),
-    icon: CommunityIcon,
-  },
-]
+import { useIntl } from 'react-intl'
 
 const EducationSection = () => {
+  const intl = useIntl()
+
+  const educationChannels = [
+    {
+      title: intl.formatMessage({ id: 'landing_page_education_github.title' }),
+      description: intl.formatMessage({
+        id: 'landing_page_education_github.description',
+      }),
+      textLink: intl.formatMessage({
+        id: 'landing_page_education_github.textLink',
+      }),
+      link: getGithubURL(),
+      icon: GithubIcon,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'landing_page_education_developer_portal.title',
+      }),
+      description: intl.formatMessage({
+        id: 'landing_page_education_developer_portal.description',
+      }),
+      textLink: intl.formatMessage({
+        id: 'landing_page_education_developer_portal.textLink',
+      }),
+      link: getHelpCenterURL(),
+      icon: HelpCenterIcon,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'landing_page_education_community.title',
+      }),
+      description: intl.formatMessage({
+        id: 'landing_page_education_community.description',
+      }),
+      textLink: intl.formatMessage({
+        id: 'landing_page_education_community.textLink',
+      }),
+      link: getCommunityURL(),
+      icon: CommunityIcon,
+    },
+  ]
   return (
     <Box sx={styles.container}>
-      <Text sx={styles.title}>{messages['landing_page_education.title']}</Text>
+      <Text sx={styles.title}>
+        {intl.formatMessage({ id: 'landing_page_education.title' })}
+      </Text>
       <Flex sx={styles.channelsContainer}>
         {educationChannels.map((channel) => (
           <EducationChannel

diff --git a/src/components/feedback-modal/index.tsx b/src/components/feedback-modal/index.tsx
@@ -7,8 +7,8 @@ import {
   useRef,
   useState,
 } from 'react'
-import { getMessages } from 'utils/get-messages'
 import useClickOutside from 'utils/hooks/useClickOutside'
+import { useIntl } from 'react-intl'
 
 import { arrowDirectionStyle, modalPositionStyle } from './functions'
 import styles from './styles'
@@ -17,8 +17,6 @@ export interface ModalProps {
   liked?: boolean
 }
 
-const messages = getMessages()
-
 const FeedBackModalArrow = (props: IconProps) => {
   return (
     <Icon
@@ -54,6 +52,7 @@ const FeedBackModal = ({
   const cardRef = useRef<HTMLDivElement>()
   const { body, documentElement } = document
   const [comment, setComment] = useState('')
+  const intl = useIntl()
 
   const closeModal = () => {
     const feedback = modalState?.liked
@@ -91,7 +90,11 @@ const FeedBackModal = ({
           }
           data-cy="feedback-modal"
         >
-          <Text sx={styles.title}>{messages['feedback_modal.title']}</Text>
+          <Text sx={styles.title}>
+            {intl.formatMessage({
+              id: 'feedback_modal.title',
+            })}
+          </Text>
           <Textarea
             id="feedback-modal-input"
             sx={styles.textarea}
@@ -105,7 +108,9 @@ const FeedBackModal = ({
             sx={styles.button}
             variant="secondary"
           >
-            {messages['feedback_modal.button']}
+            {intl.formatMessage({
+              id: 'feedback_modal.button',
+            })}
           </Button>
         </Box>
         <FeedBackModalArrow

diff --git a/src/components/feedback-section/index.tsx b/src/components/feedback-section/index.tsx
@@ -3,14 +3,12 @@ import EditIcon from 'components/icons/edit-icon'
 import LikeIcon from 'components/icons/like-icon'
 import LikeSelectedIcon from 'components/icons/like-selected-icon'
 import { useEffect, useRef, useState } from 'react'
-import { getMessages } from 'utils/get-messages'
 import { setButtonStyle } from './functions'
 import FeedbackModal, { ModalProps } from 'components/feedback-modal'
+import { useIntl, FormattedMessage } from 'react-intl'
 
 import styles from './styles'
 
-const messages = getMessages()
-
 interface DocPath {
   slug?: string
   docPath?: string
@@ -24,6 +22,7 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
   })
   const likeButton = useRef<HTMLElement>()
   const dislikeButton = useRef<HTMLElement>()
+  const intl = useIntl()
 
   useEffect(() => {
     changeModalState({ modalOpen: false })
@@ -53,14 +52,14 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
     })
   }
 
-  const urlToEdit = `https://github.com/vtexdocs/dev-portal-content/edit/main/${docPath}`
+  const urlToEdit = `https://github.com/vtexdocs/help-center-content/edit/main/${docPath}`
 
   return (
     <Flex sx={styles.container} data-cy="feedback-section">
       <Text sx={styles.question}>
         {feedback !== undefined
-          ? messages['feedback_section.response']
-          : messages['feedback_section.question']}
+          ? intl.formatMessage({ id: 'feedback_section.response' })
+          : intl.formatMessage({ id: 'feedback_section.question' })}
       </Text>
       <Flex sx={styles.likeContainer}>
         <Flex
@@ -74,7 +73,9 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
           ) : (
             <LikeSelectedIcon size={24} sx={styles.likeIcon} />
           )}
-          <Text>{messages['feedback_section.positive']}</Text>
+          <Text>
+            <FormattedMessage id="feedback_section.positive" />
+          </Text>
         </Flex>
         <Flex
           ref={dislikeButton}
@@ -86,7 +87,9 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
           ) : (
             <LikeSelectedIcon size={24} sx={styles.dislikeIcon} />
           )}
-          <Text>{messages['feedback_section.negative']}</Text>
+          <Text>
+            <FormattedMessage id="feedback_section.negative" />
+          </Text>
         </Flex>
       </Flex>
       {suggestEdits && (
@@ -97,7 +100,9 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
           sx={styles.editContainer}
         >
           <EditIcon size={24} sx={styles.editIcon} />
-          <Text>{messages['feedback_section.edit']}</Text>
+          <Text>
+            <FormattedMessage id="feedback_section.edit" />
+          </Text>
         </Link>
       )}
       {modalState.modalOpen ? (