Merge branch 'dev' into autoformat

package.json

@@ -75,6 +75,7 @@
     "image-size": "^1.0.2",
     "mdast-util-toc": "^7.0.0",
     "minimist": "^1.2.8",
+    "plaiceholder": "^3.0.0",
     "polished": "^4.2.2",
     "raw-loader": "^4.0.2",
     "storybook": "7.6.6",

public/content/translations/hu/staking/pools/index.md

@@ -4,7 +4,7 @@ description: Áttekintés a letéti alapok használatáról
 lang: hu
 template: staking
 emoji: ":money_with_wings:"
-image: ..//staking/leslie-pool.png
+image: /staking/leslie-pool.png
 alt: Leslie, a rinocérosz a medencében fürdik.
 sidebarDepth: 2
 summaryPoints:

public/content/translations/hu/staking/saas/index.md

@@ -4,7 +4,7 @@ description: Egy áttekintő a pooled ETH staking elkezdéséről
 lang: hu
 template: staking
 emoji: ":money_with_wings:"
-image: ..//staking/leslie-saas.png
+image: /staking/leslie-saas.png
 alt: Leslie, a rinocérosz a felhőkön lebeg.
 sidebarDepth: 2
 summaryPoints:

public/content/translations/hu/staking/solo/index.md

@@ -4,7 +4,7 @@ description: Az önálló letétbe helyezés áttekintése
 lang: hu
 template: staking
 emoji: ":money_with_wings:"
-image: ..//staking/leslie-solo.png
+image: /staking/leslie-solo.png
 alt: Leslie, a rinocérosz a saját számítógépes chipjén.
 sidebarDepth: 2
 summaryPoints:

public/content/translations/hu/staking/withdrawals/index.md

@@ -3,7 +3,7 @@ title: A letétbe helyezés visszavonása
 description: A letétvisszavonás működésének és a jutalmak megszerzésének áttekintése
 lang: hu
 template: staking
-image: ..//staking/leslie-withdrawal.png
+image: /staking/leslie-withdrawal.png
 alt: Leslie, a rinocérosz a letétbe helyezésből származó jutalmaival
 sidebarDepth: 2
 summaryPoints:

public/content/translations/ja/developers/docs/nodes-and-clients/client-diversity/index.md

@@ -31,7 +31,7 @@ sidebarDepth: 2
 
 イーサリアムノードの 33%以上を占めるコンセンサスクライアントのバグがあると、ビーコンチェーンのファイナライズを妨げる可能性があります。つまり、トランザクションの取り消しや改ざんが発生するおそれがあります。 これはイーサリアム上に構築された多くのアプリ、特に分散型金融(DeFi)にとって非常に大きな問題となります。
 
-<Emoji text="🚨" mr="1rem" /> さらに、3 分の 2 のマジョリティを占めるクライアントの重大なバグにより、チェーンが<a href="https://www.symphonious.net/2021/09/23/what-happens-if-beacon-chain-consensus-fails/" target="_blank">誤って スプリットし、ファイナライズ</a>され、大量のバリデータが無効なチェーン上で立ち往生する可能性があります。 これらのバリデータが正しいチェーンに再び参加しようとする場合、スラッシングのペナルティを受けるか、時間がかかり高額となる任意退出後に、再度アクティベーションを行います。 スラッシングの規模は過失のあるノードの数に比例し、3 分の 2 のマジョリティが最大のスラッシング(32 ETH)を受けます。
+<Emoji text="🚨" me="1rem" /> さらに、3 分の 2 のマジョリティを占めるクライアントの重大なバグにより、チェーンが<a href="https://www.symphonious.net/2021/09/23/what-happens-if-beacon-chain-consensus-fails/" target="_blank">誤って スプリットし、ファイナライズ</a>され、大量のバリデータが無効なチェーン上で立ち往生する可能性があります。 これらのバリデータが正しいチェーンに再び参加しようとする場合、スラッシングのペナルティを受けるか、時間がかかり高額となる任意退出後に、再度アクティベーションを行います。 スラッシングの規模は過失のあるノードの数に比例し、3 分の 2 のマジョリティが最大のスラッシング(32 ETH)を受けます。
 
 これらは可能性が低いシナリオですが、アクティブなノードにクライアントを均等に分散することで、イーサリアムのエコシステムはリスクを軽減することが出来ます。 特定のコンセンサスクライアントが、全ノードの 33%のシェアを占めないことが理想です。
 

public/content/translations/ja/roadmap/future-proofing/index.md

@@ -2,7 +2,7 @@
 title: 将来性のあるイーサリアム
 description: これらのアップグレードにより、イーサリアムは、将来何が起きようとも、回復力のある分散型のベースレイヤーとして確立されます。
 lang: ja
-image: ..//roadmap/roadmap-future.png
+image: /roadmap/roadmap-future.png
 alt: "イーサリアムロードマップ"
 template: roadmap
 ---

public/content/translations/ja/roadmap/security/index.md

@@ -2,7 +2,7 @@
 title: より安全なイーサリアム
 description: イーサリアムは、現存するスマートコントラクトプラットフォームの中で、最も安全かつ分散化されています。 しかし、将来にわたってあらゆるレベルの攻撃に対して耐性を維持するためには、改善すべき点がまだあります。
 lang: ja
-image: ..//roadmap/roadmap-security.png
+image: /roadmap/roadmap-security.png
 alt: "イーサリアムロードマップ"
 template: roadmap
 ---

public/content/translations/ja/roadmap/user-experience/index.md

@@ -2,7 +2,7 @@
 title: ユーザーエクスペリエンスの改善
 description: イーサリアムは、ほとんどの人にとって使いこなすのが難しいものです。 そのため、一般の人にも使ってもらえるように、イーサリアムへの参入障壁を大幅に下げる必要があります。ユーザーは、イーサリアムの分散型、パーミッションレス、検閲耐性といったアクセスのメリットを享受できるだけでなく、従来のWeb2アプリと同じように簡単に使えるようにする必要があります。
 lang: ja
-image: ..//roadmap/roadmap-ux.png
+image: /roadmap/roadmap-ux.png
 alt: "イーサリアムロードマップ"
 template: roadmap
 ---

public/content/translations/pcm/dao/index.md

@@ -5,7 +5,7 @@ lang: pcm
 template: use-cases
 emoji: ":handshake:"
 sidebarDepth: 2
-image: /use-cases/dao.png
+image: /use-cases/dao-2.png
 alt: One show of hau one DAO dey vote on top one proposal.
 summaryPoint1: Kommunitis wey membas own and nor get one pesin wey dey kontrol evrytin.
 summaryPoint2: One way wey bam wey u fit join pipol wey yu nor sabi for intanet witout wahala.

public/content/translations/pt-br/roadmap/future-proofing/index.md

@@ -2,7 +2,7 @@
 title: Preparação do Ethereum para o futuro
 description: Essas melhorias consolidam o Ethereum como a camada de base resiliente e descentralizada para o futuro, seja ele qual for.
 lang: pt-br
-image: ..//roadmap/roadmap-future.png
+image: /roadmap/roadmap-future.png
 alt: "Planejamento Ethereum"
 template: roadmap
 ---

public/content/translations/pt-br/roadmap/security/index.md

@@ -2,7 +2,7 @@
 title: Um Ethereum mais seguro
 description: O Ethereum é a plataforma de contrato inteligente mais segura e descentralizada que existe. Entretanto, ainda existem melhorias que podem ser feitas para que o Ethereum permaneça resiliente a qualquer nível de ataque no futuro.
 lang: pt-br
-image: ..//roadmap/roadmap-security.png
+image: /roadmap/roadmap-security.png
 alt: "Planejamento Ethereum"
 template: roadmap
 ---

public/content/translations/pt-br/roadmap/user-experience/index.md

@@ -2,7 +2,7 @@
 title: Melhoria da experiência do usuário
 description: Para a maioria das pessoas, ainda é complicado usar o Ethereum. Para incentivar a adoção em massa, o Ethereum precisa reduzir drasticamente as barreiras de entrada. Os usuários devem obter os benefícios do acesso descentralizado, sem permissão e resistente à censura ao Ethereum, mas isso precisa ser tão simples quanto usar um aplicativo web2 tradicional.
 lang: pt-br
-image: ..//roadmap/roadmap-ux.png
+image: /roadmap/roadmap-ux.png
 alt: "Planejamento Ethereum"
 template: roadmap
 ---

public/content/translations/ru/roadmap/future-proofing/index.md

@@ -2,7 +2,7 @@
 title: Ethereum, готовый к будущему
 description: Эти обновления закрепляют положение Ethereum в качестве устойчивого и децентрализованного базового блокчейна для будущего независимо от того, каким оно будет.
 lang: ru
-image: ..//roadmap/roadmap-future.png
+image: /roadmap/roadmap-future.png
 alt: "Дорожная карта Ethereum"
 template: roadmap
 ---

public/content/translations/ru/roadmap/security/index.md

@@ -2,7 +2,7 @@
 title: Более безопасный Ethereum
 description: Ethereum — самая безопасная и децентрализованная платформа для смарт-контрактов из существующих. Однако потребуется еще ряд улучшений, чтобы в будущем Ethereum оставался устойчивым к любому уровню атак.
 lang: ru
-image: ..//roadmap/roadmap-security.png
+image: /roadmap/roadmap-security.png
 alt: "Дорожная карта Ethereum"
 template: roadmap
 ---

public/content/translations/ru/roadmap/user-experience/index.md

@@ -2,7 +2,7 @@
 title: Улучшение опыта пользователей
 description: До сих пор использование Ethereum слишком сложно для большинства людей. Чтобы поощрять массовое распространение, системе Ethereum необходимо значительно снизить порог входа. Пользователи должны получать преимущества от децентрализованного, общедоступного и устойчивого к цензуре доступа к Ethereum, но он должен быть таким же удобным, как использование традиционного приложения web2.
 lang: ru
-image: ..//roadmap/roadmap-ux.png
+image: /roadmap/roadmap-ux.png
 alt: "Дорожная карта Ethereum"
 template: roadmap
 ---

public/content/translations/tr/history/index.md

@@ -156,7 +156,7 @@ Altair yükseltmesi, [İşaret Zinciri](/roadmap/beacon-chain) için planlanmı
 
 - [Altair güncelleme spesifikasyonunu okuyun](https://github.com/ethereum/consensus-specs/tree/dev/specs/altair)
 
-#### <emoji text=":tada:" size={1} mr="0.5rem" />İlginç bir bilgi! {#altair-fun-fact}
+#### <emoji text=":tada:" size={1} me="0.5rem" />İlginç bir bilgi! {#altair-fun-fact}
 
 Altair, kesin bir kullanıma sunma süresi olan ilk büyük ağ yükseltmesiydi. Önceden her yükseltme, blok sürelerinin değiştiği iş ispatı zincirinde beyan edilen bir blok numarasına dayanıyordu. İşaret Zinciri, iş ispatı için çözüm gerektirmez ve bunun yerine, doğrulayıcıların blok önerebileceği 32 tane on iki saniyelik "yuva"dan oluşan zamana dayalı bir dönem sistemi üzerinde çalışır. Bu yüzden 74.240 numaralı döneme ne zaman ulaşacağımızı tam olarak biliyorduk ve Altair hayat buldu!
 

public/content/translations/zh/developers/docs/nodes-and-clients/client-diversity/index.md

@@ -31,7 +31,7 @@ sidebarDepth: 2
 
 超过 33% 的以太坊节点的共识客户端中有一个漏洞，它可能会阻止共识层的最终确定，这意味着用户无法相信交易不会在某些时候被回滚或更改。 对于许多建立在以太坊之上的应用程序，尤其是去中心化金融，这将是一个很大的问题。
 
-<Emoji text="🚨" mr="1rem" /> 更糟糕的是，当拥有三分之二多数节点的客户端出现严重漏洞，可能会导致链<a href="https://www.symphonious.net/2021/09/23/what-happens-if-beacon-chain-consensus-fails/" target="_blank">错误地分叉并最终确定</a>，让大量验证者困陷在无效链上。 如果这些验证者想重新加入正确的链，他们将面临罚没或缓慢而昂贵的自愿退出和重新激活过程。 罚没的轻重随过错节点数量而异，三分之二的大多数将受到最严重的惩罚（32 个以太币）。
+<Emoji text="🚨" me="1rem" /> 更糟糕的是，当拥有三分之二多数节点的客户端出现严重漏洞，可能会导致链<a href="https://www.symphonious.net/2021/09/23/what-happens-if-beacon-chain-consensus-fails/" target="_blank">错误地分叉并最终确定</a>，让大量验证者困陷在无效链上。 如果这些验证者想重新加入正确的链，他们将面临罚没或缓慢而昂贵的自愿退出和重新激活过程。 罚没的轻重随过错节点数量而异，三分之二的大多数将受到最严重的惩罚（32 个以太币）。
 
 尽管这些情况不太可能发生，但为了降低这类风险，以太坊生态系统可以使客户端均衡分布在活跃节点上。 理想情况下，任何共识客户端任何时候都不会达到总节点数的 33%。
 

src/@chakra-ui/foundations/colors.ts

@@ -2,11 +2,12 @@ export type Colors = typeof colors
 
 const colors = {
   gray: {
-    100: "#f7f7f7",
-    200: "#e7e7e7",
-    300: "#d4d4d4",
-    400: "#b0b0b0",
-    500: "#646464",
+    100: "#F7F7F7",
+    150: "#F2F2F2",
+    200: "#E7E7E7",
+    300: "#C8C8C8",
+    400: "#8C8C8C",
+    500: "#616161",
     600: "#333333",
     700: "#222222",
     800: "#1B1B1B",

src/@chakra-ui/semanticTokens.ts

@@ -51,7 +51,7 @@ const semanticTokens = {
     },
     body: {
       base: { _light: "gray.800", _dark: "gray.100" },
-      medium: { _light: "gray.500", _dark: "gray.300" },
+      medium: { _light: "gray.500", _dark: "gray.400" },
       light: { _light: "gray.200", _dark: "gray.600" },
       // ! Deprecating body.inverted
       inverted: { _light: "gray.100", _dark: "gray.800" },

src/components/CodeModal.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import type { ReactNode } from "react"
 import {
   Modal,
   ModalBody,
@@ -7,35 +7,33 @@ import {
   ModalHeader,
   ModalOverlay,
 } from "@chakra-ui/react"
-export interface IProps {
-  children?: React.ReactNode
+
+type CodeModalProps = {
+  title: string
+  children: ReactNode
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
-  title: string
 }
 
-const CodeModal: React.FC<IProps> = ({
-  children,
-  isOpen,
-  setIsOpen,
-  title,
-}) => {
-  return (
-    <Modal
-      isOpen={isOpen}
-      scrollBehavior="inside"
-      variant="code"
-      onClose={() => setIsOpen(false)}
-    >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>{title}</ModalHeader>
-        <ModalCloseButton />
-
-        <ModalBody>{children}</ModalBody>
-      </ModalContent>
-    </Modal>
-  )
-}
+const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => (
+  <Modal
+    isOpen={isOpen}
+    scrollBehavior="inside"
+    variant="code"
+    onClose={() => setIsOpen(false)}
+  >
+    <ModalOverlay />
+    <ModalContent>
+      <ModalHeader>{title}</ModalHeader>
+      <ModalCloseButton
+        style={{
+          right: "unset",
+          insetInlineEnd: "var(--eth-sizes-4)",
+        }}
+      />
+      <ModalBody>{children}</ModalBody>
+    </ModalContent>
+  </Modal>
+)
 
 export default CodeModal

src/components/Image.tsx

@@ -1,4 +1,4 @@
-import NextImage, { ImageProps as NextImageProps } from "next/image"
+import NextImage, { ImageProps as NextImageProps, StaticImageData } from "next/image"
 import { chakra, ChakraComponent, HTMLChakraProps } from "@chakra-ui/react"
 
 export type ImageProps = NextImageProps &
@@ -30,10 +30,15 @@ const imageProps: (keyof NextImageProps)[] = [
   "useMap",
 ]
 
+const DefaultNextImage = (props: ImageProps) => {
+  const hasBlurData = !!((props.src as StaticImageData).blurDataURL || props.blurDataURL)
+  return <NextImage placeholder={hasBlurData ? "blur" : "empty"} {...props}  />
+}
+
 /**
  * TODO: replace this component with import { Image } from "@chakra-ui/next-js"
  * once https://github.com/vercel/next.js/issues/52216 is fixed
  */
-export const Image: ChakraComponent<"img", NextImageProps> = chakra(NextImage, {
+export const Image: ChakraComponent<"img", NextImageProps> = chakra(DefaultNextImage, {
   shouldForwardProp: (prop) => (imageProps as string[]).includes(prop),
 })

src/components/PageMetadata.tsx

@@ -4,7 +4,7 @@ import Head from "next/head"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
-import { SITE_URL } from "@/lib/constants"
+import { DEFAULT_LOCALE, SITE_URL } from "@/lib/constants"
 
 type NameMeta = {
   name: string
@@ -39,15 +39,14 @@ const PageMetadata: React.FC<IProps> = ({
   const desc = description || t("site-description")
   const siteTitle = t("site-title")
   const fullTitle = `${title} | ${siteTitle}`
-  const origin = process.env.NEXT_PUBLIC_SITE_URL || SITE_URL // TODO: Remove .env var usage after launch
 
   // Remove any query params (?) or hash links (#)
   const path = asPath.replace(/[\?\#].*/, "")
   const slug = path.split("/")
 
   /* Set canonical URL w/ language path to avoid duplicate content */
   /* e.g. set ethereum.org/about/ to ethereum.org/en/about/ */
-  const url = new URL(join(locale!, path), origin).href
+  const url = new URL(join(locale === DEFAULT_LOCALE ? "" : locale!, path), SITE_URL).href
   const canonical = canonicalUrl || url
 
   /* Set fallback ogImage based on path */
@@ -69,7 +68,7 @@ const PageMetadata: React.FC<IProps> = ({
     ogImage = image
   }
 
-  const ogImageUrl = new URL(ogImage, origin).href
+  const ogImageUrl = new URL(ogImage, SITE_URL).href
   const metadata: Meta[] = [
     { name: `description`, content: desc },
     { name: `image`, content: ogImageUrl },

src/components/TitleCardList.tsx

@@ -65,12 +65,7 @@ const TitleCardList: React.FC<IProps> = ({
         borderBottomStyle="solid"
         borderBottomColor="text"
       >
-        <Icon
-          as={IoCodeOutline}
-          _hover={{
-            path: { fill: "tranparent" },
-          }}
-        />
+        <Icon as={IoCodeOutline} />
         <Translation id={headerKey} />
         {isCode && (
           <Hide below="s">
@@ -180,7 +175,7 @@ const TitleCardList: React.FC<IProps> = ({
             _hover={{
               boxShadow: "0 0 1px var(--eth-colors-primary-base)",
               bg: "primary100",
-              color: "black",
+              "*": { color: "black" },
             }}
           >
             {image && (

src/data/placeholders/content-contributing-translation-program-data.json

@@ -0,0 +1,14 @@
+{
+  "/content/contributing/translation-program/enterprise-eth.png": {
+    "hash": "ff06ba29",
+    "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAYAAAB24g05AAAACXBIWXMAAC4jAAAuIwF4pT92AAACG0lEQVR4nIVSTW8SURSdok1d+QOMG136DzQ2TRM3LnWr65poadIm1tjNJFXTaDeSViNthMgAWioBpmQIkS9hUrAMVJgxCLQ2ttiWQiyCw9cwHAELkZUneXn35Z1z77nJIYg+YADAQLtiVBgyvcJlLYkzfYwOh+icPqnJhFMkCYWX9J5uv9eo+nAqBvic0vXuf7cBN6YeJE4GddASdkS6OYytLOCDUskMeXSyUcwDYRrmjhBQtO+Exn4lZ6a5768NF088/e30UFMcpih8smhwyFkxuhtEVXDLSDiAqAPXusOOVp0TCKeQtHomeg7GHx1fMAaQZwRg2VZm1sziDZaWhQgDxGyQvIb61S7X5UrMbDQANiMaeg3m7bi7xALPGdQpP0C5UTa/kcSP2jJYCmVaXRzJ7ok3o+vlEUeywmy19vmcq+2EUvmzxC1SPD/7HpEFH7DoBh7rKrF1rmJJcMBbT6UZNEtIxKXd/ZJUlQvSb5WjXrhvAWzBWsFozZ0jlGqMTlLAtB7ylAYYX2z8mn+Hw3Ck0eQ3D+RvXFbeTtZkfbYo0YVaQ5UX6zMtB88OEOitcG8JT6fNwNQKmg9WgTk9MKsF0ukato6rYD0FfA2k4EmXmi83gReZUnVyv3CnLwdPln/e9rv24hvebSETiPEBe5pP+2I8HUnxfIjnd2wCn2Wj8bgz+eWHiwsJKv+lf+KF/lT9BwCp4DgMtus/SlN/7zYb6eoAAAAASUVORK5CYII="
+  },
+  "/content/contributing/translation-program/how-to-translate/crowdin-files.png": {
+    "hash": "00249f32",
+    "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHCAYAAAABIM1CAAAACXBIWXMAABYlAAAWJQFJUiTwAAABB0lEQVR4nGMoL6/4b2pq9v/EiRP/7927hxPfun3rf2Vz1f/M8qz/ta11/5ctXw7Ww5CSkvrfzNzy/4WLF/+/fPkSJwYZoGik9J+Bn+G/pYfT/8LiMogBDg4O/93c3P6vWrWKoAG6dvr/OWQ4/pu5WvyvqauDGODh4fnfxtb2/9HjxwkaoGOr959BguG/W4jX/4bGZoQBoDDYsGkT2K/4DNB3MP0vqi753zfa739ZeSXYUgY/f///tnb2/7ds2fIfBL58+YIVP3325L+Fh81/K2/H/+VNVWAvgA0Ij4j4LywiAjYkLy/v/5y5c8GGoeOVK1f+VzHS/c8hKfHfxSvgP0jfvn37/gMA7xpET3hHDYkAAAAASUVORK5CYII="
+  },
+  "/content/contributing/translation-program/how-to-translate/online-editor.png": {
+    "hash": "030e9636",
+    "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHCAIAAACOQloVAAAACXBIWXMAABJ0AAASdAHeZh94AAABLElEQVR4nGMw1NFxAoPU5OSlc+Y8f/bs5YsXcATkrl+5avrEibt27kyIj5s+bQqDn7dXZnZ2YVFRUWFhe2Pjq9ev/6OCLes31paXf/j08c/fv7du3WBwc3T08PBwd3cPCw5etmDBo8ePgYp+/vgBRBANu7Zt01HXSE5NDQsLmzhhAoOxgb6FsXGwv7+tjc2CWbPfvn0LNOni6dOnjhwBMoBo+eLFsdFRLfX1Xa2tly5dYjAzMfb39wdaYm5q2tPefu/B/W/fvr1/9w6IgIxXr18BNRzatw9s2d/PHz8x2Fhb+fr519XVz5s9e8/2bU+fPwOqAzoM4jYguH/7NtBCCBukQVJMSF9PjwEMinNyNm1c/+zRo08fPgDRm5cvgeSJQ4f2bNkCZAADDSgFAKRW45xXS5CeAAAAAElFTkSuQmCC"
+  }
+}