P5.js-web-editor: include a link to the sketch in editor from the default fullscreen url?

[aparrish]

Not sure how this relates to #208, but an issue I see a lot in class is that students will link to the full-screen version of their sketch in their blog posts, and then when they're presenting in-class and I ask to see their source code, there's no easy way for them to get back to the editor view.

A possible solution might be to include an inconspicuous link (say, a 50% transparent "Back" icon in the lower-right corner?) that only appears in the full screen view.

Another possible solution might be to make the mapping between the full-screen URL and the editor URL for a sketch more clear, so that it would be easy to modify the URL to get back to the original sketch. (As it stands, the full-screen URL doesn't include the username of the creator, so you can't just get rid of full/ in the URL to see the sketch in the editor.)

I suspect both of these solutions have significant drawbacks, but I wanted to make the suggestion in case other people have the same issue and it turns out that there's an easy way to implement a fix. Thanks!

[shiffman]

I have noticed this as well! I would be happy with the views being something like:

https://editor.p5js.org/username/sketches/AaAaAaAaA
https://editor.p5js.org/username/full/AaAaAaAaA
https://editor.p5js.org/embed/AaAaAaAaA

"embed" and "full" are identical, but embed is a url without the username? Alternatively, we could also have https://editor.p5js.org/sketches/AaAaAaAaA redirect to https://editor.p5js.org/username/sketches/AaAaAaAaA.

I like that the full view of the sketch is unadulterated, but I defer to @catarak as to what will work best / be easiest to maintain?

[catarak]

I noticed the same thing in class yesterday. Just to throw in another option:

1. /<username>/sketches/<sketch_id> is the edit view
2. /<username>/full/<sketch_id> is the full screen view, which also contains a little header with the username, the sketch name, and a link to the edit view
3. <username>/embed/<sketch_id> or <username>/presentation/<sketch_id> or <username>/pres/<sketch_id> is the fullscreen view, without the header thing

And, from the "Share" window, next to the url that you can copy, there's also a link which opens each of these in a new tab (except for the iframe because that doesn't make sense).

[shiffman]

This sounds great to me too!

[Vertmo]

I could work on this, if that's okay with everyone :) However, since I'm awful at design, if you have any directions regarding the header that should come with the full screen view, that would be really useful !

[catarak]

Go ahead and get started! If you get stuck, make a [WIP] (Work in Progress) PR and I can add comments on it. I think that the editor 404 page could be a good starting point: https://editor.p5js.org/404

The only thing I would change for the full view header is that I would left-align the text rather than have it centered.