fix: update inline styles in MDX files to use object syntax for consistency

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

Author: leecalcote

src/collections/blog/2020/2020-06-25-SMI-conformance-testing-with-meshery/index.mdx

@@ -26,7 +26,13 @@ import checklist from "./checklist.svg"
 
 <BlogWrapper>
 
-<img src={smilogo} align="right" alt="smilogo" width="200px" style="margin:1rem 2rem;" />
+<img
+	src={smilogo}
+	align="right"
+	alt="smilogo"
+	width="200px"
+	style={{ margin: "1rem 2rem" }}
+/>
 
 ### About SMI
 

src/collections/blog/2021/2021-04-05-meshmate-of-the-year-2020-nikhil-ladha/index.mdx

@@ -148,7 +148,7 @@ import MMOYNikhil from "./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp";
 </div>
 
 <img
-  style="width:130px;"
+  style={{ width: "130px" }}
   className="right"
   src={MMoY2020}
   alt="MeshMate of the Year 2020: Nikhil Ladha"

src/collections/blog/2021/2021-10-04-ccoss-meshery-event/index.mdx

@@ -18,15 +18,24 @@ import meshery from "./meshery-logo-light-text.webp";
 
 <BlogWrapper>
     <h4 className="date"> October 04 to 09, 2021 </h4>
-    <img style="max-height:155px; display: inline; position: relative; float: right; margin-left:0.25rem;" src={meshery} />
+    <img
+      style={{
+        maxHeight: "155px",
+        display: "inline",
+        position: "relative",
+        float: "right",
+        marginLeft: "0.25rem"
+      }}
+      src={meshery}
+    />
 <a href="https://ccoss.org/">CCOSS</a> is an Open Source Software Contributor Summit that focuses on promoting and increasing the contributions from people and organizations to Open Source in Latin America. This event will happen online from October 4th to 9th.
 <a href="https://layer5.io/cloud-native-management/meshery">Meshery</a> will be participating as a project in a <a href="https://ccoss.org/sessions/2021/taller-contribucion-meshery/">workshop</a> where attendees will contribute to Documentation, Tests, and more. It’s a good opportunity to learn how to contribute to Open Source supported by the community. To participate you can register <a href="https://ccoss.org/sessions/2021/taller-contribucion-meshery/">here</a>.
 Speakers:
 <li><Link to="/community/members/rodolfo-martinez-vega">Rodolfo Martinez Vega</Link></li>
 <li><Link to="/community/members/alonso-lopez">Alonso López Romo</Link></li>
 
 
-<h4 className="centered-text" style="padding-top:1.5rem;">
+<h4 className="centered-text" style={{ paddingTop: "1.5rem" }}>
   We hope to see you at CCOSS Meshery contribution workshop 2021. Be sure to say hello
   in the <a href="http://slack.layer5.io/">Layer5 Community</a>!
 </h4>

src/collections/blog/2022/2022-01-07-Recap-KubeCon-China-TAG-Network-talk/index.mdx

@@ -69,10 +69,15 @@ The majority of the more detailed activities occur in the CNCF Service Mesh Work
 <li><b><Link to="/projects/service-mesh-interface-conformance">Service Mesh Interface (SMI):</Link></b> SMI focuses on the interoperability of the various features of a service mesh.</li>
 <li><b><Link to="/projects/cloud-native-performance">Service Mesh Performance (SMP):</Link></b> SMP tries to make it uniform and succinct the way you characterize the performance of cloud native infrastructure with a focus on service meshes.</li>
 </ul>
-<img src={Smi} className="slides" align="center" style="margin-left: 10px;" alt="SMI" />
-<img src={Smp} className="slides" align="center" style="margin-left: 10px;" alt="SMP" />
+<img src={Smi} className="slides" align="center" style={{ marginLeft: "10px" }} alt="SMI" />
+<img src={Smp} className="slides" align="center" style={{ marginLeft: "10px" }} alt="SMP" />
     Owens and Calcote also discuss <Link to="/learn/service-mesh-books/service-mesh-patterns">Service Mesh Patterns</Link> and Service Mesh Catalog. These patterns promote the reuse of best practices, are service mesh agnostic, and also help in behavior analysis. A circuit breaker test is a good example.  If something goes wrong in your network be it a node failure, router failure, etc., then it helps you identify the point of failure as well as gets your network running quickly.
-<img src={Catalog} className="slides" alt="Service Mesh Catalog" style="display:block; margin: 0 auto 1.5rem; width:60%;"/>
+<img
+    src={Catalog}
+    className="slides"
+    alt="Service Mesh Catalog"
+    style={{ display: "block", margin: "0 auto 1.5rem", width: "60%" }}
+/>
 
 
     Talking about distributed systems, we come across the problem of distributed analysis. In this talk, the TAG Network co-chairs help us understand this problem and why we must worry about it.
@@ -82,7 +87,12 @@ The majority of the more detailed activities occur in the CNCF Service Mesh Work
 <li>How to model your service mesh topology and optimize for your ideal configuration in context of how much you value properties of resiliency, performance, throughput, latency, and so on before deploying to production. </li>
 </ul>
     This brings us to <Link to="/projects/nighthawk">Nighthawk</Link> and <Link to="/cloud-native-management/meshery">Meshery</Link>. Together they help produce robust, distributed and scalable services. Distributed load testing offers insight into system behaviors that accurately represent real world behaviors of services under load as that load comes from any number of sources.
-<img src={Gnh} className="slides" style="display:block; margin: 0 auto 1.5rem; width:60%;" alt="GetNighthawk" />
+<img
+    src={Gnh}
+    className="slides"
+    style={{ display: "block", margin: "0 auto 1.5rem", width: "60%" }}
+    alt="GetNighthawk"
+ />
 
 <strong>Calcote and Owens packed a great deal of information in this talk. If you are passionate about Cloud Native Networking and Service Meshes, then this talk is definitely worth your time. Find the recording below. The presentation slides are available <a href={slidesTAG}>here</a>. </strong>
 <div className="iframe-container">

src/collections/blog/2022/2022-05-10-dockercon-22-hashicorp-talk/index.mdx

@@ -40,17 +40,29 @@ import visualizer from './viz-1.webp';
     Nic Jackson has been using Docker Desktop from long time and tells how Docker Desktop provides feasibility to run Kubernetes for his local environment,
     while Lee Calcote recalls how Docker Desktop has become a staple of his daily routine while building an extension for Meshery.
 <h3>Discussing Developers need to access Kubernetes</h3>
-<img src={developer} alt="Developers need to access Kubernetes" style="width:50%;float:right;" />
+<img
+    src={developer}
+    alt="Developers need to access Kubernetes"
+    style={{ width: "50%", float: "right" }}
+/>
 Moving forward with the introduction to Docker Extension for Meshery, Nic says, "When it comes to Kubernetes, should developers care about Kubernetes? And the answer is "Yes" because developers need Kubernetes because of the changing reliability patterns implementation rapidly, it provides a tight feedback loop for developing and deploying workloads onto your Kubernetes and makes the over developer experience smooth. With the help of Kubernetes, developers should be able to create environments without needing to be operational experts."
     <h3>Meshery Extension offers an easy single click button to go from Docker Compose to Kubernetes wih all cloud native infrastructure supported.</h3>
-<img src={DDE} alt="Docker Desktop Extension Meshery" style="width:50%;float:right;" />
+<img
+    src={DDE}
+    alt="Docker Desktop Extension Meshery"
+    style={{ width: "50%", float: "right" }}
+/>
     The Docker Extension for Meshery provides:
 <ul>
 <li>Kubernetes support for your Docker Compose apps - Import your Docker Compose apps. Configure and deploy them to Kubernetes and integrate into your GitOps pipeline.</li>
 <li>Collaborative designer for Docker Compose apps - Early access to the Docker Extension for Meshery that offers a visual topology for designing Docker Compose applications, operating Kubernetes, Kubernetes Operators, and their workloads.</li>
 <li>Single-click deployment of your infrastructure - Support of 250+ different cloud native infrastructure projects (including all the CNCF projects) at the fingertips of developers in connection with Docker Desktop’s ability to deliver Kubernetes locally.</li>
 </ul>
-    <img src={dashboard} alt="Docker Desktop Extension Meshery Dashboard" style="width:50%;float:left; padding-right:30px;" />
+        <img
+            src={dashboard}
+            alt="Docker Desktop Extension Meshery Dashboard"
+            style={{ width: "50%", float: "left", paddingRight: "30px" }}
+        />
     <ul>
     <li>
     While giving the demo Meshery Lee explained how with Docker Desktop running and Meshery extension installed we can see that Meshery has discovered
@@ -64,11 +76,19 @@ Moving forward with the introduction to Docker Extension for Meshery, Nic says,
     </li> 
     </ul>
         <h3>Lee Calcote introduces MeshMap</h3>
-        <img src={designer} alt="MeshMap Designer" style="width:50%;float:right;" />
+                <img
+                    src={designer}
+                    alt="MeshMap Designer"
+                    style={{ width: "50%", float: "right" }}
+                />
 MeshMap is the world's only visual designer for Kubernetes and all cloud native infrastructure. Collaborate with other engineers in real-time as you use MeshMap to design, deploy, and manage your Kubernetes-based deployments. Save time and use a design template. Take advantage of the best practices embedded in the patterns found in Meshery Catalog. MeshMap not only allows you to create and verify your cloud native application and infrastructure configurations, but to deploy and operate that infrastructure as well.
 
     Lee demonstrated MeshMap <strong>Designer</strong>  design capabilities using Consul Service Mesh as an eample and configures various Consul-specific features. He designs a service mesh deployment with application and Envoy filter from scratch.
-              <img src={visualizer} alt="MeshMap Designer" style="width:50%;float:left;padding-right:30px;" />
+                            <img
+                                src={visualizer}
+                                alt="MeshMap Designer"
+                                style={{ width: "50%", float: "left", paddingRight: "30px" }}
+                            />
      MeshMap <strong>Visualizer Mode</strong> allows you to examines a visual topology of Kubernetes cluster and its services. View and search log streams from your pod's containers. Connect an interactive terminal to instances of your containers.
     To Lee's demo, Nic also added in the context of developer experience that MeshMap also makes it easy to do the job and with Meshery extension it makes it super easy to write and configure code without being worried for the developer environment.
            These Docker Extensions are so powerful that it allows you to do multiple tasks without leaving Docker Desktop.

src/collections/blog/2022/2022-06-07-week-open-source-contributions-with-layer5/index.mdx

@@ -53,7 +53,7 @@ To newbies, open source contributions may seem daunting. In much the same way th
     We have discovered a community of competent, supportive and serial problem-solvers, right from our mentors:
   <ul>
     <li>
-    <Link to="https://layer5.io/community/members/ekene-leonard-nwobodo"><img src={meshmate} style="height: 1.25rem;" /> Ekene Leonard Nwobodo</Link>
+    <Link to="https://layer5.io/community/members/ekene-leonard-nwobodo"><img src={meshmate} style={{ height: "1.25rem" }} /> Ekene Leonard Nwobodo</Link>
     </li>
     <li>
     <a href="https://twitter.com/etienejames5">Etiene James</a>

src/collections/blog/2023/05-22-changing-release-channels-in-meshery/index.mdx

@@ -49,7 +49,7 @@ Example: <br/> <code className="language-bash">mesheryctl system context create
 <h3>Switching between Meshery release channels using mesheryctl.</h3>
 mesheryctl is a command-line tool for managing Meshery. You can use it to switch between different release channels. Here's how:
 <ul>
-  <li>Run the following command to see the current configuration for Meshery: <pre><code className="language-bash">mesheryctl system context view</code></pre><img src={MesheryVersion} className="image-center" style="width:50%;" />This will show you the current release channel (<b>stable</b> or <b>edge</b>), along with the version number and other information.</li>
+  <li>Run the following command to see the current configuration for Meshery: <pre><code className="language-bash">mesheryctl system context view</code></pre><img src={MesheryVersion} className="image-center" style={{ width: "50%" }} />This will show you the current release channel (<b>stable</b> or <b>edge</b>), along with the version number and other information.</li>
   <li>Run the following command to switch to a different release channel:<pre><code className="language-bash">mesheryctl system channel switch</code></pre>This command will update your meshconfig file to switch release channel and version of context in focus. To switch the channel to a specific version, replace <b>Version</b> with the desired version number.</li>
   <li>To confirm that the channel has been changed, run the following command again: <pre><code className="language-bash">mesheryctl system channel view</code></pre></li>
 </ul>

src/collections/blog/2023/2023-09-05-unlocking-the-power-of-webassembly-in-service-mesh-management/index.mdx

@@ -23,7 +23,11 @@ import { BlogWrapper } from "../../Blog.style.js";
 
 Welcome to another exciting edition of Feature Friday Bulletin, where we unveil the latest enhancements to Meshery, your go-to service mesh management tool. This week, we're thrilled to announce a groundbreaking collaboration between Layer5 and Intel, bringing you a suite of service mesh management features tailored for WebAssembly-based network traffic management filters in Envoy, the sidecar proxy used in the data plane of Istio. These new features open up a world of possibilities for your service mesh architecture.
 
-<img src="https://mcusercontent.com/6b50be5aea3dfe1fd4c041d80/images/c4a4d061-a42d-5373-f789-cc29a21b3d5c.png" width="15%" style="margin: 1rem 1rem 1rem 0rem" />
+<img
+	src="https://mcusercontent.com/6b50be5aea3dfe1fd4c041d80/images/c4a4d061-a42d-5373-f789-cc29a21b3d5c.png"
+	width="15%"
+	style={{ margin: "1rem 1rem 1rem 0rem" }}
+/>
 
 ## Seamless WASM Envoy Filter Management
 
@@ -40,7 +44,11 @@ With this collaboration, we're introducing powerful features that simplify the m
 - :star2: **Support Your Favorites**: Encourage collaboration by starring your [favorite repository](https://github.com/meshery/meshery) on GitHub.
 - :playground_slide: **Hands-On Experience**: Experience these features firsthand in the [Meshery Playground](https://playground.meshery.io/) by accessing version v0.6.109.
 
-<img src="https://mcusercontent.com/6b50be5aea3dfe1fd4c041d80/images/a07ef29a-4cf8-986e-9bd3-78db7dc00ce1.png" width="15%" style="margin: 1rem 1rem 1rem 0rem" />
+<img
+	src="https://mcusercontent.com/6b50be5aea3dfe1fd4c041d80/images/a07ef29a-4cf8-986e-9bd3-78db7dc00ce1.png"
+	width="15%"
+	style={{ margin: "1rem 1rem 1rem 0rem" }}
+/>
 
 ## Envoy WASM Filter Management
 
@@ -62,7 +70,11 @@ We've revamped the management of Envoy WASM filters in Meshery with several enha
 - ✅ Deploy/Undeploy Filters: Streamline the deployment and removal of filters with custom configurations.
 - ✅ Enhanced Visibility: View filters within a dedicated panel and seamlessly drop them onto the canvas.
 
-<img src="https://mcusercontent.com/6b50be5aea3dfe1fd4c041d80/images/1e9c2e71-1b3e-a132-4766-8cefdc9861d2.png" width="15%" style="margin: 1rem 1rem 1rem 0rem" />
+<img
+	src="https://mcusercontent.com/6b50be5aea3dfe1fd4c041d80/images/1e9c2e71-1b3e-a132-4766-8cefdc9861d2.png"
+	width="15%"
+	style={{ margin: "1rem 1rem 1rem 0rem" }}
+/>
 
 ### Meshery UI Enhancements
 - ✅ Import Filters: Import filters directly via URL or filesystem.

src/collections/blog/2024/03-27-models-designs-legos/index.mdx

@@ -28,30 +28,30 @@ In Meshery, two key concepts play a pivotal role in managing infrastructure and
 
 </div>
 
-<h3 style="margin-top:1.2rem;">Meshery Models</h3>
+<h3 style={{ marginTop: "1.2rem" }}>Meshery Models</h3>
 
 
-<h3 style="margin-top:1.2rem;"> Meshery Designs</h3>
+<h3 style={{ marginTop: "1.2rem" }}> Meshery Designs</h3>
 
 On the other hand, <a href="https://docs.meshery.io/concepts/logical/designs" target="_blank">Meshery Designs</a> are the practical implementations based on Meshery Models. They represent declarations of your infrastructure deployments, customized according to specific use cases, environments, and requirements. Meshery Designs allow you to create, manage, and deploy complex architectures seamlessly, leveraging the power and flexibility of Meshery Models as their foundation.
 <img src={FiveLegos}  width="50%" />
-<h3 style="margin-top:1.2rem;"><strong>Meshery Models (similar to Lego bricks)</strong></h3>
+<h3 style={{ marginTop: "1.2rem" }}><strong>Meshery Models (similar to Lego bricks)</strong></h3>
 
 Meshery <a href="https://docs.meshery.io/concepts/logical/models" target="_blank">Models</a> are standardized packages that bundle components and characterize their relationships. <a href="https://docs.meshery.io/concepts/logical/components" target="_blank">Components</a> are often representative of infrastructure, but can, in fact, represent anything (see semantically meaningful vs non-semantically meaingful components). Models uniformly wrap each component with a layer of metadata therein standardizing all entities (infrasturcture or otherwise) under a common interface much in the same way that the Industrial Revolution offered consistency of parts and interchangability of machinery, Meshery Components become fundamental building blocks. Components are like standard Lego bricks, window pieces, wheels that all snap together - or don't - depending upon way in which they relate to one another.
 As versioned and portable pacakges, Models provide a structured, reusable, and extensible way to represent infrastructure components and their relationships, going beyond just code. This enables a more flexible and adaptable approach to modeling complex systems. are powerful Relationships and policies. contain Components cannot be directly used to build something complete on their own, but are standardized and reused across different Lego sets (instructions).
 <ul>
 	<li><strong>Definition:</strong>&nbsp;Building blocks for infrastructure definition.</li>
-	<li><strong>Focus:</strong>&nbsp;Describe how to manage specific infrastructure types and their interactions.<img data-file-id="2445161" height="223" src={FiveLegos} style="border: 0px; width: 300px; height: 223px; margin: 0px; box-shadow: none;" width="300" className="image-right-no-shadow" /></li>
+	<li><strong>Focus:</strong>&nbsp;Describe how to manage specific infrastructure types and their interactions.<img data-file-id="2445161" height="223" src={FiveLegos} style={{ border: "0px", width: "300px", height: "223px", margin: "0px", boxShadow: "none" }} width="300" className="image-right-no-shadow" /></li>
 	<li><strong>Content:</strong>&nbsp;Define properties, capabilities, and relationships for infrastructure components.</li>
 	<li><strong>Usability:</strong>&nbsp;Not directly deployable, but used as building blocks within Designs.</li>
 	<li><strong>Sharing:</strong>&nbsp;Can be packaged and shared for others to use in their Designs.</li>
 </ul>
 
 Meshery Models are like the individual Lego bricks - they define the building blocks for infrastructure with specific characteristics.
-<h3 style="margin-top:1.2rem;"><strong>Meshery Designs (similar to Lego instructions)</strong></h3>
+<h3 style={{ marginTop: "1.2rem" }}><strong>Meshery Designs (similar to Lego instructions)</strong></h3>
 
 Meshery Designs provide a collaborative blueprint for building a specific model using Lego bricks (Meshery Models). Designs define the structure and placement of the bricks to achieve the desired outcome. Desan be shared, versioned, and used as reference for building the same model.
-In essence:<img data-file-id="2445165" height="300" src={FiveInstructions} style="border: 0px; width: 179px; height: 300px; margin: 0px;" width="179" className="image-right-no-shadow"/>
+In essence:<img data-file-id="2445165" height="300" src={FiveInstructions} style={{ border: "0px", width: "179px", height: "300px", margin: "0px" }} width="179" className="image-right-no-shadow"/>
 <ul>
 	<li><strong>Definition:</strong>&nbsp;Collaborative documents for infrastructure and application deployment.</li>
 	<li><strong>Focus:</strong>&nbsp;Describe the desired state of infrastructure for a specific deployment.</li>