Docs: fix StackBlitz examples needing icons

twbs · Dec 18, 2023 · de85256 · de85256
1 parent 958b610
commit de85256
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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">