Merge pull request #7165 from layer5io/leecalcote/fix-mdx-styles

make use of inline styles mdx compatible

Author: leecalcote

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

@@ -32,7 +32,7 @@ This setup ensures that Dapr connects to the correct Redis instance, allowing it
 </a>
 
 
-<h4 className="chapter-sub-heading" style="margin-top: 1.4rem">Configure State Store and Deploy</h4>
+<h4 className="chapter-sub-heading" style={{ marginTop: "1.4rem" }}>Configure State Store and Deploy</h4>
 
 Now you can start configuring the Dapr state-store.
 

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

@@ -31,14 +31,14 @@ import MMOYNikhil from "./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp";
 
 2020 was a noteworthy year in many ways. Nikhil's committment to the people and projects of the Layer5 community will forever be at the top of list of mentionables I and others will recall of last year. It was in 2019, though, that <Link to="/blog/community/my-journey-from-a-contributor-to-a-maintainer">Nikhil's journey</Link> in the Layer5 community started and where he first began helping build our healthy, inclusive, and <Link to="/community" className="highlight">diverse community</Link> and our industry-leading, innovate <Link to="/projects" className="highlight">open source projects</Link>. Nikhil's natural disposition to mentoring others and his stewardship on various projects make him a successful MeshMate.
 
-<h3 style="padding:2rem 0;">What is a Layer5 MeshMate?</h3>
+<h3 style={{ padding: "2rem 0" }}>What is a Layer5 MeshMate?</h3>
 
 <img src={MeshMate} className="left" alt="Meshmate" />
   <Link className="highlight" to="/community/meshmates">MeshMate</Link>
   is a distinction that Layer5 awards select members of the community who innately align with our culture of helping others, paying it forward, and a commitment to knowledge sharing. MeshMates are Layer5 mentors and ambassadors (not employees).
 
 <Blockquote
-  style="position:relative;"
+  style={{ position: "relative" }}
   quote="Congratulations on the MeshMate of the Year Award, Nikhil, a well-deserved honor for a distinguished gentleman. When I was having a look at the Layer5 community, your member experience blog post stood out and was one of the main reasons for me to join the community. Within the community, it is apparent that your guidance, support, and contributions are very much appreciated. Keep up the excellent work!"
   person="Michael Gfeller"
 />
@@ -59,15 +59,15 @@ import MMOYNikhil from "./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp";
   community member inevitably leaving a lasting mark as is evident from member
   comments about Nikhil.
 
-<h3 style="padding:2rem 0;">It's not easy being a MeshMate</h3>
+<h3 style={{ padding: "2rem 0" }}>It's not easy being a MeshMate</h3>
 
   With thousands of members in the Layer5 community, many come and go. Many take
   and many give. While we hope that each and every individual that joins will
   find a fit in the community and/or on a project, this isn't always the case.
 
   <BlockquoteAlt
-    style="width:100%;"
-    style="position:relative;"
+    style={{ width: "100%" }}
+    style={{ position: "relative" }}
     quote="The dedication you have shown on the way to this achievement is impressive, Nikhil. People like you are the key to the great community at Layer5."
     person="Rodolfo"
   />
@@ -87,13 +87,13 @@ import MMOYNikhil from "./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp";
   project to own.
 
 <BlockquoteAlt
-  style="width:100%;"
-  style="position:relative;"
+  style={{ width: "100%" }}
+  style={{ position: "relative" }}
   quote="Congratulations on being our community maintainer superstar, Nikhil. You has done a great job on our new Layer5 site and your infinite patience on communicating with everyone sets you apart as an awesome community ambassador."
   person="Aisuko Li"
 />
 
-<h3 style="padding:2rem 0;">MeshMates are a massive force</h3>
+<h3 style={{ padding: "2rem 0" }}>MeshMates are a massive force</h3>
   In just a year's time, with thousands of people in the Layer5 community and
   500+ contributors to our projects, it's clear that Layer5 MeshMates
   significantly uplift our collaborative efforts and are steady force in the
@@ -159,14 +159,14 @@ import MMOYNikhil from "./MeshMate-of-the-Year-2020-Nihkil-Ladha.webp";
   awarded to for 2021. In the year and a half that Nikhil has been in the
   community, he has touched the lives of many people, including mine. Nikhil is
   my friend. He is the Layer5 MeshMate of the Year.
-<div style="text-align: center;">
+<div style={{ textAlign: "center" }}>
   <img className="meshmate-img" src={MMOYNikhil} alt="Meshmate of the year" />
 </div>
 
   The MeshMate badge is a point of pride for individuals participating in the
   program and looked upon with admiration and veneration by many within and
   external to the Layer5 community.
-<p style="text-align:center;">
+<p style={{ textAlign: "center" }}>
   Wear your MeshMate of the Year badge proudly, Nikhil.
 </p>
 </BlogWrapper>

src/collections/blog/2022/2022-05-27-debug-envoy-proxy/index.mdx

@@ -38,13 +38,13 @@ import Code from "../../../../components/CodeBlock";
 The available log levels are:
 
 <ul>
-  <li className="highlight" style="width: fit-content;">trace</li>
-  <li className="highlight" style="width: fit-content;">debug</li>
-  <li className="highlight" style="width: fit-content;">info</li>
-  <li className="highlight" style="width: fit-content;">warning/warn</li>
-  <li className="highlight" style="width: fit-content;">error</li>
-  <li className="highlight" style="width: fit-content;">critical</li>
-  <li className="highlight" style="width: fit-content;">off</li>
+  <li className="highlight" style={{ width: "fit-content" }}>trace</li>
+  <li className="highlight" style={{ width: "fit-content" }}>debug</li>
+  <li className="highlight" style={{ width: "fit-content" }}>info</li>
+  <li className="highlight" style={{ width: "fit-content" }}>warning/warn</li>
+  <li className="highlight" style={{ width: "fit-content" }}>error</li>
+  <li className="highlight" style={{ width: "fit-content" }}>critical</li>
+  <li className="highlight" style={{ width: "fit-content" }}>off</li>
 </ul>
 
 The default is <span className="highlight">info</span>.

src/collections/blog/2022/2022-10-19-kubeconna2022/index.mdx

@@ -33,7 +33,7 @@ import Button from "../../../../reusecore/Button";
 Join us as we host project office hours. Don't be shy with your questions! Project maintainers are happy to receive your questions and will be available to share about current project activites, discuss current features as well as  planned future project roadmap. 
 
 <h3>Meshery Project Office Hours</h3>
-  <h5 style="display:inline;">October 26, 2022</h5>:&nbsp; <Link to="/cloud-native-management/meshery">Meshery</Link> is the open source, cloud native manager that enables the adoption, operation, and management of Kubernetes, any service mesh, and their workloads. Meshery is a multi-cluster Kubernetes manager hundreds of <Link to="/cloud-native-management/meshery/integrations">integrations</Link> supported for any workload or infrastructure components.
+  <h5 style={{ display: "inline" }}>October 26, 2022</h5>:&nbsp; <Link to="/cloud-native-management/meshery">Meshery</Link> is the open source, cloud native manager that enables the adoption, operation, and management of Kubernetes, any service mesh, and their workloads. Meshery is a multi-cluster Kubernetes manager hundreds of <Link to="/cloud-native-management/meshery/integrations">integrations</Link> supported for any workload or infrastructure components.
   We will be briefing you all on the following feature highlights of the latest version of Meshery v0.6.0:
   <ul>
     <li> Applications</li>
@@ -46,13 +46,13 @@ Join us as we host project office hours. Don't be shy with your questions! Proje
 <br />
 
 <h3>Service Mesh Performance Office Hours</h3>
-  <h5 style="display:inline;">October 27, 2022</h5>:&nbsp; <Link to="/projects/cloud-native-performance">Service Mesh Performance</Link> is a CNCF-hosted project that has received support from Layer5, Intel, RedHat, and HashiCorp. By utilizing SMP, <a href="https://smp-spec.io/meshmark">MeshMark</a> offers a global performance index to compare the effectiveness of your mesh deployment to those in other organizations setups.
+  <h5 style={{ display: "inline" }}>October 27, 2022</h5>:&nbsp; <Link to="/projects/cloud-native-performance">Service Mesh Performance</Link> is a CNCF-hosted project that has received support from Layer5, Intel, RedHat, and HashiCorp. By utilizing SMP, <a href="https://smp-spec.io/meshmark">MeshMark</a> offers a global performance index to compare the effectiveness of your mesh deployment to those in other organizations setups.
 
   <Button $secondary title="RSVP for Service Mesh Performance Project Office Hours" $url="​https://community.cncf.io/j/ge5ft6dxm3ac5/" $external={ true } />
 <br />
 
 <h3>The State of the Cloud Native Network: Deep-dive from CNCF TAG Network</h3>
-  <h5 style="display:inline;">October 27, 2022</h5>:&nbsp; Join CNCF Technical Advisory Group co-chair and Layer5's founder, <Link to="/community/members/lee-calcote">Lee Calcote</Link> as he discusses the many projects of TAG Network and its working groups. NATs, Network Service Mesh, BFE, Contour, Kuma, Service Mesh Interface, Chaos Mesh, Open Service Mesh, Emissary, k8gb, Service Mesh Performance, Submariner, Cilium, Meshery, Fab Edge, Istio, Nighthawk, Aeraki, and FabEdge are just a few of the many terms used to describe cloud native networking. The size might be intimidating.
+  <h5 style={{ display: "inline" }}>October 27, 2022</h5>:&nbsp; Join CNCF Technical Advisory Group co-chair and Layer5's founder, <Link to="/community/members/lee-calcote">Lee Calcote</Link> as he discusses the many projects of TAG Network and its working groups. NATs, Network Service Mesh, BFE, Contour, Kuma, Service Mesh Interface, Chaos Mesh, Open Service Mesh, Emissary, k8gb, Service Mesh Performance, Submariner, Cilium, Meshery, Fab Edge, Istio, Nighthawk, Aeraki, and FabEdge are just a few of the many terms used to describe cloud native networking. The size might be intimidating.
   From fundamental Layer 3 connectivity to the newest in service mesh, the third session will cover the big picture of Cloud Native Networking in the CNCF and how to put it all in a context you can utilize.
 
   <Button $secondary title="RSVP for the State of the Cloud Native Network talk" $url="https://sched.co/1BZJl" $external={ true } />

src/collections/blog/2023/04-12-meshery-surpasses-1000-contributors/index.mdx

@@ -39,7 +39,7 @@ The Meshery platform provides a highly extensible self-service engineering platf
 
 The Layer5 community is a warm, welcoming, and supportive community that has won many awards for its open-source contributions. We are proud to be a part of such a great community, and we encourage you to get involved and help us make Meshery even better!
 
-<div className="tip" style="font-size:1.15rem;text-align:center;">
+<div className="tip" style={{ fontSize: "1.15rem", textAlign: "center" }}>
 
   If you haven't already, we invite you to come and see why Meshery is such a popular platform.
 

src/collections/blog/2023/05-02-layer5-reaches-a-4000-community-member-milestone/index.mdx

@@ -45,7 +45,7 @@ This culture of support and collaboration has not gone unnoticed by the wider te
 <Link to="/blog/community/meshery-surpasses-1000-contributors">
 <figure className="imgWithCaption">
   <img src={Playfield} />
-    <figcaption style="text-align:center;">
+    <figcaption style={{ textAlign: "center" }}>
       over 1,000 Meshery contributors
       <br />
    </figcaption>

src/collections/blog/2023/08-23-importance-of-github-stars/index.mdx

@@ -73,7 +73,7 @@ Starring a repository is a simple two-step process.
  </figure>
 
  <br/>
-<p style="display: flex; justify-content: center;"> This is what a project will look like after you have starred it:</p>
+<p style={{ display: "flex", justifyContent: "center" }}> This is what a project will look like after you have starred it:</p>
 <figure className="imgWithCaption">
     <img src={After}/>
     <figcaption>
@@ -92,7 +92,7 @@ You can help Five by giving a star to the [Meshery](https://github.com/meshery/m
 <a href="https://github.com/meshery/meshery">
     <figure className="imgWithCaption">
         <img src={Five}/>
-            <figcaption style="text-align:center;">
+            <figcaption style={{ textAlign: "center" }}>
             🌟 Star the Meshery repository 🌟
             <br/>
         </figcaption>

src/collections/blog/2024/03-20-kubeconeu2024/index.mdx

@@ -42,7 +42,7 @@ At the booth, we'll be showcasing demos of our two newest projects:
 * **ConnectRPC:** Discover a revolutionary new approach to service mesh interoperability with ConnectRPC.
 * **KubeSlice:** Dive into the world of network slicing with KubeSlice, designed for optimal network resource utilization.
 
-<div style="display: flex; align-items: center">
+<div style={{ display: "flex", alignItems: "center" }}>
 <h2> Don't forget to catch our lightning talk today at 2:30! </h2>
 <img src={Booth} width="400" />
 </div>

src/collections/blog/2024/10-09-docker-build-warning/post.mdx

@@ -23,7 +23,7 @@ import { BlockquoteAlt } from "../../../../reusecore/Blockquote/Blockquote-alt-s
 While building a Docker image for one of <Link to="/projects">Layer5's open source projects</Link>, I ran into a build warning in one of the multi-stage Dockerfiles. Up to this point, while creating container images, I hadn't paid attention to a particular feature of `docker build`: <i><a href="https://docs.docker.com/reference/build-checks/">build checks</a></i>. I had otherwise overlooked warnings and informational notices that were lost among the fray of docker build log lines. I've stopped ignoring them, however. In this post, I'll touch upon a handful of the more common build warnings, delve into the importance of these checks, and explore how and why to address each. But, first...
 
 <BlockquoteAlt
-  style="width:100%;" person="Lee Calcote" quote="Build checks are your Dockerfile linter." />
+  style={{ width: "100%" }} person="Lee Calcote" quote="Build checks are your Dockerfile linter." />
 
 ###  Why Use Docker Build Checks?
 

src/collections/blog/2024/11-10-kubecon-na-2024/post.mdx

@@ -37,7 +37,7 @@ Human-Computer Interaction Principles in Meshery:
   <li>Mental Models: How Meshery aligns with users' mental models of Kubernetes environments, facilitating comprehension and navigation.</li>
   <li>Visual Perception: How Meshery leverages visual cues, colors, and layout to guide users' attention and highlight critical information.</li>
 </ul>
-<div className="flex-row" style="margin-bottom: 2rem;">
+<div className="flex-row" style={{ marginBottom: "2rem" }}>
       Date: November 12, 2024<br />
     Time: 3:04pm - 3:09pm MST
   <Button $secondary title="See Details" $url="https://sched.co/1iWA9" $external={ true } />
@@ -46,7 +46,7 @@ Human-Computer Interaction Principles in Meshery:
 ### Session: CNCF TAG Network - Intro & Deep Dive
 
 “It’s the network!” is the cry of every engineer. With the increased prevalence of microservices and distributed systems, it’s true - networking as a discipline has never been more critical in the well-architected design and efficient operation of modern infrastructure. Join this talk for an intro to the TAG, its charter and a deeper discussion of current cloud native networking topics being advanced in this TAG.
-<div className="flex-row" style="margin-bottom: 2rem;">
+<div className="flex-row" style={{ marginBottom: "2rem" }}>
       Date: November 14, 2024 <br />
     Time: 11:55am - 12:30pm MST
   <Button $secondary title="See Details" $url=" https://sched.co/1howx" $external={ true } />
@@ -56,7 +56,7 @@ Human-Computer Interaction Principles in Meshery:
 
 Join the Meshery maintainers and community in improving the leading cloud native management plane. This is your chance to get hands-on with the tools shaping the future of collaborative cloud native management. Opportunities: Work on core functionality in the Server (Golang) or UI (React) or extend Meshery by building your own plugin. Contribute to the Meshery documentation by incorporating your own examples of cloud native solution architectures using Meshery Designer.
 Why Contribute to Meshery? - Gain experience with cloud native technologies, including essentially every CNCF project and open source development practices. As is the 10th fastest growing CNCF project, Meshery has a vibrant community. Work alongside passionate maintainers and contributors. No Prior Experience Needed: We welcome contributions from all levels of experience. Join us at Meshery Contribfest and be part of the growing community shaping the future of collaborative cloud native management.
-<div className="flex-row" style="margin-bottom: 2rem;">
+<div className="flex-row" style={{ marginBottom: "2rem" }}>
       Date: November 14, 2024 <br />
     Time: 4:30pm - 6:00pm MST
   <Button $secondary title="See Details" $url="https://kccncna2024.sched.com/event/1hoxN/contribfest-meshery-contribfest-extending-the-cloud-native-manager" $external={ true } />