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,6 +6,8 @@
 @use "../../../scss/mixins/border-radius" as *;
 @use "variables" as *;
 
+
+@layer custom {
   //
   // Docs examples
   //
@@ -392,3 +394,4 @@
   .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 "navbar";
-@use "masthead";
-@use "ads";
-@use "content";
-@use "skippy";
-@use "sidebar";
-@use "layout";
-@use "toc";
-@use "footer";
-@use "component-examples";
-@use "buttons";
-@use "callouts";
-@use "brand";
-@use "colors";
-@use "clipboard-js";
-@use "placeholder-img";
-@use "scrolling";
+@use "./variables";
+@use "./navbar";
+@use "./masthead";
+@use "./ads";
+@use "./content";
+@use "./skippy";
+@use "./sidebar";
+@use "./layout";
+@use "./toc";
+@use "./footer";
+@use "./component-examples";
+@use "./buttons";
+@use "./callouts";
+@use "./brand";
+@use "./colors";
+@use "./clipboard-js";
+@use "./placeholder-img";
+@use "./scrolling";
 
 // Load docs dependencies
-@use "syntax";
-@use "anchor";
+@use "./syntax";
+@use "./anchor";