[Integrations UI] Add remaining meshery integrations

[Shivam-AfA]

Description

https://meshery.io/ website features only 80 integrations in contrast to the 150 integrations on the https://layer5.io/ website.

Expected Behavior

All the remaining integrations need to be added to the integrations section on meshery.io website.

How to Implement

See #1005 (comment)

Screenshots

Meshery.io website

Layer5 wesbite

Enviroment:

• OS: Mac Linux Windows
• Browser: Chrome Safari Firefox
• Version:
• Device: Desktop Mobile

---

Contributor Guides and Handbook

The meshery.io website uses Jekyll and GitHub Pages. Site content is found under the master branch.

• 📚 See the Contributing to Meshery.io Website section of the readme.md and other contributing instructions, too.
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[welcome]

Thanks for opening this issue. A contributor will be by to give feedback soon. In the meantime, please review the Meshery Contributors' Welcome Guide and sure to join the community Slack.

[Savio629]

@Shivam-AfA So remaining 70 integrations should be added to meshery.io website?
I can take up the issue....

[leecalcote]

@Savio629, thanks for raising your hand. To clarify, this needs to be done programmatically (and not by manually adding the integrations. The solution here has to do with GitHub Workflow logic. @asubedy will you investigate?

[Savio629]

Yeah it seems I just thought that I would have to copy the 70 integrations from layer5.io and add them in meshery.io. Sorry for directly hoping in, instead of exploring the issue a bit more from my side.

[gopivaibhav]

I am interested to work on this issue and I have gone through this issue in the CI call. So, can I get assigned to it?

[Shivam-AfA]

Sure @gopivaibhav. Do consider this:

this needs to be done programmatically (and not by manually adding the integrations. The solution here has to do with GitHub Workflow logic.

[asubedy]

Ok, these are where the issue present

1. The workflow integration_updater is working perfectly fine, it updates the layer5 repo as well as meshery repo with the required files or changes.
2. In the Meshery repository the workflow makes changes to the data.json file and then commits it. And this file has the correct number of integrations, that is around 150.
3. So now the problem here is that the current html file that is responsible for showing the integration integration.html is using a the data source as a different js file as seen here. This file data.js has hardcoded 80 integrations hence we see only 80 integrations on the website
4. So if we use the content from data.json file to show the integrations then this should solve the problem.

Few things to take note:
The content on data.json file is in such format

[{
      "name":"Fluid",
      "color":"../images/integration/fluid-color.svg",
      "white":"../images/integration/fluid-white.svg"},....]

So to render the integrations properly first the inverted commas on the keys that are "name","color" and "white" should be removed and the image link should not have the integration part so the image link will look like ../images/fluid-color.svg

[Shivam-AfA]

@gopivaibhav any updates on this?

[gopivaibhav]

@gopivaibhav any updates on this?

The issue is almost done but I guess I need to change the styling as I can't see all the 150 integrations without scrolling in the table format. Please do let me know if this is fine or I will try to change the styling of the page.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.