Docs: Add StackBlitz edit button for examples

[julien-deramond]

Related issues

Closes #36857

Description

This PR suggests to add a StackBlitz edit button for each Bootstrap example.

TODO: add more details to explain the technical solution

Motivation & Context

TODO

Type of changes

• New feature (non-breaking change which adds functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly

Live previews

• Docs > Examples

Manual tests

For each example, try the StackBlitz edit button and then check if the rendering is the same as within our docs: CSS, JS, etc.

• Album // Album RTL
• Blog // Blog RTL
• Carousel // Carousel RTL
• Cheatsheet // Cheatsheet RTL
• Checkout // Checkout RTL
• Cover
  • ⚠️ Missing .h-100 for html.
• Dashboard // Dashboard RTL
  • ⚠️ Doesn't seem to work because index.js in StackBlitz is executed before the scripts in <script> (index.html)
• Dropdowns
• Features
• Footers
• Grid
• Headers
• Heroes
• Jumbotron
• List groups
• Modals
• Navbar bottom
• Navbar fixed
• Navbar static
• Navbars
• Navbars offcanvas
• Offcanvas navbar
• Pricing
• Product
• Sidebars
• Sign-in
• Starter template
• Sticky footer
  • ⚠️ Can't work because it needs class="h-100" on the html tag which is not possible in StackBlitz since this class is overriden. Do we remove the StackBlitz edit button?
• Sticky footer navbar

Remaining things to do

• Handle 404 errors when using fetch
• Handle extra JS files
• Handle RTL (CSS)
• Handle RTL (JS)
• Check how to handle relative URL like /docs/5.2/assets/brand/bootstrap-logo.svg in the body
• Rebase this branch onto main when Rename examples CSS/JS files for consistency #37267 will be merged
• If Fix accessibility of examples buttons #37498 is merged, propagate the same modification in this PR
• Remove the bootstrap-bundle.min.js in `<script> for navbars example for example; it causes an issue where the burger menu can't be closed
• Clean up the code
• Remove inline style for the button
• Check if StackBlitz can format the "uploaded" files (e.g. style.css)
• Check all examples

[julien-deramond]

Before going further in the details of this PR, what do you think @twbs/js-review about this suggestion?

[GeoSot]

@julien-deramond it would help a lot if you are able to separate the renaming changes, and continue with the functionality additions,

[julien-deramond]

@julien-deramond it would help a lot if you are able to separate the renaming changes, and continue with the functionality additions,

Yes, if you're OK with the renaming for the consistency (and it's a bit mandatory to have a generic approach for those buttons), I can create a separate PR right now and then work on the addition of the StackBlitz edit buttons.

[GeoSot]

At least for me, I prefer it, as it helps on files searching too

[XhmikosR]

Isn't this duplicated in another layout file?

If so, we should deduplicate common code because it's a significant amount of it. Ideally, the inline JS should go into external JS files, but it won't be easy if we need Hugo to process them.

So, at least deduplicating common StackBlitz layout code this would be an improvement.