[MDX] Migration to gatsby-plugin-mdx v4 with fix for onCreatePage trigger issue

.env.development

@@ -1 +1,2 @@
 GATSBY_GRAPHQL_IDE=playground
+GATSBY_DEV_AMENDED=false

.env.production

@@ -0,0 +1 @@
+GATSBY_DEV_AMENDED=false

.eslintrc.js

@@ -94,5 +94,28 @@ module.exports = {
     "space-infix-ops": [
       "error"
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.mdx", "*.md"],
+      "extends": ["plugin:mdx/recommended"],
+      "settings": {
+        "mdx/code-blocks": true,
+        "mdx/language-mapper": {},
+      },
+      "rules": {
+        //these eslint rule exceptions allow for checklint to run and lint mdx files are compatible with MDXv2, and not error out due to react/eslint rules
+        "semi": 0,
+        "indent": 0,
+        "no-trailing-spaces": 0,
+        "object-curly-spacing": 0,
+        "space-infix-ops": 0,
+        "no-irregular-whitespace": 0,
+        "no-unused-expressions": 0,
+        "linebreak-style": 0,
+        "react/jsx-no-undef": 0,
+        "no-unused-vars": 0,
+      }
+    }
+  ],
 };

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,27 +1,34 @@
 ---
 name: 🐛 Bug Report
 about: Report an issue to help us improve
-title: ''
-labels: 'kind/bug'
-assignees: ''
+title: ""
+labels: "kind/bug"
+assignees: ""
 ---
+
 ### Description
+
 <!-- A brief description with a link to the page on the site where you found the issue. -->
 
 ### Expected Behavior
+
 <!-- A brief description of what you expected to happen. -->
 
 ### Screenshots
+
 <!-- Add screenshots, if applicable, to help explain your problem. -->
 
 ### Environment:
+
 - Host OS:
 - Browser:
 
 ---
+
 <img src="https://raw.githubusercontent.com/layer5io/layer5/master/.github/assets/images/layer5/5-light-small.svg" width="24px" align="left" /><h2>Contributor Resources and <a href="https://layer5.io/community/handbook">Handbook</a></h2>
 
 The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master).
+
 - 📚 See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md).
 - 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9)
 - 🙋🏾🙋🏼 Questions: [Discussion Forum](https://discuss.layer5.io) and [Community Slack](https://slack.layer5.io).

.github/ISSUE_TEMPLATE/chore_task.md

@@ -1,20 +1,25 @@
 ---
 name: 🧹Chore or task
 about: Identify a necessary task to be addressed.
-title: ''
-labels: 'kind/chore'
-assignees: ''
+title: ""
+labels: "kind/chore"
+assignees: ""
 ---
+
 ### Current Behavior
+
 <!-- A brief description of what the current circumstance is. -->
 
 ### Desired Situation
+
 <!-- A brief description of the necessary action to take. -->
 
 ---
+
 <img src="https://raw.githubusercontent.com/layer5io/layer5/master/.github/assets/images/layer5/5-light-small.svg" width="24px" align="left" /><h2>Contributor Resources and <a href="https://layer5.io/community/handbook">Handbook</a></h2>
 
 The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the [`master` branch](https://github.com/layer5io/layer5/tree/master).
+
 - 📚 See [contributing instructions](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md).
 - 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9)
 

content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/index.mdx

@@ -9,16 +9,10 @@ videos: 3
 lectures: 8
 cardImage: "../../../src/assets/images/service-mesh-icons/istio-white.svg"
 meshesYouLearn:
-  [
-    {
-      imagepath: "../../../src/assets/images/service-mesh-icons/istio.svg",
-      name: "Istio",
-    },
-    {
-      imagepath: "../../../src/assets/images/service-mesh-icons/linkerd.webp",
-      name: "Linkerd",
-    }
-  ]
+  - imagepath: "../../../src/assets/images/service-mesh-icons/istio.svg"
+    name: "Istio"
+  - imagepath: "../../../src/assets/images/service-mesh-icons/linkerd.webp"
+    name: "Linkerd"
 toc:
   [
     'getting-started',

content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/conclusion.mdx

@@ -7,7 +7,7 @@ lectures: 12
 order: 8
 ---
 
-import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
+
 
 <ChapterStyle>
 

content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/deploy-an-application.mdx

@@ -7,7 +7,7 @@ lectures: 12
 order: 2
 ---
 
-import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
+
 import BookInfoOffMesh from "../../../../src/assets/images/learn-layer5/istio/bookinfo-off-mesh.webp";
 import BookInfoOnMesh from "../../../../src/assets/images/learn-layer5/istio/bookinfo-on-mesh.webp";
 
@@ -61,7 +61,7 @@ If your environment **does NOT** supports either of these two APIs, then you may
 As part of Istio deployment in [Previous chapter](./getting-started), you have deployed the sidecar injector.
 
 <br />
-<h2 class="chapter-sub-heading">
+<h2 className="chapter-sub-heading">
   <a name="auto"></a> Deploying Sample App with Automatic sidecar injection
 </h2>
 
@@ -107,7 +107,7 @@ This will do 3 things:
 1. Deploys all the BookInfo services in the `default` namespace.
 1. Deploys the virtual service and gateway needed to expose the BookInfo's productpage application in the `default` namespace.
 
-<h3 class="chapter-sub-heading">
+<h3 className="chapter-sub-heading">
   <a name="verify"></a> Verify Bookinfo deployment{" "}
 </h3>
 
@@ -139,7 +139,7 @@ Follow this if the above steps did not work for you
 <br />
 <br />
 
-<h4 class="chapter-alt-heading"> Label namespace for injection</h4>
+<h4 className="chapter-alt-heading"> Label namespace for injection</h4>
 
 Label the default namespace with istio-injection=enabled
 
@@ -161,7 +161,7 @@ kube-public    Active    1h
 kube-system    Active    1h
 ```
 
-<h4 class="chapter-alt-heading"> Deploy BookInfo</h4>
+<h4 className="chapter-alt-heading"> Deploy BookInfo</h4>
 <br />
 
 Applying this yaml file included in the Istio package you collected in [Getting Started](./getting-started) will deploy the BookInfo app in you cluster.
@@ -170,7 +170,7 @@ Applying this yaml file included in the Istio package you collected in [Getting
 kubectl apply -f samples/bookinfo/platform/kube/bookinfo.yaml
 ```
 
-<h4 class="chapter-alt-heading">
+<h4 className="chapter-alt-heading">
   Deploy Gateway and Virtual Service for BookInfo app
 </h4>
 

content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/expose-services.mdx

@@ -7,15 +7,15 @@ lectures: 12
 order: 3
 ---
 
-import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
+
 
 <ChapterStyle>
 The components deployed on the service mesh by default are not exposed outside the cluster. An Ingress Gateway is deployed as a Kubernetes service of type LoadBalancer (or NodePort). To make Bookinfo accessible external to the cluster, you have to create an `Istio Gateway` for the Bookinfo application and also define an `Istio VirtualService` with the routes we need.
 
 <br />
 <br />
 
-<h2 class="chapter-sub-heading"> Inspecting the Istio Ingress Gateway</h2>
+<h2 className="chapter-sub-heading"> Inspecting the Istio Ingress Gateway</h2>
 
 <br />
 The ingress gateway gets exposed as a normal Kubernetes service of type LoadBalancer
@@ -63,10 +63,10 @@ Now let us find the ingress pod and output the log:
 kubectl logs istio-ingressgateway-... -n istio-system
 ```
 
-<h2 class="chapter-sub-heading">View Istio Ingress Gateway for Bookinfo</h2>
+<h2 className="chapter-sub-heading">View Istio Ingress Gateway for Bookinfo</h2>
 <br />
 
-<h3 class="chapter-sub-heading"> View the Gateway and VirtualServices</h3>
+<h3 className="chapter-sub-heading"> View the Gateway and VirtualServices</h3>
 
 Check the created `Istio Gateway` and `Istio VirtualService` to see the changes deployed:
 
@@ -78,7 +78,7 @@ kubectl get virtualservices
 kubectl get virtualservices -o yaml
 ```
 
-<h3 class="chapter-sub-heading">
+<h3 className="chapter-sub-heading">
   Find the external port of the Istio Ingress Gateway by running:
 </h3>
 
@@ -92,7 +92,7 @@ To just get the first port of istio-ingressgateway service, we can run this:
 kubectl get service istio-ingressgateway -n istio-system --template='{{(index .spec.ports 1).nodePort}}'
 ```
 
-<h3 class="chapter-sub-heading"> Create a DNS entry:</h3>
+<h3 className="chapter-sub-heading"> Create a DNS entry:</h3>
 
 Modify your local `/etc/hosts` file to add an entry for your sample application.
 
@@ -108,7 +108,7 @@ echo "http://$(kubectl get nodes --selector=kubernetes.io/role!=master -o jsonpa
 
 Docker Desktop users please use `http://localhost/productpage` to access product page in your browser.
 
-<h2 class="chapter-sub-heading"> Apply default destination rules</h2>
+<h2 className="chapter-sub-heading"> Apply default destination rules</h2>
 
 Before we start playing with Istio's traffic management capabilities we need to define the available versions of the deployed services. They are called subsets, in destination rules.
 
@@ -189,16 +189,16 @@ kubectl get destinationrules
 kubectl get destinationrules -o yaml
 ```
 
-<h2 class="chapter-sub-heading"> Browse to BookInfo</h2>
+<h2 className="chapter-sub-heading"> Browse to BookInfo</h2>
 
 Browse to the website of the Bookinfo. To view the product page, you will have to append
 `/productpage` to the url.
 
-<h3 class="chapter-sub-heading"> Reload Page</h3>
+<h3 className="chapter-sub-heading"> Reload Page</h3>
 
 Now, reload the page multiple times and notice how it round robins between v1, v2 and v3 of the reviews service.
 
-<h2 class="chapter-sub-heading">
+<h2 className="chapter-sub-heading">
   Inspect the Istio proxy of the productpage pod
 </h2>
 
@@ -232,15 +232,15 @@ Follow this if the above steps did not work for you
 <br />
 <br />
 
-<h4 class="chapter-alt-heading"> Default destination rules</h4>
+<h4 className="chapter-alt-heading"> Default destination rules</h4>
 
 Run the following command to create default destination rules for the Bookinfo services:
 
 ```sh
 kubectl apply -f samples/bookinfo/networking/destination-rule-all-mtls.yaml
 ```
 
-<h4 class="chapter-alt-heading">
+<h4 className="chapter-alt-heading">
   Configure the Bookinfo route with the Istio Ingress gateway
 </h4>
 

content-learn/mastering-service-meshes-for-developers/advance-concepts-of-service-mesh/istio/getting-started.mdx

@@ -7,17 +7,17 @@ lectures: 12
 order: 1
 ---
 
-import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
+
 import InstallIstio from "../../../../src/assets/images/learn-layer5/istio/install-istio.webp";
 import IstioAdapter from "../../../../src/assets/images/learn-layer5/istio/istio-adapter.webp";
 
 <ChapterStyle>
 
-<h2 class="chapter-sub-heading">Setup Istio </h2>
+<h2 className="chapter-sub-heading">Setup Istio </h2>
 
 Now that we have a Kubernetes cluster and Meshery, we are ready to download and deploy Istio resources.
 
-<h2 class="chapter-sub-heading">Steps</h2>
+<h2 className="chapter-sub-heading">Steps</h2>
 
 1. [Install Istio](#1)
 1. [Verify install](#2)
@@ -28,7 +28,7 @@ Optional (manual install of Istio):
 1. [Setup `istioctl`](#1.2)
 1. [Install istio](#1.3)
 
-<h3 class="chapter-sub-heading">
+<h3 className="chapter-sub-heading">
   <a name="1">Install Istio</a>
 </h3>
 
@@ -53,7 +53,7 @@ Perform the below steps if the above steps doesn't work for you.
 <br />
 <br />
 
-<h4 class="chapter-alt-heading">
+<h4 className="chapter-alt-heading">
   <a name="1.1">Download Istio</a>
 </h4>
 
@@ -67,7 +67,7 @@ On your local machine, execute:
 curl -L https://git.io/getLatestIstio | ISTIO_VERSION=1.7.3 sh -
 ```
 
-<h4 class="chapter-alt-heading">
+<h4 className="chapter-alt-heading">
   <a name="1.2">Setting up istioctl</a>
 </h4>
 
@@ -96,7 +96,7 @@ Check if the cluster is ready for installation:
 istioctl verify-install
 ```
 
-<h4 class="chapter-alt-heading">
+<h4 className="chapter-alt-heading">
   <a name="1.3">Install Istio</a>
 </h4>
 
@@ -112,7 +112,7 @@ Alternatively, with Envoy logging enabled:
 istioctl install --set profile=demo --set meshConfig.accessLogFile=/dev/stdout
 ```
 
-<h3 class="chapter-sub-heading">
+<h3 className="chapter-sub-heading">
   <a name="2">Verify install</a>
 </h3>
 
@@ -121,7 +121,7 @@ In the Istio management page:
 1. Click the (+) icon on the `Validate Service Mesh Configuration` card.
 1. Select `Verify Installation` to verify the installation of Istio.
 
-<h4 class="chapter-alt-heading">Alternatively:</h4>
+<h4 className="chapter-alt-heading">Alternatively:</h4>
 
 Istio is deployed in a separate Kubernetes namespace `istio-system`. To check if Istio is deployed, and also, to see all the pieces that are deployed, execute the following: