Revamp examples page

[HoloTheDrunk]

Requires #2590

Description

Redesign of the examples page:

• CodeMirror 5 editor to edit the examples and run the editor content in the <iframe> instead of a direct link to the example blob on GitHub.
• Cleanup of the index HTML and CSS, moving to a flex-based layout.
• More responsive UI to accommodate smaller screens (including mobile by simply hiding the editor and example picker for now).
• Share button to improve not only the user experience of sharing examples with others but also make reporting reproducible bugs significantly easier.

Motivation and Context

The examples page is one of the first things people will see when researching which library to use. By providing immediately editable examples, we provide a way for prospective users to toy around and see if iTowns matches their needs for a very low time investment on their end.

Things to be done after merge

• Add button redirecting to a gallery with a thumbnail of every example. Will be added in Migrate to new website itowns.github.io#34
• Add tip in issue/PR template about using the examples page to reproduce a bug.

Screenshots

1080p full width

Lower resolution / reduced width

Mobile ratio (editor shows up in landscape mode)

[HoloTheDrunk]

Missing tooltips, dangit. I'll add that in right away.

[jailln]

Hi, thanks for this proposal @HoloTheDrunk , it is way better and more usable ! After discussion with @clameger , we have a few modification propositions:

• We think we should add a gallery, similar to https://docs.mapbox.com/mapbox-gl-js/example/ , with a screenshot, a name and a short description for each example. When clicking on one of the examples in the gallery, it could open the current view and we could add a button in the current view to get back to the gallery. We can provide examples descriptions and take this opportunity to quickly review together the ones we really want to keep.
• Would it be possible to add a button to set the example view in full screen ? (useful for demos for instance)
• We have some propositions to modify a little bit the interface on the upper left (above the code), I will try to provide a small model of what we have in mind

[jailln]

Hi @HoloTheDrunk,

Sorry for the late feedback but I finally took some time to do some more tests. A few propositions:

• Could we change the Custom example by something very simple with a GlobeView and a basemap? (I think GlobeView is more commonly used than PlanarView)
• The "latest" checkbox does not seem to work
• Could you rename "latest" into "latest version"?

A UI designer from my team will also work on a new UI, including a gallery as mentioned in my previous comment but she will only be able to work on this in February. Therefore I propose that we merge this PR when the small changes mentioned in the list above are done and we work on the UI in another PR.