Deploy v6.0.0

.all-contributorsrc

@@ -8546,6 +8546,25 @@
       "contributions": [
         "ideas"
       ]
+    },
+    {
+      "login": "vvladd",
+      "name": "Vlad Kokhan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13506999?v=4",
+      "profile": "https://github.com/vvladd",
+      "contributions": [
+        "doc",
+        "translation"
+      ]
+    },
+    {
+      "login": "SavPhill",
+      "name": "Phill",
+      "avatar_url": "https://avatars.githubusercontent.com/u/38789408?v=4",
+      "profile": "https://github.com/SavPhill",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1360,6 +1360,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://www.aracki.me"><img src="https://avatars.githubusercontent.com/u/6129986?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ivan Aracki</b></sub></a><br /><a href="#ideas-Aracki" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://alphabeta.top/"><img src="https://avatars.githubusercontent.com/u/64178062?v=4?s=100" width="100px;" alt=""/><br /><sub><b>屠虫少年</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=always0e0w" title="Documentation">📖</a> <a href="#translation-always0e0w" title="Translation">🌍</a></td>
     <td align="center"><a href="http://stackoverflow.com/users/5062825/ramansb"><img src="https://avatars.githubusercontent.com/u/13969478?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ramandeep</b></sub></a><br /><a href="#ideas-RamanSB" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/vvladd"><img src="https://avatars.githubusercontent.com/u/13506999?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vlad Kokhan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=vvladd" title="Documentation">📖</a> <a href="#translation-vvladd" title="Translation">🌍</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/SavPhill"><img src="https://avatars.githubusercontent.com/u/38789408?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Phill</b></sub></a><br /><a href="#content-SavPhill" title="Content">🖋</a></td>
   </tr>
 </table>
 

docs/chakra-migration-guide.md

@@ -107,10 +107,24 @@ const Text = styled.p`
 ```tsx
 import { Icon } from "@chakra-ui/react"
 import { BsQuestionSquareFill } from "react-icons/bs"
-;<Icon as={BsQuestionSquareFill} />
+
+<Icon as={BsQuestionSquareFill} />
 ```
 
-- [Deprecated]`src/components/SharedStyledComponents` - we are not using this anymore, use Chakra components instead.
+- [Deprecated]`src/components/SharedStyledComponents` - we are not using this anymore, replace everything with Chakra components.
+
+```tsx
+// before
+import { ButtonPrimary, ButtonSecondary } from "../SharedStyledComponents"
+
+// now
+import Button from "../Button" // <-- use the new Button component built with Chakra
+
+// use our primary button (uses the default `solid` variant)
+<Button />
+// or the outline version
+<Button variant="outline" />
+```
 
 ## Do you have any other question?
 

gatsby-config.ts

@@ -143,8 +143,8 @@ const config: GatsbyConfig = {
         // See: https://www.gatsbyjs.org/docs/mdx/plugins/
         gatsbyRemarkPlugins: [
           {
-            // Local plugin to adjust the images urls of the translated md files
-            resolve: path.resolve(`./plugins/gatsby-remark-image-urls`),
+            // Local plugin to adjust the images & links urls of the translated md files
+            resolve: path.resolve(`./plugins/gatsby-remark-fix-static-urls`),
           },
           {
             resolve: `gatsby-remark-autolink-headers`,
@@ -203,7 +203,7 @@ const config: GatsbyConfig = {
     {
       resolve: "@chakra-ui/gatsby-plugin",
       options: {
-        resetCSS: false,
+        resetCSS: true,
         isUsingColorMode: true,
       },
     },

gatsby-node.ts

@@ -399,6 +399,10 @@ export const onCreatePage: GatsbyNode<any, Context>["onCreatePage"] = async ({
     }
   }
 
+  if (!page.context) {
+    return
+  }
+
   const isTranslated = page.context.locale !== defaultLanguage
   const hasNoContext = page.context.isOutdated === undefined
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "5.4.0",
+  "version": "6.0.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",
@@ -10,7 +10,7 @@
   "dependencies": {
     "@apollo/client": "^3.3.13",
     "@chakra-ui/gatsby-plugin": "^3.0.1",
-    "@chakra-ui/react": "^1.0.0",
+    "@chakra-ui/react": "^2.2.8",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@formatjs/intl-locale": "^2.4.14",
@@ -24,50 +24,50 @@
     "clipboard": "^2.0.6",
     "cross-fetch": "^3.1.5",
     "dotenv": "^8.2.0",
-    "embla-carousel-react": "^6.2.0",
+    "embla-carousel-react": "^7.0.0",
     "ethereum-blockies-base64": "^1.0.2",
-    "focus-trap-react": "^8.11.2",
+    "focus-trap-react": "^10.0.0",
     "framer-motion": "^6.5.1",
-    "gatsby": "^4.15.0",
+    "gatsby": "^4.21.1",
     "gatsby-plugin-emotion": "^7.19.0",
     "gatsby-plugin-gatsby-cloud": "^4.20.0",
-    "gatsby-plugin-image": "^2.0.0",
-    "gatsby-plugin-manifest": "^4.10.1",
+    "gatsby-plugin-image": "^2.21.0",
+    "gatsby-plugin-manifest": "^4.21.0",
     "gatsby-plugin-matomo": "^0.9.0",
-    "gatsby-plugin-mdx": "^2.14.1",
+    "gatsby-plugin-mdx": "^3.0.0",
     "gatsby-plugin-netlify": "^5.0.1",
     "gatsby-plugin-react-helmet": "^5.0.0",
     "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
     "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-robots-txt": "^1.7.1",
-    "gatsby-plugin-sharp": "^4.10.0",
-    "gatsby-plugin-sitemap": "^5.0.0",
-    "gatsby-remark-autolink-headers": "^5.0.0",
-    "gatsby-remark-copy-linked-files": "^5.0.0",
-    "gatsby-remark-images": "^6.0.0",
+    "gatsby-plugin-sharp": "^4.21.0",
+    "gatsby-plugin-sitemap": "^5.21.0",
+    "gatsby-remark-autolink-headers": "^5.21.0",
+    "gatsby-remark-copy-linked-files": "^5.21.0",
+    "gatsby-remark-images": "^6.21.0",
     "gatsby-remark-reading-time": "^1.1.0",
-    "gatsby-source-filesystem": "^4.0.0",
+    "gatsby-source-filesystem": "^4.21.1",
     "gatsby-theme-i18n": "^3.0.0",
     "gatsby-theme-i18n-react-intl": "^3.0.0",
     "gatsby-transformer-csv": "^4.0.0",
     "gatsby-transformer-gitinfo": "^1.1.0",
     "gatsby-transformer-json": "^4.11.0",
     "gatsby-transformer-remark": "^3.0.0",
-    "gatsby-transformer-sharp": "^4.10.0",
+    "gatsby-transformer-sharp": "^4.21.0",
     "is-relative-url": "^3.0.0",
     "lodash": "^4.17.21",
     "luxon": "^1.24.1",
     "netlify-lambda": "^2.0.3",
     "polished": "^4.1.4",
     "prism-react-renderer": "^1.1.1",
     "prismjs": "^1.27.0",
-    "react": "17.0.2",
+    "react": "^18.0.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.0.0",
     "react-emoji-render": "^1.2.4",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
-    "react-instantsearch-dom": "^6.6.0",
+    "react-instantsearch-dom": "^6.32.0",
     "react-intl": "^3.12.1",
     "react-select": "^4.3.0",
     "recharts": "^2.1.9",
@@ -81,9 +81,9 @@
     "@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/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-instantsearch-core": "^6.26.2",
     "@types/styled-system": "^5.1.15",
     "babel-preset-gatsby": "^2.14.0",
     "github-slugger": "^1.3.0",
@@ -93,7 +93,6 @@
     "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"
   },

plugins/gatsby-remark-image-urls/index.js → plugins/gatsby-remark-fix-static-urls/index.js

@@ -3,7 +3,8 @@ const visitWithParents = require("unist-util-visit-parents")
 const isRelativeUrl = require("is-relative-url")
 
 /**
- * Modify the images urls on translated md files to point to the source ones.
+ * Modify the images & links urls on translated md files to point to the source
+ * ones.
  *
  * E.g.
  * Before
@@ -27,12 +28,18 @@ module.exports = ({ markdownNode, markdownAST }) => {
     return markdownAST
   }
 
-  // loop for each image node in the mdx file
-  visitWithParents(markdownAST, ["image"], (node) => {
+  // loop for each node in the mdx file
+  visitWithParents(markdownAST, ["image", "link"], (node) => {
     const isRelativeToMdFile = isRelativeUrl(node.url)
     if (isRelativeToMdFile) {
-      const fileName = path.basename(node.url)
-      node.url = `${relativePath}/${fileName}`
+      const ext = path.extname(node.url)
+
+      // ignore things that are not files, e.g. a hashed link '#anchor'
+      if (ext === "") {
+        return
+      }
+
+      node.url = path.join(relativePath, node.url)
     }
   })
 

src/@chakra-ui/gatsby-plugin/components/Button.ts

@@ -0,0 +1,74 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+const commonOutline = {
+  border: "1px",
+  color: "text",
+  bg: "transparent",
+  borderColor: "text",
+  _hover: {
+    color: "primary",
+    bg: "background",
+    borderColor: "primary",
+  },
+  _active: {
+    color: "primary",
+    bg: "primaryLight",
+    borderColor: "primary",
+  },
+  _focus: {
+    color: "primary",
+    borderColor: "background",
+  },
+  _disabled: {
+    color: "disabled",
+    borderColor: "disabled",
+    opacity: 1,
+  },
+}
+
+export const Button: ComponentStyleConfig = {
+  baseStyle: {
+    fontWeight: "normal",
+    borderRadius: "base",
+    _hover: {
+      textDecoration: "none",
+      boxShadow: "primary",
+    },
+    _focus: {
+      boxShadow: "outline",
+      outline: 0,
+    },
+  },
+  sizes: {
+    md: {
+      h: 42,
+    },
+  },
+  variants: {
+    // solid is the default variant used by chakra
+    solid: {
+      color: "buttonColor",
+      bg: "primary",
+      border: 0,
+      _hover: {
+        bg: "primary",
+        opacity: 0.8,
+      },
+      _active: {
+        bg: "primaryHover",
+      },
+      _disabled: {
+        bg: "disabled",
+        opacity: 1,
+      },
+    },
+    outline: {
+      ...commonOutline,
+    },
+    "outline-color": {
+      ...commonOutline,
+      color: "primary",
+      borderColor: "primary",
+    },
+  },
+}

src/@chakra-ui/gatsby-plugin/components/Link.ts

@@ -0,0 +1,15 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+export const Link: ComponentStyleConfig = {
+  baseStyle: {
+    color: "primary",
+    textDecoration: "underline",
+    _focus: {
+      boxShadow: "none",
+    },
+    _focusVisible: {
+      boxShadow: "none",
+      outline: "auto",
+    },
+  },
+}

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

@@ -0,0 +1,2 @@
+export * from "./Link"
+export * from "./Button"

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

@@ -4,6 +4,7 @@ const colors = {
   grey: {
     100: "#f7f7f7",
     300: "#d4d4d4",
+    400: "#b0b0b0",
     500: "#646464",
     700: "#222222",
     900: "#141414",
@@ -21,7 +22,7 @@ const colors = {
     800: "#451900",
   },
   red: {
-    600: "#b80000",
+    500: "#b80000",
   },
   green: {
     500: "#109e62",

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

@@ -1,7 +1,11 @@
 import colors from "./colors"
+import shadows from "./shadows"
 
+// Check the following link to see all the possible options:
+// https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/foundations/index.ts
 const foundations = {
   colors,
+  shadows,
 }
 
 export default foundations

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

@@ -0,0 +1,7 @@
+const shadows = {
+  // using css variables bc shadows do not support color tokens yet
+  primary: "4px 4px 0px 0px var(--eth-colors-primaryLight)",
+  outline: "0 0 0 4px var(--eth-colors-primaryHover)",
+}
+
+export default shadows

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

@@ -31,15 +31,15 @@ const semanticTokens = {
 
     // Design System colors
     primary: { _light: "blue.500", _dark: "orange.500" },
+    primaryLight: { _light: "blue.100", _dark: "orange.100" },
     primaryDark: { _light: "blue.700", _dark: "orange.800" },
     primaryHover: { _light: "blue.300", _dark: "orange.300" },
-    primaryLight: { _light: "blue.100", _dark: "orange.100" },
     body: { _light: "grey.700", _dark: "grey.100" },
     bodyLight: { _light: "grey.500", _dark: "grey.100" },
-    disabled: { _light: "grey.300", _dark: "grey.500" },
+    disabled: { _light: "grey.400", _dark: "grey.500" },
     background: { _light: "white", _dark: "grey.700" },
     success: "green.500",
-    error: "red.600",
+    error: "red.500",
     attention: "yellow.200",
   },
 }