Update or revamp client diversity

[konopkja]

https://ethereum.org/en/developers/docs/nodes-and-clients/client-diversity/

Information regarding client diversity seems to be really out of date, also reth is not even mentioned.

Potential solutions:

1. Ideally try to use API to get this data dynamically instead of an image.
2. update the image and above it add a message "This diagram may be outdated, go to ethernodes.org and clientdiversity.org for up to date informaiton"

[LifeofDan-EL]

Hello, so I went to clientdiversity.org and they provide info on what their data source is. The Execution Clients data is provided by The Ethereum Supermajority Risk and the Consensus Clients are provided by Sigma Prime's Blockprint, however, there is no API provided on both sources, so it is information that has to be updated manually.

What looks possible now is;
Have a Pie chart that changes based on the percentage attached to each client, however, the percentage would need to be updated manually from time to time.

[konopkja]

would you be able to make that?

[LifeofDan-EL]

Yeah, I can work on that and have it as a chore to update the values, weekly, twice a month or monthly.

[konopkja]

Yeah, I can work on that and have it as a chore to update the values, weekly, twice a month or monthly.

thank you so much!!!!!

[LifeofDan-EL]

Hello, so an update on this. I wanted something that works with markdown by default and I picked Mermaid. It is supported by Docusaurus, MkDocs, Hugo, Obsidian, GitLab Wiki by default.

This approach only modifies the index.md file under client diversity, and it can be updated by just changing the values. However, the fall back is the colour coding, which can't be modified from markdown.

[pettinarip]

Hey @LifeofDan-EL, thanks for the update!

Mermaid looks great and it’s definitely nice that it works well with markdown. That said, we already have a charting library installed as part of the UI stack (shadcn/ui charts), which is a bit lighter and already integrated with our theming system. Since we’re just adding a single chart, we’d prefer to avoid bringing in an additional dep like Mermaid, which is a bit heavier. Let’s try to stick with the existing charting setup if possible.

Here are some examples that we are currently using. We could create one for PieChart

• https://github.com/ethereum/ethereum-org-website/blob/dev/src/components/BarChart/index.tsx
• https://github.com/ethereum/ethereum-org-website/blob/dev/src/components/AreaChart/index.tsx

[LifeofDan-EL]

Hello @pettinarip, thanks for the information. I do agree it's best to implement using the available charting library. I will work with this then.

[LifeofDan-EL]

An update. So I have created a PieChart component similar to the structure of the BarChart and AreaChart components. I have also imported it into the index.md of the client diversity but I have an issue.

I can't get the website to render properly locally, so I am basically working blindly. I faced this issue previously during my last PR, however I was able to blindly navigate through it.

Any idea what the problem is and fix?

[pettinarip]

Hey @LifeofDan-EL could you create a PR so we can reproduce the error? I cloned the repo from scratch, installed the deps, and ran yarn dev, and everything worked fine on my end. The error messages in the screenshots don’t give me enough info to figure out what’s going on.

I’m guessing you made some changes to the code and tried adding the new PieChart to the markdown file. Just a heads-up: for md pages, we need to inject the components during the compilation stage. You’ll need to add PieChart to the list of components being injected—that could be the issue.

If that’s not it, go ahead and create a PR, and we can dig into it further.

[LifeofDan-EL]

Hello @pettinarip, I just made a PR so you can take a look on your end. Once the PieChart works, I will be updating the docs to reflect the current values.