Merge branch 'refactor/layer-2-page-to-chakra' of https://github.com/TylerAPfledderer/ethereum-org-website into refactor/layer-2-page-to-chakra

Author: TylerAPfledderer

.all-contributorsrc

@@ -10127,6 +10127,51 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "DeUETH",
+      "name": "DeUETH",
+      "avatar_url": "https://avatars.githubusercontent.com/u/107472460?v=4",
+      "profile": "https://github.com/DeUETH",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "erin-at-work",
+      "name": "erin-at-work",
+      "avatar_url": "https://avatars.githubusercontent.com/u/50590950?v=4",
+      "profile": "http://www.erinleelikes.com",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "AmazingAng",
+      "name": "0xAA",
+      "avatar_url": "https://avatars.githubusercontent.com/u/14728591?v=4",
+      "profile": "https://github.com/AmazingAng",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "changwu-tw",
+      "name": "changwu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1557364?v=4",
+      "profile": "https://changwu.me/",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "uniyj",
+      "name": "yj",
+      "avatar_url": "https://avatars.githubusercontent.com/u/84749041?v=4",
+      "profile": "http://uniyj.eth",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.env.example

@@ -6,6 +6,7 @@ ALGOLIA_ADMIN_KEY=insertValue
 ETHERSCAN_API_KEY=insertValue
 GATSBY_ALGOLIA_APP_ID=insertValue
 GATSBY_ALGOLIA_SEARCH_KEY=insertValue
+GATSBY_ALGOLIA_BASE_SEARCH_INDEX_NAME=insertValue
 GATSBY_GITHUB_TOKEN_READ_ONLY=insertValue
 GATSBY_FUNCTIONS_PATH=insertValue
 

.github/labeler.yml

@@ -29,3 +29,6 @@
   - src/pages/*
   - src/pages-conditional/*
   - src/content/**/*
+
+"event :date:":
+  - src/data/community-events.json

.github/workflows/chromatic.yml

@@ -38,6 +38,6 @@ jobs:
         uses: chromaui/action@v1
         # Options required for Chromatic's GitHub Action
         with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          projectToken: fee8e66c9916
           # 👇 Only fail if Storybook contains stories that error
           exitZeroOnChanges: true

.gitignore

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

README.md

@@ -1584,6 +1584,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://jarrodwatts.com"><img src="https://avatars.githubusercontent.com/u/35651410?v=4?s=100" width="100px;" alt="Jarrod Watts"/><br /><sub><b>Jarrod Watts</b></sub></a><br /><a href="#content-jarrodwatts" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/mlCode111"><img src="https://avatars.githubusercontent.com/u/34754144?v=4?s=100" width="100px;" alt="Miao"/><br /><sub><b>Miao</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=mlCode111" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ljiatu"><img src="https://avatars.githubusercontent.com/u/3280973?v=4?s=100" width="100px;" alt="Jiatu Liu"/><br /><sub><b>Jiatu Liu</b></sub></a><br /><a href="#content-ljiatu" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/DeUETH"><img src="https://avatars.githubusercontent.com/u/107472460?v=4?s=100" width="100px;" alt="DeUETH"/><br /><sub><b>DeUETH</b></sub></a><br /><a href="#content-DeUETH" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.erinleelikes.com"><img src="https://avatars.githubusercontent.com/u/50590950?v=4?s=100" width="100px;" alt="erin-at-work"/><br /><sub><b>erin-at-work</b></sub></a><br /><a href="#content-erin-at-work" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/AmazingAng"><img src="https://avatars.githubusercontent.com/u/14728591?v=4?s=100" width="100px;" alt="0xAA"/><br /><sub><b>0xAA</b></sub></a><br /><a href="#content-AmazingAng" title="Content">🖋</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://changwu.me/"><img src="https://avatars.githubusercontent.com/u/1557364?v=4?s=100" width="100px;" alt="changwu"/><br /><sub><b>changwu</b></sub></a><br /><a href="#content-changwu-tw" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://uniyj.eth"><img src="https://avatars.githubusercontent.com/u/84749041?v=4?s=100" width="100px;" alt="yj"/><br /><sub><b>yj</b></sub></a><br /><a href="#content-uniyj" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

docs/locales-process.md

@@ -0,0 +1,9 @@
+# Locales generation process
+
+Every time `yarn build` or `yarn start` is executed, the following process is
+going to be triggered as well:
+
+<img src="./locales.png">
+
+With this process, we reduce the amount of text we bundle on each page since we
+are querying only the necessary translations that each page needs.

docs/locales.png

@@ -4,10 +4,6 @@
  * 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
 
@@ -16,53 +12,6 @@ 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-browser.tsx

@@ -35,24 +35,6 @@ 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`,
@@ -266,6 +248,59 @@ 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,
+        generateDefaultLanguagePage: true,
+        redirect: false,
+        siteUrl,
+        trailingSlash: "always",
+        // i18next options
+        i18nextOptions: {
+          fallbackLng: defaultLanguage,
+          interpolation: {
+            escapeValue: false,
+          },
+          load: "currentOnly",
+          lowerCaseLng: true,
+          cleanCode: true,
+          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: {