[Feature Highlight] Vertical slider: before and after

[leecalcote]

_written up by from @MUzairS15 _

Current State of the Meshery.io site

The screenshot and text doesn't describe the capability of Meshery Extension to its fullest.

Desired State of the Meshery.io site

Add a vertical slider instead of the current screenshot. The left hand side of the slider would contain a K8s manifest for a multi-tier application.
The right side of the slider would contain the simplified view of the manifest i.e. Screenshot of manifest rendered on canvas.

If the contributor working on this issue, cannot find a screenshot/YAML to display, please atleast proceed with implementing the slider, leaving the screenshot/YAML as a placeholder.

---

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.

[aman44444]

@leecalcote i want to work on this feature can you please assign this to me?

[aman44444]

@leecalcote could you please provide me a reference to a vertical slider and explain this feature in more detail? I'd like to understand what it should look like

[theavitw]

Is this issue resolved ? "ok" : "I would like to work on it"

[MUzairS15]

@aman44444 DO you have any updates?

[MUzairS15]

@aman44444 Do you want to know what a vertical slider is? (Google it).
In the two portions of the slider, one portion would have YAML content the other part would have an image.
First part

apiVersion: apps/v1
kind: Deployment
metadata: 
  name: backend
spec:
  selector:
    matchLabels:
      app: server
      tier: backend
  replicas: 1
  template:
    metadata:
      labels:
        app: server
        tier: backend
    spec: 
      containers:
        - name: server
          image: nginx
            - name: http
              containerPort: 80
---
....
----

Second part

[leecalcote]

@theavitw, yes, please do give this ago as well. I'm not sure if @aman44444 is still working through this or not...

[aman44444]

@MUzairS15 how is this?

[leecalcote]

@aman44444, no. One similar to this - https://levelup.gitconnected.com/how-to-create-a-before-after-image-slider-with-css-and-js-a609d9ba77bf

[theavitw]

https://reactscript.com/react-vertical-carousel/ something like this ?? @MUzairS15

[MUzairS15]

Not a carousel, but a slider. Similar to what Lee pointed out.

[aman44444]

is it ok?

[MUzairS15]

Can you screenshot an live example instead of random text?

[aman44444]

here it is

Meshery.The.Kubernetes.and.Cloud.Native.Manager.-.an.extensible.developer.platform._.Meshery.Mozilla.Firefox.2023-11-14.16-31-00.-.Trim.-.Trim.mp4

[abhijeetgauravm]

Hey @aman44444 Let's discuss this on website call today at 6:30 PM IST / 7 AM Central time. Please add this as an agenda item in the meeting minutes.

[leecalcote]

@aman44444 do you have an open PR? Let's go! This is what we're looking for (without the hideous blue color).

[abhijeetgauravm]

@aman44444 do you have an open PR? Let's go! This is what we're looking for (without the hideous blue color).

// @aman44444

[abhijeetgauravm]

Closing this as implemented by another contributor. Let's go ahead and get you onto a new issue. Thanks for your efforts here, @aman44444.
Here you'll find many good-first and help-wanted issues:
https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+org%3Ameshery+org%3Aservice-mesh-performance+org%3Aservice-mesh-patterns+label%3A%22help+wanted%22+

Feel free to check these out and comment to get assigned.