Current Behavior

Akin to how layer5.io is built, and site deploy preview created, do the same for this repo (for this site).

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current State

The is a small grammatical error after the user sign-up.

Desired State

Correct it to read: Please wait patiently for a response from the Meshery team.

Contributor Guides and Resources

• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🛠 Meshery Build & Release Strategy
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

The home page of Meshery Playground has some text centre aligned while some left aligned which makes the UI weird.

Desired Behavior

The paragraphs should also be centre-aligned like the headings.

Screenshots

Environment

• Host OS: Linux
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Desired Behavior

Creating a contact form to be displayed on play.meshery.io. The contact form component for this can be borrowed from the layer5.io website.

Mockups

The contact form component can be found here, https://layer5.io/careers/programs#:~:text=Didn%27t%20find%20an%20answer%20to%20your%20question%3F

Contributor Guide

Current Behavior

Submit button Not Hovered like login button or signup button hover

Desired Behavior

Want to Hover that Submit Button which will look good

Before changes

After Changes

Current State

Desired State

Contributor Guides and Resources

• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🛠 Meshery Build & Release Strategy
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

          This site is missing the auto PR labeler. The workflow for this can be copied (and reduced) from the `layer5io/layer5` GitHub repo.

Originally posted by @leecalcote in #91 (comment)

Current Behavior

Fields marked as mandatory, but form is submitted without them as well.

Current Behavior

Update website footer copyright year from 2022 to 2023

Screenshots/Logs

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

1. There is a login button inside the image displayed for the React player which is misleading.

2. Padding is inconsistent between the React player and the text above and below it

Desired Behavior

1. Removing the login icon.
2. Adding 3rem as margin-top for caption element similar to the other elements to make it consistent.

Implementation

1. Fix for issue 1

2. Fix for issue 2

Acceptance Tests

Mockups

Contributor Guide

Current State

Replace this

Desired State

with this

Contributor Guides and Resources

• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🛠 Meshery Build & Release Strategy
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

The Slack links (under Community and Socials section) in the footer take to 404 page and Service Mesh Interface page respectively.

Expected Behavior

The links should direct to the official Slack of Meshery.

Screenshots/Logs

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

@leecalcote I'd like to work on this issue. Kindly assign.

itsarraj

Current Behavior

After the user signs up, the sign up button still appears on the screen.

Expected Behavior

The button should disappear after successful signup.
I would like to work on this issue.

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

The footer does not have a LinkedIn social icon

Expected Behavior

Add LinkedIn social icon to the footer

Screenshots/Logs

Now:

Desired state:

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Overview

Hosted at play.meshery.io, build a unique learning environment for learning modern application networking through Meshery's support of every service mesh, orchestration of Kubernetes, and integration with many other CNCF projects. Meshery's genesis is that of helping teach people about service mesh technology and enabling to operate this type of cloud native infrastructure confidently. The proposed project is aimed at furthering this mission with interactive API documentation connected to a cloud native playground (a running instance of Meshery).

Mockups

See https://layer5.io/programs/lfx for details.

Contributor Guide

Current Behavior

Remove the SignUp Image on Home Page

Desired Behavior

Remove the current image with the Updated one

Implementation

Current State:

Updated Image:

Acceptance Tests

Mockups

Contributor Guide

Current Behavior

In the homepage, the sign up form overall uses "Qanelas Soft", just like the rest of the page. But the input fields don't inherit the
the font family from the body and defaults to "Fira Sans" font. Same case for the submit button.

Expected Behavior

I think for consistency they should have the same font. Right now it looks a little out of place.

Screenshots/Logs

Current

Expected

Environment

• Host OS: Linux
• Platform: Docker
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

Currently, the icon is not visible due to black strokes in dark mode

Expected Behavior

It should have white strokes in dark mode

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

Right now we have some hover effects on buttons and all. But they don't have any transition effect which makes it look a little unpolished. Also the "Join our community button" still doesn't have the effect.

Desired Behavior

• To add some basic transitioning to the buttons
• Add the same hover effect to the join community button

Implementation

• Some CSS rules need to be added.

Acceptance Tests

Mockups

Contributor Guide

Current Behavior

Minor bug seen in Safari (and maybe other browsers):

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

there are limited questions in the frequently asked questions

Desired Behavior

we can add more questions in frequently asked questions so it will be easy for the users to solve their issues and clear their doubts

Implementation

we can add this type of questions :-
How can I contribute to the Meshery open-source project?
What kind of support options are available for Meshery users?
How does Meshery help with service mesh management and performance testing?
and we can add many more

Mockups

Are you working on this issue?
Yes

Contributor Guide

Current Behavior

Correct the spelling of the "curriculum"

Expected Behavior

ciricullum -> "curriculum"

Screenshots/Logs

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

When clicked outside the card, the discuss.layer5.io link gets activated - which should not be the case.

Expected Behavior

The link should only be activated when clicked on the card not beyond that.

Screenshots/Logs

Environment

• Host OS: Linux
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

The project's current issue templates are missing an open invitation link where new contributors can join the community's Figma team and view user interface designs and other UX projects.

Desired Behavior

Each template that has a reference to Figma in its resources section should an invite link added.

Implementation

In each issue template that refers to Figma, replace the current line referring to Figma with this line:

- 🎨 Wireframes and [designs for Meshery UI](https://www.figma.com/file/SMP3zxOjZztdOLtgN4dS2W/Meshery-UI) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9)```

Acceptance Tests

1. All references to Figma include the "open invite" link.

Contributor Guide

Current Behavior

Anyone can signup to use the Meshery Playground. Signup is necessary to ensure accountability given the open cluster nature of the playground.

Desired Behavior

Disallow signups from the following domains:

• @duck.com
• @anonaddy.me
• @protonmail.com
• @tuta.io

Implementation

Field validation using javascript and regex.

Acceptance Tests

1. Users who signup with any of the domains listed above are not allowed to submit the form.
2. Users who signup with any of the domains listed above are shown the following message:

"Use of the is not allowed. Please use a non-anonymous email address / domain.

The Meshery Playground is connected to live Kubernetes cluster(s) and allows users full-control over those clusters. Requiring users to register a non-anonymous user account keeps the Playground safe and healthy for all to enjoy. Without requiring users to sign-in, the Meshery Playground would allow anonymous access for anyone and everyone to potentially perform nefarious acts. Sign-up to receive a user account, entitled with perpetually free and full access the Playground environment."

Contributor Guide

Desired Behavior

Creating a set of FAQs to be displayed on play.meshery.io. The FAQs component for this can be borrowed from the layer5.io website.

Mockups

layer5.io

Contributor Guide

Description

The para in https://play.meshery.io/ in light mode is not visible.

Expected Behavior

The paragraph should be clearly visible

Screenshots

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 (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

Description

Currently, we are using the Logo of Layer5 instead of Meshery. This repository is under the organization Meshery, so, there should be the image of Meshery.

How to resolve this?

• Go to .github and replace this welcome image with the new one:

• Make sure to display the images conditionally, based on the theme selected by user.
  Here's the sample code:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/w.png">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/b.png">
  <img alt="Meshery Logo" src="">
</picture>

New images are:

• Download these images, and upload with an appropriate name. Make sure to use conditional rendering as described above.

• After uploading the image, and removing the previous image, go to .github/config.yml folder and update the reference to previous image to the new image in the following part:

firstPRMergeComment: >
  Thanks for your contribution to the Layer5 and Meshery community! :tada:
   
  ![Congrats!](https://raw.githubusercontent.com/meshery/meshery.io/master/.github/welcome/Layer5-celebration.png)
    	   	    	    	 :star: Please leave a [star on the project](../stargazers). :smile:

Here, replace ![Congrats!](https://raw.githubusercontent.com/meshery/meshery.io/master/.github/welcome/Layer5-celebration.png) with the code

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/w.png">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/b.png">
  <img alt="Shows a black logo in light color mode and a white one in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

make sure to change the image sources with the path to image in the folder where you upload it.

• That's it.

Contributor Guides and Handbook

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

Current Behavior

Expected Behavior

Screenshots/Logs

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

Currently play.meshery.io doesn't have much description about the playground.

Desired Behavior

Enhance the page with more information about what playground is on playground.meshery.io

Implementation

Acceptance Tests

Mockups

Contributor Guide

Current Behavior

Expected Behavior

Environment

• Host OS: Linux
• Platform:
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current State

Dark and light mode support on the play.meshery.io site is new and undocumented.

Desired State

The Contributing.md should answer the following questions (and more):

1. How does the site theming work?
2. How to define new classes / new styles that have both light and dark mode definitions?

Consider copying or referencing the https://github.com/layer5io/layer5 dark mode instructions.

Contributor Guides and Resources

• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🛠 Meshery Build & Release Strategy
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

In the "Join the Discussion" card, swap the Layer5 | Learn with the Meshery | Learn logo:

Contributor Guide

Current Behavior

Desired Behavior

Contributor Guide

Current Behavior

The cd.. command in makefile, here is wrong.

Expected Behavior

It should be cd ..

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

A new promotional video has been created for Meshery Playground - https://youtu.be/Do7htKrRzDA

Desired Behavior

Prominently present this video to site visitors.

Implementation

1. Allow Have this video play onclick of the site's large screenshot.
2. Add a "play" icon on top of the site's screenshot, so that users understand that a video will load on click.
3. The video should be embedded either directly in the page or be presented in a modal.

Contributor Guide

Screenshot

Description
Responsive Issue:
The footer in meshery.io is looking more professional and well-designed whereas in the case of play.meshery.io it's not looking uniform and appealing.

Desired
The footer design of meshery.io should be used in play.meshery.io

Current Behavior

As of now there is default scrollbar which is not so good pr user-friendly

Expected Behavior

We can create custom scrollbar which will be very user-friendly

Screenshots/Logs

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

As mentioned by Lee on Slack, there's a bug in the Name field of signup form that requires users to enter the name in a specific format.

Expected Behavior

We can either remove the check since name need not follow a specific format OR make it more inclusive to include all languages

Environment

• Host OS: Windows

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

Example - https://app.netlify.com/sites/meshery-play/deploys/64c7fe565518d20008d451e5

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

Current State of the Meshery.io site

The calendar & github icon in footer on play.meshery.io are not visible on hover.

Desired State of the Meshery.io site

they should be clearily visible like the footer icons in meshery.io

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

Current Behavior

Currently the navbar remains same throughout all screen sizes and looks a bit cramped for smaller screens.

Desired Behavior

For screens below 500px the navbar will have a sort of hamburger menu.

Implementation

I was thinking about moving the entire navbar into its own navigation component. While the theme state will remain in app.js we can use props to pass and change its value from inside navigation component. If there is any other approach to this please let me know.

Mockups

Contributor Guide

Current State

The contributing.md is missing project setup command instructions.

Desired State

Add project setup guidelines with commands in contributing.md
Refer to the Makefile to get setup commands.

Contributor Guides and Resources

• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🛠 Meshery Build & Release Strategy
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

Expected Behavior

Make the form responsive across every breakpoint.

Screenshots/Logs

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

The current Sign up section does not let the user how their data is being used (email)

Desired Behavior

Add a message at the button linking the privacy policy and terms of use
See the login form https://meshery.layer5.io/registration?flow=d50cea7e-dd5e-425b-9ece-47c612b673b3

Implementation

Add a message below the Submit button with related links

Contributor Guide

Current Behavior

On removing all the components from the canvas, non-stop popups keep on coming up with the message "operation restricted because the canvas is empty".

Expected Behavior

There should only be a single popup.

Screenshots/Logs

Environment

• Host OS: Linux
• Platform: Docker
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

The community's standard first-time issue / pr welcoming comments and celebration is either missing or disabled.

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

A very simple request: update the following text - -

"The cloud native playground contains a set of learning paths that incorporate an application networking centric curriculum featuring training on 150+ integrations." Update to "200+"

Contributor Guides and Resources

• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🛠 Meshery Build & Release Strategy
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

Current Behavior

This single page site only supports light mode and has no mode switcher.

Desired Behavior

This single page site should be using the same dark mode colors and dark mode switcher as the layer5.io site is.

Implementation

See https://layer5.io/brand for resources and https://github.com/layer5io/layer5 for it’s dark mode colors.

Contributor Guide