Orange-Boosted-Bootstrap/site/src/assets/stackblitz.js at 6b7fe5c9dd2cc32dd044e69163651f41c39f02f8 · Orange-OpenSource/Orange-Boosted-Bootstrap · GitHub

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// 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 2026 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'
// eslint-disable-next-line import/no-unresolved
import snippetsContent from './partials/snippets.js?raw'

// These values will be replaced by Astro's Vite plugin
const CONFIG = {
  cssCdn: '__CSS_CDN__',
  cssBootstrapCdn: '__CSS_BOOTSTRAP_CDN__',
  jsBundleCdn: '__JS_BUNDLE_CDN__',
  docsVersion: '__DOCS_VERSION__',
  brand: '__BRAND__'
}

// 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')
    const cssBootstrap = codeSnippet.closest('[data-sb-css-bootstrap]')
    // Get extra classes for this example
    const classes = Array.from(exampleEl.classList).join(' ')

    openOUDSWebSnippet(htmlSnippet, jsSnippet, classes, cssBootstrap)
  })
})

const openOUDSWebSnippet = (htmlSnippet, jsSnippet, classes, cssBootstrap) => {
  const spriteUrl = `https://web.unified-design-system.orange.com/${CONFIG.brand}/docs/${CONFIG.docsVersion}/assets/img/ouds-web-sprite.svg`
  const indexHtml = `<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="${cssBootstrap ? CONFIG.cssBootstrapCdn : CONFIG.cssCdn}" rel="stylesheet" />
    <link href="https://web.unified-design-system.orange.com/docs/${CONFIG.docsVersion}/assets/css/docs.css" rel="stylesheet" />
    <link rel="preload" href="${spriteUrl}" as="image" type="image/svg+xml" crossorigin="anonymous">
    <title>OUDS Web Example</title>
    <${'script'} defer src="${CONFIG.jsBundleCdn}"></${'script'}>
  </head>
  <body class="p-2xlarge m-none border-none ${classes}">
    <!-- Example Code -->
  ${htmlSnippet.trimStart().replace(/^/gm, '    ').replace(/^ {4}$/gm, '').replaceAll(/xlink:href="\/.+\/ouds-web-sprite\.svg/g, `xlink:href="${spriteUrl}`).trimEnd()}
    <!-- End Example Code -->
  </body>
</html>`

  // Modify the snippets content to convert export default to a variable and invoke it
  let modifiedSnippetsContent = ''

  if (jsSnippet) {
    // Replace export default with a variable assignment
    modifiedSnippetsContent = snippetsContent.replace(
      'export default () => {',
      'const snippets_default = () => {'
    )

    // Add IIFE wrapper and execution
    modifiedSnippetsContent = `(() => {
  ${modifiedSnippetsContent}
  // <stdin>
  snippets_default();
})();`
  }

  const project = {
    files: {
      'index.html': indexHtml,
      ...(jsSnippet && { 'index.js': modifiedSnippetsContent })
    },
    title: 'OUDS Web Example',
    description: `Official example from ${window.location.href}`,
    template: jsSnippet ? 'javascript' : 'html',
    tags: ['ouds-web']
  }

  sdk.openProject(project, { openFile: 'index.html' })
}