From be58015ad9456e73b76955afc05168e5b3918197 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Fri, 8 Jul 2022 10:35:20 -0300 Subject: [PATCH] use official gatsby i18n theme --- docs/best-practices.md | 2 +- gatsby-browser.tsx | 49 ++- gatsby-config.ts | 22 +- gatsby-node.ts | 81 ++-- gatsby-ssr.tsx | 4 +- i18n/config.json | 370 ++++++++++++++++++ package.json | 10 +- src/components/BeaconChainActions.tsx | 2 +- src/components/Breadcrumbs.tsx | 2 +- src/components/ButtonDropdown.js | 2 +- src/components/EthExchanges.js | 2 +- src/components/FeedbackWidget.tsx | 2 +- src/components/FileContributors.tsx | 2 +- src/components/Footer.tsx | 2 +- src/components/Layer2/Layer2Onboard.tsx | 2 +- src/components/Layer2ProductCard.tsx | 2 +- src/components/Layout.tsx | 122 +++--- src/components/Link.tsx | 2 +- src/components/Logo.tsx | 2 +- src/components/MergeInfographic.tsx | 2 +- src/components/Nav/Dropdown.tsx | 2 +- src/components/Nav/Menu.tsx | 2 +- src/components/Nav/Mobile.tsx | 2 +- src/components/Nav/index.tsx | 2 +- src/components/PageMetadata.tsx | 2 +- src/components/Roadmap.js | 2 +- src/components/Search/Input.js | 2 +- src/components/Search/index.js | 2 +- src/components/ShardChainsList.js | 2 +- src/components/SideNav.js | 2 +- src/components/StablecoinAccordion.js | 2 +- src/components/StablecoinBoxGrid.js | 2 +- .../Staking/StakingCommunityCallout.tsx | 2 +- .../Staking/StakingLaunchpadWidget.tsx | 2 +- src/components/Staking/StakingStatsBox.tsx | 2 +- src/components/StatsBoxGrid.js | 2 +- src/components/Translation.tsx | 4 +- src/components/Trilemma.tsx | 2 +- src/components/TutorialMetadata.tsx | 2 +- src/pages-conditional/dapps.tsx | 2 +- src/pages-conditional/eth.tsx | 2 +- src/pages-conditional/wallets.tsx | 2 +- src/pages-conditional/what-is-ethereum.tsx | 2 +- src/pages/assets.js | 4 +- src/pages/bug-bounty.js | 4 +- src/pages/community.js | 4 +- .../translation-program/acknowledgements.tsx | 2 +- .../translation-program/contributors.tsx | 2 +- src/pages/developers/index.js | 4 +- src/pages/developers/learning-tools.js | 4 +- src/pages/developers/local-environment.js | 4 +- src/pages/developers/tutorials.js | 4 +- src/pages/get-eth.js | 4 +- src/pages/index.tsx | 2 +- src/pages/languages.js | 2 +- src/pages/layer-2.js | 4 +- src/pages/learn/index.tsx | 2 +- src/pages/run-a-node.js | 4 +- src/pages/stablecoins.js | 4 +- src/pages/staking/deposit-contract.tsx | 2 +- src/pages/staking/index.tsx | 2 +- src/pages/upgrades/get-involved/index.js | 4 +- src/pages/upgrades/index.js | 4 +- src/pages/upgrades/vision.js | 4 +- src/pages/wallets/find-wallet.tsx | 2 +- src/templates/static.tsx | 2 +- src/templates/upgrade.tsx | 2 +- src/templates/use-cases.tsx | 2 +- src/types.ts | 10 +- src/utils/languages.ts | 3 +- src/utils/translations.ts | 2 +- yarn.lock | 132 ++++++- 72 files changed, 739 insertions(+), 218 deletions(-) create mode 100644 i18n/config.json diff --git a/docs/best-practices.md b/docs/best-practices.md index e5e397b491d..e7a847923b8 100644 --- a/docs/best-practices.md +++ b/docs/best-practices.md @@ -66,7 +66,7 @@ Markdown will be translated as whole pages of content, so no specific action is - **Method two: `translateMessageId()`** ```tsx - import { useIntl } from "gatsby-plugin-intl" + import { useIntl } from "react-intl" import { translateMessageId } from "src/utils/translations" // Utilize anywhere in JS using diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx index 904ebb3e16f..0fa57e8c785 100644 --- a/gatsby-browser.tsx +++ b/gatsby-browser.tsx @@ -5,7 +5,8 @@ */ import React from "react" -import Layout from "./src/components/Layout" +import browserLang from "browser-lang" +import { withPrefix, GatsbyBrowser } from "gatsby" import Prism from "prism-react-renderer/prism" ;(typeof global !== "undefined" ? global : window).Prism = Prism @@ -15,12 +16,52 @@ import "@formatjs/intl-locale/polyfill" import "@formatjs/intl-numberformat/polyfill" import "@formatjs/intl-numberformat/locale-data/en" +import Layout from "./src/components/Layout" +import { + Lang, + supportedLanguages, + defaultLanguage, +} from "./src/utils/languages" +import { Context } from "./src/types" + // Default languages included: // https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js require("prismjs/components/prism-solidity") // Prevents from unmounting on page transitions // https://www.gatsbyjs.com/docs/layout-components/#how-to-prevent-layout-components-from-unmounting -export const wrapPageElement = ({ element, props }) => ( - {element} -) +export const wrapPageElement: GatsbyBrowser< + any, + Context +>["wrapPageElement"] = ({ element, props }) => { + const { location, pageContext } = props + const { pathname, search } = location + const { originalPath } = pageContext + + const [, pathLocale] = pathname.split("/") + + // client side redirect on paths that don't have a locale in them. Most useful + // on dev env where we don't have server redirects + if (!supportedLanguages.includes(pathLocale as Lang)) { + let detected = + window.localStorage.getItem("eth-org-language") || + browserLang({ + languages: supportedLanguages, + fallback: defaultLanguage, + }) + + if (!supportedLanguages.includes(detected as Lang)) { + detected = defaultLanguage + } + + const queryParams = search || "" + const newUrl = withPrefix(`/${detected}${originalPath}${queryParams}`) + window.localStorage.setItem("eth-org-language", detected) + window.location.replace(newUrl) + + // can't return null here, must return an element + return
+ } + + return {element} +} diff --git a/gatsby-config.ts b/gatsby-config.ts index 438655a2dd0..24e8914d672 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -4,6 +4,7 @@ import path from "path" import type { GatsbyConfig } from "gatsby" import { + buildLangs, supportedLanguages, defaultLanguage, ignoreLanguages, @@ -37,17 +38,18 @@ const config: GatsbyConfig = { plugins: [ // i18n support { - resolve: `gatsby-plugin-intl`, + resolve: `gatsby-theme-i18n`, options: { - // language JSON resource path - path: path.resolve(`src/intl`), - // supported language - languages: supportedLanguages, - // language file path - defaultLanguage, - // redirect to `/${lang}/` when connecting to `/` - // based on user's browser language preference - redirect: true, + defaultLang: defaultLanguage, + prefixDefault: true, + locales: buildLangs.length ? buildLangs.join(" ") : null, + configPath: path.resolve(`./i18n/config.json`), + }, + }, + { + resolve: `gatsby-theme-i18n-react-intl`, + options: { + defaultLocale: `./src/intl/en.json`, }, }, // Web app manifest diff --git a/gatsby-node.ts b/gatsby-node.ts index e33a4485248..72ba9723a02 100644 --- a/gatsby-node.ts +++ b/gatsby-node.ts @@ -18,7 +18,6 @@ import { defaultLanguage, Lang, } from "./src/utils/languages" -import getMessages from "./src/utils/getMessages" import redirects from "./redirects.json" const exec = util.promisify(child_process.exec) @@ -153,9 +152,6 @@ export const onCreateNode: GatsbyNode<{ if (slug.includes("/translations/")) { slug = slug.replace("/translations", "") - const split = slug.split("/") - split.splice(1, 1) - isOutdated = await checkIsMdxOutdated(node.fileAbsolutePath) } else { slug = `/${defaultLanguage}${slug}` @@ -193,6 +189,7 @@ export const createPages: GatsbyNode["createPages"] = async ({ }) => { const { createPage, createRedirect } = actions + // server side redirects redirects.forEach((redirect) => { createRedirect({ ...redirect, @@ -271,27 +268,22 @@ export const createPages: GatsbyNode["createPages"] = async ({ const splitSlug = slug.split("/") splitSlug.splice(1, 1, lang) const langSlug = splitSlug.join("/") - createPage({ + createPage({ path: langSlug, component: path.resolve(`src/templates/${template}.tsx`), context: { + language: lang, slug: langSlug, ignoreTranslationBanner: isLegal, isLegal: isLegal, isOutdated: false, isContentEnglish: true, - relativePath: relativePath, // Use English path for template MDX query - // Create `intl` object so `gatsby-plugin-intl` will skip - // generating language variations for this page - intl: { - language: lang, - defaultLanguage, - languages: supportedLanguages, - messages: getMessages("./src/intl/", lang), - routed: true, - originalPath: slug.substr(3), - redirect: false, - }, + relativePath, // Use English path for template MDX query + // gatsby i18n theme context + locale: lang, + hrefLang: lang, + originalPath: langSlug.slice(3), + dateFormat: "MM/DD/YYYY", }, }) } @@ -305,18 +297,13 @@ export const createPages: GatsbyNode["createPages"] = async ({ language, slug, isOutdated: !!node.fields.isOutdated, - relativePath: relativePath, - // Create `intl` object so `gatsby-plugin-intl` will skip - // generating language variations for this page - intl: { - language, - defaultLanguage, - languages: supportedLanguages, - messages: getMessages("./src/intl/", language), - routed: true, - originalPath: slug.substr(3), - redirect: false, - }, + isDefaultLang: language === defaultLanguage, + relativePath, + // gatsby i18n theme context + locale: language, + hrefLang: language, + originalPath: slug.slice(3), + dateFormat: "MM/DD/YYYY", }, }) }) @@ -338,22 +325,22 @@ export const createPages: GatsbyNode["createPages"] = async ({ page, lang ) - createPage({ - path: `/${lang}/${page}/`, + const originalPath = `/${page}/` + const slug = `/${lang}${originalPath}` + + createPage({ + path: slug, component: path.resolve(`src/pages-conditional/${page}.tsx`), context: { - slug: `/${lang}/${page}/`, - intl: { - language: lang, - languages: supportedLanguages, - defaultLanguage, - messages: getMessages("./src/intl/", lang), - routed: true, - originalPath: `/${page}/`, - redirect: false, - }, + language: lang, + slug, isContentEnglish, isOutdated, + // gatsby i18n theme context + locale: lang, + hrefLang: lang, + originalPath, + dateFormat: "MM/DD/YYYY", }, }) } @@ -370,12 +357,20 @@ export const onCreatePage: GatsbyNode["onCreatePage"] = async ({ }) => { const { createPage, deletePage } = actions - const isTranslated = page.context.language !== defaultLanguage + // create routes without the lang prefix e.g. `/{path}` as our i18n plugin + // only creates `/{lang}/{path}` routes. This is useful on dev env to avoid + // getting a 404 since we don't have server side redirects + if (page.path.startsWith(`/${defaultLanguage}`)) { + const path = page.path.slice(3) + createPage({ ...page, path }) + } + + const isTranslated = page.context.locale !== defaultLanguage const hasNoContext = page.context.isOutdated === undefined if (isTranslated && hasNoContext) { const { isOutdated, isContentEnglish } = await checkIsPageOutdated( - page.context.intl.originalPath, + page.path, page.context.language ) deletePage(page) diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx index 7dbc3a3d757..7b94aef3c86 100644 --- a/gatsby-ssr.tsx +++ b/gatsby-ssr.tsx @@ -10,9 +10,11 @@ import type { GatsbySSR } from "gatsby" import Layout from "./src/components/Layout" +import { Context } from "./src/types" + // Prevents from unmounting on page transitions // https://www.gatsbyjs.com/docs/layout-components/#how-to-prevent-layout-components-from-unmounting -export const wrapPageElement: GatsbySSR["wrapPageElement"] = ({ +export const wrapPageElement: GatsbySSR["wrapPageElement"] = ({ element, props, }) => { diff --git a/i18n/config.json b/i18n/config.json new file mode 100644 index 00000000000..b55d8d80a6c --- /dev/null +++ b/i18n/config.json @@ -0,0 +1,370 @@ +[ + { + "code": "en", + "hrefLang": "en-US", + "name": "English", + "localName": "English", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ar", + "hrefLang": "ar", + "name": "العربية", + "localName": "العربية", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "az", + "hrefLang": "az", + "name": "Azərbaycan", + "localName": "Azərbaycan", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "bg", + "hrefLang": "bg", + "name": "български", + "localName": "български", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "bn", + "hrefLang": "bn", + "name": "বাংলা", + "localName": "বাংলা", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ca", + "hrefLang": "ca", + "name": "Català", + "localName": "Català", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "cs", + "hrefLang": "cs", + "name": "Čeština", + "localName": "Čeština", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "da", + "hrefLang": "da", + "name": "Dansk", + "localName": "Dansk", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "de", + "hrefLang": "de", + "name": "Deutsch", + "localName": "Deutsch", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "el", + "hrefLang": "el", + "name": "Ελληνικά", + "localName": "Ελληνικά", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "es", + "hrefLang": "es-ES", + "name": "Español", + "localName": "Español", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "fa", + "hrefLang": "fa", + "name": "فارسی", + "localName": "فارسی", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "fi", + "hrefLang": "fi", + "name": "Suomi", + "localName": "Suomi", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "fr", + "hrefLang": "fr", + "name": "Français", + "localName": "Français", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "gl", + "hrefLang": "gl", + "name": "Galego", + "localName": "Galego", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "hi", + "hrefLang": "hi", + "name": "हिन्दी", + "localName": "हिन्दी", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "hr", + "hrefLang": "hr", + "name": "Hrvatski", + "localName": "Hrvatski", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "hu", + "hrefLang": "hu", + "name": "Magyar", + "localName": "Magyar", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "id", + "hrefLang": "id", + "name": "Bahasa Indonesia", + "localName": "Bahasa Indonesia", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ig", + "hrefLang": "ig", + "name": "Ibo", + "localName": "Ibo", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "it", + "hrefLang": "it", + "name": "Italiano", + "localName": "Italiano", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ja", + "hrefLang": "ja", + "name": "日本語", + "localName": "日本語", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ka", + "hrefLang": "ka", + "name": "ქართული", + "localName": "ქართული", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ko", + "hrefLang": "ko", + "name": "한국어", + "localName": "한국어", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "lt", + "hrefLang": "lt", + "name": "Lietuvis", + "localName": "Lietuvis", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ml", + "hrefLang": "ml", + "name": "മലയാളം", + "localName": "മലയാളം", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "mr", + "hrefLang": "mr", + "name": "मराठी", + "localName": "मराठी", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ms", + "hrefLang": "ms", + "name": "Melayu", + "localName": "Melayu", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "nl", + "hrefLang": "nl", + "name": "Nederlands", + "localName": "Nederlands", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "nb", + "hrefLang": "nb", + "name": "Norsk", + "localName": "Norsk", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "pl", + "hrefLang": "pl", + "name": "Polski", + "localName": "Polski", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "pt", + "hrefLang": "pt", + "name": "Português", + "localName": "Português", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "pt-br", + "hrefLang": "pt-br", + "name": "Português", + "localName": "Português", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ro", + "hrefLang": "ro", + "name": "Română", + "localName": "Română", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "ru", + "hrefLang": "ru", + "name": "Pусский", + "localName": "Pусский", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "se", + "hrefLang": "se", + "name": "Svenska", + "localName": "Svenska", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "sk", + "hrefLang": "sk", + "name": "Slovenský", + "localName": "Slovenský", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "sl", + "hrefLang": "sl", + "name": "Slovenščina", + "localName": "Slovenščina", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "sr", + "hrefLang": "sr", + "name": "Српски", + "localName": "Српски", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "sw", + "hrefLang": "sw", + "name": "Kiswahili", + "localName": "Kiswahili", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "th", + "hrefLang": "th", + "name": "ภาษาไทย", + "localName": "ภาษาไทย", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "tr", + "hrefLang": "tr", + "name": "Türkçe", + "localName": "Türkçe", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "uk", + "hrefLang": "uk", + "name": "Українська", + "localName": "Українська", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "vi", + "hrefLang": "vi", + "name": "Tiếng Việt", + "localName": "Tiếng Việt", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "zh", + "hrefLang": "zh", + "name": "简体中文", + "localName": "简体中文", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + }, + { + "code": "zh-tw", + "hrefLang": "zh-tw", + "name": "繁體中文", + "localName": "繁體中文", + "langDir": "ltr", + "dateFormat": "MM/DD/YYYY" + } +] diff --git a/package.json b/package.json index 0acc9329cd0..ff535941cc9 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "algoliasearch": "^4.3.0", "axios": "^0.21.2", "babel-plugin-styled-components": "^1.10.7", + "browser-lang": "^0.1.0", "browserslist": "^4.21.0", "clipboard": "^2.0.6", "cross-fetch": "^3.1.5", @@ -43,6 +44,8 @@ "gatsby-remark-images": "^6.0.0", "gatsby-remark-reading-time": "^1.1.0", "gatsby-source-filesystem": "^4.0.0", + "gatsby-theme-i18n": "^3.0.0", + "gatsby-theme-i18n-react-intl": "^3.0.0", "gatsby-transformer-csv": "^4.0.0", "gatsby-transformer-gitinfo": "^1.1.0", "gatsby-transformer-json": "^4.11.0", @@ -62,6 +65,7 @@ "react-helmet": "^6.1.0", "react-icons": "^4.3.1", "react-instantsearch-dom": "^6.6.0", + "react-intl": "^6.0.4", "react-select": "^4.3.0", "recharts": "^2.1.9", "styled-components": "^5.1.1", @@ -70,6 +74,7 @@ }, "devDependencies": { "@netlify/functions": "^1.0.0", + "@types/browser-lang": "^0.1.0", "@types/luxon": "^2.3.2", "@types/mdx-js__react": "^1.5.5", "@types/node": "^17.0.23", @@ -86,10 +91,13 @@ "react-test-renderer": "^17.0.1", "typescript": "^4.6.3" }, + "resolutions": { + "@types/react": "^17.0.39" + }, "scripts": { "build": "gatsby build", "build:lambda": "netlify-lambda build src/lambda", - "build:10gb": "NODE_OPTIONS=--max-old-space-size=10240 gatsby build", + "build:10gb": "NODE_OPTIONS=--max-old-space-size=8192 gatsby build", "clean": "gatsby clean", "copy-contributors": "node src/scripts/copy-contributors.js", "format": "prettier --write \"**/*.{js,jsx,json,md}\"", diff --git a/src/components/BeaconChainActions.tsx b/src/components/BeaconChainActions.tsx index 58028ca4248..d7710ee4f21 100644 --- a/src/components/BeaconChainActions.tsx +++ b/src/components/BeaconChainActions.tsx @@ -2,7 +2,7 @@ import React from "react" import { useStaticQuery, graphql } from "gatsby" import { getImage } from "gatsby-plugin-image" import styled from "styled-components" -import { useIntl } from "gatsby-plugin-intl" +import { useIntl } from "react-intl" import { translateMessageId } from "../utils/translations" diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index f193cb7f6e9..d99c92603ca 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -1,6 +1,6 @@ import React from "react" import styled from "styled-components" -import { useIntl } from "gatsby-plugin-intl" +import { useIntl } from "react-intl" import Link from "./Link" import { isLang, supportedLanguages } from "../utils/languages" diff --git a/src/components/ButtonDropdown.js b/src/components/ButtonDropdown.js index 83f6100e8fd..ee62d92cb5a 100644 --- a/src/components/ButtonDropdown.js +++ b/src/components/ButtonDropdown.js @@ -1,7 +1,7 @@ // Libraries import React, { useState, createRef } from "react" import styled from "styled-components" -import { useIntl } from "gatsby-plugin-intl" +import { useIntl } from "react-intl" import { motion } from "framer-motion" // Components diff --git a/src/components/EthExchanges.js b/src/components/EthExchanges.js index 6565172b598..c81020936a2 100644 --- a/src/components/EthExchanges.js +++ b/src/components/EthExchanges.js @@ -1,7 +1,7 @@ import React, { useState } from "react" import { useStaticQuery, graphql } from "gatsby" import { getImage } from "gatsby-plugin-image" -import { useIntl } from "gatsby-plugin-intl" +import { useIntl } from "react-intl" import styled from "styled-components" import CardList from "./CardList" diff --git a/src/components/FeedbackWidget.tsx b/src/components/FeedbackWidget.tsx index 2d4e31c5823..cee0b97e624 100644 --- a/src/components/FeedbackWidget.tsx +++ b/src/components/FeedbackWidget.tsx @@ -1,6 +1,6 @@ // Library imports import React, { useState, useEffect, useRef, useMemo } from "react" -import { useIntl } from "gatsby-plugin-intl" +import { useIntl } from "react-intl" import styled from "styled-components" import FocusTrap from "focus-trap-react" // Component imports diff --git a/src/components/FileContributors.tsx b/src/components/FileContributors.tsx index 9c1c3123b4a..6c1338d37f9 100644 --- a/src/components/FileContributors.tsx +++ b/src/components/FileContributors.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react" -import { useIntl } from "gatsby-plugin-intl" +import { useIntl } from "react-intl" import styled, { css } from "styled-components" import { useQuery, gql } from "@apollo/client" diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index f16d41b9e75..8c43d2423e4 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,6 +1,6 @@ import React from "react" import styled from "styled-components" -import { useIntl } from "gatsby-plugin-intl" +import { useIntl } from "react-intl" import { StaticQuery, graphql } from "gatsby" import { getLocaleTimestamp } from "../utils/time" diff --git a/src/components/Layer2/Layer2Onboard.tsx b/src/components/Layer2/Layer2Onboard.tsx index fbfc74e0fed..fdb603b9b4d 100644 --- a/src/components/Layer2/Layer2Onboard.tsx +++ b/src/components/Layer2/Layer2Onboard.tsx @@ -2,7 +2,7 @@ import { GatsbyImage } from "gatsby-plugin-image" import React, { useState } from "react" import styled from "styled-components" -import { useIntl } from "gatsby-plugin-intl" +import { useIntl } from "react-intl" // Components import ButtonLink from "../ButtonLink" diff --git a/src/components/Layer2ProductCard.tsx b/src/components/Layer2ProductCard.tsx index 5c380c55d43..aa46a443cb4 100644 --- a/src/components/Layer2ProductCard.tsx +++ b/src/components/Layer2ProductCard.tsx @@ -2,7 +2,7 @@ import React from "react" import styled from "styled-components" import { GatsbyImage } from "gatsby-plugin-image" -import { useIntl } from "gatsby-plugin-intl" +import { useIntl } from "react-intl" // Components import ButtonLink from "./ButtonLink" diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 323619d3569..59d47c760c3 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -1,11 +1,9 @@ import React, { useState, useEffect } from "react" import { ApolloProvider } from "@apollo/client" -import client from "../apollo" import { ThemeProvider } from "styled-components" -import { IntlProvider, IntlContextProvider } from "gatsby-plugin-intl" import styled from "styled-components" +import { IntlProvider } from "react-intl" -import "../styles/layout.css" import { lightTheme, darkTheme, GlobalStyle } from "../theme" import Footer from "./Footer" @@ -16,6 +14,7 @@ import SideNavMobile from "./SideNavMobile" import TranslationBanner from "./TranslationBanner" import TranslationBannerLegal from "./TranslationBannerLegal" import FeedbackWidget from "./FeedbackWidget" +import { SkipLink, SkipLinkAnchor } from "./SkipLink" import { ZenModeContext } from "../contexts/ZenModeContext" @@ -24,10 +23,12 @@ import { useKeyPress } from "../hooks/useKeyPress" import { isLangRightToLeft } from "../utils/translations" import { scrollIntoView } from "../utils/scrollIntoView" import { isMobile } from "../utils/isMobile" -import { SkipLink, SkipLinkAnchor } from "./SkipLink" import type { Context } from "../types" +import "../styles/layout.css" +import client from "../apollo" + const ContentContainer = styled.div` position: relative; margin: 0px auto; @@ -88,6 +89,9 @@ const Layout: React.FC = ({ const [isZenMode, setIsZenMode] = useState(false) const [shouldShowSideNav, setShouldShowSideNav] = useState(false) + const locale = pageContext.locale + const message = require(`../intl/${locale}.json`) + // Exit Zen Mode on 'esc' click useKeyPress(`Escape`, () => handleZenModeChange(false)) @@ -136,19 +140,15 @@ const Layout: React.FC = ({ } } - // IntlProvider & IntlContextProvider appear to be necessary in order to pass context - // into components that live outside page components (e.g. Nav & Footer). - // https://github.com/wiziple/gatsby-plugin-intl/issues/116 - const intl = pageContext.intl const theme = isDarkTheme ? darkTheme : lightTheme - const isPageLanguageEnglish = intl.language === intl.defaultLanguage + const isPageLanguageEnglish = pageContext.isDefaultLang const isPageContentEnglish = !!pageContext.isContentEnglish const isLegal = !!pageContext.isLegal const isTranslationBannerIgnored = !!pageContext.ignoreTranslationBanner const isPageTranslationOutdated = !!pageContext.isOutdated || !!data?.pageData?.frontmatter?.isOutdated - const isPageRightToLeft = isLangRightToLeft(intl.language) + const isPageRightToLeft = isLangRightToLeft(pageContext.language) const shouldShowTranslationBanner = (isPageTranslationOutdated || @@ -156,60 +156,54 @@ const Layout: React.FC = ({ !isTranslationBannerIgnored return ( - - - - - - - - - - -