Add supporting themes required for Lotusdocs
This commit is contained in:
Abner Coimbre
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>
|
||||
Reference in New Issue
Block a user