1 files changed, 17 insertions, 42 deletions
diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md
index c4ba6b0..8efb2fb 100644
--- a/site/content/docs/5.2/getting-started/javascript.md
+++ b/site/content/docs/5.3/getting-started/javascript.md
@@ -19,6 +19,9 @@ While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScri
 A better alternative for those using this type of frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options:
 
 - React: [React Bootstrap](https://react-bootstrap.github.io/)
+  {{< callout >}}
+  **Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx).
+  {{< /callout >}}
 - Vue: [BootstrapVue](https://bootstrap-vue.org/) (currently only supports Vue 2 and Bootstrap 4)
 - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
 
@@ -30,6 +33,7 @@ A better alternative for those using this type of frameworks is to use a framewo
 
 We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in the browser, if your [targeted browsers support it](https://caniuse.com/es6-module).
 
+<!-- eslint-skip -->
 ```html
 <script type="module">
   import { Toast } from 'bootstrap.esm.min.js'
@@ -54,6 +58,7 @@ Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relativ
 
 To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you'll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here's how it works for Bootstrap and Popper:
 
+<!-- eslint-skip -->
 ```html
 <!doctype html>
 <html lang="en">
@@ -65,13 +70,13 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to
   </head>
   <body>
     <h1>Hello, modularity!</h1>
-    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>
+    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>
 
     <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
     <script type="importmap">
     {
       "imports": {
-        "@popperjs/core": "{{< param "cdn.popper" >}}",
+        "@popperjs/core": "{{< param "cdn.popper_esm" >}}",
         "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js"
       }
     }
@@ -125,7 +130,6 @@ All constructors accept an optional options object or nothing (which initiates a
 
 ```js
 const myModalEl = document.querySelector('#myModal')
-
 const modal = new bootstrap.Modal(myModalEl) // initialized with defaults
 
 const configObject = { keyboard: false }
@@ -232,42 +236,7 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep
 
 The default `allowList` value is the following:
 
-```js
-const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
-const DefaultAllowlist = {
-  // Global attributes allowed on any supplied element below.
-  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
-  a: ['target', 'href', 'title', 'rel'],
-  area: [],
-  b: [],
-  br: [],
-  col: [],
-  code: [],
-  div: [],
-  em: [],
-  hr: [],
-  h1: [],
-  h2: [],
-  h3: [],
-  h4: [],
-  h5: [],
-  h6: [],
-  i: [],
-  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
-  li: [],
-  ol: [],
-  p: [],
-  pre: [],
-  s: [],
-  small: [],
-  span: [],
-  sub: [],
-  sup: [],
-  strong: [],
-  u: [],
-  ul: []
-}
-```
+{{< js-docs name="allow-list" file="js/src/util/sanitizer.js" >}}
 
 If you want to add new values to this default `allowList` you can do the following:
 
@@ -302,11 +271,17 @@ const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
 **You don't need jQuery in Bootstrap 5**, but it's still possible to use our components with jQuery. If Bootstrap detects `jQuery` in the `window` object, it'll add all of our components in jQuery's plugin system. This allows you to do the following:
 
 ```js
-$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration
+// to enable tooltips with the default configuration
+$('[data-bs-toggle="tooltip"]').tooltip()
 
-$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration
+// to initialize tooltips with given configuration
+$('[data-bs-toggle="tooltip"]').tooltip({
+  boundary: 'clippingParents',
+  customClass: 'myClass'
+})
 
-$('#myTooltip').tooltip('show') // to trigger `show` method
+// to trigger the `show` method
+$('#myTooltip').tooltip('show')
 ```
 
 The same goes for our other components.