From: Mark Otto <markdotto@gmail.com>
Date: Mon, 14 Apr 2025 16:57:38 +0000 (-0700)
Subject: Don't import Bootstrap CSS again
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=13a3d3e744553d500a6bcfd2035a14be1db47343;p=thirdparty%2Fbootstrap.git

Don't import Bootstrap CSS again
---

diff --git a/package-lock.json b/package-lock.json
index d92c72543c..cebfbad939 100644
--- a/package-lock.json
+++ b/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"
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index efb0ccd883..e355fe42eb 100644
--- a/scss/_utilities.scss
+++ b/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,
diff --git a/site/src/components/head/Stylesheet.astro b/site/src/components/head/Stylesheet.astro
index 0a64de1f06..787d182444 100644
--- a/site/src/components/head/Stylesheet.astro
+++ b/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)} />
diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro
index 34d4b511c1..7bfd41417c 100644
--- a/site/src/components/shortcodes/Example.astro
+++ b/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
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index eed4c5e185..d1b1f66ab5 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -6,389 +6,392 @@
 @use "../../../scss/mixins/border-radius" as *;
 @use "variables" as *;
 
-//
-// Docs examples
-//
 
-.bd-code-snippet {
-  margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid var(--bs-border-color);
-  border-width: 1px 0;
-
-  @include media-breakpoint-up(md) {
-    margin-right: 0;
-    margin-left: 0;
-    border-width: 1px;
-    @include border-radius(var(--bs-border-radius));
+@layer custom {
+  //
+  // Docs examples
+  //
+
+  .bd-code-snippet {
+    margin: 0 ($bd-gutter-x * -.5) 1rem;
+    border: solid var(--bs-border-color);
+    border-width: 1px 0;
+
+    @include media-breakpoint-up(md) {
+      margin-right: 0;
+      margin-left: 0;
+      border-width: 1px;
+      @include border-radius(var(--bs-border-radius));
+    }
   }
-}
 
-.bd-example {
-  --bd-example-padding: 1rem;
+  .bd-example {
+    --bd-example-padding: 1rem;
 
-  position: relative;
-  padding: var(--bd-example-padding);
-  margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid var(--bs-border-color);
-  border-width: 1px 0;
-  @include clearfix();
+    position: relative;
+    padding: var(--bd-example-padding);
+    margin: 0 ($bd-gutter-x * -.5) 1rem;
+    border: solid var(--bs-border-color);
+    border-width: 1px 0;
+    @include clearfix();
 
-  @include media-breakpoint-up(md) {
-    --bd-example-padding: 1.5rem;
+    @include media-breakpoint-up(md) {
+      --bd-example-padding: 1.5rem;
 
-    margin-right: 0;
-    margin-left: 0;
-    border-width: 1px;
-    @include border-radius(var(--bs-border-radius));
-  }
+      margin-right: 0;
+      margin-left: 0;
+      border-width: 1px;
+      @include border-radius(var(--bs-border-radius));
+    }
 
-  + p {
-    margin-top: 2rem;
-  }
+    + p {
+      margin-top: 2rem;
+    }
 
-  > .form-control {
-    + .form-control {
-      margin-top: .5rem;
+    > .form-control {
+      + .form-control {
+        margin-top: .5rem;
+      }
     }
-  }
 
-  > .nav + .nav,
-  > .alert + .alert,
-  > .navbar + .navbar,
-  > .progress + .progress {
-    margin-top: $spacer;
-  }
+    > .nav + .nav,
+    > .alert + .alert,
+    > .navbar + .navbar,
+    > .progress + .progress {
+      margin-top: $spacer;
+    }
 
-  > .dropdown-menu {
-    position: static;
-    display: block;
-  }
+    > .dropdown-menu {
+      position: static;
+      display: block;
+    }
 
-  > :last-child,
-  > nav:last-child .breadcrumb {
-    margin-bottom: 0;
-  }
+    > :last-child,
+    > nav:last-child .breadcrumb {
+      margin-bottom: 0;
+    }
 
-  > hr:last-child {
-    margin-bottom: $spacer;
-  }
+    > hr:last-child {
+      margin-bottom: $spacer;
+    }
 
-  // Images
-  > svg + svg,
-  > img + img {
-    margin-left: .5rem;
-  }
+    // Images
+    > svg + svg,
+    > img + img {
+      margin-left: .5rem;
+    }
 
-  // Buttons
-  > .btn,
-  > .btn-group {
-    margin: .25rem .125rem;
-  }
-  > .btn-toolbar + .btn-toolbar {
-    margin-top: .5rem;
-  }
+    // Buttons
+    > .btn,
+    > .btn-group {
+      margin: .25rem .125rem;
+    }
+    > .btn-toolbar + .btn-toolbar {
+      margin-top: .5rem;
+    }
 
-  // List groups
-  > .list-group {
-    max-width: 400px;
+    // List groups
+    > .list-group {
+      max-width: 400px;
+    }
+
+    > [class*="list-group-horizontal"] {
+      max-width: 100%;
+    }
+
+    // Navbars
+    .fixed-top,
+    .sticky-top {
+      position: static;
+      margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding);
+    }
+
+    .fixed-bottom,
+    .sticky-bottom {
+      position: static;
+      margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1);
+    }
+
+    // Pagination
+    .pagination {
+      margin-bottom: 0;
+    }
   }
 
-  > [class*="list-group-horizontal"] {
-    max-width: 100%;
+  //
+  // Grid examples
+  //
+
+  .bd-example-row [class^="col"],
+  .bd-example-cols [class^="col"] > *,
+  .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);
   }
 
-  // Navbars
-  .fixed-top,
-  .sticky-top {
-    position: static;
-    margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding);
+  .bd-example-row .row + .row,
+  .bd-example-cssgrid .grid + .grid {
+    margin-top: 1rem;
   }
 
-  .fixed-bottom,
-  .sticky-bottom {
-    position: static;
-    margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1);
+  .bd-example-row-flex-cols .row {
+    min-height: 10rem;
+    background-color: rgba(var(--bd-violet-rgb), .15);
   }
 
-  // Pagination
-  .pagination {
-    margin-bottom: 0;
+  .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
+  // .example-container {
+  //   width: 800px;
+  //   @include make-container();
+  // }
+
+  // .example-row {
+  //   @include make-row();
+  // }
+
+  // .example-content-main {
+  //   @include make-col-ready();
+
+  //   @include media-breakpoint-up(sm) {
+  //     @include make-col(6);
+  //   }
+
+  //   @include media-breakpoint-up(lg) {
+  //     @include make-col(8);
+  //   }
+  // }
+
+  // .example-content-secondary {
+  //   @include make-col-ready();
+
+  //   @include media-breakpoint-up(sm) {
+  //     @include make-col(6);
+  //   }
+
+  //   @include media-breakpoint-up(lg) {
+  //     @include make-col(4);
+  //   }
+  // }
+
+  // Ratio helpers
+  .bd-example-ratios {
+    [class*="ratio"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 1rem;
+      color: var(--bs-secondary-color);
+      background-color: var(--bs-tertiary-bg);
+      border: var(--bs-border-width) solid var(--bs-border-color);
+    }
   }
-}
 
-//
-// Grid examples
-//
-
-.bd-example-row [class^="col"],
-.bd-example-cols [class^="col"] > *,
-.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-cssgrid .grid + .grid {
-  margin-top: 1rem;
-}
+  .bd-example-offcanvas {
+    .offcanvas {
+      position: static;
+      display: block;
+      height: 200px;
+      visibility: visible;
+      transform: translate(0);
+    }
+  }
 
-.bd-example-row-flex-cols .row {
-  min-height: 10rem;
-  background-color: rgba(var(--bd-violet-rgb), .15);
-}
+  // Tooltips
+  .tooltip-demo {
+    a {
+      white-space: nowrap;
+    }
 
-.bd-example-flex div:not(.vr) {
-  background-color: rgba(var(--bd-violet-rgb), .15);
-  border: 1px solid rgba(var(--bd-violet-rgb), .3);
-}
+    .btn {
+      margin: .25rem .125rem;
+    }
+  }
 
-// // Grid mixins
-// .example-container {
-//   width: 800px;
-//   @include make-container();
-// }
-
-// .example-row {
-//   @include make-row();
-// }
-
-// .example-content-main {
-//   @include make-col-ready();
-
-//   @include media-breakpoint-up(sm) {
-//     @include make-col(6);
-//   }
-
-//   @include media-breakpoint-up(lg) {
-//     @include make-col(8);
-//   }
-// }
-
-// .example-content-secondary {
-//   @include make-col-ready();
-
-//   @include media-breakpoint-up(sm) {
-//     @include make-col(6);
-//   }
-
-//   @include media-breakpoint-up(lg) {
-//     @include make-col(4);
-//   }
-// }
-
-// Ratio helpers
-.bd-example-ratios {
-  [class*="ratio"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 1rem;
-    color: var(--bs-secondary-color);
-    background-color: var(--bs-tertiary-bg);
-    border: var(--bs-border-width) solid var(--bs-border-color);
+  // scss-docs-start custom-tooltip
+  .custom-tooltip {
+    --bs-tooltip-bg: var(--bd-violet-bg);
+    --bs-tooltip-color: var(--bs-white);
   }
-}
+  // scss-docs-end custom-tooltip
 
+  // scss-docs-start custom-popovers
+  .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
 
-.bd-example-offcanvas {
-  .offcanvas {
-    position: static;
-    display: block;
+  // Scrollspy demo on fixed height div
+  .scrollspy-example {
     height: 200px;
-    visibility: visible;
-    transform: translate(0);
+    margin-top: .5rem;
+    overflow: auto;
   }
-}
 
-// Tooltips
-.tooltip-demo {
-  a {
-    white-space: nowrap;
+  .scrollspy-example-2 {
+    height: 350px;
+    overflow: auto;
   }
 
-  .btn {
-    margin: .25rem .125rem;
+  .simple-list-example-scrollspy {
+    .active {
+      background-color: rgba(var(--bd-violet-rgb), .15);
+    }
   }
-}
-
-// scss-docs-start custom-tooltip
-.custom-tooltip {
-  --bs-tooltip-bg: var(--bd-violet-bg);
-  --bs-tooltip-color: var(--bs-white);
-}
-// scss-docs-end custom-tooltip
-
-// scss-docs-start custom-popovers
-.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
-
-// Scrollspy demo on fixed height div
-.scrollspy-example {
-  height: 200px;
-  margin-top: .5rem;
-  overflow: auto;
-}
-
-.scrollspy-example-2 {
-  height: 350px;
-  overflow: auto;
-}
 
-.simple-list-example-scrollspy {
-  .active {
-    background-color: rgba(var(--bd-violet-rgb), .15);
+  .bd-example-border-utils {
+    [class^="border"] {
+      display: inline-block;
+      width: 5rem;
+      height: 5rem;
+      margin: .25rem;
+      background-color: var(--bs-tertiary-bg);
+    }
   }
-}
 
-.bd-example-border-utils {
-  [class^="border"] {
-    display: inline-block;
-    width: 5rem;
-    height: 5rem;
-    margin: .25rem;
-    background-color: var(--bs-tertiary-bg);
+  .bd-example-rounded-utils {
+    [class*="rounded"] {
+      margin: .25rem;
+    }
   }
-}
 
-.bd-example-rounded-utils {
-  [class*="rounded"] {
-    margin: .25rem;
-  }
-}
+  .bd-example-position-utils {
+    position: relative;
+    padding: 2rem;
 
-.bd-example-position-utils {
-  position: relative;
-  padding: 2rem;
+    .position-relative {
+      height: 200px;
+      background-color: var(--bs-tertiary-bg);
+    }
 
-  .position-relative {
-    height: 200px;
-    background-color: var(--bs-tertiary-bg);
+    .position-absolute {
+      width: 2rem;
+      height: 2rem;
+      background-color: var(--bs-body-color);
+      @include border-radius();
+    }
   }
 
-  .position-absolute {
-    width: 2rem;
-    height: 2rem;
-    background-color: var(--bs-body-color);
-    @include border-radius();
+  .bd-example-position-examples {
+    &::after {
+      content: none;
+    }
   }
-}
 
-.bd-example-position-examples {
-  &::after {
-    content: none;
-  }
-}
+  // Placeholders
+  .bd-example-placeholder-cards {
+    &::after {
+      display: none;
+    }
 
-// Placeholders
-.bd-example-placeholder-cards {
-  &::after {
-    display: none;
+    .card {
+      width: 18rem;
+    }
   }
 
-  .card {
-    width: 18rem;
+  // Toasts
+  .bd-example-toasts {
+    min-height: 240px;
   }
-}
 
-// Toasts
-.bd-example-toasts {
-  min-height: 240px;
-}
+  .bd-example-zindex-levels {
+    min-height: 15rem;
 
-.bd-example-zindex-levels {
-  min-height: 15rem;
+    > div {
+      color: var(--bs-body-bg);
+      background-color: var(--bd-violet);
+      border: 1px solid var(--bd-purple);
 
-  > div {
-    color: var(--bs-body-bg);
-    background-color: var(--bd-violet);
-    border: 1px solid var(--bd-purple);
+      > span {
+        position: absolute;
+        right: 5px;
+        bottom: 0;
+      }
+    }
 
-    > span {
-      position: absolute;
-      right: 5px;
-      bottom: 0;
+    > :nth-child(2) {
+      top: 3rem;
+      left: 3rem;
+    }
+    > :nth-child(3) {
+      top: 4.5rem;
+      left: 4.5rem;
+    }
+    > :nth-child(4) {
+      top: 6rem;
+      left: 6rem;
+    }
+    > :nth-child(5) {
+      top: 7.5rem;
+      left: 7.5rem;
     }
   }
 
-  > :nth-child(2) {
-    top: 3rem;
-    left: 3rem;
-  }
-  > :nth-child(3) {
-    top: 4.5rem;
-    left: 4.5rem;
-  }
-  > :nth-child(4) {
-    top: 6rem;
-    left: 6rem;
-  }
-  > :nth-child(5) {
-    top: 7.5rem;
-    left: 7.5rem;
-  }
-}
+  //
+  // Code snippets
+  //
 
-//
-// Code snippets
-//
+  .highlight {
+    position: relative;
+    padding: .75rem ($bd-gutter-x * .5);
+    background-color: var(--bd-pre-bg);
 
-.highlight {
-  position: relative;
-  padding: .75rem ($bd-gutter-x * .5);
-  background-color: var(--bd-pre-bg);
+    @include media-breakpoint-up(md) {
+      padding: .75rem 1.25rem;
+      @include border-radius(calc(var(--bs-border-radius) - 1px));
+    }
 
-  @include media-breakpoint-up(md) {
-    padding: .75rem 1.25rem;
-    @include border-radius(calc(var(--bs-border-radius) - 1px));
-  }
+    @include media-breakpoint-up(lg) {
+      pre {
+        margin-right: 1.875rem;
+      }
+    }
 
-  @include media-breakpoint-up(lg) {
     pre {
-      margin-right: 1.875rem;
+      padding: .25rem 0 .875rem;
+      margin-top: .8125rem;
+      margin-bottom: 0;
+      overflow: overlay;
+      white-space: pre;
+      background-color: transparent;
+      border: 0;
     }
-  }
 
-  pre {
-    padding: .25rem 0 .875rem;
-    margin-top: .8125rem;
-    margin-bottom: 0;
-    overflow: overlay;
-    white-space: pre;
-    background-color: transparent;
-    border: 0;
+    pre code {
+      @include font-size(inherit);
+      color: var(--bs-body-color); // Effectively the base text color
+      word-wrap: normal;
+    }
   }
 
-  pre code {
-    @include font-size(inherit);
-    color: var(--bs-body-color); // Effectively the base text color
-    word-wrap: normal;
+  .bd-example-snippet .highlight pre {
+    margin-right: 0;
   }
-}
-
-.bd-example-snippet .highlight pre {
-  margin-right: 0;
-}
-
-.highlight-toolbar {
-  background-color: var(--bd-pre-bg);
-  border-bottom: 1px solid var(--bs-border-color);
-}
 
-.bd-file-ref {
   .highlight-toolbar {
-    @include border-top-radius(calc(var(--bs-border-radius) + 1px));
+    background-color: var(--bd-pre-bg);
+    border-bottom: 1px solid var(--bs-border-color);
+  }
+
+  .bd-file-ref {
+    .highlight-toolbar {
+      @include border-top-radius(calc(var(--bs-border-radius) + 1px));
+    }
   }
-}
 
-.bd-content .bd-code-snippet {
-  margin-bottom: 1rem;
+  .bd-content .bd-code-snippet {
+    margin-bottom: 1rem;
+  }
 }
diff --git a/site/src/scss/docs.scss b/site/src/scss/docs.scss
index 72ba90217f..acd473fee5 100644
--- a/site/src/scss/docs.scss
+++ b/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";