Replace the Logo of Layer5 with Meshery in config.yml workflow

[anshgoyalevil]

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

[Saksham294]

Hey can I work on this?

[leecalcote]

@anshgoyalevil, never store images like this outside of the repo. They must be stored inside of .github. @goldfishdolphin help, help.

[anshgoyalevil]

@leecalcote

Actually, I was previously testing this Raw SVG thing, so used the same srcset instead of images stored inside the repo.

Made a PR fixing that thing. Apologies.

[vishalvivekm]

@anshgoyalevil // @goldfishdolphin
Guys, some of the points that you should take special care of while changing the logos in the readme or the workflows:

1. all images for the readme/workflow-logos should be under .github somewhere, not in other repos or in other folders in the same repo.
2. make sure they support both dark mode and light mode
3. Please also ensure correct image size and margins around them i.e, there' shouldn't be this much spacing that's there in the meshery/meshery-nginx-sm Readme.md
   // Fix logos meshery-nginx-sm#224

[anshgoyalevil]

@vishalvivekm

Thanks for giving the suggestions Sir. Will keep them in mind for future.

[ankur0904]

Can I work on this issue?