Add supporting themes required for Lotusdocs
This commit is contained in:
Abner Coimbre
@@ -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);
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "bootstrap/bootstrap";
|
||||
|
||||
.bd-placeholder-img-lg {
|
||||
@include font-size(5.5rem);
|
||||
}
|
||||
14
themes/hugo-mod-bootstrap-scss/exampleSite/config.toml
Normal file
14
themes/hugo-mod-bootstrap-scss/exampleSite/config.toml
Normal file
@@ -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"
|
||||
9
themes/hugo-mod-bootstrap-scss/exampleSite/go.mod
Normal file
9
themes/hugo-mod-bootstrap-scss/exampleSite/go.mod
Normal file
@@ -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 => ../
|
||||
8
themes/hugo-mod-bootstrap-scss/exampleSite/go.sum
Normal file
8
themes/hugo-mod-bootstrap-scss/exampleSite/go.sum
Normal file
@@ -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=
|
||||
165
themes/hugo-mod-bootstrap-scss/exampleSite/layouts/index.html
Normal file
165
themes/hugo-mod-bootstrap-scss/exampleSite/layouts/index.html
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user