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 /site/layouts | |
| 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>
Diffstat (limited to 'site/layouts')
| -rw-r--r-- | site/layouts/partials/scripts.html | 45 | ||||
| -rw-r--r-- | site/layouts/shortcodes/example.html | 3 |
2 files changed, 48 insertions, 0 deletions
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 "" -}} |