Deploy v6.11.0

.all-contributorsrc

@@ -7313,7 +7313,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/70309026?v=4",
       "profile": "https://github.com/LuozhuZhang",
       "contributions": [
-        "doc"
+        "doc",
+        "ideas"
       ]
     },
     {
@@ -9671,6 +9672,52 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "aelmanaa",
+      "name": "Amine E.",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4503543?v=4",
+      "profile": "https://github.com/aelmanaa",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Roshan-R",
+      "name": "Roshan R Chandar",
+      "avatar_url": "https://avatars.githubusercontent.com/u/43182697?v=4",
+      "profile": "https://roshan.ml/",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "mossow",
+      "name": "mossow",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9072132?v=4",
+      "profile": "https://github.com/mossow",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "OpenWJY",
+      "name": "yujingwei",
+      "avatar_url": "https://avatars.githubusercontent.com/u/29328336?v=4",
+      "profile": "https://github.com/OpenWJY",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Olshansk",
+      "name": "Daniel Olshansky",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1892194?v=4",
+      "profile": "http://olshansky.info",
+      "contributions": [
+        "doc",
+        "ideas"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1190,7 +1190,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center"><a href="https://github.com/1337-ishaan"><img src="https://avatars.githubusercontent.com/u/64636222?v=4?s=100" width="100px;" alt="Ishaan Parmar"/><br /><sub><b>Ishaan Parmar</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=1337-ishaan" title="Code">💻</a> <a href="#design-1337-ishaan" title="Design">🎨</a> <a href="#ideas-1337-ishaan" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center"><a href="http://tarunbatra.com"><img src="https://avatars.githubusercontent.com/u/5329230?v=4?s=100" width="100px;" alt="Tarun Batra"/><br /><sub><b>Tarun Batra</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=tarunbatra" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Atarunbatra" title="Bug reports">🐛</a></td>
       <td align="center"><a href="https://github.com/max-donger"><img src="https://avatars.githubusercontent.com/u/56192627?v=4?s=100" width="100px;" alt="Max"/><br /><sub><b>Max</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=max-donger" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Amax-donger" title="Bug reports">🐛</a></td>
-      <td align="center"><a href="https://github.com/LuozhuZhang"><img src="https://avatars.githubusercontent.com/u/70309026?v=4?s=100" width="100px;" alt="Luozhu"/><br /><sub><b>Luozhu</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=LuozhuZhang" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/LuozhuZhang"><img src="https://avatars.githubusercontent.com/u/70309026?v=4?s=100" width="100px;" alt="Luozhu"/><br /><sub><b>Luozhu</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=LuozhuZhang" title="Documentation">📖</a> <a href="#ideas-LuozhuZhang" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
     <tr>
       <td align="center"><a href="http://www.linkedin.com/in/sharma-yash"><img src="https://avatars.githubusercontent.com/u/44340561?v=4?s=100" width="100px;" alt="Yash Sharma "/><br /><sub><b>Yash Sharma </b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=yash-sharma1" title="Documentation">📖</a></td>
@@ -1520,6 +1520,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center"><a href="http://sahilaujla.com"><img src="https://avatars.githubusercontent.com/u/83442423?v=4?s=100" width="100px;" alt="Sahil Aujla"/><br /><sub><b>Sahil Aujla</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=SahilAujla" title="Documentation">📖</a></td>
       <td align="center"><a href="https://github.com/ritave"><img src="https://avatars.githubusercontent.com/u/1614945?v=4?s=100" width="100px;" alt="Olaf Tomalka"/><br /><sub><b>Olaf Tomalka</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=ritave" title="Documentation">📖</a></td>
       <td align="center"><a href="https://github.com/armgp"><img src="https://avatars.githubusercontent.com/u/49094298?v=4?s=100" width="100px;" alt="Abhiram G P"/><br /><sub><b>Abhiram G P</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=armgp" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/aelmanaa"><img src="https://avatars.githubusercontent.com/u/4503543?v=4?s=100" width="100px;" alt="Amine E."/><br /><sub><b>Amine E.</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=aelmanaa" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://roshan.ml/"><img src="https://avatars.githubusercontent.com/u/43182697?v=4?s=100" width="100px;" alt="Roshan R Chandar"/><br /><sub><b>Roshan R Chandar</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Roshan-R" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/mossow"><img src="https://avatars.githubusercontent.com/u/9072132?v=4?s=100" width="100px;" alt="mossow"/><br /><sub><b>mossow</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=mossow" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/OpenWJY"><img src="https://avatars.githubusercontent.com/u/29328336?v=4?s=100" width="100px;" alt="yujingwei"/><br /><sub><b>yujingwei</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=OpenWJY" title="Documentation">📖</a></td>
+    </tr>
+    <tr>
+      <td align="center"><a href="http://olshansky.info"><img src="https://avatars.githubusercontent.com/u/1892194?v=4?s=100" width="100px;" alt="Daniel Olshansky"/><br /><sub><b>Daniel Olshansky</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Olshansk" title="Documentation">📖</a> <a href="#ideas-Olshansk" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
   </tbody>
 </table>

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: `gatsby-theme-i18n` with `/src/utils/translations.ts`
+- 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`
 
   - **Method one: `<Translation />` component (preferred if only needed in JSX)**
 
@@ -63,19 +63,18 @@ Markdown will be translated as whole pages of content, so no specific action is
     ;<Translation id="language-json-key" />
     ```
 
-  - **Method two: `translateMessageId()`**
+  - **Method two: `t()`**
 
     ```tsx
-    import { useIntl } from "react-intl"
-    import { translateMessageId } from "src/utils/translations"
+    import { useTranslation } from "gatsby-plugin-react-i18next"
 
     // Utilize anywhere in JS using
-    const intl = useIntl()
-    translateMessageId("language-json-key", intl)
+    const { t } = useTranslation()
+    t("language-json-key")
     ```
 
     ```tsx
-    const siteTitle = translateMessageId("site-title", intl)
+    const siteTitle = t("site-title")
     ```
 
 ## React Hooks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "6.10.2",
+  "version": "6.12.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",

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

@@ -0,0 +1,32 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+export const Tabs: ComponentStyleConfig = {
+  variants: {
+    primary: {
+      tab: {
+        borderTopRadius: "0.3rem",
+        borderBottom: "1px solid",
+        borderBottomColor: "primary",
+        px: 4,
+        py: "0.3rem",
+        _selected: {
+          color: "background",
+          bg: "primary",
+        },
+      },
+      tabpanels: {
+        mt: 4,
+      },
+      tabpanel: {
+        p: 6,
+        bg: "ednBackground",
+        border: "1px solid",
+        borderColor: "lightBorder",
+        borderRadius: "lg",
+      },
+    },
+  },
+  defaultProps: {
+    variant: "primary",
+  },
+}

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

@@ -3,11 +3,13 @@ import { Link } from "./Link"
 import { Tag } from "./Tag"
 import { Modal } from "./Modal"
 import { Checkbox } from "./Checkbox"
+import { Tabs } from "./Tabs"
 
 export default {
   Button,
   Link,
   Tag,
   Modal,
   Checkbox,
+  Tabs,
 }

src/components/Breadcrumbs.tsx

@@ -1,53 +1,11 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { Box, UnorderedList, ListItem } from "@chakra-ui/react"
 import { useIntl } from "react-intl"
 
 import Link from "./Link"
 import { isLang, supportedLanguages } from "../utils/languages"
 import { isTranslationKey, translateMessageId } from "../utils/translations"
 
-const ListContainer = styled.nav`
-  margin-bottom: 2rem;
-  list-style-type: none;
-  /* Avoid header overlap: */
-  position: relative;
-  z-index: 1;
-`
-
-const List = styled.ol`
-  margin: 0;
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
-`
-
-const ListItem = styled.li`
-  margin: 0;
-  margin-right: 0.5rem;
-  font-size: 0.875rem;
-  line-height: 140%;
-  letter-spacing: 0.04em;
-`
-
-const Slash = styled.span`
-  margin-left: 0.5rem;
-  color: ${(props) => props.theme.colors.textTableOfContents};
-`
-
-const CrumbLink = styled(Link)`
-  text-decoration: none;
-  color: ${(props) => props.theme.colors.textTableOfContents};
-
-  &:hover {
-    text-decoration: none;
-    color: ${(props) => props.theme.colors.primary};
-  }
-
-  &.active {
-    color: ${(props) => props.theme.colors.primary};
-  }
-`
-
 export interface IProps {
   slug: string
   startDepth?: number
@@ -91,21 +49,50 @@ const Breadcrumbs: React.FC<IProps> = ({
   })
 
   return (
-    <ListContainer aria-label="Breadcrumb" dir="auto" {...restProps}>
-      <List>
+    <Box
+      aria-label="Breadcrumb"
+      dir="auto"
+      {...restProps}
+      as="nav"
+      marginBottom={8}
+      listStyleType="none"
+      position="relative"
+      zIndex={1}
+    >
+      <UnorderedList
+        display="flex"
+        flexWrap="wrap"
+        listStyleType="none"
+        margin={0}
+      >
         {crumbs.map((crumb, idx) => (
-          <ListItem key={idx}>
-            <CrumbLink
+          <ListItem
+            key={idx}
+            margin={0}
+            marginRight={2}
+            fontSize="sm"
+            lineHeight="140%"
+            letterSpacing="wider"
+          >
+            <Link
               to={crumb.fullPath}
               isPartiallyActive={slug === crumb.fullPath}
+              textDecoration="none"
+              color="textTableOfContents"
+              _hover={{ color: "primary", textDecor: "none" }}
+              _active={{ color: "primary" }}
             >
               {crumb.text}
-            </CrumbLink>
-            {idx < crumbs.length - 1 && <Slash>/</Slash>}
+            </Link>
+            {idx < crumbs.length - 1 && (
+              <Box as="span" marginLeft={2} color="textTableOfContents">
+                /
+              </Box>
+            )}
           </ListItem>
         ))}
-      </List>
-    </ListContainer>
+      </UnorderedList>
+    </Box>
   )
 }