Merge branch 'twbs:main' into mainHEAD main

author: Bobby <[email protected]> 2024-08-16 20:47:33 -0400
committer: GitHub <[email protected]> 2024-08-16 20:47:33 -0400
commit: 6b28433d9cfde435be8ec2bd6cf91e6324d08865 (patch)
tree: 8343c27b8b95ff5639233e81cf157f92e5688466 /site/layouts/_default
parent: d53094ec16ba385faae2973ddee648698b32ab24 (diff)
parent: 048f56f51460df75e92a2f7b472e1c56baeb68f7 (diff)
download: bootstrap-main.tar.xz
bootstrap-main.zip
7 files changed, 165 insertions, 52 deletions
diff --git a/site/layouts/_default/_markup/render-heading.html b/site/layouts/_default/_markup/render-heading.html
new file mode 100644
index 000000000..d115f85dc
--- /dev/null
+++ b/site/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,7 @@
+{{- $id := .Anchor | safeURL -}}
+{{- $text := .Text | safeHTML -}}
+<h{{ .Level }} id="{{ $id }}">{{ $text }}
+{{- if and (ge .Level .Page.Site.Params.anchors.min) (le .Level .Page.Site.Params.anchors.max) }}{{" " -}}
+<a class="anchor-link" href="#{{ $id }}" aria-label="Link to this section: {{ $text }}"></a>
+{{- end -}}
+</h{{ .Level }}>
diff --git a/site/layouts/_default/_markup/render-image.html b/site/layouts/_default/_markup/render-image.html
new file mode 100644
index 000000000..fd089f7be
--- /dev/null
+++ b/site/layouts/_default/_markup/render-image.html
@@ -0,0 +1,8 @@
+{{- $originalSrc := .Destination | safeURL -}}
+{{- $localImgPath := path.Join "/site/static/docs" site.Params.docs_version $originalSrc -}}
+{{- /* This shouldn't be needed but we have a weird folder structure with version included... */ -}}
+{{- $src := urls.JoinPath "/docs" site.Params.docs_version $originalSrc -}}
+{{- $config := imageConfig $localImgPath -}}
+{{- $classes := "d-block img-fluid" -}}
+
+<img src="{{ $src }}" class="{{ $classes }}" alt="{{ .Text }}" width="{{ $config.Width }}" height="{{ $config.Height }}" loading="lazy">
diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html
index 713ab2864..0714faf3a 100644
--- a/site/layouts/_default/baseof.html
+++ b/site/layouts/_default/baseof.html
@@ -1,10 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="auto">
   <head>
     {{ partial "header" . }}
   </head>
   {{ block "body_override" . }}<body>{{ end }}
     {{ partial "skippy" . }}
+    {{ partial "icons" . }}
 
     {{ partial "docs-navbar" . }}
 
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index dd063c5dc..3f9463bdd 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -1,29 +1,52 @@
+{{ define "body_override" }}<body{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }}
 {{ define "main" }}
-  {{ partial "docs-subnav" . }}
-
-  <div class="container-xxl my-md-4 bd-layout">
+  <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">
-      {{ partial "docs-sidebar" . }}
+      <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
+        <div class="offcanvas-header border-bottom">
+          <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
+        </div>
+
+        <div class="offcanvas-body">
+          {{ partial "docs-sidebar" . }}
+        </div>
+      </div>
     </aside>
 
     <main class="bd-main order-1">
-      <div class="bd-intro ps-lg-4">
+      <div class="bd-intro pt-2 ps-lg-2">
         <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
-          <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
+          <div class="mb-3 mb-md-0 d-flex text-nowrap">
+            {{- /* This is needed because we want to show the badge if show_badge isn't present or is set to false */ -}}
+            {{- if (or (and (.Page.Params.added) (not (isset .Page.Params.added "show_badge"))) (and (.Page.Params.added) (isset .Page.Params.added "show_badge") (not (eq .Page.Params.added.show_badge false)))) -}}
+              <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added.version }}</small>
+            {{- end -}}
+            <a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+              View on GitHub
+            </a>
+          </div>
+          <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
         </div>
         <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
         {{ partial "ads" . }}
       </div>
 
       {{ if (eq .Page.Params.toc true) }}
-        <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
-          <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
-          {{ .TableOfContents }}
+        <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
+          <button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
+            On this page
+            <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
+          </button>
+          <strong class="d-none d-md-block h6 my-2 ms-3">On this page</strong>
+          <hr class="d-none d-md-block my-2 ms-3">
+          <div class="collapse bd-toc-collapse" id="tocContents">
+            {{ .TableOfContents }}
+          </div>
         </div>
       {{ end }}
 
-      <div class="bd-content ps-lg-4">
+      <div class="bd-content ps-lg-2">
         {{ if .Page.Params.sections }}
           <div class="row g-3">
             {{ range .Page.Params.sections }}
@@ -44,6 +67,7 @@
 {{ end }}
 {{ define "footer" }}
   {{ range .Page.Params.extra_js -}}
-    <script{{ with .async }} async{{ end }} src="{{ .src }}"></script>
+    <script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"></script>
   {{- end -}}
+  <div class="position-fixed" aria-hidden="true"><input type="text" tabindex="-1"></div>
 {{ end }}
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index 948c3756f..1c31c5aea 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }}>
+<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }} data-bs-theme="auto">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -14,6 +14,9 @@
     <meta name="robots" content="{{ . }}">
     {{- end }}
 
+    {{- $colorModeJS := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/js/color-modes.js" -}}
+    <script src="{{ $colorModeJS }}"></script>
+
     {{ partial "stylesheet" . }}
     {{ partial "favicons" . }}
 
@@ -31,26 +34,98 @@
           font-size: 3.5rem;
         }
       }
+
+      .b-example-divider {
+        width: 100%;
+        height: 3rem;
+        background-color: rgba(0, 0, 0, .1);
+        border: solid rgba(0, 0, 0, .15);
+        border-width: 1px 0;
+        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+      }
+
+      .b-example-vr {
+        flex-shrink: 0;
+        width: 1.5rem;
+        height: 100vh;
+      }
+
+      .bi {
+        vertical-align: -.125em;
+        fill: currentColor;
+      }
+
+      .nav-scroller {
+        position: relative;
+        z-index: 2;
+        height: 2.75rem;
+        overflow-y: hidden;
+      }
+
+      .nav-scroller .nav {
+        display: flex;
+        flex-wrap: nowrap;
+        padding-bottom: 1rem;
+        margin-top: -1px;
+        overflow-x: auto;
+        text-align: center;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      .btn-bd-primary {
+        --bd-violet-bg: #712cf9;
+        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
+
+        --bs-btn-font-weight: 600;
+        --bs-btn-color: var(--bs-white);
+        --bs-btn-bg: var(--bd-violet-bg);
+        --bs-btn-border-color: var(--bd-violet-bg);
+        --bs-btn-hover-color: var(--bs-white);
+        --bs-btn-hover-bg: #6528e0;
+        --bs-btn-hover-border-color: #6528e0;
+        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+        --bs-btn-active-color: var(--bs-btn-hover-color);
+        --bs-btn-active-bg: #5a23c8;
+        --bs-btn-active-border-color: #5a23c8;
+      }
+
+      .bd-mode-toggle {
+        z-index: 1500;
+      }
+
+      .bd-mode-toggle .bi {
+        width: 1em;
+        height: 1em;
+      }
+
+      .bd-mode-toggle .dropdown-menu .active .bi {
+        display: block !important;
+      }
     </style>
 
-    {{ range .Page.Params.extra_css }}
+    {{ range .Page.Params.extra_css -}}
     {{ "<!-- Custom styles for this template -->" | safeHTML }}
     <link href="{{ . }}" rel="stylesheet">
     {{- end }}
   </head>
   <body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
-    {{ .Content }}
+    {{ partial "examples/icons" . }}
 
-    {{ if ne .Page.Params.include_js false -}}
-      {{- if eq hugo.Environment "production" -}}
-        <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script>
-      {{- else -}}
-        <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
-      {{- end }}
+    <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
+      {{ partial "theme-toggler" . }}
+    </div>
 
-      {{ range .Page.Params.extra_js -}}
-        <script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
-      {{- end -}}
+    {{ .Content }}
+
+    {{- if hugo.IsProduction -}}
+      <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
+    {{- else -}}
+      <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
     {{- end }}
+
+    {{ range .Page.Params.extra_js -}}
+      <script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
+    {{- end -}}
   </body>
 </html>
diff --git a/site/layouts/_default/home.html b/site/layouts/_default/home.html
index 28bcf0c64..878e77474 100644
--- a/site/layouts/_default/home.html
+++ b/site/layouts/_default/home.html
@@ -1,7 +1,15 @@
 {{ define "main" }}
   <main>
     {{ partial "home/masthead" . }}
-    {{ partial "home/masthead-followup" . }}
+    <div class="container-xxl bd-gutter masthead-followup">
+      {{ partial "home/get-started" . }}
+      {{ partial "home/customize" . }}
+      {{ partial "home/css-variables" . }}
+      {{ partial "home/components-utilities" . }}
+      {{ partial "home/plugins" . }}
+      {{ partial "home/icons" . }}
+      {{ partial "home/themes" . }}
+    </div>
   </main>
 
   {{ .Content }}
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index 8ba99c718..d0d5e6b5d 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -1,16 +1,21 @@
 {{ define "main" }}
   <header class="py-5 border-bottom">
-    <div class="container pt-md-1 pb-md-4">
+  <div class="container-xxl bd-gutter pt-md-1 pb-md-4">
       <div class="row">
         <div class="col-xl-8">
           <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
           <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
-          {{ if eq .Title "Examples" }}
-          <div class="d-flex flex-column flex-sm-row">
-            <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
-            <a href="{{ .Site.Params.download.source }}" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ms-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
+          {{ if eq .Title "Examples" -}}
+          <div class="d-flex flex-column flex-md-row gap-3">
+            <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
+              <svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+              Download examples
+            </a>
+            <a href="{{ .Site.Params.download.source }}" class="btn btn-lg bd-btn-lg btn-outline-secondary">
+              Download source code
+            </a>
           </div>
-          {{ end }}
+          {{- end }}
         </div>
         <div class="col-xl-4 d-lg-flex justify-content-xl-end">
           {{ partial "ads" . }}
@@ -20,28 +25,13 @@
   </header>
 
   <main class="bd-content order-1 py-5" id="content">
-    <div class="container">
+    <div class="container-xxl bd-gutter">
       {{ .Content }}
 
-      {{ if eq .Title "Examples" }}
-        <hr class="my-5">
-        <div class="container">
-          <div class="text-center">
-            <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
-              {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
-            </div>
-              <h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
-            <p class="col-md-10 col-lg-8 mx-auto lead">
-              Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
-            </p>
-            <a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
-          </div>
-          <img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png,
-                                                              /docs/{{ .Site.Params.docs_version }}/assets/img/[email protected] 2x"
-                                                        src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png"
-                                                        alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
-        </div>
-      {{ end }}
+      {{ if eq .Title "Examples" -}}
+        {{ partial "examples/main" . }}
+        {{ partial "examples/bs-themes" . }}
+      {{- end }}
     </div>
   </main>
 {{ end }}
author	Bobby <[email protected]>	2024-08-16 20:47:33 -0400
committer	GitHub <[email protected]>	2024-08-16 20:47:33 -0400
commit	6b28433d9cfde435be8ec2bd6cf91e6324d08865 (patch)
tree	8343c27b8b95ff5639233e81cf157f92e5688466 /site/layouts/_default
parent	d53094ec16ba385faae2973ddee648698b32ab24 (diff)
parent	048f56f51460df75e92a2f7b472e1c56baeb68f7 (diff)
download	bootstrap-main.tar.xz bootstrap-main.zip