Merge branch 'dev' into fade-icons-find-wallet

Author: corwintines

.all-contributorsrc

@@ -8319,6 +8319,61 @@
         "doc",
         "ideas"
       ]
+    },
+    {
+      "login": "michaelmccallam",
+      "name": "Michael McCallam",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3510607?v=4",
+      "profile": "https://github.com/michaelmccallam",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "PolinaShanti",
+      "name": "Polina G.",
+      "avatar_url": "https://avatars.githubusercontent.com/u/110098268?v=4",
+      "profile": "https://nownodes.io/",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Cerebro92",
+      "name": "Neeraj Gahlot",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13215478?v=4",
+      "profile": "https://github.com/Cerebro92",
+      "contributions": [
+        "doc",
+        "bug"
+      ]
+    },
+    {
+      "login": "vrinek",
+      "name": "Kostas",
+      "avatar_url": "https://avatars.githubusercontent.com/u/81346?v=4",
+      "profile": "https://github.com/vrinek",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "rogueassasin1729",
+      "name": "rogueassasin1729",
+      "avatar_url": "https://avatars.githubusercontent.com/u/92800000?v=4",
+      "profile": "https://github.com/rogueassasin1729",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Pandapip1",
+      "name": "Pandapip1",
+      "avatar_url": "https://avatars.githubusercontent.com/u/45835846?v=4",
+      "profile": "https://pandapip1.com/",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1330,6 +1330,14 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://odair.dev"><img src="https://avatars.githubusercontent.com/u/45074733?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Odair Augusto Trujillo Orozco</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=OdairTrujillo" title="Documentation">📖</a> <a href="#ideas-OdairTrujillo" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://github.com/Unforkable"><img src="https://avatars.githubusercontent.com/u/86481149?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Unforkable</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Unforkable" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Rodrigolvc"><img src="https://avatars.githubusercontent.com/u/108540208?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rodrigo vasquez</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Rodrigolvc" title="Documentation">📖</a> <a href="#ideas-Rodrigolvc" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/michaelmccallam"><img src="https://avatars.githubusercontent.com/u/3510607?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael McCallam</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=michaelmccallam" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://nownodes.io/"><img src="https://avatars.githubusercontent.com/u/110098268?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Polina G.</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=PolinaShanti" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/Cerebro92"><img src="https://avatars.githubusercontent.com/u/13215478?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Neeraj Gahlot</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Cerebro92" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3ACerebro92" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/vrinek"><img src="https://avatars.githubusercontent.com/u/81346?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kostas</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=vrinek" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/rogueassasin1729"><img src="https://avatars.githubusercontent.com/u/92800000?v=4?s=100" width="100px;" alt=""/><br /><sub><b>rogueassasin1729</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=rogueassasin1729" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://pandapip1.com/"><img src="https://avatars.githubusercontent.com/u/45835846?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pandapip1</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Pandapip1" title="Documentation">📖</a></td>
   </tr>
 </table>
 

docs/best-practices.md

@@ -104,14 +104,14 @@ export default ComponentName
 ## Styling
 
 - `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/)
+- We use [emotion](https://emotion.sh/)
 
   - Tagged template literals are used to style custom components
 
   ```tsx
-  // Example of styling syntax using styled-components
+  // Example of styling syntax using emotion
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const GenericButton = styled.div`
     width: 200px;
@@ -128,14 +128,12 @@ export default ComponentName
   // ie: <PrimaryButton>Text</PrimaryButton>
   ```
 
-  - 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.ts` are automatically passed as a prop object to styled components
 
   ```tsx
   // Example of theme.ts usage
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const Container = styled.div`
     background: ${(props) => props.theme.colors.background};

gatsby-config.ts

@@ -185,7 +185,19 @@ const config: GatsbyConfig = {
       },
     },
     // CSS in JS
-    `gatsby-plugin-styled-components`,
+    {
+      resolve: `gatsby-plugin-emotion`,
+      options: {
+        labelFormat: "[filename]--[local]",
+      },
+    },
+    {
+      resolve: "@chakra-ui/gatsby-plugin",
+      options: {
+        resetCSS: false,
+        isUsingColorMode: true,
+      },
+    },
     // Source assets
     {
       resolve: `gatsby-source-filesystem`,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "4.10.0",
+  "version": "4.11.1",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",
@@ -9,13 +9,16 @@
   "private": false,
   "dependencies": {
     "@apollo/client": "^3.3.13",
+    "@chakra-ui/gatsby-plugin": "^3.0.1",
+    "@chakra-ui/react": "^1.0.0",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@formatjs/intl-locale": "^2.4.14",
     "@formatjs/intl-numberformat": "^6.1.4",
     "@mdx-js/mdx": "^1.6.5",
     "@mdx-js/react": "^1.6.5",
     "algoliasearch": "^4.3.0",
     "axios": "^0.21.2",
-    "babel-plugin-styled-components": "^1.10.7",
     "browser-lang": "^0.1.0",
     "browserslist": "^4.21.0",
     "clipboard": "^2.0.6",
@@ -24,8 +27,9 @@
     "embla-carousel-react": "^6.2.0",
     "ethereum-blockies-base64": "^1.0.2",
     "focus-trap-react": "^8.11.2",
-    "framer-motion": "^4.1.3",
+    "framer-motion": "^6.5.1",
     "gatsby": "^4.15.0",
+    "gatsby-plugin-emotion": "^7.19.0",
     "gatsby-plugin-gatsby-cloud": "^4.3.0",
     "gatsby-plugin-image": "^2.0.0",
     "gatsby-plugin-manifest": "^4.10.1",
@@ -37,7 +41,6 @@
     "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-sharp": "^4.10.0",
     "gatsby-plugin-sitemap": "^5.0.0",
-    "gatsby-plugin-styled-components": "^5.0.0",
     "gatsby-remark-autolink-headers": "^5.0.0",
     "gatsby-remark-copy-linked-files": "^5.0.0",
     "gatsby-remark-images": "^6.0.0",
@@ -67,29 +70,30 @@
     "react-intl": "^3.12.1",
     "react-select": "^4.3.0",
     "recharts": "^2.1.9",
-    "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",
     "unist-util-visit-parents": "^2.1.2"
   },
   "devDependencies": {
     "@netlify/functions": "^1.0.0",
     "@types/browser-lang": "^0.1.0",
+    "@types/github-slugger": "^1.3.0",
     "@types/luxon": "^2.3.2",
     "@types/mdx-js__react": "^1.5.5",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-instantsearch-dom": "^6.12.3",
-    "@types/styled-components": "^5.1.25",
     "@types/styled-system": "^5.1.15",
     "babel-preset-gatsby": "^2.14.0",
     "github-slugger": "^1.3.0",
+    "gray-matter": "^4.0.3",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
     "minimist": "^1.2.6",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "react-test-renderer": "^17.0.1",
+    "ts-node": "^10.9.1",
     "typescript": "^4.6.3"
   },
   "scripts": {
@@ -100,7 +104,8 @@
     "crowdin-clean": "rm -rf .crowdin && mkdir .crowdin",
     "crowdin-import": "ts-node src/scripts/crowdin-import.ts",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
-    "generate-heading-ids": "node src/scripts/generate-heading-ids.js",
+    "markdown-checker": "node src/scripts/markdown-checker.js",
+    "generate-heading-ids": "ts-node --esm src/scripts/generateHeadingIds.mts",
     "start": "gatsby develop",
     "start:lambda": "netlify-lambda serve src/lambda",
     "start:static": "gatsby build && gatsby serve",

src/@chakra-ui/gatsby-plugin/foundations/colors.ts

@@ -0,0 +1,5 @@
+export type Colors = typeof colors
+
+const colors = {}
+
+export default colors

src/@chakra-ui/gatsby-plugin/foundations/index.ts

@@ -0,0 +1,7 @@
+import colors from "./colors"
+
+const foundations = {
+  colors,
+}
+
+export default foundations

src/@chakra-ui/gatsby-plugin/styles.ts

@@ -0,0 +1,22 @@
+const styles = {
+  global: (_props) => ({
+    /**
+     * Current scenario: we have 2 places where global styles are defined.
+     * - Our legacy global styles under `src/components/GlobalStyle.ts`
+     * - Chakra also defines its own global styles. Check them here:
+     *  https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts
+     *
+     * Having those 2 global styles creates some style conflicts. Here we
+     * override some of the default Chakra globals in order to keep the same
+     * styles as we had in the legacy one.
+     *
+     * TODO: remove these overrides as we adopt the new Design System and we
+     * don't need the global styles anymore
+     */
+    body: {
+      lineHeight: "1.6rem",
+    },
+  }),
+}
+
+export default styles

src/@chakra-ui/gatsby-plugin/theme.ts

@@ -0,0 +1,25 @@
+import {
+  extendTheme,
+  type ThemeConfig,
+  type ThemeOverride,
+} from "@chakra-ui/react"
+
+// Global style overrides
+import styles from "./styles"
+
+// Foundational style overrides
+import foundations from "./foundations"
+
+const config: ThemeConfig = {
+  cssVarPrefix: "eth",
+  initialColorMode: "light",
+  useSystemColorMode: true,
+}
+
+const theme: ThemeOverride = {
+  config,
+  styles,
+  ...foundations,
+}
+
+export default extendTheme(theme)

src/components/Accordion.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 // TODO add motion animation
 // import { motion } from "framer-motion"
 import { FakeLink } from "./SharedStyledComponents"