Don't import Bootstrap CSS again

package-lock.json

@@ -18,11 +18,6 @@
         }
       ],
       "license": "MIT",
-      "dependencies": {
-        "remark": "^15.0.1",
-        "remark-html": "^16.0.1",
-        "yaml": "^2.7.0"
-      },
       "devDependencies": {
         "@astrojs/check": "^0.9.4",
         "@astrojs/markdown-remark": "^6.3.2",
@@ -19383,6 +19378,7 @@
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
       "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"

scss/_utilities.scss

@@ -146,6 +146,7 @@ $utilities: map.merge(
       )
     ),
     "border-top": (
+      class: border-top,
       property: border-block-start,
       values: (
         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
@@ -162,6 +163,7 @@ $utilities: map.merge(
     ),
     "border-bottom": (
       property: border-block-end,
+      class: border-bottom,
       values: (
         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,

site/src/components/head/Stylesheet.astro

@@ -1,5 +1,5 @@
 ---
-// import { getVersionedBsCssProps } from '@libs/bootstrap'
+import { getVersionedBsCssProps } from '@libs/bootstrap'
 import type { Layout } from '@libs/layout'
 
 interface Props {
@@ -10,5 +10,6 @@ interface Props {
 const { direction } = Astro.props
 ---
 
-<!-- <link {...getVersionedBsCssProps(direction)} /> -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
+
+<link {...getVersionedBsCssProps(direction)} />

site/src/components/shortcodes/Example.astro

@@ -80,7 +80,7 @@ const simplifiedMarkup = markup
     showMarkup && (
       <>
         {showPreview && (
-          <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1" data-bs-theme="dark">
+          <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
             <small class="font-monospace text-body-secondary text-uppercase">{lang}</small>
             <div class="d-flex ms-auto">
               <button

site/src/scss/_component-examples.scss

@@ -6,11 +6,13 @@
 @use "../../../scss/mixins/border-radius" as *;
 @use "variables" as *;
 
-//
-// Docs examples
-//
 
-.bd-code-snippet {
+@layer custom {
+  //
+  // Docs examples
+  //
+
+  .bd-code-snippet {
     margin: 0 ($bd-gutter-x * -.5) 1rem;
     border: solid var(--bs-border-color);
     border-width: 1px 0;
@@ -21,9 +23,9 @@
       border-width: 1px;
       @include border-radius(var(--bs-border-radius));
     }
-}
+  }
 
-.bd-example {
+  .bd-example {
     --bd-example-padding: 1rem;
 
     position: relative;
@@ -114,72 +116,72 @@
     .pagination {
       margin-bottom: 0;
     }
-}
+  }
 
-//
+  //
-// Grid examples
+  // Grid examples
-//
+  //
 
-.bd-example-row [class^="col"],
+  .bd-example-row [class^="col"],
-.bd-example-cols [class^="col"] > *,
+  .bd-example-cols [class^="col"] > *,
-.bd-example-cssgrid [class*="grid"] > * {
+  .bd-example-cssgrid [class*="grid"] > * {
     padding-top: .75rem;
     padding-bottom: .75rem;
     background-color: rgba(var(--bd-violet-rgb), .15);
     border: 1px solid rgba(var(--bd-violet-rgb), .3);
-}
+  }
 
-.bd-example-row .row + .row,
+  .bd-example-row .row + .row,
-.bd-example-cssgrid .grid + .grid {
+  .bd-example-cssgrid .grid + .grid {
     margin-top: 1rem;
-}
+  }
 
-.bd-example-row-flex-cols .row {
+  .bd-example-row-flex-cols .row {
     min-height: 10rem;
     background-color: rgba(var(--bd-violet-rgb), .15);
-}
+  }
 
-.bd-example-flex div:not(.vr) {
+  .bd-example-flex div:not(.vr) {
     background-color: rgba(var(--bd-violet-rgb), .15);
     border: 1px solid rgba(var(--bd-violet-rgb), .3);
-}
+  }
 
-// // Grid mixins
+  // // Grid mixins
-// .example-container {
+  // .example-container {
-//   width: 800px;
+  //   width: 800px;
-//   @include make-container();
+  //   @include make-container();
-// }
+  // }
 
-// .example-row {
+  // .example-row {
-//   @include make-row();
+  //   @include make-row();
-// }
+  // }
 
-// .example-content-main {
+  // .example-content-main {
-//   @include make-col-ready();
+  //   @include make-col-ready();
 
-//   @include media-breakpoint-up(sm) {
+  //   @include media-breakpoint-up(sm) {
-//     @include make-col(6);
+  //     @include make-col(6);
-//   }
+  //   }
 
-//   @include media-breakpoint-up(lg) {
+  //   @include media-breakpoint-up(lg) {
-//     @include make-col(8);
+  //     @include make-col(8);
-//   }
+  //   }
-// }
+  // }
 
-// .example-content-secondary {
+  // .example-content-secondary {
-//   @include make-col-ready();
+  //   @include make-col-ready();
 
-//   @include media-breakpoint-up(sm) {
+  //   @include media-breakpoint-up(sm) {
-//     @include make-col(6);
+  //     @include make-col(6);
-//   }
+  //   }
 
-//   @include media-breakpoint-up(lg) {
+  //   @include media-breakpoint-up(lg) {
-//     @include make-col(4);
+  //     @include make-col(4);
-//   }
+  //   }
-// }
+  // }
 
-// Ratio helpers
+  // Ratio helpers
-.bd-example-ratios {
+  .bd-example-ratios {
     [class*="ratio"] {
       display: flex;
       align-items: center;
@@ -189,10 +191,10 @@
       background-color: var(--bs-tertiary-bg);
       border: var(--bs-border-width) solid var(--bs-border-color);
     }
-}
+  }
 
 
-.bd-example-offcanvas {
+  .bd-example-offcanvas {
     .offcanvas {
       position: static;
       display: block;
@@ -200,10 +202,10 @@
       visibility: visible;
       transform: translate(0);
     }
-}
+  }
 
-// Tooltips
+  // Tooltips
-.tooltip-demo {
+  .tooltip-demo {
     a {
       white-space: nowrap;
     }
@@ -211,45 +213,45 @@
     .btn {
       margin: .25rem .125rem;
     }
-}
+  }
 
-// scss-docs-start custom-tooltip
+  // scss-docs-start custom-tooltip
-.custom-tooltip {
+  .custom-tooltip {
     --bs-tooltip-bg: var(--bd-violet-bg);
     --bs-tooltip-color: var(--bs-white);
-}
+  }
-// scss-docs-end custom-tooltip
+  // scss-docs-end custom-tooltip
 
-// scss-docs-start custom-popovers
+  // scss-docs-start custom-popovers
-.custom-popover {
+  .custom-popover {
     --bs-popover-max-width: 200px;
     --bs-popover-border-color: var(--bd-violet-bg);
     --bs-popover-header-bg: var(--bd-violet-bg);
     --bs-popover-header-color: var(--bs-white);
     --bs-popover-body-padding-x: 1rem;
     --bs-popover-body-padding-y: .5rem;
-}
+  }
-// scss-docs-end custom-popovers
+  // scss-docs-end custom-popovers
 
-// Scrollspy demo on fixed height div
+  // Scrollspy demo on fixed height div
-.scrollspy-example {
+  .scrollspy-example {
     height: 200px;
     margin-top: .5rem;
     overflow: auto;
-}
+  }
 
-.scrollspy-example-2 {
+  .scrollspy-example-2 {
     height: 350px;
     overflow: auto;
-}
+  }
 
-.simple-list-example-scrollspy {
+  .simple-list-example-scrollspy {
     .active {
       background-color: rgba(var(--bd-violet-rgb), .15);
     }
-}
+  }
 
-.bd-example-border-utils {
+  .bd-example-border-utils {
     [class^="border"] {
       display: inline-block;
       width: 5rem;
@@ -257,15 +259,15 @@
       margin: .25rem;
       background-color: var(--bs-tertiary-bg);
     }
-}
+  }
 
-.bd-example-rounded-utils {
+  .bd-example-rounded-utils {
     [class*="rounded"] {
       margin: .25rem;
     }
-}
+  }
 
-.bd-example-position-utils {
+  .bd-example-position-utils {
     position: relative;
     padding: 2rem;
 
@@ -280,16 +282,16 @@
       background-color: var(--bs-body-color);
       @include border-radius();
     }
-}
+  }
 
-.bd-example-position-examples {
+  .bd-example-position-examples {
     &::after {
       content: none;
     }
-}
+  }
 
-// Placeholders
+  // Placeholders
-.bd-example-placeholder-cards {
+  .bd-example-placeholder-cards {
     &::after {
       display: none;
     }
@@ -297,14 +299,14 @@
     .card {
       width: 18rem;
     }
-}
+  }
 
-// Toasts
+  // Toasts
-.bd-example-toasts {
+  .bd-example-toasts {
     min-height: 240px;
-}
+  }
 
-.bd-example-zindex-levels {
+  .bd-example-zindex-levels {
     min-height: 15rem;
 
     > div {
@@ -335,13 +337,13 @@
       top: 7.5rem;
       left: 7.5rem;
     }
-}
+  }
 
-//
+  //
-// Code snippets
+  // Code snippets
-//
+  //
 
-.highlight {
+  .highlight {
     position: relative;
     padding: .75rem ($bd-gutter-x * .5);
     background-color: var(--bd-pre-bg);
@@ -372,23 +374,24 @@
       color: var(--bs-body-color); // Effectively the base text color
       word-wrap: normal;
     }
-}
+  }
 
-.bd-example-snippet .highlight pre {
+  .bd-example-snippet .highlight pre {
     margin-right: 0;
-}
+  }
 
-.highlight-toolbar {
+  .highlight-toolbar {
     background-color: var(--bd-pre-bg);
     border-bottom: 1px solid var(--bs-border-color);
-}
+  }
 
-.bd-file-ref {
+  .bd-file-ref {
     .highlight-toolbar {
       @include border-top-radius(calc(var(--bs-border-radius) + 1px));
     }
-}
+  }
 
-.bd-content .bd-code-snippet {
+  .bd-content .bd-code-snippet {
     margin-bottom: 1rem;
+  }
 }

site/src/scss/docs.scss

@@ -22,28 +22,26 @@
 //
 // Happy Bootstrapping!
 
-@use "../../../scss/bootstrap" as *;
-
 // Load docs components
-@use "variables";
+@use "./variables";
-@use "navbar";
+@use "./navbar";
-@use "masthead";
+@use "./masthead";
-@use "ads";
+@use "./ads";
-@use "content";
+@use "./content";
-@use "skippy";
+@use "./skippy";
-@use "sidebar";
+@use "./sidebar";
-@use "layout";
+@use "./layout";
-@use "toc";
+@use "./toc";
-@use "footer";
+@use "./footer";
-@use "component-examples";
+@use "./component-examples";
-@use "buttons";
+@use "./buttons";
-@use "callouts";
+@use "./callouts";
-@use "brand";
+@use "./brand";
-@use "colors";
+@use "./colors";
-@use "clipboard-js";
+@use "./clipboard-js";
-@use "placeholder-img";
+@use "./placeholder-img";
-@use "scrolling";
+@use "./scrolling";
 
 // Load docs dependencies
-@use "syntax";
+@use "./syntax";
-@use "anchor";
+@use "./anchor";