Merge pull request #7070 from ethereum/dev

Deploy v4.8.0

Author: wackerow

.all-contributorsrc

@@ -8133,6 +8133,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "smejak",
+      "name": "Jakub Smékal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/20759274?v=4",
+      "profile": "https://github.com/smejak",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1304,6 +1304,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="http://[email protected]"><img src="https://avatars.githubusercontent.com/u/40423181?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sandy</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=zyjblockchain" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/NachoRoizman"><img src="https://avatars.githubusercontent.com/u/107893772?v=4?s=100" width="100px;" alt=""/><br /><sub><b>NachoRoizman</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=NachoRoizman" title="Documentation">📖</a></td>
     <td align="center"><a href="https://linkedin.com/in/miragaya-ivan"><img src="https://avatars.githubusercontent.com/u/72365253?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Iván Miragaya</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=M-Ivan" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/smejak"><img src="https://avatars.githubusercontent.com/u/20759274?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jakub Smékal</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=smejak" title="Documentation">📖</a></td>
   </tr>
 </table>
 

docs/best-practices.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: `gatsby-plugin-intl` with `/src/utils/translations.ts`
+- This is done using the `Translation` component. However there is an alternative method for regular JS: `gatsby-theme-i18n` with `/src/utils/translations.ts`
 
   - **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: `translateMessageId()`**
 
     ```tsx
-    import { useIntl } from "gatsby-plugin-intl"
+    import { useIntl } from "react-intl"
     import { translateMessageId } from "src/utils/translations"
 
     // Utilize anywhere in JS using

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 {
+  supportedLanguages,
+  defaultLanguage,
+  isLang,
+} 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 <Layout/> from unmounting on page transitions
 // https://www.gatsbyjs.com/docs/layout-components/#how-to-prevent-layout-components-from-unmounting
-export const wrapPageElement = ({ element, props }) => (
-  <Layout {...props}>{element}</Layout>
-)
+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 (!isLang(pathLocale)) {
+    let detected =
+      window.localStorage.getItem("eth-org-language") ||
+      browserLang({
+        languages: supportedLanguages,
+        fallback: defaultLanguage,
+      })
+
+    if (!isLang(detected)) {
+      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 <div />
+  }
+
+  return <Layout {...props}>{element}</Layout>
+}

gatsby-config.ts

@@ -9,14 +9,14 @@ import {
   ignoreLanguages,
 } from "./src/utils/languages"
 
+import { IS_PREVIEW } from "./src/utils/env"
+
 const siteUrl = `https://ethereum.org`
 
 const ignoreContent = (process.env.IGNORE_CONTENT || "")
   .split(",")
   .filter(Boolean)
 
-const isPreviewDeploy = process.env.IS_PREVIEW_DEPLOY === "true"
-
 const ignoreTranslations = ignoreLanguages.map(
   (lang) => `**/translations\/${lang}`
 )
@@ -37,17 +37,20 @@ const config: GatsbyConfig = {
   plugins: [
     // i18n support
     {
-      resolve: `gatsby-plugin-intl`,
+      resolve: `gatsby-theme-i18n`,
+      options: {
+        defaultLang: defaultLanguage,
+        prefixDefault: true,
+        locales: supportedLanguages.length
+          ? supportedLanguages.join(" ")
+          : null,
+        configPath: path.resolve(`./i18n/config.json`),
+      },
+    },
+    {
+      resolve: `gatsby-theme-i18n-react-intl`,
       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,
+        defaultLocale: `./src/intl/en.json`,
       },
     },
     // Web app manifest
@@ -239,7 +242,7 @@ const config: GatsbyConfig = {
 
 // Avoid loading Matomo in preview deploys since NODE_ENV is `production` in
 // there and it will send testing data as production otherwise
-if (!isPreviewDeploy) {
+if (!IS_PREVIEW) {
   config.plugins = [
     ...(config.plugins || []),
     // Matomo analtyics

gatsby-node.ts

@@ -18,7 +18,7 @@ import {
   defaultLanguage,
   Lang,
 } from "./src/utils/languages"
-import getMessages from "./src/utils/getMessages"
+import { IS_DEV } from "./src/utils/env"
 import redirects from "./redirects.json"
 
 const exec = util.promisify(child_process.exec)
@@ -153,9 +153,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 +190,7 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
 }) => {
   const { createPage, createRedirect } = actions
 
+  // server side redirects
   redirects.forEach((redirect) => {
     createRedirect({
       ...redirect,
@@ -271,27 +269,22 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
           const splitSlug = slug.split("/")
           splitSlug.splice(1, 1, lang)
           const langSlug = splitSlug.join("/")
-          createPage({
+          createPage<Context>({
             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 +298,13 @@ export const createPages: GatsbyNode<any, Context>["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 +326,22 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
           page,
           lang
         )
-        createPage({
-          path: `/${lang}/${page}/`,
+        const originalPath = `/${page}/`
+        const slug = `/${lang}${originalPath}`
+
+        createPage<Context>({
+          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,13 +358,21 @@ export const onCreatePage: GatsbyNode<any, Context>["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 (IS_DEV && 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.context.language
+      page.context.originalPath,
+      page.context.locale
     )
     deletePage(page)
     createPage<Context>({

gatsby-ssr.tsx

@@ -10,9 +10,11 @@ import type { GatsbySSR } from "gatsby"
 
 import Layout from "./src/components/Layout"
 
+import { Context } from "./src/types"
+
 // Prevents <Layout/> 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<any, Context>["wrapPageElement"] = ({
   element,
   props,
 }) => {