Merge branch 'dev' into chakra/roadmap

Author: pettinarip

.all-contributorsrc

@@ -9718,6 +9718,62 @@
         "doc",
         "ideas"
       ]
+    },
+    {
+      "login": "aguzmant103",
+      "name": "aguzmant103",
+      "avatar_url": "https://avatars.githubusercontent.com/u/67167307?v=4",
+      "profile": "https://github.com/aguzmant103",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "soheil555",
+      "name": "Soheil",
+      "avatar_url": "https://avatars.githubusercontent.com/u/22212139?v=4",
+      "profile": "https://soheil.vercel.app/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "metadiver",
+      "name": "metadiver.eth",
+      "avatar_url": "https://avatars.githubusercontent.com/u/75746881?v=4",
+      "profile": "http://linktr.ee/metadiver",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "nuclearfalcon",
+      "name": "Jacob",
+      "avatar_url": "https://avatars.githubusercontent.com/u/12568736?v=4",
+      "profile": "https://github.com/nuclearfalcon",
+      "contributions": [
+        "ideas",
+        "doc"
+      ]
+    },
+    {
+      "login": "theSamPadilla",
+      "name": "Sam Padilla",
+      "avatar_url": "https://avatars.githubusercontent.com/u/35386211?v=4",
+      "profile": "https://github.com/theSamPadilla",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "terasum",
+      "name": "Chen Quan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/20042193?v=4",
+      "profile": "https://chenquan.me",
+      "contributions": [
+        "doc",
+        "translation"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.gitignore

@@ -76,7 +76,6 @@ yarn-error.log
 src/data/contributors.json
 # These files are generated by `yarn merge-translations` command
 src/intl/*.json
-i18n/locales
 # Auto generated code when gatsby build the site
 src/gatsby-types.d.ts
 

README.md

@@ -1527,6 +1527,12 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center"><a href="http://olshansky.info"><img src="https://avatars.githubusercontent.com/u/1892194?v=4?s=100" width="100px;" alt="Daniel Olshansky"/><br /><sub><b>Daniel Olshansky</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Olshansk" title="Documentation">📖</a> <a href="#ideas-Olshansk" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center"><a href="https://github.com/aguzmant103"><img src="https://avatars.githubusercontent.com/u/67167307?v=4?s=100" width="100px;" alt="aguzmant103"/><br /><sub><b>aguzmant103</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=aguzmant103" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://soheil.vercel.app/"><img src="https://avatars.githubusercontent.com/u/22212139?v=4?s=100" width="100px;" alt="Soheil"/><br /><sub><b>Soheil</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=soheil555" title="Code">💻</a></td>
+      <td align="center"><a href="http://linktr.ee/metadiver"><img src="https://avatars.githubusercontent.com/u/75746881?v=4?s=100" width="100px;" alt="metadiver.eth"/><br /><sub><b>metadiver.eth</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=metadiver" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/nuclearfalcon"><img src="https://avatars.githubusercontent.com/u/12568736?v=4?s=100" width="100px;" alt="Jacob"/><br /><sub><b>Jacob</b></sub></a><br /><a href="#ideas-nuclearfalcon" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/ethereum/ethereum-org-website/commits?author=nuclearfalcon" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/theSamPadilla"><img src="https://avatars.githubusercontent.com/u/35386211?v=4?s=100" width="100px;" alt="Sam Padilla"/><br /><sub><b>Sam Padilla</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=theSamPadilla" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://chenquan.me"><img src="https://avatars.githubusercontent.com/u/20042193?v=4?s=100" width="100px;" alt="Chen Quan"/><br /><sub><b>Chen Quan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=terasum" title="Documentation">📖</a> <a href="#translation-terasum" title="Translation">🌍</a></td>
     </tr>
   </tbody>
 </table>

gatsby-browser.tsx

@@ -4,6 +4,10 @@
  * See: https://www.gatsbyjs.org/docs/browser-apis/
  */
 
+import React from "react"
+import browserLang from "browser-lang"
+import { withPrefix, GatsbyBrowser } from "gatsby"
+
 import Prism from "prism-react-renderer/prism"
 ;(typeof global !== "undefined" ? global : window).Prism = Prism
 
@@ -12,6 +16,53 @@ 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 { IS_DEV } from "./src/utils/env"
+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
+// @ts-ignore: returning `null` is not accepted by the `GatsbyBrowser` type def.
+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 (IS_DEV && !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)
+
+    return null
+  }
+
+  return <Layout {...props}>{element}</Layout>
+}

gatsby-config.ts

@@ -35,6 +35,24 @@ const config: GatsbyConfig = {
     editContentUrl: `https://github.com/ethereum/ethereum-org-website/tree/dev/`,
   },
   plugins: [
+    // i18n support
+    {
+      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: {
+        defaultLocale: `./src/intl/en.json`,
+      },
+    },
     // Web app manifest
     {
       resolve: `gatsby-plugin-manifest`,
@@ -247,56 +265,6 @@ const config: GatsbyConfig = {
         generateMatchPathRewrites: false,
       },
     },
-    // i18n support
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        path: path.resolve(`./i18n/locales`),
-        name: `locale`,
-      },
-    },
-    // Wraps the entire page with a custom layout component
-    // Note: keep this before the i18n plugin declaration in order to have the
-    // i18n provider wrapping the layout component
-    {
-      resolve: `gatsby-plugin-layout`,
-      options: {
-        component: path.resolve(`./src/components/Layout`),
-      },
-    },
-    {
-      resolve: `gatsby-plugin-react-i18next`,
-      options: {
-        localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.
-        languages: supportedLanguages,
-        defaultLanguage: defaultLanguage,
-        generateDefaultLanguagePage: true,
-        redirect: false,
-        siteUrl,
-        trailingSlash: "always",
-        // i18next options
-        i18nextOptions: {
-          fallbackLng: defaultLanguage,
-          interpolation: {
-            escapeValue: false,
-          },
-          react: {
-            transSupportBasicHtmlNodes: true,
-            transKeepBasicHtmlNodesFor: [
-              "br",
-              "strong",
-              "i",
-              "bold",
-              "b",
-              "em",
-              "sup",
-            ],
-          },
-          keySeparator: false,
-          nsSeparator: false,
-        },
-      },
-    },
   ],
   // https://www.gatsbyjs.com/docs/reference/release-notes/v2.28/#feature-flags-in-gatsby-configjs
   flags: {