Skip to content

Commit

Permalink
Add Button and Carousel JS examples
Browse files Browse the repository at this point in the history 
Updates gohugoio#16
  • Loading branch information
@bep
bep committed Oct 22, 2024
1 parent 37c103f commit eae9a99
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 96 deletions.
30 changes: 15 additions & 15 deletions exampleSite/assets/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -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);
});
})();
4 changes: 4 additions & 0 deletions exampleSite/assets/scss/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
@import "bootstrap/bootstrap";

.bd-placeholder-img-lg {
@include font-size(5.5rem);
}
239 changes: 158 additions & 81 deletions exampleSite/layouts/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,165 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
{{ .Title }}
</title>
{{/* styles */}}
<style>
html {
font-size: 12px;
}
</style>

<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 | resources.ToCSS $options }}
{{ if hugo.IsProduction }}
{{ $styles = $styles | fingerprint }}
{{ end }}
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
{{/* 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 }}
<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">
<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>.</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>
{{/* 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>
<div class="toast-body">
Hello, world! This is a toast message.
<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">Butttons</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>
<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>
</body>
</html>
31 changes: 31 additions & 0 deletions exampleSite/layouts/partials/placeholder.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit eae9a99

Please sign in to comment.