From 2429533b50cbde3607716b4f79a6b7595f3a7cf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Erik=20Pedersen?= Date: Mon, 21 Oct 2024 21:15:16 +0200 Subject: [PATCH] Add Button and Carousel JS examples Updates #16 --- exampleSite/assets/js/index.js | 30 +-- exampleSite/assets/scss/styles.scss | 4 + exampleSite/layouts/index.html | 239 ++++++++++++------ exampleSite/layouts/partials/placeholder.html | 31 +++ 4 files changed, 208 insertions(+), 96 deletions(-) create mode 100644 exampleSite/layouts/partials/placeholder.html diff --git a/exampleSite/assets/js/index.js b/exampleSite/assets/js/index.js index a2a63a8..8940461 100644 --- a/exampleSite/assets/js/index.js +++ b/exampleSite/assets/js/index.js @@ -1,22 +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 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); - }); + let toastElList = [].slice.call(document.querySelectorAll('.toast')); + let toastList = toastElList.map(function (toastEl) { + return new Toast(toastEl); + }); - toastList.forEach(function (toast) { - toast.show(); - }); + toastList.forEach(function (toast) { + toast.show(); + }); - let popoverTriggerList = [].slice.call( - document.querySelectorAll('[data-bs-toggle="popover"]') - ); - popoverTriggerList.map(function (popoverTriggerEl) { - return new Popover(popoverTriggerEl); - }); + let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); + popoverTriggerList.map(function (popoverTriggerEl) { + return new Popover(popoverTriggerEl); + }); })(); diff --git a/exampleSite/assets/scss/styles.scss b/exampleSite/assets/scss/styles.scss index 91d6725..575f1a8 100644 --- a/exampleSite/assets/scss/styles.scss +++ b/exampleSite/assets/scss/styles.scss @@ -1 +1,5 @@ @import "bootstrap/bootstrap"; + +.bd-placeholder-img-lg { + @include font-size(5.5rem); +} diff --git a/exampleSite/layouts/index.html b/exampleSite/layouts/index.html index 13477f4..8d51c1c 100644 --- a/exampleSite/layouts/index.html +++ b/exampleSite/layouts/index.html @@ -1,88 +1,165 @@ + + + + {{ .Title }} + + {{/* styles */}} + - - - - {{ .Title }} - - {{/* styles */}} - - - {{/* 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 | resources.ToCSS $options }} - {{ if hugo.IsProduction }} - {{ $styles = $styles | fingerprint }} - {{ end }} - + {{/* 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 | resources.ToCSS $options }} + {{ if hugo.IsProduction }} + {{ $styles = $styles | fingerprint }} + {{ end }} + - {{/* 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 }} - - - -
-

Bootstrap v5 Hugo Module

-

Dependencies

-

Note: 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 go.mod.

- - - - - - - - - - - - - {{ range $index, $element := hugo.Deps }} - - - - - - - - - {{ end }} - -
#OwnerPathVersionTimeVendor
{{ add $index 1 }}{{ with $element.Owner }}{{.Path }}{{ end }} - {{ $element.Path }} - {{ with $element.Replace}} - => {{ .Path }} - {{ end }} - {{ $element.Version }}{{ with $element.Time }}{{ . }}{{ end }}{{ $element.Vendor }}
-

Toast (JS plugin)

-