feat(doc): use code fences instead of Example and Code, add button labels

package.json

@@ -138,11 +138,15 @@
     "github-slugger": "^2.0.0",
     "globby": "^16.2.3",
     "hammer-simulator": "0.0.1",
+    "hast-util-properties-to-mdx-jsx-attributes": "^1.1.1",
     "htmlparser2": "^12.0.0",
     "image-size": "^2.0.4",
     "jasmine": "^7.0.0",
     "js-yaml": "^5.4.3",
     "lockfile-lint": "^5.0.1",
+    "mdast-util-from-markdown": "^2.1.0",
+    "mdast-util-mdx": "^3.0.0",
+    "micromark-extension-mdxjs": "^3.0.0",
     "mime": "^4.0.7",
     "nodemon": "^3.1.10",
     "npm-run-all2": "^9.0.3",

site/astro.config.ts

@@ -9,7 +9,7 @@ import { stackblitzPlugin } from './src/plugins/stackblitz-plugin'
 import type { Element, Text } from 'hast'
 import { rehypeHeadingIds, unified } from '@astrojs/markdown-remark'
 import { rehypeBsTable, rehypeCustomHeaderSlug, rehypeHeaderLinksOrder } from './src/libs/rehype'
-import { remarkBsComp, remarkBsConfig, remarkBsDocsref, remarkBsVersionLink } from './src/libs/remark'
+import { remarkBsComp, remarkBsConfig, remarkBsDocsref, remarkBsVersionLink, remarkCodeBlockToExample } from './src/libs/remark'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import { isHeading } from './src/libs/utils'
 
@@ -52,7 +52,7 @@ export default defineConfig({
         rehypeHeaderLinksOrder,
         rehypeBsTable
       ],
-      remarkPlugins: [remarkBsConfig, remarkBsDocsref, remarkBsComp, remarkBsVersionLink]
+      remarkPlugins: [remarkBsConfig, remarkBsDocsref, remarkBsComp, remarkBsVersionLink, remarkCodeBlockToExample]
     }),
     syntaxHighlight: 'prism'
   },

site/src/components/shortcodes/Example.astro

@@ -46,9 +46,14 @@ interface Props {
    * Defines label to complete 'Edit code on Stackblitz' and/or 'Copy code to clipboard' buttons aria-labels.
    */
   buttonLabel?: string
+  /**
+   * Defines if this is only a Code block without the preview.
+   * @default false
+   */
+  markupOnly?: boolean
 }
 
-const {
+let {
   addStackblitzJs = false,
   code,
   class: className,
@@ -57,6 +62,7 @@ const {
   showMarkup = true,
   showPreview = true,
   showToolbar = true,
+  markupOnly = false,
   buttonLabel
 } = Astro.props
 
@@ -75,9 +81,11 @@ const simplifiedMarkup = markup
     /<img.*class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>/g,
     (match, classes) => `<img src="..."${classes ? ` class="${classes}"` : ''} alt="..." />`
   )
+
+markupOnly && (showPreview = false, showToolbar = false)
 ---
 
-<div class="bd-example-snippet bd-code-snippet">
+<div class={!markupOnly ? "bd-example-snippet bd-code-snippet" : ""}>
   {
     showPreview && (
       <div id={id} class:list={['bd-example order-first m-none border-none', className, showToolbar ? '' : 'border-default border-thin border-bottom']}>
@@ -89,7 +97,7 @@ const simplifiedMarkup = markup
   {
     showMarkup && (
       <>
-        <Code code={simplifiedMarkup} lang={lang} nestedInExample={true} buttonLabel={buttonLabel} />
+        <Code code={simplifiedMarkup} lang={lang} nestedInExample={!markupOnly} buttonLabel={buttonLabel} />
         {showToolbar && (
           <div class:list={['d-flex order-first align-items-center highlight-toolbar ps-large border-top border-bottom border-thin border-default',
             (showPreview && showToolbar) ? '' : 'border-top-none']}>