diff options
| author | Puru Vijay <47742487+PuruVJ@users.noreply.github.com> | 2022-03-09 18:32:58 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-09 18:32:58 +0300 |
| commit | 645f95584551409660fcd9b990fc24caa0327df5 (patch) | |
| tree | 7c2e06398708c563cecd43c5b9df2d01188093fc | |
| parent | 7e5a8016ba557641ee93b38aed4482a1360b64af (diff) | |
docs: add a StackBlitz "Try It" button in code examples (#35644)
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
| -rw-r--r-- | site/assets/js/application.js | 27 | ||||
| -rw-r--r-- | site/assets/scss/_clipboard-js.scss | 11 | ||||
| -rw-r--r-- | site/layouts/partials/scripts.html | 45 | ||||
| -rw-r--r-- | site/layouts/shortcodes/example.html | 3 |
4 files changed, 74 insertions, 12 deletions
diff --git a/site/assets/js/application.js b/site/assets/js/application.js index b267bfb6f2..1719ed9f2a 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 83b9a8b9e5..b2b0854dc4 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 d25add3ff4..0724a39ee1 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 0592adc6b5..a808c2589a 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 "" -}} |