Merge branch 'dev' into website-update

Author: pettinarip

.env.example

@@ -29,7 +29,7 @@ IS_PREVIEW_DEPLOY=false
 # Build pages only for the specified langs. Leave it empty to build all the langs
 # e.g. `en,fr` will only build English and French pages
 # Note: always include `en` as it is the default lang of the site
-BUILD_LOCALES=
+NEXT_PUBLIC_BUILD_LOCALES=
 
 # If resource constraints are being hit during builds, change LIMIT_CPUS to a
 # fixed number of CPUs (e.g. 2) to limit the demand during build time

.eslintrc.json

@@ -63,17 +63,6 @@
         "varsIgnorePattern": "^_$"
       }
     ],
-    "unused-imports/no-unused-imports-ts": "warn",
-    "no-restricted-imports": [
-      "warn",
-      {
-        "paths": [
-          {
-            "name": "react-i18next",
-            "message": "Please use next-i18next instead of react-i18next."
-          }
-        ]
-      }
-    ]
+    "unused-imports/no-unused-imports-ts": "warn"
   }
 }

.github/labeler.yml

@@ -16,7 +16,6 @@
 "config ⚙️":
   - i18n.config.json
   - next.config.js
-  - next-i18next.config,js
   - next-sitemap.config.js
   - tsconfig.json
   - .nvmrc

.storybook/main.ts

@@ -28,9 +28,9 @@ const config: StorybookConfig = {
       },
     },
     "@storybook/addon-interactions",
-    "storybook-react-i18next",
     "@storybook/addon-themes",
     "@chromatic-com/storybook",
+    "storybook-next-intl",
   ],
   staticDirs: ["../public"],
   framework: {

.storybook/modes.ts

@@ -1,6 +1,6 @@
 import pickBy from "lodash/pickBy"
 
-import { baseLocales } from "./i18next"
+import { baseLocales } from "./next-intl"
 import { breakpointSet } from "./preview"
 
 export const viewportModes = breakpointSet.reduce<{

.storybook/i18next.ts renamed to .storybook/next-intl.ts

@@ -1,7 +1,3 @@
-import i18n, { Resource } from "i18next"
-// eslint-disable-next-line no-restricted-imports
-import { initReactI18next } from "react-i18next"
-
 export const baseLocales = {
   en: { title: "English", left: "En" },
   zh: { title: "中国人", left: "Zh" },
@@ -32,7 +28,7 @@ const supportedLngs = Object.keys(baseLocales)
 /**
  * Taking the ns array and generating those files for each language available.
  */
-const resources: Resource = ns.reduce((acc, n) => {
+const messagesByLocale = ns.reduce((acc, n) => {
   supportedLngs.forEach((lng) => {
     if (!acc[lng]) acc[lng] = {}
 
@@ -57,16 +53,18 @@ const resources: Resource = ns.reduce((acc, n) => {
 
   return acc
 }, {})
-console.log("🚀 ~ constresources:Resource=ns.reduce ~ resources:", resources)
+console.log(
+  "🚀 ~ constresources:Resource=ns.reduce ~ resources:",
+  messagesByLocale
+)
 
-i18n.use(initReactI18next).init({
-  debug: true,
-  fallbackLng: "en",
-  interpolation: { escapeValue: false },
-  react: { useSuspense: false },
-  supportedLngs,
-  resources,
-  defaultNS: "common",
-})
+const nextIntl = {
+  defaultLocale: "en",
+  messagesByLocale,
+  getMessageFallback: ({ key }: { key: string }) => {
+    const keyOnly = key.split(".").pop()
+    return keyOnly || key
+  },
+}
 
-export default i18n
+export default nextIntl

.storybook/preview.tsx

@@ -5,7 +5,7 @@ import type { Preview } from "@storybook/react"
 import ThemeProvider from "@/components/ThemeProvider"
 import { TooltipProvider } from "@/components/ui/tooltip"
 
-import i18n, { baseLocales } from "./i18next"
+import nextIntl, { baseLocales } from "./next-intl"
 import { withNextThemes } from "./withNextThemes"
 
 import "../src/styles/global.css"
@@ -47,7 +47,7 @@ const preview: Preview = {
     ),
   ],
   parameters: {
-    i18n,
+    nextIntl,
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/utils.ts

@@ -95,9 +95,9 @@ yarn dev
 - Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:3000` from your browser
 - Pro Tip:
   - Explore scripts within `package.json` for more build options
-  - Get **faster** production builds by building only one language. E.g. in your `.env` file, set `BUILD_LOCALES=en` to build the content only in English
-  - To build the site in other selected languages too, you need to set them in `BUILD_LOCALES`, eg: `BUILD_LOCALES=en,es` if you also want to build only English (required) and Spanish.
-  - To build all languages, simply comment this line out with a hash mark, eg: `# BUILD_LOCALES=`
+  - Get **faster** production builds by building only one language. E.g. in your `.env` file, set `NEXT_PUBLIC_BUILD_LOCALES=en` to build the content only in English
+  - To build the site in other selected languages too, you need to set them in `NEXT_PUBLIC_BUILD_LOCALES`, eg: `NEXT_PUBLIC_BUILD_LOCALES=en,es` if you also want to build only English (required) and Spanish.
+  - To build all languages, simply comment this line out with a hash mark, eg: `# NEXT_PUBLIC_BUILD_LOCALES=`
 
 By default the script will build all the languages (complete list in `i18n.config.json`).
 
@@ -168,7 +168,7 @@ Learn more about how we review pull requests [here](docs/review-process.md).
 
 - To help with verification we request GitHub contributors connect their GitHub account with their Discord account (Discord > Settings > Connections > GitHub). Crowdin contributors will be verified directly through Crowdin by our team.
 
-If you haven't contributed yet and would like to earn a POAP/OATs to show your loyalty to the Ethereum space, head over to the [issues](https://github.com/ethereum/ethereum-org-website/issues/) tab to get started! If you would like to contribute to translations check out our [Translation Program](https://ethereum.org/en/contributing/translation-program/). 
+If you haven't contributed yet and would like to earn a POAP/OATs to show your loyalty to the Ethereum space, head over to the [issues](https://github.com/ethereum/ethereum-org-website/issues/) tab to get started! If you would like to contribute to translations check out our [Translation Program](https://ethereum.org/en/contributing/translation-program/).
 
 <hr style="margin-top: 3em; margin-bottom: 3em;">
 

README.md

@@ -52,7 +52,7 @@ Markdown will be translated as whole pages of content, so no specific action is
 
   - _tl;dr Each individual JSON entry should be a complete phrase by itself_
 
-- This is done using the `Translation` component. However there is an alternative method for regular JS: using the `t` function from `next-i18next`
+- This is done using the `Translation` component. However there is an alternative method for regular JS: using the `t` function from `@/hooks/useTranslation`
 
   - **Method one: `<Translation />` component (preferred if only needed in JSX)**
 
@@ -66,7 +66,7 @@ Markdown will be translated as whole pages of content, so no specific action is
   - **Method two: `t()`**
 
     ```tsx
-    import { useTranslation } from "next-i18next"
+    import { useTranslation } from "@/hooks/useTranslation"
 
     // Utilize anywhere in JS using
     const { t } = useTranslation()