Bootstrap Example

From 645f95584551409660fcd9b990fc24caa0327df5 Mon Sep 17 00:00:00 2001 From: Puru Vijay <47742487+PuruVJ@users.noreply.github.com> Date: Wed, 9 Mar 2022 21:02:58 +0530 Subject: docs: add a StackBlitz "Try It" button in code examples (#35644) Co-authored-by: GeoSot Co-authored-by: XhmikosR --- site/layouts/partials/scripts.html | 45 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index d25add3ff..0724a39ee 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -6,6 +6,7 @@ {{ if eq .Page.Layout "docs" -}} + {{- end }} {{- $vendor := resources.Match "js/vendor/*.js" -}} @@ -18,3 +19,47 @@ {{- end }} + +{{ if eq .Page.Layout "docs" -}} + +{{- end }} -- cgit v1.2.3 From bef4f3b6c6d04ff8363ead0b1d9a88aad4b0a170 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 30 Mar 2022 14:14:00 +0200 Subject: Fix StackBlitz edit feature by selecting the closest example --- site/layouts/partials/scripts.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 0724a39ee..47cc55dff 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -26,7 +26,7 @@ document.querySelectorAll('.btn-edit') .forEach(function (btn) { btn.addEventListener('click', function (event) { - var htmlSnippet = event.target.closest('.bd-content').querySelector('.bd-example').innerHTML + var htmlSnippet = event.target.closest('.bd-edit').previousSibling.innerHTML StackBlitzSDK.openBootstrapSnippet(htmlSnippet) }) -- cgit v1.2.3 From fe257823ecca31cf5e582e9b8380a0ad0204075e Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Tue, 12 Apr 2022 08:07:25 -0700 Subject: Use Babel and ES6 in docs JS files (#31607) * Pass docs js through Babel * Use ES6 in docs js * Only run babel on src files * Allow babel in Hugo * Update scripts.html * Inherit from the root .eslintrc.json * Use `Array.from` * Drop Babel from docs * Prefer template * replace IIFE with arrow functions Co-authored-by: XhmikosR Co-authored-by: GeoSot --- site/layouts/partials/scripts.html | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 47cc55dff..2b70521f5 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -23,19 +23,16 @@ {{ if eq .Page.Layout "docs" -}} + {{- end }} -- cgit v1.2.3 From 8b85267739e4bee63f13dfa14a94f94926b4fd7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 26 May 2022 23:29:08 +0200 Subject: Fix StackBlitz examples by embedding snippets.js when needed (#36352) * Fix StackBlitz examples by embedding snippets.js when needed * Fix Popovers * Fix tooltips * Fix Toasts * Add comment sections * Fix Alerts * Indeterminate heckboxes + classes handling * Nothing to do for links * Fix modals * Nothing to do for Offcanvas * Remove correctly .bd-example * Add body .p-3 for all StackBlitz examples --- site/layouts/partials/scripts.html | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 56513c7ff..5535d6439 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -26,11 +26,16 @@ document.querySelectorAll('.btn-edit').forEach(btn => { btn.addEventListener('click', event => { const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML - StackBlitzSDK.openBootstrapSnippet(htmlSnippet) + + // Get extra classes for this example except '.bd-example' + const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).filter(x => x !== 'bd-example').join(' ') + + const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-js-snippet') + StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes) }) }) - StackBlitzSDK.openBootstrapSnippet = snippet => { + StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => { const markup = ` @@ -38,24 +43,25 @@ Bootstrap Example + <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"> - + -${snippet.replace(/^/gm, ' ')} +${htmlSnippet.replace(/^/gm, ' ')} - - <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"> ` + const jsSnippetContent = jsSnippet ? '{{ os.ReadFile "site/assets/js/snippets.js" }}' : null const project = { files: { - 'index.html': markup + 'index.html': markup, + 'index.js': jsSnippetContent }, title: 'Bootstrap Example', description: `Official example from ${window.location.href}`, - template: 'html', + template: jsSnippet ? 'javascript' : 'html', tags: ['bootstrap'] } -- cgit v1.2.3 From cfabeb71fa41a7e4438a8f769cad5286f749d9a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 20 Jun 2022 16:19:47 +0200 Subject: Fix StackBlitz Popovers and Tooltips examples (#36449) * Fix StackBlitz Popovers and Tooltips examples * Rename shortcode example parameters * Reorder example shortcode doc params + fix Cspell * Remove 'stackblitz' param + use data-bs-title instead of title * Update site/layouts/partials/callout-warning-data-bs-title-vs-title.md Co-authored-by: Mark Otto Co-authored-by: Mark Otto --- site/layouts/partials/scripts.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 5535d6439..477ba76e5 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -30,7 +30,7 @@ // Get extra classes for this example except '.bd-example' const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).filter(x => x !== 'bd-example').join(' ') - const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-js-snippet') + const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet') StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes) }) }) -- cgit v1.2.3 From 9cf0e9b7355e337f76fccf9eafc2f3232f09f357 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 28 Jun 2022 07:31:47 +0200 Subject: Fix StackBlitz examples needing docs CSS (#36637) --- site/layouts/partials/scripts.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 477ba76e5..3378a230e 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -27,8 +27,8 @@ btn.addEventListener('click', event => { const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML - // Get extra classes for this example except '.bd-example' - const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).filter(x => x !== 'bd-example').join(' ') + // Get extra classes for this example + const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ') const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet') StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes) @@ -42,10 +42,11 @@ + Bootstrap Example <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"> - + ${htmlSnippet.replace(/^/gm, ' ')} -- cgit v1.2.3 From 4315801856b690d30091e804fb1de5d6233fe306 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mewen=20Le=20H=C3=B4?= <92363071+MewenLeHo@users.noreply.github.com> Date: Thu, 6 Jul 2023 07:10:13 +0200 Subject: Add docs search to homepage (#38850) * Compliance to Success Criterion 3.2.3 Consistent Navigation * Update docs-navbar.html --------- Co-authored-by: Mark Otto --- site/layouts/partials/scripts.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 3378a230e..dc92d30e5 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -4,8 +4,9 @@ {{- end }} -{{ if eq .Page.Layout "docs" -}} + +{{ if eq .Page.Layout "docs" -}} {{- end }} -- cgit v1.2.3 From 58880cfbaccd5438ddb735eed5cec6f29bfbe017 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 22 Aug 2023 15:19:51 +0300 Subject: Remove useless crossorigin="anonymous" attributes --- site/layouts/partials/scripts.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index dc92d30e5..facb7d384 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -1,5 +1,5 @@ {{ if eq hugo.Environment "production" -}} - + {{ else -}} {{- end }} -- cgit v1.2.3 From 930740afbc87931475df4785c9e13e0818e8af66 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 8 Mar 2024 12:41:17 +0200 Subject: Switch to using `hugo.IsProduction` (#39763) --- site/layouts/partials/scripts.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index facb7d384..046f659a9 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -1,4 +1,4 @@ -{{ if eq hugo.Environment "production" -}} +{{ if hugo.IsProduction -}} {{ else -}} @@ -15,7 +15,7 @@ {{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version "assets/js/docs.js" -}} {{- $docsJs := append $js $vendor | resources.Concat $targetDocsJSPath -}} -{{- if eq hugo.Environment "production" -}} +{{- if hugo.IsProduction -}} {{- $docsJs = $docsJs | resources.Minify -}} {{- end }} -- cgit v1.2.3 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/layouts/partials/scripts.html | 83 ++++++++++---------------------------- 1 file changed, 22 insertions(+), 61 deletions(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 046f659a9..00c5c9782 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -4,70 +4,31 @@ {{- end }} - - -{{ if eq .Page.Layout "docs" -}} - -{{- end }} - -{{- $vendor := resources.Match "js/vendor/*.js" -}} -{{- $js := resources.Match "js/*.js" -}} -{{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version "assets/js/docs.js" -}} -{{- $docsJs := append $js $vendor | resources.Concat $targetDocsJSPath -}} +{{- $esbuildOptions := dict "target" "es2019" -}} +{{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version -}} {{- if hugo.IsProduction -}} - {{- $docsJs = $docsJs | resources.Minify -}} + {{- $esbuildOptions = merge $esbuildOptions (dict "minify" "true") -}} {{- end }} - - -{{ if eq .Page.Layout "docs" -}} - - -${htmlSnippet.replace(/^/gm, ' ')} - - -` +{{- if (ne .Page.Layout "examples") -}} +{{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/search.js") }} + +{{- end -}} - const jsSnippetContent = jsSnippet ? '{{ os.ReadFile "site/assets/js/snippets.js" }}' : 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'] - } - - StackBlitzSDK.openProject(project, { openFile: 'index.html' }) - } - -{{- end }} +{{ if eq .Page.Layout "docs" -}} +{{- /* Disable minify options for snippets.js so that the file's readable on StackBlitz */ -}} +{{- $snippetsFile := resources.Get "js/snippets.js" | js.Build (merge $esbuildOptions (dict "minify" "false")) -}} +{{- $esbuildParams := dict + "cssCdn" .Site.Params.cdn.css + "jsBundleCdn" .Site.Params.cdn.js_bundle + "docsVersion" .Site.Params.docs_version + "jsSnippetFile" $snippetsFile.Content +-}} +{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}} +{{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }} + +{{- end -}} -- cgit v1.2.3 From 45fe28c5a6ed88d1a661355349aed799a79ed0fe Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 8 Mar 2024 12:53:43 +0200 Subject: docs: use defer when possible for JS --- site/layouts/partials/scripts.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 00c5c9782..63889a9ea 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -1,7 +1,7 @@ {{ if hugo.IsProduction -}} - + {{ else -}} - + {{- end }} {{- $esbuildOptions := dict "target" "es2019" -}} @@ -12,11 +12,11 @@ {{- end }} {{- $applicationJs := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/application.js") }} - + {{- if (ne .Page.Layout "examples") -}} {{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/search.js") }} - + {{- end -}} {{ if eq .Page.Layout "docs" -}} @@ -30,5 +30,5 @@ -}} {{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}} {{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }} - + {{- end -}} -- cgit v1.2.3 From f7f0026e4af2fee210b664e145dfe55bd12b7deb Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 13 Mar 2024 08:38:53 +0200 Subject: docs: move algolia config to hugo config --- site/layouts/partials/scripts.html | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'site/layouts/partials/scripts.html') diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 63889a9ea..e224c4b37 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -15,6 +15,12 @@ {{- if (ne .Page.Layout "examples") -}} +{{- $esbuildParams := dict + "apiKey" .Site.Params.algolia.apiKey + "appId" .Site.Params.algolia.appId + "indexName" .Site.Params.algolia.indexName +-}} +{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}} {{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/search.js") }} {{- end -}} -- cgit v1.2.3