Add show/hide code inside the index.html (docs)

[guastallaigor]

ref #269

Description This adds a show/hide toggle button on top of each container in the index.html (docs). When it clicks on show it displays a <div> in the bottom of the respective container, showing the code. Inside this <div>, there's a "Copy" button, to copy the code to clipboard. When you click the "Copy" button, it displays a balloon that says "Copied!".

Compatibility N/A

Caveats There's a lot of things that could be better in a near future for this. This is just to have and easier access for the user to see/copy the code of each component, without having to use devtools or anything like that. But I think we can close #269 if/when this is merged, and later open another issue for improvements. Tested on Firefox and Chrome in Ubuntu 18.04 and added a few responsive adjustments.

Demo

[BcRikko]

It's so coool 🎉

But it's too complicated and it's too difficult to maintenance index.html. 😭 So I think that I'll rebuild index.html and so on from the ground up.

But I'm busy with bug fix, so please wait a moment. 🙏

[guastallaigor]

It's so coool

But it's too complicated and it's too difficult to maintenance index.html. So I think that I'll rebuild index.html and so on from the ground up.

But I'm busy with bug fix, so please wait a moment.

I agree @BcRikko, but the reason here is to have something to address the lack of code/copy for better UX in 1.1.0.

In my opinion this could be accepted (or changed some things, I don't know), and in 1.2.0 can be rebuilded for better maintenance and a better code in general the whole index.html file, because the idea is to release 1.1.0 ASAP, and have a great code for maintenance takes a lot more time that I unfortunately don't have at the moment. That's the best I could do with the time that I have :smile:

[BcRikko]

Oh, I see 👌 Just as you said 👍

[BcRikko]

@Kraven1 What are you trying to say? 🤔

[BcRikko]

@guastallaigor I fixed some codes. 🛠 Could you review these? 🙏

[guastallaigor]

@guastallaigor I fixed some codes. Could you review these?

@BcRikko Looking great with highlight.js and the right html syntax display! Thank you for this. I can't post a review in my on PR so I guess the comment is enough? :smile:

I've test it and I hope you don't mind but I fixed two alignment tags in the form and table component in the syntax display. But everything now is LGTM :+1: :rocket:

[BcRikko]

:tada: This PR is included in version 2.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: