add Meshery & Kanvas with lab content and README updates

meshery-kanvas-docs/designer/_index.md

@@ -0,0 +1,18 @@
+---
+title: Exploring Designer
+description: >
+  Designer mode is for those who want to create their own Kanvas, using the palette of components provided by Meshery.
+weight: 4
+categories: [Designer]
+# tags: [designs]
+aliases:
+  - /meshmap/designer/
+---
+
+{{% pageinfo %}}
+Collaborate with your team to create a Design. Enable collaboration mode using the Options mode available in the Kanvas canvas
+{{% /pageinfo %}}
+
+<!-- For many projects, users may not need much information beyond the information in the [Overview](/docs/overview/), so this section is **optional**. However if there are areas where your users will need a more detailed understanding of a given term or feature in order to do anything useful with your project (or to not make mistakes when using it) put that information in this section. For example, you may want to add some conceptual pages if you have a large project with many components and a complex architecture.
+
+Remember to focus on what the user needs to know, not just what you think is interesting about your project! If they don’t need to understand your original design decisions to use or contribute to the project, don’t put them in, or include your design docs in your repo and link to them. Similarly, most users will probably need to know more about how features work when in use rather than how they are implemented. Consider a separate architecture page for more detailed implementation and system design information that potential project contributors can consult. -->

meshery-kanvas-docs/designer/embedding-designs/index.md

@@ -0,0 +1,206 @@
+# Embedding Designs
+
+Learn how to embed your designs for sharing on your sites.
+
+Meshery Design Embedding enables you to export a design in a format that can be seamlessly integrated into websites, blogs, or platforms supporting HTML, CSS, and JavaScript. This embedded version provides an interactive representation of the design, making it easier to share with infrastructure stakeholders.
+
+## Embedding Your Design
+
+To embed your Kanvas design, follow these steps:
+
+1. **Access Embed Option**: Within the [Kanvas Designer](https://kanvas.new/), select the design you wish to embed. Click on the export icon in the menu for the selected design. The export modal will appear, click on the "Embed" option.
+
+   ![Embed Designs from Kanvas](./embed-designs.gif)
+
+2. **Download the Embedding Script**: Click on the download icon presented in the same modal to download the embedding script.
+
+## Embedding in Static Sites
+
+   The embed code for static site:
+
+   ```html
+   <div id="embedded-design-embedding-example"></div>
+   <script src="./embedded-design-embedding-example.js" type="module"></script>
+   ```
+
+   Make sure the `src` attribute in the script tag points to the location of the downloaded embedding script on your local filesystem or server.
+
+### Customization
+
+You can customize the styles for the embedded design in two ways: globally via CSS classes, or for a single instance via an inline style parameter.
+
+#### Global Styling (via CSS Classes)
+
+For advanced global styling, you can override the default CSS rules in your site's stylesheet. This will affect all embedded designs on your site. The main classes are:
+
+- `.meshery-embed-container`: The main container for the embedded design. You can target its `.full` or `.half` variants for specific sizing adjustments.
+- `.cy-container`: The canvas element within the container where the design itself is rendered.
+
+Here is an example of how you could override these classes:
+
+```html
+<style>
+  /* Make all embed containers have a different border and background */
+  .meshery-embed-container {
+    border: 2px solid #00B39F;
+    background-color: #f5f5f5;
+  }
+</style>
+```
+
+#### Instance-specific Styling (via `style` Parameter)
+
+For styling a single instance, the recommended method is to use the `style` parameter directly in the shortcode. This provides maximum control and will override any default styles or global CSS.
+
+```html
+{{</* meshery-design-embed
+    src="..."
+    id="..."
+    style="width: 60%; height: 28rem; border-radius: 1.5rem;"
+*/>}}
+```
+
+## Embedding in React Projects
+
+1. **Install the Package**: To integrate the Meshery Design into your React project, start by installing the package via npm:
+
+```bash
+  npm i meshery-design-embed
+```
+
+2. **Incorporate the Component**: Use the component to seamlessly embed designs within React and its associated frameworks.
+
+```jsx
+import MesheryDesignEmbed from '@layer5/meshery-design-embed'
+
+function Design() {
+  return (
+    <>
+      <div>
+        <MesheryDesignEmbed
+          embedScriptSrc="embedded-design-embed1.js"  // path to the embed script
+          embedId="embedded-design-a3d3f26e-4366-44e6-b211-1ba4e1a3e644" // id of the embedding
+        />
+      </div>
+    </>
+  );
+}
+```
+
+Make sure the `embedScriptSrc` attribute in the component points to the location of the downloaded embedding script on your react filesystem.
+Usually the script is located "static" folder
+
+## Embedding with Hugo
+
+To prepare your Hugo site to support design embedding, perform the one-time task of adding the following shortcode definition to your site's set of supported shortcodes.
+
+### Shortcode Definition
+
+<details>
+<summary>Click to expand the full Shortcode Definition</summary>
+
+```html
+{{ $script := .Get "src" }}
+{{ $id := .Get "id" }}
+{{ $size := .Get "size" | default "full" }}
+{{ $style := .Get "style" }}
+
+<style>
+.meshery-embed-container {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin: 0rem auto;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.meshery-embed-container.full {
+  width: 80%;
+  height: 30rem;
+}
+.meshery-embed-container.half {
+  width: 50%;
+  height: 25rem;
+}
+.meshery-embed-container .cy-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<div
+    id="{{ $id }}"
+    {{- if $style -}}
+        style="{{ $style | safeCSS }}"
+    {{- else -}}
+        class="meshery-embed-container {{ $size }}"
+    {{- end -}}
+></div>
+
+<script src="{{ $script }}" type="module"></script>
+```
+
+</details>
+
+### Shortcode Explanation
+
+- **`src`** (Required): The path to the exported JavaScript file for your design.
+- **`id`** (Required): A unique ID for the embedded design container.
+- **`size`** (Optional): A preset for simple sizing.
+  - Accepts `"full"` (default) or `"half"`.
+  - This parameter is ignored if `style` is used.
+- **`style`** (Optional): For advanced customization.
+  - Allows you to provide any custom CSS inline styles.
+  - **This parameter has higher priority and will override the `size` parameter.**
+
+Now that your site has shortcode support for embedding Kanvas designs, you can use the `meshery-design-embed` shortcode in any Hugo markdown file where you want to display embedded designs to your site visitors.
+
+### Using the Shortcode
+
+To embed a Meshery Design in your Hugo pages, use the `meshery-design-embed` shortcode. You will need the design's exported JavaScript file and its unique ID.
+
+### Usage Examples
+
+Place the exported `.js` file in an appropriate folder (e.g., a nearby `images` folder) and reference it in the shortcode.
+
+**Default (full-width) display:**
+
+```html
+{{</* meshery-design-embed
+    src="../path/to/your-design.js"
+    id="your-unique-design-id-full"
+*/>}}
+```
+
+**Half-width display:**
+
+```html
+{{</* meshery-design-embed
+    src="../path/to/your-design.js"
+    id="your-unique-design-id-half"
+    size="half"
+*/>}}
+```
+
+**Custom styling:**
+
+```html
+{{</* meshery-design-embed
+    src="../path/to/your-design.js"
+    id="your-unique-design-id-custom"
+    style="width: 60%; height: 28rem; border-radius: 1.5rem;"
+*/>}}
+```
+
+### Embedded Design Example
+
+When Hugo builds your website, it will process the shortcode and generate the necessary HTML and JavaScript to embed the interactive Kanvas design.
+
+Here's an example of how an embedded design appears:
+
+<!-- Design Embed Container  -->
+```html
+{{</* meshery-design-embed  
+src="../export-designs/embedded-design-dapr.js"  
+id="embedded-design-7d183e77-09e1-4b69-a5ee-3e3870e9c5f4" */>}}
+```
+
+{{< meshery-design-embed  src="../export-designs/embedded-design-dapr.js"  id="embedded-design-7d183e77-09e1-4b69-a5ee-3e3870e9c5f4" >}}

meshery-kanvas-docs/designer/export-designs/index.md

@@ -0,0 +1,150 @@
+# Exporting Designs
+
+Learn how to export your designs for backup, sharing or offline use.
+
+Kanvas let's you export a design in several formats, so you can:
+
+* keep versioned backups  
+* collaborate offline  
+* push artifacts to OCI-compatible registries or Helm repositories  
+* integrate designs into CI/CD or GitOps pipelines  
+* embed interactive diagrams in documentation and blogs  
+
+## Export in Two Steps
+
+1. Open the export menu
+   Within the [Kanvas Designer](https://playground.meshery.io/extension/meshmap), select the design you wish to export in the design drawer. Click on the export icon in the menu for the selected design.
+2. Pick an export format
+   Choose the option that matches your workflow (see table below).
+
+![Export Icon](./export-modal.gif)
+
+## Quick Reference: Export Formats
+
+| Format                          | Keeps full design metadata? | Typical uses                                       |
+|---------------------------------|-----------------------------|----------------------------------------------------|
+| Meshery Design (YAML)           | ✔                           | Backups, sharing, re-import into Kanvas           |
+| Meshery Design (OCI image)      | ✔                           | Store in Docker Hub/GHCR; registry-based versioning|
+| Kubernetes Manifest (YAML)      | ✖ (lossy)                   | `kubectl apply`; raw K8s deployment                |
+| Helm Chart (.tar.gz)            | ✖ (lossy)                   | Helm repos, GitOps (Argo CD/Flux), Artifact Hub    |
+| Embed Design (JS snippet)       | -                           | Interactive diagrams in docs or dashboards         |
+
+## Detailed Format Guide
+
+### Meshery Design (YAML)
+
+Exports a complete, lossless copy of your design.  
+This format preserves all Meshery-specific metadata, including:
+
+* Visual layout  
+* Annotations and comments  
+* Component grouping and configuration  
+
+Use it to back up or move designs between Meshery instances. The file is saved as `<design-name>.yml`.
+
+### Meshery Design (OCI Image)
+
+Exports your design as an OCI-compliant container image.  
+This format preserves all design metadata, just like the Meshery Design (YAML), but in a form suitable for container registries.
+
+When to use:
+
+* Version and distribute your design via Docker Hub, GitHub Container Registry, AWS ECR, etc.  
+* Integrate with registry-based workflows or team collaboration tools  
+* Store designs alongside application artifacts
+
+The exported file is named `<design-name>.tar`, and can be pushed using tools like `docker push` or `oras push`.
+
+### Kubernetes Manifest (YAML)  *Lossy Export*
+
+Exports your design as raw Kubernetes YAML files, ready to apply with `kubectl`.
+
+Best used when:
+* You want to deploy directly to a cluster
+* You're integrating with CI/CD tools that expect plain manifests
+* You no longer need visual layout, annotations, or design metadata
+
+This format strips out Meshery-specific context and includes only standard Kubernetes resource definitions.
+
+> If you want to preserve the full editable design, use **Meshery Design (YAML)** instead.
+
+### Helm Chart (.tar.gz)  *Lossy Export*
+
+Packages your design as a standard Helm chart archive (`.tar.gz`).
+
+Best used when:
+* You want to deploy via Helm (`helm install`)
+* You're working with GitOps tools like Argo CD or Flux
+* You plan to publish to a Helm repository or Artifact Hub
+
+This format includes only Kubernetes resource definitions.  Design layout, annotations, and other Meshery-specific metadata will not be included.
+
+> If you want to keep your design fully editable in Meshery, use **Meshery Design (YAML)** instead.
+
+### Embed Design (JavaScript Snippet)
+
+Exporting your design as an embedding allows you to integrate it into websites, blogs, or other platforms that support HTML, CSS, and JavaScript.
+
+The embedded design version offers a visually interactive representation of your design, making it easy to share with infrastructure stakeholders.
+> [Learn more](../embedding-designs) about Embedding Designs.
+
+## Best Practices and Tips
+
+| Need | Recommended format |
+|------|--------------------|
+| Preserve every design detail | Meshery Design (YAML) or OCI image |
+| One-off deployment           | Kubernetes Manifest |
+| Share a reusable package     | Helm Chart |
+| Show an interactive diagram  | Embed Design |
+| Publish to Helm repo         | Helm Chart (.tar.gz) |
+| Store in container registry  | Meshery Design (OCI image) |
+
+Note:
+
+1. If you plan to keep editing in Meshery, avoid lossy formats.  
+2. A Helm `.tar.gz` can be placed in any Helm repo and installed with `helm install`.  
+3. An OCI image can be versioned and pulled just like an application image.
+
+## Frequently Asked Questions
+
+<details>
+  <summary>Can I re-import a Helm Chart or Kubernetes manifest into Meshery for editing?</summary>
+
+You can import the resources, but design-time metadata (layout, annotations) is lost, so the graph will not reappear as originally designed.
+</details>
+
+<details>
+  <summary>What gets removed in a lossy export?</summary>
+
+Layout coordinates, visual grouping, comments, and any Meshery-only metadata.
+</details>
+
+<details>
+  <summary>Is the Helm `.tar.gz` ready for `helm install`?</summary>
+
+Yes. After export, run `helm install <release> <chart.tgz>` or add it to a Helm repo.
+</details>
+
+<details>
+  <summary>Should I use Helm Chart or OCI image for sharing?</summary>
+
+Use Helm if your consumers deploy via Helm; use OCI if you rely on container registries for versioning.
+</details>
+
+<details>
+  <summary>Do I need to be logged in to export a design?</summary>
+
+No, login is not required. You can export as a guest user.
+</details>
+
+<details>
+  <summary>Can I export someone else's published design?</summary>
+
+Yes. Any published design can be exported, not just your own.
+</details>
+
+<details>
+  <summary>Where does the exported file go?</summary>
+
+After export, your browser will either prompt you to choose a save location or automatically download the file to your default downloads folder.
+</details>