diff options
| author | Puru Vijay <[email protected]> | 2022-03-09 21:02:58 +0530 |
|---|---|---|
| committer | GitHub <[email protected]> | 2022-03-09 17:32:58 +0200 |
| commit | 645f95584551409660fcd9b990fc24caa0327df5 (patch) | |
| tree | 7c2e06398708c563cecd43c5b9df2d01188093fc /site/layouts/partials/scripts.html | |
| parent | 7e5a8016ba557641ee93b38aed4482a1360b64af (diff) | |
| download | bootstrap-645f95584551409660fcd9b990fc24caa0327df5.tar.xz bootstrap-645f95584551409660fcd9b990fc24caa0327df5.zip | |
docs: add a StackBlitz "Try It" button in code examples (#35644)
Co-authored-by: GeoSot <[email protected]>
Co-authored-by: XhmikosR <[email protected]>
Diffstat (limited to 'site/layouts/partials/scripts.html')
| -rw-r--r-- | site/layouts/partials/scripts.html | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index d25add3ff..0724a39ee 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 }} |