fixes

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

Author: leecalcote

src/collections/blog/2019/2019-07-09-Meshery-start-feat-WSL2-K3d/index.mdx

@@ -77,7 +77,7 @@ docker version
 curl -L https://meshery.io/install | PLATFORM=kubernetes bash -
 ```
 <a href={wsldockerstart}>
-    <img src={wsldockerstart} class="thumbnail" alt="wsl-docker-start" />
+    <img src={wsldockerstart} className="thumbnail" alt="wsl-docker-start" />
 </a>
 
 - Create a new k3d cluster with the <code> WSL2 IP </code>
@@ -91,7 +91,7 @@ kubectl cluster-info
 ```
 
 <a href={wslk3dstart}>
-    <img src={wslk3dstart} class="thumbnail" alt="wslk3dstart" />
+    <img src={wslk3dstart} className="thumbnail" alt="wslk3dstart" />
 </a>
 <br/>
 - Start Meshery on the newly created cluster
@@ -101,7 +101,7 @@ mesheryctl system start
 ```
 
 <a href={wslmesherystart}>
-    <img src={wslmesherystart} class="thumbnail" alt="wslmesherystart" />
+    <img src={wslmesherystart} className="thumbnail" alt="wslmesherystart" />
 </a>
 - Once Meshery is fully started, login in your preferred browser using the <code>WSL2 IP</code> instead of <code>localhost</code>
 
@@ -134,7 +134,7 @@ grafana/grafana
 ```
 
 <a href={wslgrafanastart}>
-    <img src={wslgrafanastart} class="thumbnail" alt="wslgrafanastart" />
+    <img src={wslgrafanastart} className="thumbnail" alt="wslgrafanastart" />
 </a>
 
 - Access the new instance with the admin password that you set in the docker environment variable
@@ -143,11 +143,11 @@ $BROWSER $mainIP:3000 &
 ```
 
 <a href={wslgrafanalogin}>
-    <img src={wslgrafanalogin} class="thumbnail" alt="wslgrafanalogin" />
+    <img src={wslgrafanalogin} className="thumbnail" alt="wslgrafanalogin" />
 </a>
 <br />
 <a href={wslgrafanaloginsuccess}>
-    <img src={wslgrafanaloginsuccess} class="thumbnail" alt="wslgrafanaloginsuccess" />
+    <img src={wslgrafanaloginsuccess} className="thumbnail" alt="wslgrafanaloginsuccess" />
 </a>
 
 ### An inside look

src/collections/blog/2020/2020-03-11-deploying-linkerd-with-meshery/index.mdx

@@ -31,7 +31,7 @@ import {Link} from "gatsby"
 
 <BlogWrapper>
 
-<span class="starting-letter">I</span>t’s no secret that service mesh tech is boiling hot. Microservice architectures brought on as many challenges as they have advantages. With operational complexity being one of the most acute pains. Service meshes do offer solutions to a number of these operational concerns. Including but not limited to: resilience, improved observability, security and advanced service discovery.
+<span className="starting-letter">I</span>t’s no secret that service mesh tech is boiling hot. Microservice architectures brought on as many challenges as they have advantages. With operational complexity being one of the most acute pains. Service meshes do offer solutions to a number of these operational concerns. Including but not limited to: resilience, improved observability, security and advanced service discovery.
 <div>
   <div>
 
@@ -46,14 +46,14 @@ But with so many mesh options around - how do we choose, evaluate and compare th
 </div>
 <div>
 <h5>Meshery Adapters</h5>
-    <table class="table-adapters">
-        <thead class="hidden">
+    <table className="table-adapters">
+        <thead className="hidden">
             <th>Status</th>
             <th>Adapter</th>
         </thead>
         <tbody>
         <tr>
-            <td rowspan="7" class="stable-adapters">stable</td>
+            <td rowspan="7" className="stable-adapters">stable</td>
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-istio">
@@ -89,7 +89,7 @@ But with so many mesh options around - how do we choose, evaluate and compare th
         </tr>
         <tr><td className="beta-adapters"/></tr>
         <tr>
-            <td rowspan="6" class="alpha-adapters">alpha</td>
+            <td rowspan="6" className="alpha-adapters">alpha</td>
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-maesh">

src/collections/blog/2020/2020-05-21-getting-started-with-mesheryctl/index.mdx

@@ -153,7 +153,7 @@ We believe we have not missed any of the popular platforms for what it’s worth
 
 If you are thinking about the requirements you would have to run `mesheryctl`, so to your surprise, to successfully run `mesheryctl` you will only need :
 
-<table align="center" className="table-box"><tbody><tr><td className="text-centre">a running Docker daemon</td></tr></tbody></table>
+<table style={{ textAlign: "center" }} className="table-box"<tbody><tr><td className="text-centre">a running Docker daemon</td></tr></tbody></table>
 
 ### Into the MesheryCTL
 
@@ -182,7 +182,7 @@ Use "mesheryctl [command] --help" for more information about a command.
 
 Once you do `mesheryctl system start`, Meshery will pull its adapters and latest docker images. Meshery will also detect your Kubernetes configuration and will let you know if Kubernetes is running. Meshery will run it’s web-based user interface on localhost port `9081` and will let you select your choice of <a href="https://docs.meshery.io/extensibility#providers">Provider</a> before you can start managing your infrastructure with this powerful utility.
 
-<table align="center" className="table-box"><tbody><tr><td className="text-centre">One of the most interesting sub-commands of <code>mesheryctl</code> is <strong><code>perf</code></strong>.</td></tr></tbody></table>
+<table style={{ textAlign: "center" }} className="table-box"<tbody><tr><td className="text-centre">One of the most interesting sub-commands of <code>mesheryctl</code> is <strong><code>perf</code></strong>.</td></tr></tbody></table>
 
 The `perf` subcommand enables you to being managing the performance of your cloud native deployment and your workloads running atop of them. It lets you benchmark your infrastructure without using the Meshery UI from the command line interface itself. Once you type `mesheryctl perf`, it will present you with all the powerful flags you can control with CLI, including providing it with a `--file` flag that points to any of a number of performance test profiles that you may have saved.
 

src/collections/blog/2020/2020-06-01-meshery-accepted-into-cncf-landscape/index.mdx

@@ -43,7 +43,7 @@ In no time, I had my first commits approved and merged and started joining weekl
 
 Now - I won't be reviewing Meshery in this post. I've spoken about it in this video and some great introductory articles by community members can be found here and here. This post is more of a celebration, because last week...
 
-<h5 align="center"><i>Meshery now featured in the CNCF Landscape!</i></h5>
+<h5 style={{ textAlign: "center" }}<i>Meshery now featured in the CNCF Landscape!</i></h5>
 
 <img src={cncfmeshery} className="image-center" alt="cncf-meshery-landscape" />
 
@@ -53,7 +53,7 @@ And this is only the first step - there's already an application filed for Meshe
 
 This is also an invitation to participate - Meshery is a young, ambitious project - it requires a ton of work to make it what it aims to become. Integrating with all of the leading service mesh solutions asks for extensive expertise. In many areas Meshery's functionality is still young. But these are normal growth stages, aren't they? To put it simple - the community and the project need more hands! And these should be your hands!
 
-<p align="center"><i>As already mentioned - Layer5 is a very welcoming bunch!</i>
+<div style={{ textAlign: "center" }}><i>As already mentioned - Layer5 is a very welcoming bunch!</i></div>
 Open source contributions are a must-do for becoming a true cloud native hero. Cloud native is all about the community and one can't be a part of a community by only taking and never giving back. So if you were looking for a promising and welcoming project to join - look no further! Hop on to Layer5 Slack and we'll happily embrace you and help you get started.
 
 And it's not only coding! Documentation, testing, UI design, logos, blogs, videos - you decide where to apply your talent.

src/collections/blog/2020/2020-07-18-service-mesh-patterns-for-multitenancy/index.mdx

@@ -96,9 +96,10 @@ b. Ingress Gateway in the Worskpace 1 namespace for traffic entry point to the w
 c. Ingress Gateway in the Worskpace 2 namespace for traffic entry point to the workspace 2 microservices.
 
 <img src={img1} alt="kubernetes-cluster" />
-<p align="center">
+<div style={{ textAlign: "center" }}>
   Single Control Plane with Multiple Data Plane each with separate Ingress
   Gateway
+</div>
 - Creation of Control Plane CR and Data Plane CR
   A sample CR for creation of the Control plane and Data Plane CR can be referred below :
   ```sh
@@ -256,9 +257,9 @@ Once this is done the traffic will start flowing the intended gateway and it cou
 Please note that in this scenario the Kiali is also accessed via the default control plane ingress-gateway running in the istio-system control plane namespace.
 
 <img src={img3} alt="image" />
-<p align="center">Kiali view for Workspace-1
+<div style={{ textAlign: "center" }}>Kiali view for Workspace-1</div>
 <img src={img4} alt="image" />
-<p align="center">Kiali view for Workspace-2
+<div style={{ textAlign: "center" }}>Kiali view for Workspace-2</div>
 Shortly, we will go over the 3rd scenario which is to run multiple Istio Control Planes (Multiple Service Meshes) within the same Kubernetes Cluster. For that, we will need to build an open-shift setup and deploy the Maistra Istio Operator.
 Special thanks to the [Istio Community](https://istio.slack.com/) for helping me understand the concepts and also answering my queries and of course to [Lee Calcote](https://calcotestudios.com/talks/), who helped me embark on my Istio journey.
 

src/collections/blog/2020/2020-08-07-announcing-meshery-v0.4/index.mdx

@@ -52,15 +52,15 @@ Support extended to Scoop Bucket. You can now install mesheryctl on your Windows
 The `cleanup` is used to reset your Meshery deployment configuration back to its default settings. This command has been renamed to `reset` to more appropriately reflect its purpose.
 
 ### MeshSync<br/>
-<img src={operator} class="image-right" alt="meshery-operator-dark" />
+<img src={operator} className="image-right" alt="meshery-operator-dark" />
 
 -  A component of the [Meshery Operator](https://github.com/layer5io/meshery-operator), MeshSync can scan the environment to get the deployment details of specific types of cloud native infrastructure and the connected Kubernetes cluster.
 -  MeshSync is a new component addition to Meshery. Meshery needs to be constantly updated given that cloud native infrastructure and their underlying infrastructure are dynamic, constantly changing.  Meshery operations should be resilient in the face of this change.
 -  MeshSync brings a infrastructure agnostic object model that defines relationships between all objects under management.
 
 ### Meshery Adapter for Citrix Service Mesh (beta)<br/>
 
-<img src={MesheryArchitecture} class="image-right" alt="meshery-architecture" />
+<img src={MesheryArchitecture} className="image-right" alt="meshery-architecture" />
 
 - [Citrix Service Mesh](https://github.com/layer5io/meshery-cpx) is now a supported integration. Meshery incorporates support for the Citrix ADC CPX, which is a cloud-ready, container-based application delivery controller that can be provisioned on a Docker host.
 - CPX runs as the Istio Data Plane component, displacing Envoy as the default data plane service proxy.<br/>

src/collections/blog/2020/2020-08-11-my-journey-from-a-contributor-to-a-maintainer/index.mdx

@@ -44,7 +44,7 @@ The benefits of being a UI engineer?
 
 Web developers are required in every company in one meaningful way or the other as every single project needs a frontend to showcase it’s capabilities to the user. Coming to Layer5, the frontend of Meshery is built on React( another masterpiece from Facebook! ), which I learned from scratch when I joined the community.
 
-<img src={SignedBook} class="image-right" alt="Nikhil-ladha-work" />
+<img src={SignedBook} className="image-right" alt="Nikhil-ladha-work" />
 
 Now, months have passed and with some healthy dedication and hours of staring at thousands of lines of code, I have a good base and practical experience with React, something which you can’t hope to gain from personal projects and require a community for.
 

src/collections/blog/2020/2020-09-25-announcing-meshmates/index.mdx

@@ -32,7 +32,7 @@ import { BlogWrapper } from "../../Blog.style.js";
   </h4>
   <img
     src={ Tanuj }
-    class="image-right"
+    className="image-right"
     alt="tanuj-agarwal"
   />
       I was introduced to the Layer5 community three months back. Being fairly new
@@ -66,7 +66,7 @@ import { BlogWrapper } from "../../Blog.style.js";
   </h4>
   <img
     src={ Kelechi }
-    class="image-right"
+    className="image-right"
     alt="kelechi-precious"
   />
       It was the middle of the COVID-19 pandemic and being unproductive wasn't
@@ -102,7 +102,7 @@ import { BlogWrapper } from "../../Blog.style.js";
   </h4>
   <img
     src={ Ruth }
-    class="image-right"
+    className="image-right"
     alt="ruth-ikegah"
   />
       The field of open source had always been intriguing to me. The idea of a

src/collections/blog/2020/2020-11-17-layer5-at-kubecon-2020/index.mdx

@@ -20,20 +20,21 @@ import kubecon3 from "./kubecon3.webp";
 
 <BlogWrapper>
 
-<p class="centered-text">
+<p className="centered-text">
   Thanks to our open source contributors, Layer5 projects are well represented
   at KubeCon. Attend our talks to help you get started with managing your own
   service mesh!
+</p>
 <h3>
   KubeCon + CloudNativeCon NA 2020 is here and Layer5 is in the spotlight!
 </h3>
 
 <a href="https://kccncna20.sched.com/event/ekEz/service-mesh-specifications-and-why-they-matter-in-your-deployment-lee-calcote-naveen-kumar-layer5">
   <b>Service Mesh Specifications and Why They Matter in your Deployment</b>{" "}
-  <img class="image-right kubecon-img1" src={kubecon1} />
+  <img className="image-right kubecon-img1" src={kubecon1} />
 </a>
 
-<h4 class="date"> November 18, 2020 </h4>
+<h4 className="date"> November 18, 2020 </h4>
 As the ubiquity of service meshes unfolds so does the need for vendor and technology-agnostic
 interfaces to interact with them. The following three open specifications solving
 the challenge of interoperability, workload and performance management between service
@@ -48,10 +49,10 @@ unique and why they are very much needed.
   <b>CNCF SIG Network: Intro and Deep-Dive</b>
 </a>
 
-<h4 class="date"> November 20, 2020 </h4>
+<h4 className="date"> November 20, 2020 </h4>
 <b>It’s the network!</b> is the cry of every system administrator, every
 developer. With the increased prevalence of <a href="https://kccncna20.sched.com/event/etsE/cncf-sig-network-intro-deep-dive-lee-calcote-layer5">
-  <img class="image-right kubecon-img3" src={kubecon3} />{" "}
+  <img className="image-right kubecon-img3" src={kubecon3} />{" "}
 </a>
 microservice-based distributed systems, it’s true - networking as a discipline
 has never been more critical in the efficient operation of cloud native
@@ -64,15 +65,15 @@ Network.
 See what the CNCF's Service Mesh Working Group has been up to. Join this talk for an intro to the SIG, its charter and a deeper discussion of current cloud native networking topics being advanced in this SIG. Current CNCF projects in-scope: Open Service Mesh, Kuma, Chaos Mesh, Ambassador, CNI, CoreDNS, Envoy, gRPC, Linkerd, NATS, Network Service Mesh.
 
 <a href="https://kccncna20.sched.com/event/fMYB/meet-the-maintainer-service-mesh-interface">
-  <img class="image-right kubecon-img2" src={kubecon2} />
+  <img className="image-right kubecon-img2" src={kubecon2} />
 </a>
 
 <br />
 <a href="https://kccncna20.sched.com/event/fMYB/meet-the-maintainer-service-mesh-interface">
   <b>Meet the Maintainers: Service Mesh Interface</b>
 </a>
 
-<h4 class="date"> November 17, 2020 </h4>
+<h4 className="date"> November 17, 2020 </h4>
 Join the Service Mesh Interface (SMI) and Meshery maintainers for a Meet the Maintainers
 office hours. Learn all about Service Mesh Interface and how Meshery is the service
 mesh manager to determine the conformance of all service meshes in or out of compliance
@@ -81,7 +82,7 @@ with the specification.
 <br />
 <br />
 
-<h4 class="centered-text">
+<h4 className="centered-text">
   We hope to see you at KubeCon + CloudNativeCon NA 2020. Be sure to say hello
   in the <a href="http://slack.layer5.io/">Layer5 Community</a>!
 </h4>

src/collections/blog/2020/2020-12-16-functional-testing-with-cypress-in-Meshery-ui/index.mdx

@@ -57,8 +57,8 @@ describe('Provider UI', () => {
 Please follow the <b><u><a href="https://docs.cypress.io/guides/references/best-practices.html">best practices recommended</a></u></b> by Cypress.
 One of the most important is to use or add the `"data-cy"` attribute to the element you want to interact to:
 
-<img src={bestPracticesSelectingElementsImg} class="image-center" alt="Best Practices selecting elements with Cypress" />
-<p align="center">Best Practices Selecting Elements
+<img src={bestPracticesSelectingElementsImg} className="image-center" alt="Best Practices selecting elements with Cypress" />
+<div style={{ textAlign: "center" }}>Best Practices Selecting Elements</div>
 ### Run your test!
 
 Once you have written your test, it is time to execute it locally:
@@ -91,8 +91,8 @@ $ npm run cy:open
 
 this will open the <b>Cypress Test Runner:</b>
 
-<img src={cypressTestRunnerImg} class="image-center" alt="Cypress Test Runner" />
-<p align="center">Cypress Test Runner
+<img src={cypressTestRunnerImg} className="image-center" alt="Cypress Test Runner" />
+<div style={{ textAlign: "center" }}>Cypress Test Runner</div>
 just double-click on your test and a window browser will be opened and you will see your testing running!
 
 #### What’s next?