Add new docsref page, fix docs border-radius issues (#38491)

* Add new docsref page, fix docs border-radius issues

* Remove commented out code

* Update docsref.md

* Fix no-code example, fix mobile styles

* Updates from review

* Fix block margin, remove margin-right from pre on mobile since no clipboard icons, adjust masthead snippet

* Fix errant styles for border-radius on homepage

---------

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

site/assets/js/application.js

@@ -14,9 +14,10 @@
 
   // Scroll the active sidebar link into view
   const sidenav = document.querySelector('.bd-sidebar')
-  if (sidenav) {
-    const sidenavHeight = sidenav.clientHeight
   const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
+
+  if (sidenav && sidenavActiveLink) {
+    const sidenavHeight = sidenav.clientHeight
     const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
     const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
     const viewportTop = sidenavActiveLinkTop

site/assets/scss/_component-examples.scss

@@ -2,12 +2,16 @@
 // Docs examples
 //
 
-.bd-example-snippet {
+.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));
   }
 }
 
@@ -16,7 +20,7 @@
 
   position: relative;
   padding: var(--bd-example-padding);
-  margin: 0 ($bd-gutter-x * -.5);
+  margin: 0 ($bd-gutter-x * -.5) 1rem;
   border: solid var(--bs-border-color);
   border-width: 1px 0;
   @include clearfix();
@@ -27,13 +31,7 @@
     margin-right: 0;
     margin-left: 0;
     border-width: 1px;
-    @include border-top-radius(var(--bs-border-radius));
+    @include border-radius(var(--bs-border-radius));
-  }
-
-  + .bd-code-snippet {
-    @include border-top-radius(0);
-    border: solid var(--bs-border-color);
-    border-width: 0 1px 1px;
   }
 
   + p {
@@ -350,18 +348,22 @@
 .highlight {
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
-  margin-bottom: 1rem;
   background-color: var(--bd-pre-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
-    @include border-radius(var(--bs-border-radius));
+    @include border-radius(calc(var(--bs-border-radius) - 1px));
+  }
+
+  @include media-breakpoint-up(lg) {
+    pre {
+      margin-right: 1.875rem;
+    }
   }
 
   pre {
     padding: .25rem 0 .875rem;
     margin-top: .8125rem;
-    margin-right: 1.875rem;
     margin-bottom: 0;
     overflow: overlay;
     white-space: pre;
@@ -376,32 +378,22 @@
   }
 }
 
-.bd-code-snippet {
-  margin: 0 ($bd-gutter-x * -.5) $spacer;
-
-  .highlight {
-    margin-bottom: 0;
-    @include border-top-radius(0);
-  }
-
-  .bd-example {
-    margin: 0;
-    border: 0;
-  }
-
-  @include media-breakpoint-up(md) {
-    margin-right: 0;
-    margin-left: 0;
-    @include border-radius($border-radius);
-  }
-}
-
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
-}
 
-.bd-scss-docs {
+  + .highlight {
-  .highlight-toolbar {
+    @include border-top-radius(0);
-    @include border-top-radius(calc(var(--bs-border-radius) + 1px));
   }
 }
+
+.bd-file-ref {
+  .highlight-toolbar {
+    @include media-breakpoint-up(md) {
+      @include border-top-radius(calc(var(--bs-border-radius) - 1px));
+    }
+  }
+}
+
+.bd-content .bd-code-snippet {
+  margin-bottom: 1rem;
+}

site/assets/scss/_masthead.scss

@@ -22,6 +22,8 @@
 
   .bd-code-snippet {
     margin: 0;
+    border-color: var(--bs-border-color-translucent);
+    border-width: 1px;
     @include border-radius(.5rem);
   }
 
@@ -32,7 +34,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     background-color: rgba(var(--bs-body-color-rgb), .075);
-    @include border-radius(.5rem);
+    @include border-radius(calc(.5rem - 1px));
 
     @include media-breakpoint-up(lg) {
       padding-right: 4rem;
@@ -41,7 +43,6 @@
     pre {
       padding: 0;
       margin-top: .625rem;
-      margin-right: 1.875rem;
       margin-bottom: .625rem;
       overflow: hidden;
     }
@@ -75,10 +76,6 @@
     @include font-size(1rem);
   }
 
-  .highlight {
-    @include border-radius(.5rem);
-  }
-
   @include media-breakpoint-up(md) {
     .lead {
       @include font-size(1.25rem);

site/content/docs/5.3/docsref.md

@@ -0,0 +1,49 @@
+---
+layout: docs
+title: Docs reference
+description: Examples of Bootstrap's documentation-specific components and styles.
+aliases: "/docsref/"
+toc: true
+robots: noindex,follow
+sitemap_exclude: true
+---
+
+## Buttons
+
+<button class="btn btn-bd-primary">Primary button</button>
+<button class="btn btn-bd-accent">Accent button</button>
+<button class="btn btn-bd-light">Light button</button>
+
+## Callouts
+
+{{< callout >}}
+  Default callout
+{{< /callout >}}
+
+{{< callout warning >}}
+  Warning callout
+{{< /callout >}}
+
+{{< callout danger >}}
+  Danger callout
+{{< /callout >}}
+
+## Code example
+
+```scss
+.test {
+  --color: blue;
+}
+```
+
+<div class="bd-example">
+  The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
+</div>
+
+{{< example >}}
+<div class="test">This is a test.</div>
+{{< /example >}}
+
+{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
+
+{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}

site/layouts/shortcodes/example.html

@@ -21,7 +21,7 @@
 
 <div class="bd-example-snippet bd-code-snippet">
   {{- if eq $show_preview true -}}
-  <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example{{ with $class }} {{ . }}{{ end }}">
+  <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
     {{- $input -}}
   </div>
   {{- end -}}

site/layouts/shortcodes/js-docs.html

@@ -26,12 +26,18 @@
   {{- $match = replace $match $capture_start "" -}}
   {{- $match = replace $match $capture_end "" -}}
 
-  <div class="bd-example-snippet bd-code-snippet">
+  <div class="bd-example-snippet bd-code-snippet bd-file-ref">
-    <div class="bd-clipboard">
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
-      <button type="button" class="btn-clipboard" title="Copy to clipboard">
+      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
+        {{- $file -}}
+      </a>
+      <div class="d-flex ms-auto">
+        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+          <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
         </button>
       </div>
+    </div>
+
     {{- $unindent := 0 -}}
     {{- $found := false -}}
     {{- $first_line:= index (split $match "\n") 0 -}}

site/layouts/shortcodes/scss-docs.html

@@ -39,7 +39,7 @@
     {{- $match = replace $match " !default" "" -}}
   {{- end -}}
 
-  <div class="bd-example-snippet bd-code-snippet bd-scss-docs">
+  <div class="bd-example-snippet bd-code-snippet bd-file-ref">
     <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
       <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}