Add the Bootstrap JavaScript components

Author: bep

.gitignore

@@ -1,3 +1,5 @@
 resources/
 public/
-.hugo_build.lock
+.hugo_build.lock
+.vscode/
+exampleSite/assets/jsconfig.json

README.md

@@ -17,6 +17,8 @@ Add the component to your Hugo site's config:
 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
@@ -25,7 +27,6 @@ The Bootstrap SCSS will be mounted in `assets/scss/bootstrap`, so you can then i
 
 Or only what you need:
 
-
 ```scss
 // Configuration
 @import "bootstrap/functions";
@@ -72,6 +73,10 @@ Or only what you need:
 @import "bootstrap/utilities/api";
 ```
 
+### JavaScript
+
+See the [./exampleSite](Example Site).
+
 ## Versions
 
 This repository will be versioned following https://github.com/bep/semverpair
@@ -84,5 +89,3 @@ This repository will be versioned following https://github.com/bep/semverpair
 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.
-
-

config.toml

@@ -5,8 +5,16 @@ extended = true
 # 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]]
 path="github.com/twbs/bootstrap"
 [[module.imports.mounts]]
 source = "scss"
-target = "assets/scss/bootstrap"
+target = "assets/scss/bootstrap"
+[[module.imports.mounts]]
+source = "js"
+target = "assets/js/bootstrap"
+[[module.imports]]
+path="github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2"

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";
+
+(function () {
+  let toastElList = [].slice.call(document.querySelectorAll(".toast"));
+  let toastList = toastElList.map(function (toastEl) {
+    return new Toast(toastEl);
+  });
+
+  toastList.forEach(function (toast) {
+    toast.show();
+  });
+
+  var popoverTriggerList = [].slice.call(
+    document.querySelectorAll('[data-bs-toggle="popover"]')
+  );
+  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+    return new Popover(popoverTriggerEl);
+  });
+})();

exampleSite/go.mod

@@ -3,7 +3,6 @@ module github.com/gohugoio/hugo-mod-bootstrap-scss/exampleSite/v5
 go 1.17
 
 require (
-	github.com/bep/empty-hugo-module v1.0.0 // indirect
 	github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.90100.90300 // indirect
 )
 

exampleSite/go.sum

@@ -1,8 +1,4 @@
-github.com/bep/empty-hugo-module v1.0.0 h1:aYc9RWea644CdYjg9zCy8nkVF4KjC3fwhUTvvcXXg8s=
-github.com/bep/empty-hugo-module v1.0.0/go.mod h1:whohinbSjMoFi/Skivj9kvdPs1tEgzYpZ4rXoQk/0/I=
-github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v4.0.0-20220111121503-d09c70837b61 h1:rclBs01LjSeTPeN8/I4VASzgL/14HBnbMio6UQvGlSk=
-github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v4.0.0-20220111121503-d09c70837b61/go.mod h1:QOfRknwQ8SbtzgHn+dkR+lnLbVSCG8U/1iqpDxk64QU=
-github.com/twbs/bootstrap v4.6.1+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
-github.com/twbs/bootstrap v5.0.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
+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=

exampleSite/layouts/index.html

@@ -12,6 +12,8 @@
       font-size: 12px;
     }
   </style>
+   
+  {{/* Load Bootstrap SCSS. */}}
   {{ $options := dict "enableSourceMap" true }}
   {{ if hugo.IsProduction}}
   {{ $options := dict "enableSourceMap" false "outputStyle" "compressed" }}
@@ -22,8 +24,14 @@
   {{ $styles = $styles | fingerprint }}
   {{ end }}
   <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
-</head>
 
+   {{/* 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 }}    <script src="{{ $js.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }} defer></script>
+</head>
 <body>
   <div class="container mt-5">
     <h1>Bootstrap v5 Hugo Module</h1>
@@ -58,7 +66,19 @@ <h2 class="mt-4">Dependencies</h2>
         {{ 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>
   </div>
 </body>
-
 </html>

go.mod

@@ -2,4 +2,7 @@ module github.com/gohugoio/hugo-mod-bootstrap-scss/v5
 
 go 1.16
 
-require github.com/twbs/bootstrap v5.1.3+incompatible // indirect
+require (
+	github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 // indirect
+	github.com/twbs/bootstrap v5.1.3+incompatible // indirect
+)

go.sum

@@ -1,3 +1,5 @@
+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 v4.4.1+incompatible h1:AueNOcQyhFaWJDynY+tJaK1QR+9Dx2CpqW+EoTBUznk=
 github.com/twbs/bootstrap v4.4.1+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
 github.com/twbs/bootstrap v4.5.2+incompatible h1:QR6UOtm1+LCDK53CzEp8U0NPIYeRUktVgNhq0gaAGP0=