[MeshMap] Meshery Design Embedding: Create React Package and Publish NPM package

[leecalcote]

Current Behavior

MeshMap users can export and embed designs in web pages - https://docs.layer5.io/meshmap/designer/export-designs/#exporting-as-embedding

Desired Behavior

Enhance MeshMap's ability to export and embed designs into web pages by creating a React package that is friendly to frameworks like Gatsbyjs, Nextjs, as well as generic React.

We recently released a new feature in meshmap that allows the designs to be downloaded as a js file we can be used to embed the design into websites
this works fine with static html sites but for gatsby and other react based frameworks it is still possible to get it going by dynamically loading the script
but that is a bit of too much to ask users to do
so we are going to create a new react package that will be small component that will just do this dynamic loading of the script for us
this package will be then used by user to embed the designs

Implementation

1. React Component package
2. GitHub workflow for publishing NPM package

Acceptance Tests

Mockups

See https://docs.layer5.io/meshmap/designer/export-designs/#exporting-as-embedding

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[leecalcote]

@aabidsofi19 FYI

[anshitmishra]

hey @leecalcote i would love to take this work

[leecalcote]

@anshitmishra, excellent!

[leecalcote]

@iArchitSharma @aabidsofi19, we overlooked updating this issue with the work that has been completed thus far.

How might @anshitmishra engage on this one? Or do we need to help Anshit find another item?

[leecalcote]

https://www.npmjs.com/package/@layer5/meshery-design-embed

[iArchitSharma]

@anshitmishra Here is the docs on - https://docs.layer5.io/meshmap/designer/export-designs/embedding-designs/
There is an open issue on MeshMap - Display embed support form with help button inside meshmap troubleshoot guide
Basically we need a Help button in MeshMap that references this page

Can you help us by taking on this issue?

[anshitmishra]

yes i would love to take this issue @iArchitSharma