`s are **bolded**.
@@ -177,51 +163,40 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
Wrap inline snippets of code with ``. Be sure to escape HTML angle brackets.
-{{< example >}}
-For example, <section> should be wrapped as inline.
-{{< /example >}}
+<section> should be wrapped as inline.`} />
## Code blocks
Use ``s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The `` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
-{{< example >}}
-<p>Sample text here...</p>
+<p>Sample text here...</p>
<p>And another line of sample text here...</p>
- `} />
## Variables
For indicating variables use the `` tag.
-{{< example >}}
-y = m x + b
-{{< /example >}}
+y = m x + b `} />
## User input
Use the `` to indicate input that is typically entered via keyboard.
-{{< example >}}
-To switch directories, type cd followed by the name of the directory.Ctrl + , cd followed by the name of the directory.Ctrl + , ` tag.
-{{< example >}}
-This text is meant to be treated as sample output from a computer program.
-{{< /example >}}
+This text is meant to be treated as sample output from a computer program. `} />
## Tables
-Tables are slightly adjusted to style ``s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
+Tables are slightly adjusted to style ``s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]([[docsref:/content/tables]]).
-{{< example >}}
-
+
This is an example table, and this is its caption to describe the contents.
@@ -253,8 +228,7 @@ Tables are slightly adjusted to style ``s, collapse borders, and ensure
Table cell
-
-{{< /example >}}
+`} />
## Forms
@@ -269,44 +243,42 @@ Various form elements have been rebooted for simpler base styles. Here are some
These changes, and more, are demonstrated below.
-{{< callout warning >}}
-{{< partial "callouts/warning-input-support.md" >}}
-{{< /callout >}}
+` elements, which get their own `cursor` change.
-{{< example >}}
-Non-button element button
-{{< /example >}}
+Non-button element button`} />
## Misc elements
### Address
-The `` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. ``s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. ``s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
- ACME Corporation ACME Corporation P: (123) 456-7890
- Full Name Full Name first.last@example.com
@@ -463,11 +433,11 @@ The default `cursor` on summary is `text`, so we reset that to `pointer` to conv
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden.
```html
-
Since `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods, we don't specifically endorse `[hidden]` over other techniques for managing the `display` of elements.
-{{< /callout >}}
+
-To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]([[docsref:/utilities/visibility]]) instead.
diff --git a/site/content/docs/5.3/content/tables.md b/site/src/content/docs/content/tables.mdx
similarity index 81%
rename from site/content/docs/5.3/content/tables.md
rename to site/src/content/docs/content/tables.mdx
index 3d3583c376..4ccdefe1a2 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/src/content/docs/content/tables.mdx
@@ -1,26 +1,26 @@
---
-layout: docs
title: Tables
description: Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
-group: content
toc: true
---
+import { getData } from '@libs/data'
+
## Overview
Due to the widespread use of `` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any ``, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
-{{< table class="table" simplified="false" >}}
+
## Variants
Use contextual classes to color tables, table rows or individual cells.
-{{< callout info >}}
+
**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6.
-{{< /callout >}}
+
@@ -37,44 +37,33 @@ Use contextual classes to color tables, table rows or individual cells.
Cell
Cell
- {{< table.inline >}}
- {{- range (index $.Site.Data "theme-colors") }}
-
- {{ .name | title }}
- Cell
- Cell
-
- {{- end -}}
- {{< /table.inline >}}
+ {getData('theme-colors').map((themeColor) => {
+ return (
+
+ {themeColor.title}
+ Cell
+ Cell
+
+ )
+ })}
-{{< highlight html >}}
-{{< table.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-
-{{- end -}}
-{{< /table.inline >}}
+`,
+ ...getData('theme-colors').map((themeColor) => ``),
+ `
+`,
+ ...getData('theme-colors').map((themeColor) => `... `),
+ `
+
+`,
+ ...getData('theme-colors').map((themeColor) => ` ... `),
+ ` `
+]} lang="html" />
-{{< table.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-...
-{{- end -}}
-{{< /table.inline >}}
-
-
-{{< table.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
- ...
-{{- end -}}
-{{< /table.inline >}}
-
-{{< /highlight >}}
-
-{{< callout info >}}
-{{< partial "callouts/warning-color-assistive-technologies.md" >}}
-{{< /callout >}}
+`.
-{{< table class="table table-striped" >}}
+
### Striped columns
Use `.table-striped-columns` to add zebra-striping to any table column.
-{{< table class="table table-striped-columns" >}}
+
These classes can also be added to table variants:
-{{< table class="table table-dark table-striped" >}}
+
-{{< table class="table table-dark table-striped-columns" >}}
+
-{{< table class="table table-success table-striped" >}}
+
-{{< table class="table table-success table-striped-columns" >}}
+
### Hoverable rows
Add `.table-hover` to enable a hover state on table rows within a ` `.
-{{< table class="table table-hover" >}}
+
-{{< table class="table table-dark table-hover" >}}
+
These hoverable rows can also be combined with the striped rows variant:
-{{< table class="table table-striped table-hover" >}}
+
### Active tables
@@ -234,7 +223,7 @@ For the accented tables ([striped rows](#striped-rows), [striped columns](#strip
Behind the scenes it looks like this:
-{{< scss-docs name="table-variant" file="scss/mixins/_table-variants.scss" >}}
+`, ` `, and ` `—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time).
-{{< example >}}
-
+
#
@@ -297,12 +285,11 @@ Add a thicker border, darker between table groups—``, ` `, and `<
@twitter
-
-{{< /example >}}
+
`} />
## Vertical alignment
-Table cells of `` are always vertical aligned to the bottom. Table cells in ` ` inherit their alignment from `` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
+Table cells of `` are always vertical aligned to the bottom. Table cells in ` ` inherit their alignment from `` and are aligned to the top by default. Use the [vertical align]([[docsref:/utilities/vertical-align]]) classes to re-align where needed.
@@ -609,7 +596,7 @@ A `
` functions like a heading for a table. It helps users with screen r
List of users
- {{< partial "table-content" >}}
+
@@ -627,8 +614,7 @@ A `` functions like a heading for a table. It helps users with screen r
You can also put the `` on the top of the table with `.caption-top`.
-{{< example >}}
-
+
List of users
@@ -658,18 +644,17 @@ You can also put the `` on the top of the table with `.caption-top`.
@twitter
-
-{{< /example >}}
+
`} />
## Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
-{{< callout warning >}}
+
##### Vertical clipping/truncation
Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
-{{< /callout >}}
+
### Always responsive
@@ -748,90 +733,85 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
**These tables may appear broken until their responsive styles apply at specific viewport widths.**
-{{< tables.inline >}}
-{{ range $.Site.Data.breakpoints }}
-{{ if not (eq . "xs") }}
-
-
-
-
-
- #
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
-
-
-
-
- 1
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
-
-
- 2
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
-
-
- 3
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
- Cell
-
-
-
-
-
+ return (
+
+
+
+
+
+ #
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+
+
+
+
+ 1
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+ 2
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+ 3
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+
+
+
+ )
+})}
+
+
`
-{{ end -}}
-{{- end -}}
-{{< /tables.inline >}}
-{{< /highlight >}}
+`)} lang="html" />
## CSS
### Sass variables
-{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
+` through ``, are available.
-{{< bs-table >}}
+
| Heading | Example |
| --- | --- |
| `h1. Bootstrap heading |
@@ -31,7 +29,7 @@ All HTML headings, `` through ``, are available.
| `h4. Bootstrap heading |
| `h5. Bootstrap heading |
| `h6. Bootstrap heading |
-{{< /bs-table >}}
+
```html
h1. Bootstrap heading
@@ -44,25 +42,21 @@ All HTML headings, `` through ``, are available.
`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
-{{< example >}}
- h1. Bootstrap heading
+h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
-h6. Bootstrap heading
-{{< /example >}}
+h6. Bootstrap heading
`} />
### Customizing headings
Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
-{{< example >}}
-
+
Fancy display heading
With faded secondary text
-
-{{< /example >}}
+`} />
## Display headings
@@ -90,32 +84,28 @@ Display headings are configured via the `$display-font-sizes` Sass map and two v
Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`.
-{{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
+
+
This is a lead paragraph. It stands out from regular paragraphs.
-
-{{< /example >}}
+`} />
## Inline text elements
Styling for common inline HTML5 elements.
-{{< example >}}
-You can use the mark tag to highlight text.
+You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
-This line rendered as italicized text.
-{{< /example >}}
+This line rendered as italicized text.
`} />
Beware that those tags should be used for semantic purpose:
@@ -135,7 +125,7 @@ While not shown above, feel free to use `` and `` in HTML5. `` is meant
## Text utilities
-Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
+Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]([[docsref:/utilities/text]]) and [color utilities]([[docsref:/utilities/colors]]).
## Abbreviations
@@ -143,61 +133,51 @@ Stylized implementation of HTML's `` element for abbreviations and acronym
Add `.initialism` to an abbreviation for a slightly smaller font-size.
-{{< example >}}
-attr
-HTML
-{{< /example >}}
+attr
+HTML
`} />
## Blockquotes
For quoting blocks of content from another source within your document. Wrap `` around any HTML as the quote.
-{{< example >}}
-
+
A well-known quote, contained in a blockquote element.
-
-{{< /example >}}
+ `} />
### Naming a source
The HTML spec requires that blockquote attribution be placed outside the ``. When providing attribution, wrap your `` in a `` and use a `` or a block level element (e.g., ``) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `` as well.
-{{< example >}}
-
+
A well-known quote, contained in a blockquote element.
-
-{{< /example >}}
+
`} />
### Alignment
Use text utilities as needed to change the alignment of your blockquote.
-{{< example >}}
-
+
A well-known quote, contained in a blockquote element.
-
-{{< /example >}}
+`} />
-{{< example >}}
-
+
A well-known quote, contained in a blockquote element.
-
-{{< /example >}}
+`} />
## Lists
@@ -205,8 +185,7 @@ Use text utilities as needed to change the alignment of your blockquote.
Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
-{{< example >}}
-
+
This is a list.
It appears completely unstyled.
Structurally, it's still a list.
@@ -219,27 +198,23 @@ Remove the default `list-style` and left margin on list items (immediate childre
This may still come in handy in some situations.
-
-{{< /example >}}
+`} />
### Inline
Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
-{{< example >}}
-
+
This is a list item.
And another one.
But they're displayed inline.
-
-{{< /example >}}
+`} />
### Description list alignment
Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
-{{< example >}}
-
+
Description lists
A description list is perfect for defining terms.
@@ -262,12 +237,11 @@ Align terms and descriptions horizontally by using our grid system's predefined
I heard you like definition lists. Let me put a definition list inside your definition list.
-
-{{< /example >}}
+`} />
## Responsive font sizes
-In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
+In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]([[docsref:/getting-started/rfs]]) to find out how this works.
## CSS
@@ -275,12 +249,12 @@ In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to
Headings have some dedicated variables for sizing and spacing.
-{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}}
+
**Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html).
-{{< /callout >}}
+
## Dark mode
@@ -22,8 +22,7 @@ Alternatively, you can also switch to a media query implementation thanks to our
For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
-{{< example class="d-flex justify-content-between" >}}
-
@@ -46,11 +45,10 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li
Action Another action Something else here Separated link Bootstrap demo
- Hello, world!
-
+
```
@@ -149,13 +147,13 @@ While the primary use case for color modes is light and dark mode, custom color
For example, you can create a "blue theme" with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you're using Sass, you can also use Sass's functions within your CSS variable overrides.
-{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
+
Example blue theme
Some paragraph text to show how the blue theme might look with written copy.
-
+
@@ -184,15 +182,11 @@ To allow visitors or users to toggle color modes, you'll need to create a toggle
Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
-{{< example lang="js" show_preview="false" >}}
-{{< js.inline >}}
-{{- readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/js/color-modes.js") -}}
-{{< /js.inline >}}
-{{< /example >}}
+
## Adding theme colors
-Adding a new color in `$theme-colors` is not enough for some of our components like [alerts]({{< docsref "/components/alerts" >}}) and [list groups]({{< docsref "/components/list-group" >}}). New colors must also be defined in `$theme-colors-text`, `$theme-colors-bg-subtle`, and `$theme-colors-border-subtle` for light theme; but also in `$theme-colors-text-dark`, `$theme-colors-bg-subtle-dark`, and `$theme-colors-border-subtle-dark` for dark theme.
+Adding a new color in `$theme-colors` is not enough for some of our components like [alerts]([[docsref:/components/alerts]]) and [list groups]([[docsref:/components/list-group]]). New colors must also be defined in `$theme-colors-text`, `$theme-colors-bg-subtle`, and `$theme-colors-border-subtle` for light theme; but also in `$theme-colors-text-dark`, `$theme-colors-bg-subtle-dark`, and `$theme-colors-border-subtle-dark` for dark theme.
This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we'll revisit this setup to reduce the duplication.
@@ -244,16 +238,16 @@ $theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $c
Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#building-with-sass) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.
-{{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}}
+
### Sass variables
CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
-{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
+
### Sass mixins
Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details.
-{{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}}
+
diff --git a/site/content/docs/5.3/customize/color.md b/site/src/content/docs/customize/color.mdx
similarity index 67%
rename from site/content/docs/5.3/customize/color.md
rename to site/src/content/docs/customize/color.mdx
index d42c636159..ef0aab26c9 100644
--- a/site/content/docs/5.3/customize/color.md
+++ b/site/src/content/docs/customize/color.mdx
@@ -1,22 +1,23 @@
---
-layout: docs
title: Color
description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
-group: customize
toc: true
---
+import { getData } from '@libs/data'
+import { getSequence } from '@libs/utils'
+
## Colors
-{{< added-in "5.3.0" >}}
+
Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
-{{< callout warning>}}
+
**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
-{{< /callout >}}
+
@@ -30,13 +31,13 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
+ **Body —** Default foreground (color) and background, including components.
- {{< markdown >}}`--bs-body-color`
@@ -44,18 +45,18 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-body-bg`
- {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
+ **Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.
- {{< markdown >}}`--bs-secondary-color`
@@ -63,18 +64,18 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-secondary-bg`
- {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
+ **Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.
- {{< markdown >}}`--bs-tertiary-color`
@@ -82,40 +83,40 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-tertiary-bg`
- {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
+ **Emphasis —** For higher contrast text. Not applicable for backgrounds.
- {{< markdown >}}`--bs-emphasis-color`
- {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
+ **Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.
- {{< markdown >}}`--bs-border-color`
- {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
+ **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.
- {{< markdown >}}`--bs-primary`
@@ -123,7 +124,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
+ `--bs-primary-bg-subtle`
@@ -131,7 +132,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
+ `--bs-primary-border-subtle`
@@ -139,18 +140,18 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
Text
- {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
+ `--bs-primary-text-emphasis`
- {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
+ **Success —** Theme color used for positive or successful actions and information.
- {{< markdown >}}`--bs-success`
@@ -158,7 +159,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
+ `--bs-success-bg-subtle`
@@ -166,7 +167,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
+ `--bs-success-border-subtle`
@@ -174,18 +175,18 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
Text
- {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
+ `--bs-success-text-emphasis`
- {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
+ **Danger —** Theme color used for errors and dangerous actions.
- {{< markdown >}}`--bs-danger`
@@ -193,7 +194,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
+ `--bs-danger-bg-subtle`
@@ -201,7 +202,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
+ `--bs-danger-border-subtle`
@@ -209,18 +210,18 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
Text
- {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
+ `--bs-danger-text-emphasis`
- {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
+ **Warning —** Theme color used for non-destructive warning messages.
- {{< markdown >}}`--bs-warning`
@@ -228,7 +229,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
+ `--bs-warning-bg-subtle`
@@ -236,7 +237,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
+ `--bs-warning-border-subtle`
@@ -244,18 +245,18 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
Text
- {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
+ `--bs-warning-text-emphasis`
- {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
+ **Info —** Theme color used for neutral and informative content.
- {{< markdown >}}`--bs-info`
@@ -263,7 +264,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
+ `--bs-info-bg-subtle`
@@ -271,7 +272,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
+ `--bs-info-border-subtle`
@@ -279,18 +280,18 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
Text
- {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
+ `--bs-info-text-emphasis`
- {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
+ **Light —** Additional theme option for less contrasting colors.
- {{< markdown >}}`--bs-light`
@@ -298,7 +299,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
+ `--bs-light-bg-subtle`
@@ -306,7 +307,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
+ `--bs-light-border-subtle`
@@ -314,18 +315,18 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
Text
- {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
+ `--bs-light-text-emphasis`
- {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
+ **Dark —** Additional theme option for higher contrasting colors.
- {{< markdown >}}`--bs-dark`
@@ -333,7 +334,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
+ `--bs-dark-bg-subtle`
@@ -341,7 +342,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
- {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
+ `--bs-dark-border-subtle`
@@ -349,7 +350,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
Text
- {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
+ `--bs-dark-text-emphasis`
@@ -360,31 +361,29 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
-{{< example >}}
-
+
Example element with utilities
-
-{{< /example >}}
+`} />
### Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
- {{< theme-colors.inline >}}
- {{- range (index $.Site.Data "theme-colors") }}
-
- {{ end -}}
- {{< /theme-colors.inline >}}
+ {getData('theme-colors').map((themeColor) => {
+ return (
+
+ )
+ })}
- {{< theme-colors.inline >}}
- {{- range $color := $.Site.Data.colors }}
- {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
-
-
- ${{ $color.name }}
- {{ $color.hex }}
-
- {{ range (seq 100 100 900) }}
-
${{ $color.name }}-{{ . }}
- {{ end }}
-
- {{ end -}}
- {{ end -}}
+ {getData('colors').map((color) => {
+ if ((color.name !== "white") && (color.name !== "gray") && (color.name !== "gray-dark")) {
+ return (
+
+
+ ${color.name}
+ {color.hex}
+
+
+ {getSequence(100, 900, 100).map((value) => {
+ return (
+
${color.name}-{value}
+ )
+ })}
+
+ )
+ }
+ })}
-
- $gray-500
- #adb5bd
-
- {{- range $.Site.Data.grays }}
-
$gray-{{ .name }}
- {{ end -}}
+
$gray-500 #adb5bd
+ {getData('grays').map((gray) => {
+ return (
+
$gray-{gray.name}
+ )
+ })}
- {{< /theme-colors.inline >}}
@@ -449,7 +450,7 @@ Bootstrap's source Sass files include three maps to help you quickly and easily
Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:
-{{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
+
Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
@@ -465,13 +466,13 @@ Here's how you can use these in your Sass:
}
```
-[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values.
+[Color]([[docsref:/utilities/colors]]) and [background]([[docsref:/utilities/background]]) utility classes are also available for setting `color` and `background-color` using the `500` color values.
## Generating utilities
-{{< added-in "5.1.0" >}}
+
-Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
+Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]([[docsref:/utilities/api]]) and our extended Sass maps added in v5.1.0.
1. To start, make sure you've imported our functions, variables, mixins, and utilities.
2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
diff --git a/site/content/docs/5.3/customize/components.md b/site/src/content/docs/customize/components.mdx
similarity index 82%
rename from site/content/docs/5.3/customize/components.md
rename to site/src/content/docs/customize/components.mdx
index 262c8d8c69..f69552969e 100644
--- a/site/content/docs/5.3/customize/components.md
+++ b/site/src/content/docs/customize/components.mdx
@@ -1,8 +1,6 @@
---
-layout: docs
title: Components
description: Learn how and why we build nearly all our components responsively and with base and modifier classes.
-group: customize
toc: true
---
@@ -12,7 +10,7 @@ Bootstrap's components are largely built with a base-modifier nomenclature. We g
To build our modifier classes, we use Sass's `@each` loops to iterate over a Sass map. This is especially helpful for generating variants of a component by our `$theme-colors` and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you'll automatically see your changes reflected in these loops.
-Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to customize these loops and extend Bootstrap's base-modifier approach to your own code.
+Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to customize these loops and extend Bootstrap's base-modifier approach to your own code.
## Modifiers
@@ -20,21 +18,21 @@ Many of Bootstrap's components are built with a base-modifier class approach. Th
Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` and `.list-group` components.
-{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
+
-{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
+
## Responsive
These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include.
-{{< scss-docs name="responsive-breakpoints" file="scss/_dropdown.scss" >}}
+
Should you modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map.
-{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
+
-For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
+For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]([[docsref:/layout/grid#css]]).
## Creating your own
@@ -64,14 +62,14 @@ In your CSS, you'd have something like the following where the bulk of the styli
For the callouts, that unique styling is just a `border-left-color`. When you combine that base class with one of those modifier classes, you get your complete component family:
-{{< callout info >}}
+
**This is an info callout.** Example text to show it in action.
-{{< /callout >}}
+
-{{< callout warning >}}
+
**This is a warning callout.** Example text to show it in action.
-{{< /callout >}}
+
-{{< callout danger >}}
+
**This is a danger callout.** Example text to show it in action.
-{{< /callout >}}
+
diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/src/content/docs/customize/css-variables.mdx
similarity index 73%
rename from site/content/docs/5.3/customize/css-variables.md
rename to site/src/content/docs/customize/css-variables.mdx
index ffb40c0c4a..f331182c3b 100644
--- a/site/content/docs/5.3/customize/css-variables.md
+++ b/site/src/content/docs/customize/css-variables.mdx
@@ -1,8 +1,6 @@
---
-layout: docs
title: CSS variables
description: Use Bootstrap's CSS custom properties for fast and forward-looking design and development.
-group: customize
toc: true
---
@@ -18,40 +16,19 @@ Here are the variables we include (note that the `:root` is required) that can b
These CSS variables are available everywhere, regardless of color mode.
-```css
-{{< root.inline >}}
-{{- $css := readFile "dist/css/bootstrap.css" -}}
-{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}}
-
-{{- if (eq (len $match) 0) -}}
-{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
-{{- end -}}
-
-{{- index $match 0 -}}
-
-{{< /root.inline >}}
-```
+
### Dark mode
These variables are scoped to our built-in dark mode.
-```css
-{{< root.inline >}}
-{{- $css := readFile "dist/css/bootstrap.css" -}}
-{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}}
-{{- if (eq (len $match) 0) -}}
-{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}}
-{{- end -}}
-{{- index $match 0 -}}
-{{< /root.inline >}}
-```
+
## Component variables
Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
-Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). Our [navbars also use CSS variables]({{< docsref "/components/navbar#css" >}}) as of v5.2.0. We're also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]({{< docsref "/layout/css-grid" >}})—with more component usage coming in the future.
+Have a look at our table documentation for some [insight into how we're using CSS variables]([[docsref:/content/tables#how-do-the-variants-and-accented-tables-work]]). Our [navbars also use CSS variables]([[docsref:/components/navbar#css]]) as of v5.2.0. We're also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]([[docsref:/layout/css-grid]])—with more component usage coming in the future.
Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
@@ -76,17 +53,17 @@ a {
## Focus variables
-{{< added-in "5.3.0" >}}
+
Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.
In our Sass, we set default values that can be customized before compiling.
-{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
+
Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`).
-{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
+
## Grid breakpoints
diff --git a/site/content/docs/5.3/customize/optimize.md b/site/src/content/docs/customize/optimize.mdx
similarity index 91%
rename from site/content/docs/5.3/customize/optimize.md
rename to site/src/content/docs/customize/optimize.mdx
index fc65628d50..b251dfdfa7 100644
--- a/site/content/docs/5.3/customize/optimize.md
+++ b/site/src/content/docs/customize/optimize.mdx
@@ -1,8 +1,6 @@
---
-layout: docs
title: Optimize
description: Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.
-group: customize
toc: true
---
@@ -10,7 +8,7 @@ toc: true
When using Sass in your asset pipeline, make sure you optimize Bootstrap by only `@import`ing the components you need. Your largest optimizations will likely come from the `Layout & Components` section of our `bootstrap.scss`.
-{{< scss-docs name="import-stack" file="scss/bootstrap.scss" >}}
+
If you're not using a component, comment it out or delete it entirely. For example, if you're not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file.
@@ -21,7 +19,7 @@ Bootstrap's JavaScript includes every component in our primary dist files (`boot
For instance, assuming you're using your own JavaScript bundler like Webpack, Parcel, or Vite, you'd only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript:
-
+{/* TODO(Astro migration): */}
```js
// Import just what we need
@@ -41,15 +39,15 @@ import 'bootstrap/js/dist/modal';
This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file.
-{{< callout info >}}
+
**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following:
-
+{/* TODO(Astro migration): */}
```js
import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))
```
-{{< /callout >}}
+
## Autoprefixer .browserslistrc
@@ -61,8 +59,8 @@ _Help wanted with this section, please consider opening a PR. Thanks!_
While we don't have a prebuilt example for using [PurgeCSS](https://github.com/FullHuman/purgecss) with Bootstrap, there are some helpful articles and walkthroughs that the community has written. Here are some options:
--
--
+- https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/
+- https://web.dev/articles/defer-non-critical-css
## Always use HTTPS
diff --git a/site/content/docs/5.3/customize/options.md b/site/src/content/docs/customize/options.mdx
similarity index 80%
rename from site/content/docs/5.3/customize/options.md
rename to site/src/content/docs/customize/options.mdx
index e2da964cdf..11d8b79872 100644
--- a/site/content/docs/5.3/customize/options.md
+++ b/site/src/content/docs/customize/options.mdx
@@ -1,33 +1,31 @@
---
-layout: docs
title: Options
description: Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
-group: customize
---
Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed.
You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file.
-{{< bs-table "table table-options" >}}
+
| Variable | Values | Description |
| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
-| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
-| `$enable-dark-mode` | `true` (default) or `false` | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. |
+| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]([[docsref:/utilities/spacing]]). |
+| `$enable-dark-mode` | `true` (default) or `false` | Enables built-in [dark mode support]([[docsref:/customize/color-modes#dark-mode]]) across the project and its components. |
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
-| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
+| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
| `$enable-cssgrid` | `true` or `false` (default) | Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.). |
| `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) |
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
-| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |
+| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]([[docsref:/getting-started/rfs]]). |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
-| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
+| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]([[docsref:/utilities/spacing#negative-margin]]). |
| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
| `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. |
-| `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}) |
-{{< /bs-table >}}
+| `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]) |
+
diff --git a/site/content/docs/5.3/customize/overview.md b/site/src/content/docs/customize/overview.mdx
similarity index 61%
rename from site/content/docs/5.3/customize/overview.md
rename to site/src/content/docs/customize/overview.mdx
index ed890acd01..3be93e8d0a 100644
--- a/site/content/docs/5.3/customize/overview.md
+++ b/site/src/content/docs/customize/overview.mdx
@@ -1,10 +1,8 @@
---
-layout: docs
title: Customize
description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
-group: customize
toc: false
-aliases: "/docs/5.3/customize/"
+aliases: "/docs/[[config:docs_version]]/customize/"
sections:
- title: Sass
description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.
@@ -28,12 +26,12 @@ There are multiple ways to customize Bootstrap. Your best path can depend on you
Our two preferred methods are:
-1. Using Bootstrap [via package manager]({{< docsref "/getting-started/download#package-managers" >}}) so you can use and extend our source files.
-2. Using Bootstrap's compiled distribution files or [jsDelivr]({{< docsref "/getting-started/download#cdn-via-jsdelivr" >}}) so you can add onto or override Bootstrap's styles.
+1. Using Bootstrap [via package manager]([[docsref:/getting-started/download#package-managers]]) so you can use and extend our source files.
+2. Using Bootstrap's compiled distribution files or [jsDelivr]([[docsref:/getting-started/download#cdn-via-jsdelivr]]) so you can add onto or override Bootstrap's styles.
-While we cannot go into details here on how to use every package manager, we can give some guidance on [using Bootstrap with your own Sass compiler]({{< docsref "/customize/sass" >}}).
+While we cannot go into details here on how to use every package manager, we can give some guidance on [using Bootstrap with your own Sass compiler]([[docsref:/customize/sass]]).
-For those who want to use the distribution files, review the [getting started page]({{< docsref "/getting-started/introduction" >}}) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you'd like to use.
+For those who want to use the distribution files, review the [getting started page]([[docsref:/getting-started/introduction]]) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you'd like to use.
As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.
@@ -41,13 +39,13 @@ As you familiarize yourself with Bootstrap, continue exploring this section for
Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict CSP configurations**, we've documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.
-- [Accordion]({{< docsref "/components/accordion" >}})
-- [Carousel controls]({{< docsref "/components/carousel#with-controls" >}})
-- [Close button]({{< docsref "/components/close-button" >}}) (used in alerts and modals)
-- [Form checkboxes and radio buttons]({{< docsref "/forms/checks-radios" >}})
-- [Form switches]({{< docsref "/forms/checks-radios#switches" >}})
-- [Form validation icons]({{< docsref "/forms/validation#server-side" >}})
-- [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}})
-- [Select menus]({{< docsref "/forms/select" >}})
+- [Accordion]([[docsref:/components/accordion]])
+- [Carousel controls]([[docsref:/components/carousel#with-controls]])
+- [Close button]([[docsref:/components/close-button]]) (used in alerts and modals)
+- [Form checkboxes and radio buttons]([[docsref:/forms/checks-radios]])
+- [Form switches]([[docsref:/forms/checks-radios#switches]])
+- [Form validation icons]([[docsref:/forms/validation#server-side]])
+- [Navbar toggle buttons]([[docsref:/components/navbar#responsive-behaviors]])
+- [Select menus]([[docsref:/forms/select]])
-Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]({{< docsref "/getting-started/webpack#extracting-svg-files" >}}), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
+Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]([[docsref:/getting-started/webpack#extracting-svg-files]]), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
diff --git a/site/content/docs/5.3/customize/sass.md b/site/src/content/docs/customize/sass.mdx
similarity index 93%
rename from site/content/docs/5.3/customize/sass.md
rename to site/src/content/docs/customize/sass.mdx
index 37d134d8dd..6cac431a21 100644
--- a/site/content/docs/5.3/customize/sass.md
+++ b/site/src/content/docs/customize/sass.mdx
@@ -1,8 +1,6 @@
---
-layout: docs
title: Sass
description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
-group: customize
toc: true
---
@@ -103,9 +101,9 @@ sass --watch ./scss/custom.scss ./css/custom.css
Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install/) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
-{{< callout info >}}
-**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
-{{< /callout >}}
+
+**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]([[docsref:/getting-started/webpack]]), [Parcel]([[docsref:/getting-started/parcel]]), or [Vite]([[docsref:/getting-started/vite]]). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
+
## Including
@@ -159,9 +157,7 @@ $body-color: #111;
Repeat as necessary for any variable in Bootstrap, including the global options below.
-{{< callout info >}}
-{{< partial "callouts/info-npm-starter.md" >}}
-{{< /callout >}}
+
Default callout
-{{< /callout >}}
+
-{{< callout warning >}}
+
Warning callout
-{{< /callout >}}
+
-{{< callout danger >}}
+
Danger callout
-{{< /callout >}}
+
## Code example
@@ -41,10 +38,8 @@ sitemap:
The HTML abbreviation element.
-{{< example >}}
-
This is a test.
-{{< /example >}}
+
This is a test. `} />
-{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
+
-{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}
+
diff --git a/site/content/docs/5.3/extend/approach.md b/site/src/content/docs/extend/approach.mdx
similarity index 95%
rename from site/content/docs/5.3/extend/approach.md
rename to site/src/content/docs/extend/approach.mdx
index 392aef4d37..6e6a86fa97 100644
--- a/site/content/docs/5.3/extend/approach.md
+++ b/site/src/content/docs/extend/approach.mdx
@@ -1,15 +1,13 @@
---
-layout: docs
title: Approach
description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
-group: extend
aliases:
- - "/docs/5.3/extend/"
+ - "/docs/[[config:docs_version]]/extend/"
---
While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.
-See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new/choose)—we'd love to discuss it with you.
+See something that doesn't sound right, or perhaps could be done better? [Open an issue]([[config:repo]]/issues/new/choose)—we'd love to discuss it with you.
## Summary
@@ -55,13 +53,13 @@ Bootstrap includes several components that function as an overlay of some kind.
Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars.
-Learn more about this in our [`z-index` layout page]({{< docsref "/layout/z-index" >}}).
+Learn more about this in our [`z-index` layout page]([[docsref:/layout/z-index]]).
## HTML and CSS over JS
Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
-This principle is our first-class JavaScript API using `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]({{< docsref "/getting-started/javascript#data-attributes" >}}).
+This principle is our first-class JavaScript API using `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]([[docsref:/getting-started/javascript#data-attributes]]).
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide any semantic value or browser functionality. So instead, we use `
`s and ``s.
diff --git a/site/content/docs/5.3/extend/icons.md b/site/src/content/docs/extend/icons.mdx
similarity index 75%
rename from site/content/docs/5.3/extend/icons.md
rename to site/src/content/docs/extend/icons.mdx
index 1e26503bdb..ec2526afd5 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/src/content/docs/extend/icons.mdx
@@ -1,10 +1,10 @@
---
-layout: docs
title: Icons
description: Guidance and suggestions for using external icon libraries with Bootstrap.
-group: extend
---
+import { getData } from '@libs/data'
+
While Bootstrap doesn't include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We've included details for Bootstrap Icons and other preferred icon sets below.
While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
@@ -15,26 +15,28 @@ Bootstrap Icons is a growing library of SVG icons that are designed by [@mdo](ht
Oh, and did we mention they're completely open source? Licensed under MIT, just like Bootstrap, our icon set is available to everyone.
-[Learn more about Bootstrap Icons]({{< param icons >}}), including how to install them and recommended usage.
+[Learn more about Bootstrap Icons]([[config:icons]]), including how to install them and recommended usage.
## Alternatives
We've tested and used these icon sets ourselves as preferred alternatives to Bootstrap Icons.
-{{< markdown >}}
-{{< icons.inline >}}
-{{- $type := .Get "type" | default "preferred" -}}
-
-{{- range (index .Site.Data.icons $type) }}
-- [{{ .name }}]({{ .website }})
-{{- end }}
-{{< /icons.inline >}}
-{{< /markdown >}}
+
+{getData('icons').preferred.map((icon) => {
+ return (
+ {icon.name}
## More options
While we haven't tried these out ourselves, they do look promising and provide multiple formats, including SVG.
-{{< markdown >}}
-{{< icons.inline type="more" />}}
-{{< /markdown >}}
+
+{getData('icons').more.map((icon) => {
+ return (
+ {icon.name}
diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/src/content/docs/forms/checks-radios.mdx
similarity index 80%
rename from site/content/docs/5.3/forms/checks-radios.md
rename to site/src/content/docs/forms/checks-radios.mdx
index 07ab3e2ab1..18b75480ee 100644
--- a/site/content/docs/5.3/forms/checks-radios.md
+++ b/site/src/content/docs/forms/checks-radios.mdx
@@ -1,9 +1,7 @@
---
-layout: docs
title: Checks and radios
description: Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
-group: forms
-aliases: "/docs/5.3/forms/checks/"
+aliases: "/docs/[[config:docs_version]]/forms/checks/"
toc: true
---
@@ -17,8 +15,7 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
## Checks
-{{< example >}}
-
+
Default checkbox
@@ -29,28 +26,24 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
Checked checkbox
-
-{{< /example >}}
+
+
Indeterminate checkbox
-
-{{< /example >}}
+`} />
### Disabled
Add the `disabled` attribute and the associated ``s are automatically styled to match with a lighter color to help indicate the input's state.
-{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
-
+
Disabled indeterminate checkbox
@@ -67,13 +60,11 @@ Add the `disabled` attribute and the associated ``s are automatically sty
Disabled checked checkbox
-
-{{< /example >}}
+`} />
## Radios
-{{< example >}}
-
+
Default radio
@@ -84,15 +75,13 @@ Add the `disabled` attribute and the associated ``s are automatically sty
Default checked radio
-
-{{< /example >}}
+`} />
### Disabled
Add the `disabled` attribute and the associated ``s are automatically styled to match with a lighter color to help indicate the input's state.
-{{< example >}}
-
+
Disabled radio
@@ -103,15 +92,13 @@ Add the `disabled` attribute and the associated ``s are automatically sty
Disabled checked radio
-
-{{< /example >}}
+`} />
## Switches
A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the `disabled` attribute.
-{{< example >}}
-
+
Default switch checkbox input
@@ -126,15 +113,13 @@ A switch has the markup of a custom checkbox but uses the `.form-switch` class t
Disabled checked switch checkbox input
-
-{{< /example >}}
+`} />
## Default (stacked)
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
-{{< example >}}
-
+
Default checkbox
@@ -145,11 +130,9 @@ By default, any number of checkboxes and radios that are immediate sibling will
Disabled checkbox
-
-{{< /example >}}
+`} />
-{{< example >}}
-
+
Default radio
@@ -166,15 +149,13 @@ By default, any number of checkboxes and radios that are immediate sibling will
Disabled radio
-
-{{< /example >}}
+`} />
## Inline
Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.
-{{< example >}}
-
+
1
@@ -185,11 +166,9 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
3 (disabled)
-
-{{< /example >}}
+`} />
-{{< example >}}
-
+
1
@@ -200,15 +179,13 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
3 (disabled)
-
-{{< /example >}}
+`} />
## Reverse
Put your checkboxes, radios, and switches on the opposite side with the `.form-check-reverse` modifier class.
-{{< example >}}
-`} />
## Without labels
-Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the [forms overview accessibility]({{< docsref "/forms/overview#accessibility" >}}) section for details.
+Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the [forms overview accessibility]([[docsref:/forms/overview/#accessibility]]) section for details.
-{{< example >}}
-
+
-{{< /example >}}
+`} />
## Toggle buttons
-Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `` elements. These toggle buttons can further be grouped in a [button group]({{< docsref "/components/button-group" >}}) if needed.
+Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `` elements. These toggle buttons can further be grouped in a [button group]([[docsref:/components/button-group]]) if needed.
### Checkbox toggle buttons
-{{< example >}}
-
Single toggle
Checked
Disabled
-{{< /example >}}
+Disabled `} />
-{{< example >}}
-
Single toggle
Checked
Disabled
-{{< /example >}}
+Disabled `} />
-{{< callout info >}}
-Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]({{< docsref "/components/buttons#button-plugin" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
-{{< /callout >}}
+
+Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]([[docsref:/components/buttons#button-plugin]]). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
+
### Radio toggle buttons
-{{< example >}}
-
Checked
Disabled
Radio
-{{< /example >}}
+Radio `} />
-{{< example >}}
-
Checked
Disabled
Radio
-{{< /example >}}
+Radio `} />
### Outlined styles
Different variants of `.btn`, such as the various outlined styles, are supported.
-{{< example >}}
-
Single toggle Checked success radio
Danger radio
-{{< /example >}}
+Danger radio `} />
## CSS
@@ -327,8 +291,8 @@ Different variants of `.btn`, such as the various outlined styles, are supported
Variables for checks:
-{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}}
+` elements in `.form-floating` to enable floating labels with Bootstrap's textual form fields. A `placeholder` is required on each `
+
Email address
Password
-
-{{< /example >}}
+`} />
When there's a `value` already defined, ``s will automatically adjust to their floated position.
-{{< example >}}
-
-{{< /example >}}
+`} />
Form validation styles also work as expected.
-{{< example >}}
-
-{{< /example >}}
+`} />
## Textareas
By default, `
Comments
-
-{{< /example >}}
+`} />
To set a custom height on your `
Comments
-
-{{< /example >}}
+`} />
## Selects
Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike `` in its floated state. **Selects with `size` and `multiple` are not supported.**
-{{< example >}}
-
+
Open this select menu
One
@@ -72,15 +59,13 @@ Other than `.form-control`, floating labels are only available on `.form-select`
Three
Works with selects
-
-{{< /example >}}
+`} />
## Disabled
Add the `disabled` boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.
-{{< example >}}
-
+
Email address
@@ -100,42 +85,36 @@ Add the `disabled` boolean attribute on an input, a textarea or a select to give
Three
Works with selects
-
-{{< /example >}}
+`} />
## Readonly plaintext
Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `
+
Empty input
Input with value
-
-{{< /example >}}
+`} />
## Input groups
Floating labels also support `.input-group`.
-{{< example >}}
-
-{{< /example >}}
+`} />
When using `.input-group` and `.form-floating` along with form validation, the `-feedback` should be placed outside of the `.form-floating`, but inside of the `.input-group`. This means that the feedback will need to be shown using javascript.
-{{< example >}}
-`} />
## Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.
-{{< example >}}
-
-{{< /example >}}
+`} />
## CSS
### Sass variables
-{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}
+
Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
-{{< /callout >}}
+
Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
-{{< example >}}
-Password
+Password
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
-
-{{< /example >}}
+`} />
Inline text can use any typical inline HTML element (be it a ``, ``, or something else) with nothing more than the `.form-text` class.
-{{< example >}}
-
+
Password
@@ -64,32 +55,26 @@ Inline text can use any typical inline HTML element (be it a ``, ``
Must be 8-20 characters long.
+`} />
## Readonly plain text
If you want to have `
+
Email
-{{< /example >}}
+
+`s that can be accessed (and a
Learn more about [support for datalist elements](https://caniuse.com/datalist).
-{{< example >}}
-Datalist example
+Datalist example
@@ -168,8 +145,7 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
-
-{{< /example >}}
+`} />
## CSS
@@ -177,14 +153,14 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
`$input-*` are shared across most of our form controls (and not buttons).
-{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}}
+`s and `.form-text` component.
-{{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}}
+`s outside the input group.
-{{< example >}}
-
+
@
@@ -45,19 +42,16 @@ Place one add-on or button on either side of an input. You may also place one on
With textarea
-
-{{< /example >}}
+`} />
## Wrapping
Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
-{{< example >}}
-
+
@
-{{< /example >}}
+`} />
## Sizing
@@ -65,8 +59,7 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
**Sizing on the individual input group elements isn't supported.**
-{{< example >}}
-
+
Small
@@ -79,15 +72,13 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
Large
-{{< /example >}}
+`} />
## Checkboxes and radios
Place any checkbox or radio option within an input group's addon instead of text. We recommend adding `.mt-0` to the `.form-check-input` when there's no visible text next to the input.
-{{< example >}}
-
+
First and last name
-{{< /example >}}
+`} />
## Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
-{{< example >}}
-
+
$
0.00
$
0.00
-
-{{< /example >}}
+`} />
## Button addons
-{{< example >}}
-
+
Button
@@ -155,13 +140,11 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
Button
Button
-
-{{< /example >}}
+`} />
## Buttons with dropdowns
-{{< example >}}
-
+
Dropdown
-
-{{< /example >}}
+`} />
## Segmented buttons
-{{< example >}}
-
-{{< /example >}}
+`} />
## Custom forms
@@ -246,8 +226,7 @@ Input groups include support for custom selects and custom file inputs. Browser
### Custom select
-{{< example >}}
-
+
Options
Choose...
@@ -285,13 +264,11 @@ Input groups include support for custom selects and custom file inputs. Browser
Three
Button
-
-{{< /example >}}
+`} />
### Custom file input
-{{< example >}}
-
+
Upload
@@ -309,11 +286,10 @@ Input groups include support for custom selects and custom file inputs. Browser
Button
-
-{{< /example >}}
+`} />
## CSS
### Sass variables
-{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
+`s, ``} />
## Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. **Requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
-{{< example >}}
-
-{{< /example >}}
+`} />
## Gutters
-By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
+By adding [gutter modifier classes]([[docsref:/layout/gutters]]), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
-{{< example >}}
-
-{{< /example >}}
+`} />
More complex layouts can also be created with the grid system.
-{{< example >}}
-
@@ -145,8 +141,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
-{{< example class="bd-example-row" >}}
-
+
1 of 2
@@ -166,15 +161,13 @@ For example, here are two grid layouts that apply to every device and viewport,
3 of 3
-
-{{< /example >}}
+
`} />
### Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
-{{< example class="bd-example-row" >}}
-
+
1 of 3
@@ -197,15 +190,13 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
3 of 3
-
-{{< /example >}}
+
`} />
### Variable width content
Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
-{{< example class="bd-example-row" >}}
-
+
1 of 3
@@ -228,8 +219,7 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
3 of 3
-
+
col
col
@@ -251,15 +240,13 @@ For grids that are the same from the smallest of devices to the largest, use the
col-8
col-4
-
+
col-sm-8
col-sm-4
@@ -269,15 +256,13 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
col-sm
col-sm
-
+
.col-md-8
@@ -296,8 +281,7 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
.col-6
.col-6
-
+
Column
Column
Column
Column
-
+
Column
Column
Column
Column
-
+
Column
Column
Column
Column
-
+
Column
Column
Column
Column
-
+
Column
Column
Column
Column
-
+
Column
Column
Column
Column
-
+
Level 1: .col-sm-3
@@ -406,8 +377,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
+
Main content
Secondary content
-
+
Custom column padding
@@ -28,13 +25,11 @@ toc: true
Custom column padding
-
+
Custom column padding
@@ -43,15 +38,13 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
Custom column padding
-
+
Custom column padding
@@ -66,15 +59,13 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
Custom column padding
-
+
Custom column padding
@@ -89,15 +80,13 @@ Use `.g-*` classes to control the horizontal and vertical grid gutters. In the e
Custom column padding
-
+
Row column
@@ -130,8 +119,7 @@ Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-
Row column
-
+
.col-sm-6 .col-md-8
.col-6 .col-md-4
- Deprecated The `alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant.
+- Deprecated The `alert-variant()` mixin is now deprecated. We now [use a Sass loop]([[docsref:/components/alerts#sass-loops]]) directly to modify the component's default CSS variables for each variant.
#### List group
- List group item variants are now styled via CSS variables.
-- Deprecated The `list-group-item-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant.
+- Deprecated The `list-group-item-variant()` mixin is now deprecated. We now [use a Sass loop]([[docsref:/components/list-group#sass-loops]]) directly to modify the component's default CSS variables for each variant.
#### Dropdowns
-- Deprecated The `.dropdown-menu-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the dropdown or any parent element. [See the docs for an example.]({{< docsref "/components/dropdowns#dark-dropdowns" >}})
+- Deprecated The `.dropdown-menu-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the dropdown or any parent element. [See the docs for an example.]([[docsref:/components/dropdowns#dark-dropdowns]])
#### Close button
-- Deprecated The `.btn-close-white` class has been deprecated and replaced with `data-bs-theme="dark"` on the close button or any parent element. [See the docs for an example.]({{< docsref "/components/close-button#dark-variant" >}})
+- Deprecated The `.btn-close-white` class has been deprecated and replaced with `data-bs-theme="dark"` on the close button or any parent element. [See the docs for an example.]([[docsref:/components/close-button#dark-variant]])
#### Navbar
-- Deprecated The `.navbar-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the navbar or any parent element. [See the docs for updated examples.]({{< docsref "/components/navbar#color-schemes" >}})
+- Deprecated The `.navbar-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the navbar or any parent element. [See the docs for updated examples.]([[docsref:/components/navbar#color-schemes]])
### Progress bars
-The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.
+The markup for [progress bars]([[docsref:/components/progress]]) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.
While we recommend adopting the new markup for improved compatibility with all screen readers, note that the legacy progress bar structure will continue to work as before.
@@ -190,7 +194,7 @@ While we recommend adopting the new markup for improved compatibility with all s
```
-We've also introduced a new `.progress-stacked` class to more logically wrap [multiple progress bars]({{< docsref "/components/progress#multiple-bars" >}}) into a single stacked progress bar.
+We've also introduced a new `.progress-stacked` class to more logically wrap [multiple progress bars]([[docsref:/components/progress#multiple-bars]]) into a single stacked progress bar.
```html
@@ -234,15 +238,15 @@ We've also introduced a new `.progress-stacked` class to more logically wrap [mu
- Adds new `.fw-medium` utility.
-- Added new [`.z-*` utilities]({{< docsref "/utilities/z-index" >}}) for `z-index`.
+- Added new [`.z-*` utilities]([[docsref:/utilities/z-index]]) for `z-index`.
-- [Box shadow utilities]({{< docsref "/utilities/shadows" >}}) (and Sass variables) have been updated for dark mode. They now use `--bs-body-color-rgb` to generate the `rgba()` color values, allowing them to easily adapt to color modes based on the specified foreground color.
+- [Box shadow utilities]([[docsref:/utilities/shadows]]) (and Sass variables) have been updated for dark mode. They now use `--bs-body-color-rgb` to generate the `rgba()` color values, allowing them to easily adapt to color modes based on the specified foreground color.
For a complete list of changes, [see the v5.3.0 project on GitHub](https://github.com/twbs/bootstrap/projects/).
## v5.2.0
-
**Hey there!** Changes to our first major release of Bootstrap 5, v5.0.0, are documented below. They don't reflect the additional changes shown above.
-{{< /callout >}}
+
### Dependencies
@@ -373,15 +377,15 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Dropped iOS Safari < 12
- Dropped Chrome < 60
-Breaking Renamed `color-yiq()` function and related variables to `color-contrast()` as it's no longer related to YIQ color space. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/)
- `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`.
@@ -440,14 +444,14 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints.
- **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities.
- - Added new [gutter class]({{< docsref "/layout/gutters" >}}) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
+ - Added new [gutter class]([[docsref:/layout/gutters]]) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
- Breaking Renamed `.no-gutters` to `.g-0` to match new gutter utilities.
- Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior.
- Breaking Dropped several `.order-*` classes that often went unused. We now only provide `.order-0` to `.order-5` out of the box.
-- Breaking Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}).
+- Breaking Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]([[docsref:/utilities/flex#media-object]]).
- Breaking `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference.
@@ -457,7 +461,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
### Content, Reboot, etc
-- **[RFS]({{< docsref "/getting-started/rfs" >}}) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._
+- **[RFS]([[docsref:/getting-started/rfs]]) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._
- Breaking Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s.
@@ -493,7 +497,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
### Forms
-- **Added new floating forms!** We've promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
+- **Added new floating forms!** We've promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]([[docsref:/forms/floating-labels]])
- Breaking **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
- `.custom-control.custom-checkbox` is now `.form-check`.
@@ -520,7 +524,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Rearranged source Sass files under `scss/forms/`, including input group styles.
-Breaking **[Toggle buttons]({{< docsref "/forms/checks-radios#toggle-buttons" >}}), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the ``. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._
+- Breaking **[Toggle buttons]([[docsref:/forms/checks-radios#toggle-buttons]]), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the ``. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._
-- Breaking **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.]({{< docsref "/components/buttons#block-buttons" >}})
+- Breaking **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.]([[docsref:/components/buttons#block-buttons]])
- Updated our `button-variant()` and `button-outline-variant()` mixins to support additional parameters.
@@ -570,13 +574,13 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Breaking Dropped `.card-columns` in favor of Masonry. [See #28922](https://github.com/twbs/bootstrap/pull/28922).
-- Breaking Replaced the `.card` based accordion with a [new Accordion component]({{< docsref "/components/accordion" >}}).
+- Breaking Replaced the `.card` based accordion with a [new Accordion component]([[docsref:/components/accordion]]).
#### Carousel
-- Added new [`.carousel-dark` variant]({{< docsref "/components/carousel#dark-variant" >}}) for dark text, controls, and indicators (great for lighter backgrounds).
+- Added new [`.carousel-dark` variant]([[docsref:/components/carousel#dark-variant]]) for dark text, controls, and indicators (great for lighter backgrounds).
-- Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons]({{< param "icons" >}}).
+- Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons]([[config:icons]]).
#### Close button
@@ -604,17 +608,17 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Breaking Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier.
-- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
+- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]([[docsref:/components/dropdowns#auto-close-behavior]]). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
- Dropdowns now support `.dropdown-item`s wrapped in ``s.
#### Jumbotron
-- Breaking Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.]({{< docsref "/examples/jumbotron" >}})
+- Breaking Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.]([[docsref:/examples/jumbotron]])
#### List group
-- Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups.
+- Added new [`.list-group-numbered` modifier]([[docsref:/components/list-group#numbered]]) to list groups.
#### Navs and tabs
@@ -627,7 +631,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
#### Offcanvas
-- Added the new [offcanvas component]({{< docsref "/components/offcanvas" >}}).
+- Added the new [offcanvas component]([[docsref:/components/offcanvas]]).
#### Pagination
@@ -649,7 +653,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
#### Toasts
-- Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}).
+- Toasts can now be [positioned]([[docsref:/components/toasts#placement]]) in a `.toast-container` with the help of [positioning utilities]([[docsref:/utilities/position]]).
- Changed default toast duration to 5 seconds.
@@ -677,11 +681,11 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Added new `.bg-body` class for quickly setting the ``'s background to additional elements.
-- Added new [position utilities]({{< docsref "/utilities/position#arrange-elements" >}}) for `top`, `right`, `bottom`, and `left`. Values include `0`, `50%`, and `100%` for each property.
+- Added new [position utilities]([[docsref:/utilities/position#arrange-elements]]) for `top`, `right`, `bottom`, and `left`. Values include `0`, `50%`, and `100%` for each property.
- Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements.
-- Added new [`border-width` utilities]({{< docsref "/utilities/borders#border-width" >}}).
+- Added new [`border-width` utilities]([[docsref:/utilities/borders#border-width]]).
- Breaking Renamed `.text-monospace` to `.font-monospace`.
@@ -697,7 +701,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Breaking Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687).
-- Added new `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]({{< docsref "/utilities/text#line-height" >}}).
+- Added new `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]([[docsref:/utilities/text#line-height]]).
- Moved the `.d-none` utility in our CSS to give it more weight over other display utilities.
@@ -705,13 +709,13 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
### Helpers
-- Breaking **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable.
+- Breaking **Responsive embed helpers have been renamed to [ratio helpers]([[docsref:/helpers/ratio]])** with new class names and improved behaviors, as well as a helpful CSS variable.
- Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
- We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element.
- The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
- - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}).
+ - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]([[docsref:/helpers/ratio#custom-ratios]]).
-- Breaking **"Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).**
+- Breaking **"Screen reader" classes are now ["visually hidden" classes]([[docsref:/helpers/visually-hidden]]).**
- Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
- Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`
- Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
diff --git a/site/content/docs/5.3/utilities/api.md b/site/src/content/docs/utilities/api.mdx
similarity index 97%
rename from site/content/docs/5.3/utilities/api.md
rename to site/src/content/docs/utilities/api.mdx
index c7c53d1165..edfb4464ec 100644
--- a/site/content/docs/5.3/utilities/api.md
+++ b/site/src/content/docs/utilities/api.mdx
@@ -1,9 +1,7 @@
---
-layout: docs
title: Utility API
description: The utility API is a Sass-based tool to generate utility classes.
-group: utilities
-aliases: "/docs/5.3/utilities/"
+aliases: "/docs/[[config:docs_version]]/utilities/"
toc: true
---
@@ -11,7 +9,7 @@ Bootstrap utilities are generated with our utility API and can be used to modify
The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
-{{< bs-table "table table-utilities" >}}
+
| Option | Type | Default value | Description |
| --- | --- | --- | --- |
| [`property`](#property) | **Required** | – | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
@@ -22,10 +20,10 @@ The `$utilities` map contains all our utilities and is later merged with your cu
| [`local-vars`](#local-css-variables) | Optional | null | Map of local CSS variables to generate in addition to the CSS rules. |
| [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate. |
| [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
-| `rfs` | Optional | `false` | Boolean to enable [fluid rescaling with RFS]({{< docsref "/getting-started/rfs" >}}). |
+| `rfs` | Optional | `false` | Boolean to enable [fluid rescaling with RFS]([[docsref:/getting-started/rfs]]). |
| [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. |
| `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. |
-{{< /bs-table >}}
+
## API explained
@@ -81,13 +79,13 @@ Output:
Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
-As a list, like with [`text-decoration` utilities]({{< docsref "/utilities/text#text-decoration" >}}):
+As a list, like with [`text-decoration` utilities]([[docsref:/utilities/text#text-decoration]]):
```scss
values: none underline line-through
```
-As a map, like with [`opacity` utilities]({{< docsref "/utilities/opacity" >}}):
+As a map, like with [`opacity` utilities]([[docsref:/utilities/opacity]]):
```scss
values: (
@@ -99,7 +97,7 @@ values: (
)
```
-As a Sass variable that sets the list or map, as in our [`position` utilities]({{< docsref "/utilities/position" >}}):
+As a Sass variable that sets the list or map, as in our [`position` utilities]([[docsref:/utilities/position]]):
```scss
values: $position-values
@@ -254,7 +252,7 @@ Output:
### Responsive
-Add the `responsive` boolean to generate responsive utilities (e.g., `.opacity-md-25`) across [all breakpoints]({{< docsref "/layout/breakpoints" >}}).
+Add the `responsive` boolean to generate responsive utilities (e.g., `.opacity-md-25`) across [all breakpoints]([[docsref:/layout/breakpoints]]).
```scss
$utilities: (
diff --git a/site/content/docs/5.3/utilities/background.md b/site/src/content/docs/utilities/background.mdx
similarity index 59%
rename from site/content/docs/5.3/utilities/background.md
rename to site/src/content/docs/utilities/background.mdx
index 1239261b43..4cc6db4e29 100644
--- a/site/content/docs/5.3/utilities/background.md
+++ b/site/src/content/docs/utilities/background.mdx
@@ -1,37 +1,31 @@
---
-layout: docs
title: Background
description: Convey meaning through `background-color` and add decoration with gradients.
-group: utilities
toc: true
---
-{{< callout info >}}
-{{< partial "callouts/warning-color-assistive-technologies.md" >}}
-{{< /callout >}}
+import { getData } from '@libs/data'
+
+
Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6.
-{{< /callout >}}
+
-{{< example >}}
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-.bg-{{ .name }}
-.bg-{{ .name }}-subtle
-{{- end -}}
-{{< /colors.inline >}}
-.bg-body-secondary
+ `.bg-${themeColor.name}
+.bg-${themeColor.name}-subtle
`),
+ `.bg-body-secondary
.bg-body-tertiary
.bg-body
.bg-black
.bg-white
-.bg-transparent
-{{< /example >}}
+.bg-transparent
`
+]} />
## Background gradient
@@ -39,18 +33,16 @@ By adding a `.bg-gradient` class, a linear gradient is added as background image
Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`.
-{{< markdown >}}
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-.bg-{{ .name }}.bg-gradient
-{{- end -}}
-{{< /colors.inline >}}
+{getData('theme-colors').map((themeColor) => {
+ return (
+ .bg-{themeColor.name}.bg-gradient {themeColor.contrast_color}
+ )
+})}
.bg-black.bg-gradient
-{{< /markdown >}}
## Opacity
-{{< added-in "5.1.0" >}}
+This is default success background
-This is 50% opacity success background
-{{< /example >}}
+This is default success background
+This is 50% opacity success background
`} />
Or, choose from any of the `.bg-opacity` utilities:
-{{< example >}}
-This is default success background
+This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
-This is 10% opacity success background
-{{< /example >}}
+This is 10% opacity success background
`} />
## CSS
-In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
+In addition to the following Sass functionality, consider reading about our included [CSS custom properties]([[docsref:/customize/css-variables]]) (aka CSS variables) for colors and more.
### Sass variables
Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
+
+
+
+Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6.
+
+
+Change the border color using utilities built on our theme colors.
+
+ `
+ Email address
+
+ Dangerous heading
+
+
+
+ Changing border color and width
+
`} />
+
+## Opacity
+
+This is default success border
+This is 50% opacity success border
`} />
+
+Or, choose from any of the `.border-opacity` utilities:
+
+This is default success border
+This is 75% opacity success border
+This is 50% opacity success border
+This is 25% opacity success border
+This is 10% opacity success border
`} />
+
+## Width
+
+
+
Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
-{{< /callout >}}
-
-{{< example >}}
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-.text-{{ .name }}
-.text-{{ .name }}-emphasis
-{{- end -}}
-{{< /colors.inline >}}
+
+ `.text-${themeColor.name}
+.text-${themeColor.name}-emphasis
`),
+ `
.text-body
.text-body-emphasis
.text-body-secondary
@@ -34,20 +28,20 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
.text-black
.text-white
.text-black-50
-.text-white-50
-{{< /example >}}
+.text-white-50
`
+]} />
-{{< callout warning >}}
+
**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
-{{< /callout >}}
+
-{{< callout warning >}}
+
**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
-{{< /callout >}}
+
## Opacity
-{{< added-in "5.1.0" >}}
+This is default primary text
-This is 50% opacity primary text
-{{< /example >}}
+This is default primary text
+This is 50% opacity primary text
`} />
Or, choose from any of the `.text-opacity` utilities:
-{{< example >}}
-This is default primary text
+This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
-This is 25% opacity primary text
-{{< /example >}}
+This is 25% opacity primary text
`} />
## Specificity
@@ -88,54 +78,54 @@ Sometimes contextual classes cannot be applied due to the specificity of another
## CSS
-In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
+In addition to the following Sass functionality, consider reading about our included [CSS custom properties]([[docsref:/customize/css-variables]]) (aka CSS variables) for colors and more.
### Sass variables
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
+d-inline
-d-inline
-{{< /example >}}
+d-inline
+d-inline
`} />
-{{< example >}}
-d-block
-d-block
-{{< /example >}}
+d-block
+d-block `} />
## Hiding elements
@@ -57,7 +51,7 @@ To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,x
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
-{{< bs-table >}}
+
| Screen size | Class |
| --- | --- |
| Hidden on all | `.d-none` |
@@ -74,12 +68,10 @@ To show an element only on a given interval of screen sizes you can combine one
| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
| Visible only on xxl | `.d-none .d-xxl-block` |
-{{< /bs-table >}}
+
-{{< example >}}
-hide on lg and wider screens
-hide on screens smaller than lg
-{{< /example >}}
+hide on lg and wider screens
+hide on screens smaller than lg
`} />
## Display in print
@@ -99,16 +91,14 @@ Change the `display` value of elements when printing with our print display util
The print and display classes can be combined.
-{{< example >}}
-Screen Only (Hide on print only)
+Screen Only (Hide on print only)
Print Only (Hide on screen only)
-Hide up to large on screen, but always show on print
-{{< /example >}}
+Hide up to large on screen, but always show on print
`} />
## CSS
### Sass utilities API
-Display utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+Display utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
-{{< scss-docs name="utils-display" file="scss/_utilities.scss" >}}
+I'm a flexbox container!
-{{< /example >}}
+I'm a flexbox container!`} />
-{{< example class="bd-example-flex" >}}
-I'm an inline flexbox container!
-{{< /example >}}
+I'm an inline flexbox container!`} />
Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.d{{ .abbr }}-flex`
-- `.d{{ .abbr }}-inline-flex`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
+
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .d{breakpoint.abbr}-flex.d{breakpoint.abbr}-inline-flex
+ )
+})}
+
## Direction
@@ -35,8 +34,7 @@ Set the direction of flex items in a flex container with direction utilities. In
Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
-{{< example class="bd-example-flex" >}}
-
+
Flex item 1
Flex item 2
Flex item 3
@@ -45,13 +43,11 @@ Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-r
Flex item 1
Flex item 2
Flex item 3
-
+
Flex item 1
Flex item 2
Flex item 3
@@ -60,21 +56,21 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
Flex item 1
Flex item 2
Flex item 3
-
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .flex{breakpoint.abbr}-row.flex{breakpoint.abbr}-row-reverse.flex{breakpoint.abbr}-column-reverse
+ )
+})}
+
## Justify content
@@ -124,18 +120,20 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
Responsive variations also exist for `justify-content`.
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.justify-content{{ .abbr }}-start`
-- `.justify-content{{ .abbr }}-end`
-- `.justify-content{{ .abbr }}-center`
-- `.justify-content{{ .abbr }}-between`
-- `.justify-content{{ .abbr }}-around`
-- `.justify-content{{ .abbr }}-evenly`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
+
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .justify-content{breakpoint.abbr}-start.justify-content{breakpoint.abbr}-end.justify-content{breakpoint.abbr}-center.justify-content{breakpoint.abbr}-between.justify-content{breakpoint.abbr}-around.justify-content{breakpoint.abbr}-evenly
+ )
+})}
+
## Align items
@@ -179,17 +177,19 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
Responsive variations also exist for `align-items`.
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.align-items{{ .abbr }}-start`
-- `.align-items{{ .abbr }}-end`
-- `.align-items{{ .abbr }}-center`
-- `.align-items{{ .abbr }}-baseline`
-- `.align-items{{ .abbr }}-stretch`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
+
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .align-items{breakpoint.abbr}-start.align-items{breakpoint.abbr}-end.align-items{breakpoint.abbr}-center.align-items{breakpoint.abbr}-baseline.align-items{breakpoint.abbr}-stretch
+ )
+})}
+
## Align self
@@ -233,78 +233,75 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Responsive variations also exist for `align-self`.
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.align-self{{ .abbr }}-start`
-- `.align-self{{ .abbr }}-end`
-- `.align-self{{ .abbr }}-center`
-- `.align-self{{ .abbr }}-baseline`
-- `.align-self{{ .abbr }}-stretch`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
+
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .align-self{breakpoint.abbr}-start.align-self{breakpoint.abbr}-end.align-self{breakpoint.abbr}-center.align-self{breakpoint.abbr}-baseline.align-self{breakpoint.abbr}-stretch
+ )
+})}
+
## Fill
Use the `.flex-fill` class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
-{{< example class="bd-example-flex" >}}
-
+
Flex item with a lot of content
Flex item
Flex item
-
+{getData('breakpoints').map((breakpoint) => {
+ return (
+ .flex{breakpoint.abbr}-fill
## Grow and shrink
Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
-{{< example class="bd-example-flex" >}}
-
+
Flex item
Flex item
Third flex item
-
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-0.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-1
+ )
+})}
+
## Auto margins
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
-{{< example class="bd-example-flex" >}}
-
+
Flex item
Flex item
Flex item
@@ -320,15 +317,13 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
Flex item
Flex item
Flex item
-
+
Flex item
Flex item
Flex item
@@ -338,8 +333,7 @@ Vertically move one flex item to the top or bottom of a container by mixing `ali
Flex item
Flex item
Flex item
-
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .flex{breakpoint.abbr}-nowrap.flex{breakpoint.abbr}-wrap.flex{breakpoint.abbr}-wrap-reverse
+ )
+})}
+
## Order
Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
-{{< example class="bd-example-flex" >}}
-
+
First flex item
Second flex item
Third flex item
-
+{getData('breakpoints').map((breakpoint) => getSequence(0, 5).map((value) => {
+ return (
+ .order{breakpoint.abbr}-{value}
Additionally there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $bp := $.Site.Data.breakpoints -}}
-{{- range (slice "first" "last") }}
-- `.order{{ $bp.abbr }}-{{ . }}`
-{{- end -}}
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
+
+{getData('breakpoints').map((breakpoint) => ['first', 'last'].map((value) => {
+ return (
+ .order{breakpoint.abbr}-{value}
## Align content
@@ -614,51 +604,49 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
Responsive variations also exist for `align-content`.
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.align-content{{ .abbr }}-start`
-- `.align-content{{ .abbr }}-end`
-- `.align-content{{ .abbr }}-center`
-- `.align-content{{ .abbr }}-between`
-- `.align-content{{ .abbr }}-around`
-- `.align-content{{ .abbr }}-stretch`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
+
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .align-content{breakpoint.abbr}-start.align-content{breakpoint.abbr}-end.align-content{breakpoint.abbr}-center.align-content{breakpoint.abbr}-between.align-content{breakpoint.abbr}-around.align-content{breakpoint.abbr}-stretch
+ )
+})}
+
## Media object
Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
-{{< example >}}
-
+
- {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
+
This is some content from a media component. You can replace this with any content and adjust it as needed.
-
+
- {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
+
This is some content from a media component. You can replace this with any content and adjust it as needed.
- Float start on all viewport sizes
Float start on all viewport sizesFloat end on all viewport sizes
Don't float on all viewport sizes
-{{< /example >}}
+Don't float on all viewport sizes
`} />
-Use the [clearfix helper]({{< docsref "/helpers/clearfix" >}}) on a parent element to clear floats.
+Use the [clearfix helper]([[docsref:/helpers/clearfix]]) on a parent element to clear floats.
## Responsive
Responsive variations also exist for each `float` value.
-{{< example >}}
-Float end on viewports sized SM (small) or wider
Float end on viewports sized SM (small) or widerFloat end on viewports sized MD (medium) or wider
Float end on viewports sized LG (large) or wider
Float end on viewports sized XL (extra large) or wider
Float end on viewports sized XXL (extra extra large) or wider
Float end on viewports sized XXL (extra extra large) or wider
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .float{breakpoint.abbr}-start.float{breakpoint.abbr}-end.float{breakpoint.abbr}-none
+ )
+})}
+
## CSS
### Sass utilities API
-Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
-{{< scss-docs name="utils-float" file="scss/_utilities.scss" >}}
+This paragraph will be entirely selected when clicked by the user.
+This paragraph will be entirely selected when clicked by the user.
This paragraph has default select behavior.
-This paragraph will not be selectable when clicked by the user.
-{{< /example >}}
+This paragraph will not be selectable when clicked by the user.
`} />
## Pointer events
Bootstrap provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
-{{< example >}}
-This link can not be clicked.
+This link can not be clicked.
This link can be clicked (this is default behavior).
-This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.
-{{< /example >}}
+This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.
`} />
The `.pe-none` class (and the `pointer-events` CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with `.pe-none` are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as `tabindex="-1"` (to prevent them from receiving keyboard focus) and `aria-disabled="true"` (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable.
@@ -37,6 +31,6 @@ If possible, the simpler solution is:
### Sass utilities API
-Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
-{{< scss-docs name="utils-interaction" file="scss/_utilities.scss" >}}
+Link opacity 10
+Link opacity 10
Link opacity 25
Link opacity 50
Link opacity 75
-Link opacity 100
-{{< /example >}}
+Link opacity 100
`} />
You can even change the opacity level on hover.
-{{< example >}}
-Link hover opacity 10
+Link hover opacity 10
Link hover opacity 25
Link hover opacity 50
Link hover opacity 75
-Link hover opacity 100
-{{< /example >}}
+Link hover opacity 100
`} />
## Link underlines
@@ -36,71 +32,53 @@ You can even change the opacity level on hover.
Change the underline's color independent of the link text color.
-{{< example >}}
-{{< link-underline-colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-{{ .name | title }} underline
-{{- end -}}
-{{< /link-underline-colors.inline >}}
-{{< /example >}}
+ `${themeColor.title} underline
`)} />
### Underline offset
Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`.
-{{< example >}}
-Default link
+Default link
Offset 1 link
Offset 2 link
-Offset 3 link
-{{< /example >}}
+Offset 3 link
`} />
### Underline opacity
Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity.
-{{< example >}}
-Underline opacity 0
+Underline opacity 0
Underline opacity 10
Underline opacity 25
Underline opacity 50
Underline opacity 75
-Underline opacity 100
-{{< /example >}}
+Underline opacity 100
`} />
### Hover variants
Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles.
-{{< example >}}
Underline opacity 0
-{{< /example >}}
## Colored links
-[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
+[Colored link helpers]([[docsref:/helpers/colored-links/]]) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
-{{< example >}}
-{{< colored-links.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-{{ .name | title }} link
-{{- end -}}
-{{< /colored-links.inline >}}
-Emphasis link
-{{< /example >}}
+ `${themeColor.title} link
`),
+ `Emphasis link
`
+]} />
-{{< callout info >}}
-{{< partial "callouts/warning-color-assistive-technologies.md" >}}
-{{< /callout >}}
+`, should be resized to fit its container.
+toc: true
+added:
+ version: "5.3"
+---
+
+## How it works
+
+Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
+
+Classes for the value of `object-fit` are named using the format `.object-fit-{value}`. Choose from the following values:
+
+- `contain`
+- `cover`
+- `fill`
+- `scale` (for scale-down)
+- `none`
+
+## Examples
+
+Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element):
+
+` elements.
+
+```html
+
+
@@ -65,13 +60,11 @@ This class applies the transformations `translateX(-50%)` and `translateY(-50%)`
-
+
@@ -81,15 +74,13 @@ By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can b
-
+
Mails +99 unread messages
@@ -99,21 +90,18 @@ Here are some real life examples of these classes:
Alerts unread messages
-{{< /example >}}
+`} />
You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the `$position-values` variable.
-{{< example class="bd-example-position-examples" >}}
-
-{{< /example >}}
+`} />
## CSS
@@ -121,10 +109,10 @@ You can use these classes with existing components to create new ones. Remember
Default position utility values are declared in a Sass map, then used to generate our utilities.
-{{< scss-docs name="position-map" file="scss/_variables.scss" >}}
+No shadow
+No shadow
Small shadow
Regular shadow
-Larger shadow
-{{< /example >}}
+Larger shadow
`} />
## CSS
### Sass variables
-{{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}
+Width 25%
+Width 25%
Width 50%
Width 75%
Width 100%
-Width auto
-{{< /example >}}
+Width auto
`} />
-{{< example class="bd-example-flex" >}}
-
+
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
-
**Using the CSS Grid layout module?** Consider using [the gap utility](#gap) instead.
-{{< /callout >}}
+
### Notation
@@ -102,14 +100,12 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
-{{< example class="bd-example-cssgrid" >}}
-
+
Grid item 1
Grid item 2
Grid item 3
Grid item 4
-
+
Grid item 1
Grid item 2
Grid item 3
Grid item 4
-
+
Grid item 1
Grid item 2
Grid item 3
Grid item 4
- Start aligned text on all viewport sizes.
+Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
@@ -19,52 +16,43 @@ Easily realign text to components with text alignment classes. For start, end, a
End aligned text on viewports sized MD (medium) or wider.
End aligned text on viewports sized LG (large) or wider.
End aligned text on viewports sized XL (extra large) or wider.
-End aligned text on viewports sized XXL (extra extra large) or wider.
-{{< /example >}}
+End aligned text on viewports sized XXL (extra extra large) or wider.
`} />
-{{< callout info >}}
+
Note that we don't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
-{{< /callout >}}
+
## Text wrapping and overflow
Wrap text with a `.text-wrap` class.
-{{< example >}}
-
+
This text should wrap.
-
-{{< /example >}}
+`} />
Prevent text from wrapping with a `.text-nowrap` class.
-{{< example >}}
-
+
This text should overflow the parent.
-
-{{< /example >}}
+`} />
## Word break
Prevent long strings of text from breaking your components' layout by using `.text-break` to set `word-wrap: break-word` and `word-break: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support, and add the deprecated `word-break: break-word` to avoid issues with flex containers.
-{{< example >}}
-mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
-{{< /example >}}
+mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm`} />
-{{< callout warning >}}
+
Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts/rtl-styling#3.-line-break), which is the most used RTL language. Therefore `.text-break` is removed from our RTL compiled CSS.
-{{< /callout >}}
+
## Text transform
Transform text in components with our text capitalization classes: `text-lowercase`, `text-uppercase` or `text-capitalize`.
-{{< example >}}
-Lowercased text.
+Lowercased text.
Uppercased text.
-CapiTaliZed text.
-{{< /example >}}
+CapiTaliZed text.
`} />
Note how `.text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
@@ -72,14 +60,12 @@ Note how `.text-capitalize` only changes the first letter of each word, leaving
Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`–`.h6`) apply `font-size`, `font-weight`, and `line-height`, these utilities _only_ apply `font-size`. Sizing for these utilities matches HTML's heading elements, so as the number increases, their size decreases.
-{{< example >}}
-.fs-1 text
+.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
-.fs-6 text
-{{< /example >}}
+.fs-6 text
`} />
Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
@@ -87,8 +73,7 @@ Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
Quickly change the `font-weight` or `font-style` of text with these utilities. `font-style` utilities are abbreviated as `.fst-*` and `font-weight` utilities are abbreviated as `.fw-*`.
-{{< example >}}
-Bold text.
+Bold text.
Bolder weight text (relative to the parent element).
Semibold weight text.
Medium weight text.
@@ -96,47 +81,38 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. `
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
-Text with normal font style
-{{< /example >}}
+Text with normal font style
`} />
## Line height
Change the line height with `.lh-*` utilities.
-{{< example >}}
-This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
+This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
-This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
-{{< /example >}}
+This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
`} />
## Monospace
Change a selection to our monospace font stack with `.font-monospace`.
-{{< example >}}
-This is in monospace
-{{< /example >}}
+This is in monospace`} />
## Reset color
Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
-{{< example >}}
-
+
Secondary body text with a reset link .
-
-{{< /example >}}
+`} />
## Text decoration
Decorate text in components with text decoration classes.
-{{< example >}}
-This text has a line underneath it.
+This text has a line underneath it.
This text has a line going through it.
-This link has its text decoration removed
-{{< /example >}}
+This link has its text decoration removed `} />
## CSS
@@ -144,18 +120,18 @@ Decorate text in components with text decoration classes.
Default type and font related Sass variables:
-{{< scss-docs name="font-variables" file="scss/_variables.scss" >}}
+`s and more), use our [flex box utilities]({{< docsref "/utilities/flex#align-items" >}}).
+To vertically center non-inline content (like `
`s and more), use our [flex box utilities]([[docsref:/utilities/flex#align-items]]).
With inline elements:
-{{< example >}}
-
baseline
+
baseline
top
middle
bottom
text-top
-text-bottom
-{{< /example >}}
+text-bottom `} />
With table cells:
-{{< example >}}
-
+
baseline
@@ -36,13 +31,12 @@ With table cells:
text-bottom
-
-{{< /example >}}
+
`} />
## CSS
### Sass utilities API
-Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
-{{< scss-docs name="utils-vertical-align" file="scss/_utilities.scss" >}}
+
Elements with the `.invisible` class will be hidden *both* visually and for assistive technology/screen reader users.
-{{< /callout >}}
+
Apply `.visible` or `.invisible` as needed.
@@ -32,6 +30,6 @@ Apply `.visible` or `.invisible` as needed.
### Sass utilities API
-Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
-{{< scss-docs name="utils-visibility" file="scss/_utilities.scss" >}}
+
We call these "low-level" `z-index` utilities because of their default values of `-1` through `3`, which we use for the layout of overlapping components. High-level `z-index` values are used for overlay components like modals and tooltips.
-{{< /callout >}}
+
-{{< example class="bd-example-zindex-levels position-relative" >}}
-z-3
+z-3
z-2
z-1
z-0
-z-n1
-{{< /example >}}
+z-n1
`} />
## Overlays
Bootstrap overlay components—dropdown, modal, offcanvas, popover, toast, and tooltip—all have their own `z-index` values to ensure a usable experience with competing "layers" of an interface.
-Read about them in the [`z-index` layout page]({{< docsref "/layout/z-index" >}}).
+Read about them in the [`z-index` layout page]([[docsref:/layout/z-index]]).
## Component approach
On some components, we use our low-level `z-index` values to manage repeating elements that overlap one another (like buttons in a button group or items in a list group).
-Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scales" >}}).
+Learn about our [`z-index` approach]([[docsref:/extend/approach#z-index-scales]]).
## CSS
@@ -42,10 +38,10 @@ Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scale
Customize this Sass map to change the available values and generated utilities.
-{{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}}
+['data']> }
+
+const { frontmatter, layout, overrides, robots } = Astro.props
+
+const title = Astro.props.title ?? frontmatter?.title ?? getConfig().title
+const description = frontmatter?.description ? stripMarkdown(frontmatter.description) : getConfig().description
+const thumbnail = frontmatter?.thumbnail ? `img/${frontmatter.thumbnail}` : 'brand/bootstrap-social.png'
+
+const bodyProps = overrides?.body ?? {}
+const mainProps = overrides?.main ?? {}
+---
+
+
+
+
+
+
+
+
+
+ {
+ Astro.slots.has('main') ? (
+
+
+ )
+ }
+
+
+
+
+
+
+
+
+
+ {
+ // This is needed because we want to show the badge if show_badge isn't present or is set to false
+ frontmatter.added &&
+ ((frontmatter.added.show_badge !== undefined && frontmatter.added.show_badge === true) ||
+ frontmatter.added.show_badge === undefined) && (
+
+ Added in v{frontmatter.added.version}
+
+ )
+ }
+
+ View on GitHub
+
+
+
{frontmatter.title}
+
+
+ {frontmatter.description &&
+
+
+
+ On this page
+
+
+
+
On this page
+
+
+
+ {
+ frontmatter.sections && (
+
+ {frontmatter.sections.map((section) => (
+
+ ))}
+
+ )
+ }
+
+
+
+
diff --git a/site/src/layouts/ExamplesLayout.astro b/site/src/layouts/ExamplesLayout.astro
new file mode 100644
index 0000000000..60fe0e6283
--- /dev/null
+++ b/site/src/layouts/ExamplesLayout.astro
@@ -0,0 +1,151 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import { getVersionedBsJsProps } from '@libs/bootstrap'
+import { getConfig } from '@libs/config'
+import type { ExampleFrontmatter } from '@libs/examples'
+import { getVersionedDocsPath } from '@libs/path'
+import Stylesheet from '@components/head/Stylesheet.astro'
+import Favicons from '@components/head/Favicons.astro'
+import ThemeToggler from '@layouts/partials/ThemeToggler.astro'
+import Icons from '@layouts/partials/Icons.astro'
+
+type Props = ExampleFrontmatter
+
+const { body_class, direction, extra_css, extra_js, html_class, include_js, title = 'Example' } = Astro.props
+
+const pageTitle = `${title} · ${getConfig().title} v${getConfig().docs_version}`
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site)
+
+const htmlProps: HTMLAttributes<'html'> = direction === 'rtl' ? { lang: 'ar', dir: 'rtl' } : { lang: 'en' }
+---
+
+
+
+
+ {pageTitle}
+
+
+
+
+
+
+ {extra_js?.map((js) => (
+
+ ))}
+
+ )
+ }
+
+
diff --git a/site/src/layouts/RedirectLayout.astro b/site/src/layouts/RedirectLayout.astro
new file mode 100644
index 0000000000..3163c06aa1
--- /dev/null
+++ b/site/src/layouts/RedirectLayout.astro
@@ -0,0 +1,23 @@
+---
+import { getConfig } from '@libs/config'
+
+interface Props {
+ path: string
+}
+
+const { path } = Astro.props
+
+const url = new URL(path, Astro.site)
+---
+
+
+
+
+ {getConfig().title}
+
+
+
+
+
+
+
{title}
+
{description}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site/src/layouts/partials/BsThemes.astro b/site/src/layouts/partials/BsThemes.astro
new file mode 100644
index 0000000000..671acad1f7
--- /dev/null
+++ b/site/src/layouts/partials/BsThemes.astro
@@ -0,0 +1,30 @@
+---
+import { getConfig } from '@libs/config'
+import { getVersionedDocsPath } from '@libs/path'
+import DropletFillIcon from '@components/icons/DropletFillIcon.astro'
+import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
+---
+
+
+
+
+
+
Go further with Bootstrap Themes
+
+ Need something more than these examples? Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace . They’re built as their own extended frameworks, rich with new components and plugins, documentation, and
+ powerful build tools.
+
+
Browse themes
+
+
+
+
{category}
+
{description}
+ {category === 'RTL' && (
+
+
+ RTL is still experimental and will evolve with feedback. Spotted something or have an
+ improvement to suggest?
+
+
+ Please open an issue.
+
+
+ )}
+
+ {examples.map((example, index) => {
+ if (external) {
+ return (
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+ {example.name}
+
+ {example.description}
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site/src/layouts/partials/ResponsiveImage.astro b/site/src/layouts/partials/ResponsiveImage.astro
new file mode 100644
index 0000000000..9dbbaeb88f
--- /dev/null
+++ b/site/src/layouts/partials/ResponsiveImage.astro
@@ -0,0 +1,36 @@
+---
+// TODO(Astro migration): This Astro component could be improved to implement the equivalent of Hugo's `imageConfig`
+// and calculate the width and height of the image automatically
+
+import { getVersionedDocsPath } from '@libs/path'
+
+interface Props {
+ imgPath: string
+ alt: string
+ classes?: string
+ lazyload?: boolean
+ width?: number
+ height?: number
+}
+
+const { imgPath, alt, classes = '', lazyload = true, width, height } = Astro.props
+
+const classNames = ['img-fluid', 'mx-auto', classes].filter(Boolean).join(' ')
+
+const basePath = getVersionedDocsPath(imgPath.split('/').slice(0, -1).join('/'))
+const basename = imgPath.split('/').pop()?.split('.')[0] || ''
+const ext = imgPath.includes('.') ? `.${imgPath.split('.').pop()}` : ''
+
+const imgPath1x = `${basePath}/${basename}${ext}`
+const imgPath2x = `${basePath}/${basename}@2x${ext}`
+---
+
+
+ Toggle theme
+
+
diff --git a/site/src/libs/astro.ts b/site/src/libs/astro.ts
new file mode 100644
index 0000000000..ba534e2e63
--- /dev/null
+++ b/site/src/libs/astro.ts
@@ -0,0 +1,195 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { rehypeHeadingIds } from '@astrojs/markdown-remark'
+import mdx from '@astrojs/mdx'
+import sitemap from '@astrojs/sitemap'
+import type { AstroIntegration } from 'astro'
+import autoImport from 'astro-auto-import'
+import type { Element } from 'hast'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import { getConfig } from './config'
+import { rehypeBsTable } from './rehype'
+import { remarkBsConfig, remarkBsDocsref } from './remark'
+import { configurePrism } from './prism'
+import {
+ docsDirectory,
+ getDocsFsPath,
+ getDocsPublicFsPath,
+ getDocsStaticFsPath,
+ validateVersionedDocsPaths,
+} from './path'
+
+// A list of directories in `src/components` that contains components that will be auto imported in all pages for
+// convenience.
+// Note: adding a new component to one of the existing directories requires a restart of the dev server.
+const autoImportedComponentDirectories = ['shortcodes']
+
+// A list of static file paths that will be aliased to a different path.
+const staticFileAliases = {
+ '/docs/[version]/assets/img/favicons/apple-touch-icon.png': '/apple-touch-icon.png',
+ '/docs/[version]/assets/img/favicons/favicon.ico': '/favicon.ico',
+}
+
+// A list of pages that will be excluded from the sitemap.
+const sitemapExcludes = ['/404', '/docs', `/docs/${getConfig().docs_version}`]
+
+const headingsRangeRegex = new RegExp(`^h[${getConfig().anchors.min}-${getConfig().anchors.max}]$`)
+
+export function bootstrap(): AstroIntegration[] {
+ const sitemapExcludedUrls = sitemapExcludes.map((url) => `${getConfig().baseURL}${url}/`)
+
+ configurePrism()
+
+ return [
+ bootstrap_auto_import(),
+ {
+ name: 'bootstrap-integration',
+ hooks: {
+ 'astro:config:setup': ({ addWatchFile, updateConfig }) => {
+ // Reload the config when the integration is modified.
+ addWatchFile(path.join(getDocsFsPath(), 'src/libs/astro.ts'))
+
+ // Add the remark and rehype plugins.
+ updateConfig({
+ markdown: {
+ rehypePlugins: [
+ rehypeHeadingIds,
+ [
+ rehypeAutolinkHeadings,
+ {
+ behavior: 'append',
+ content: [{ type: 'text', value: ' ' }],
+ properties: { class: 'anchor-link' },
+ test: (element: Element) => element.tagName.match(headingsRangeRegex),
+ },
+ ],
+ rehypeBsTable,
+ ],
+ remarkPlugins: [remarkBsConfig, remarkBsDocsref],
+ },
+ })
+ },
+ 'astro:config:done': () => {
+ cleanPublicDirectory()
+ copyBootstrap()
+ copyStatic()
+ aliasStatic()
+ },
+ 'astro:build:done': ({ dir }) => {
+ validateVersionedDocsPaths(dir)
+ },
+ },
+ },
+ // https://github.com/withastro/astro/issues/6475
+ mdx() as AstroIntegration,
+ sitemap({
+ filter: (page) => sitemapFilter(page, sitemapExcludedUrls),
+ }),
+ ]
+}
+
+function bootstrap_auto_import() {
+ const autoImportedComponents: string[] = []
+ const autoImportedComponentDefinitions: string[] = []
+
+ for (const autoImportedComponentDirectory of autoImportedComponentDirectories) {
+ const components = fs.readdirSync(path.join(getDocsFsPath(), 'src/components', autoImportedComponentDirectory), {
+ withFileTypes: true,
+ })
+
+ for (const component of components) {
+ if (component.isFile()) {
+ autoImportedComponents.push(
+ `./${path.posix.join(docsDirectory, 'src/components', autoImportedComponentDirectory, component.name)}`
+ )
+
+ if (component.name.endsWith('.astro')) {
+ autoImportedComponentDefinitions.push(
+ `export const ${component.name.replace('.astro', '')}: typeof import('@shortcodes/${
+ component.name
+ }').default`
+ )
+ }
+ }
+ }
+ }
+
+ const autoImportedComponentDefinition = `/**
+ * DO NOT EDIT THIS FILE MANUALLY.
+ *
+ * This file is automatically generated by the Boostrap Astro Integration.
+ * It contains the type definitions for the components that are auto imported in all pages.
+ * @see site/src/libs/astro.ts
+ */
+export declare global {
+ ${autoImportedComponentDefinitions.join('\n ')}
+}
+`
+
+ fs.writeFileSync(path.join(getDocsFsPath(), 'src/types/auto-import.d.ts'), autoImportedComponentDefinition)
+
+ return autoImport({
+ imports: autoImportedComponents,
+ })
+}
+
+function cleanPublicDirectory() {
+ fs.rmSync(getDocsPublicFsPath(), { force: true, recursive: true })
+}
+
+// Copy the `dist` folder from the root of the repo containing the latest version of Bootstrap to make it available from
+// the `/docs/${docs_version}/dist` URL.
+function copyBootstrap() {
+ const source = path.join(process.cwd(), 'dist')
+ const destination = path.join(getDocsPublicFsPath(), 'docs', getConfig().docs_version, 'dist')
+
+ fs.mkdirSync(destination, { recursive: true })
+ fs.cpSync(source, destination, { recursive: true })
+}
+
+// Copy the content as-is of the `static` folder to make it available from the `/` URL.
+// A folder named `[version]` will automatically be renamed to the current version of the docs extracted from the
+// `config.yml` file.
+function copyStatic() {
+ const source = getDocsStaticFsPath()
+ const destination = path.join(getDocsPublicFsPath())
+
+ copyStaticRecursively(source, destination)
+}
+
+// Alias (copy) some static files to different paths.
+function aliasStatic() {
+ const source = getDocsStaticFsPath()
+ const destination = path.join(getDocsPublicFsPath())
+
+ for (const [aliasSource, aliasDestination] of Object.entries(staticFileAliases)) {
+ fs.cpSync(path.join(source, aliasSource), path.join(destination, aliasDestination))
+ }
+}
+
+// See `copyStatic()` for more details.
+function copyStaticRecursively(source: string, destination: string) {
+ const entries = fs.readdirSync(source, { withFileTypes: true })
+
+ for (const entry of entries) {
+ if (entry.isFile()) {
+ fs.cpSync(path.join(source, entry.name), replacePathVersionPlaceholder(path.join(destination, entry.name)))
+ } else if (entry.isDirectory()) {
+ fs.mkdirSync(replacePathVersionPlaceholder(path.join(destination, entry.name)), { recursive: true })
+
+ copyStaticRecursively(path.join(source, entry.name), path.join(destination, entry.name))
+ }
+ }
+}
+
+function replacePathVersionPlaceholder(name: string) {
+ return name.replace('[version]', getConfig().docs_version)
+}
+
+function sitemapFilter(page: string, excludedUrls: string[]) {
+ if (excludedUrls.includes(page)) {
+ return false
+ }
+
+ return true
+}
diff --git a/site/src/libs/bootstrap.ts b/site/src/libs/bootstrap.ts
new file mode 100644
index 0000000000..77509c8eb2
--- /dev/null
+++ b/site/src/libs/bootstrap.ts
@@ -0,0 +1,48 @@
+import type { HTMLAttributes } from 'astro/types'
+import { getConfig } from '@libs/config'
+import { getVersionedDocsPath } from '@libs/path'
+
+export function getVersionedBsCssProps(direction: 'rtl' | undefined) {
+ let bsCssLinkHref = '/dist/css/bootstrap'
+
+ if (direction === 'rtl') {
+ bsCssLinkHref = `${bsCssLinkHref}.rtl`
+ }
+
+ if (import.meta.env.PROD) {
+ bsCssLinkHref = `${bsCssLinkHref}.min`
+ }
+
+ bsCssLinkHref = `${bsCssLinkHref}.css`
+
+ const bsCssLinkProps: HTMLAttributes<'link'> = {
+ href: getVersionedDocsPath(bsCssLinkHref),
+ rel: 'stylesheet',
+ }
+
+ if (import.meta.env.PROD) {
+ bsCssLinkProps.integrity = direction === 'rtl' ? getConfig().cdn.css_rtl_hash : getConfig().cdn.css_hash
+ }
+
+ return bsCssLinkProps
+}
+
+export function getVersionedBsJsProps() {
+ let bsJsScriptSrc = '/dist/js/bootstrap.bundle'
+
+ if (import.meta.env.PROD) {
+ bsJsScriptSrc = `${bsJsScriptSrc}.min`
+ }
+
+ bsJsScriptSrc = `${bsJsScriptSrc}.js`
+
+ const bsJsLinkProps: HTMLAttributes<'script'> = {
+ src: getVersionedDocsPath(bsJsScriptSrc),
+ }
+
+ if (import.meta.env.PROD) {
+ bsJsLinkProps.integrity = getConfig().cdn.js_bundle_hash
+ }
+
+ return bsJsLinkProps
+}
diff --git a/site/src/libs/config.ts b/site/src/libs/config.ts
new file mode 100644
index 0000000000..320013d90d
--- /dev/null
+++ b/site/src/libs/config.ts
@@ -0,0 +1,89 @@
+import fs from 'node:fs'
+import yaml from 'js-yaml'
+import { z } from 'zod'
+import { zPrefixedVersionSemver, zVersionMajorMinor, zVersionSemver } from './validation'
+
+// The config schema used to validate the config file content and ensure all values required by the site are valid.
+const configSchema = z.object({
+ algolia: z.object({
+ api_key: z.string(),
+ app_id: z.string(),
+ index_name: z.string(),
+ }),
+ analytics: z.object({
+ fathom_site: z.string(),
+ }),
+ anchors: z.object({
+ min: z.number(),
+ max: z.number(),
+ }),
+ authors: z.string(),
+ baseURL: z.string().url(),
+ blog: z.string().url(),
+ cdn: z.object({
+ css: z.string().url(),
+ css_rtl: z.string().url(),
+ css_hash: z.string(),
+ css_rtl_hash: z.string(),
+ js: z.string().url(),
+ js_hash: z.string(),
+ js_bundle: z.string().url(),
+ js_bundle_hash: z.string(),
+ popper: z.string().url(),
+ popper_esm: z.string().url(),
+ popper_hash: z.string(),
+ }),
+ current_version: zVersionSemver,
+ current_ruby_version: zVersionSemver,
+ description: z.string(),
+ docs_version: zVersionMajorMinor,
+ docsDir: z.string(),
+ download: z.object({
+ dist: z.string().url(),
+ dist_examples: z.string().url(),
+ source: z.string().url(),
+ }),
+ github_org: z.string().url(),
+ icons: z.string().url(),
+ opencollective: z.string().url(),
+ repo: z.string().url(),
+ rfs_version: zPrefixedVersionSemver,
+ subtitle: z.string(),
+ swag: z.string().url(),
+ themes: z.string().url(),
+ title: z.string(),
+ toc: z.object({
+ min: z.number(),
+ max: z.number(),
+ }),
+ twitter: z.string(),
+})
+
+let config: Config | undefined
+
+// A helper to get the config loaded fom the `config.yml` file. If the config does not match the `configSchema`, an
+// error is thrown to indicate that the config file is invalid and some action is required.
+export function getConfig(): Config {
+ if (config) {
+ // Returns the config if it has already been loaded.
+ return config
+ }
+
+ try {
+ // Load the config from the `config.yml` file.
+ const rawConfig = yaml.load(fs.readFileSync('./config.yml', 'utf8'))
+
+ // Parse the config using the config schema to validate its content and get back a fully typed config object.
+ config = configSchema.parse(rawConfig)
+
+ return config
+ } catch (error) {
+ if (error instanceof z.ZodError) {
+ console.error('The `config.yml` file content is invalid:', error.issues)
+ }
+
+ throw new Error('Failed to load configuration from `config.yml`', { cause: error })
+ }
+}
+
+type Config = z.infer
diff --git a/site/src/libs/content.ts b/site/src/libs/content.ts
new file mode 100644
index 0000000000..09c9f6b0b7
--- /dev/null
+++ b/site/src/libs/content.ts
@@ -0,0 +1,12 @@
+import { getCollection, getEntryBySlug } from 'astro:content'
+
+export const docsPages = await getCollection('docs')
+export const callouts = await getCollection('callouts')
+
+export const aliasedDocsPages = await getCollection('docs', ({ data }) => {
+ return data.aliases !== undefined
+})
+
+export function getCalloutByName(name: string) {
+ return getEntryBySlug('callouts', name)
+}
diff --git a/site/src/libs/data.ts b/site/src/libs/data.ts
new file mode 100644
index 0000000000..27c4d46bea
--- /dev/null
+++ b/site/src/libs/data.ts
@@ -0,0 +1,146 @@
+import fs from 'node:fs'
+import yaml from 'js-yaml'
+import { z } from 'zod'
+import {
+ zHexColor,
+ zLanguageCode,
+ zNamedHexColors,
+ zPxSizeOrEmpty,
+ zVersionMajorMinor,
+ zVersionSemver,
+} from './validation'
+import { capitalizeFirstLetter } from './utils'
+
+// An object containing all the data types and their associated schema. The key should match the name of the data file
+// in the `./site/data/` directory.
+const dataDefinitions = {
+ breakpoints: z
+ .object({
+ breakpoint: z.string(),
+ abbr: z.string(),
+ name: z.string(),
+ 'min-width': zPxSizeOrEmpty,
+ container: zPxSizeOrEmpty,
+ })
+ .array(),
+ colors: zNamedHexColors(13),
+ 'core-team': z
+ .object({
+ name: z.string(),
+ user: z.string(),
+ })
+ .array(),
+ 'docs-versions': z
+ .object({
+ group: z.string(),
+ baseurl: z.string().url(),
+ description: z.string(),
+ versions: z.union([zVersionSemver, zVersionMajorMinor]).array(),
+ })
+ .array(),
+ examples: z
+ .object({
+ category: z.string(),
+ external: z.boolean().optional(),
+ description: z.string(),
+ examples: z
+ .object({
+ description: z.string(),
+ indexPath: z.string().optional(),
+ name: z.string(),
+ url: z.string().optional(),
+ })
+ .array(),
+ })
+ .array(),
+ grays: zNamedHexColors(9),
+ icons: z.object({
+ preferred: z
+ .object({
+ name: z.string(),
+ website: z.string().url(),
+ })
+ .array(),
+ more: z
+ .object({
+ name: z.string(),
+ website: z.string().url(),
+ })
+ .array(),
+ }),
+ plugins: z
+ .object({
+ description: z.string(),
+ link: z.string().startsWith('components/'),
+ name: z.string(),
+ })
+ .array(),
+ sidebar: z
+ .object({
+ title: z.string(),
+ icon: z.string().optional(),
+ icon_color: z.string().optional(),
+ pages: z
+ .object({
+ title: z.string(),
+ })
+ .array()
+ .optional(),
+ })
+ .array(),
+ 'theme-colors': z
+ .object({
+ name: z.string(),
+ hex: zHexColor,
+ contrast_color: z.union([z.literal('dark'), z.literal('white')]).optional(),
+ })
+ .array()
+ .transform((val) => {
+ // Add a `title` property to each theme color object being the capitalized version of the `name` property.
+ return val.map((themeColor) => ({ ...themeColor, title: capitalizeFirstLetter(themeColor.name) }))
+ }),
+ translations: z
+ .object({
+ name: z.string(),
+ code: zLanguageCode,
+ description: z.string(),
+ url: z.string().url(),
+ })
+ .array(),
+} satisfies Record
+
+let data = new Map>()
+
+// A helper to get data loaded fom a yml file in the `./site/data/` directory. If the data does not match its associated
+// schema from `dataDefinitions`, an error is thrown to indicate that the data file is invalid and some action is
+// required.
+export function getData(type: TType): z.infer<(typeof dataDefinitions)[TType]> {
+ if (data.has(type)) {
+ // Returns the data if it has already been loaded.
+ return data.get(type)
+ }
+
+ const dataPath = `./site/data/${type}.yml`
+
+ try {
+ // Load the data from the yml file.
+ const rawData = yaml.load(fs.readFileSync(dataPath, 'utf8'))
+
+ // Parse the data using the data schema to validate its content and get back a fully typed data object.
+ const parsedData = dataDefinitions[type].parse(rawData)
+
+ // Cache the data.
+ data.set(type, parsedData)
+
+ return parsedData
+ } catch (error) {
+ if (error instanceof z.ZodError) {
+ console.error(`The \`${dataPath}\` file content is invalid:`, error.issues)
+ }
+
+ throw new Error(`Failed to load data from \`${dataPath}\``, { cause: error })
+ }
+}
+
+type DataType = keyof typeof dataDefinitions
+type DataSchema = z.ZodTypeAny
diff --git a/site/src/libs/examples.ts b/site/src/libs/examples.ts
new file mode 100644
index 0000000000..384612b8fb
--- /dev/null
+++ b/site/src/libs/examples.ts
@@ -0,0 +1,74 @@
+import type { AstroInstance } from 'astro'
+import fs from 'node:fs'
+import path from 'node:path'
+import { z } from 'zod'
+import { getDocsFsPath } from './path'
+
+export const exampleFrontmatterSchema = z.object({
+ body_class: z.string().optional(),
+ direction: z.literal('rtl').optional(),
+ extra_css: z.string().array().optional(),
+ extra_js: z
+ .object({
+ async: z.boolean().optional(),
+ integrity: z.string().optional(),
+ src: z.string(),
+ })
+ .array()
+ .optional(),
+ html_class: z.string().optional(),
+ include_js: z.boolean().optional(),
+ title: z.string(),
+})
+
+export type ExampleFrontmatter = z.infer
+
+export function getExamplesAssets() {
+ const source = path.join(getDocsFsPath(), 'src/assets/examples')
+
+ return getExamplesAssetsRecursively(source)
+}
+
+export function getAliasedExamplesPages(pages: AstroInstance[]) {
+ return pages.filter(isAliasedAstroInstance)
+}
+
+export function getExampleNameFromPagePath(examplePath: string) {
+ const matches = examplePath.match(/([^/]+)\/(?:[^/]+)\.astro$/)
+
+ if (!matches || !matches[1]) {
+ throw new Error(`Failed to get example name from path: '${examplePath}'.`)
+ }
+
+ return matches[1]
+}
+
+function getExamplesAssetsRecursively(source: string, assets: string[] = []) {
+ const entries = fs.readdirSync(source, { withFileTypes: true })
+
+ for (const entry of entries) {
+ if (entry.isFile() && !entry.name.endsWith('.astro')) {
+ assets.push(sanitizeAssetPath(path.join(source, entry.name)))
+ } else if (entry.isDirectory()) {
+ getExamplesAssetsRecursively(path.join(source, entry.name), assets)
+ }
+ }
+
+ return assets
+}
+
+function sanitizeAssetPath(assetPath: string) {
+ const matches = assetPath.match(/([^\/]+\/[^\/]+\.\w+)$/)
+
+ if (!matches || !matches[1]) {
+ throw new Error(`Failed to get example asset path from path: '${assetPath}'.`)
+ }
+
+ return matches[1]
+}
+
+function isAliasedAstroInstance(page: AstroInstance): page is AliasedAstroInstance {
+ return (page as AliasedAstroInstance).aliases !== undefined
+}
+
+type AliasedAstroInstance = AstroInstance & { aliases: string | string[] }
diff --git a/site/src/libs/icon.ts b/site/src/libs/icon.ts
new file mode 100644
index 0000000000..5bff4cc9f5
--- /dev/null
+++ b/site/src/libs/icon.ts
@@ -0,0 +1,5 @@
+export interface SvgIconProps {
+ class?: string
+ height: number
+ width: number
+}
diff --git a/site/src/libs/image.ts b/site/src/libs/image.ts
new file mode 100644
index 0000000000..7de95db501
--- /dev/null
+++ b/site/src/libs/image.ts
@@ -0,0 +1,13 @@
+import path from 'node:path'
+import sizeOf from 'image-size'
+import { getDocsStaticFsPath } from './path'
+
+export function getStaticImageSize(imagePath: string) {
+ const size = sizeOf(path.join(getDocsStaticFsPath(), imagePath))
+
+ if (!size.height || !size.width) {
+ throw new Error(`Failed to get size of static image at '${imagePath}'.`)
+ }
+
+ return { height: size.height, width: size.width }
+}
diff --git a/site/src/libs/layout.ts b/site/src/libs/layout.ts
new file mode 100644
index 0000000000..d895216eae
--- /dev/null
+++ b/site/src/libs/layout.ts
@@ -0,0 +1,7 @@
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+
+export type Layout = 'docs' | 'examples' | 'single' | undefined
+
+export type LayoutOverridesHTMLAttributes = HTMLAttributes & {
+ [key in `data-${string}`]: string
+}
diff --git a/site/src/libs/path.ts b/site/src/libs/path.ts
new file mode 100644
index 0000000000..ddcee5954a
--- /dev/null
+++ b/site/src/libs/path.ts
@@ -0,0 +1,71 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { getConfig } from './config'
+
+// The docs directory path relative to the root of the project.
+export const docsDirectory = getConfig().docsDir
+
+// A list of all the docs paths that were generated during a build.
+const generatedVersionedDocsPaths: string[] = []
+
+export function getVersionedDocsPath(docsPath: string): string {
+ const { docs_version } = getConfig()
+
+ const sanitizedDocsPath = docsPath.replace(/^\//, '')
+
+ if (import.meta.env.PROD) {
+ generatedVersionedDocsPaths.push(sanitizedDocsPath)
+ }
+
+ return `/docs/${docs_version}/${sanitizedDocsPath}`
+}
+
+// Validate that all the generated versioned docs paths point to an existing page or asset.
+// This is useful to catch typos in docs paths.
+// Note: this function is only called during a production build.
+// Note: this could at some point be refactored to use Astro list of generated `routes` accessible in the
+// `astro:build:done` integration hook. Altho as of 03/14/2023, this is not possible due to the route's data only
+// containing informations regarding the last page generated page for dynamic routes.
+// @see https://github.com/withastro/astro/issues/5802
+export function validateVersionedDocsPaths(distUrl: URL) {
+ const { docs_version } = getConfig()
+
+ for (const docsPath of generatedVersionedDocsPaths) {
+ const sanitizedDocsPath = sanitizeVersionedDocsPathForValidation(docsPath)
+ const absoluteDocsPath = path.join(distUrl.pathname, 'docs', docs_version, sanitizedDocsPath)
+
+ const docsPathExists = fs.existsSync(absoluteDocsPath)
+
+ if (!docsPathExists) {
+ throw new Error(`A versioned docs path was generated but does not point to a valid page or asset: '${docsPath}'.`)
+ }
+ }
+}
+
+export function getDocsRelativePath(docsPath: string) {
+ return path.join(docsDirectory, docsPath)
+}
+
+export function getDocsStaticFsPath() {
+ return path.join(getDocsFsPath(), 'static')
+}
+
+export function getDocsPublicFsPath() {
+ return path.join(getDocsFsPath(), 'public')
+}
+
+export function getDocsFsPath() {
+ return path.join(process.cwd(), docsDirectory)
+}
+
+function sanitizeVersionedDocsPathForValidation(docsPath: string) {
+ // Remove the hash part of the path if any.
+ let sanitizedDocsPath = docsPath.split('#')[0]
+
+ // Append the `index.html` part if the path doesn't have an extension.
+ if (!sanitizedDocsPath.includes('.')) {
+ sanitizedDocsPath = path.join(sanitizedDocsPath, 'index.html')
+ }
+
+ return sanitizedDocsPath
+}
diff --git a/site/src/libs/placeholder.ts b/site/src/libs/placeholder.ts
new file mode 100644
index 0000000000..a380734cff
--- /dev/null
+++ b/site/src/libs/placeholder.ts
@@ -0,0 +1,253 @@
+import type { HTMLAttributes } from 'astro/types'
+import * as htmlparser2 from 'htmlparser2'
+import { getData } from './data'
+
+const placeholderRegex = /]+)\/>/g
+
+/**
+ * Generates all the placeholder attributes and options required to render a placeholder.
+ * @see src/components/shortcodes/Placeholder.astro
+ */
+export function getPlaceholder(userOptions: Partial): Placeholder {
+ const options = getOptionsWithDefaults(userOptions)
+ const { class: className, height, markup, text, title, width } = options
+
+ const showText = text !== false
+ const showTitle = title !== false
+
+ const placeholderClassList = ['bd-placeholder-img', className].join(' ')
+ const placeholderRole = showTitle || showText ? 'img' : undefined
+ const placeholderAriaHidden = !showText && !showTitle ? 'true' : undefined
+
+ const placeholderLabel =
+ showText || showTitle
+ ? `${showTitle ? title : ''}${showTitle && showText ? ': ' : ''}${showText ? text : ''}`
+ : undefined
+
+ const optionsWithVisibilities = { ...options, showText, showTitle }
+
+ if (markup === 'img') {
+ return {
+ type: 'img',
+ options: optionsWithVisibilities,
+ props: {
+ alt: placeholderLabel,
+ class: placeholderClassList,
+ height,
+ src: getPlaceholderSrc(showTitle, showText, options),
+ width,
+ },
+ }
+ }
+
+ return {
+ type: 'svg',
+ options: optionsWithVisibilities,
+ props: {
+ 'aria-hidden': placeholderAriaHidden,
+ 'aria-label': placeholderLabel,
+ class: placeholderClassList,
+ height,
+ preserveAspectRatio: 'xMidYMid slice',
+ role: placeholderRole,
+ width,
+ xmlns: 'http://www.w3.org/2000/svg',
+ },
+ }
+}
+
+/**
+ * Replaces placeholders described using the `${placeholder.options.title} `
+ }
+
+ placeholderStr = `${placeholderStr}${placeholder.options.text} `
+ }
+
+ return `${placeholderStr}`
+}
+
+function getOptionsWithDefaults(options: Partial) {
+ const optionsWithDefaults = Object.assign(
+ {},
+ {
+ background: getData('grays')[5].hex,
+ color: getData('grays')[2].hex,
+ height: '180',
+ markup: 'svg',
+ title: 'Placeholder',
+ width: '100%',
+ },
+ options
+ )
+
+ if (optionsWithDefaults.text === undefined) {
+ optionsWithDefaults.text = `${optionsWithDefaults.width}x${optionsWithDefaults.height}`
+ }
+
+ return optionsWithDefaults as PlaceholderOptions
+}
+
+function getPlaceholderSrc(
+ showTitle: boolean,
+ showText: boolean,
+ { background, color, text, title }: PlaceholderOptions
+) {
+ // Sanitize the background and text colors by removing the leading hash if any.
+ const bgColor = background.replace(/^#/, '')
+ const textColor = color.replace(/^#/, '')
+
+ // Inline the SVG with the `data:` URI scheme.
+ let placeholderSrc = `data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E`
+
+ if (showTitle) {
+ // Append the tag if any.
+ placeholderSrc = `${placeholderSrc}%3Ctitle%3E${title}%3C/title%3E`
+ }
+
+ // Fill the image rect with the expected background color.
+ placeholderSrc = `${placeholderSrc}%3Crect%20width='100%25'%20height='100%25'%20fill='%23${bgColor}'%3E%3C/rect%3E`
+
+ if (showText) {
+ // Append the <text> tag if any with the expected color.
+ placeholderSrc = `${placeholderSrc}%3Ctext%20x='50%25'%20y='50%25'%20fill='%23${textColor}'%20dy='.3em'%3E${text}%3C/text%3E`
+ }
+
+ // Close the SVG.
+ placeholderSrc = `${placeholderSrc}%3C/svg%3E`
+
+ return placeholderSrc
+}
+
+function sanitizeHtmlAttributesFromMdx(attributes: Record<string, unknown>) {
+ const sanitizedAttributes: typeof attributes = {}
+
+ for (const [key, value] of Object.entries(attributes)) {
+ if (value === undefined) {
+ continue
+ } else if (value === '{false}') {
+ sanitizedAttributes[key] = false
+ } else if (value === '{true}') {
+ sanitizedAttributes[key] = true
+ } else {
+ sanitizedAttributes[key] = value
+ }
+ }
+
+ return sanitizedAttributes
+}
+
+export interface PlaceholderOptions {
+ /**
+ * The SVG background color.
+ * @default "#868e96"
+ */
+ background: string
+ /**
+ * CSS classes to append to `bd-placeholder-img` for the `svg` or `img` elements.
+ */
+ class?: string
+ /**
+ * The text color (foreground).
+ * @default "#dee2e6"
+ */
+ color: string
+ /**
+ * The placeholder height.
+ * @default "180"
+ */
+ height: string
+ /**
+ * If it should render `svg` or `img` tags.
+ * @default "svg"
+ */
+ markup: 'img' | 'svg'
+ /**
+ * The text to show in the image. You can explicitely pass the `false` boolean value (and not the string "false") to
+ * hide the text.
+ * @default "${width}x{$height)"
+ */
+ text: string | false
+ /**
+ * Used in the SVG `title` tag. You can explicitely pass the `false` boolean value (and not the string "false") to
+ * hide the title.
+ * @default "Placeholder"
+ */
+ title: string | false
+ /**
+ * The placeholder width.
+ * @default "100%"
+ */
+ width: string
+}
+
+interface PlaceholderVisibilities {
+ showText: boolean
+ showTitle: boolean
+}
+
+type Placeholder =
+ | {
+ type: 'img'
+ options: PlaceholderOptions & PlaceholderVisibilities
+ props: HTMLAttributes<'img'>
+ }
+ | {
+ type: 'svg'
+ options: PlaceholderOptions & PlaceholderVisibilities
+ props: HTMLAttributes<'svg'>
+ }
diff --git a/site/src/libs/prism.ts b/site/src/libs/prism.ts
new file mode 100644
index 0000000000..8c2f0d3310
--- /dev/null
+++ b/site/src/libs/prism.ts
@@ -0,0 +1,39 @@
+import Prism, { type hooks } from 'prismjs'
+const { Token } = Prism
+
+const prefixType = 'prefix'
+
+let isPrismConfigured = false
+
+export function configurePrism() {
+ if (isPrismConfigured) {
+ return
+ }
+
+ isPrismConfigured = true
+
+ Prism.hooks.add('after-tokenize', prismPrefixPlugin)
+}
+
+// A plugin to add empty prefix tokens bebore each command line in code blocks.
+function prismPrefixPlugin(env: hooks.HookEnvironmentMap['after-tokenize']) {
+ if (env.language !== 'bash' && env.language !== 'sh' && env.language !== 'powershell') {
+ return
+ }
+
+ // Add a prefix token at the beginning of the code block.
+ env.tokens.unshift(new Token(prefixType, ''))
+
+ for (let i = 0; i < env.tokens.length; i++) {
+ const token = env.tokens[i]
+
+ if (typeof token === 'string' && token.endsWith('\n')) {
+ // Only add a prefix token after a line break if it's not the last token
+ // This prevents adding a prefix to an empty line at the end
+ if (i < env.tokens.length - 1) {
+ env.tokens.splice(i + 1, 0, new Token(prefixType, ''))
+ i++
+ }
+ }
+ }
+}
diff --git a/site/src/libs/rehype.ts b/site/src/libs/rehype.ts
new file mode 100644
index 0000000000..853c0b1f0d
--- /dev/null
+++ b/site/src/libs/rehype.ts
@@ -0,0 +1,34 @@
+import type { Root } from 'hast'
+import type { Plugin } from 'unified'
+import { SKIP, visit } from 'unist-util-visit'
+
+// A rehype plugin to apply CSS classes to tables rendered in markdown (or MDX) files when wrapped in a `<BsTable />`
+// component.
+export const rehypeBsTable: Plugin<[], Root> = function () {
+ return function rehypeBsTablePlugin(ast) {
+ visit(ast, 'element', (node, _index, parent) => {
+ if (node.tagName !== 'table' || parent?.type !== 'mdxJsxFlowElement' || parent.name !== 'BsTable') {
+ return SKIP
+ }
+
+ const classAttribute = parent.attributes.find(
+ (attribute) => attribute.type === 'mdxJsxAttribute' && attribute.name === 'class'
+ )
+
+ if (classAttribute && typeof classAttribute.value !== 'string') {
+ return SKIP
+ }
+
+ const tableClass = typeof classAttribute?.value === 'string' ? classAttribute.value : 'table'
+
+ if (!node.properties) {
+ node.properties = {}
+ }
+
+ node.properties = {
+ ...node.properties,
+ class: tableClass,
+ }
+ })
+ }
+}
diff --git a/site/src/libs/remark.ts b/site/src/libs/remark.ts
new file mode 100644
index 0000000000..018b85e5aa
--- /dev/null
+++ b/site/src/libs/remark.ts
@@ -0,0 +1,161 @@
+import type { Root } from 'mdast'
+import type { MdxJsxAttribute, MdxJsxExpressionAttribute } from 'mdast-util-mdx-jsx'
+import type { Plugin } from 'unified'
+import { visit } from 'unist-util-visit'
+import { getConfig } from './config'
+import { getVersionedDocsPath } from './path'
+
+// [[config:foo]]
+// [[config:foo.bar]]
+const configRegExp = /\[\[config:(?<name>[\w\.]+)]]/g
+// [[docsref:/foo]]
+// [[docsref:/foo/bar#baz]]
+const docsrefRegExp = /\[\[docsref:(?<path>[\w\.\/#-]+)]]/g
+
+// A remark plugin to replace config values embedded in markdown (or MDX) files.
+// For example, [[config:foo]] will be replaced with the value of the `foo` key in the `config.yml` file.
+// Nested values are also supported, e.g. [[config:foo.bar]].
+// Note: this also works in frontmatter.
+// Note: this plugin is meant to facilitate the migration from Hugo to Astro while keeping the differences to a minimum.
+// At some point, this plugin should maybe be removed and embrace a more MDX-friendly syntax.
+export const remarkBsConfig: Plugin<[], Root> = function () {
+ return function remarkBsConfigPlugin(ast, file) {
+ if (containsFrontmatter(file.data.astro)) {
+ replaceInFrontmatter(file.data.astro.frontmatter, replaceConfigInText)
+ }
+
+ // https://github.com/syntax-tree/mdast#nodes
+ // https://github.com/syntax-tree/mdast-util-mdx-jsx#nodes
+ visit(ast, ['code', 'definition', 'image', 'inlineCode', 'link', 'mdxJsxFlowElement', 'text'], (node) => {
+ switch (node.type) {
+ case 'code':
+ case 'inlineCode':
+ case 'text': {
+ node.value = replaceConfigInText(node.value)
+ break
+ }
+ case 'image': {
+ if (node.alt) {
+ node.alt = replaceConfigInText(node.alt)
+ }
+
+ node.url = replaceConfigInText(node.url)
+ break
+ }
+ case 'definition':
+ case 'link': {
+ node.url = replaceConfigInText(node.url)
+ break
+ }
+ case 'mdxJsxFlowElement': {
+ node.attributes = replaceConfigInAttributes(node.attributes)
+ break
+ }
+ }
+ })
+ }
+}
+
+// A remark plugin to add versionned docs links in markdown (or MDX) files.
+// For example, [[docsref:/foo]] will be replaced with the `/docs/${docs_version}/foo` value with the `docs_version`
+// value being read from the `config.yml` file.
+// Note: this also works in frontmatter.
+// Note: this plugin is meant to facilitate the migration from Hugo to Astro while keeping the differences to a minimum.
+// At some point, this plugin should maybe be removed and embrace a more MDX-friendly syntax.
+export const remarkBsDocsref: Plugin<[], Root> = function () {
+ return function remarkBsDocsrefPlugin(ast, file) {
+ if (containsFrontmatter(file.data.astro)) {
+ replaceInFrontmatter(file.data.astro.frontmatter, replaceDocsrefInText)
+ }
+
+ // https://github.com/syntax-tree/mdast#nodes
+ // https://github.com/syntax-tree/mdast-util-mdx-jsx#nodes
+ visit(ast, ['definition', 'link', 'mdxJsxTextElement'], (node) => {
+ switch (node.type) {
+ case 'definition':
+ case 'link': {
+ node.url = replaceDocsrefInText(node.url)
+ break
+ }
+ case 'mdxJsxTextElement': {
+ node.attributes = replaceDocsrefInAttributes(node.attributes)
+ break
+ }
+ }
+ })
+ }
+}
+
+export function replaceConfigInText(text: string) {
+ return text.replace(configRegExp, (_match, path) => {
+ const value = getConfigValueAtPath(path)
+
+ if (!value) {
+ throw new Error(`Failed to find a valid configuration value for '${path}'.`)
+ }
+
+ return value
+ })
+}
+
+function replaceConfigInAttributes(attributes: (MdxJsxAttribute | MdxJsxExpressionAttribute)[]) {
+ return attributes.map((attribute) => {
+ if (attribute.type === 'mdxJsxAttribute' && typeof attribute.value === 'string') {
+ attribute.value = replaceConfigInText(attribute.value)
+ }
+
+ return attribute
+ })
+}
+
+function replaceDocsrefInText(text: string) {
+ return text.replace(docsrefRegExp, (_match, path) => {
+ return getVersionedDocsPath(path)
+ })
+}
+
+function replaceDocsrefInAttributes(attributes: (MdxJsxAttribute | MdxJsxExpressionAttribute)[]) {
+ return attributes.map((attribute) => {
+ if (attribute.type === 'mdxJsxAttribute' && typeof attribute.value === 'string') {
+ attribute.value = replaceDocsrefInText(attribute.value)
+ }
+
+ return attribute
+ })
+}
+
+function getConfigValueAtPath(path: string) {
+ const config = getConfig()
+
+ const value = path.split('.').reduce((values, part) => {
+ if (!values || typeof values !== 'object') {
+ return undefined
+ }
+
+ return (values as any)?.[part]
+ }, config as unknown)
+
+ return typeof value === 'string' ? value : undefined
+}
+
+function replaceInFrontmatter(record: Record<string, unknown>, replacer: (value: string) => string) {
+ for (const [key, value] of Object.entries(record)) {
+ if (typeof value === 'string') {
+ record[key] = replacer(value)
+ } else if (Array.isArray(value)) {
+ record[key] = value.map((arrayValue) => {
+ return typeof arrayValue === 'string'
+ ? replacer(arrayValue)
+ : typeof arrayValue === 'object'
+ ? replaceInFrontmatter(arrayValue, replacer)
+ : arrayValue
+ })
+ }
+ }
+
+ return record
+}
+
+function containsFrontmatter(data: unknown): data is { frontmatter: Record<string, unknown> } {
+ return data != undefined && typeof data === 'object' && 'frontmatter' in data
+}
diff --git a/site/src/libs/toc.ts b/site/src/libs/toc.ts
new file mode 100644
index 0000000000..f4486be4a6
--- /dev/null
+++ b/site/src/libs/toc.ts
@@ -0,0 +1,42 @@
+import type { MarkdownHeading } from 'astro'
+import { getConfig } from './config'
+
+// Generate a tree like structure from a list of headings.
+export function generateToc(allHeadings: MarkdownHeading[]) {
+ const headings = allHeadings.filter(
+ (heading) => heading.depth >= getConfig().toc.min && heading.depth <= getConfig().toc.max
+ )
+
+ const toc: TocEntry[] = []
+
+ for (const heading of headings) {
+ if (toc.length === 0) {
+ toc.push({ ...heading, children: [] })
+ continue
+ }
+
+ const previousEntry = toc[toc.length - 1]
+
+ if (heading.depth === previousEntry.depth) {
+ toc.push({ ...heading, children: [] })
+ continue
+ }
+
+ const children = getEntryChildrenAtDepth(previousEntry, heading.depth - previousEntry.depth)
+ children.push({ ...heading, children: [] })
+ }
+
+ return toc
+}
+
+function getEntryChildrenAtDepth(entry: TocEntry, depth: number): TocEntry['children'] {
+ if (!entry) {
+ return []
+ }
+
+ return depth === 1 ? entry.children : getEntryChildrenAtDepth(entry.children[entry.children.length - 1], depth - 1)
+}
+
+export interface TocEntry extends MarkdownHeading {
+ children: TocEntry[]
+}
diff --git a/site/src/libs/utils.ts b/site/src/libs/utils.ts
new file mode 100644
index 0000000000..9d7de0ee75
--- /dev/null
+++ b/site/src/libs/utils.ts
@@ -0,0 +1,36 @@
+import { slug } from 'github-slugger'
+import fromMarkdown from 'mdast-util-from-markdown'
+import toString from 'mdast-util-to-string'
+
+export function capitalizeFirstLetter(str: string) {
+ return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export function getSequence(start: number, end: number, step = 1) {
+ const sequence = []
+
+ for (let i = start; i <= end; i += step) {
+ sequence.push(i)
+ }
+
+ return sequence
+}
+
+// This function is used in the docs sidebar to generate partial slugs and properly order the sidebar entries and also
+// to generate docs frontmatter sections slugs.
+// Note: this should be refactored and removed, the sidebar ordering defined in `site/data/sidebar.yml` should not rely
+// on slugified custom titles that are expected to generate a string matching the actual file names on disk, this is
+// error prone. Instead, custom sidebar titles should be defined in the frontmatter of the MDX files when needed and
+// `site/data/sidebar.yml` should only reference the actual file names and slug extracted from the docs content
+// collection. Same goes for the docs frontmatter sections.
+export function getSlug(str: string) {
+ return slug(str).replace(/--+/g, '-')
+}
+
+export function trimLeadingAndTrailingSlashes(str: string) {
+ return str.replace(/^\/+|\/+$/g, '')
+}
+
+export function stripMarkdown(str: string) {
+ return toString(fromMarkdown(str))
+}
diff --git a/site/src/libs/validation.ts b/site/src/libs/validation.ts
new file mode 100644
index 0000000000..cd51c8345c
--- /dev/null
+++ b/site/src/libs/validation.ts
@@ -0,0 +1,26 @@
+import { z } from 'zod'
+
+export const zVersionMajorMinor = z.string().regex(/^\d+\.\d+$/)
+
+// https://ihateregex.io/expr/semver/
+const unboundSemverRegex =
+ /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?/
+
+export const zVersionSemver = z.string().regex(new RegExp(`^${unboundSemverRegex.source}$`))
+export const zPrefixedVersionSemver = z.string().regex(new RegExp(`^v${unboundSemverRegex.source}$`))
+
+export const zHexColor = z.string().regex(/^#(?:[0-9a-fA-F]{3}){1,2}$/)
+
+export const zNamedHexColors = (count: number) => {
+ return z
+ .object({
+ name: z.union([z.string(), z.number()]),
+ hex: zHexColor,
+ })
+ .array()
+ .length(count)
+}
+
+export const zPxSizeOrEmpty = z.string().regex(/^(?:\d+px)?$/)
+
+export const zLanguageCode = z.string().regex(/^[a-z]{2}(?:-[a-zA-Z]{2})?$/)
diff --git a/site/src/pages/404.astro b/site/src/pages/404.astro
new file mode 100644
index 0000000000..3b615eab8a
--- /dev/null
+++ b/site/src/pages/404.astro
@@ -0,0 +1,17 @@
+---
+import BaseLayout from '@layouts/BaseLayout.astro'
+---
+
+<BaseLayout
+ overrides={{
+ body: { class: 'd-flex flex-column min-vh-100' },
+ main: { class: 'my-auto p-5', id: 'content' },
+ }}
+ robots="noindex,follow"
+ title="404 - File not found"
+>
+ <div class="text-center py-5">
+ <h1 class="display-1">404</h1>
+ <h2>File not found</h2>
+ </div>
+</BaseLayout>
diff --git a/site/src/pages/[...alias].astro b/site/src/pages/[...alias].astro
new file mode 100644
index 0000000000..5e4f2f1005
--- /dev/null
+++ b/site/src/pages/[...alias].astro
@@ -0,0 +1,56 @@
+---
+import type { InferGetStaticPropsType } from 'astro'
+import RedirectLayout from '@layouts/RedirectLayout.astro'
+import { getVersionedDocsPath } from '@libs/path'
+import { trimLeadingAndTrailingSlashes } from '@libs/utils'
+import { replaceConfigInText } from '@libs/remark'
+import { aliasedDocsPages } from '@libs/content'
+import { getAliasedExamplesPages, getExampleNameFromPagePath } from '@libs/examples'
+
+export async function getStaticPaths() {
+ function normalizeAliases(aliases: string | string[] | undefined): string[] {
+ return aliases ? (Array.isArray(aliases) ? aliases : [aliases]) : []
+ }
+
+ function getAliasStaticPath(alias: string, path: string) {
+ return { params: { alias: trimLeadingAndTrailingSlashes(replaceConfigInText(alias)) }, props: { path } }
+ }
+
+ const staticPaths = []
+
+ const examplesPageModules = import.meta.glob('../assets/examples/**/*.astro', { eager: true })
+ const examplesPages = Object.entries(examplesPageModules).map(([file, module]) => {
+ return {
+ file,
+ ...module,
+ }
+ })
+ const aliasedExamplesPages = getAliasedExamplesPages(examplesPages)
+
+ // Generate static paths for all examples pages with aliases.
+ for (const aliasedExamplesPage of aliasedExamplesPages) {
+ const aliases = normalizeAliases(aliasedExamplesPage.aliases)
+
+ for (const alias of aliases) {
+ staticPaths.push(getAliasStaticPath(alias, `/examples/${getExampleNameFromPagePath(aliasedExamplesPage.file)}`))
+ }
+ }
+
+ // Generate static paths for all docs pages with aliases.
+ for (const aliasedDocsPage of aliasedDocsPages) {
+ const aliases = normalizeAliases(aliasedDocsPage.data.aliases)
+
+ for (const alias of aliases) {
+ staticPaths.push(getAliasStaticPath(alias, aliasedDocsPage.slug))
+ }
+ }
+
+ return staticPaths.flat()
+}
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>
+
+const { path } = Astro.props
+---
+
+<RedirectLayout path={getVersionedDocsPath(path)} />
diff --git a/site/src/pages/docs/[version]/[...slug].astro b/site/src/pages/docs/[version]/[...slug].astro
new file mode 100644
index 0000000000..7b5d084eb0
--- /dev/null
+++ b/site/src/pages/docs/[version]/[...slug].astro
@@ -0,0 +1,25 @@
+---
+import type { InferGetStaticPropsType } from 'astro'
+import DocsLayout from '@layouts/DocsLayout.astro'
+import { getConfig } from '@libs/config'
+import { docsPages } from '@libs/content'
+import Code from '@shortcodes/Code.astro'
+
+export async function getStaticPaths() {
+ return docsPages.map((docsPage) => {
+ return {
+ params: { slug: docsPage.slug, version: getConfig().docs_version },
+ props: docsPage,
+ }
+ })
+}
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>
+
+const { id, data, render } = Astro.props
+const { Content, headings, remarkPluginFrontmatter } = await render()
+---
+
+<DocsLayout frontmatter={remarkPluginFrontmatter as typeof data} headings={headings} id={id}>
+ <Content components={{ pre: Code }} />
+</DocsLayout>
diff --git a/site/src/pages/docs/[version]/examples/[...asset].ts b/site/src/pages/docs/[version]/examples/[...asset].ts
new file mode 100644
index 0000000000..cf5c66f8a4
--- /dev/null
+++ b/site/src/pages/docs/[version]/examples/[...asset].ts
@@ -0,0 +1,32 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { APIRoute } from 'astro'
+import mime from 'mime'
+import { getConfig } from '@libs/config'
+import { getExamplesAssets } from '@libs/examples'
+import { getDocsFsPath } from '@libs/path'
+
+export function getStaticPaths() {
+ const examplesAssets = getExamplesAssets()
+
+ return examplesAssets.map((examplesAsset) => {
+ return {
+ params: { asset: examplesAsset, version: getConfig().docs_version },
+ }
+ })
+}
+
+export const GET: APIRoute = ({ params }) => {
+ const asset = params.asset
+
+ if (!asset) {
+ throw new Error('Missing asset parameter while generating an example asset.')
+ }
+
+ const assetPath = path.join(getDocsFsPath(), 'src/assets/examples', asset)
+ const buffer = fs.readFileSync(assetPath)
+ const mimetype = mime.getType(assetPath)
+ const headers: ResponseInit['headers'] = typeof mimetype === 'string' ? { 'Content-Type': mimetype } : {}
+
+ return new Response(buffer, { headers })
+}
diff --git a/site/src/pages/docs/[version]/examples/[...example].astro b/site/src/pages/docs/[version]/examples/[...example].astro
new file mode 100644
index 0000000000..fd688b80a2
--- /dev/null
+++ b/site/src/pages/docs/[version]/examples/[...example].astro
@@ -0,0 +1,40 @@
+---
+import ExamplesLayout from '@layouts/ExamplesLayout.astro'
+import { getConfig } from '@libs/config'
+import { exampleFrontmatterSchema, getExampleNameFromPagePath, type ExampleFrontmatter } from '@libs/examples'
+
+export async function getStaticPaths() {
+ const examplesPageModules = import.meta.glob('../../../../assets/examples/**/*.astro', { eager: true })
+ const examplesPages = Object.entries(examplesPageModules).map(([file, module]) => {
+ return {
+ file,
+ ...module,
+ }
+ })
+
+ return examplesPages.map((examplesPage) => {
+ const { default: Content, file, url, ...props } = examplesPage
+ const example = getExampleNameFromPagePath(examplesPage.file)
+ let frontmatter: ExampleFrontmatter
+
+ try {
+ frontmatter = exampleFrontmatterSchema.parse(props)
+ } catch (error) {
+ throw new Error(`Invalid frontmatter for the '${example}' example.`, { cause: error })
+ }
+
+ return {
+ params: { example, version: getConfig().docs_version },
+ props: { ...frontmatter, Content },
+ }
+ })
+}
+
+type Props = ExampleFrontmatter
+
+const { Content, ...props } = Astro.props
+---
+
+<ExamplesLayout {...props}>
+ <Content />
+</ExamplesLayout>
diff --git a/site/src/pages/docs/[version]/examples/index.astro b/site/src/pages/docs/[version]/examples/index.astro
new file mode 100644
index 0000000000..95900e7c39
--- /dev/null
+++ b/site/src/pages/docs/[version]/examples/index.astro
@@ -0,0 +1,33 @@
+---
+import SingleLayout from '@layouts/SingleLayout.astro'
+import { getConfig } from '@libs/config'
+import BsThemes from '@layouts/partials/BsThemes.astro'
+import ExamplesMain from '@layouts/partials/ExamplesMain.astro'
+export function getStaticPaths() {
+ return [
+ {
+ params: { version: getConfig().docs_version },
+ },
+ ]
+}
+---
+
+<SingleLayout
+ title="Examples"
+ description="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts."
+>
+ <div class="d-flex flex-column flex-md-row gap-3" slot="header-content">
+ <a
+ href={getConfig().download.dist_examples}
+ class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"
+ >
+ <svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+ Download examples
+ </a>
+ <a href={getConfig().download.source} class="btn btn-lg bd-btn-lg btn-outline-secondary"> Download source code</a>
+ </div>
+ <Fragment slot="main-content">
+ <ExamplesMain />
+ <BsThemes />
+ </Fragment>
+</SingleLayout>
diff --git a/site/src/pages/docs/[version]/index.astro b/site/src/pages/docs/[version]/index.astro
new file mode 100644
index 0000000000..8befeaf622
--- /dev/null
+++ b/site/src/pages/docs/[version]/index.astro
@@ -0,0 +1,15 @@
+---
+import RedirectLayout from '@layouts/RedirectLayout.astro'
+import { getConfig } from '@libs/config'
+import { getVersionedDocsPath } from '@libs/path'
+
+export function getStaticPaths() {
+ return [
+ {
+ params: { version: getConfig().docs_version },
+ },
+ ]
+}
+---
+
+<RedirectLayout path={getVersionedDocsPath('/getting-started/introduction/')} />
diff --git a/site/src/pages/docs/index.astro b/site/src/pages/docs/index.astro
new file mode 100644
index 0000000000..e1796424dc
--- /dev/null
+++ b/site/src/pages/docs/index.astro
@@ -0,0 +1,6 @@
+---
+import RedirectLayout from '@layouts/RedirectLayout.astro'
+import { getVersionedDocsPath } from '@libs/path'
+---
+
+<RedirectLayout path={getVersionedDocsPath('/getting-started/introduction/')} />
diff --git a/site/src/pages/docs/versions.astro b/site/src/pages/docs/versions.astro
new file mode 100644
index 0000000000..7012365c91
--- /dev/null
+++ b/site/src/pages/docs/versions.astro
@@ -0,0 +1,50 @@
+---
+import SingleLayout from '@layouts/SingleLayout.astro'
+import { getConfig } from '@libs/config'
+import { getData } from '@libs/data'
+
+function getVersionsSortedDesc<TKey extends string, TVersions extends Record<TKey, string>>(
+ versions: TVersions[],
+ orderBy: TKey
+) {
+ return [...versions].sort((versionA, versionB) => {
+ return versionB[orderBy].localeCompare(versionA[orderBy])
+ })
+}
+---
+
+<SingleLayout
+ title="Versions"
+ description="An appendix of hosted documentation for nearly every release of Bootstrap, from v1 through v5."
+>
+ <div class="row">
+ {
+ getVersionsSortedDesc(getData('docs-versions'), 'group').map((docsVersion) => {
+ return (
+ <div class="col-md-6 col-lg-4 col-xl mb-4">
+ <h2>{docsVersion.group}</h2>
+ <p>{docsVersion.description}</p>
+ <div class="list-group">
+ {docsVersion.versions.map((version) => {
+ const isCurrentVersion = version === getConfig().docs_version
+
+ return (
+ <a
+ class:list={[
+ 'list-group-item list-group-item-action py-2 text-primary',
+ isCurrentVersion && 'd-flex justify-content-between align-items-center',
+ ]}
+ href={`${docsVersion.baseurl}/${version}/`}
+ >
+ {version}
+ {isCurrentVersion && <span class="badge text-bg-primary">Latest</span>}
+ </a>
+ )
+ })}
+ </div>
+ </div>
+ )
+ })
+ }
+ </div>
+</SingleLayout>
diff --git a/site/src/pages/examples.astro b/site/src/pages/examples.astro
new file mode 100644
index 0000000000..becf4a7665
--- /dev/null
+++ b/site/src/pages/examples.astro
@@ -0,0 +1,6 @@
+---
+import RedirectLayout from '@layouts/RedirectLayout.astro'
+import { getVersionedDocsPath } from '@libs/path'
+---
+
+<RedirectLayout path={getVersionedDocsPath('examples')} />
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
new file mode 100644
index 0000000000..a18419f4cf
--- /dev/null
+++ b/site/src/pages/index.astro
@@ -0,0 +1,24 @@
+---
+import BaseLayout from '@layouts/BaseLayout.astro'
+import GetStarted from '@components/home/GetStarted.astro'
+import Customize from '@components/home/Customize.astro'
+import CSSVariables from '@components/home/CSSVariables.astro'
+import ComponentUtilities from '@components/home/ComponentUtilities.astro'
+import MastHead from '@components/home/MastHead.astro'
+import Plugins from '@components/home/Plugins.astro'
+import Icons from '@components/home/Icons.astro'
+import Themes from '@components/home/Themes.astro'
+---
+
+<BaseLayout>
+ <MastHead />
+ <div class="container-xxl bd-gutter masthead-followup">
+ <GetStarted />
+ <Customize />
+ <CSSVariables />
+ <ComponentUtilities />
+ <Plugins />
+ <Icons />
+ <Themes />
+ </div>
+</BaseLayout>
diff --git a/site/src/pages/robots.txt.ts b/site/src/pages/robots.txt.ts
new file mode 100644
index 0000000000..03b7e550c4
--- /dev/null
+++ b/site/src/pages/robots.txt.ts
@@ -0,0 +1,20 @@
+import type { APIRoute } from 'astro'
+
+export const GET: APIRoute = function GET({ site }) {
+ const isProduction = import.meta.env.PROD
+ const isNetlify = import.meta.env.NETLIFY === 'true'
+
+ const allowCrawling = !isNetlify && isProduction
+
+ const robotsTxt = `# www.robotstxt.org${allowCrawling ? '\n# Allow crawling of all content' : ''}
+User-agent: *
+Disallow: ${allowCrawling ? '' : '/'}
+Sitemap: ${new URL('sitemap-index.xml', site)}
+`
+
+ return new Response(robotsTxt, {
+ headers: {
+ 'Content-Type': 'text/plain',
+ },
+ })
+}
diff --git a/site/src/plugins/algolia-plugin.js b/site/src/plugins/algolia-plugin.js
new file mode 100644
index 0000000000..1f4488c569
--- /dev/null
+++ b/site/src/plugins/algolia-plugin.js
@@ -0,0 +1,21 @@
+import { getConfig } from '../libs/config.js'
+
+/**
+ * Vite plugin to replace placeholder values in search.js with actual configuration values
+ */
+export function algoliaPlugin() {
+ const config = getConfig()
+
+ return {
+ name: 'algolia-config-replacer',
+ transform(code, id) {
+ if (id.includes('search.js')) {
+ return code
+ .replace(/__API_KEY__/g, config.algolia.api_key)
+ .replace(/__INDEX_NAME__/g, config.algolia.index_name)
+ .replace(/__APP_ID__/g, config.algolia.app_id)
+ }
+ return code
+ },
+ }
+}
diff --git a/site/src/plugins/stackblitz-plugin.js b/site/src/plugins/stackblitz-plugin.js
new file mode 100644
index 0000000000..fbe61f9635
--- /dev/null
+++ b/site/src/plugins/stackblitz-plugin.js
@@ -0,0 +1,21 @@
+import { getConfig } from '../libs/config.js'
+
+/**
+ * Vite plugin to replace placeholder values in stackblitz.js with actual configuration values
+ */
+export function stackblitzPlugin() {
+ const config = getConfig()
+
+ return {
+ name: 'stackblitz-config-replacer',
+ transform(code, id) {
+ if (id.includes('stackblitz.js')) {
+ return code
+ .replace(/__CSS_CDN__/g, config.cdn.css)
+ .replace(/__JS_BUNDLE_CDN__/g, config.cdn.js_bundle)
+ .replace(/__DOCS_VERSION__/g, config.docs_version)
+ }
+ return code
+ },
+ }
+}
diff --git a/site/assets/scss/_ads.scss b/site/src/scss/_ads.scss
similarity index 100%
rename from site/assets/scss/_ads.scss
rename to site/src/scss/_ads.scss
diff --git a/site/assets/scss/_anchor.scss b/site/src/scss/_anchor.scss
similarity index 100%
rename from site/assets/scss/_anchor.scss
rename to site/src/scss/_anchor.scss
diff --git a/site/assets/scss/_brand.scss b/site/src/scss/_brand.scss
similarity index 100%
rename from site/assets/scss/_brand.scss
rename to site/src/scss/_brand.scss
diff --git a/site/assets/scss/_buttons.scss b/site/src/scss/_buttons.scss
similarity index 100%
rename from site/assets/scss/_buttons.scss
rename to site/src/scss/_buttons.scss
diff --git a/site/assets/scss/_callouts.scss b/site/src/scss/_callouts.scss
similarity index 100%
rename from site/assets/scss/_callouts.scss
rename to site/src/scss/_callouts.scss
diff --git a/site/assets/scss/_clipboard-js.scss b/site/src/scss/_clipboard-js.scss
similarity index 100%
rename from site/assets/scss/_clipboard-js.scss
rename to site/src/scss/_clipboard-js.scss
diff --git a/site/assets/scss/_colors.scss b/site/src/scss/_colors.scss
similarity index 100%
rename from site/assets/scss/_colors.scss
rename to site/src/scss/_colors.scss
diff --git a/site/assets/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
similarity index 100%
rename from site/assets/scss/_component-examples.scss
rename to site/src/scss/_component-examples.scss
diff --git a/site/assets/scss/_content.scss b/site/src/scss/_content.scss
similarity index 100%
rename from site/assets/scss/_content.scss
rename to site/src/scss/_content.scss
diff --git a/site/assets/scss/_footer.scss b/site/src/scss/_footer.scss
similarity index 100%
rename from site/assets/scss/_footer.scss
rename to site/src/scss/_footer.scss
diff --git a/site/assets/scss/_layout.scss b/site/src/scss/_layout.scss
similarity index 100%
rename from site/assets/scss/_layout.scss
rename to site/src/scss/_layout.scss
diff --git a/site/assets/scss/_masthead.scss b/site/src/scss/_masthead.scss
similarity index 100%
rename from site/assets/scss/_masthead.scss
rename to site/src/scss/_masthead.scss
diff --git a/site/assets/scss/_navbar.scss b/site/src/scss/_navbar.scss
similarity index 100%
rename from site/assets/scss/_navbar.scss
rename to site/src/scss/_navbar.scss
diff --git a/site/assets/scss/_placeholder-img.scss b/site/src/scss/_placeholder-img.scss
similarity index 100%
rename from site/assets/scss/_placeholder-img.scss
rename to site/src/scss/_placeholder-img.scss
diff --git a/site/assets/scss/_scrolling.scss b/site/src/scss/_scrolling.scss
similarity index 100%
rename from site/assets/scss/_scrolling.scss
rename to site/src/scss/_scrolling.scss
diff --git a/site/assets/scss/_search.scss b/site/src/scss/_search.scss
similarity index 100%
rename from site/assets/scss/_search.scss
rename to site/src/scss/_search.scss
diff --git a/site/assets/scss/_sidebar.scss b/site/src/scss/_sidebar.scss
similarity index 100%
rename from site/assets/scss/_sidebar.scss
rename to site/src/scss/_sidebar.scss
diff --git a/site/assets/scss/_skippy.scss b/site/src/scss/_skippy.scss
similarity index 100%
rename from site/assets/scss/_skippy.scss
rename to site/src/scss/_skippy.scss
diff --git a/site/assets/scss/_syntax.scss b/site/src/scss/_syntax.scss
similarity index 68%
rename from site/assets/scss/_syntax.scss
rename to site/src/scss/_syntax.scss
index 38ac11fb8a..95582f4dda 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/src/scss/_syntax.scss
@@ -124,19 +124,120 @@
// Fix bash
.language-sh .c { color: var(--base03); }
-.chroma {
- .language-bash,
- .language-sh {
- .line::before {
- color: var(--base03);
- content: "$ ";
- user-select: none;
- }
+// Shell prompts
+code.language-bash::before,
+code.language-sh::before {
+ display: inline-block;
+ color: var(--base03);
+ content: "$ ";
+ user-select: none;
+}
+
+code.language-powershell::before {
+ display: inline-block;
+ color: var(--base0C);
+ content: "PM> ";
+ user-select: none;
+}
+
+// Token styles
+.token {
+ &.comment,
+ &.prolog,
+ &.doctype,
+ &.cdata {
+ color: var(--base03);
}
- .language-powershell::before {
+ &.punctuation {
+ color: var(--base05);
+ }
+
+ &.property {
+ color: var(--base0A);
+ }
+
+ &.tag {
+ color: var(--base08);
+ }
+
+ &.boolean,
+ &.number {
+ color: var(--base09);
+ }
+
+ &.constant,
+ &.symbol,
+ &.deleted {
+ color: var(--base08);
+ }
+
+ &.selector,
+ &.attr-name,
+ &.string,
+ &.char,
+ &.builtin,
+ &.inserted {
color: var(--base0C);
- content: "PM> ";
- user-select: none;
+ }
+
+ &.operator,
+ &.entity,
+ &.url {
+ color: var(--base05);
+ }
+
+ &.atrule,
+ &.attr-value,
+ &.keyword {
+ color: var(--base0E);
+ }
+
+ &.function {
+ color: var(--base0B);
+ }
+
+ &.class-name {
+ color: var(--base07);
+ }
+
+ &.regex,
+ &.important,
+ &.variable {
+ color: var(--base0A);
+ }
+
+ &.important,
+ &.bold {
+ font-weight: bold;
+ }
+
+ &.italic {
+ font-style: italic;
+ }
+
+ &.entity {
+ cursor: help;
+ }
+}
+
+// Language-specific overrides
+.language-diff {
+ .token {
+ &.deleted {
+ color: $red-400;
+ background-color: transparent;
+ }
+ &.inserted {
+ color: $green-400;
+ background-color: transparent;
+ }
+ }
+}
+
+.language-bash,
+.language-sh {
+ .token.comment {
+ color: var(--base03);
}
}
diff --git a/site/assets/scss/_toc.scss b/site/src/scss/_toc.scss
similarity index 100%
rename from site/assets/scss/_toc.scss
rename to site/src/scss/_toc.scss
diff --git a/site/assets/scss/_variables.scss b/site/src/scss/_variables.scss
similarity index 100%
rename from site/assets/scss/_variables.scss
rename to site/src/scss/_variables.scss
diff --git a/site/assets/scss/docs.scss b/site/src/scss/docs.scss
similarity index 100%
rename from site/assets/scss/docs.scss
rename to site/src/scss/docs.scss
diff --git a/site/assets/scss/search.scss b/site/src/scss/docs_search.scss
similarity index 100%
rename from site/assets/scss/search.scss
rename to site/src/scss/docs_search.scss
diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts
new file mode 100644
index 0000000000..3aa1348c42
--- /dev/null
+++ b/site/src/types/auto-import.d.ts
@@ -0,0 +1,21 @@
+/**
+ * DO NOT EDIT THIS FILE MANUALLY.
+ *
+ * This file is automatically generated by the Boostrap Astro Integration.
+ * It contains the type definitions for the components that are auto imported in all pages.
+ * @see site/src/libs/astro.ts
+ */
+export declare global {
+ export const AddedIn: typeof import('@shortcodes/AddedIn.astro').default
+ export const BsTable: typeof import('@shortcodes/BsTable.astro').default
+ export const Callout: typeof import('@shortcodes/Callout.astro').default
+ export const CalloutDeprecatedDarkVariants: typeof import('@shortcodes/CalloutDeprecatedDarkVariants.astro').default
+ export const Code: typeof import('@shortcodes/Code.astro').default
+ export const DeprecatedIn: typeof import('@shortcodes/DeprecatedIn.astro').default
+ export const Example: typeof import('@shortcodes/Example.astro').default
+ export const JsDismiss: typeof import('@shortcodes/JsDismiss.astro').default
+ export const JsDocs: typeof import('@shortcodes/JsDocs.astro').default
+ export const Placeholder: typeof import('@shortcodes/Placeholder.astro').default
+ export const ScssDocs: typeof import('@shortcodes/ScssDocs.astro').default
+ export const Table: typeof import('@shortcodes/Table.astro').default
+}
diff --git a/site/src/types/window.d.ts b/site/src/types/window.d.ts
new file mode 100644
index 0000000000..9a6959ef8f
--- /dev/null
+++ b/site/src/types/window.d.ts
@@ -0,0 +1,25 @@
+export declare global {
+ export const StackBlitzSDK: typeof import('@stackblitz/sdk').default
+
+ /**
+ * The `bootstrap` object is exposed to the global scope and also to the `window` object in the browser.
+ * We rely on the DefinitelyTyped community types for this object to get proper type checking for part of the
+ * documentation using the Bootstrap API and avoid any misuse of the API.
+ * To temporarily or permanently disable this feature (e.g. when modifying the Bootstrap API used in the
+ * documentation), the 2 lines containing `typeof import('bootstrap')` can be commented and replaced by the commented
+ * lines containing `any`.
+ *
+ * The documentation is currently using the following APIs from Bootstrap:
+ *
+ * - `bootstrap.Tooltip.getOrCreateInstance`
+ * - `bootstrap.Tooltip.getInstance`
+ *
+ */
+ export const bootstrap: typeof import('bootstrap')
+ // export const bootstrap: any
+
+ interface Window {
+ bootstrap: typeof import('bootstrap')
+ // bootstrap: any
+ }
+}
diff --git a/site/static/docs/[version]/assets/CNAME b/site/static/docs/[version]/assets/CNAME
new file mode 100644
index 0000000000..52c853392c
--- /dev/null
+++ b/site/static/docs/[version]/assets/CNAME
@@ -0,0 +1 @@
+getbootstrap.com
diff --git a/site/static/docs/5.3/assets/img/favicons/apple-touch-icon.png b/site/static/docs/[version]/assets/apple-touch-icon.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/favicons/apple-touch-icon.png
rename to site/static/docs/[version]/assets/apple-touch-icon.png
diff --git a/site/static/docs/5.3/assets/brand/bootstrap-logo-black.svg b/site/static/docs/[version]/assets/brand/bootstrap-logo-black.svg
similarity index 100%
rename from site/static/docs/5.3/assets/brand/bootstrap-logo-black.svg
rename to site/static/docs/[version]/assets/brand/bootstrap-logo-black.svg
diff --git a/site/static/docs/5.3/assets/brand/bootstrap-logo-shadow.png b/site/static/docs/[version]/assets/brand/bootstrap-logo-shadow.png
similarity index 100%
rename from site/static/docs/5.3/assets/brand/bootstrap-logo-shadow.png
rename to site/static/docs/[version]/assets/brand/bootstrap-logo-shadow.png
diff --git a/site/static/docs/5.3/assets/brand/bootstrap-logo-shadow@2x.png b/site/static/docs/[version]/assets/brand/bootstrap-logo-shadow@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/brand/bootstrap-logo-shadow@2x.png
rename to site/static/docs/[version]/assets/brand/bootstrap-logo-shadow@2x.png
diff --git a/site/static/docs/5.3/assets/brand/bootstrap-logo-white.svg b/site/static/docs/[version]/assets/brand/bootstrap-logo-white.svg
similarity index 100%
rename from site/static/docs/5.3/assets/brand/bootstrap-logo-white.svg
rename to site/static/docs/[version]/assets/brand/bootstrap-logo-white.svg
diff --git a/site/static/docs/5.3/assets/brand/bootstrap-logo.svg b/site/static/docs/[version]/assets/brand/bootstrap-logo.svg
similarity index 100%
rename from site/static/docs/5.3/assets/brand/bootstrap-logo.svg
rename to site/static/docs/[version]/assets/brand/bootstrap-logo.svg
diff --git a/site/static/docs/5.3/assets/brand/bootstrap-social.png b/site/static/docs/[version]/assets/brand/bootstrap-social.png
similarity index 100%
rename from site/static/docs/5.3/assets/brand/bootstrap-social.png
rename to site/static/docs/[version]/assets/brand/bootstrap-social.png
diff --git a/site/static/docs/5.3/assets/img/favicons/favicon.ico b/site/static/docs/[version]/assets/favicon.ico
similarity index 100%
rename from site/static/docs/5.3/assets/img/favicons/favicon.ico
rename to site/static/docs/[version]/assets/favicon.ico
diff --git a/site/static/docs/5.3/assets/img/bootstrap-icons.png b/site/static/docs/[version]/assets/img/bootstrap-icons.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/bootstrap-icons.png
rename to site/static/docs/[version]/assets/img/bootstrap-icons.png
diff --git a/site/static/docs/5.3/assets/img/bootstrap-icons@2x.png b/site/static/docs/[version]/assets/img/bootstrap-icons@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/bootstrap-icons@2x.png
rename to site/static/docs/[version]/assets/img/bootstrap-icons@2x.png
diff --git a/site/static/docs/5.3/assets/img/bootstrap-themes-collage.png b/site/static/docs/[version]/assets/img/bootstrap-themes-collage.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/bootstrap-themes-collage.png
rename to site/static/docs/[version]/assets/img/bootstrap-themes-collage.png
diff --git a/site/static/docs/5.3/assets/img/bootstrap-themes-collage@2x.png b/site/static/docs/[version]/assets/img/bootstrap-themes-collage@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/bootstrap-themes-collage@2x.png
rename to site/static/docs/[version]/assets/img/bootstrap-themes-collage@2x.png
diff --git a/site/static/docs/5.3/assets/img/bootstrap-themes.png b/site/static/docs/[version]/assets/img/bootstrap-themes.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/bootstrap-themes.png
rename to site/static/docs/[version]/assets/img/bootstrap-themes.png
diff --git a/site/static/docs/5.3/assets/img/bootstrap-themes@2x.png b/site/static/docs/[version]/assets/img/bootstrap-themes@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/bootstrap-themes@2x.png
rename to site/static/docs/[version]/assets/img/bootstrap-themes@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/album-rtl.png b/site/static/docs/[version]/assets/img/examples/album-rtl.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/album-rtl.png
rename to site/static/docs/[version]/assets/img/examples/album-rtl.png
diff --git a/site/static/docs/5.3/assets/img/examples/album-rtl@2x.png b/site/static/docs/[version]/assets/img/examples/album-rtl@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/album-rtl@2x.png
rename to site/static/docs/[version]/assets/img/examples/album-rtl@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/album.png b/site/static/docs/[version]/assets/img/examples/album.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/album.png
rename to site/static/docs/[version]/assets/img/examples/album.png
diff --git a/site/static/docs/5.3/assets/img/examples/album@2x.png b/site/static/docs/[version]/assets/img/examples/album@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/album@2x.png
rename to site/static/docs/[version]/assets/img/examples/album@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/badges.png b/site/static/docs/[version]/assets/img/examples/badges.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/badges.png
rename to site/static/docs/[version]/assets/img/examples/badges.png
diff --git a/site/static/docs/5.3/assets/img/examples/badges@2x.png b/site/static/docs/[version]/assets/img/examples/badges@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/badges@2x.png
rename to site/static/docs/[version]/assets/img/examples/badges@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/blog-rtl.png b/site/static/docs/[version]/assets/img/examples/blog-rtl.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/blog-rtl.png
rename to site/static/docs/[version]/assets/img/examples/blog-rtl.png
diff --git a/site/static/docs/5.3/assets/img/examples/blog-rtl@2x.png b/site/static/docs/[version]/assets/img/examples/blog-rtl@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/blog-rtl@2x.png
rename to site/static/docs/[version]/assets/img/examples/blog-rtl@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/blog.png b/site/static/docs/[version]/assets/img/examples/blog.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/blog.png
rename to site/static/docs/[version]/assets/img/examples/blog.png
diff --git a/site/static/docs/5.3/assets/img/examples/blog@2x.png b/site/static/docs/[version]/assets/img/examples/blog@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/blog@2x.png
rename to site/static/docs/[version]/assets/img/examples/blog@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/breadcrumbs.png b/site/static/docs/[version]/assets/img/examples/breadcrumbs.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/breadcrumbs.png
rename to site/static/docs/[version]/assets/img/examples/breadcrumbs.png
diff --git a/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png b/site/static/docs/[version]/assets/img/examples/breadcrumbs@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png
rename to site/static/docs/[version]/assets/img/examples/breadcrumbs@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/buttons.png b/site/static/docs/[version]/assets/img/examples/buttons.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/buttons.png
rename to site/static/docs/[version]/assets/img/examples/buttons.png
diff --git a/site/static/docs/5.3/assets/img/examples/buttons@2x.png b/site/static/docs/[version]/assets/img/examples/buttons@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/buttons@2x.png
rename to site/static/docs/[version]/assets/img/examples/buttons@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/carousel-rtl.png b/site/static/docs/[version]/assets/img/examples/carousel-rtl.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/carousel-rtl.png
rename to site/static/docs/[version]/assets/img/examples/carousel-rtl.png
diff --git a/site/static/docs/5.3/assets/img/examples/carousel-rtl@2x.png b/site/static/docs/[version]/assets/img/examples/carousel-rtl@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/carousel-rtl@2x.png
rename to site/static/docs/[version]/assets/img/examples/carousel-rtl@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/carousel.png b/site/static/docs/[version]/assets/img/examples/carousel.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/carousel.png
rename to site/static/docs/[version]/assets/img/examples/carousel.png
diff --git a/site/static/docs/5.3/assets/img/examples/carousel@2x.png b/site/static/docs/[version]/assets/img/examples/carousel@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/carousel@2x.png
rename to site/static/docs/[version]/assets/img/examples/carousel@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/cheatsheet-rtl.png b/site/static/docs/[version]/assets/img/examples/cheatsheet-rtl.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/cheatsheet-rtl.png
rename to site/static/docs/[version]/assets/img/examples/cheatsheet-rtl.png
diff --git a/site/static/docs/5.3/assets/img/examples/cheatsheet-rtl@2x.png b/site/static/docs/[version]/assets/img/examples/cheatsheet-rtl@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/cheatsheet-rtl@2x.png
rename to site/static/docs/[version]/assets/img/examples/cheatsheet-rtl@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/cheatsheet.png b/site/static/docs/[version]/assets/img/examples/cheatsheet.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/cheatsheet.png
rename to site/static/docs/[version]/assets/img/examples/cheatsheet.png
diff --git a/site/static/docs/5.3/assets/img/examples/cheatsheet@2x.png b/site/static/docs/[version]/assets/img/examples/cheatsheet@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/cheatsheet@2x.png
rename to site/static/docs/[version]/assets/img/examples/cheatsheet@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/checkout-rtl.png b/site/static/docs/[version]/assets/img/examples/checkout-rtl.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/checkout-rtl.png
rename to site/static/docs/[version]/assets/img/examples/checkout-rtl.png
diff --git a/site/static/docs/5.3/assets/img/examples/checkout-rtl@2x.png b/site/static/docs/[version]/assets/img/examples/checkout-rtl@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/checkout-rtl@2x.png
rename to site/static/docs/[version]/assets/img/examples/checkout-rtl@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/checkout.png b/site/static/docs/[version]/assets/img/examples/checkout.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/checkout.png
rename to site/static/docs/[version]/assets/img/examples/checkout.png
diff --git a/site/static/docs/5.3/assets/img/examples/checkout@2x.png b/site/static/docs/[version]/assets/img/examples/checkout@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/checkout@2x.png
rename to site/static/docs/[version]/assets/img/examples/checkout@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/cover.png b/site/static/docs/[version]/assets/img/examples/cover.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/cover.png
rename to site/static/docs/[version]/assets/img/examples/cover.png
diff --git a/site/static/docs/5.3/assets/img/examples/cover@2x.png b/site/static/docs/[version]/assets/img/examples/cover@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/cover@2x.png
rename to site/static/docs/[version]/assets/img/examples/cover@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/dashboard-rtl.png b/site/static/docs/[version]/assets/img/examples/dashboard-rtl.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/dashboard-rtl.png
rename to site/static/docs/[version]/assets/img/examples/dashboard-rtl.png
diff --git a/site/static/docs/5.3/assets/img/examples/dashboard-rtl@2x.png b/site/static/docs/[version]/assets/img/examples/dashboard-rtl@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/dashboard-rtl@2x.png
rename to site/static/docs/[version]/assets/img/examples/dashboard-rtl@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/dashboard.png b/site/static/docs/[version]/assets/img/examples/dashboard.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/dashboard.png
rename to site/static/docs/[version]/assets/img/examples/dashboard.png
diff --git a/site/static/docs/5.3/assets/img/examples/dashboard@2x.png b/site/static/docs/[version]/assets/img/examples/dashboard@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/dashboard@2x.png
rename to site/static/docs/[version]/assets/img/examples/dashboard@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/dropdowns.png b/site/static/docs/[version]/assets/img/examples/dropdowns.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/dropdowns.png
rename to site/static/docs/[version]/assets/img/examples/dropdowns.png
diff --git a/site/static/docs/5.3/assets/img/examples/dropdowns@2x.png b/site/static/docs/[version]/assets/img/examples/dropdowns@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/dropdowns@2x.png
rename to site/static/docs/[version]/assets/img/examples/dropdowns@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/features.png b/site/static/docs/[version]/assets/img/examples/features.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/features.png
rename to site/static/docs/[version]/assets/img/examples/features.png
diff --git a/site/static/docs/5.3/assets/img/examples/features@2x.png b/site/static/docs/[version]/assets/img/examples/features@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/features@2x.png
rename to site/static/docs/[version]/assets/img/examples/features@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/footers.png b/site/static/docs/[version]/assets/img/examples/footers.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/footers.png
rename to site/static/docs/[version]/assets/img/examples/footers.png
diff --git a/site/static/docs/5.3/assets/img/examples/footers@2x.png b/site/static/docs/[version]/assets/img/examples/footers@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/footers@2x.png
rename to site/static/docs/[version]/assets/img/examples/footers@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/grid.png b/site/static/docs/[version]/assets/img/examples/grid.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/grid.png
rename to site/static/docs/[version]/assets/img/examples/grid.png
diff --git a/site/static/docs/5.3/assets/img/examples/grid@2x.png b/site/static/docs/[version]/assets/img/examples/grid@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/grid@2x.png
rename to site/static/docs/[version]/assets/img/examples/grid@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/headers.png b/site/static/docs/[version]/assets/img/examples/headers.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/headers.png
rename to site/static/docs/[version]/assets/img/examples/headers.png
diff --git a/site/static/docs/5.3/assets/img/examples/headers@2x.png b/site/static/docs/[version]/assets/img/examples/headers@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/headers@2x.png
rename to site/static/docs/[version]/assets/img/examples/headers@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/heroes.png b/site/static/docs/[version]/assets/img/examples/heroes.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/heroes.png
rename to site/static/docs/[version]/assets/img/examples/heroes.png
diff --git a/site/static/docs/5.3/assets/img/examples/heroes@2x.png b/site/static/docs/[version]/assets/img/examples/heroes@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/heroes@2x.png
rename to site/static/docs/[version]/assets/img/examples/heroes@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/jumbotron.png b/site/static/docs/[version]/assets/img/examples/jumbotron.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/jumbotron.png
rename to site/static/docs/[version]/assets/img/examples/jumbotron.png
diff --git a/site/static/docs/5.3/assets/img/examples/jumbotron@2x.png b/site/static/docs/[version]/assets/img/examples/jumbotron@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/jumbotron@2x.png
rename to site/static/docs/[version]/assets/img/examples/jumbotron@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/jumbotrons.png b/site/static/docs/[version]/assets/img/examples/jumbotrons.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/jumbotrons.png
rename to site/static/docs/[version]/assets/img/examples/jumbotrons.png
diff --git a/site/static/docs/5.3/assets/img/examples/jumbotrons@2x.png b/site/static/docs/[version]/assets/img/examples/jumbotrons@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/jumbotrons@2x.png
rename to site/static/docs/[version]/assets/img/examples/jumbotrons@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/list-groups.png b/site/static/docs/[version]/assets/img/examples/list-groups.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/list-groups.png
rename to site/static/docs/[version]/assets/img/examples/list-groups.png
diff --git a/site/static/docs/5.3/assets/img/examples/list-groups@2x.png b/site/static/docs/[version]/assets/img/examples/list-groups@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/list-groups@2x.png
rename to site/static/docs/[version]/assets/img/examples/list-groups@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/masonry.png b/site/static/docs/[version]/assets/img/examples/masonry.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/masonry.png
rename to site/static/docs/[version]/assets/img/examples/masonry.png
diff --git a/site/static/docs/5.3/assets/img/examples/masonry@2x.png b/site/static/docs/[version]/assets/img/examples/masonry@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/masonry@2x.png
rename to site/static/docs/[version]/assets/img/examples/masonry@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/modals.png b/site/static/docs/[version]/assets/img/examples/modals.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/modals.png
rename to site/static/docs/[version]/assets/img/examples/modals.png
diff --git a/site/static/docs/5.3/assets/img/examples/modals@2x.png b/site/static/docs/[version]/assets/img/examples/modals@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/modals@2x.png
rename to site/static/docs/[version]/assets/img/examples/modals@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbar-bottom.png b/site/static/docs/[version]/assets/img/examples/navbar-bottom.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbar-bottom.png
rename to site/static/docs/[version]/assets/img/examples/navbar-bottom.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbar-bottom@2x.png b/site/static/docs/[version]/assets/img/examples/navbar-bottom@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbar-bottom@2x.png
rename to site/static/docs/[version]/assets/img/examples/navbar-bottom@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbar-fixed.png b/site/static/docs/[version]/assets/img/examples/navbar-fixed.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbar-fixed.png
rename to site/static/docs/[version]/assets/img/examples/navbar-fixed.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbar-fixed@2x.png b/site/static/docs/[version]/assets/img/examples/navbar-fixed@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbar-fixed@2x.png
rename to site/static/docs/[version]/assets/img/examples/navbar-fixed@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbar-static.png b/site/static/docs/[version]/assets/img/examples/navbar-static.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbar-static.png
rename to site/static/docs/[version]/assets/img/examples/navbar-static.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbar-static@2x.png b/site/static/docs/[version]/assets/img/examples/navbar-static@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbar-static@2x.png
rename to site/static/docs/[version]/assets/img/examples/navbar-static@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbars-offcanvas.png b/site/static/docs/[version]/assets/img/examples/navbars-offcanvas.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbars-offcanvas.png
rename to site/static/docs/[version]/assets/img/examples/navbars-offcanvas.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbars-offcanvas@2x.png b/site/static/docs/[version]/assets/img/examples/navbars-offcanvas@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbars-offcanvas@2x.png
rename to site/static/docs/[version]/assets/img/examples/navbars-offcanvas@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbars.png b/site/static/docs/[version]/assets/img/examples/navbars.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbars.png
rename to site/static/docs/[version]/assets/img/examples/navbars.png
diff --git a/site/static/docs/5.3/assets/img/examples/navbars@2x.png b/site/static/docs/[version]/assets/img/examples/navbars@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/navbars@2x.png
rename to site/static/docs/[version]/assets/img/examples/navbars@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/offcanvas-navbar.png b/site/static/docs/[version]/assets/img/examples/offcanvas-navbar.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/offcanvas-navbar.png
rename to site/static/docs/[version]/assets/img/examples/offcanvas-navbar.png
diff --git a/site/static/docs/5.3/assets/img/examples/offcanvas-navbar@2x.png b/site/static/docs/[version]/assets/img/examples/offcanvas-navbar@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/offcanvas-navbar@2x.png
rename to site/static/docs/[version]/assets/img/examples/offcanvas-navbar@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/pricing.png b/site/static/docs/[version]/assets/img/examples/pricing.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/pricing.png
rename to site/static/docs/[version]/assets/img/examples/pricing.png
diff --git a/site/static/docs/5.3/assets/img/examples/pricing@2x.png b/site/static/docs/[version]/assets/img/examples/pricing@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/pricing@2x.png
rename to site/static/docs/[version]/assets/img/examples/pricing@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/product.png b/site/static/docs/[version]/assets/img/examples/product.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/product.png
rename to site/static/docs/[version]/assets/img/examples/product.png
diff --git a/site/static/docs/5.3/assets/img/examples/product@2x.png b/site/static/docs/[version]/assets/img/examples/product@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/product@2x.png
rename to site/static/docs/[version]/assets/img/examples/product@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/sidebars.png b/site/static/docs/[version]/assets/img/examples/sidebars.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/sidebars.png
rename to site/static/docs/[version]/assets/img/examples/sidebars.png
diff --git a/site/static/docs/5.3/assets/img/examples/sidebars@2x.png b/site/static/docs/[version]/assets/img/examples/sidebars@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/sidebars@2x.png
rename to site/static/docs/[version]/assets/img/examples/sidebars@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/sign-in.png b/site/static/docs/[version]/assets/img/examples/sign-in.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/sign-in.png
rename to site/static/docs/[version]/assets/img/examples/sign-in.png
diff --git a/site/static/docs/5.3/assets/img/examples/sign-in@2x.png b/site/static/docs/[version]/assets/img/examples/sign-in@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/sign-in@2x.png
rename to site/static/docs/[version]/assets/img/examples/sign-in@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/starter-template.png b/site/static/docs/[version]/assets/img/examples/starter-template.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/starter-template.png
rename to site/static/docs/[version]/assets/img/examples/starter-template.png
diff --git a/site/static/docs/5.3/assets/img/examples/starter-template@2x.png b/site/static/docs/[version]/assets/img/examples/starter-template@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/starter-template@2x.png
rename to site/static/docs/[version]/assets/img/examples/starter-template@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar.png b/site/static/docs/[version]/assets/img/examples/sticky-footer-navbar.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/sticky-footer-navbar.png
rename to site/static/docs/[version]/assets/img/examples/sticky-footer-navbar.png
diff --git a/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar@2x.png b/site/static/docs/[version]/assets/img/examples/sticky-footer-navbar@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/sticky-footer-navbar@2x.png
rename to site/static/docs/[version]/assets/img/examples/sticky-footer-navbar@2x.png
diff --git a/site/static/docs/5.3/assets/img/examples/sticky-footer.png b/site/static/docs/[version]/assets/img/examples/sticky-footer.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/sticky-footer.png
rename to site/static/docs/[version]/assets/img/examples/sticky-footer.png
diff --git a/site/static/docs/5.3/assets/img/examples/sticky-footer@2x.png b/site/static/docs/[version]/assets/img/examples/sticky-footer@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/examples/sticky-footer@2x.png
rename to site/static/docs/[version]/assets/img/examples/sticky-footer@2x.png
diff --git a/site/static/docs/5.3/assets/img/favicons/android-chrome-192x192.png b/site/static/docs/[version]/assets/img/favicons/android-chrome-192x192.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/favicons/android-chrome-192x192.png
rename to site/static/docs/[version]/assets/img/favicons/android-chrome-192x192.png
diff --git a/site/static/docs/5.3/assets/img/favicons/android-chrome-512x512.png b/site/static/docs/[version]/assets/img/favicons/android-chrome-512x512.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/favicons/android-chrome-512x512.png
rename to site/static/docs/[version]/assets/img/favicons/android-chrome-512x512.png
diff --git a/site/static/docs/[version]/assets/img/favicons/apple-touch-icon.png b/site/static/docs/[version]/assets/img/favicons/apple-touch-icon.png
new file mode 100644
index 0000000000..8f8ff8a810
Binary files /dev/null and b/site/static/docs/[version]/assets/img/favicons/apple-touch-icon.png differ
diff --git a/site/static/docs/5.3/assets/img/favicons/favicon-16x16.png b/site/static/docs/[version]/assets/img/favicons/favicon-16x16.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/favicons/favicon-16x16.png
rename to site/static/docs/[version]/assets/img/favicons/favicon-16x16.png
diff --git a/site/static/docs/5.3/assets/img/favicons/favicon-32x32.png b/site/static/docs/[version]/assets/img/favicons/favicon-32x32.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/favicons/favicon-32x32.png
rename to site/static/docs/[version]/assets/img/favicons/favicon-32x32.png
diff --git a/site/static/docs/[version]/assets/img/favicons/favicon.ico b/site/static/docs/[version]/assets/img/favicons/favicon.ico
new file mode 100644
index 0000000000..0549906208
Binary files /dev/null and b/site/static/docs/[version]/assets/img/favicons/favicon.ico differ
diff --git a/site/static/docs/5.3/assets/img/favicons/manifest.json b/site/static/docs/[version]/assets/img/favicons/manifest.json
similarity index 100%
rename from site/static/docs/5.3/assets/img/favicons/manifest.json
rename to site/static/docs/[version]/assets/img/favicons/manifest.json
diff --git a/site/static/docs/5.3/assets/img/favicons/safari-pinned-tab.svg b/site/static/docs/[version]/assets/img/favicons/safari-pinned-tab.svg
similarity index 100%
rename from site/static/docs/5.3/assets/img/favicons/safari-pinned-tab.svg
rename to site/static/docs/[version]/assets/img/favicons/safari-pinned-tab.svg
diff --git a/site/static/docs/5.3/assets/img/guides/bootstrap-parcel.png b/site/static/docs/[version]/assets/img/guides/bootstrap-parcel.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/bootstrap-parcel.png
rename to site/static/docs/[version]/assets/img/guides/bootstrap-parcel.png
diff --git a/site/static/docs/5.3/assets/img/guides/bootstrap-parcel@2x.png b/site/static/docs/[version]/assets/img/guides/bootstrap-parcel@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/bootstrap-parcel@2x.png
rename to site/static/docs/[version]/assets/img/guides/bootstrap-parcel@2x.png
diff --git a/site/static/docs/5.3/assets/img/guides/bootstrap-vite.png b/site/static/docs/[version]/assets/img/guides/bootstrap-vite.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/bootstrap-vite.png
rename to site/static/docs/[version]/assets/img/guides/bootstrap-vite.png
diff --git a/site/static/docs/5.3/assets/img/guides/bootstrap-vite@2x.png b/site/static/docs/[version]/assets/img/guides/bootstrap-vite@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/bootstrap-vite@2x.png
rename to site/static/docs/[version]/assets/img/guides/bootstrap-vite@2x.png
diff --git a/site/static/docs/5.3/assets/img/guides/bootstrap-webpack.png b/site/static/docs/[version]/assets/img/guides/bootstrap-webpack.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/bootstrap-webpack.png
rename to site/static/docs/[version]/assets/img/guides/bootstrap-webpack.png
diff --git a/site/static/docs/5.3/assets/img/guides/bootstrap-webpack@2x.png b/site/static/docs/[version]/assets/img/guides/bootstrap-webpack@2x.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/bootstrap-webpack@2x.png
rename to site/static/docs/[version]/assets/img/guides/bootstrap-webpack@2x.png
diff --git a/site/static/docs/5.3/assets/img/guides/parcel-dev-server-bootstrap.png b/site/static/docs/[version]/assets/img/guides/parcel-dev-server-bootstrap.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/parcel-dev-server-bootstrap.png
rename to site/static/docs/[version]/assets/img/guides/parcel-dev-server-bootstrap.png
diff --git a/site/static/docs/5.3/assets/img/guides/parcel-dev-server.png b/site/static/docs/[version]/assets/img/guides/parcel-dev-server.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/parcel-dev-server.png
rename to site/static/docs/[version]/assets/img/guides/parcel-dev-server.png
diff --git a/site/static/docs/5.3/assets/img/guides/vite-dev-server-bootstrap.png b/site/static/docs/[version]/assets/img/guides/vite-dev-server-bootstrap.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/vite-dev-server-bootstrap.png
rename to site/static/docs/[version]/assets/img/guides/vite-dev-server-bootstrap.png
diff --git a/site/static/docs/5.3/assets/img/guides/vite-dev-server.png b/site/static/docs/[version]/assets/img/guides/vite-dev-server.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/vite-dev-server.png
rename to site/static/docs/[version]/assets/img/guides/vite-dev-server.png
diff --git a/site/static/docs/5.3/assets/img/guides/webpack-dev-server-bootstrap.png b/site/static/docs/[version]/assets/img/guides/webpack-dev-server-bootstrap.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/webpack-dev-server-bootstrap.png
rename to site/static/docs/[version]/assets/img/guides/webpack-dev-server-bootstrap.png
diff --git a/site/static/docs/5.3/assets/img/guides/webpack-dev-server.png b/site/static/docs/[version]/assets/img/guides/webpack-dev-server.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/guides/webpack-dev-server.png
rename to site/static/docs/[version]/assets/img/guides/webpack-dev-server.png
diff --git a/site/static/docs/5.3/assets/img/parcel.png b/site/static/docs/[version]/assets/img/parcel.png
similarity index 100%
rename from site/static/docs/5.3/assets/img/parcel.png
rename to site/static/docs/[version]/assets/img/parcel.png
diff --git a/site/static/docs/5.3/assets/img/vite.svg b/site/static/docs/[version]/assets/img/vite.svg
similarity index 100%
rename from site/static/docs/5.3/assets/img/vite.svg
rename to site/static/docs/[version]/assets/img/vite.svg
diff --git a/site/static/docs/5.3/assets/img/webpack.svg b/site/static/docs/[version]/assets/img/webpack.svg
similarity index 100%
rename from site/static/docs/5.3/assets/img/webpack.svg
rename to site/static/docs/[version]/assets/img/webpack.svg
diff --git a/site/static/docs/5.3/assets/js/color-modes.js b/site/static/docs/[version]/assets/js/color-modes.js
similarity index 100%
rename from site/static/docs/5.3/assets/js/color-modes.js
rename to site/static/docs/[version]/assets/js/color-modes.js
diff --git a/site/static/docs/5.3/assets/js/validate-forms.js b/site/static/docs/[version]/assets/js/validate-forms.js
similarity index 100%
rename from site/static/docs/5.3/assets/js/validate-forms.js
rename to site/static/docs/[version]/assets/js/validate-forms.js
diff --git a/site/static/docs/[version]/assets/sw.js b/site/static/docs/[version]/assets/sw.js
new file mode 100644
index 0000000000..dcebfd2d67
--- /dev/null
+++ b/site/static/docs/[version]/assets/sw.js
@@ -0,0 +1,27 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+(function () {
+ 'use strict'
+
+ if ('serviceWorker' in navigator) {
+ window.addEventListener('load', function () {
+ navigator.serviceWorker.getRegistrations().then(function (registrations) {
+ for (var registration of registrations) {
+ registration.unregister()
+ .then(function () {
+ return self.clients.matchAll()
+ })
+ .then(function (clients) {
+ clients.forEach(function (client) {
+ if (client.url && 'navigate' in client) {
+ client.navigate(client.url)
+ }
+ })
+ })
+ }
+ })
+ })
+ }
+})()
diff --git a/site/tsconfig.json b/site/tsconfig.json
new file mode 100644
index 0000000000..f53ee0242f
--- /dev/null
+++ b/site/tsconfig.json
@@ -0,0 +1,13 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@assets/*": ["src/assets/*"],
+ "@components/*": ["src/components/*"],
+ "@layouts/*": ["src/layouts/*"],
+ "@libs/*": ["src/libs/*"],
+ "@shortcodes/*": ["src/components/shortcodes/*"]
+ }
+ }
+}
-
- {{ .name }} @{{ .user }}
-
-
- {{ end -}}
-