mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

docs: add a StackBlitz "Try It" button in code examples (#35644)

Browse Source 
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Puru Vijay
2022-03-09 21:02:58 +05:30
committed by GitHub
parent 7e5a8016ba
commit 645f955845
4 changed files with 73 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
site/layouts/partials/scripts.html
View File

@@ -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 }}