diff options
| author | fiatjaf <fiatjaf@gmail.com> | 2018-04-10 16:11:25 +0300 |
|---|---|---|
| committer | fiatjaf <fiatjaf@gmail.com> | 2018-04-10 16:11:25 +0300 |
| commit | adfcb2acfb8b1a7140723b6aebf4949e32f00448 (patch) | |
| tree | fb3411ed71e17a7decaae6262de191ff9fd395a7 | |
| parent | fb1ed2e5bbfe8d67271b3d11801f88c596b90991 (diff) | |
show theme-selector widget when no theme is set on config.
| -rw-r--r-- | exampleSite/config.toml | 2 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 50 |
2 files changed, 50 insertions, 2 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index a25df7f..9bd1a47 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -4,7 +4,5 @@ title = "Classless Base" theme = "classless" [params] - theme = "zen" - commit_sha = "054d85a" show_summaries = true description = "Nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Eu feugiat pretium nibh ipsum. Adipiscing vitae proin sagittis nisl." diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8f3ee7e..2de7563 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,7 +6,57 @@ <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes"> <title>{{ block "title" . }}{{.Site.Title}}{{ end }}</title> {{.Hugo.Generator}} +{{ if and ($.Param "commit_sha") ($.Param "theme") }} <link rel="stylesheet" href="https://cdn.rawgit.com/fiatjaf/classless/{{$.Param "commit_sha"}}/themes/{{$.Param "theme"}}/theme.css"> +{{ else if ($.Param "theme_url") }} + <link rel="stylesheet" href="{{ $.Param "theme_url" }}"> +{{ else }} + <link rel="stylesheet" id="chosen-theme" href="https://rawgit.com/fiatjaf/classless/master/themes/plain/theme.css"> + <script> +let link = document.getElementById('chosen-theme') +let widget = document.createElement('div') +widget.style.position = 'absolute' +widget.style.right = '5px' +widget.style.top = '2px' +widget.style.background = 'beige' +widget.style.color = '#444' +widget.style.zIndex = 99 +widget.style.padding = '4px 8px' +widget.innerHTML = ` +<label> + <p>No theme was set on <code>config.toml</code>.<br> + Choose a theme from the list to experiment with it:</p> + <select></select> +</label> +` +fetch('https://api.github.com/repos/fiatjaf/classless/contents/themes') + .then(r => r.json()) + .then(files => { + document.body.appendChild(widget) + let select = document.querySelector('select') + + files + .filter(f => f.type === 'dir') + .forEach(f => { + let option = document.createElement('option') + option.value = f.name + option.innerHTML = f.name + select.appendChild(option) + }) + + let options = Array.from(select.querySelectorAll('option')) + let chosen = options[parseInt(Math.random() * options.length)] + chosen.selected = true + link.href = link.href.replace(/themes\/[^\/]+/, `themes/${chosen.value}`) + + select.addEventListener('change', e => { + let chosen = e.target.value + link.href = link.href.replace(/themes\/[^\/]+/, `themes/${chosen}`) + }) + }) + .catch(console.log) + </script> +{{ end }} </head> <body> <header role="banner"> |