Merge pull request #12048 from ethereum/update-next-docs

docs: update Next docs

Author: nhsz

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
+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()
@@ -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?