Add Markdownlint for our MDX

.markdownlint.json

@@ -0,0 +1,17 @@
+{
+  "default": true,
+  "MD004": { "style": "dash" },
+  "MD013": false,
+  "MD024": false,
+  "MD025": false,
+  "MD026": false,
+  "MD031": false,
+  "MD033": false,
+  "MD034": false,
+  "MD037": false,
+  "MD038": false,
+  "MD041": false,
+  "MD046": false,
+  "line-length": false,
+  "no-inline-html": false
+}

package.json

@@ -70,7 +70,8 @@
     "js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.js",
     "js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
     "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint lint-mdx",
+    "lint-mdx": "markdownlint \"site/src/content/**/*.mdx\"",
     "docs": "npm-run-all docs-build docs-lint",
     "docs-compile": "npm run docs-build",
     "docs-vnu": "node build/vnu-jar.mjs",
@@ -152,6 +153,7 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.7",
     "lockfile-lint": "^4.14.0",
+    "markdownlint-cli": "^0.44.0",
     "mime": "^3.0.0",
     "nodemon": "^3.1.9",
     "npm-run-all2": "^7.0.2",

site/src/content/docs/components/breadcrumb.mdx

@@ -72,7 +72,6 @@ You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty st
   </ol>
 </nav>`} />
 
-
 ```scss
 $breadcrumb-divider: none;
 ```

site/src/content/docs/components/popovers.mdx

@@ -221,7 +221,6 @@ const popover = new bootstrap.Popover(element, {
 | `update` | Updates the position of an element's popover. |
 </BsTable>
 
-
 ```js
 // getOrCreateInstance example
 const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
@@ -231,7 +230,6 @@ myPopover.setContent({
   '.popover-header': 'another title',
   '.popover-body': 'another content'
 })
-
 ```
 
 <Callout>

site/src/content/docs/components/spinners.mdx

@@ -167,7 +167,6 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne
 
 <ScssDocs name="spinner-grow-keyframes" file="scss/_spinners.scss" />
 
-
 [color]:   [[docsref:/utilities/colors]]
 [flex]:    [[docsref:/utilities/flex]]
 [float]:   [[docsref:/utilities/float]]

site/src/content/docs/components/tooltips.mdx

@@ -51,7 +51,6 @@ You can customize the appearance of tooltips using [CSS variables](#variables).
 
 <ScssDocs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" />
 
-
 <Example addStackblitzJs class="tooltip-demo" code={`<button type="button" class="btn btn-secondary"
         data-bs-toggle="tooltip" data-bs-placement="top"
         data-bs-custom-class="custom-tooltip"
@@ -138,6 +137,7 @@ const tooltip = new bootstrap.Tooltip('#example', {
   boundary: document.body // or document.querySelector('#boundary')
 })
 ```
+
 </Callout>
 
 ### Markup
@@ -179,7 +179,6 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
 Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
 </Callout>
 
-
 <BsTable>
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |

site/src/content/docs/content/images.mdx

@@ -23,14 +23,12 @@ Align images with the [helper float classes]([[docsref:/utilities/float]]) or [t
 <Example code={`<Placeholder width="200" height="200" class="rounded float-start" />
 <Placeholder width="200" height="200" class="rounded float-end" />`} />
 
-
 <Example code={`<Placeholder width="200" height="200" class="rounded mx-auto d-block" />`} />
 
 <Example code={`<div class="text-center">
   <Placeholder width="200" height="200" class="rounded" />
 </div>`} />
 
-
 ## Picture
 
 If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.

site/src/content/docs/content/reboot.mdx

@@ -109,7 +109,6 @@ As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, a
 
 <Example code={`<a href="#" style="--bs-link-opacity: .5">This is an example link</a>`} />
 
-
 Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
 
 <Example code={`<a>This is a placeholder link</a>`} />
@@ -132,17 +131,19 @@ The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are
 All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
 
 <div class="bd-example">
-* All lists have their top margin removed
-* And their bottom margin normalized
-* Nested lists have no bottom margin
-  * This way they have a more even appearance
-  * Particularly when followed by more list items
-* The left padding has also been reset
+
+- All lists have their top margin removed
+- And their bottom margin normalized
+- Nested lists have no bottom margin
+  - This way they have a more even appearance
+  - Particularly when followed by more list items
+- The left padding has also been reset
 
 1. Here's an ordered list
 2. With a few list items
 3. It has the same overall look
 4. As the previous unordered list
+
 </div>
 
 For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.

site/src/content/docs/customize/optimize.mdx

@@ -10,7 +10,6 @@ When using Sass in your asset pipeline, make sure you optimize Bootstrap by only
 
 <ScssDocs 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.
 
 ## Lean JavaScript

site/src/content/docs/forms/validation.mdx

@@ -357,7 +357,7 @@ These variables are also color mode adaptive, meaning they change color while in
 
 ### Sass mixins
 
-Two mixins are combined, through our [loop](#loop), to generate our form validation feedback styles.
+Two mixins are combined, through our [loop](#sass-loop), to generate our form validation feedback styles.
 
 <ScssDocs name="form-validation-mixins" file="scss/mixins/_forms.scss" />
 

site/src/content/docs/getting-started/vite.mdx

@@ -146,7 +146,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
 
    *You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.*
 
-3. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
+2. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
 
    {/* TODO: <!-- eslint-skip --> */}
    ```js
@@ -169,7 +169,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
 
    *[Read our JavaScript docs]([[docsref:/getting-started/javascript/]]) for more information on how to use Bootstrap's plugins.*
 
-4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
 
    <img class="img-fluid" src="/docs/[[config:docs_version]]/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap" />
 

site/src/content/docs/layout/old-grid.mdx

@@ -42,7 +42,7 @@ Breaking it down, here's how the grid system comes together:
 
 - **Gutters are also responsive and customizable.** [Gutter classes are available]([[docsref:/layout/gutters]]) across all breakpoints, with all the same sizes as our [margin and padding spacing]([[docsref:/utilities/spacing]]). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
 
-- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
+- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#css) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
 
 Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
 

site/src/content/docs/utilities/flex.mdx

@@ -405,7 +405,6 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
 </div>
 ```
 
-
 Responsive variations also exist for `flex-wrap`.
 
 <ul>