Merge pull request #6977 from ethereum/dev

Deploy v4.5.0

Author: pettinarip

.all-contributorsrc

@@ -7973,6 +7973,54 @@
         "doc",
         "bug"
       ]
+    },
+    {
+      "login": "didoshotev",
+      "name": "Deyan Shotev",
+      "avatar_url": "https://avatars.githubusercontent.com/u/62618421?v=4",
+      "profile": "https://github.com/didoshotev",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "PraneshASP",
+      "name": "Pranesh A S",
+      "avatar_url": "https://avatars.githubusercontent.com/u/42379522?v=4",
+      "profile": "https://github.com/PraneshASP",
+      "contributions": [
+        "doc",
+        "bug"
+      ]
+    },
+    {
+      "login": "shir22",
+      "name": "shir22",
+      "avatar_url": "https://avatars.githubusercontent.com/u/33841818?v=4",
+      "profile": "https://github.com/shir22",
+      "contributions": [
+        "doc",
+        "bug"
+      ]
+    },
+    {
+      "login": "nikashitsa",
+      "name": "Nikita Verkhovin",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1029908?v=4",
+      "profile": "https://github.com/nikashitsa",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "pushkar2112",
+      "name": "Pushkar Verma",
+      "avatar_url": "https://avatars.githubusercontent.com/u/50198312?v=4",
+      "profile": "https://pushkarverma.dev",
+      "contributions": [
+        "doc",
+        "ideas"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1282,6 +1282,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/RanchHowards"><img src="https://avatars.githubusercontent.com/u/69303624?v=4?s=100" width="100px;" alt=""/><br /><sub><b>RanchHowards</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=RanchHowards" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3ARanchHowards" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/didoshotev"><img src="https://avatars.githubusercontent.com/u/62618421?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Deyan Shotev</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=didoshotev" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/PraneshASP"><img src="https://avatars.githubusercontent.com/u/42379522?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pranesh A S</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=PraneshASP" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3APraneshASP" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/shir22"><img src="https://avatars.githubusercontent.com/u/33841818?v=4?s=100" width="100px;" alt=""/><br /><sub><b>shir22</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=shir22" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Ashir22" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/nikashitsa"><img src="https://avatars.githubusercontent.com/u/1029908?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nikita Verkhovin</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Anikashitsa" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://pushkarverma.dev"><img src="https://avatars.githubusercontent.com/u/50198312?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pushkar Verma</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=pushkar2112" title="Documentation">📖</a> <a href="#ideas-pushkar2112" title="Ideas, Planning, & Feedback">🤔</a></td>
   </tr>
 </table>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",
@@ -20,6 +20,7 @@
     "clipboard": "^2.0.6",
     "cross-fetch": "^3.1.5",
     "dotenv": "^8.2.0",
+    "embla-carousel-react": "^6.2.0",
     "ethereum-blockies-base64": "^1.0.2",
     "focus-trap-react": "^8.11.2",
     "framer-motion": "^4.1.3",
@@ -62,7 +63,7 @@
     "react-icons": "^4.3.1",
     "react-instantsearch-dom": "^6.6.0",
     "react-select": "^4.3.0",
-    "recharts": "1.8.5",
+    "recharts": "^2.1.9",
     "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",
     "unist-util-visit-parents": "^2.1.2"
@@ -88,6 +89,7 @@
   "scripts": {
     "build": "gatsby build",
     "build:lambda": "netlify-lambda build src/lambda",
+    "build:10gb": "NODE_OPTIONS=--max-old-space-size=10240 gatsby build",
     "clean": "gatsby clean",
     "copy-contributors": "node src/scripts/copy-contributors.js",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",

src/assets/wallets/coinwallet.png

@@ -0,0 +1,86 @@
+import React from "react"
+import styled, { useTheme } from "styled-components"
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+`
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  margin-left: 0.5rem;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  @media (min-width: ${(props) => props.theme.breakpoints.m}) {
+    margin-left: 1rem;
+  }
+`
+
+const Cell = styled.div<{ color?: string }>`
+  border: 1px solid ${({ theme, color }) => (color ? color : theme.colors.text)};
+  color: ${({ theme, color }) => (color ? color : theme.colors.text)};
+  padding: 0.8rem 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+
+  &:last-child {
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+  }
+
+  &:nth-child(-n + 2) {
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+
+  @media (min-width: ${(props) => props.theme.breakpoints.m}) {
+    padding: 0.8rem 1.2rem;
+  }
+`
+
+const ColumnName = styled(Cell)`
+  border: 0;
+  padding-top: 1.5rem;
+`
+
+interface IProps {}
+
+const AdoptionChart: React.FC<IProps> = () => {
+  const { isDark } = useTheme()
+
+  return (
+    <Container>
+      <Column>
+        <ColumnName>2010</ColumnName>
+        <Cell color={isDark ? "#FBF9A5" : "#95935B"}>Investors</Cell>
+      </Column>
+
+      <Column>
+        <ColumnName>2014</ColumnName>
+        <Cell color={isDark ? "#FBF9A5" : "#95935B"}>Investors</Cell>
+        <Cell color={isDark ? "#9EC885" : "#67954C"}>Developers</Cell>
+        <Cell color={isDark ? "#E78F6E" : "#CB7C5E"}>Companies</Cell>
+      </Column>
+
+      <Column>
+        <ColumnName>Now</ColumnName>
+        <Cell color={isDark ? "#FBF9A5" : "#95935B"}>Investors</Cell>
+        <Cell color={isDark ? "#9EC885" : "#67954C"}>Developers</Cell>
+        <Cell color={isDark ? "#E78F6E" : "#CB7C5E"}>Companies</Cell>
+        <Cell color={isDark ? "#8EA8CA" : "#5E7492"}>Artists</Cell>
+        <Cell color={isDark ? "#AC85C2" : "#88669B"}>Musicians</Cell>
+        <Cell color={isDark ? "#CA928E" : "#985955"}>Writers</Cell>
+        <Cell color={isDark ? "#B9B9B9" : "#9E9E9E"}>Gamers</Cell>
+        <Cell color={isDark ? "#E2B79E" : "#E78A54"}>Refugees</Cell>
+      </Column>
+    </Container>
+  )
+}
+
+export default AdoptionChart

src/assets/what-is-eth/eth.png

@@ -0,0 +1,97 @@
+import styled from "styled-components"
+
+export const Banner = styled.div`
+  width: 100%;
+  display: flex;
+  background: ${(props) => props.theme.colors.bannerGridGradient};
+
+  h2 {
+    margin-top: 0;
+  }
+
+  ul {
+    margin-bottom: 0;
+  }
+
+  flex-flow: column nowrap;
+
+  @media (min-width: ${(props) => props.theme.breakpoints.l}) {
+    flex-flow: row nowrap;
+  }
+`
+
+export const BannerBody = styled.div`
+  flex: 4;
+  padding: 40px;
+`
+
+export const BannerImage = styled.div`
+  display: flex;
+  justify-content: end;
+  flex: 2;
+  align-self: end;
+`
+
+export const BannerGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+
+  @media (min-width: ${(props) => props.theme.breakpoints.m}) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+  }
+
+  @media (min-width: ${(props) => props.theme.breakpoints.l}) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+`
+
+export const BannerGridCell = styled.div`
+  padding: 2rem 3rem;
+  display: flex;
+  flex-direction: column;
+
+  border-top: 1px solid ${({ theme }) => theme.colors.searchBackground};
+
+  border-left: none;
+  &:first-child {
+    border-top: none;
+  }
+
+  @media (min-width: ${(props) => props.theme.breakpoints.m}) {
+    border-left: 1px solid ${({ theme }) => theme.colors.searchBackground};
+    &:nth-child(-n + 2) {
+      border-top: none;
+    }
+    &:nth-child(2n + 1) {
+      border-left: none;
+    }
+  }
+
+  @media (min-width: ${(props) => props.theme.breakpoints.l}) {
+    &:nth-child(-n + 2) {
+      border-top: 1px solid ${({ theme }) => theme.colors.searchBackground};
+    }
+    &:nth-child(2n + 1) {
+      border-left: 1px solid ${({ theme }) => theme.colors.searchBackground};
+    }
+
+    &:nth-child(-n + 3) {
+      border-top: none;
+      justify-content: start;
+      padding-top: 0;
+    }
+    &:first-child,
+    &:nth-child(3n + 1) {
+      padding-left: 0;
+      border-left: none;
+    }
+    &:nth-child(n + 4) {
+      justify-content: start;
+      padding-bottom: 0;
+    }
+  }
+`

src/components/AdoptionChart.tsx

@@ -3,8 +3,8 @@ import styled from "styled-components"
 import { useIntl } from "gatsby-plugin-intl"
 
 import Link from "./Link"
-import { supportedLanguages } from "../utils/languages"
-import { translateMessageId } from "../utils/translations"
+import { isLang, supportedLanguages } from "../utils/languages"
+import { isTranslationKey, translateMessageId } from "../utils/translations"
 
 const ListContainer = styled.nav`
   margin-bottom: 2rem;
@@ -47,6 +47,11 @@ const CrumbLink = styled(Link)`
   }
 `
 
+export interface IProps {
+  slug: string
+  startDepth?: number
+}
+
 // Generate crumbs from slug
 // e.g. "/en/eth2/proof-of-stake/" will generate:
 // [
@@ -60,20 +65,27 @@ const CrumbLink = styled(Link)`
 //   { fullPath: "/en/eth2/", text: "ETH2" },
 //   { fullPath: "/en/eth2/proof-of-stake/", text: "PROOF OF STAKE" },
 // ]
-const Breadcrumbs = ({ slug, startDepth = 0, ...restProps }) => {
+const Breadcrumbs: React.FC<IProps> = ({
+  slug,
+  startDepth = 0,
+  ...restProps
+}) => {
   const intl = useIntl()
 
-  const split = slug.split("/")
-  const sliced = split.filter((item) => !!item).slice(startDepth)
+  const slugChunk = slug.split("/")
+  const sliced = slugChunk.filter((item) => !!item).slice(startDepth)
 
   const crumbs = sliced.map((path, idx) => {
     // If homepage (e.g. "en"), set text to "home" translation
-    const text = supportedLanguages.includes(path)
-      ? translateMessageId("page-index-meta-title", intl)
-      : translateMessageId(path, intl)
+    const text =
+      isLang(path) && supportedLanguages.includes(path)
+        ? translateMessageId("page-index-meta-title", intl)
+        : isTranslationKey(path)
+        ? translateMessageId(path, intl)
+        : ""
 
     return {
-      fullPath: split.slice(0, idx + 2 + startDepth).join("/") + "/",
+      fullPath: slugChunk.slice(0, idx + 2 + startDepth).join("/") + "/",
       text: text.toUpperCase(),
     }
   })

src/components/BannerGrid/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "styled-components"
-import { margin } from "styled-system"
+import { margin, MarginProps } from "styled-system"
 
 import { scrollIntoView } from "../utils/scrollIntoView"
 
@@ -85,7 +85,7 @@ const SecondaryScrollLink = styled(StyledScrollButton)`
   }
 `
 
-interface IProps extends ILinkProps {
+interface IProps extends ILinkProps, MarginProps {
   toId?: string
   isSecondary?: boolean
 }

src/components/Breadcrumbs.js renamed to src/components/Breadcrumbs.tsx

@@ -11,8 +11,17 @@ const StyledCard = styled.div`
   padding: 1.5rem;
 `
 
+const Title = styled.h3`
+  margin-top: 0;
+`
+
 const Description = styled.p`
   opacity: 0.8;
+  margin: 0;
+`
+
+const StyledEmoji = styled(Emoji)`
+  margin-bottom: 1rem;
 `
 
 const TopContent = styled.div``
@@ -33,8 +42,8 @@ const Card: React.FC<IProps> = ({
 }) => (
   <StyledCard className={className}>
     <TopContent>
-      {emoji && <Emoji size={3} text={emoji} mb="1rem" />}
-      {title && <h3>{title}</h3>}
+      {emoji && <StyledEmoji size={3} text={emoji} />}
+      {title && <Title>{title}</Title>}
       {description && <Description>{description}</Description>}
     </TopContent>
     {children}