Add supporting themes required for Lotusdocs

2026-01-11 16:48:19 -08:00
parent 8a4d04db58
commit f8d40c4e41
1289 changed files with 234948 additions and 0 deletions
--- a/themes/hugo-mod-bootstrap-scss/LICENSE
+++ b/themes/hugo-mod-bootstrap-scss/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 GoHugo.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/themes/hugo-mod-bootstrap-scss/README.md
+++ b/themes/hugo-mod-bootstrap-scss/README.md
@@ -0,0 +1,91 @@
+[![Netlify Status](https://api.netlify.com/api/v1/badges/1afd337b-0273-4c6e-aa6f-e08bdde9833b/deploy-status)](https://app.netlify.com/sites/hugo-mod-bootstrap-scss/deploys)
+&nbsp;&nbsp;[Test Site](https://hugo-mod-bootstrap-scss.netlify.app/)
+
+This is a [Hugo module](https://gohugo.io/hugo-modules/) that packages the [Bootstrap v5](https://getbootstrap.com/) SCSS and JavaScript source ready to be used in Hugo.
+
+For Bootstrap v4, see [the v4 branch](https://github.com/gohugoio/hugo-mod-bootstrap-scss/tree/v4).
+
+You need the Hugo extended version and [Go](https://golang.org/dl/) to use this component.
+
+## Use
+
+Add the component to your Hugo site's config:
+
+```toml
+[module]
+[[module.imports]]
+path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
+```
+
+### SCSS
+
+The Bootstrap SCSS will be mounted in `assets/scss/bootstrap`, so you can then import either all:
+
+```scss
+@import "bootstrap/bootstrap";
+```
+
+Or only what you need:
+
+```scss
+// Configuration
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+@import "bootstrap/utilities";
+
+// Layout & components
+@import "bootstrap/root";
+@import "bootstrap/reboot";
+@import "bootstrap/type";
+@import "bootstrap/images";
+@import "bootstrap/containers";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+@import "bootstrap/transitions";
+@import "bootstrap/dropdown";
+@import "bootstrap/button-group";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
+@import "bootstrap/card";
+@import "bootstrap/accordion";
+@import "bootstrap/breadcrumb";
+@import "bootstrap/pagination";
+@import "bootstrap/badge";
+@import "bootstrap/alert";
+@import "bootstrap/progress";
+@import "bootstrap/list-group";
+@import "bootstrap/close";
+@import "bootstrap/toasts";
+@import "bootstrap/modal";
+@import "bootstrap/tooltip";
+@import "bootstrap/popover";
+@import "bootstrap/carousel";
+@import "bootstrap/spinners";
+@import "bootstrap/offcanvas";
+
+// Helpers
+@import "bootstrap/helpers";
+
+// Utilities
+@import "bootstrap/utilities/api";
+```
+
+### JavaScript
+
+See the [Example Site](./exampleSite).
+
+## Versions
+
+This repository will be versioned following https://github.com/bep/semverpair
+
+## How to Upgrade Bootstrap
+
+1. Checkout the relevant branch (`main`=latest=Bootstrap 5, `v4`=Bootstrap 4)
+1. Create a PR branch
+1. Run `hugo mod get -u github.com/twbs/bootstrap`
+1. Verify that `go.mod` is updated with correct version (run `hugo mod graph`).
+1. Do `cd exampleSite` and run `hugo server` and make sure it works (and that `github.com/twbs/bootstrap` version is as expected in the table).
+1. Create a Pull Request and verify that it builds and that the Netlify preview works.
--- a/themes/hugo-mod-bootstrap-scss/assets/scss/bootstrap/_vendor/_rfs.scss
+++ b/themes/hugo-mod-bootstrap-scss/assets/scss/bootstrap/_vendor/_rfs.scss
@@ -0,0 +1,348 @@
+// stylelint-disable scss/dimension-no-non-numeric-values
+
+// SCSS RFS mixin
+//
+// Automated responsive values for font sizes, paddings, margins and much more
+//
+// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
+
+// Configuration
+
+// Base value
+$rfs-base-value: 1.25rem !default;
+$rfs-unit: rem !default;
+
+@if $rfs-unit != rem and $rfs-unit != px {
+  @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
+}
+
+// Breakpoint at where values start decreasing if screen width is smaller
+$rfs-breakpoint: 1200px !default;
+$rfs-breakpoint-unit: px !default;
+
+@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
+  @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+}
+
+// Resize values based on screen height and width
+$rfs-two-dimensional: false !default;
+
+// Factor of decrease
+$rfs-factor: 10 !default;
+
+@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
+  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
+}
+
+// Mode. Possibilities: "min-media-query", "max-media-query"
+$rfs-mode: min-media-query !default;
+
+// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
+$rfs-class: false !default;
+
+// 1 rem = $rfs-rem-value px
+$rfs-rem-value: 16 !default;
+
+// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
+$rfs-safari-iframe-resize-bug-fix: false !default;
+
+// Disable RFS by setting $enable-rfs to false
+$enable-rfs: true !default;
+
+// Cache $rfs-base-value unit
+$rfs-base-value-unit: unit($rfs-base-value);
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: unit($dividend);
+  $divisor-unit: unit($divisor);
+  $unit-map: (
+    "px": 1px,
+    "rem": 1rem,
+    "em": 1em,
+    "%": 1%
+  );
+  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+    $result: $result * map-get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}
+
+// Remove px-unit from $rfs-base-value for calculations
+@if $rfs-base-value-unit == px {
+  $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
+}
+@else if $rfs-base-value-unit == rem {
+  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
+}
+
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+
+// Remove unit from $rfs-breakpoint for calculations
+@if $rfs-breakpoint-unit-cache == px {
+  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
+}
+@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
+  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
+}
+
+// Calculate the media query value
+$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
+$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
+$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
+
+// Internal mixin used to determine which media query needs to be used
+@mixin _rfs-media-query {
+  @if $rfs-two-dimensional {
+    @if $rfs-mode == max-media-query {
+      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
+        @content;
+      }
+    }
+    @else {
+      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
+        @content;
+      }
+    }
+  }
+  @else {
+    @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
+      @content;
+    }
+  }
+}
+
+// Internal mixin that adds disable classes to the selector if needed.
+@mixin _rfs-rule {
+  @if $rfs-class == disable and $rfs-mode == max-media-query {
+    // Adding an extra class increases specificity, which prevents the media query to override the property
+    &,
+    .disable-rfs &,
+    &.disable-rfs {
+      @content;
+    }
+  }
+  @else if $rfs-class == enable and $rfs-mode == min-media-query {
+    .enable-rfs &,
+    &.enable-rfs {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Internal mixin that adds enable classes to the selector if needed.
+@mixin _rfs-media-query-rule {
+
+  @if $rfs-class == enable {
+    @if $rfs-mode == min-media-query {
+      @content;
+    }
+
+    @include _rfs-media-query () {
+      .enable-rfs &,
+      &.enable-rfs {
+        @content;
+      }
+    }
+  }
+  @else {
+    @if $rfs-class == disable and $rfs-mode == min-media-query {
+      .disable-rfs &,
+      &.disable-rfs {
+        @content;
+      }
+    }
+    @include _rfs-media-query () {
+      @content;
+    }
+  }
+}
+
+// Helper function to get the formatted non-responsive value
+@function rfs-value($values) {
+  // Convert to list
+  $values: if(type-of($values) != list, ($values,), $values);
+
+  $val: "";
+
+  // Loop over each value and calculate value
+  @each $value in $values {
+    @if $value == 0 {
+      $val: $val + " 0";
+    }
+    @else {
+      // Cache $value unit
+      $unit: if(type-of($value) == "number", unit($value), false);
+
+      @if $unit == px {
+        // Convert to rem if needed
+        $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
+      }
+      @else if $unit == rem {
+        // Convert to px if needed
+        $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
+      } @else {
+        // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+        $val: $val + " " + $value;
+      }
+    }
+  }
+
+  // Remove first space
+  @return unquote(str-slice($val, 2));
+}
+
+// Helper function to get the responsive value calculated by RFS
+@function rfs-fluid-value($values) {
+  // Convert to list
+  $values: if(type-of($values) != list, ($values,), $values);
+
+  $val: "";
+
+  // Loop over each value and calculate value
+  @each $value in $values {
+    @if $value == 0 {
+      $val: $val + " 0";
+    } @else {
+      // Cache $value unit
+      $unit: if(type-of($value) == "number", unit($value), false);
+
+      // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+      @if not $unit or $unit != px and $unit != rem {
+        $val: $val + " " + $value;
+      } @else {
+        // Remove unit from $value for calculations
+        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
+
+        // Only add the media query if the value is greater than the minimum value
+        @if abs($value) <= $rfs-base-value or not $enable-rfs {
+          $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
+        }
+        @else {
+          // Calculate the minimum value
+          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
+
+          // Calculate difference between $value and the minimum value
+          $value-diff: abs($value) - $value-min;
+
+          // Base value formatting
+          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
+
+          // Use negative value if needed
+          $min-width: if($value < 0, -$min-width, $min-width);
+
+          // Use `vmin` if two-dimensional is enabled
+          $variable-unit: if($rfs-two-dimensional, vmin, vw);
+
+          // Calculate the variable width between 0 and $rfs-breakpoint
+          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
+
+          // Return the calculated value
+          $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
+        }
+      }
+    }
+  }
+
+  // Remove first space
+  @return unquote(str-slice($val, 2));
+}
+
+// RFS mixin
+@mixin rfs($values, $property: font-size) {
+  @if $values != null {
+    $val: rfs-value($values);
+    $fluid-val: rfs-fluid-value($values);
+
+    // Do not print the media query if responsive & non-responsive values are the same
+    @if $val == $fluid-val {
+      #{$property}: $val;
+    }
+    @else {
+      @include _rfs-rule () {
+        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
+
+        // Include safari iframe resize fix if needed
+        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
+      }
+
+      @include _rfs-media-query-rule () {
+        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
+      }
+    }
+  }
+}
+
+// Shorthand helper mixins
+@mixin font-size($value) {
+  @include rfs($value);
+}
+
+@mixin padding($value) {
+  @include rfs($value, padding);
+}
+
+@mixin padding-top($value) {
+  @include rfs($value, padding-top);
+}
+
+@mixin padding-right($value) {
+  @include rfs($value, padding-right);
+}
+
+@mixin padding-bottom($value) {
+  @include rfs($value, padding-bottom);
+}
+
+@mixin padding-left($value) {
+  @include rfs($value, padding-left);
+}
+
+@mixin margin($value) {
+  @include rfs($value, margin);
+}
+
+@mixin margin-top($value) {
+  @include rfs($value, margin-top);
+}
+
+@mixin margin-right($value) {
+  @include rfs($value, margin-right);
+}
+
+@mixin margin-bottom($value) {
+  @include rfs($value, margin-bottom);
+}
+
+@mixin margin-left($value) {
+  @include rfs($value, margin-left);
+}
--- a/themes/hugo-mod-bootstrap-scss/config.toml
+++ b/themes/hugo-mod-bootstrap-scss/config.toml
@@ -0,0 +1,21 @@
+[module]
+[module.hugoVersion]
+extended = true
+[[module.mounts]]
+# Workaround for https://github.com/gohugoio/hugo/issues/6945
+source = "assets/scss/bootstrap/_vendor"
+target = "assets/scss/bootstrap/vendor"
+[[module.mounts]]
+source = "assets"
+target = "assets"
+[[module.imports]]
+ignoreConfig = true
+path = "github.com/twbs/bootstrap"
+[[module.imports.mounts]]
+source = "scss"
+target = "assets/scss/bootstrap"
+[[module.imports.mounts]]
+source = "js"
+target = "assets/js/bootstrap"
+[[module.imports]]
+path = "github.com/gohugoio/hugo-mod-jslibs-dist/popperjs"
--- a/themes/hugo-mod-bootstrap-scss/exampleSite/assets/js/index.js
+++ b/themes/hugo-mod-bootstrap-scss/exampleSite/assets/js/index.js
@@ -0,0 +1,22 @@
+// Import the Bootstrap components we want to use.
+// See https://github.com/twbs/bootstrap/blob/main/js/index.umd.js
+import Toast from 'js/bootstrap/src/toast';
+import Popover from 'js/bootstrap/src/popover';
+import Button from 'js/bootstrap/src/button.js';
+import Carousel from 'js/bootstrap/src/carousel.js';
+
+(function () {
+	let toastElList = [].slice.call(document.querySelectorAll('.toast'));
+	let toastList = toastElList.map(function (toastEl) {
+		return new Toast(toastEl);
+	});
+
+	toastList.forEach(function (toast) {
+		toast.show();
+	});
+
+	let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+	popoverTriggerList.map(function (popoverTriggerEl) {
+		return new Popover(popoverTriggerEl);
+	});
+})();
--- a/themes/hugo-mod-bootstrap-scss/exampleSite/assets/scss/styles.scss
+++ b/themes/hugo-mod-bootstrap-scss/exampleSite/assets/scss/styles.scss
@@ -0,0 +1,5 @@
+@import "bootstrap/bootstrap";
+
+.bd-placeholder-img-lg {
+  @include font-size(5.5rem);
+}
--- a/themes/hugo-mod-bootstrap-scss/exampleSite/config.toml
+++ b/themes/hugo-mod-bootstrap-scss/exampleSite/config.toml
@@ -0,0 +1,14 @@
+
+baseURL = "https://example.com"
+disableKinds = ["page", "section", "taxonomy", "term"]
+
+[outputs]
+home = ["HTML"]
+
+[module]
+[module.hugoVersion]
+# We use hugo.Deps to list dependencies, which was added in Hugo 0.92.0
+min = "0.92.0"
+
+[[module.imports]]
+path="github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
--- a/themes/hugo-mod-bootstrap-scss/exampleSite/go.mod
+++ b/themes/hugo-mod-bootstrap-scss/exampleSite/go.mod
@@ -0,0 +1,9 @@
+module github.com/gohugoio/hugo-mod-bootstrap-scss/exampleSite/v5
+
+go 1.17
+
+require (
+	github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.90100.90300 // indirect
+)
+
+replace github.com/gohugoio/hugo-mod-bootstrap-scss/v5 => ../
--- a/themes/hugo-mod-bootstrap-scss/exampleSite/go.sum
+++ b/themes/hugo-mod-bootstrap-scss/exampleSite/go.sum
@@ -0,0 +1,8 @@
+github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 h1:GZxx4Hc+yb0/t3/rau1j8XlAxLE4CyXns2fqQbyqWfs=
+github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000/go.mod h1:mFberT6ZtcchrsDtfvJM7aAH2bDKLdOnruUHl0hlapI=
+github.com/twbs/bootstrap v5.1.3+incompatible h1:19+1/69025oghttdacCOGvs1wv9D5lZnpfoCvKUsPCs=
+github.com/twbs/bootstrap v5.1.3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
+github.com/twbs/bootstrap v5.2.1+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
+github.com/twbs/bootstrap v5.3.0-alpha1+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
+github.com/twbs/bootstrap v5.3.0-alpha3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
+github.com/twbs/bootstrap v5.3.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
--- a/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/index.html
+++ b/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/index.html
@@ -0,0 +1,165 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>
+      {{ .Title }}
+    </title>
+    {{/* styles */}}
+    <style>
+      html {
+        font-size: 12px;
+      }
+    </style>
+
+    {{/* Load Bootstrap SCSS. */}}
+    {{ $options := dict "enableSourceMap" true }}
+    {{ if hugo.IsProduction }}
+      {{ $options := dict "enableSourceMap" false "outputStyle" "compressed" }}
+    {{ end }}
+    {{ $styles := resources.Get "scss/styles.scss" }}
+    {{ $styles = $styles | css.Sass $options }}
+    {{ if hugo.IsProduction }}
+      {{ $styles = $styles | fingerprint }}
+    {{ end }}
+    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
+
+    {{/* Load Bootstrap JS. */}}
+    {{ $js := resources.Get "js/index.js" }}
+    {{ $params := dict }}
+    {{ $sourceMap := cond hugo.IsProduction "" "inline" }}
+    {{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }}
+    {{ $js = $js | js.Build $opts }}
+    {{ if hugo.IsProduction }}
+      {{ $js = $js | fingerprint }}
+    {{ end }}
+    <script
+      src="{{ $js.RelPermalink }}"
+      {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}
+      defer></script>
+  </head>
+  <body>
+    <div class="container mt-5 mb-5">
+      <h1>Bootstrap v5 Hugo Module</h1>
+      <h2 class="mt-4">Dependencies</h2>
+      <p class="mt-4">
+        <strong>Note:</strong> We have a replacement of
+        github.com/gohugoio/hugo-mod-bootstrap-scss/v4 to point to the directory
+        one level up (we do this to get correct PR previews when we update
+        Bootstrap). The version number reflects the version in
+        <code>go.mod</code>.
+      </p>
+      <table class="table table-striped table-responsive mt-2">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">Owner</th>
+            <th scope="col">Path</th>
+            <th scope="col">Version</th>
+            <th scope="col">Time</th>
+            <th scope="col">Vendor</th>
+          </tr>
+        </thead>
+        <tbody>
+          {{ range $index, $element := hugo.Deps }}
+            <tr>
+              <th scope="row">{{ add $index 1 }}</th>
+              <td>{{ with $element.Owner }}{{ .Path }}{{ end }}</td>
+              <td>
+                {{ $element.Path }}
+                {{ with $element.Replace }}
+                  =>
+                  {{ .Path }}
+                {{ end }}
+              </td>
+              <td>{{ $element.Version }}</td>
+              <td>{{ with $element.Time }}{{ . }}{{ end }}</td>
+              <td>{{ $element.Vendor }}</td>
+            </tr>
+          {{ end }}
+        </tbody>
+      </table>
+      <h2 class="my-4">Toast (JS plugin)</h2>
+      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+          <strong class="me-auto">Bootstrap</strong>
+          <small>11 mins ago</small>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="toast"
+            aria-label="Close"></button>
+        </div>
+        <div class="toast-body">Hello, world! This is a toast message.</div>
+      </div>
+      <h2 class="my-4">Popover (JS plugin)</h2>
+      <button
+        type="button"
+        class="btn btn-lg btn-danger"
+        data-bs-toggle="popover"
+        title="Popover title"
+        data-bs-content="And here's some amazing content. It's very engaging. Right?">
+        Click to toggle popover
+      </button>
+      <h2 class="my-4">Buttons</h2>
+      <div class="d-grid gap-2 d-md-block">
+        <button
+          type="button"
+          class="btn btn-primary"
+          data-bs-toggle="button"
+          autocomplete="off">
+          Toggle button
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary active"
+          data-bs-toggle="button"
+          autocomplete="off"
+          aria-pressed="true">
+          Active toggle button
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          disabled
+          data-bs-toggle="button"
+          autocomplete="off">
+          Disabled toggle button
+        </button>
+      </div>
+      <h2 class="my-4">Carousel</h2>
+      <div
+        id="carouselExampleControls"
+        class="carousel slide"
+        data-bs-ride="carousel">
+        <div class="carousel-inner">
+          <div class="carousel-item active">
+            {{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg  d-block w-100" "color" "#555" "background" "#777" "text" "First slide") }}
+          </div>
+          <div class="carousel-item">
+            {{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg  d-block w-100" "color" "#555" "background" "#777" "text" "Second slide") }}
+          </div>
+          <div class="carousel-item">
+            {{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg  d-block w-100" "color" "#555" "background" "#777" "text" "Third slide") }}
+          </div>
+        </div>
+        <button
+          class="carousel-control-prev"
+          type="button"
+          data-bs-target="#carouselExampleControls"
+          data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button
+          class="carousel-control-next"
+          type="button"
+          data-bs-target="#carouselExampleControls"
+          data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
+    </div>
+  </body>
+</html>
--- a/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/partials/placeholder.html
+++ b/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/partials/placeholder.html
@@ -0,0 +1,31 @@
+{{- $title := .title | default "Placeholder" -}}
+{{- $class := .class -}}
+{{- $default_color  := "#6c757d" -}}
+{{- $default_background := "#6c757d" -}}
+{{- $color := .color  | default $default_color -}}
+{{- $background := .background | default $default_background -}}
+{{- $width := .width | default "100%" -}}
+{{- $height := .height | default "180" -}}
+{{- $text := .text | default (printf "%sx%s" $width $height) -}}
+{{- $show_title := not (eq $title "false") -}}
+{{- $show_text := not (eq $text "false") -}}
+<svg
+  class="{{ with $class }}{{ . }}{{ end }}"
+  width="{{ $width }}"
+  height="{{ $height }}"
+  xmlns="http://www.w3.org/2000/svg"
+  {{ if (or $show_title $show_text) }}
+    role="img"
+    aria-label="{{ if $show_title }}
+      {{ $title }}{{ if $show_text }}:{{ end }}
+    {{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"
+  {{ else }}
+    aria-hidden="true"
+  {{ end }}
+  preserveAspectRatio="xMidYMid slice">
+  {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
+  <rect width="100%" height="100%" fill="{{ $background }}" />
+  {{- if $show_text }}
+    <text x="40%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>
+  {{ end -}}
+</svg>
--- a/themes/hugo-mod-bootstrap-scss/go.mod
+++ b/themes/hugo-mod-bootstrap-scss/go.mod
@@ -0,0 +1,8 @@
+module github.com/gohugoio/hugo-mod-bootstrap-scss/v5
+
+go 1.16
+
+require (
+	github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 // indirect
+	github.com/twbs/bootstrap v5.3.3+incompatible // indirect
+)
--- a/themes/hugo-mod-bootstrap-scss/go.sum
+++ b/themes/hugo-mod-bootstrap-scss/go.sum
@@ -0,0 +1,4 @@
+github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 h1:GZxx4Hc+yb0/t3/rau1j8XlAxLE4CyXns2fqQbyqWfs=
+github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000/go.mod h1:mFberT6ZtcchrsDtfvJM7aAH2bDKLdOnruUHl0hlapI=
+github.com/twbs/bootstrap v5.3.3+incompatible h1:goFoqinzdHfkeegpFP7pvhbd0g+A3O2hbU3XCjuNrEQ=
+github.com/twbs/bootstrap v5.3.3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
--- a/themes/hugo-mod-bootstrap-scss/netlify.toml
+++ b/themes/hugo-mod-bootstrap-scss/netlify.toml
@@ -0,0 +1,12 @@
+[build]
+    publish = "exampleSite/public"
+    command = "hugo --gc -s exampleSite --minify"
+
+    [build.environment]
+        HUGO_VERSION = "0.143.1"
+
+[context.deploy-preview]
+    command = "hugo -s exampleSite --minify -D -F -b $DEPLOY_PRIME_URL"
+
+[context.branch-deploy]
+    command = "hugo -s exampleSite --minify --gc -b $DEPLOY_PRIME_URL"