chore: update eslint-plugin-react to v7.37.5 and add eslint-mdx v3.6.2 and eslint-plugin-mdx

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

content-learn/mastering-kubernetes-for-engineers/ambassador-edge-stack-api-gateway-with-meshery/edge/design-interpretation.mdx

@@ -14,11 +14,11 @@ import es9 from "../../../../src/assets/images/learning-path/edge-stack/es9.png"
 
 <ChapterStyle>
 
-<h2 class="chapter-sub-heading">
+<h2 className="chapter-sub-heading">
   Exploring the Relationships Between Edge Stack Resources with a Kanvas Design
 </h2>
 
-<h3 class="chapter-sub-heading">Services and Deployments</h3>
+<h3 className="chapter-sub-heading">Services and Deployments</h3>
 
 The design below shows the traffic flow between some major components in the the Ambassador Edge Stack (AES) system.
 
@@ -44,7 +44,7 @@ Let's take a look at the roles of each component and the ports used for communic
 
 4. **edge-stack Deployment**:The edge-stack Deployment component is a core part of the Ambassador Edge Stack, handling the main processing and routing of traffic. It receives traffic from the edge-stack service on port 80/TCP and communicates with the edge-stack-admin component on port 8877/TCP for administrative tasks.
 
-<h3 class="chapter-sub-heading">Service Account Roles</h3>
+<h3 className="chapter-sub-heading">Service Account Roles</h3>
 
 <a href={es9}>
   <img src={es9} width="100%" align="center" />

content-learn/mastering-kubernetes-for-engineers/ambassador-edge-stack-api-gateway-with-meshery/edge/edge-stack-configuration.mdx

@@ -21,9 +21,9 @@ import es10 from "../../../../src/assets/images/learning-path/edge-stack/es10.pn
 
 In this chapter, you will import and deploy Edge Stack Custom Resource Definitions (CRDs) and YAML files. You'll learn how to configure the necessary Ambassador Cloud license and set up essential components like Listener and Mapping resources. Finally, you'll deploy a sample Quote service application to route traffic through Edge Stack.
 
-<h2 class="chapter-sub-heading">Steps</h2>
+<h2 className="chapter-sub-heading">Steps</h2>
 
-<h3 class="chapter-sub-heading">Import Edge Stack CRD YAML and Deploy</h3>
+<h3 className="chapter-sub-heading">Import Edge Stack CRD YAML and Deploy</h3>
 
 The Edge Stack CRD YAML file typically contains the definitions for custom resources used by Edge Stack. These definitions include the schemas and validation rules for resources like Mappings, Hosts, TLSContexts, RateLimits, Filters, and more. These custom resources allow you to define and manage the various aspects of your API gateway configuration, such as routing, authentication, rate limiting, and TLS settings, directly within your Kubernetes cluster.
 
@@ -55,7 +55,7 @@ The Edge Stack CRD YAML file typically contains the definitions for custom resou
   <img src={es3} width="100%" align="center" />
 </a>
 
-<h3 class="chapter-sub-heading">Import the Edge Stack YAML </h3>
+<h3 className="chapter-sub-heading">Import the Edge Stack YAML </h3>
 
 Now that the CRDs have been deployed, go ahead to deploy the main Edge Stack Configuration.
 
@@ -71,7 +71,7 @@ Now that the CRDs have been deployed, go ahead to deploy the main Edge Stack Con
   <img src={es5} width="100%" align="center" />
 </a>
 
-<h3 class="chapter-sub-heading">Configure Edge Stack License</h3>
+<h3 className="chapter-sub-heading">Configure Edge Stack License</h3>
 
 Ambassador Edge Stack requires a valid license to operate. Generate your [license token](https://app.getambassador.io/cloud/edge-stack/license/new) to establish a secure connection between Edge Stack and Ambassador Cloud.
 
@@ -83,7 +83,7 @@ Ambassador Edge Stack requires a valid license to operate. Generate your [licens
   <img src={es6} width="100%" align="center" />
 </a>
 
-<h3 class="chapter-sub-heading">Deploy Edge Stack </h3>
+<h3 className="chapter-sub-heading">Deploy Edge Stack </h3>
 
 1. Click **Actions** in the top right corner and click on Deploy (double tick).
 
@@ -93,7 +93,7 @@ Ambassador Edge Stack requires a valid license to operate. Generate your [licens
   <img src={es10} width="100%" align="center" />
 </a>
 
-<h3 class="chapter-sub-heading">Listener Custom Resource</h3>
+<h3 className="chapter-sub-heading">Listener Custom Resource</h3>
 
 The Listener Custom Resource tells Ambassador Edge Stack what port to listen on.
 
@@ -132,7 +132,7 @@ EOF
 
 2. Deploy the resource on Kanvas.
 
-<h3 class="chapter-sub-heading">Mapping Resource</h3>
+<h3 className="chapter-sub-heading">Mapping Resource</h3>
 
 Create a Mapping configuration that instructs Edge Stack on how and where to route traffic. In the YAML file below, any request coming to the specified _hostname_ with the _prefix_ /backend/ will be directed to the _quote service_.
 
@@ -152,7 +152,7 @@ spec:
 
 ```
 
-<h3 class="chapter-sub-heading">Deploy Quote Service</h3>
+<h3 className="chapter-sub-heading">Deploy Quote Service</h3>
 
 Next, import the [Quote Service YAML](https://app.getambassador.io/yaml/v2-docs/3.9.1/quickstart/qotm.yaml) and deploy it on Kanvas. This step will create the necessary deployment and service resources for the Quote service within your Kubernetes cluster, allowing you to see how Edge Stack manages and routes traffic to this backend service.
 

content-learn/mastering-kubernetes-for-engineers/ambassador-edge-stack-api-gateway-with-meshery/edge/introduction.mdx

@@ -12,13 +12,13 @@ import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapte
 
 <ChapterStyle>
 
-<h2 class="chapter-sub-heading">Overview</h2>
+<h2 className="chapter-sub-heading">Overview</h2>
 
 In this tutorial, you will explore Edge Stack using Meshery Playground. You'll get hands-on experience importing YAML files that contain Edge Stack configurations and Custom Resource Definitions (CRDs).
 
 You'll use Kanvas to view, configure, and deploy Kubernetes resources, including Edge Stack with its custom resources and a sample application. Additionally, you'll leverage Meshery's visualization tool to filter the deployed resources in your cluster.
 
-<h2 class="chapter-sub-heading">Objectives</h2>
+<h2 className="chapter-sub-heading">Objectives</h2>
 
 This tutorial will guide you through exploring Edge Stack using Meshery Playground. You'll cover:
 
@@ -28,7 +28,7 @@ This tutorial will guide you through exploring Edge Stack using Meshery Playgrou
 4. **Visualization**: Get hands-on with Kanvas to understand the components and their interactions within Edge Stack.
 5. **Design Interpretation**: Explore some of the relationships between Edge Stack resources with a Kanvas design, explaining their functionalities and roles within the system.
 
-<h2 class="chapter-sub-heading">Meshery Playground and Kanvas</h2>
+<h2 className="chapter-sub-heading">Meshery Playground and Kanvas</h2>
 
 **Meshery Playground** is an interactive and collaborative live cluster environment that simplifies
 the deployment process and enhances user experience by providing visual tools for managing
@@ -38,19 +38,19 @@ Kubernetes resources.
 
 If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground](https://docs.meshery.io/guides/tutorials/kubernetes-pods) tutorial first.
 
-<h2 class="chapter-sub-heading">Ambassador Edge Stack</h2>
+<h2 className="chapter-sub-heading">Ambassador Edge Stack</h2>
 
 Ambassador [Edge Stack](https://www.getambassador.io/products/edge-stack/api-gateway) is a Kubernetes-native API Gateway built on [Envoy Proxy](https://www.envoyproxy.io/). It streamlines Kubernetes workflows for configuration, deployment, and management of APIs, efficiently snd securely managing high traffic volumes and distributing requests across multiple services in your cluster.
 
 The "stack" includes security functionalities such as automatic TLS, authentication, and rate limiting, as well as load balancing, ingress control and observability all integrated to ensure scalability and flexibility in Kubernetes environments.
 
-<h2 class="chapter-sub-heading">Prerequisites</h2>
+<h2 className="chapter-sub-heading">Prerequisites</h2>
 
 - Basic understanding of Kubernetes concepts.
 - Access to the _Meshery Playground_. If you don't have an account, sign up at [Meshery Playground](https://play.meshery.io/).
 - [Ambassador Cloud](https://www.getambassador.io/solutions/ambassador-cloud) account.
 
-<h2 class="chapter-sub-heading">Access Meshery Playground</h2>
+<h2 className="chapter-sub-heading">Access Meshery Playground</h2>
 
 1. Log in to the [Meshery Playground](https://meshery.layer5.io/) using your credentials.
 2. Click **Explore** in the Cloud Native Playground tile to navigate to _Kanvas_.

content-learn/mastering-kubernetes-for-engineers/deploying-wordpress-and-mysql-with-persistent-volumes-with-meshery/sql/configure-components.mdx

@@ -17,7 +17,7 @@ import wp13 from "../../../../src/assets/images/learning-path/sql/wp13.png";
 
 <ChapterStyle>
 
-<h2 class="chapter-sub-heading">Create and Configure Secret for MySQL Database</h2>
+<h2 className="chapter-sub-heading">Create and Configure Secret for MySQL Database</h2>
 
 In this step, you create a Kubernetes secret component for the MySQL database. This is necessary because the configuration below is in the environment variables section of the mysql-deployment YAML file.
 
@@ -56,7 +56,7 @@ _Figure: Configure secret_
 
 3. Click outside the window to close the configuration tab.
 
-<h2 class="chapter-sub-heading">Create Persistent Volumes</h2>
+<h2 className="chapter-sub-heading">Create Persistent Volumes</h2>
 
 MySQL and WordPress each require a [Persistent Volume (PV)](https://kubernetes.io/docs/concepts/storage/persistent-volumes/) to store their data.
 

content-learn/mastering-kubernetes-for-engineers/deploying-wordpress-and-mysql-with-persistent-volumes-with-meshery/sql/deploy.mdx

@@ -9,14 +9,13 @@ order: 5
 ---
 import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
 import wp15 from "../../../../src/assets/images/learning-path/sql/wp15.png";
-import wp16 from "../../../../src/assets/images/learning-path/sql/wp16.png";
 import wp17 from "../../../../src/assets/images/learning-path/sql/wp17.png";
 import wp18 from "../../../../src/assets/images/learning-path/sql/wp18.png";
 import wp22 from "../../../../src/assets/images/learning-path/sql/wp22.png";
 
 <ChapterStyle>
 
-<h2 class="chapter-sub-heading">Deploy the Resources</h2>
+<h2 className="chapter-sub-heading">Deploy the Resources</h2>
 
 1. Click `Actions` in the top right corner and click on `Deploy`.
 

content-learn/mastering-kubernetes-for-engineers/deploying-wordpress-and-mysql-with-persistent-volumes-with-meshery/sql/group-components.mdx

@@ -13,7 +13,7 @@ import wp21 from "../../../../src/assets/images/learning-path/sql/wp21.png";
 
 <ChapterStyle>
 
-<h2 class="chapter-sub-heading">Add Labels</h2>
+<h2 className="chapter-sub-heading">Add Labels</h2>
 
 To make it easier to filter and manage your resources during visualization, add labels to all of them.
 
@@ -33,7 +33,7 @@ _Figure: Add label_
 
 5. Now click on `Save As` and save the design.
 
-<h2 class="chapter-sub-heading">Group Components</h2>
+<h2 className="chapter-sub-heading">Group Components</h2>
 
 The _**Group Components**_ icon on the dock below allows you to group resources based on shared labels or annotations.
 

content-learn/mastering-kubernetes-for-engineers/deploying-wordpress-and-mysql-with-persistent-volumes-with-meshery/sql/introduction.mdx

@@ -15,32 +15,32 @@ In this tutorial, you will learn how to deploy a **WordPress site and a MySQL da
 
 > **NOTE:** If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground](https://docs.meshery.io/guides/tutorials/kubernetes-pods) tutorial first.
 
-<h2 class="chapter-sub-heading">Prerequisites</h2>
+<h2 className="chapter-sub-heading">Prerequisites</h2>
 
 - Basic understanding of Kubernetes concepts.
 - Access to the _Meshery Playground_. If you don't have an account, sign up at [Meshery Playground](https://play.meshery.io/).
 
-<h2 class="chapter-sub-heading">Lab Scenario</h2>
+<h2 className="chapter-sub-heading">Lab Scenario</h2>
 
 - Import the WordPress and MySQL manifest files into Meshery Playground.
 - Create persistent volumes and a secret for the resources using the visual tools provided by Meshery.
 - Deploy these resources on the playground.
 
 In this lab, you will import the WordPress and MySQL manifest files into Meshery Playground. You will visualize these Kubernetes resources and create persistent volumes for them using the visual tools provided by Meshery. Finally, you will deploy these resources on the Playground.
 
-<h2 class="chapter-sub-heading">Objective</h2>
+<h2 className="chapter-sub-heading">Objective</h2>
 
 Learn how to import manifest files, visualize Kubernetes resources, create new resource components, and deploy the application using Meshery Playground.
 
-<h2 class="chapter-sub-heading">Steps</h2>
+<h2 className="chapter-sub-heading">Steps</h2>
 
-<h3 class="chapter-sub-heading">Download the Kubernetes Configuration Files</h3>
+<h3 className="chapter-sub-heading">Download the Kubernetes Configuration Files</h3>
 
 Go ahead and download these yaml files [mysql-deployment.yaml](https://kubernetes.io/examples/application/wordpress/mysql-deployment.yaml) and [wordpress-deployment.yaml](https://kubernetes.io/examples/application/wordpress/wordpress-deployment.yaml)
 
 These YAML files contain the Service definitions, Persistent Volume Claims, and Deployment configurations for the WordPress site and the MySQL database.
 
-<h3 class="chapter-sub-heading">Access Meshery Playground</h3>
+<h3 className="chapter-sub-heading">Access Meshery Playground</h3>
 
 1. Log in to the [Meshery Playground](https://meshery.layer5.io/) using your credentials. On successful login, you should be at the dashboard. Press the **X** on the _Where do you want to start?_ popup to close it (if required).
 2. Click **Explore** in the Cloud Native Playground tile to navigate to _Kanvas_

content-learn/mastering-kubernetes-for-engineers/deploying-wordpress-and-mysql-with-persistent-volumes-with-meshery/sql/visualize.mdx

@@ -15,7 +15,7 @@ import wp23 from "../../../../src/assets/images/learning-path/sql/wp23.png";
 
 <ChapterStyle>
 
-<h2 class="chapter-sub-heading">Visualizing the Deployed Resources</h2>
+<h2 className="chapter-sub-heading">Visualizing the Deployed Resources</h2>
 
 To view the resources deployed, use the Visualize section of the _Kanvas_. In this section, you can apply filters to display the specific resources you want to see.
 
@@ -36,7 +36,7 @@ To view the resources deployed, use the Visualize section of the _Kanvas_. In th
 
 _Figure: Filter resources_
 
-<h2 class="chapter-sub-heading">Resource Details</h2>
+<h2 className="chapter-sub-heading">Resource Details</h2>
 
 You can click on any resource to view more details about it in the "Details" section on the right sidebar.
 
@@ -60,7 +60,7 @@ The Service details only display the cluster IP for now. So there is no way to a
 
 _Figure: Get more details about service_
 
-<h2 class="chapter-sub-heading">Deleting Resources</h2>
+<h2 className="chapter-sub-heading">Deleting Resources</h2>
 
 To delete the resources, use the `Undeploy` option from the Action dropdown in the _Design_ tab.
 

content-learn/mastering-kubernetes-for-engineers/explore-dapr-with-meshery/dapr/deploy-dapr-control-plane.mdx

@@ -18,10 +18,10 @@ import daprVisualizer from "../../../../src/assets/images/learning-path/dapr/dap
 
 The [Dapr control plane](https://docs.dapr.io/concepts/dapr-services/) is a set of services responsible for managing and orchestrating the runtime and configuration of Dapr. The control plane ensures the smooth operation, deployment, and management of Dapr sidecars and their interactions within a microservices architecture. 
 
-<h2 class="chapter-sub-heading">Steps</h2>
+<h2 className="chapter-sub-heading">Steps</h2>
 
 
-<h3 class="chapter-sub-heading">Import Dapr Helm Chart</h3>
+<h3 className="chapter-sub-heading">Import Dapr Helm Chart</h3>
 
 1. In the left sidebar, click the upward arrow symbol(import icon) to import the file into Meshery.
 
@@ -46,7 +46,7 @@ The [Dapr control plane](https://docs.dapr.io/concepts/dapr-services/) is a set
   embedScriptSrc="/embed-test/embedded-design-dapr.js"
 />
 
-<h3 class="chapter-sub-heading">Design Interpretation</h3>
+<h3 className="chapter-sub-heading">Design Interpretation</h3>
 
 From the design above, several key components that constitute the **Dapr control plane** can be observed, including:
 
@@ -124,7 +124,7 @@ When a new application pod is deployed, the **dapr-sidecar-injector deployment**
 
 The grouping of these components illustrates their interconnections, enhancing our ability to visualize and understand how various parts function together within the cluster.
 
-<h3 class="chapter-sub-heading">Deploy Dapr</h3>
+<h3 className="chapter-sub-heading">Deploy Dapr</h3>
 1. The Dapr control plane has to deployed in the **dapr-system** namespace. Click on the namespaced components(deployments, services etc) to open up the configuration tab. Then change the namespace from **default** to **dapr-system**.
 
 1. To deploy, click **Actions** in the top right corner and click on Deploy (double tick). To learn about deploying Designs in Meshery, See Chapter [Deploying Meshery Designs](https://meshery.layer5.io/academy/learning-paths/mastering-meshery/introduction-to-meshery).

content-learn/mastering-kubernetes-for-engineers/explore-dapr-with-meshery/dapr/deploy-dapr-statestore-component.mdx

@@ -15,13 +15,13 @@ import metadataImage from "../../../../src/assets/images/learning-path/dapr/meta
 
 
 <ChapterStyle>
-<h3 class="chapter-sub-heading">Create, Configure and Deploy Dapr Redis State Store Component</h3>
+<h3 className="chapter-sub-heading">Create, Configure and Deploy Dapr Redis State Store Component</h3>
 
 Following the deployment of the Redis state store, we will use Meshery to create and configure the Dapr state store component. This involves specifying essential details, including the redisHost and redisPassword fields in the Dapr component configuration, which tell Dapr where to find the Redis server and how to authenticate.
 
 This setup ensures that Dapr connects to the correct Redis instance, allowing it to handle state management seamlessly without direct involvement from your application.
 
-<h4 class="chapter-sub-heading">Search for Component</h4>
+<h4 className="chapter-sub-heading">Search for Component</h4>
 
 1. On the Dock at the bottom of the design canvas, click on **Components**.
 1. Search for "dapr".
@@ -32,7 +32,7 @@ This setup ensures that Dapr connects to the correct Redis instance, allowing it
 </a>
 
 
-<h4 class="chapter-sub-heading" style="margin-top: 1.4rem">Configure State Store and Deploy</h4>
+<h4 className="chapter-sub-heading" style="margin-top: 1.4rem">Configure State Store and Deploy</h4>
 
 Now you can start configuring the Dapr state-store.