Deploy v4.0.0

.all-contributorsrc

@@ -7498,6 +7498,87 @@
         "code",
         "bug"
       ]
+    },
+    {
+      "login": "wolz-CODElife",
+      "name": "wolz-CODElife",
+      "avatar_url": "https://avatars.githubusercontent.com/u/55518764?v=4",
+      "profile": "http://wolzcodelife.web.app",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "minaessam2015",
+      "name": "Mina Essam",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13814552?v=4",
+      "profile": "https://github.com/minaessam2015",
+      "contributions": [
+        "ideas"
+      ]
+    },
+    {
+      "login": "Choi-Jinhong",
+      "name": "GNONG",
+      "avatar_url": "https://avatars.githubusercontent.com/u/65050483?v=4",
+      "profile": "https://jinhongdev.tistory.com/",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "spilehchiha",
+      "name": "Sina Pilehchiha",
+      "avatar_url": "https://avatars.githubusercontent.com/u/46059077?v=4",
+      "profile": "https://github.com/spilehchiha",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "theexoticman",
+      "name": "thefrenchbrazilianguy",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10594609?v=4",
+      "profile": "https://github.com/theexoticman",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "nativeanish",
+      "name": "Anish Gupta",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15274388?v=4",
+      "profile": "http://nativeanish.tech",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "dev-matthew",
+      "name": "Matthew",
+      "avatar_url": "https://avatars.githubusercontent.com/u/80741503?v=4",
+      "profile": "https://github.com/dev-matthew",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "JustynaBroniszewska",
+      "name": "Justyna Broniszewska",
+      "avatar_url": "https://avatars.githubusercontent.com/u/33961199?v=4",
+      "profile": "https://github.com/JustynaBroniszewska",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "yanil3500",
+      "name": "Elyanil Liranzo-Castro",
+      "avatar_url": "https://avatars.githubusercontent.com/u/11803254?v=4",
+      "profile": "https://github.com/yanil3500",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.babelrc

@@ -0,0 +1,16 @@
+// Expose a custom .babelrc in order to let netlify-lambda read it and build the
+// TS lambda functions. This way, netlify-lambda & gatsby use the same config.
+// ref. https://www.gatsbyjs.com/docs/how-to/custom-configuration/babel/
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "babel-preset-gatsby",
+      {
+        "targets": {
+          "browsers": [">0.25%", "not dead"]
+        }
+      }
+    ]
+  ]
+}

.github/workflows/docsearch-crawl.yml

@@ -11,12 +11,17 @@ jobs:
     steps:
       - name: Checkout codebase
         uses: actions/checkout@v2
+      - name: Install node and ts-node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - run: npm install -g ts-node
       - name: Crawl the site
         env:
           APPLICATION_ID: ${{ secrets.DOCSEARCH_APP_ID }}
           API_KEY: ${{ secrets.DOCSEARCH_API_KEY }}
         run: |
           docker run \
           -e APPLICATION_ID -e API_KEY \
-          -e CONFIG="$(node .github/workflows/docsearchConfigScript.js | cat .github/workflows/docsearchConfig.json)" \
+          -e CONFIG="$(ts-node -O '{\"module\": \"commonjs\"}' .github/workflows/docsearchConfigScript.js | cat .github/workflows/docsearchConfig.json)" \
           algolia/docsearch-scraper:v1.6.0

.github/workflows/docsearchConfigScript.js

@@ -1,5 +1,5 @@
 const fs = require("fs")
-const translations = require("../../src/data/translations.json")
+const translations = require("../../src/utils/languages").default
 
 var config = {
   index_name: "prod-ethereum-org",

.gitignore

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

.prettierignore

@@ -1,4 +1,4 @@
 .cache
 package.json
 package-lock.json
-public
+public

README.md

@@ -121,6 +121,10 @@ To create a new function, you will need to create two files:
 - One in `src/lambdas` where the logic will live. These are the ones that will be deployed to Netlify. These functions follow [this format](https://docs.netlify.com/functions/build-with-javascript/#synchronous-function-format).
 - One in `src/api` that will be just a wrapper around the previous one in order to be compatible with Gatsby functions. More on the [Gatbsy docs](https://www.gatsbyjs.com/docs/reference/functions/getting-started/) for the format they follow.
 
+Typically, you will develop and test functions in the Gatsby context, by running `yarn start`.
+
+In case you want to test them as if you were in a Netlify env, you can install the [Netlify CLI](https://docs.netlify.com/cli/get-started/) and run `netlify dev --framework=gatsby`.
+
 ### 6. Submit your PR
 
 - After your changes are committed to your GitHub fork, submit a pull request (PR) to the `dev` branch of the `ethereum/ethereum-org-website` repo
@@ -1213,6 +1217,19 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/JuliusDegesys"><img src="https://avatars.githubusercontent.com/u/3232103?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Julius Degesys</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=JuliusDegesys" title="Documentation">📖</a></td>
     <td align="center"><a href="https://nicolasquiroz.com"><img src="https://avatars.githubusercontent.com/u/948922?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nicolás Quiroz</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=nhsz" title="Code">💻</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Anhsz" title="Bug reports">🐛</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="http://wolzcodelife.web.app"><img src="https://avatars.githubusercontent.com/u/55518764?v=4?s=100" width="100px;" alt=""/><br /><sub><b>wolz-CODElife</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=wolz-CODElife" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/minaessam2015"><img src="https://avatars.githubusercontent.com/u/13814552?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mina Essam</b></sub></a><br /><a href="#ideas-minaessam2015" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://jinhongdev.tistory.com/"><img src="https://avatars.githubusercontent.com/u/65050483?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GNONG</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Choi-Jinhong" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/spilehchiha"><img src="https://avatars.githubusercontent.com/u/46059077?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sina Pilehchiha</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=spilehchiha" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/theexoticman"><img src="https://avatars.githubusercontent.com/u/10594609?v=4?s=100" width="100px;" alt=""/><br /><sub><b>thefrenchbrazilianguy</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=theexoticman" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://nativeanish.tech"><img src="https://avatars.githubusercontent.com/u/15274388?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anish Gupta</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=nativeanish" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/dev-matthew"><img src="https://avatars.githubusercontent.com/u/80741503?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Matthew</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=dev-matthew" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/JustynaBroniszewska"><img src="https://avatars.githubusercontent.com/u/33961199?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Justyna Broniszewska</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=JustynaBroniszewska" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/yanil3500"><img src="https://avatars.githubusercontent.com/u/11803254?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Elyanil Liranzo-Castro</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=yanil3500" title="Documentation">📖</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

docs/best-practices.md

@@ -32,7 +32,7 @@ Markdown will be translated as whole pages of content, so no specific action is
   - This results in significant challenges during the translation process, as written syntax for each language will vary in terms of ordering subjects/verbs/etc.
   - If you're wanting to link to something within your sentence, create a link at the end of the sentence or paragraph:
 
-  ```jsx
+  ```tsx
   <p>
     All Ethereum transactions require a fee, known as Gas, that gets paid to the
     miner. <Link to="link">More on Gas</Link>
@@ -41,7 +41,7 @@ Markdown will be translated as whole pages of content, so no specific action is
 
   Once, you've added your English content to the appropriate JSON file, the above code should look something more like:
 
-  ```jsx
+  ```tsx
   <p>
     <Translation id="page-transactions" />{" "}
     <Link to="link">
@@ -52,11 +52,11 @@ 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.js`
+- This is done using the `Translation` component. However there is an alternative method for regular JS: `gatsby-plugin-intl` with `/src/utils/translations.ts`
 
   - **Method one: `<Translation />` component (preferred if only needed in JSX)**
 
-    ```jsx
+    ```tsx
     import { Translation } from "src/components/Translation"
 
     // Utilize in JSX using
@@ -65,7 +65,7 @@ Markdown will be translated as whole pages of content, so no specific action is
 
   - **Method two: `translateMessageId()`**
 
-    ```jsx
+    ```tsx
     import { useIntl } from "gatsby-plugin-intl"
     import { translateMessageId } from "src/utils/translations"
 
@@ -74,19 +74,19 @@ Markdown will be translated as whole pages of content, so no specific action is
     translateMessageId("language-json-key", intl)
     ```
 
-    ```jsx
+    ```tsx
     const siteTitle = translateMessageId("site-title", intl)
     ```
 
 ## React Hooks
 
 - Components and pages are written using arrow function syntax with React hooks in lieu of using class-based components
 
-```jsx
+```tsx
 // Example
 import React, { useState, useEffect } from "react"
 
-const ComponentName = (props) => {
+const ComponentName: React.FC = (props) => {
   // useState hook for managing state variables
   const [greeting, setGreeting] = useState("")
 
@@ -103,12 +103,12 @@ export default ComponentName
 
 ## Styling
 
-- `src/theme.js` - Declares site color themes, breakpoints and other constants (try to utilize these colors first)
+- `src/theme.ts` - Declares site color themes, breakpoints and other constants (try to utilize these colors first)
 - We use [styled-components](https://styled-components.com/)
 
   - Tagged template literals are used to style custom components
 
-  ```jsx
+  ```tsx
   // Example of styling syntax using styled-components
 
   import styled from "styled-components"
@@ -130,10 +130,10 @@ export default ComponentName
 
   - Recommended VS Code Plugin: `vscode-styled-components` <br>To install: Open VS Code > `Ctrl+P` / `Cmd+P` > Run: <br>`ext install vscode-styled-components`
 
-- Values from `src/theme.js` are automatically passed as a prop object to styled components
+- Values from `src/theme.ts` are automatically passed as a prop object to styled components
 
-  ```jsx
-  // Example of theme.js usage
+  ```tsx
+  // Example of theme.ts usage
 
   import styled from "styled-components"
 
@@ -148,7 +148,7 @@ export default ComponentName
 - [Framer Motion](https://www.framer.com/motion/) - An open source and production-ready motion library for React on the web, used for our animated designs
 - **Emojis**: We use [Twemoji](https://twemoji.twitter.com/), an open-source emoji set created by Twitter. These are hosted by us, and used to provide a consistent experience across operating systems.
 
-```jsx
+```tsx
 // Example of emoji use
 import Emoji from "./Emoji"
 
@@ -157,12 +157,12 @@ import Emoji from "./Emoji"
 ```
 
 - **Icons**: We use [React Icons](https://react-icons.github.io/react-icons/)
-  - `src/components/Icon.js` is the component used to import icons to be used
+  - `src/components/Icon.ts` is the component used to import icons to be used
   - If an icon you want to use is not listed you will need to add it to this file
 
-`src/components/Icon.js`:
+`src/components/Icon.ts`:
 
-```jsx
+```tsx
 // Example of how to add new icon not listed
 import { ZzIconName } from "react-icons/zz"
 
@@ -174,7 +174,7 @@ import { ZzIconName } from "react-icons/zz"
 
 From React component:
 
-```jsx
+```tsx
 // Example of icon use
 import Icon from "./Icon"
 
@@ -187,7 +187,7 @@ import Icon from "./Icon"
 - [Gatsby + GraphQL](https://www.gatsbyjs.com/docs/graphql/) used for loading of images and preferred for API calls (in lieu of REST, if possible/practical). Utilizes static page queries that run at build time, not at run time, optimizing performance.
 - Image loading example:
 
-```jsx
+```tsx
 import { graphql } from "gatsby"
 
 export const query = graphql`
@@ -209,7 +209,7 @@ export const query = graphql`
 
 - API call example:
 
-```jsx
+```tsx
 import { graphql } from "gatsby"
 
 export const repoInfo = graphql`