Merge branch 'dev' into feedback-v2

Author: wackerow

.all-contributorsrc

@@ -31,6 +31,7 @@ require("prismjs/components/prism-solidity")
 
 // Prevents <Layout/> from unmounting on page transitions
 // https://www.gatsbyjs.com/docs/layout-components/#how-to-prevent-layout-components-from-unmounting
+// @ts-ignore: returning `null` is not accepted by the `GatsbyBrowser` type def.
 export const wrapPageElement: GatsbyBrowser<
   any,
   Context
@@ -60,8 +61,7 @@ export const wrapPageElement: GatsbyBrowser<
     window.localStorage.setItem("eth-org-language", detected)
     window.location.replace(newUrl)
 
-    // can't return null here, must return an element
-    return <div />
+    return null
   }
 
   return <Layout {...props}>{element}</Layout>

.babelrc

@@ -205,6 +205,7 @@ const config: GatsbyConfig = {
       options: {
         resetCSS: true,
         isUsingColorMode: true,
+        portalZIndex: 1001,
       },
     },
     // Source assets

README.md

@@ -11,12 +11,26 @@ import type { GatsbySSR } from "gatsby"
 import Layout from "./src/components/Layout"
 
 import { Context } from "./src/types"
+import { IS_DEV } from "./src/utils/env"
+import { isLang } from "./src/utils/languages"
 
 // Prevents <Layout/> from unmounting on page transitions
 // https://www.gatsbyjs.com/docs/layout-components/#how-to-prevent-layout-components-from-unmounting
+// @ts-ignore: returning `null` is not accepted by the `GatsbySSR` type def.
 export const wrapPageElement: GatsbySSR<any, Context>["wrapPageElement"] = ({
   element,
   props,
 }) => {
+  const { location } = props
+  const { pathname } = location
+
+  const [, pathLocale] = pathname.split("/")
+
+  // this is to avoid having hydration issues on dev mode. Check the logic
+  // inside gatsby-browser.tsx
+  if (IS_DEV && !isLang(pathLocale)) {
+    return null
+  }
+
   return <Layout {...props}>{element}</Layout>
 }

gatsby-browser.tsx

@@ -191,6 +191,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "km",
+    "hrefLang": "km",
+    "name": "Khmer",
+    "localName": "ចក្រភពខ្មែរ",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "ko",
     "hrefLang": "ko",

gatsby-config.ts

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "6.6.0",
+  "version": "6.9.2",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",
@@ -69,14 +69,13 @@
     "react-icons": "^4.3.1",
     "react-instantsearch-dom": "^6.32.0",
     "react-intl": "^3.12.1",
-    "react-rewards": "^2.0.4",
     "react-select": "^4.3.0",
     "recharts": "^2.1.9",
     "styled-system": "^5.1.5",
     "unist-util-visit-parents": "^2.1.2"
   },
   "devDependencies": {
-    "@netlify/functions": "^1.0.0",
+    "@netlify/functions": "^1.2.0",
     "@types/browser-lang": "^0.1.0",
     "@types/github-slugger": "^1.3.0",
     "@types/luxon": "^2.3.2",
@@ -86,7 +85,7 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-instantsearch-core": "^6.26.2",
     "@types/styled-system": "^5.1.15",
-    "babel-preset-gatsby": "^2.14.0",
+    "babel-preset-gatsby": "^2.23.0",
     "github-slugger": "^1.3.0",
     "gray-matter": "^4.0.3",
     "husky": "^4.2.5",
@@ -99,7 +98,7 @@
   },
   "scripts": {
     "build": "gatsby build",
-    "build:lambda": "netlify-lambda build src/lambda",
+    "build:lambda": "netlify-lambda build src/lambda --config=./webpack.lambda.js",
     "build:10gb": "NODE_OPTIONS=--max-old-space-size=10240 gatsby build",
     "clean": "gatsby clean",
     "crowdin-clean": "rm -rf .crowdin && mkdir .crowdin",

gatsby-ssr.tsx

@@ -1,5 +1,16 @@
 import type { ComponentStyleConfig } from "@chakra-ui/theme"
 
+const disabledStylesSolid = {
+  bg: "disabled",
+  opacity: 1,
+}
+
+const disabledStylesOutline = {
+  color: "disabled",
+  borderColor: "disabled",
+  opacity: 1,
+}
+
 const commonOutline = {
   border: "1px",
   color: "text",
@@ -9,6 +20,9 @@ const commonOutline = {
     color: "primary",
     bg: "background",
     borderColor: "primary",
+    _disabled: {
+      ...disabledStylesOutline,
+    },
   },
   _active: {
     color: "primary",
@@ -18,11 +32,12 @@ const commonOutline = {
   _focus: {
     color: "primary",
     borderColor: "background",
+    _disabled: {
+      ...disabledStylesOutline,
+    },
   },
   _disabled: {
-    color: "disabled",
-    borderColor: "disabled",
-    opacity: 1,
+    ...disabledStylesOutline,
   },
 }
 
@@ -33,6 +48,9 @@ export const Button: ComponentStyleConfig = {
     _hover: {
       textDecoration: "none",
       boxShadow: "primary",
+      _disabled: {
+        boxShadow: "none",
+      },
     },
     _focus: {
       boxShadow: "outline",
@@ -53,13 +71,15 @@ export const Button: ComponentStyleConfig = {
       _hover: {
         bg: "primary",
         opacity: 0.8,
+        _disabled: {
+          ...disabledStylesSolid,
+        },
       },
       _active: {
         bg: "primaryHover",
       },
       _disabled: {
-        bg: "disabled",
-        opacity: 1,
+        ...disabledStylesSolid,
       },
     },
     outline: {

i18n/config.json

@@ -0,0 +1,56 @@
+import type { ComponentMultiStyleConfig } from "@chakra-ui/theme"
+
+const baseStyleControl = {
+  bg: "background",
+  _checked: {
+    bg: "primary400",
+    _hover: {
+      bg: "primary400",
+      borderColor: "primary600",
+    },
+    borderColor: "black50",
+  },
+  border: "1px",
+  borderColor: "black50",
+  borderRadius: "3px",
+  transition: "all 150ms",
+  _focusVisible: {
+    boxShadow: "none",
+  },
+  _hover: {
+    boxShadow: "tableItemBoxShadow",
+    border: "1px",
+    borderStyle: "solid",
+    borderColor: "primary600",
+    transition: "transform 0.1s",
+    transform: "scale(1.02)",
+  },
+}
+
+export const Checkbox: ComponentMultiStyleConfig = {
+  parts: ["control"],
+  baseStyle: {
+    control: baseStyleControl,
+  },
+  sizes: {
+    md: {
+      control: {
+        h: "1.5rem",
+        w: "1.5rem",
+      },
+      icon: {
+        fontSize: "md",
+      },
+    },
+  },
+  variants: {
+    alignTop: {
+      control: {
+        mt: "0.25rem",
+      },
+    },
+  },
+  defaultProps: {
+    size: "md",
+  },
+}