Merge branch 'master' into wyyllie-profile

Author: vr-varad

.desktop-lighthouserc.js

@@ -13,7 +13,7 @@ module.exports = {
          "http://localhost/cloud-native-management/kanvas/index.html?desktop",
          "http://localhost/learn/learning-paths/index.html?desktop",
          "http://localhost/learn/service-mesh-books/index.html?desktop",
-         "http://localhost/learn/service-mesh-workshops/index.html?desktop",
+         "http://localhost/learn/workshops/index.html?desktop",
          "http://localhost/learn/index.html?desktop",
          "http://localhost/blog/index.html?desktop",
          "http://localhost/resources/index.html?desktop",

.github/labeler.yml

@@ -51,7 +51,7 @@ area/learn:
     - "src/components/Learn-Components/**/*"
     - "src/collections/service-mesh-books/**/*"
     - "src/collections/service-mesh-learn/**/*"
-    - "src/collections/service-mesh-workshops/**/*"
+    - "src/collections/workshops/**/*"
     - "src/templates/book-*.js"
     - "src/templates/course-*.js"
     - "src/templates/lab-*.js"

.github/workflows/kanvas.yml

@@ -11,7 +11,7 @@ module.exports = {
           "http://localhost/cloud-native-management/kanvas/index.html",
           "http://localhost/learn/learning-paths/index.html",
           "http://localhost/learn/service-mesh-books/index.html",
-          "http://localhost/learn/service-mesh-workshops/index.html",
+          "http://localhost/learn/workshops/index.html",
           "http://localhost/learn/index.html",
           "http://localhost/blog/index.html",
           "http://localhost/resources/index.html",

.lighthouserc.js

@@ -59,17 +59,6 @@
 <br />
 
 
-<p style="clear:both;">
-<h2><a href="https://layer5.io/landscape">Service Mesh Landscape</a></h2>
-<a href="https://layer5.io/landscape"><img src=".github/assets/images/buttons/landscape.webp"  
-style="float:left;margin:10px;" width="125px"
-alt="Service Mesh Landscape Ecosystem" align="left"/></a>
-The <a href="https://layer5.io/landscape">Service Mesh Landscape</a> is a comprehensive collection of prominent service mesh projects and offerings laid out in contrast to one another.
-<br /><br /><br />
-</p>
-<br />
-
-
 <p style="clear:both;">
 <h2><a href="https://layer5.io/projects/cloud-native-performance">Cloud Native Performance</a></h2>
 <a href="https://layer5.io/projects/cloud-native-performance">
@@ -91,7 +80,7 @@ The <a href="https://layer5.io/projects/cloud-native-performance">Cloud Native P
 style="float:left;margin:10px;" width="125px"
 alt="Image Hub" align="left" /></a>
 <a href="https://layer5.io/projects/image-hub">Image Hub</a> is a demo application which runs on <a href="https://docs.meshery.io/service-meshes/adapters/consul">Consul</a> and facilitates exploring WebAssembly modules used as Envoy Filters.
-Image Hub supports Envoy-based data planes. It is compatible with and can be deployed on Istio and Consul service meshes.
+Image Hub supports Envoy-based data planes. It is compatible with and can be deployed on Istio and Consul.
 <br /><br /><br />
 </p>
 <br />
@@ -121,18 +110,6 @@ alt="Learn Layer5" align="left" />
 </p>
 <br />
 
-
-<!-- <p style="clear:both;">
-<h2><a href="https://layer5.io/smi">Service Mesh Interface Conformance </a></h2>
-<a href="https://layer5.io/smi"><img src=".github/assets/images/smi-conformance/checklist.svg"
-style="float:left;margin:10px;" width="125px"
-alt="Service Mesh Interface Conformance" align="left" /></a>
-<a href="https://layer5.io/smi">SMI Conformance</a> includes all service mesh projects participating in the Service Mesh Interface specification. It is an easy-to-use, service mesh and SMI-specific tool to give service mesh projects and users a suite of repeatable conformance tests.
-<br /><br /><br />
-</p>
-<br />
- -->
-
 <p style="clear:both;">
 <h2><a href="https://layer5.io/projects/nighthawk">Nighthawk</a></h2>
 <a href="https://getnighthawk.dev/">

README.md

@@ -1,7 +1,7 @@
 ---
 docType: "Course"
 title: "Course"
-description: "This course will guide you through the process of deploying and visualizing Edge Stack components with Meshery. You will learn how to install and configure the Ambassador API Gateway and explore its integration with Meshery. Additionally, you will gain hands-on experience with two popular service meshes, Istio and Linkerd. By the end of this course, you will have a solid understanding of Edge Stack deployment and be able to leverage Meshery for managing your API gateway and service mesh configurations."
+description: "This course will guide you through the process of deploying and visualizing Edge Stack components with Meshery. You will learn how to install and configure the Ambassador API Gateway and explore its integration with Meshery. Additionally, you will gain hands-on experience with Istio and Linkerd. By the end of this course, you will have a solid understanding of Edge Stack deployment and be able to leverage Meshery for managing your API gateway and infrastructure configurations."
 videos: 0
 lectures: 4
 courseTitle: "Ambassador Edge Stack API Gateway with Meshery"

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

@@ -19,7 +19,7 @@ import importDesignImage from "../../../../src/assets/images/learning-path/creat
 import configuringImportedDesignImage from "../../../../src/assets/images/learning-path/creating-designs/configuring-imported-design.png";
 import mesheryHelmChartImage from "../../../../src/assets/images/learning-path/creating-designs/meshery-helm-chart.png";
 import cloneDesignImage from "../../../../src/assets/images/learning-path/creating-designs/clone-design.png";
-import listOfDesignsImage from "../../../../src/assets/images/learning-path/creating-designs/list-of-designs.png";
+import renderedDesign from "../../../../src/assets/images/learning-path/creating-designs/rendered-design.png";
 import catalogImage from "../../../../src/assets/images/learning-path/creating-designs/catalog.png";
 import openInPlaygroundImage from "../../../../src/assets/images/learning-path/creating-designs/open-in-playground.png";
 import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
@@ -117,15 +117,13 @@ When working with Kanvas, you can effortlessly integrate various design files to
 
 2. Enter a name for the design in the **Design File Name** field.
 
-3. Choose the appropriate **Design Type** for the file you want to import (Helm Chart, Kubernetes, Manifest, etc).
-
-4. Select your preferred import method: either **URL** or **File Upload**.
+3. Select your preferred import method: either **URL** or **File Upload**.
 
 <a href={configuringImportedDesignImage}>
   <img src={configuringImportedDesignImage} width="100%" align="center" />
 </a>
 
-5. **Example:** Use the Meshery Server Helm chart at [Meshery Helm Chart](https://meshery.github.io/meshery.io/charts/meshery-v0.7.48.tgz).
+4. **Example:** Use the Meshery Server Helm chart at [Meshery Helm Chart](https://meshery.github.io/meshery.io/charts/meshery-v0.7.48.tgz).
 
 <a href={mesheryHelmChartImage}>
   <img src={mesheryHelmChartImage} width="100%" align="center" />
@@ -139,7 +137,7 @@ When working with Kanvas, you can effortlessly integrate various design files to
 
 1. Switch to Kanvas Designer mode, if not already in it. 
 
-2. In the left navigation panel, click the **“Catalog”** menu tab.
+2. From the canvas, click the **“Start From Template”** tab.
 
 3. Select a design from the list that appears in the panel.
 
@@ -151,12 +149,12 @@ When working with Kanvas, you can effortlessly integrate various design files to
 
 5. Click **“clone”** and a copy of the design will appear on your Kanvas canvas. You can then configure the design to suit your purposes.
 
-6. Find your newly cloned design in the list of designs in the left navigation panel.
-
-<a href={listOfDesignsImage}>
-  <img src={listOfDesignsImage} width="100%" align="center" />
+<a href={renderedDesign}>
+  <img src={renderedDesign} width="100%" align="center" />
 </a>
 
+6. Find your newly cloned design in the list of designs in your workspace.
+
 <h2 class="chapter-sub-heading">Github Integrations</h2>
 
 Integrating your GitHub account with Meshery unlocks the ability to import files as designs directly from your repositories, enhancing your collaboration and version control processes. This integration allows you to streamline your workflow, ensuring that your design infrastructure is always up-to-date and aligned with your source code. To get started with integrating GitHub into Meshery, follow the comprehensive guide available [here](https://docs.layer5.io/cloud/getting-started/github-integration/).

content-learn/mastering-meshery/introduction-to-meshery/meshery/creating-designs.mdx

@@ -93,6 +93,7 @@ Let's explore a few of these categories.
 1. **Triangles**:
 
     <img
+      class="image-design-icons"
       src={Triangles}
       align="center"
       width="25%"
@@ -105,9 +106,10 @@ Let's explore a few of these categories.
     - **Examples**: API Service, Service.
 
 
-1. **Rectangles**:
+2. **Rectangles**:
 
     <img
+      class="image-design-icons"
       src={Rectangles}
       align="center"
       width="25%"
@@ -121,9 +123,10 @@ Let's explore a few of these categories.
 
     - **Examples**: Namespace, Node, Pod, ReplicaSet, DaemonSet, Horizontal Pod Autoscaler.
 
-1. **User Icons**:
+3. **User Icons**:
 
     <img
+      class="image-design-icons"
       src={Users}
       align="center"
       width="25%"
@@ -135,9 +138,10 @@ Let's explore a few of these categories.
 
     - **Examples**: ClusterRole, Role, Service Account etc.
 
-1. **Cylinders**:
+4. **Cylinders**:
 
     <img
+      class="image-design-icons"
       src={Cylinders}
       align="center"
       width="25%"
@@ -163,6 +167,7 @@ Note that users have the flexibility to **customize** these arrow styles to suit
 **Edge Relationships**
 
 <img
+  class="image-design-icons"
   src={DashedArrows}
   align="center"
   width="25%"
@@ -173,6 +178,7 @@ These are used to indicate traffic flow and relationships between components. Th
 **Annotations**
 
 <img
+  class="image-design-icons"
   src={AnnotationArrow}
   align="center"
   width="25%"
@@ -185,6 +191,7 @@ These are used to denote annotations or static connections between components. T
 1. **Edge-Network Relationship**: Represented by a dashed arrow with **port/network protocol**.
 
 <img
+  class="image-design-icons"
   src={NetworkEdgeRelationship}
   align="center"
   width="50%"
@@ -205,6 +212,7 @@ These are used to denote annotations or static connections between components. T
 The intermediary component (such as a RoleBinding) connects the two, defining how permissions are assigned. For example, a dashed arrow from a `Role` to a `ServiceAccount` with a `RoleBinding` in the middle shows the connection established by the RoleBinding, which links the specific role to the service account and grants the appropriate permissions.
 
 <img
+  class="image-design-icons"
   src={EdgePermissions}
   align="center"
   width="50%"
@@ -213,7 +221,8 @@ The intermediary component (such as a RoleBinding) connects the two, defining ho
 **Creating Edge-Permission Relationships Between Components**
 
 <a href={edgePermissionGif}>
-  <img src={edgePermissionGif} width="100%" align="center" />
+  <img src={edgePermissionGif} width="100%" align="center" 
+  />
 </a>
 
 
@@ -227,20 +236,17 @@ Meshery extends and offers support for numerous [integrations](https://docs.mesh
 In Meshery, these integrated components are distinctly represented by their specific logos as icons and various shapes. These components can be found in `Components` in the dock.
 
 <img
+  class="image-design-icons"
   src={Integrations}
   align="center"
   width="50%"
-  style={{ 
-    marginTop: '20px', 
-    marginBottom: '20px', 
-  }} 
 />
 <h5 class="chapter-sub-heading">_Example of integration components in Meshery_</h5>
 
 Below is a Meshery Design with AWS Components.
 
 <MesheryDesignEmbed
-  style={{ border: "1px solid #eee" }}
+  style={{ border: "1px solid #eee" , margin: "15px 0px 15px 0px"}}
   embedId="embedded-design-79d1f362-39b3-46f2-b658-42a16984f88e"
   embedScriptSrc="/embed-test/embedded-design-awscomplex.js"
 />
@@ -271,14 +277,15 @@ Annotations can be created using Meshery's Diagramming tools found in the dock a
 1. **Images**:  Images can be added to the design to represent components, logos, or any visual aid that supports understanding the architecture.
 
 <a href={AnnotationExampleGif}>
-  <img src={AnnotationExampleGif} width="100%" align="center" />
+  <img src={AnnotationExampleGif} width="100%" align="center" 
+  />
 </a>
 
 
 The design below includes annotations such as sections, images, arrows, and various shapes.
 
 <MesheryDesignEmbed
-  style={{ border: "1px solid #eee" }}
+  style={{ border: "1px solid #eee" , margin: "15px 0px 15px 0px"}}
   embedId="embedded-design-a83f0098-2f91-4275-b075-c8676e842804"
   embedScriptSrc="/embed-test/embedded-design-annotations-example.js"
 />
@@ -292,14 +299,16 @@ While default shapes, colors, and icons are provided for components and annotati
 **Customizing Kubernetes Components**
 
 <a href={CustomizeKubernetesGif}>
-  <img src={CustomizeKubernetesGif} width="100%" align="center" />
+  <img src={CustomizeKubernetesGif} width="100%" align="center" 
+  />
 </a>
 
 
 **Creating and Customizing Arrow Annotations**
 
 <a href={CreateAnnotationGif}>
-  <img src={CreateAnnotationGif} width="100%" align="center" />
+  <img src={CreateAnnotationGif} width="100%" align="center" 
+  />
 </a>