feat: added options lazySizes, clipBoard, instantPage, flexSearch, and darkMode
This commit is contained in:
Henk Verlinde
parent
a83f039263
commit
226f661966
|
|
@ -11,7 +11,8 @@
|
|||
"SharedArrayBuffer": "readonly"
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2018
|
||||
"ecmaVersion": 2018,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"no-console": 0,
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
document.getElementById('mode').addEventListener('click', () => {
|
||||
|
||||
document.body.classList.toggle('dark');
|
||||
localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
|
||||
|
||||
});
|
||||
|
||||
if (localStorage.getItem('theme') === 'dark') {
|
||||
|
||||
document.body.classList.add('dark');
|
||||
|
||||
}
|
||||
|
||||
/* eslint-disable */
|
||||
var clipboard = new ClipboardJS('.btn-clipboard');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
/*
|
||||
console.info('Action:', e.action);
|
||||
console.info('Text:', e.text);
|
||||
console.info('Trigger:', e.trigger);
|
||||
*/
|
||||
|
||||
e.clearSelection();
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.error('Action:', e.action);
|
||||
console.error('Trigger:', e.trigger);
|
||||
});
|
||||
/* eslint-enable */
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import Clipboard from 'clipboard';
|
||||
|
||||
var clipboard = new Clipboard('.btn-clipboard');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
/*
|
||||
console.info('Action:', e.action);
|
||||
console.info('Text:', e.text);
|
||||
console.info('Trigger:', e.trigger);
|
||||
*/
|
||||
|
||||
e.clearSelection();
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.error('Action:', e.action);
|
||||
console.error('Trigger:', e.trigger);
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
document.getElementById('mode').addEventListener('click', () => {
|
||||
|
||||
document.body.classList.toggle('dark');
|
||||
localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
|
||||
|
||||
});
|
||||
|
||||
if (localStorage.getItem('theme') === 'dark') {
|
||||
|
||||
document.body.classList.add('dark');
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
import 'instant.page';
|
||||
|
|
@ -0,0 +1 @@
|
|||
import 'lazysizes';
|
||||
|
|
@ -76,18 +76,6 @@ rel = "sitemap"
|
|||
[[module.mounts]]
|
||||
source = "static"
|
||||
target = "static"
|
||||
[[module.mounts]]
|
||||
source = "node_modules/lazysizes"
|
||||
target = "assets/js/vendor/lazysizes"
|
||||
[[module.mounts]]
|
||||
source = "node_modules/instant.page"
|
||||
target = "assets/js/vendor/instant.page"
|
||||
[[module.mounts]]
|
||||
source = "node_modules/lazysizes"
|
||||
target = "assets/js/vendor/lazysizes"
|
||||
[[module.mounts]]
|
||||
source = "node_modules/flexsearch"
|
||||
target = "assets/js/vendor/flexsearch"
|
||||
[[module.mounts]]
|
||||
source = "node_modules/clipboard"
|
||||
target = "assets/js/vendor/clipboard"
|
||||
|
|
|
|||
|
|
@ -45,3 +45,10 @@ alertText = "Like Doks? <a class=\"alert-link\" href=\"https://github.com/h-enk/
|
|||
# Edit Page
|
||||
docsRepo = "https://github.com/h-enk/doks"
|
||||
editPage = false
|
||||
|
||||
[options]
|
||||
lazySizes = true
|
||||
clipBoard = true
|
||||
instantPage = true
|
||||
flexSearch = true
|
||||
darkMode = true
|
||||
|
|
|
|||
|
|
@ -1,19 +1,51 @@
|
|||
{{ $indexTemplate := resources.Get "js/index.js" -}}
|
||||
{{ $index := $indexTemplate | resources.ExecuteAsTemplate "index.js" . -}}
|
||||
{{ $lazysizes := resources.Get "js/vendor/lazysizes/lazysizes.min.js" -}}
|
||||
{{ $flexsearch := resources.Get "js/vendor/flexsearch/dist/flexsearch.min.js" -}}
|
||||
{{ $clipboard := resources.Get "js/vendor/clipboard/dist/clipboard.min.js" -}}
|
||||
|
||||
{{ $app := resources.Get "js/app.js" -}}
|
||||
|
||||
{{ $slice := slice $app -}}
|
||||
|
||||
{{ if .Site.Params.options.lazySizes -}}
|
||||
{{ $lazySizes := resources.Get "js/lazySizes.js" -}}
|
||||
{{ $lazySizes := $lazySizes | js.Build -}}
|
||||
{{ $slice = $slice | append $lazySizes -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ if .Site.Params.options.clipBoard -}}
|
||||
{{ $clipBoard := resources.Get "js/clipBoard.js" -}}
|
||||
{{ $clipBoard := $clipBoard | js.Build -}}
|
||||
{{ $slice = $slice | append $clipBoard -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ if .Site.Params.options.instantPage -}}
|
||||
{{ $instantPage := resources.Get "js/instant.page.js" -}}
|
||||
{{ $instantPage := $instantPage | js.Build -}}
|
||||
{{ $slice = $slice | append $instantPage -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ if .Site.Params.options.flexSearch -}}
|
||||
{{ $flexSearch := resources.Get "js/vendor/flexsearch/dist/flexsearch.min.js" -}}
|
||||
{{ $slice = $slice | append $flexSearch -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ if .Site.Params.options.darkMode -}}
|
||||
{{ $darkMode := resources.Get "js/darkmode.js" -}}
|
||||
{{ $darkMode := $darkMode | js.Build -}}
|
||||
{{ $slice = $slice | append $darkMode -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ $js := $slice | resources.Concat "main.js" -}}
|
||||
|
||||
{{ if eq (hugo.Environment) "development" -}}
|
||||
{{ $app := resources.Get "js/app.js" -}}
|
||||
{{ $js := slice $lazysizes $clipboard $flexsearch $app | resources.Concat "main.js" -}}
|
||||
<script src="{{ $js.Permalink }}" defer></script>
|
||||
<script src="{{ $index.Permalink }}" defer></script>
|
||||
{{ if .Site.Params.options.flexSearch -}}
|
||||
<script src="{{ $index.Permalink }}" defer></script>
|
||||
{{ end -}}
|
||||
{{ else -}}
|
||||
{{ $instantPage := resources.Get "js/vendor/instant.page/instantpage.js" | minify -}}
|
||||
{{ $app := resources.Get "js/app.js" | minify -}}
|
||||
{{ $js := slice $lazysizes $clipboard $flexsearch $instantPage $app | resources.Concat "main.js" -}}
|
||||
{{ $jsProd := $js | resources.Fingerprint "sha512" -}}
|
||||
{{ $indexProd := $index | resources.Minify | resources.Fingerprint "sha512" -}}
|
||||
<script src="{{ $jsProd.Permalink }}" integrity="{{ $jsProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
|
||||
<script src="{{ $indexProd.Permalink }}" integrity="{{ $indexProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
|
||||
{{ $js := $js | minify | fingerprint "sha512" -}}
|
||||
{{ $index := $index | minify | fingerprint "sha512" -}}
|
||||
<script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
|
||||
{{ if .Site.Params.options.flexSearch -}}
|
||||
<script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
|
|
@ -4,10 +4,12 @@
|
|||
<input class="menu-btn order-0" type="checkbox" id="menu-btn">
|
||||
<label class="menu-icon d-md-none" for="menu-btn"><span class="navicon"></span></label>
|
||||
<a class="navbar-brand order-1 order-md-0 mr-auto" href="{{ .Site.BaseURL | absURL }}">{{ .Site.Params.Title }}</a>
|
||||
{{ if .Site.Params.options.darkMode -}}
|
||||
<button id="mode" class="btn btn-link order-2 order-md-4" type="button" aria-label="Toggle mode">
|
||||
<span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
|
||||
<span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
|
||||
</button>
|
||||
{{ end -}}
|
||||
<ul class="navbar-nav social-nav order-3 order-md-5">
|
||||
{{ range .Site.Menus.social -}}
|
||||
<li class="nav-item">
|
||||
|
|
@ -30,10 +32,12 @@
|
|||
{{ end -}}
|
||||
</ul>
|
||||
<div class="break order-6 d-md-none"></div>
|
||||
{{ if .Site.Params.options.flexSearch -}}
|
||||
<form class="navbar-form flex-grow-1 order-7 order-md-3">
|
||||
<input id="userinput" class="form-control is-search" type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
|
||||
<div id="suggestions" class="shadow bg-white rounded"></div>
|
||||
</form>
|
||||
{{ end -}}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
Loading…
Reference in New Issue