From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Sun, 10 Aug 2025 17:38:15 +0000 (+0200)
Subject: Docs: fix missing "Copy to clipboard" tooltips when `<Example>` was used, not just... 
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=HEAD;p=thirdparty%2Fbootstrap.git

Docs: fix missing "Copy to clipboard" tooltips when `<Example>` was used, not just `<Code>` (#41582)

Co-authored-by: Julien Déramond <juderamond@gmail.com>
---

diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro
index 231002a50b..ba2c61165f 100644
--- a/site/src/components/shortcodes/Code.astro
+++ b/site/src/components/shortcodes/Code.astro
@@ -33,15 +33,20 @@ interface Props {
    * This takes precedence over the `code` prop.
    */
   filePath?: string
+  /**
+   * Defines if the `<Code>` component is nested inside an `<Example>` component or not.
+   * @default false
+   */
+  nestedInExample?: boolean
 }
 
-const { class: className, code, containerClass, fileMatch, filePath, lang } = Astro.props
+const { class: className, code, containerClass, fileMatch, filePath, lang, nestedInExample = false } = Astro.props
 
 let codeToDisplay = filePath
   ? fs.readFileSync(path.join(process.cwd(), filePath), 'utf8')
   : Array.isArray(code)
-  ? code.join('\n')
-  : code
+    ? code.join('\n')
+    : code
 
 if (filePath && fileMatch && codeToDisplay) {
   const match = codeToDisplay.match(new RegExp(fileMatch))
@@ -130,19 +135,23 @@ if (filePath && fileMatch && codeToDisplay) {
   })
 </script>
 
-<div class:list={['bd-code-snippet', containerClass]}>
+<div class:list={[{ 'bd-code-snippet': !nestedInExample }, containerClass]}>
   {
-    Astro.slots.has('pre') ? (
-      <slot name="pre" />
-    ) : (
-      <div class="bd-clipboard">
-        <button type="button" class="btn-clipboard">
-          <svg class="bi" role="img" aria-label="Copy">
-            <use xlink:href="#clipboard" />
-          </svg>
-        </button>
-      </div>
-    )
+    nestedInExample
+      ? (<></>)
+      : Astro.slots.has('pre')
+        ? (
+          <slot name="pre" />
+        )
+        : (
+          <div class="bd-clipboard">
+            <button type="button" class="btn-clipboard">
+              <svg class="bi" role="img" aria-label="Copy">
+                <use xlink:href="#clipboard" />
+              </svg>
+            </button>
+          </div>
+        )
   }
   <div class="highlight">
     {
diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro
index a09fffeb31..044e1af4d4 100644
--- a/site/src/components/shortcodes/Example.astro
+++ b/site/src/components/shortcodes/Example.astro
@@ -1,6 +1,6 @@
 ---
 import { replacePlaceholdersInHtml } from '@libs/placeholder'
-import { Prism } from '@astrojs/prism'
+import Code from '@components/shortcodes/Code.astro'
 
 interface Props {
   /**
@@ -96,9 +96,7 @@ const simplifiedMarkup = markup
             </div>
           </div>
         )}
-        <div class="highlight">
-          <Prism code={simplifiedMarkup} lang={lang} />
-        </div>
+        <Code code={simplifiedMarkup} lang={lang} nestedInExample={true} />
       </>
     )
   }