Merge branch 'dev' into pr/rex4539/12032

Author: corwintines

.all-contributorsrc

@@ -10700,7 +10700,7 @@
       "login": "g0rbe",
       "name": "Dániel Görbe",
       "avatar_url": "https://avatars.githubusercontent.com/u/36860942?v=4",
-      "profile": "http://www.danielgorbe.com",
+      "profile": "https://www.gorbe.io",
       "contributions": [
         "doc"
       ]

README.md

@@ -91,10 +91,10 @@ git checkout -b new_branch_name
 2. Start developing!
 
 ```sh
-yarn start
+yarn dev
 ```
 
-- Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:8000` from your browser
+- Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:3000` from your browser
 - Pro Tip:
   - Explore scripts within `package.json` for more build options
   - Get **faster** local builds by building only one language. E.g. in your `.env` file, set `BUILD_LOCALES=en` to build the content only in English
@@ -1673,7 +1673,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/costgallo"><img src="https://avatars.githubusercontent.com/u/49433698?v=4?s=100" width="100px;" alt="Costanza"/><br /><sub><b>Costanza</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=costgallo" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/joaolago1113"><img src="https://avatars.githubusercontent.com/u/22820692?v=4?s=100" width="100px;" alt="joao"/><br /><sub><b>joao</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=joaolago1113" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://p2p.org"><img src="https://avatars.githubusercontent.com/u/3310192?v=4?s=100" width="100px;" alt="Eugene"/><br /><sub><b>Eugene</b></sub></a><br /><a href="#content-rgb2hsl" title="Content">🖋</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="http://www.danielgorbe.com"><img src="https://avatars.githubusercontent.com/u/36860942?v=4?s=100" width="100px;" alt="Dániel Görbe"/><br /><sub><b>Dániel Görbe</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=g0rbe" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.gorbe.io"><img src="https://avatars.githubusercontent.com/u/36860942?v=4?s=100" width="100px;" alt="Dániel Görbe"/><br /><sub><b>Dániel Görbe</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=g0rbe" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://blog.insubli.me"><img src="https://avatars.githubusercontent.com/u/41712656?v=4?s=100" width="100px;" alt="s-crypt"/><br /><sub><b>s-crypt</b></sub></a><br /><a href="#content-s-crypt" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/tudorpintea999"><img src="https://avatars.githubusercontent.com/u/87604944?v=4?s=100" width="100px;" alt="iwantanode"/><br /><sub><b>iwantanode</b></sub></a><br /><a href="#content-tudorpintea999" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/shak58"><img src="https://avatars.githubusercontent.com/u/150069539?v=4?s=100" width="100px;" alt="shak58"/><br /><sub><b>shak58</b></sub></a><br /><a href="#content-shak58" title="Content">🖋</a></td>

docs/api-keys.md

@@ -11,7 +11,7 @@ We recommend setting this up when running the project locally, as we use the Git
 
 ```sh
 # .env Example:
-GATSBY_GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059
+NEXT_PUBLIC_GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059
 ```
 
 2. Add Etherscan API token (free)
@@ -25,13 +25,3 @@ GATSBY_GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059
 # .env Example:
 ETHERSCAN_API_KEY=K6NUTARFJZJCIXHF1F1E1YGJZ8RQ29BE4U
 ```
-
-3. Add DeFiPulse API token (free)
-
-> - [Follow this guide](https://docs.defipulse.com/quick-start-guide) to create an account and get your DeFiPulse API token
-> - Copy & paste your Active API Key from DeFiPulse into `.env`
-
-```sh
-# .env Example:
-DEFI_PULSE_API_KEY=4953aaf7966dad9c129397e197a0630ed0594f66962dd5fb058972b250da
-```

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: using the `t` function from `gatsby-plugin-react-i18next`
+- This is done using the `Translation` component. However there is an alternative method for regular JS: using the `t` function from `next-i18next`
 
   - **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: `t()`**
 
     ```tsx
-    import { useTranslation } from "gatsby-plugin-react-i18next"
+    import { useTranslation } from "next-i18next"
 
     // Utilize anywhere in JS using
     const { t } = useTranslation()
@@ -85,7 +85,7 @@ Markdown will be translated as whole pages of content, so no specific action is
 // Example
 import React, { useState, useEffect } from "react"
 
-const ComponentName: React.FC = (props) => {
+const ComponentName = () => {
   // useState hook for managing state variables
   const [greeting, setGreeting] = useState("")
 
@@ -104,7 +104,7 @@ export default ComponentName
 
 We use [Chakra UI](https://chakra-ui.com/).
 
-`src/@chakra-ui/gatsby-plugin/theme.ts` - Holds all the theme configuration. This is where you can find the colors, fonts, component themes, variants, etc.
+`src/@chakra-ui/theme.ts` - Holds all the theme configuration. This is where you can find the colors, fonts, component themes, variants, etc.
 
 - Wrappers or layout divs
 
@@ -149,7 +149,7 @@ Use [the Chakra default breakpoints](https://chakra-ui.com/docs/styled-system/th
 <Text color="primary.base" bg="background.base" />
 ```
 
-> Note the dotted notation. In Chakra, the values are referred to as "semantic tokens" and the new theme applies a nested structure of like tokens for better organization. See [semanticTokens.ts](../src/%40chakra-ui/gatsby-plugin/semanticTokens.ts)
+> Note the dotted notation. In Chakra, the values are referred to as "semantic tokens" and the new theme applies a nested structure of like tokens for better organization. See [semanticTokens.ts](../src/@chakra-ui/semanticTokens.ts)
 
 > Note 2: all the previous colors defined in the old theme `src/theme.ts` were
 > ported into the new theme for compatibility reasons. Those colors will
@@ -177,63 +177,10 @@ import { BsQuestionSquareFill } from "react-icons/bs"
 ;<Icon as={BsQuestionSquareFill} />
 ```
 
-## Image loading and API calls using GraphQL
+## Using custom `Image` component
 
-- [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:
+[Next Image](https://nextjs.org/docs/pages/api-reference/components/image) is the component of choice to handle responsive images. However, we use a custom version of this component that is properly optimized with Chakra. This way we can use style props from Chakra but still be able to forward common or Next Image-specific props to the component for correct usage and rendering.
 
 ```tsx
-import { graphql } from "gatsby"
-
-export const query = graphql`
-  query {
-    hero: file(relativePath: { eq: "developers-eth-blocks.png" }) {
-      childImageSharp {
-        gatsbyImageData(
-          width: 800
-          layout: FIXED
-          placeholder: BLURRED
-          quality: 100
-        )
-      }
-    }
-  }
-`
-// These query results get passed as an object `props.data` to your component
-```
-
-- API call example:
-
-```tsx
-import { graphql } from "gatsby"
-
-export const repoInfo = graphql`
-  fragment repoInfo on GitHub_Repository {
-    stargazerCount
-    languages(orderBy: { field: SIZE, direction: DESC }, first: 2) {
-      nodes {
-        name
-      }
-    }
-    url
-  }
-`
-export const query = graphql`
-  query {
-    hardhatGitHub: github {
-      repository(owner: "nomiclabs", name: "hardhat") {
-        ...repoInfo
-      }
-    }
-  }
-`
-// These query results get passed as an object `props.data` to your component
-```
-
-### Using custom `GatsbyImage`
-
-[GatsbyImage](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) is the component of choice to handle responsive images processed through graphql. However, we use a custom version of this component that is properly optimized with Chakra. This way we can use style props from Chakra but still be able to forward common or GatsbyImage-specific props to the Gatsby component for correct usage and rendering.
-
-```tsx
-import GatsbyImage from "./components/GatsbyImage"
+import { Image } from "@/components/Image"
 ```

docs/next-docs/code-conventions.md renamed to docs/code-conventions.md

@@ -7,7 +7,7 @@ This is part of our [Design System implementation epic](https://github.com/ethe
 ## Basics
 
 - Use Chakra tokens for spacing, sizes, and breakpoints. [Chakra theme docs](https://chakra-ui.com/docs/styled-system/theme)
-- For colors use the semantic tokens defined in [this file](https://github.com/ethereum/ethereum-org-website/blob/dev/src/@chakra-ui/gatsby-plugin/semanticTokens.ts). These tokens will match the color variables used in the DS Figma file
+- For colors use the semantic tokens defined in [this file](https://github.com/ethereum/ethereum-org-website/blob/dev/src/%40chakra-ui/semanticTokens.ts). These tokens will match the color variables used in the DS Figma file
 - Use as many Chakra components and utils as possible
 - Read the [Best Practices doc](https://github.com/ethereum/ethereum-org-website/blob/dev/docs/best-practices.md) for more examples and info
 
@@ -29,7 +29,7 @@ If you are implementing:
 
 - A base component (a component that already exists in the [Chakra components list](https://chakra-ui.com/docs/components/), for example, the button or inputs)
   - Try to avoid creating a new component file `/ComponentA/index.tsx` if there is no additional or custom logic we need to add to them
-  - Create a theme file to override the default Chakra styles with the DS specs. See examples under the [Chakra theme folder](https://github.com/ethereum/ethereum-org-website/blob/dev/src/@chakra-ui/gatsby-plugin/components/)
+  - Create a theme file to override the default Chakra styles with the DS specs. See examples under the [Chakra theme folder](https://github.com/ethereum/ethereum-org-website/tree/dev/src/%40chakra-ui/components)
   - Create a `.stories.tsx` file under `src/components/BaseStories`
 - A new custom component (e.g. the PageHero)
   - Use as many Chakra components as possible

docs/ds-implementation.md

@@ -16,7 +16,7 @@ Event tracking is a great way to validate our design decisions and assumptions.
 
 ethereum.org uses Matomo, an open-source alternative to Google Analytics, allowing us to protect user privacy by not sharing any analytics with third parties.
 
-We implemented Matomo using the [JavaScript tracking client](https://developer.matomo.org/guides/tracking-javascript-guide) via the [`gatsby-matomo-plugin`](https://github.com/kremalicious/gatsby-plugin-matomo) Gatsby plugin.
+We implemented Matomo using the [JavaScript tracking client](https://developer.matomo.org/guides/tracking-javascript-guide) via the [`@socialgouv/matomo-next`](https://github.com/SocialGouv/matomo-next) package.
 
 ## What to measure?