diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index b267bfb6f2a4f081efc8d77a2ce9404eb753fcfc..1719ed9f2a7179db453ef42b01589803f5ba9938 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -125,17 +125,24 @@
element.insertAdjacentHTML('beforebegin', btnHtml)
})
- document.querySelectorAll('.btn-clipboard')
- .forEach(function (btn) {
- var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle })
-
- btn.addEventListener('mouseleave', function () {
- // Explicitly hide tooltip, since after clicking it remains
- // focused (as it's a button), so tooltip would otherwise
- // remain visible until focus is moved away
- tooltipBtn.hide()
- })
+ /**
+ *
+ * @param {HTMLButtonElement} btn
+ * @param {string} title
+ */
+ function snippetButtonTooltip(btn, title) {
+ var tooltipBtn = new bootstrap.Tooltip(btn, { title: title })
+
+ btn.addEventListener('mouseleave', function () {
+ // Explicitly hide tooltip, since after clicking it remains
+ // focused (as it's a button), so tooltip would otherwise
+ // remain visible until focus is moved away
+ tooltipBtn.hide()
})
+ }
+
+ snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard')
+ snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz')
var clipboard = new ClipboardJS('.btn-clipboard', {
target: function (trigger) {
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 83b9a8b9e5042fc46f25a18da0cc508ff75219b0..b2b0854dc4155ce233898f2d2e2d0a0d512fb621 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -2,7 +2,8 @@
//
// JS-based `Copy` buttons for code snippets.
-.bd-clipboard {
+.bd-clipboard,
+.bd-edit {
position: relative;
display: none;
float: right;
@@ -16,7 +17,8 @@
}
}
-.btn-clipboard {
+.btn-clipboard,
+.btn-edit {
position: absolute;
top: .65rem;
right: .65rem;
@@ -25,6 +27,7 @@
padding: .25rem .5rem;
@include font-size(.65em);
color: $primary;
+ white-space: nowrap;
background-color: $white;
border: 1px solid;
@include border-radius();
@@ -35,3 +38,7 @@
background-color: $primary;
}
}
+
+.btn-edit {
+ right: 3.65rem;
+}
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
index d25add3ff44e1c9f9d2ab42e63bfed04ddab3818..0724a39ee10845303df3420c94c83600735e4d0e 100644
--- a/site/layouts/partials/scripts.html
+++ b/site/layouts/partials/scripts.html
@@ -6,6 +6,7 @@
{{ if eq .Page.Layout "docs" -}}
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
{{- end }}
{{- $vendor := resources.Match "js/vendor/*.js" -}}
@@ -18,3 +19,47 @@
{{- end }}
<script src="{{ $docsJs.Permalink | relURL }}"></script>
+
+{{ if eq .Page.Layout "docs" -}}
+<script>
+ // Open in StackBlitz logic
+ document.querySelectorAll('.btn-edit')
+ .forEach(function (btn) {
+ btn.addEventListener('click', function (event) {
+ var htmlSnippet = event.target.closest('.bd-content').querySelector('.bd-example').innerHTML
+
+ StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
+ })
+ })
+
+ StackBlitzSDK.openBootstrapSnippet = function(snippet) {
+ var project = {
+ files: {
+ 'index.html': `<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link href="{{ .Site.Params.cdn.css }}" rel="stylesheet">
+ <title>Bootstrap Example</title>
+ </head>
+ <body>
+
+ <!-- Example Code -->
+${snippet.replace(/^/gm, ' ')}
+ <!-- End Example Code -->
+
+ <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
+ </body>
+</html>`
+ },
+ title: 'Bootstrap Example',
+ description: 'Official example from ' + window.location.href,
+ template: 'html',
+ tags: ['bootstrap']
+ }
+
+ StackBlitzSDK.openProject(project, { openFile: 'index.html' })
+ }
+</script>
+{{- end }}
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 0592adc6b5f75e9230612056ab6f6592f0ee16f1..a808c2589afd45b7fbf31c2120ff4088a5cc6669 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -22,6 +22,9 @@
{{- end -}}
{{- if eq $show_markup true -}}
+ <div class="bd-edit">
+ <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">Try it</button>
+ </div>
{{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}