diff options
| author | XhmikosR <[email protected]> | 2024-03-08 12:43:44 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2024-03-19 11:25:15 +0200 |
| commit | 24f749cb768b7d7830ed9bc7b3b38d35dbbccffd (patch) | |
| tree | bc752763aad4e8c36f84a73d2a0e751a364a0e8e /site/assets/js/stackblitz.js | |
| parent | e340674d06f1c5b054eb5395bac85a3cf36d3463 (diff) | |
| download | bootstrap-24f749cb768b7d7830ed9bc7b3b38d35dbbccffd.tar.xz bootstrap-24f749cb768b7d7830ed9bc7b3b38d35dbbccffd.zip | |
docs: bundle assets with Hugo
Also:
* load any docs' third-party dependencies from node_modules (except for examples)
* exclude docsearch from layouts that don't use it
* preconnect to algolia only when not examples layout
* switch to `RelPermalink`
* refactor JS assets into partials
Diffstat (limited to 'site/assets/js/stackblitz.js')
| -rw-r--r-- | site/assets/js/stackblitz.js | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js new file mode 100644 index 000000000..c6f44b0f4 --- /dev/null +++ b/site/assets/js/stackblitz.js @@ -0,0 +1,67 @@ +// 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(' ') + + sdk.openBootstrapSnippet(htmlSnippet, jsSnippet, classes) + }) +}) + +sdk.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => { + const markup = `<!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'} src="${jsBundleCdn}"></${'script'}> + </head> + <body class="p-3 m-0 border-0 ${classes}"> + + <!-- Example Code --> +${htmlSnippet.replace(/^/gm, ' ')} + <!-- End Example Code --> + </body> +</html>` + + const jsSnippetContent = jsSnippet ? jsSnippetFile : null + const project = { + files: { + 'index.html': markup, + 'index.js': jsSnippetContent + }, + title: 'Bootstrap Example', + description: `Official example from ${window.location.href}`, + template: jsSnippet ? 'javascript' : 'html', + tags: ['bootstrap'] + } + + sdk.openProject(project, { openFile: 'index.html' }) +} |