Skip to content

Commit

Permalink
feat: added options lazySizes, clipBoard, instantPage, flexSearch, an…
Browse files Browse the repository at this point in the history
…d darkMode
  • Loading branch information
h-enk committed Mar 1, 2021
1 parent a83f039 commit 226f661
Show file tree
Hide file tree
Showing 10 changed files with 90 additions and 57 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"no-console": 0,
Expand Down
31 changes: 0 additions & 31 deletions assets/js/app.js
Original file line number Diff line number Diff line change
@@ -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 changes: 18 additions & 0 deletions assets/js/clipboard.js
Original file line number Diff line number Diff line change
@@ -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 changes: 12 additions & 0 deletions assets/js/darkmode.js
Original file line number Diff line number Diff line change
@@ -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 change: 1 addition & 0 deletions assets/js/instant.page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import 'instant.page';
1 change: 1 addition & 0 deletions assets/js/lazysizes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import 'lazysizes';
12 changes: 0 additions & 12 deletions config/_default/config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 7 additions & 0 deletions config/_default/params.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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
58 changes: 45 additions & 13 deletions layouts/partials/footer/script-footer.html
Original file line number Diff line number Diff line change
@@ -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 changes: 4 additions & 0 deletions layouts/partials/header/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>

0 comments on commit 226f661

Please sign in to comment.