Merge pull request #8038 from ethereum/dev

Deploy v6.6.0

.all-contributorsrc

@@ -4661,7 +4661,8 @@
       "profile": "https://github.com/ndrozd",
       "contributions": [
         "bug",
-        "doc"
+        "doc",
+        "a11y"
       ]
     },
     {
@@ -8961,6 +8962,43 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "ImMiguelP",
+      "name": "Miguel",
+      "avatar_url": "https://avatars.githubusercontent.com/u/61770010?v=4",
+      "profile": "https://github.com/ImMiguelP",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "rayzhudev",
+      "name": "Ray Zhu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/20132960?v=4",
+      "profile": "https://github.com/rayzhudev",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "BenedettiLucca",
+      "name": "Lucca Benedetti",
+      "avatar_url": "https://avatars.githubusercontent.com/u/108427035?v=4",
+      "profile": "https://github.com/BenedettiLucca",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "MacMorgan",
+      "name": "Mac Morgan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/17681?v=4",
+      "profile": "http://www.printfly.com/",
+      "contributions": [
+        "doc",
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -826,7 +826,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center"><a href="https://github.com/raj-shekhar1"><img src="https://avatars.githubusercontent.com/u/55439064?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Raj Shekhar Bhardwaj</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=raj-shekhar1" title="Documentation">📖</a> <a href="#ideas-raj-shekhar1" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center"><a href="https://github.com/joakimengerstam"><img src="https://avatars.githubusercontent.com/u/12713452?v=4?s=100" width="100px;" alt=""/><br /><sub><b>joakimengerstam</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=joakimengerstam" title="Documentation">📖</a></td>
-      <td align="center"><a href="https://github.com/ndrozd"><img src="https://avatars.githubusercontent.com/u/6696080?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nikita Drozd</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Androzd" title="Bug reports">🐛</a> <a href="https://github.com/ethereum/ethereum-org-website/commits?author=ndrozd" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/ndrozd"><img src="https://avatars.githubusercontent.com/u/6696080?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nikita Drozd</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Androzd" title="Bug reports">🐛</a> <a href="https://github.com/ethereum/ethereum-org-website/commits?author=ndrozd" title="Documentation">📖</a> <a href="#a11y-ndrozd" title="Accessibility">️️️️♿️</a></td>
       <td align="center"><a href="http://scottcameron.uk"><img src="https://avatars.githubusercontent.com/u/83584447?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Scott</b></sub></a><br /><a href="#design-Scott1UP" title="Design">🎨</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AScott1UP" title="Bug reports">🐛</a></td>
       <td align="center"><a href="http://stefanrs.me"><img src="https://avatars.githubusercontent.com/u/22087626?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Stefan Sathianathen</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=stefanrsathianathen" title="Documentation">📖</a></td>
       <td align="center"><a href="https://miroslavlehotsky.eu/"><img src="https://avatars.githubusercontent.com/u/18735418?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Miroslav Lehotsky</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=mlehotsky13" title="Documentation">📖</a></td>
@@ -1420,6 +1420,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center"><a href="https://github.com/d1onys1us"><img src="https://avatars.githubusercontent.com/u/13951458?v=4?s=100" width="100px;" alt=""/><br /><sub><b>d1onys1us</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=d1onys1us" title="Documentation">📖</a></td>
       <td align="center"><a href="https://github.com/thib-web3"><img src="https://avatars.githubusercontent.com/u/66329321?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Thibaut</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=thib-web3" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/ImMiguelP"><img src="https://avatars.githubusercontent.com/u/61770010?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Miguel</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=ImMiguelP" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/rayzhudev"><img src="https://avatars.githubusercontent.com/u/20132960?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ray Zhu</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=rayzhudev" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/BenedettiLucca"><img src="https://avatars.githubusercontent.com/u/108427035?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Lucca Benedetti</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=BenedettiLucca" title="Documentation">📖</a></td>
+      <td align="center"><a href="http://www.printfly.com/"><img src="https://avatars.githubusercontent.com/u/17681?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mac Morgan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=MacMorgan" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AMacMorgan" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

i18n/config.json

@@ -249,7 +249,7 @@
   },
   {
     "code": "ph",
-    "hrefLang": "ph",
+    "hrefLang": "fil",
     "name": "Filipino",
     "localName": "Filipino",
     "langDir": "ltr",
@@ -359,6 +359,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "uz",
+    "hrefLang": "uz",
+    "name": "Uzbek",
+    "localName": "O'zbekcha",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "vi",
     "hrefLang": "vi",

package.json

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

src/components/ImageCard.tsx

@@ -1,25 +1,6 @@
 import React from "react"
-import styled from "@emotion/styled"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
-
-const StyledCard = styled.div`
-  background: ${(props) => props.theme.colors.searchBackground};
-  border-radius: 4px;
-  border: 1px solid ${(props) => props.theme.colors.lightBorder};
-  padding: 1.5rem;
-`
-
-const Image = styled(GatsbyImage)`
-  & > img {
-    width: 3em !important;
-    height: 3em !important;
-    margin-bottom: 1em !important;
-  }
-`
-
-const Description = styled.p`
-  opacity: 0.8;
-`
+import { Box, Heading, Image, Text } from "@chakra-ui/react"
 
 export interface IProps {
   children?: React.ReactNode
@@ -36,14 +17,19 @@ const ImageCard: React.FC<IProps> = ({
   title,
   description,
   children,
-  className,
 }) => (
-  <StyledCard className={className}>
-    <Image image={image} alt={alt} />
-    <h3>{title}</h3>
-    <Description>{description}</Description>
+  <Box
+    bg="searchBackground"
+    borderRadius="base"
+    border="1px"
+    borderColor="lightBorder"
+    p={6}
+  >
+    <Image as={GatsbyImage} image={image} alt={alt} w={12} h={12} mb={4} />
+    <Heading as="h3">{title}</Heading>
+    <Text opacity={0.8}>{description}</Text>
     {children}
-  </StyledCard>
+  </Box>
 )
 
 export default ImageCard

src/components/InfoBanner.tsx

@@ -1,60 +1,6 @@
 import React from "react"
-import styled from "@emotion/styled"
-import Emoji from "./OldEmoji"
-import { margin } from "styled-system"
-
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-`
-
-const Banner = styled.div<{
-  shouldCenter: boolean
-  isWarning: boolean
-}>`
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  padding: 1.5rem;
-  border-radius: 2px;
-  max-width: ${(props) => (props.shouldCenter ? `55rem` : `100%`)};
-  color: ${(props) => props.theme.colors.black300};
-  background: ${(props) =>
-    props.isWarning
-      ? props.theme.colors.warning
-      : props.theme.colors.infoBanner};
-
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    flex-direction: column;
-  }
-
-  ${margin}
-`
-
-const StyledEmoji = styled(Emoji)`
-  flex-grow: 0;
-  flex-shrink: 0;
-  margin-right: 1.5rem;
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    align-self: flex-start;
-    margin-right: 0;
-    margin-bottom: 0.5rem;
-  }
-`
-
-const Content = styled.div<{
-  shouldSpaceBetween: boolean
-}>`
-  display: ${(props) => (props.shouldSpaceBetween ? `flex` : `block`)};
-  align-items: ${(props) => (props.shouldSpaceBetween ? `center` : `auto`)};
-  width: ${(props) => (props.shouldSpaceBetween ? `100%` : `auto`)};
-  justify-content: ${(props) =>
-    props.shouldSpaceBetween ? `space-between` : `auto`};
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    display: block;
-  }
-`
+import { Flex } from "@chakra-ui/react"
+import Emoji from "./Emoji"
 
 export interface IProps {
   children?: React.ReactNode
@@ -75,17 +21,38 @@ const InfoBanner: React.FC<IProps> = ({
   ...props
 }) => {
   const banner = (
-    <Banner
-      className={className}
-      isWarning={isWarning}
-      shouldCenter={shouldCenter}
+    <Flex
+      align="center"
+      p={6}
+      borderRadius={"sm"}
+      maxW={shouldCenter ? "55rem" : "100%"}
+      color="black300"
+      bg={isWarning ? "warning" : "infoBanner"}
+      direction={{ base: "column", sm: "row" }}
       {...props}
     >
-      {emoji && <StyledEmoji text={emoji} size={2} />}
-      <Content shouldSpaceBetween={shouldSpaceBetween}>{children}</Content>
-    </Banner>
+      {emoji && (
+        <Emoji
+          flexGrow="0"
+          flexShrink="0"
+          mr={{ base: 0, sm: 6 }}
+          mb={{ base: 2, sm: 0 }}
+          alignSelf={{ base: "flex-start", sm: "auto" }}
+          text={emoji}
+          fontSize="4xl"
+        />
+      )}
+      <Flex
+        display={{ base: "block", sm: shouldSpaceBetween ? "flex" : "block" }}
+        align={shouldSpaceBetween ? "center" : "auto"}
+        w={shouldSpaceBetween ? "100%" : "auto"}
+        justify={shouldSpaceBetween ? "space-between" : "auto"}
+      >
+        {children}
+      </Flex>
+    </Flex>
   )
-  return shouldCenter ? <Container>{banner}</Container> : banner
+  return shouldCenter ? <Flex justify="center">{banner}</Flex> : banner
 }
 
 export default InfoBanner

src/components/Morpher.tsx

@@ -1,20 +1,6 @@
 import React, { useState, useEffect } from "react"
-import styled from "@emotion/styled"
 import Link from "./Link"
 
-const NavLink = styled(Link)`
-  text-decoration: none;
-  font-size: 1rem;
-  color: ${(props) => props.theme.colors.text};
-  &:hover {
-    text-decoration: none;
-    color: ${(props) => props.theme.colors.primary};
-  }
-  &.active {
-    font-weight: bold;
-  }
-`
-
 const Morpher = () => {
   const [state, setState] = useState({
     text: "Ethereum",
@@ -154,9 +140,15 @@ const Morpher = () => {
   }, [])
 
   return (
-    <NavLink to="/languages/">
+    <Link
+      textDecor="none"
+      fontSize="md"
+      color="text"
+      _hover={{ color: "primary" }}
+      to="/languages/"
+    >
       <span>{state.text}</span>
-    </NavLink>
+    </Link>
   )
 }
 

src/components/Nav/index.tsx

@@ -423,7 +423,7 @@ const Nav: React.FC<IProps> = ({ path }) => {
     <NavContainer>
       <StyledNav aria-label={translateMessageId("nav-primary", intl)}>
         <NavContent>
-          <HomeLogoNavLink to="/">
+          <HomeLogoNavLink to="/" aria-label={translateMessageId("home", intl)}>
             <HomeLogo />
           </HomeLogoNavLink>
           {/* Desktop */}

src/components/TranslationChartImage.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import { Flex, Image } from "@chakra-ui/react"
+import { useColorMode } from "@chakra-ui/react"
+import { useStaticQuery, graphql } from "gatsby"
+import { GatsbyImage } from "gatsby-plugin-image"
+import { getImage } from "../utils/image"
+
+export interface IProps {}
+
+const TranslationChartImage: React.FC<IProps> = () => {
+  const { colorMode } = useColorMode()
+  const isDarkTheme = colorMode === "dark"
+
+  const data = useStaticQuery(graphql`
+    {
+      pageviewsLight: file(
+        relativePath: { eq: "translation-program/pageviews-light.png" }
+      ) {
+        childImageSharp {
+          gatsbyImageData(
+            height: 500
+            layout: FIXED
+            placeholder: BLURRED
+            quality: 100
+          )
+        }
+      }
+      pageviewsDark: file(
+        relativePath: { eq: "translation-program/pageviews-dark.png" }
+      ) {
+        childImageSharp {
+          gatsbyImageData(
+            height: 500
+            layout: FIXED
+            placeholder: BLURRED
+            quality: 100
+          )
+        }
+      }
+    }
+  `)
+
+  const ethImage = isDarkTheme ? data.pageviewsDark : data.pageviewsLight
+
+  return (
+    <Flex justifyContent="center" objectFit="contain">
+      <Image
+        as={GatsbyImage}
+        image={getImage(ethImage)!}
+        alt=""
+        fit="contain"
+        minW="263px"
+      />
+    </Flex>
+  )
+}
+
+export default TranslationChartImage