Add support for tab containers

[ghys]

Uses https://github.com/pskordilakis/vuepress-tabs.

Related to openhab/website#183.

Update dependencies.

Signed-off-by: Yannick Schaus github@schaus.net

[netlify]

Thanks for your pull request to the openHAB documentation! The result can be previewed at the URL below (this comment and the preview will be updated if you add more commits).

Built with commit 54aec0d

https://deploy-preview-1023--openhab-docs-preview.netlify.com

[ghys]

@openhab-5iver @Confectrician could you have a look at
https://deploy-preview-1023--openhab-docs-preview.netlify.com/docs/configuration/jsr223.html#just-testing-the-tabs
and check whether or not it fits your requirements for openhab/website#183?
One functionality which doesn't appear possible is to switch all tabs on the same page at once when you click one...
If you approve this addition I will remove the test paragraph before merging.

[5iver]

I won't be able to look from my computer for a couple hours, but this is from Firefox on mobile...

... not very tabby, but SO much better than nothing... thank you! Sphinx uses Pygments for code highlighting, so I'd setup a style that mimics VS Code.

[ghys]

Heh, indeed, on desktops it looks better. Since there'll be room in most cases to display the tabs inline even on phones, it makes sense to cancel the responsive stuff; could probably be done by tweaking or overriding the provided styles.

[5iver]

Finally got to look at this (Firefox desktop)... and this is fantastic! The outer border is a little lighter (IMO too light), but it looks identical to what you get with Sphinx. Can it do nested tabs? Please merge!

I realize this is really a separate topic, but what is being used for the code highlighting? It would be nice if it looked more like VS Code. Here's the Pygment style I'd mentioned... it's not perfect, but might help with the colors.

[ghys]

what is being used for the code highlighting

https://highlightjs.org/static/demo/

I can't seem to find the style VuePress uses by default, but there seem to be a VS style as well.

[ghys]

Ok should be good for merging. (minus the test paragraph)
I'll have to add an equivalent PR to the website side.

[5iver]

Looks good on mobile now too!

[Confectrician]

I had a quick look on desktop and its fantastic. 🙂

[ghys]

Ok I have nothing more to add, let's merge this then.
You can work on PRs here and get the preview with tabs, but don't merge them until the website is done. :)