Merge pull request #7140 from layer5io/leecalcote/gatsby-mdx-plugin-upgrade

chore: upgrade MDX packages and remove deprecated mdxOptions configuration.

Author: leecalcote

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,7 +7,6 @@ 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";

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

@@ -7,7 +7,6 @@ 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";
 

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/explore-dapr-with-meshery/dapr/deploy-dapr-control-plane.mdx

@@ -7,7 +7,6 @@ videos: 0
 lectures: 4
 order: 2
 ---
-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 daprHelm from "../../../../src/assets/images/learning-path/dapr/dapr-helm.png";

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

@@ -7,7 +7,6 @@ videos: 0
 lectures: 4
 order: 4
 ---
-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 dragComponentImage from "../../../../src/assets/images/learning-path/dapr/drag-component.png";

content-learn/mastering-kubernetes-for-engineers/explore-dapr-with-meshery/dapr/deploy-python-and-nodejs-application.mdx

@@ -8,7 +8,6 @@ lectures: 4
 order: 5
 ---
 
-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 filterNodePythonImg from "../../../../src/assets/images/learning-path/dapr/filter-node-python.png";

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

@@ -7,7 +7,6 @@ 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 daprRedis from "../../../../src/assets/images/learning-path/dapr/redis-dapr.png";

content-learn/mastering-kubernetes-for-engineers/index.mdx

@@ -3,12 +3,10 @@ title: 'Mastering Kubernetes for Engineers'
 description: 'Learn how to configure your Kubernetes clusters and manage the lifecycle of your workloads'
 order: 4
 themeColor: '#3C494F'
-cardImage: '../../src/assets/images/kubernetes/kubernetes-color.svg'
+cardImage: '../../src/assets/images/academy/academy-layer5-light.png'
 courses: 1
 disabled: no
 ---
 
-<!-- 
-  This file is only used to render the courses list within a learning path.
-  Check the Learn-Layer5 folder under src/sections/, src/templates for more understanding of how the data is used
--->
+{/* This file is only used to render the courses list within a learning path.
+  Check the Learn-Layer5 folder under src/sections/, src/templates for more understanding of how the data is used */}