Adding examples preview

[madtitan02]

Increasing Access

I think as a user when you scroll through the examples section, the User is generally confused by such a number of examples and cannot determine the actual behaviour of each shape; in other words, it is not very visually appealing; if the user is unsure of any shape he will have to check each sketch one by one, And it will take time as it will always redirect to the code editor, I am sure that would not be a very pleasant experience as a user. There should be a preview button. There is already an existing dropdown button which contains the download button. But it can be updated with a [+] expand view. It will display the preview, increase user accessibility, and make it easier to use.

Feature request details

In this feature, We will update the down arrow section, as shown in the screenshot. It will then expand the div where the preview of the sketch will be running, displaying the animation of the shape the div will also contain three buttons on the left side or right side,

1. share button (to share the shape)
   2)Copy(To copy the default code)
   3)Download
   Making this feature will save users time, and it can be implemented, and the code would be running on click, so it will be convenient too.
   

[madtitan02]

@lindapaiste @raclim if the community agrees do assign me i will submit a review pr

[lindapaiste]

We've wanted to add thumbnails for a long time (#398), but that's complicated to implement. It involves capturing a still frame of the canvas (at what time?) and storing that in AWS. Running the actual sketch like you are suggesting would be easier.

[madtitan02]

We've wanted to add thumbnails for a long time (#398), but that's complicated to implement. It involves capturing a still frame of the canvas (at what time?) and storing that in AWS. Running the actual sketch like you are suggesting would be easier.

Implementing all the canvas features would be really difficult to implement i think running a default code and presenting it as an animation types on the div to give a rough idea to the user how it will work.If you have any idea related to it please do share as still frames seems complicated,But running a certain code block would work , Also can you provide me relevant files to look over so i can get more idea regarding it.

[QUAGZA]

I'm new to open source contributions, but I'd like to give this feature a try. I'm considering using iframes to implement it and would appreciate your thoughts on this approach. Also, could you please point me to the necessary files for this task?

On another note, I've set up the web editor locally, but I'm having trouble viewing the examples. Could you help me with that?

[lindapaiste]

Also can you provide me relevant files to look over so i can get more idea regarding it.

Check out PR #2168 that I did for the 404 page, it involves embedding a sketch using the EmbedFrame component.

[KrishavRajSingh]

Should I work on this?

[KrishavRajSingh]

Also can you provide me relevant files to look over so i can get more idea regarding it.

Check out PR #2168 that I did for the 404 page, it involves embedding a sketch using the EmbedFrame component.

Hey @lindapaiste, I was working on this issue and I need a little help.
I was using the method that you used in #2168 and succeeded in making the previews, but it wasn't working for some sketches, especially the ones with images. This is the draft PR #2763.