Add the ability to use React components inline in Docusaurus markdown

[alfarok]

Description

This PR addresses #3533.

Two new functional React components have been added to the repo:

1. Http-Request-Sample.jsx
2. Web-Socket-Sample.jsx

These are not yet used anywhere in the codebase, however they can be tested by adding the following lines to any markdown document inline:

1. Web Request

import Http from "./../../components/Http-Request-Sample"
{{ polkadot: <Http url="https://polkadot.api.subscan.io/api/scan/block" hash="0x68a27df5a52ff2251df2cc8368f7dcefb305a13bb3d89b65c8fb070f23877f2c" color="#e6007a">Polkadot</Http> :polkadot }}
{{ kusama: <Http url="https://kusama.api.subscan.io/api/scan/block" hash="0x8019e80a0b97ee827b3bd8be1ac3d0fe4e9978d7b5594c0afb109d3ff8cf3465" color="#000000">Kusama</Http> :kusama }}

2. Web Socket

import Socket from "./../../components/Web-Socket-Sample"
{{ polkadot: <Socket url="wss://rpc.polkadot.io" color="#e6007a">Polkadot</Socket> :polkadot }}
{{ kusama: <Socket url="wss://kusama-rpc.polkadot.io" color="#000000">Kusama</Socket> :kusama }}

This will render something similar to (ignore page context for sample):

or

The first pink or black box is the web socket connection updating the current block number in real-time. The second is a POST request made to subscan to retrieve the latest information about an existing block. The web socket will continue to update, while the POST will only execute once when the page initially loads but will re-execute upon returning to the page for updated data.

Follow-up Tasks

• Start leveraging new React components to replace existing global constants or other dynamic values #3536 which should consider the following
  • The team should discuss how we want to introduce this functionality into the existing code and determine which global constants should be replaced with these inline components
  • The inline components should be modified to handle a variety of request types. It is good practice to avoid creating new components for every scenario. Instead, we should add parameters (or optional parameters) to extend the existing components. So for example, the Http-Request-Sample.jsx component should be able to handle a GET or POST request without creating another component.

[DrW3RK]

Here are a few I could think of

• Min Active Nomination (very useful for users landing on our Staking page)
• Min stake backing an active validator in an era (resourceful for new node operators eyeing our ecosystem)
• Number of parachains on Polkadot/Kusama
• number of active nominators and Total number of nominators
• number of active validators/ waiting validators
• era number
• Staked DOT/KSM percentage

[alfarok]

Here are a few I could think of

• Min Active Nomination (very useful for users landing on our Staking page)
• Min stake backing an active validator in an era (resourceful for new node operators eyeing our ecosystem)
• Number of parachains on Polkadot/Kusama
• number of active nominators and Total number of nominators
• number of active validators/ waiting validators
• era number
• Staked DOT/KSM percentage

Great! These will definitely get us started using the components. If you don't mind I would like to break this out into a new task. This way we can also refer to this PR as a hello_world sample regarding how we can use React inline. Abstracting the samples to fit several different scenarios will make the components slightly more confusing for someone that may be new to the workflow or React. Ultimately, I think we can eventually convert all the constants to leverage the components and remove the previous system.

[alfarok]

@DrW3RK I added #3536 to start working on this. My main concern with doing both in the same PR is that the diff would be overwhelming to review. I viewed this task as more of a research spike in agile and the follow-up as the implementation of the proposed solution.

[DrW3RK]

Tested it locally. Works as expected