Deploy v6.8.1

.all-contributorsrc

@@ -9399,6 +9399,105 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "victorpatru",
+      "name": "Victor Patru",
+      "avatar_url": "https://avatars.githubusercontent.com/u/102596893?v=4",
+      "profile": "http://victorpatru.xyz",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "vaishnav-mk",
+      "name": "wishee",
+      "avatar_url": "https://avatars.githubusercontent.com/u/84540554?v=4",
+      "profile": "https://vaishnav.tech",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Harshil-Gupta",
+      "name": "Harshil Gupta",
+      "avatar_url": "https://avatars.githubusercontent.com/u/53968071?v=4",
+      "profile": "https://github.com/Harshil-Gupta",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "vanshika-srivastava",
+      "name": "Vanshika Srivastava",
+      "avatar_url": "https://avatars.githubusercontent.com/u/76511019?v=4",
+      "profile": "https://github.com/vanshika-srivastava",
+      "contributions": [
+        "ideas"
+      ]
+    },
+    {
+      "login": "shariqanwar20",
+      "name": "Shariq Anwar",
+      "avatar_url": "https://avatars.githubusercontent.com/u/61353122?v=4",
+      "profile": "https://github.com/shariqanwar20",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "giorgionocera",
+      "name": "Giorgio Nocera",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13519292?v=4",
+      "profile": "https://github.com/giorgionocera",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "alexeevcc",
+      "name": "Dmitry Alexeev",
+      "avatar_url": "https://avatars.githubusercontent.com/u/61043916?v=4",
+      "profile": "https://cyberacademy.dev",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "af-afk",
+      "name": "Alex",
+      "avatar_url": "https://avatars.githubusercontent.com/u/71931113?v=4",
+      "profile": "https://github.com/af-afk",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "benlazzero",
+      "name": "benlazzero",
+      "avatar_url": "https://avatars.githubusercontent.com/u/85390423?v=4",
+      "profile": "https://github.com/benlazzero",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "ankitzm",
+      "name": "Ankit Singh",
+      "avatar_url": "https://avatars.githubusercontent.com/u/66105983?v=4",
+      "profile": "https://github.com/ankitzm",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "mhairimcalpine",
+      "name": "mhairimcalpine",
+      "avatar_url": "https://avatars.githubusercontent.com/u/76955258?v=4",
+      "profile": "https://github.com/mhairimcalpine",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1482,6 +1482,19 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center"><a href="https://github.com/crypto8893"><img src="https://avatars.githubusercontent.com/u/115051650?v=4?s=100" width="100px;" alt="crypto8893"/><br /><sub><b>crypto8893</b></sub></a><br /><a href="#content-crypto8893" title="Content">🖋</a></td>
+      <td align="center"><a href="http://victorpatru.xyz"><img src="https://avatars.githubusercontent.com/u/102596893?v=4?s=100" width="100px;" alt="Victor Patru"/><br /><sub><b>Victor Patru</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=victorpatru" title="Code">💻</a></td>
+      <td align="center"><a href="https://vaishnav.tech"><img src="https://avatars.githubusercontent.com/u/84540554?v=4?s=100" width="100px;" alt="wishee"/><br /><sub><b>wishee</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=vaishnav-mk" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/Harshil-Gupta"><img src="https://avatars.githubusercontent.com/u/53968071?v=4?s=100" width="100px;" alt="Harshil Gupta"/><br /><sub><b>Harshil Gupta</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Harshil-Gupta" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/vanshika-srivastava"><img src="https://avatars.githubusercontent.com/u/76511019?v=4?s=100" width="100px;" alt="Vanshika Srivastava"/><br /><sub><b>Vanshika Srivastava</b></sub></a><br /><a href="#ideas-vanshika-srivastava" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center"><a href="https://github.com/shariqanwar20"><img src="https://avatars.githubusercontent.com/u/61353122?v=4?s=100" width="100px;" alt="Shariq Anwar"/><br /><sub><b>Shariq Anwar</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=shariqanwar20" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/giorgionocera"><img src="https://avatars.githubusercontent.com/u/13519292?v=4?s=100" width="100px;" alt="Giorgio Nocera"/><br /><sub><b>Giorgio Nocera</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=giorgionocera" title="Documentation">📖</a></td>
+    </tr>
+    <tr>
+      <td align="center"><a href="https://cyberacademy.dev"><img src="https://avatars.githubusercontent.com/u/61043916?v=4?s=100" width="100px;" alt="Dmitry Alexeev"/><br /><sub><b>Dmitry Alexeev</b></sub></a><br /><a href="#content-alexeevcc" title="Content">🖋</a></td>
+      <td align="center"><a href="https://github.com/af-afk"><img src="https://avatars.githubusercontent.com/u/71931113?v=4?s=100" width="100px;" alt="Alex"/><br /><sub><b>Alex</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=af-afk" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/benlazzero"><img src="https://avatars.githubusercontent.com/u/85390423?v=4?s=100" width="100px;" alt="benlazzero"/><br /><sub><b>benlazzero</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=benlazzero" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/ankitzm"><img src="https://avatars.githubusercontent.com/u/66105983?v=4?s=100" width="100px;" alt="Ankit Singh"/><br /><sub><b>Ankit Singh</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=ankitzm" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/mhairimcalpine"><img src="https://avatars.githubusercontent.com/u/76955258?v=4?s=100" width="100px;" alt="mhairimcalpine"/><br /><sub><b>mhairimcalpine</b></sub></a><br /><a href="#content-mhairimcalpine" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

package.json

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

src/components/CallToContribute.tsx

@@ -1,6 +1,6 @@
-import { Flex, Heading, Icon, Text } from "@chakra-ui/react"
+import { Flex, Heading, Icon, Show, Text, useToken } from "@chakra-ui/react"
 import { FaGithub } from "react-icons/fa"
-import React from "react"
+import React, { ReactNode } from "react"
 import Link from "./Link"
 import ButtonLink from "./ButtonLink"
 
@@ -10,85 +10,103 @@ export interface IProps {
   editPath: string
 }
 
-const CallToContribute: React.FC<IProps> = ({ editPath }) => (
+export type ChildOnlyType = {
+  children: ReactNode
+}
+
+const ContentColumn = ({ children }: ChildOnlyType) => (
   <Flex
-    bg="ednBackground"
-    align="center"
-    mt={8}
-    border="1px"
-    borderColor="primary"
-    borderRadius="base"
-    boxShadow="inset 0 -2px 0 0 var(--eth-colors-primary400)"
+    direction="column"
+    flexGrow={1}
+    flexShrink={1}
+    flexBasis="50%"
+    p={4}
+    color="text"
+    textAlign={{ base: "center", lg: "left" }}
   >
+    {children}
+  </Flex>
+)
+
+const DescriptionParagraph = ({ children }: ChildOnlyType) => (
+  <Text lineHeight="140%" color="text" fontFamily="monospace">
+    {children}
+  </Text>
+)
+
+const CallToContribute: React.FC<IProps> = ({ editPath }) => {
+  /**
+   * TODO: After completion of the UI migration,
+   * Remove this and pass the token value directly
+   * into the `above` prop of `Show`
+   */
+  const largeBp = useToken("breakpoints", "lg")
+
+  return (
     <Flex
-      direction="column"
-      flexGrow={1}
-      flexShrink={1}
-      flexBasis="50%"
-      p={4}
-      color="text"
-      textAlign={{ base: "center", lg: "left" }}
-      display={{ base: "none", lg: "flex" }}
-    >
-      ░░░░░░░░░▄░░░░░░░░░░░░░░▄░░░░ ░░░░░░░░▌▒█░░░░░░░░░░░▄▀▒▌░░░
-      ░░░░░░░░▌▒▒█░░░░░░░░▄▀▒▒▒▐░░░ ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐░░░
-      ░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐░░░ ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌░░░
-      ░░▐▒▒▒▄▄▒▒▒▒░░░▒▒▒▒▒▒▒▀▄▒▒▌░░ ░░▌░░▌█▀▒▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐░░
-      ░▐░░░▒▒▒▒▒▒▒▒▌██▀▒▒░░░▒▒▒▀▄▌░ ░▌░▒▄██▄▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒▌░
-      ▀▒▀▐▄█▄█▌▄░▀▒▒░░░░░░░░░░▒▒▒▐░ ▐▒▒▐▀▐▀▒░▄▄▒▄▒▒▒▒▒▒░▒░▒░▒▒▒▒▌
-      ▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒▒▒░▒░▒░▒▒▐░ ░▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒░▒░▒░▒░▒▒▒▌░
-      ░▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▒▄▒▒▐░░ ░░▀▄▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▄▒▒▒▒▌░░
-      ░░░░▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀░░░ ░░░░░░▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀░░░░░
-      ░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▀▀░░░░░░░░
-    </Flex>
-    <Flex
-      direction="column"
-      flexGrow={1}
-      flexShrink={1}
-      flexBasis="50%"
-      p={4}
-      color="text"
-      textAlign={{ base: "center", lg: "left" }}
+      bg="ednBackground"
+      align="center"
+      mt={8}
+      border="1px"
+      borderColor="primary"
+      borderRadius="base"
+      boxShadow="inset 0 -2px 0 0 var(--eth-colors-primary400)"
     >
-      <Heading
-        as="h2"
-        fontFamily="monospace"
-        textTransform="uppercase"
-        bg="border"
-        p={1}
-        fontSize="2rem"
-        lineHeight={1.4}
-      >
-        <Translation id="page-calltocontribute-title" />
-      </Heading>
-      <Text lineHeight="140%" color="text" fontFamily="monospace">
-        <Translation id="page-calltocontribute-desc-1" />
-      </Text>
-      <Text lineHeight="140%" color="text" fontFamily="monospace">
-        <Translation id="page-calltocontribute-desc-2" />
-      </Text>
-      <Text lineHeight="140%" color="text" fontFamily="monospace">
-        <Translation id="page-calltocontribute-desc-3" />{" "}
-        <Link to="https://www.notion.so/efdn/Writer-template-4b40d196cde7422ca6a2091de33550bd">
-          <Translation id="page-calltocontribute-link" />
-        </Link>
-      </Text>
-      <Text lineHeight="140%" color="text" fontFamily="monospace">
-        <Translation id="page-calltocontribute-desc-4" />{" "}
-        <Link to="https://discord.gg/CetY6Y4">
-          <Translation id="page-calltocontribute-link-2" />
-        </Link>{" "}
-      </Text>
-      <ButtonLink
-        to={editPath}
-        leftIcon={
-          <Icon fill="background" w={6} h={6} as={FaGithub} name="github" />
-        }
-      >
-        <Translation id="page-calltocontribute-span" />
-      </ButtonLink>
+      <Show above={largeBp}>
+        <ContentColumn>
+          ░░░░░░░░░▄░░░░░░░░░░░░░░▄░░░░ ░░░░░░░░▌▒█░░░░░░░░░░░▄▀▒▌░░░
+          ░░░░░░░░▌▒▒█░░░░░░░░▄▀▒▒▒▐░░░ ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐░░░
+          ░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐░░░ ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌░░░
+          ░░▐▒▒▒▄▄▒▒▒▒░░░▒▒▒▒▒▒▒▀▄▒▒▌░░ ░░▌░░▌█▀▒▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐░░
+          ░▐░░░▒▒▒▒▒▒▒▒▌██▀▒▒░░░▒▒▒▀▄▌░ ░▌░▒▄██▄▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒▌░
+          ▀▒▀▐▄█▄█▌▄░▀▒▒░░░░░░░░░░▒▒▒▐░ ▐▒▒▐▀▐▀▒░▄▄▒▄▒▒▒▒▒▒░▒░▒░▒▒▒▒▌
+          ▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒▒▒░▒░▒░▒▒▐░ ░▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒░▒░▒░▒░▒▒▒▌░
+          ░▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▒▄▒▒▐░░ ░░▀▄▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▄▒▒▒▒▌░░
+          ░░░░▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀░░░ ░░░░░░▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀░░░░░
+          ░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▀▀░░░░░░░░
+        </ContentColumn>
+      </Show>
+      <ContentColumn>
+        <Heading
+          as="h2"
+          fontFamily="monospace"
+          textTransform="uppercase"
+          bg="border"
+          p={1}
+          fontSize="2rem"
+          lineHeight={1.4}
+        >
+          <Translation id="page-calltocontribute-title" />
+        </Heading>
+        <DescriptionParagraph>
+          <Translation id="page-calltocontribute-desc-1" />
+        </DescriptionParagraph>
+        <DescriptionParagraph>
+          <Translation id="page-calltocontribute-desc-2" />
+        </DescriptionParagraph>
+        <DescriptionParagraph>
+          <Translation id="page-calltocontribute-desc-3" />{" "}
+          <Link to="https://www.notion.so/efdn/Writer-template-4b40d196cde7422ca6a2091de33550bd">
+            <Translation id="page-calltocontribute-link" />
+          </Link>
+        </DescriptionParagraph>
+        <DescriptionParagraph>
+          <Translation id="page-calltocontribute-desc-4" />{" "}
+          <Link to="https://discord.gg/CetY6Y4">
+            <Translation id="page-calltocontribute-link-2" />
+          </Link>{" "}
+        </DescriptionParagraph>
+        <ButtonLink
+          to={editPath}
+          leftIcon={
+            <Icon fill="background" w={6} h={6} as={FaGithub} name="github" />
+          }
+        >
+          <Translation id="page-calltocontribute-span" />
+        </ButtonLink>
+      </ContentColumn>
     </Flex>
-  </Flex>
-)
+  )
+}
 
 export default CallToContribute