feat: dynimic eng ladders diagram + upgrade to docusarus v3 (#111)

* feat: dynimic eng ladders diagram

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>

* fix spellcheck

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>

* upgrade docusaurus, render role chart in browser only

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>

* fix colors

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>

* bump node version

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>

* remove typecheck, not really useful as it collides with docusarus

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>

* bump typescvript version

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>

* small ux change

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>

* pr suggestion

Co-authored-by: Belma Gutlic <belma.dzi@gmail.com>

---------

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>
Co-authored-by: Belma Gutlic <belma.dzi@gmail.com>

.github/workflows/check.yaml

@@ -21,9 +21,8 @@ jobs:
     - uses: actions/setup-node@v3
       with:
         cache: yarn
-        node-version: 16
+        node-version: 18
     - run: yarn install --frozen-lockfile
-    - run: yarn typecheck
     - run: yarn spellcheck
     - name: Check for uppercase section links
       run: |

dictionary.txt

@@ -78,6 +78,7 @@ golangci-lint
 GoMock
 Goto
 gruvbox
+EngLadderGraph
 html
 HTTPS
 Init
@@ -151,6 +152,7 @@ showLineNumbers
 skillset
 Slackbot
 SLAs
+src
 SSZ
 struct
 structs

docs/2_departments/protocol.md

@@ -10,59 +10,59 @@ as well as define the interfaces to access and manipulate even those.
 Currently, we are engaged with the following Protocols.
 
 - Ethereum Consensus-Layer Specification
-  - <https://github.com/ethereum/consensus-specs>
+  - https://github.com/ethereum/consensus-specs
 - Polkadot-Host Specification
-  - <https://github.com/w3f/polkadot-spec>
+  - https://github.com/w3f/polkadot-spec
 - Filecoin Protocol Specification
-  - <https://github.com/filecoin-project/specs>
+  - https://github.com/filecoin-project/specs
 - LibP2P Networking Specifications
-  - <https://github.com/libp2p/specs>
+  - https://github.com/libp2p/specs
 
 We contribute to existing open-source libraries and also maintain our own protocol implementations in-house. Our three main teams are:
 
 - Lodestar: Ethereum Consensus-Layer implementation in TypeScript
-  - <https://github.com/ChainSafe/lodestar>
+  - https://github.com/ChainSafe/lodestar
 - Forest: Filecoin Full-Node implementation in Rust
-  - <https://github.com/ChainSafe/forest>
+  - https://github.com/ChainSafe/forest
 - Gossamer: Polkadot-Host implementation in Go
-  - <https://github.com/ChainSafe/gossamer>
+  - https://github.com/ChainSafe/gossamer
 
 ## Lodestar
 
 Lodestar is a collection of libraries that can be bundled into a fully-fledged
-Ethereum consensus-layer client. <https://lodestar.chainsafe.io/>
+Ethereum consensus-layer client. https://lodestar.chainsafe.io/
 
 Among others, the following libraries and projects were published along with
 the Lodestar client.
 
 - Inspect Ethereum Name Records
-  - <https://enr-viewer.com>
-  - <https://www.npmjs.com/package/@chainsafe/discv5>
+  - https://enr-viewer.com
+  - https://www.npmjs.com/package/@chainsafe/discv5
 - Serialize and deserialize data for Ethereum's SSZ standard
-  - <https://www.simpleserialize.com/>
-  - <https://www.npmjs.com/package/@chainsafe/ssz>
-  - <https://www.npmjs.com/package/@chainsafe/lodestar-types>
+  - https://www.simpleserialize.com/
+  - https://www.npmjs.com/package/@chainsafe/ssz
+  - https://www.npmjs.com/package/@chainsafe/lodestar-types
 - Generate BLS keypairs for Ethereum testnets
-  - <https://www.bls-keygen.com/>
-  - <https://www.npmjs.com/package/@chainsafe/bls>
-  - <https://www.npmjs.com/package/@chainsafe/bls-hd-key>
-  - <https://www.npmjs.com/package/@chainsafe/bls-keygen>
-  - <https://www.npmjs.com/package/@chainsafe/bls-keystore>
+  - https://www.bls-keygen.com/
+  - https://www.npmjs.com/package/@chainsafe/bls
+  - https://www.npmjs.com/package/@chainsafe/bls-hd-key
+  - https://www.npmjs.com/package/@chainsafe/bls-keygen
+  - https://www.npmjs.com/package/@chainsafe/bls-keystore
 
 ChainSafe Systems is also the main contributor and co-maintainer of the JavaScript
-LibP2P implementation. <https://github.com/libp2p/js-libp2p>
+LibP2P implementation. https://github.com/libp2p/js-libp2p
 
 ## Forest
 
 Forest is a highly efficient Rust implementation of the Filecoin specification.
-<https://chainsafe.github.io/forest>
+https://chainsafe.github.io/forest
 
 Even though the client is not yet feature complete, it provided the canonical
 implementation of the Filecoin Virtual Machine and Builtin Actors used by
 every other client on the Filecoin network.
 
-- <https://github.com/filecoin-project/ref-fvm>
-- <https://github.com/filecoin-project/builtin-actors>
+- https://github.com/filecoin-project/ref-fvm
+- https://github.com/filecoin-project/builtin-actors
 
 Initially part of the Forest code, these projects and libraries are now
 stand-alone components of the Filecoin network and are co-maintained by Filecoin
@@ -74,7 +74,7 @@ Gossamer is a Polkadot host written in Go, a framework to build and run nodes
 for different blockchain protocols compatible with the Polkadot ecosystem,
 mainly but not limited to the Polkadot and Kusama relay chains. A Gossamer node
 can act as an alternative full node for chains such as Polkadot or Kusama.
-<https://chainsafe.github.io/gossamer>
+https://chainsafe.github.io/gossamer
 
 The Polkadot host in Go is capable of running multi-node Polkadot relay-chains.
 However, the client is not yet feature complete.

docs/4_the-formal-stuff/2_career-development/3_engineering.md → docs/4_the-formal-stuff/2_career-development/3_engineering.mdx

@@ -64,3 +64,10 @@ sidebar_position: 3
 ![assets/05.distinguished-se.jpg](assets/05.distinguished-se.jpg)
 
 ---
+
+## Compare
+
+
+import EngLadderGraph from "@site/src/components/EngLadderGraph"
+
+<EngLadderGraph type="engineer"></EngLadderGraph>

docs/4_the-formal-stuff/2_career-development/4_engineering-management.md → docs/4_the-formal-stuff/2_career-development/4_engineering-management.mdx

@@ -36,3 +36,11 @@ sidebar_position: 4
 ![assets/08.head.jpg](assets/08.head.jpg)
 
 ---
+
+
+## Compare
+
+
+import EngLadderGraph from "@site/src/components/EngLadderGraph"
+
+<EngLadderGraph type="engineer_management"></EngLadderGraph>

docs/4_the-formal-stuff/2_career-development/5_research.md → docs/4_the-formal-stuff/2_career-development/5_research.mdx

@@ -64,3 +64,11 @@ sidebar_position: 5
 ![assets/05.distinguished-se-rnd.jpg](assets/05.distinguished-se-rnd.jpg)
 
 ---
+
+
+## Compare
+
+
+import EngLadderGraph from "@site/src/components/EngLadderGraph"
+
+<EngLadderGraph type="researcher"></EngLadderGraph>

docusaurus.config.js

@@ -1,8 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const {themes} = require('prism-react-renderer');
 
 /** @type {import('@docusaurus/mdx-loader').MDXPlugin} */
 // @ts-ignore
@@ -73,8 +72,7 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} ChainSafe. Built with Docusaurus.`,
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        darkTheme: themes.dracula,
       }
     }),
     plugins: [

package.json

@@ -2,6 +2,7 @@
   "name": "engineering-handbook",
   "version": "0.0.0",
   "private": true,
+  "packageManager": "yarn@1.22.19",
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
@@ -16,20 +17,22 @@
     "spellcheck": "spellchecker -f \"./docs/**/*.md\" \"./*.md\" \"./src/**/*.md\" -l en-US -q  -d ./dictionary.txt"
   },
   "dependencies": {
-    "@cmfcmf/docusaurus-search-local": "^0.11.0",
-    "@docusaurus/core": "^2.3.1",
-    "@docusaurus/preset-classic": "^2.3.1",
-    "mdx-mermaid": "^1.3.2",
-    "mermaid": "^9.3.0",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@cmfcmf/docusaurus-search-local": "^1.1.0",
+    "@docusaurus/core": "^3.2.1",
+    "@docusaurus/preset-classic": "^3.2.1",
+    "highcharts": "^11.4.1",
+    "highcharts-react-official": "^3.2.1",
+    "mdx-mermaid": "^2.0.0",
+    "mermaid": "^10.9.0",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.3.1",
-    "@tsconfig/docusaurus": "^1.0.6",
+    "@docusaurus/module-type-aliases": "^3.2.1",
+    "@tsconfig/docusaurus": "^2.0.3",
     "spellchecker-cli": "^6.1.0",
-    "typescript": "^4.6.3"
+    "typescript": "^5.4.4"
   },
   "browserslist": {
     "production": [