Client diversity piechart update

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

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

@@ -39,20 +39,19 @@ Although these are unlikely scenarios, the Ethereum eco-system can mitigate thei
 
 There is also a human cost to having majority clients. It puts excess strain and responsibility on a small development team. The lesser the client diversity, the greater the burden of responsibility for the developers maintaining the majority client. Spreading this responsibility across multiple teams is good for both the health of Ethereum's network of nodes and its network of people.
 
-## Current client diversity {#current-client-diversity}
+### Current client diversity {#current-client-diversity}
 
-![Pie chart showing client diversity](./client-diversity.png)
-_Diagram data from [ethernodes.org](https://ethernodes.org) and [clientdiversity.org](https://clientdiversity.org/)_
+<PieChartContainer />
 
-The two pie charts above show snapshots of the current client diversity for the execution and consensus layers (at time of writing in January 2022). The execution layer is overwhelmingly dominated by [Geth](https://geth.ethereum.org/), with [Open Ethereum](https://openethereum.github.io/) a distant second, [Erigon](https://github.com/ledgerwatch/erigon) third and [Nethermind](https://nethermind.io/) fourth, with other clients comprising less than 1 % of the network. The most commonly used client on the consensus layer - [Prysm](https://prysmaticlabs.com/#projects) - is not as dominant as Geth but still represents over 60% of the network. [Lighthouse](https://lighthouse.sigmaprime.io/) and [Teku](https://consensys.net/knowledge-base/ethereum-2/teku/) make up ~20% and ~14% respectively, and other clients are rarely used.
+The two pie charts above show snapshots of the current client diversity for the execution and consensus layers (at time of writing in June 2025). Client diversity has improved over the years, and the execution layer has seen a reduction in the domination by [Geth](https://geth.ethereum.org/), with [Nethermind](https://www.nethermind.io/nethermind-client) a close second, [Besu](https://besu.hyperledger.org/) third and [Erigon](https://github.com/ledgerwatch/erigon) fourth, with other clients comprising less than 3 % of the network. The most commonly used client on the consensus layer - [Lighthouse](https://lighthouse.sigmaprime.io/) - is quite close with the second most used.[Prysm](https://prysmaticlabs.com/#projects) and [Teku](https://consensys.net/knowledge-base/ethereum-2/teku/) make up ~31% and ~14% respectively, and other clients are rarely used.
 
-The execution layer data were obtained from [Ethernodes](https://ethernodes.org) on 23-Jan-2022. Data for consensus clients was obtained from [Michael Sproul](https://github.com/sigp/blockprint). Consensus client data is more difficult to obtain because the consensus layer clients do not always have unambiguous traces that can be used to identify them. The data was generated using a classification algorithm that sometimes confuses some of the minority clients (see [here](https://twitter.com/sproulM_/status/1440512518242197516) for more details). In the diagram above, these ambiguous classifications are treated with an either/or label (e.g. Nimbus/Teku). Nevertheless, it is clear that the majority of the network is running Prysm. The data is a snapshot over a fixed set of blocks (in this case Beacon blocks in slots 2048001 to 2164916) and Prysm's dominance has sometimes been higher, exceeding 68%. Despite only being snapshots, the values in the diagram provide a good general sense of the current state of client diversity.
+The execution layer data were obtained from [supermajority.info](https://supermajority.info/) on 21-Jun-2025. Data for consensus clients was obtained from [Michael Sproul](https://github.com/sigp/blockprint). Consensus client data is more difficult to obtain because the consensus layer clients do not always have unambiguous traces that can be used to identify them. The data was generated using a classification algorithm that sometimes confuses some of the minority clients (see [here](https://twitter.com/sproulM_/status/1440512518242197516) for more details). In the diagram above, these ambiguous classifications are treated with an either/or label (e.g. Nimbus/Teku). Nevertheless, it is clear that the majority of the network is running Prysm. Despite only being snapshots, the values in the diagram provide a good general sense of the current state of client diversity.
 
 Up to date client diversity data for the consensus layer is now available at [clientdiversity.org](https://clientdiversity.org/).
 
 ## Execution layer {#execution-layer}
 
-Until now, the conversation around client diversity has focused mainly on the consensus layer. However, the execution client [Geth](https://geth.ethereum.org) currently accounts for around 85% of all nodes. This percentage is problematic for the same reasons as for consensus clients. For example, a bug in Geth affecting transaction handling or constructing execution payloads could lead to consensus clients finalizing problematic or bugged transactions. Therefore, Ethereum would be healthier with a more even distribution of execution clients, ideally with no client representing more than 33% of the network.
+Until now, the conversation around client diversity has focused mainly on the consensus layer. However, the execution client [Geth](https://geth.ethereum.org) currently accounts for around 41% of all nodes. This percentage is problematic for the same reasons as for consensus clients. For example, a bug in Geth affecting transaction handling or constructing execution payloads could lead to consensus clients finalizing problematic or bugged transactions. Therefore, Ethereum would be healthier with a more even distribution of execution clients, ideally with no client representing more than 33% of the network.
 
 ## Use a minority client {#use-minority-client}
 
@@ -66,6 +65,8 @@ Addressing client diversity requires more than individual users to choose minori
 
 [Erigon](https://github.com/ledgerwatch/erigon)
 
+[Reth](https://github.com/paradigmxyz/reth)
+
 [Go-Ethereum](https://geth.ethereum.org/)
 
 ### Consensus clients {#consensus-clients}

src/components/MdComponents/index.tsx

@@ -1,33 +1,34 @@
-import { type ComponentProps, type HTMLAttributes } from "react"
-
-import type { ChildOnlyProp } from "@/lib/types"
-
-import Contributors from "@/components/Contributors"
-import MarkdownImage from "@/components/Image/MarkdownImage"
-import TooltipLink from "@/components/TooltipLink"
-import YouTube from "@/components/YouTube"
-
-import { cn } from "@/lib/utils/cn"
-
-import ContributorsQuizBanner from "../Banners/ContributorsQuizBanner"
-import Card from "../Card"
-import DocLink from "../DocLink"
-import Emoji from "../Emoji"
-import ExpandableCard from "../ExpandableCard"
-import FeaturedText from "../FeaturedText"
-import GlossaryTooltip from "../Glossary/GlossaryTooltip"
-import IdAnchor from "../IdAnchor"
-import InfoBanner from "../InfoBanner"
-import IssuesList from "../IssuesList"
-import LocaleDateTime from "../LocaleDateTime"
-import MainArticle from "../MainArticle"
-import { StandaloneQuizWidget } from "../Quiz/QuizWidget"
-import { ButtonLink } from "../ui/buttons/Button"
-import { Divider } from "../ui/divider"
-import { Flex } from "../ui/flex"
-import { ListItem, OrderedList, UnorderedList } from "../ui/list"
-import { mdxTableComponents } from "../ui/mdx-table-components"
-import { Tag } from "../ui/tag"
+import { type ComponentProps, type HTMLAttributes } from "react";
+
+import type { ChildOnlyProp } from "@/lib/types";
+
+import Contributors from "@/components/Contributors";
+import TooltipLink from "@/components/TooltipLink";
+import YouTube from "@/components/YouTube";
+
+import { cn } from "@/lib/utils/cn";
+
+import ContributorsQuizBanner from "../Banners/ContributorsQuizBanner";
+import Card from "../Card";
+import DocLink from "../DocLink";
+import Emoji from "../Emoji";
+import ExpandableCard from "../ExpandableCard";
+import FeaturedText from "../FeaturedText";
+import GlossaryTooltip from "../Glossary/GlossaryTooltip";
+import IdAnchor from "../IdAnchor";
+import MarkdownImage from "../Image/MarkdownImage";
+import InfoBanner from "../InfoBanner";
+import IssuesList from "../IssuesList";
+import LocaleDateTime from "../LocaleDateTime";
+import MainArticle from "../MainArticle";
+import PieChartContainer from "../PieChart";
+import { StandaloneQuizWidget } from "../Quiz/QuizWidget";
+import { ButtonLink } from "../ui/buttons/Button";
+import { Divider } from "../ui/divider";
+import { Flex } from "../ui/flex";
+import { ListItem, OrderedList, UnorderedList } from "../ui/list";
+import { mdxTableComponents } from "../ui/mdx-table-components";
+import { Tag } from "../ui/tag";
 
 export const commonHeadingAttributes = (className: string, id?: string) => ({
   id,
@@ -37,15 +38,15 @@ export const commonHeadingAttributes = (className: string, id?: string) => ({
     className
   ),
   "data-group": !!id || undefined,
-})
+});
 
-type HeadingProps = HTMLAttributes<HTMLHeadingElement>
+type HeadingProps = HTMLAttributes<HTMLHeadingElement>;
 
 export const Heading1 = ({ children, className, ...rest }: HeadingProps) => (
   <h1 {...commonHeadingAttributes(cn("text-[2.5rem]", className))} {...rest}>
     {children}
   </h1>
-)
+);
 
 export const Heading2 = ({
   id,
@@ -60,7 +61,7 @@ export const Heading2 = ({
     <IdAnchor id={id} />
     {children}
   </h2>
-)
+);
 
 export const Heading3 = ({
   id,
@@ -75,7 +76,7 @@ export const Heading3 = ({
     <IdAnchor id={id} />
     {children}
   </h3>
-)
+);
 
 export const Heading4 = ({
   id,
@@ -90,22 +91,22 @@ export const Heading4 = ({
     <IdAnchor id={id} />
     {children}
   </h4>
-)
+);
 
 export const Pre = (props: ChildOnlyProp) => (
   <pre
     className="max-w-full overflow-x-scroll whitespace-pre-wrap rounded border bg-background-highlight p-4"
     {...props}
   />
-)
+);
 
 export const Paragraph = (props: ChildOnlyProp) => (
   <p className="mb-4 mt-8" {...props} />
-)
+);
 
 export const HR = () => (
   <hr className="mb-4 mt-8 inline-block w-full border-body-medium opacity-60" />
-)
+);
 
 // All base html element components
 export const htmlElements = {
@@ -123,7 +124,7 @@ export const htmlElements = {
   time: LocaleDateTime,
   ul: UnorderedList,
   ...mdxTableComponents,
-}
+};
 
 /**
  * Custom React components
@@ -139,17 +140,17 @@ export const Page = ({
     )}
     {...props}
   />
-)
+);
 
 export const Title = (props: ChildOnlyProp) => (
   <Heading1 className="mt-4" {...props} />
-)
+);
 
 export const ContentContainer = (props: ComponentProps<"article">) => {
   return (
     <MainArticle className="relative flex-[1_1_992px] px-8 pb-8" {...props} />
-  )
-}
+  );
+};
 
 // All custom React components
 export const reactComponents = {
@@ -166,19 +167,20 @@ export const reactComponents = {
   GlossaryTooltip,
   InfoBanner,
   Page,
+  PieChartContainer,
   QuizWidget: StandaloneQuizWidget,
   IssuesList,
   Tag,
   Title,
   YouTube,
-}
+};
 
 /**
  * All base markdown components as default export
  */
 const MdComponents = {
   ...htmlElements,
   ...reactComponents,
-}
+};
 
-export default MdComponents
+export default MdComponents;