Release candidate v7.22.0

.all-contributorsrc

@@ -10523,6 +10523,42 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "0xMimir",
+      "name": "0xMimir",
+      "avatar_url": "https://avatars.githubusercontent.com/u/108837858?v=4",
+      "profile": "https://github.com/0xMimir",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "bilaljawed",
+      "name": "Bilal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/17548944?v=4",
+      "profile": "https://github.com/bilaljawed",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "ilanolkies",
+      "name": "Ilan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/36084092?v=4",
+      "profile": "https://ilanolkies.com",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "umededoteth",
+      "name": "umede",
+      "avatar_url": "https://avatars.githubusercontent.com/u/122288558?v=4",
+      "profile": "https://mirror.xyz/umede.eth",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1643,6 +1643,12 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://linktr.ee/kritik"><img src="https://avatars.githubusercontent.com/u/57076429?v=4?s=100" width="100px;" alt="kritik sah"/><br /><sub><b>kritik sah</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Akritik-sah" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Fuliggine"><img src="https://avatars.githubusercontent.com/u/56844974?v=4?s=100" width="100px;" alt="Fuliggine"/><br /><sub><b>Fuliggine</b></sub></a><br /><a href="#content-Fuliggine" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Omsify"><img src="https://avatars.githubusercontent.com/u/87442202?v=4?s=100" width="100px;" alt="Omsify"/><br /><sub><b>Omsify</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AOmsify" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/0xMimir"><img src="https://avatars.githubusercontent.com/u/108837858?v=4?s=100" width="100px;" alt="0xMimir"/><br /><sub><b>0xMimir</b></sub></a><br /><a href="#content-0xMimir" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/bilaljawed"><img src="https://avatars.githubusercontent.com/u/17548944?v=4?s=100" width="100px;" alt="Bilal"/><br /><sub><b>Bilal</b></sub></a><br /><a href="#content-bilaljawed" title="Content">🖋</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://ilanolkies.com"><img src="https://avatars.githubusercontent.com/u/36084092?v=4?s=100" width="100px;" alt="Ilan"/><br /><sub><b>Ilan</b></sub></a><br /><a href="#content-ilanolkies" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://mirror.xyz/umede.eth"><img src="https://avatars.githubusercontent.com/u/122288558?v=4?s=100" width="100px;" alt="umede"/><br /><sub><b>umede</b></sub></a><br /><a href="#content-umededoteth" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

docs/best-practices.md

@@ -229,3 +229,11 @@ export const query = graphql`
 `
 // 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"
+```

i18n/config.json

@@ -7,6 +7,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "am",
+    "crowdinCode": "am",
+    "name": "Amharic",
+    "localName": "አማርኛ",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "ar",
     "crowdinCode": "ar",
@@ -23,6 +31,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "be",
+    "crowdinCode": "be",
+    "name": "Belarusian",
+    "localName": "беларускі",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "bg",
     "crowdinCode": "bg",
@@ -39,6 +55,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "bs",
+    "crowdinCode": "bs",
+    "name": "Bosnian",
+    "localName": "босански",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "ca",
     "crowdinCode": "ca",
@@ -159,6 +183,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "hy-am",
+    "crowdinCode": "hy-AM",
+    "name": "Armenian",
+    "localName": "հայերեն",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "id",
     "crowdinCode": "id",
@@ -215,6 +247,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "kn",
+    "crowdinCode": "kn",
+    "name": "Kannada",
+    "localName": "ಕನ್ನಡ",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "ko",
     "crowdinCode": "ko",
@@ -375,6 +415,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "tk",
+    "crowdinCode": "tk",
+    "name": "Turkmen",
+    "localName": "türkmen",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "th",
     "crowdinCode": "th",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.21.0",
+  "version": "7.22.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",

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

@@ -29,30 +29,30 @@ const styles = {
     },
     // imported global CSS styles for list items
     li: {
-      "margin-bottom": "calc(1.45rem / 2)",
+      marginBottom: "calc(1.45rem / 2)",
     },
     "ol li": {
-      "padding-left": "0",
+      paddingInlineStart: "0",
     },
     "ul li": {
-      "padding-left": "0",
+      paddingInlineStart: "0",
     },
     "li > ol": {
-      "margin-left": "1.45rem",
-      "margin-bottom": "calc(1.45rem / 2)",
-      "margin-top": "calc(1.45rem / 2)",
+      marginInlineStart: "1.45rem",
+      marginBottom: "calc(1.45rem / 2)",
+      marginTop: "calc(1.45rem / 2)",
     },
     "li > ul": {
-      "margin-left": "1.45rem",
-      "margin-bottom": "calc(1.45rem / 2)",
-      "margin-top": "calc(1.45rem / 2)",
+      marginInlineStart: "1.45rem",
+      marginBottom: "calc(1.45rem / 2)",
+      marginTop: "calc(1.45rem / 2)",
     },
 
     "li *:last-child": {
-      "margin-bottom": "0",
+      marginBottom: "0",
     },
     "li > p": {
-      "margin-bottom": "calc(1.45rem / 2)",
+      marginBottom: "calc(1.45rem / 2)",
     },
     // Anchor tag styles
     // Selected specifically for mdx rendered side icon link

src/components/ActionCard.tsx

@@ -10,10 +10,11 @@ import {
   useColorModeValue,
   LinkBoxProps,
 } from "@chakra-ui/react"
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
+import { IGatsbyImageData } from "gatsby-plugin-image"
 
 import Text from "./OldText"
 import { BaseLink } from "./Link"
+import GatsbyImage from "./GatsbyImage"
 
 const linkBoxFocusStyles: BoxProps = {
   borderRadius: "base",
@@ -77,9 +78,8 @@ const ActionCard: React.FC<IProps> = ({
         boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
       >
         {!isImageURL && (
-          <Image
+          <GatsbyImage
             alt={alt || ""}
-            as={GatsbyImage}
             maxH="257px"
             maxW={{ base: "311px", sm: "372px" }}
             minW="100px"

src/components/AssetDownload/AssetDownloadImage.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { Center, Img } from "@chakra-ui/react"
-import { GatsbyImage } from "gatsby-plugin-image"
+import { Center } from "@chakra-ui/react"
+import GatsbyImage from "../GatsbyImage"
 
 import { getImage, ImageDataLike } from "../../utils/image"
 
@@ -13,8 +13,7 @@ const AssetDownloadImage = ({ image, alt }: Props) => {
   return (
     <Center border="1px" borderColor="white700" p={8} w="100%">
       {image && (
-        <Img
-          as={GatsbyImage}
+        <GatsbyImage
           image={getImage(image)!}
           alt={alt}
           w="100%"

src/components/BugBountyPoints.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { useTheme } from "@emotion/react"
 import { useStaticQuery, graphql } from "gatsby"
-import { GatsbyImage } from "gatsby-plugin-image"
 import { Box, Flex, Icon } from "@chakra-ui/react"
 import axios from "axios"
 
@@ -11,6 +10,7 @@ import InlineLink from "./Link"
 import Tooltip from "./Tooltip"
 import Text from "./OldText"
 import OldHeading from "./OldHeading"
+import GatsbyImage from "./GatsbyImage"
 
 import { getImage } from "../utils/image"
 import { MdInfoOutline } from "react-icons/md"
@@ -175,21 +175,13 @@ const BugBountyPoints: React.FC<IProps> = () => {
             </Text>
           </Flex>
           <Flex align="center" wrap="wrap">
-            <GatsbyImage
-              image={getImage(data.dai)!}
-              style={{ marginRight: "0.5rem" }}
-              alt=""
-            />
+            <GatsbyImage image={getImage(data.dai)!} alt="" me="2" />
             <Text fontSize="xl" m={0} mr={4}>
               {pointsInDAI} DAI
             </Text>
           </Flex>
           <Flex align="center" wrap="wrap">
-            <GatsbyImage
-              image={getImage(ethImage)!}
-              style={{ marginRight: "0.5rem" }}
-              alt=""
-            />
+            <GatsbyImage image={getImage(ethImage)!} alt="" me="2" />
             <Text fontSize="xl" m={0} mr={4}>
               {pointsInETH} ETH
             </Text>

src/components/Callout.tsx

@@ -1,12 +1,13 @@
 // Libraries
 import React from "react"
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
-import { Flex, FlexProps, Image } from "@chakra-ui/react"
+import { IGatsbyImageData } from "gatsby-plugin-image"
+import { Flex, FlexProps } from "@chakra-ui/react"
 
 // Components
 import Translation from "./Translation"
 import Emoji from "./Emoji"
 import Text from "./OldText"
+import GatsbyImage from "./GatsbyImage"
 import OldHeading from "./OldHeading"
 
 import type { TranslationKey } from "../utils/translations"
@@ -49,8 +50,7 @@ const Callout: React.FC<IProps> = ({
     {...rest}
   >
     {image && (
-      <Image
-        as={GatsbyImage}
+      <GatsbyImage
         image={image}
         alt={alt || ""}
         mt={-40}

src/components/CalloutBanner.tsx

@@ -1,10 +1,11 @@
 import React from "react"
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
+import { IGatsbyImageData } from "gatsby-plugin-image"
 import { Flex, FlexProps, Image } from "@chakra-ui/react"
 
 import Translation from "./Translation"
 import Text from "./OldText"
 import OldHeading from "./OldHeading"
+import GatsbyImage from "./GatsbyImage"
 import { TranslationKey } from "../utils/translations"
 
 export interface IProps extends FlexProps {
@@ -33,8 +34,7 @@ const CalloutBanner: React.FC<IProps> = ({
     borderRadius="base"
     {...restProps}
   >
-    <Image
-      as={GatsbyImage}
+    <GatsbyImage
       image={image}
       alt={alt}
       objectFit="contain"

src/components/CardList.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
+import { IGatsbyImageData } from "gatsby-plugin-image"
 import {
   Box,
   BoxProps,
@@ -11,8 +11,9 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react"
 
-import * as url from "../utils/url"
 import { BaseLink } from "./Link"
+import GatsbyImage from "./GatsbyImage"
+import * as url from "../utils/url"
 
 export type CardListItem = {
   title?: ReactNode
@@ -57,9 +58,7 @@ const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
 
   return (
     <CardContainer {...rest}>
-      {image && (
-        <Box as={GatsbyImage} image={image} alt={alt || ""} minW="20px" />
-      )}
+      {image && <GatsbyImage image={image} alt={alt || ""} minW="20px" />}
       <Flex flex="1 1 75%" direction="column">
         {isLink ? (
           <LinkOverlay