Add shortcode for easier embedding of meshery designs

content/en/example-meshery-embed/_index.md

@@ -0,0 +1,8 @@
+---
+title: "Meshery Embed Example"
+---
+
+This is an example of embedding Meshery content in a CNCF End User Reference Architecture site.
+
+
+{{< meshery-design-embed id="2237dd2c-980b-45e3-b5d7-b4cc0d90360e" src="./Adobe-flex-architecture.png" >}}

layouts/shortcodes/meshery-design-embed.html

@@ -0,0 +1,78 @@
+<!--
+  This shortcode is used to embed a Meshery design into hugo sites
+
+  -- Usage:
+  {{/*< meshery-design-embed src="path/to/design-image" id="design-id" style="custom-styles" >*/}}
+
+  More Information:
+  Learn more about embedding Meshery designs at:
+  https://docs.layer5.io/kanvas/designer/embedding-designs/
+-->
+
+<!--
+  Retrieve the path to the image for embedding the Meshery design.
+-->
+{{ $snapshotImage := .Get "src" }}
+
+<!--
+  Retrieve the unique ID for the Meshery design.
+-->
+{{ $id := .Get "id" }}
+
+<!--
+  Retrieve optional custom styles for the embedding container.
+  If not provided, a default style will be applied to ensure proper rendering.
+-->
+{{ $style := .Get "style" }}
+
+<!--
+  Embedding Container:
+  A `div` element is dynamically created with the provided or default styles.
+  - The `id` attribute links to the unique design embed.
+  - The `style` attribute can be customized or fall back to a default appearance,
+    which includes:
+      - Height: 30rem
+      - Width: 100% (responsive to container width)
+      - Border: 1px solid #eee (light border for visibility)
+-->
+<div
+    id="{{ $id }}"
+    {{
+    if
+    $style
+    }}
+    style="{{ $style }}"
+    {{
+    else
+    }}
+    style="height: auto; width: 100%; border: 1px solid #eee"
+    {{
+    end
+    }}
+>
+    <img src="{{ $snapshotImage }}" style="width: 100%; height: 100%" />
+</div>
+
+<div
+    class="meshery-design-footer"
+    style="text-align: center; margin-top: 1rem; font-size: 0.9rem"
+>
+    <a
+        href="https://cloud.layer5.io/catalog/content/design/{{ $id }}"
+        target="_blank"
+    >
+        View in catalog </a
+    >,
+    <a
+        href="https://playground.meshery.io/extension/meshmap?mode=design&design={{ $id }}"
+        target="_blank"
+    >
+        Edit in playground </a
+    >, or learn how to
+    <a
+        href="https://cloud.layer5.io/academy/learning-paths/mastering-meshery/introduction-to-meshery?chapter=interpreting-meshery-designs"
+        target="_blank"
+    >
+        interpret Meshery Designs
+    </a>
+</div>