..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66 | // NOTICE!!! Initially embedded in our docs this JavaScript
// file contains elements that can help you create reproducible
// use cases in StackBlitz for instance.
// In a real project please adapt this content to your needs.
// ++++++++++++++++++++++++++++++++++++++++++
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2024 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
import sdk from '@stackblitz/sdk'
// https://gohugo.io/hugo-pipes/js/#options
import {
cssCdn, docsVersion, jsBundleCdn, jsSnippetFile
} from '@params' // eslint-disable-line import/no-unresolved
// Open in StackBlitz logic
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const codeSnippet = event.target.closest('.bd-code-snippet')
const exampleEl = codeSnippet.querySelector('.bd-example')
const htmlSnippet = exampleEl.innerHTML
const jsSnippet = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
// Get extra classes for this example
const classes = Array.from(exampleEl.classList).join(' ')
openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
})
})
const openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
const indexHtml = `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="${cssCdn}" rel="stylesheet">
<link href="https://getbootstrap.com/docs/${docsVersion}/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} defer src="${jsBundleCdn}"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
<!-- Example Code Start-->
${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').trimEnd()}
<!-- Example Code End -->
</body>
</html>
`
const project = {
files: {
'index.html': indexHtml,
...(jsSnippet && { 'index.js': jsSnippetFile })
},
title: 'Bootstrap Example',
description: `Official example from ${window.location.href}`,
template: jsSnippet ? 'javascript' : 'html',
tags: ['bootstrap']
}
sdk.openProject(project, { openFile: 'index.html' })
}
|
|
