]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 958b610)
Docs: fix StackBlitz examples needing icons main-jd-fix-stackbliz-examples-needing-icons 39505/head
authorJulien Déramond <juderamond@gmail.com>
Mon, 18 Dec 2023 08:22:33 +0000 (09:22 +0100)
committerJulien Déramond <juderamond@gmail.com>
Mon, 18 Dec 2023 08:28:20 +0000 (09:28 +0100)
site/content/docs/5.3/helpers/icon-link.md patch | blob | blame | history
site/layouts/partials/scripts.html patch | blob | blame | history
site/layouts/shortcodes/example.html patch | blob | blame | history

diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md
index ec63c5b8c889f6b62aad54ca529d0bf559bcba3e..2274ed4635c67ad5a7edbd52c2d5e9cd9d931a8b 100644 (file)
--- a/site/content/docs/5.3/helpers/icon-link.md
+++ b/site/content/docs/5.3/helpers/icon-link.md
@@ -19,14 +19,14 @@ When icons are purely decorative, they should be hidden from assistive technolog
 
 Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.
 
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
 <a class="icon-link" href="#">
   <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
   Icon link
 </a>
 {{< /example >}}
 
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
 <a class="icon-link" href="#">
   Icon link
   <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
@@ -37,7 +37,7 @@ Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the
 
 Add `.icon-link-hover` to move the icon to the right on hover.
 
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
 <a class="icon-link icon-link-hover" href="#">
   Icon link
   <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
@@ -54,7 +54,7 @@ Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to chang
 
 Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable:
 
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
 <a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
   <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
   Icon link
@@ -63,7 +63,7 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS
 
 Customize the color by overriding the `--bs-link-*` CSS variable:
 
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
 <a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
   Icon link
   <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
@@ -80,7 +80,7 @@ Customize the icon link Sass variables to modify all icon link styles across you
 
 Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
 
-{{< example >}}
+{{< example stackblitz_add_icons="true" >}}
 <a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
   Icon link
   <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
index dc92d30e5ac90739aaed6457117d40f6bc09d030..94323c23352eea5682f128938202138c594f7ef2 100644 (file)
--- a/site/layouts/partials/scripts.html
+++ b/site/layouts/partials/scripts.html
@@ -32,11 +32,13 @@
       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)
+      const iconsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-icons-snippet')
+      StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, iconsSnippet, classes)
     })
   })
 
-  StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
+  StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, iconsSnippet, classes) => {
+    const icons = iconsSnippet ? `{{ os.ReadFile "site/layouts/partials/icons.html" }}` : ""
     const markup = `<!doctype html>
 <html lang="en">
   <head>
@@ -48,7 +50,7 @@
     <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
   </head>
   <body class="p-3 m-0 border-0 ${classes}">
-
+${icons.replace(/^/gm, '    ')}
     <!-- Example Code -->
 ${htmlSnippet.replace(/^/gm, '    ')}
     <!-- End Example Code -->
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index a162db521d49c0e2f9d269d54356f46695924e8a..f112e1651f45beccdcd95d44ee2db39af4544693 100644 (file)
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -7,12 +7,14 @@
     * lang: language used to display the code - default: "html"
     * show_markup: if the markup should be output in the HTML - default: `true`
     * show_preview: if the preview should be output in the HTML - default: `true`
+    * stackblitz_add_icons: if extra icons should be added to StackBlitz - default: `false`
     * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false`
 */ -}}
 
 {{- $id := .Get "id" -}}
 {{- $class := .Get "class" -}}
 {{- $lang := .Get "lang" | default "html" -}}
+{{- $stackblitz_add_icons := .Get "stackblitz_add_icons" | default false -}}
 {{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
@@ -31,7 +33,7 @@
       <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
         <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
         <div class="d-flex ms-auto">
-          <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
+          <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }}{{ with $stackblitz_add_icons }} data-sb-icons-snippet="{{ $stackblitz_add_icons }}"{{ end }} title="Try it on StackBlitz">
             <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
           </button>
           <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
Mirror of https://github.com/twbs/bootstrap.git