From 79509ea264725eea45e048a2233aef06c5c06148 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Fri, 25 Aug 2023 15:42:49 +0200 Subject: [PATCH 1/3] Provide the color mode button in every Stackblitz example --- site/layouts/partials/scripts.html | 65 ++++++++++++++++++++++++++++-- 1 file changed, 61 insertions(+), 4 deletions(-) diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index dc92d30e5ac9..3ed9f8ad4242 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -38,7 +38,7 @@ StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => { const markup = ` - + @@ -46,24 +46,81 @@ Bootstrap Example <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"> + <${'script'} src="https://getbootstrap.com/docs/{{ .Site.Params.docs_version }}/assets/js/color-modes.js"> ${htmlSnippet.replace(/^/gm, ' ')} + + + + + + + + + + + + + + + + + + + +
+ + +
+ + ` - const jsSnippetContent = jsSnippet ? '{{ os.ReadFile "site/assets/js/snippets.js" }}' : null + const colorModeSnippet = '{{ os.ReadFile "site/static/docs/5.3/assets/js/color-modes.js" }}' + const jsSnippetContent = jsSnippet ? '{{ os.ReadFile "site/assets/js/snippets.js" }}' + colorModeSnippet : colorModeSnippet const project = { files: { 'index.html': markup, - 'index.js': jsSnippetContent + 'index.js': jsSnippetContent.replace(/}\)\(\).*\(\(\) => {.*'use strict'/gms, '').replace(/window.add.*\(\) => {([\s\S]*)}\)([\s\S]}\)\(\))/gm, '$1 $2') }, title: 'Bootstrap Example', description: `Official example from ${window.location.href}`, - template: jsSnippet ? 'javascript' : 'html', + template: 'javascript', tags: ['bootstrap'] } From c5ecb028c4d1e8de509d917ab6caaed49b08b93b Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 23 Oct 2023 11:40:35 +0200 Subject: [PATCH 2/3] Make it less intrusive --- site/layouts/partials/scripts.html | 161 +++++++++++++++++++---------- 1 file changed, 104 insertions(+), 57 deletions(-) diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 3ed9f8ad4242..4f22d7c692e2 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -46,77 +46,124 @@ Bootstrap Example <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"> - <${'script'} src="https://getbootstrap.com/docs/{{ .Site.Params.docs_version }}/assets/js/color-modes.js"> ${htmlSnippet.replace(/^/gm, ' ')} + +` - - - - - - - - - - - - - - - - + const colorModeMarkup = `document.querySelector('body').innerHTML += \` + + + + + + + + + + + + + + + + + +
+ +
    +
  • + -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
- - - -` + +
  • + +
    • +
  • + +
    • + + + +\` + +` const colorModeSnippet = '{{ os.ReadFile "site/static/docs/5.3/assets/js/color-modes.js" }}' - const jsSnippetContent = jsSnippet ? '{{ os.ReadFile "site/assets/js/snippets.js" }}' + colorModeSnippet : colorModeSnippet + const jsSnippetContent = jsSnippet ? 'import "./bootstrap-color-mode/color-mode.js";\n\n' + '{{ os.ReadFile "site/assets/js/snippets.js" }}' : 'import "./bootstrap-color-mode/color-mode.js";' const project = { files: { 'index.html': markup, - 'index.js': jsSnippetContent.replace(/}\)\(\).*\(\(\) => {.*'use strict'/gms, '').replace(/window.add.*\(\) => {([\s\S]*)}\)([\s\S]}\)\(\))/gm, '$1 $2') + 'index.js': jsSnippetContent, + 'bootstrap-color-mode/color-mode.js': colorModeMarkup + colorModeSnippet.replace(/\(\(\) => {.*'use strict'/gms, '').replace(/window.add.*\(\) => {([\s\S]*)}\)([\s\S]}\)\(\))/gm, '$1 $2').replace(/^}\)\(\)/gm, '') }, title: 'Bootstrap Example', description: `Official example from ${window.location.href}`, From 3795e305bcecddbf946c2be75684b162d4f514e2 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 23 Jul 2024 11:29:12 +0200 Subject: [PATCH 3/3] fix lint CI --- site/assets/js/stackblitz.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js index 6193e4dd78f8..8e128958ae0a 100644 --- a/site/assets/js/stackblitz.js +++ b/site/assets/js/stackblitz.js @@ -112,7 +112,7 @@ ${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').trimEnd \`; - ${jsColorModeFile.replace(/\(\(\) => {.*'use strict'/gms, '').replace(/window.add.*\(\) => {([\s\S]*)}\)([\s\S]}\)\(\))/gm, '$1 $2').replace(/^}\)\(\)/gm, '')}` + ${jsColorModeFile.replace(/\(\(\) => {.*'use strict'/gms, '').replace(/window.add.*\(\) => {([\S\s]*)}\)([\S\s]}\)\(\))/gm, '$1 $2').replace(/^}\)\(\)/gm, '')}` const jsSnippetContent = `import "./bootstrap-color-mode/color-mode.js";\n\n${jsSnippetFile}` const project = {