diff --git a/site-new/src/components/shortcodes/ScssDocs.astro b/site-new/src/components/shortcodes/ScssDocs.astro new file mode 100644 index 000000000000..4cfca5d9abef --- /dev/null +++ b/site-new/src/components/shortcodes/ScssDocs.astro @@ -0,0 +1,70 @@ +--- +import fs from 'node:fs' +import { Prism } from '@astrojs/prism' + +// Prints everything between `// scss-docs-start "name"` and `// scss-docs-end "name"` +// comments in the docs. + +interface Props { + /** + * Reference name used to find the content to display within `file` + * @default "" + */ + name: string + + /** + * File name that contains the content to display + * @default "" + */ + file: string + + /** + * Remove the ` !default` flag from variable assignments + * @default true + */ + strip_default?: boolean +} + +const { name, file, strip_default = true } = Astro.props + +if (!name || !file) { + throw new Error(`Missing required parameters! Got: name=${name} file=${file}`) +} + +let content; +try { + content = fs.readFileSync(file, 'utf8') + + content = content.substring( + content.indexOf(`// scss-docs-start ${name}`), + content.lastIndexOf(`// scss-docs-end ${name}`) + ) +} catch (error) { + throw new Error(`Failed to read ${file}`, { cause: error }) +} +--- + +{/* + TODO: handle ALL the first part of this file with Hugo treatments + TODO: double-check everything in this file but this first basic rendering could do the job temporarily +*/} + +
+
+ {/* TODO: Not yet handled ---> | replaceRE `\\` "/" */} + + {file} + +
+ +
+
+ {/* TODO: Not yet handled ---> highlight $match "scss" "" */} + {/* TODO: Use ? */} + {/* TODO: Remove some extra-spaces */} +
+ +
+
\ No newline at end of file diff --git a/site-new/src/content/docs/components/accordion.mdx b/site-new/src/content/docs/components/accordion.mdx index cffaf2d4504f..f18146f42016 100644 --- a/site-new/src/content/docs/components/accordion.mdx +++ b/site-new/src/content/docs/components/accordion.mdx @@ -159,8 +159,8 @@ Please read the [collapse accessibility section]([[docsref:/components/collapse# As part of Bootstrap's evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{/* {{< scss-docs name="accordion-css-vars" file="scss/_accordion.scss" >}} */} + ### Sass variables -{/* {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}} */} + diff --git a/site-new/src/content/docs/components/alerts.mdx b/site-new/src/content/docs/components/alerts.mdx index eaa73792a2af..fc1794e7242a 100644 --- a/site-new/src/content/docs/components/alerts.mdx +++ b/site-new/src/content/docs/components/alerts.mdx @@ -164,11 +164,11 @@ When an alert is dismissed, the element is completely removed from the page stru As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{/* {{< scss-docs name="alert-css-vars" file="scss/_alert.scss" >}} */} + ### Sass variables -{/* {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} */} + ### Sass mixin @@ -176,13 +176,13 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS Used in combination with `$theme-colors` to create contextual modifier classes for our alerts. -{/* {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} */} + ### Sass loop Loop that generates the modifier classes with the `alert-variant()` mixin. -{/* {{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} */} + ## JavaScript behavior diff --git a/site-new/src/content/docs/components/badge.mdx b/site-new/src/content/docs/components/badge.mdx index 9ddfcb8d0383..a94a00866e58 100644 --- a/site-new/src/content/docs/components/badge.mdx +++ b/site-new/src/content/docs/components/badge.mdx @@ -96,8 +96,8 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{/* {{< scss-docs name="badge-css-vars" file="scss/_badge.scss" >}} */} + ### Sass variables -{/* {{< scss-docs name="badge-variables" file="scss/_variables.scss" >}} */} + diff --git a/site-new/src/content/docs/components/breadcrumb.mdx b/site-new/src/content/docs/components/breadcrumb.mdx index 60b205b3acc7..4e9ab35bbdb2 100644 --- a/site-new/src/content/docs/components/breadcrumb.mdx +++ b/site-new/src/content/docs/components/breadcrumb.mdx @@ -101,8 +101,8 @@ For more information, see the [ARIA Authoring Practices Guide breadcrumb pattern As part of Bootstrap's evolving CSS variables approach, breadcrumbs now use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{/* {{< scss-docs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" >}} */} + ### Sass variables -{/* {{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}} */} + diff --git a/site-new/src/content/docs/components/buttons.mdx b/site-new/src/content/docs/components/buttons.mdx index af09ee28839c..16c2a3023e60 100644 --- a/site-new/src/content/docs/components/buttons.mdx +++ b/site-new/src/content/docs/components/buttons.mdx @@ -223,7 +223,7 @@ document.querySelectorAll('.btn').forEach(buttonElement => { As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{/* {{< scss-docs name="btn-css-vars" file="scss/_buttons.scss" >}} */} + Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins. @@ -233,24 +233,24 @@ Here's an example of building a custom `.btn-*` modifier class like we do for th -{/* {{< scss-docs name="btn-css-vars-example" file="site/assets/scss/_buttons.scss" >}} */} + ### Sass variables -{/* {{< scss-docs name="btn-variables" file="scss/_variables.scss" >}} */} + ### Sass mixins There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin. -{/* {{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}} */} + -{/* {{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}} */} + -{/* {{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}} */} + ### Sass loops Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`. -{/* {{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}} */} + diff --git a/site-new/src/content/docs/components/card.mdx b/site-new/src/content/docs/components/card.mdx index db682a512b9d..a20903043ee5 100644 --- a/site-new/src/content/docs/components/card.mdx +++ b/site-new/src/content/docs/components/card.mdx @@ -732,8 +732,8 @@ In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https:// As part of Bootstrap's evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{/* {{< scss-docs name="card-css-vars" file="scss/_card.scss" >}} */} + ### Sass variables -{/* {{< scss-docs name="card-variables" file="scss/_variables.scss" >}} */} + diff --git a/site-new/src/content/docs/components/carousel.mdx b/site-new/src/content/docs/components/carousel.mdx index feae314a95e3..d67fb1e1cc96 100644 --- a/site-new/src/content/docs/components/carousel.mdx +++ b/site-new/src/content/docs/components/carousel.mdx @@ -353,11 +353,11 @@ The transition duration of `.carousel-item` can be changed with the `$carousel-t Variables for all carousels: -{/* {{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}} */} + Variables for the [dark carousel](#dark-variant): -{/* {{< scss-docs name="carousel-dark-variables" file="scss/_variables.scss" >}} */} + ## Usage diff --git a/site-new/src/content/docs/components/close-button.mdx b/site-new/src/content/docs/components/close-button.mdx index 03ea684453cf..132e7e76ecb0 100644 --- a/site-new/src/content/docs/components/close-button.mdx +++ b/site-new/src/content/docs/components/close-button.mdx @@ -45,8 +45,8 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv As part of Bootstrap's evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{/* {{< scss-docs name="close-css-vars" file="scss/_close.scss" >}} */} + ### Sass variables -{/* {{< scss-docs name="close-variables" file="scss/_variables.scss" >}} */} + diff --git a/site-new/src/content/docs/components/collapse.mdx b/site-new/src/content/docs/components/collapse.mdx index b5dd91f0e9d7..1683acae5829 100644 --- a/site-new/src/content/docs/components/collapse.mdx +++ b/site-new/src/content/docs/components/collapse.mdx @@ -104,13 +104,13 @@ Note that Bootstrap's current implementation does not cover the various *optiona ### Sass variables -{/* {{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}} */} + ### Classes Collapse transition classes can be found in `scss/_transitions.scss` as these are shared across multiple components (collapse and accordion). -{/* {{< scss-docs name="collapse-classes" file="scss/_transitions.scss" >}} */} + ## Usage diff --git a/site-new/src/content/docs/components/dropdowns.mdx b/site-new/src/content/docs/components/dropdowns.mdx index 5c7bad974627..a0dcd0899a99 100644 --- a/site-new/src/content/docs/components/dropdowns.mdx +++ b/site-new/src/content/docs/components/dropdowns.mdx @@ -1000,7 +1000,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{/* {{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}} */} + Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value. @@ -1010,27 +1010,27 @@ Dropdown items include at least one variable that is not set on `.dropdown`. Thi Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors. -{/* {{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}} */} + ### Sass variables Variables for all dropdowns: -{/* {{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}} */} + Variables for the [dark dropdown](#dark-dropdowns): -{/* {{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}} */} + Variables for the CSS-based carets that indicate a dropdown's interactivity: -{/* {{< scss-docs name="caret-variables" file="scss/_variables.scss" >}} */} + ### Mixins Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`. -{/* {{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}} */} + ## Usage diff --git a/site-new/src/content/docs/components/list-group.mdx b/site-new/src/content/docs/components/list-group.mdx index 3e1c33f53f91..6200f3bc1100 100644 --- a/site-new/src/content/docs/components/list-group.mdx +++ b/site-new/src/content/docs/components/list-group.mdx @@ -311,11 +311,11 @@ You can use `.stretched-link` on `