Merge branch 'master' into perf/kanvas-lazy-load

Author: Namanv0509

CONTRIBUTING.md

@@ -398,10 +398,21 @@ Change image according to isDark value:
     />
 ```
 
-> Note:
->
 > - A condition `frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL` is added so that the image only changes if there is a difference between the thumbnail publicURLs.
 
+### Using SVG as Thumbnail
+
+If you are using an SVG file as a thumbnail, you should use the `thumbnail_svg` and `darkthumbnail_svg` fields in the frontmatter instead of `thumbnail` and `darkthumbnail`. This prevents Gatsby's `childImageSharp` from attempting to process the SVG, which can cause build warnings and errors.
+
+Example frontmatter:
+
+```yaml
+thumbnail_svg: ./my-icon.svg
+darkthumbnail_svg: ./my-icon-dark.svg
+```
+
+The components are set up to automatically check for these fields if the standard `thumbnail` fields are missing or if they need to fallback to the SVG version.
+
 ## Adding Images and Icons
 
 1. It is recommended to use `@react-icons/all-files` instead of `react-icons` for importing icons. The Issue with react-icons is that even though we are importing a single icon from the package/folder it still imports the complete icon folder which is creating unwanted junks of JS in the build.

Makefile

@@ -27,11 +27,11 @@ site:
 
 ## Run layer5.io on your local machine. Alternate method.
 site-fast:
-	gatsby develop
+	NODE_OPTIONS=--max-old-space-size=8192 gatsby develop
 
 ## Build layer5.io on your local machine.
 build:
-	gatsby build && gatsby serve
+	npm run build && npm run serve
 
 ## Empty build cache and run layer5.io on your local machine.
 clean: 
@@ -41,6 +41,10 @@ clean:
 lint:
 	npm run lint
 
+## Kill process running the site
+kill:
+	lsof -ti:8000 | xargs kill -9 2>/dev/null || true
+
 ## Prepare a list of features for the pricing page.
 features: 
 	curl -L https://docs.google.com/spreadsheets/d/e/2PACX-1vQwzrUSKfuSRcpkp7sJTw1cSB63s4HCjYLJeGPWECsvqn222hjaaONQlN4X8auKvlaB0es3BqV5rQyz/pub\?gid\=1153419764\&single\=true\&output\=csv -o .github/build/spreadsheet.csv

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

@@ -7,19 +7,18 @@ videos: 0
 lectures: 4
 order: 3
 ---
-import * as React from "react";
 import MesheryDesignEmbed from "@layer5/meshery-design-embed";
 import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
 import es8 from "../../../../src/assets/images/learning-path/edge-stack/es8.png";
 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.
 
@@ -45,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

@@ -7,19 +7,18 @@ videos: 0
 lectures: 4
 order: 1
 ---
-import * as React from "react";
 import MesheryDesignEmbed from "@layer5/meshery-design-embed";
 import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
 
 <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:
 
@@ -29,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
@@ -39,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/import-designs.mdx

@@ -24,18 +24,14 @@ import wp7 from "../../../../src/assets/images/learning-path/sql/wp7.png";
    - Select `Kubernetes Manifest` from the "Design Type" dropdown menu.
 
 <br />
-<a href={wp1}>
-  <img src={wp1} width="100%" align="center" />
-</a>
+<a href={wp1}><img src={wp1} width="100%" align="center" /></a>
 
 _Figure: Import modal_
 
 - Choose `File Upload` for the upload method, and select the file you just downloaded.
 - Then, click on `Import`.
   <br />
-  <a href={wp2}>
-  <img src={wp2} width="100%" align="center" />
-</a>
+  <a href={wp2}><img src={wp2} width="100%" align="center" /></a>
 
   _Figure: Import mysql-deployment_
 
@@ -44,22 +40,18 @@ _Figure: Import modal_
    Clicking on the names of the designs on the `Designs` tab displays the visual representations of the various Kubernetes resources and their relationships on the canvas.
 
    <br />
-   <a href={wp3}>
-  <img src={wp3} width="100%" align="center" />
-</a>
+   <a href={wp3}><img src={wp3} width="100%" align="center" /></a>
 
   _Figure: Imported designs on canvas_
 
 4. Now, follow the same steps to import the `wordpress-deployment` file.
 
 <br />
-<a href={wp4}>
-  <img src={wp4} width="100%" align="center" />
-</a>
+<a href={wp4}><img src={wp4} width="100%" align="center" /></a>
 
 _Figure: wordpress-deployment_
 
-<h2 class="chapter-sub-heading">Merging the Designs</h2>
+<h2 className="chapter-sub-heading">Merging the Designs</h2>
 
 Next, you will combine the WordPress and MySQL designs into a single design file. By merging these designs, you can manage and deploy both resources together.
 
@@ -69,27 +61,21 @@ To merge the MySQL deployment design with the WordPress deployment design:
 
 <br />
 
-<a href={wp5}>
-  <img src={wp5} width="100%" align="center" />
-</a>
+<a href={wp5}><img src={wp5} width="100%" align="center" /></a>
 
 _Figure: drag and drop design_
 
 2. This action will open a merge modal asking if you want to merge the design, Click on `Merge`.
 
 <br />
-<a href={wp6}>
-  <img src={wp6} width="100%" align="center" />
-</a>
+<a href={wp6}><img src={wp6} width="100%" align="center" /></a>
 
 _Figure: merge modal_
 
 3. Click on `Save As` and enter `wordpress-mysql-deployment` as the new file name.
 
 <br />
-<a href={wp7}>
-  <img src={wp7} width="100%" align="center" />
-</a>
+<a href={wp7}><img src={wp7} width="100%" align="center" /></a>
 
 _Figure: save design_
 

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_