ResiLien
/
portails
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added options lazySizes, clipBoard, instantPage, flexSearch, and darkMode

This commit is contained in:
Henk Verlinde 2021-03-01 16:34:43 +01:00
parent a83f039263
commit 226f661966
10 changed files with 90 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.json
View File

@ -11,7 +11,8 @@
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"no-console": 0,

31
assets/js/app.js
View File

@ -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 */

18
assets/js/clipboard.js Normal file
View File

@ -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);
});

12
assets/js/darkmode.js Normal file
View File

@ -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');
}

1
assets/js/instant.page.js Normal file
View File

@ -0,0 +1 @@
import 'instant.page';

1
assets/js/lazysizes.js Normal file
View File

@ -0,0 +1 @@
import 'lazysizes';

12
config/_default/config.toml
View File

@ -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"

7
config/_default/params.toml
View File

@ -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

64
layouts/partials/footer/script-footer.html
View File

@ -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" -}}
{{ 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>
{{ 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>
{{ $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" -}}
<script src="{{ $js.Permalink }}" defer></script>
{{ if .Site.Params.options.flexSearch -}}
<script src="{{ $index.Permalink }}" defer></script>
{{ end -}}
{{ else -}}
{{ $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
layouts/partials/header/header.html
View File

@ -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>