Add an example tour using Shepherd.js

[llewelld]

Adds an example tour using Shepherd.js and FloatingUI, to test out the capabilities of Shepherd.js. The content and coding is just for testing: in no way final!

For Shepherd.js, see: https://shepherdjs.dev/

My immediate impression is that a nice aspect of Shepherd.js is that all of the tour functionality can be added using Javascript and so can be kept entirely separate from the main HTML and Javascript for the page. The only changes I needed to make to the page itself were to add ids to elements used in the tour that didn't already have them.

This means that once the user has finished the tutorial, we can easily disentangle it from the page and potentially even serve them pages that don't include it at all; removing the additional overhead.

This is just for testing and comparison. I'll put together an equivalent really simple tour using https://tourguidejs.com/ so we can compare the two.

Contributes to #535.

[github-actions[bot]]

Coverage report

The coverage rate went from 98.9% to 98.9% :arrow_down:

None of the new lines are part of the tested code. Therefore, there is no coverage data about them.

[gedankenstuecke]

Wow, that's really cool! I think the ability to encapsulate the whole tutorial and then not load the whole thing any longer once a user has done the tutorial!

One thing we should check for eventually is if there is a way to/how to display those tutorial boxes more actively for smaller screens/mobile but we can do that once we have looked at the options!

[llewelld]

Rebased.

[llewelld]

how to display those tutorial boxes more actively for smaller screens

Oh, that's nasty. I'll try to see if there's some Shepherd.js configuration option or CSS tweak we can use to improve that.

[llewelld]

Rebased.

[gedankenstuecke]

Yeah, alternatively we can check if if there's a way within Sheperd.js to detect the size of the viewport and only provide the tutorial on the larger viewports

[llewelld]

See #575 for comparison with TourGuide JS.