Add an introduction/tour #624
Conversation
constants/tour: add initial tour content views/Introduction: add button to start tour (TODO: add styles) package.json: add shepherd.js for tours
- Move scss from module import to build scss - load the tour and it's dependencies async when the tour is started
Nothing big here. I tried to think about this from the perspective of someone who's unfamiliar with Laboratory. What kinds of things would they miss in these instructions if they're not familiar with some specific wording, etc. Signed-off-by: Elliot J. Voris <elliot@voris.me>
- Clear up some comments - Move the Tours entry to the more appropriate folder "views"
|
The tour idea is great, @Kanaye ! Thank you very much for starting the conversation in this PR! We are in the middle of refactoring Lab to match our other frontend projects, so the Redux implementation could be an option. Would you like to give it a try? No need to write code just yet, but a high-level idea could be a good start. The code structure eventually will be the same as in the Account Viewer. It's also OK to say that we should figure this out ourselves when the time comes. 馃槃 I like your suggestion to use the same Adding tests would be awesome, but we can probably do that later. The same goes for style tweaks. Thanks again for your work on this! We understand that you're busy, so please take your time with any updates. 馃檶 馃殌 |
This is a more or less "prototype" version to pitch the idea.
Most of the work I've done started at Meridian 2021's Docsprint.
You can find a demo of the current state here.
The idea 馃挕
Most developers starting their journey into the Stellar Network will sooner or later meet Laboratory.
While Laboratory is an awsome tool, it can be hard to wrap your head around at first.
So a more or less interactive Tutorial/Tour should give people a headstart on where they need to look out for specific features.
I could go deep into Labs features but for now it's a very basic overview over the different pages. We could expand it later as far as needed.
The implementation 鈿欙笍
I've seen (non open source) tour components build in react, but all of them have/had trouble with steps across js-chunks and blow up the js bundle size even when they're not used by the user.
For this prototype I'm using Sheperd, a well known library for Tour overlays.
The js is dynamically import()-ed when the tour is started, the only overhead loaded every time is shepherds css as I did't get around to lookup how I could dynamically import it without breaking jest.
Open TODOs / Things to discuss 馃敡
Most of this could be replaced by using the redux store, as this code is fairly ugly and easy to break.
But manipulating the store could lead to different behavior of the tour and the real UI elements.
data-tour-anchorto make it more obvious that this element is part of the tour.I'll happily continue work on this, but it may take time as I'm fairly busy.
But I'd love to hear thought and feedback on the idea, my points from above and anything else implementation related.