Clean up some Astro and Docs stuff

eslint.config.js

@@ -288,7 +288,6 @@ const eslintConfig = [
       'site/src/assets/application.js',
       'site/src/assets/partials/*.js',
       'site/src/assets/search.js',
-      'site/src/assets/snippets.js',
       'site/src/assets/stackblitz.js',
       'site/src/plugins/*.js'
     ],

site/.prettierrc.json

@@ -1,6 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/prettierrc",
   "arrowParens": "always",
+  "plugins": ["prettier-plugin-astro"],
   "printWidth": 120,
   "semi": false,
   "singleQuote": true,

site/astro.config.ts

@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'node:url'
+
 import { defineConfig } from 'astro/config'
 import astroBrokenLinksChecker from 'astro-broken-links-checker'
 import bootstrapLight from 'bootstrap-vscode-theme/themes/bootstrap-light.json'
@@ -9,6 +11,11 @@ import { getConfig } from './src/libs/config'
 import { algoliaPlugin } from './src/plugins/algolia-plugin'
 import { stackblitzPlugin } from './src/plugins/stackblitz-plugin'
 
+// Resolve `@bootstrap` to the same on-disk Bootstrap bundle the docs ship, so
+// every docs script imports from a single module instance (no duplicated
+// component registries). Mirrors the `@bootstrap` alias in `tsconfig.json`.
+const bootstrapBundlePath = fileURLToPath(new URL('../dist/js/bootstrap.bundle.js', import.meta.url))
+
 const isDev = process.env.NODE_ENV === 'development'
 
 const site = isDev
@@ -62,6 +69,11 @@ export default defineConfig({
   },
   site,
   vite: {
-    plugins: [algoliaPlugin(), stackblitzPlugin()]
+    plugins: [algoliaPlugin(), stackblitzPlugin()],
+    resolve: {
+      alias: {
+        '@bootstrap': bootstrapBundlePath
+      }
+    }
   }
 })

site/src/assets/application.js

@@ -1,6 +1,4 @@
-// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
-// IT'S ALL JUST JUNK FOR OUR DOCS!
-// ++++++++++++++++++++++++++++++++++++++++++
+// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse.
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)

site/src/assets/partials/sidebar.js

@@ -1,6 +1,4 @@
-// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
-// IT'S ALL JUST JUNK FOR OUR DOCS!
-// ++++++++++++++++++++++++++++++++++++++++++
+// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse.
 
 /*
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)

site/src/assets/partials/snippets.js

@@ -1,8 +1,5 @@
-// NOTICE!!! Initially embedded in our docs this JavaScript
-// file contains elements that can help you create reproducible
-// use cases in StackBlitz for instance.
-// In a real project please adapt this content to your needs.
-// ++++++++++++++++++++++++++++++++++++++++++
+// NOTICE: Embedded as-is into StackBlitz playgrounds via `?raw` import.
+// Adapt to your needs in real projects.
 
 /*
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
@@ -16,7 +13,7 @@ import {
   Popover,
   Toast,
   Carousel
-} from '../../../../dist/js/bootstrap.bundle.js'
+} from '@bootstrap'
 
 export default () => {
   // --------

site/src/assets/partials/sticky.js

@@ -1,6 +1,4 @@
-// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
-// IT'S ALL JUST JUNK FOR OUR DOCS!
-// ++++++++++++++++++++++++++++++++++++++++++
+// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse.
 
 /*
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)

site/src/assets/partials/toc.js

@@ -1,6 +1,4 @@
-// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
-// IT'S ALL JUST JUNK FOR OUR DOCS!
-// ++++++++++++++++++++++++++++++++++++++++++
+// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse.
 
 /*
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
@@ -9,7 +7,7 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-import { Drawer } from '../../../../dist/js/bootstrap.bundle.js'
+import { Drawer } from '@bootstrap'
 
 export default () => {
   const tocSidebar = document.querySelector('#bdTocSidebar')

site/src/assets/search.js

@@ -1,6 +1,4 @@
-// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
-// IT'S ALL JUST JUNK FOR OUR DOCS!
-// ++++++++++++++++++++++++++++++++++++++++++
+// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse.
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)

site/src/assets/stackblitz.js

@@ -1,8 +1,5 @@
-// NOTICE!!! Initially embedded in our docs this JavaScript
-// file contains elements that can help you create reproducible
-// use cases in StackBlitz for instance.
-// In a real project please adapt this content to your needs.
-// ++++++++++++++++++++++++++++++++++++++++++
+// NOTICE: Drives the "Open in StackBlitz" button on docs examples; bundles
+// `partials/snippets.js` as raw text into the generated playground.
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)

site/src/components/Ads.astro

@@ -1,9 +1,9 @@
 ---
+
 ---
 
 <script
   is:inline
   async
   src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom&format=responsive"
-  id="_carbonads_js"
-></script>
+  id="_carbonads_js"></script>

site/src/components/DocsScripts.astro

@@ -1,4 +1,7 @@
 ---
+// Loaded only on docs pages from `Scripts.astro`. Astro extracts/bundles
+// `<script>` tags per component, so this stays in its own file to keep the
+// StackBlitz SDK import out of non-docs entry chunks.
 ---
 
 <script>

site/src/components/DocsSidebar.astro

@@ -1,5 +1,5 @@
 ---
-import { getData } from '@libs/data'
+import { getData, type SidebarItem, type SidebarSubItem } from '@libs/data'
 import { getConfig } from '@libs/config'
 import { docsPages, getDocsPageSlug } from '@libs/content'
 import { getSlug } from '@libs/utils'
@@ -20,7 +20,10 @@ const sidebar = getData('sidebar')
               {group.icon && (
                 <svg
                   class="bi me-2"
-                  style={group.icon_color && `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-400));`}
+                  style={
+                    group.icon_color &&
+                    `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-400));`
+                  }
                   aria-hidden="true"
                 >
                   <use href={`#${group.icon}`} />
@@ -29,15 +32,13 @@ const sidebar = getData('sidebar')
               {group.title}
             </strong>
             <ul class="nav flex-column bd-links-nav">
-              {group.pages?.map((item: any) => {
+              {group.pages?.map((item: SidebarItem) => {
                 // Handle sub-groups
                 if (item.group && item.pages) {
                   return (
                     <>
-                      <li class="bd-links-subgroup fw-semibold mt-3">
-                        {item.group}
-                      </li>
-                      {item.pages.map((page: any) => {
+                      <li class="bd-links-subgroup fw-semibold mt-3">{item.group}</li>
+                      {item.pages.map((page: SidebarSubItem) => {
                         const docSlug = getSlug(page.title)
                         const unversionedPageSlug = `${groupSlug}/${docSlug}`
 
@@ -53,7 +54,7 @@ const sidebar = getData('sidebar')
                           )
                         }
 
-                        const addedMeta = page.meta?.find((m: any) => m.added)
+                        const addedMeta = page.meta?.find((m) => m.added)
 
                         return (
                           <li>
@@ -73,6 +74,10 @@ const sidebar = getData('sidebar')
                 }
 
                 // Handle regular pages
+                if (!item.title) {
+                  return null
+                }
+
                 const docSlug = getSlug(item.title)
                 const unversionedPageSlug = `${groupSlug}/${docSlug}`
 
@@ -88,7 +93,7 @@ const sidebar = getData('sidebar')
                   )
                 }
 
-                const itemAddedMeta = item.meta?.find((m: any) => m.added)
+                const itemAddedMeta = item.meta?.find((m) => m.added)
 
                 return (
                   <li>

site/src/components/HelperReferenceTable.astro

@@ -1,24 +1,21 @@
 ---
 interface ClassItem {
-  class: string;
-  description: string;
+  class: string
+  description: string
 }
 
 interface Props {
-  classes: ClassItem[];
-  className?: string;
+  classes: ClassItem[]
+  className?: string
 }
 
-const {
-  classes,
-  className = "table reference-table"
-} = Astro.props;
+const { classes, className = 'table reference-table' } = Astro.props
 
 // Format class names with dot prefix if needed
-const tableData = classes.map(item => ({
+const tableData = classes.map((item) => ({
   class: item.class.startsWith('.') ? item.class : `.${item.class}`,
   description: item.description
-}));
+}))
 ---
 
 <div class="table-responsive bd-reference-table">
@@ -30,12 +27,16 @@ const tableData = classes.map(item => ({
       </tr>
     </thead>
     <tbody>
-      {tableData.map((row) => (
-        <tr>
-          <td><code>{row.class}</code></td>
-          <td>{row.description}</td>
-        </tr>
-      ))}
+      {
+        tableData.map((row) => (
+          <tr>
+            <td>
+              <code>{row.class}</code>
+            </td>
+            <td>{row.description}</td>
+          </tr>
+        ))
+      }
     </tbody>
   </table>
 </div>

site/src/components/NewBadge.astro

@@ -6,11 +6,7 @@ interface Props {
 const { version } = Astro.props
 ---
 
-<span
-  class="badge bg-3 ms-auto fg-3 fw-normal me--1"
-  data-bs-toggle="tooltip"
-  data-bs-title={`Added in v${version}`}
->
+<span class="badge bg-3 ms-auto fg-3 fw-normal me--1" data-bs-toggle="tooltip" data-bs-title={`Added in v${version}`}>
   New
   <span class="visually-hidden">{` (Added in v${version})`}</span>
 </span>