docs: add a StackBlitz "Try It" button in code examples

[PuruVJ]

Based on #35188, this PR adds the "Edit" button on code examples, clicking which will open up stackblitz editor in new tab with the code example in mind.

Here's a video:

CleanShot.2022-01-03.at.00.29.35.mp4

Preview: https://deploy-preview-35644--twbs-bootstrap.netlify.app/

[PuruVJ]

Can anyone review this?

[GeoSot]

Hello @PuruVJ .

Thank you for your contribution. We may see that we are only a few people here for reviews, so please have patience

I did a check on the netlify preview and got this (on several examples)

[PuruVJ]

That's strange. I'll look into it

[PuruVJ]

@GeoSot can you try disabling your adblocker/Brave shields on stackblitz?

Cuz it is working perfectly for me 🤔

[GeoSot]

To be honest, I love it 😍

Wish the rest of the team have the same opinion
@twbs/css-review
@twbs/js-review

@GeoSot can you try disabling your adblocker/Brave shields on stackblitz?
Cuz it is working perfectly for me thinking

It seems related to firefox on both linux & win10 systems. Edge & chrome are fine

[XhmikosR]

I don't like the fact we load this in all pages and it definitely needs some more tweaks...

[XhmikosR]

Also, the fact that this doesn't work with Firefox is a huge downside to the point we shouldn't land it unless fixed.

[PuruVJ]

@XhmikosR True, it makes no sense if it can't work on the major browsers. I'll look into it

[PuruVJ]

Can you recommend a place I can put the open in stackblitz logic such that it will load only in the right pages?

And, even if we aren't able to selectively load it, the SDK is only 2.1kb to load, so for now it won't be as critical of an issue

[ffoodd]

A few things to improve and consider. The feature looks like a good idea IMHO. :)

[XhmikosR]

Can you recommend a place I can put the open in stackblitz logic such that it will load only in the right pages?

And, even if we aren't able to selectively load it, the SDK is only 2.1kb to load, so for now it won't be as critical of an issue

It's not a matter of size only. JS affects execution time and everything. I find no reason to include it everywhere.

Also, we should load the script from our server which is where we are loading all assets from.

[PuruVJ]

Alright. So can you help me with where to put the script? Or am I on my own for that part?

I have a way in mind to selectively load but it's horribly hacky and I wanna get suggestions before from people who know the codebase better than me 🙂

[XhmikosR]

Please don't mark this as ready. It's broken right now.

[XhmikosR]

The title is still wrong AFAICT.

[PuruVJ]

The title is good now. I just checked on my own. Can you share ss of what yur seeing?

[XhmikosR]

Copy to Clipboard is shown on the Try it button as one can see in the preview.

[PuruVJ]

I am seeing this locally. Can you share the netlify preview?

CleanShot.2022-03-02.at.14.34.18.mp4

[XhmikosR]

https://deploy-preview-35644--twbs-bootstrap.netlify.app/docs/5.1/components/accordion/

[PuruVJ]

Oof my bad. Just fixed now

[XhmikosR]

Cool, it works now. One last thing I notice is that the Try button's tooltip is still shown even after closing the StackBlitz tab.

[XhmikosR]

...and for some reason the HTML tab is empty on Edge Chromium, and I get nothing loaded on Firefox. These 2 issues are probably not related to this PR, something looks broken on their side.

[GeoSot]

One last thing I notice is that the Try button's tooltip is still shown even after closing the StackBlitz tab.

I tried to handle it, using a fabulous timeout. It closes the tip, opens the new window... and we are fine.
However when we close the stackblitz tab, and return to BS tab we have left of, the mouse is still on the same spot, so js gets the hover event and re-shows the tooltip.
I don't think we can do a lot on this

Hope you don't mind, I pushed two minor changes. One typo and the other forces the stackblitz editor to open the file

In short, if we do not want any other optimizations, I think we are good to go 😮

(The only optimization I can think of, is to use the stackblitz post api , instead of SDK (only 2kb), but I suppose we can leave this way)

[PuruVJ]

Hi, might I ask what is the blocker in merging this 🙂

[XhmikosR]

I'd still like the Firefox Private Window to be fixed somehow upstream, but for now I don't think there's anything we can do here :/

We can revisit loading and stuff later if needed.

@PuruVJ Thanks for your patience and your contribution!