From 24f749cb768b7d7830ed9bc7b3b38d35dbbccffd Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 8 Mar 2024 12:43:44 +0200 Subject: 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 --- site/assets/js/stackblitz.js | 67 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 site/assets/js/stackblitz.js (limited to 'site/assets/js/stackblitz.js') 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 = ` + + + + + + + Bootstrap Example + <${'script'} src="${jsBundleCdn}"> + + + + +${htmlSnippet.replace(/^/gm, ' ')} + + +` + + 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' }) +} -- cgit v1.2.3