diff --git a/.gitignore b/.gitignore index 34af1ac..7379112 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ exampleSite/resources -exampleSite/public \ No newline at end of file +exampleSite/public +node_modules diff --git a/CHANGELOG.md b/CHANGELOG.md index 65098de..d2da252 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,25 @@ All the changes made to Showcase theme for Hugo. +## v1.3.0 - 2021-07-14 + +### Added + +- Support for dark mode toggle + +## v1.2.1 - 2021-07-12 + +### Fixed + +- "multipage = false" is not working properly + +## v1.2.0 - 2021-06-19 + +### Added + +- Add support for pagination by setting the following properties: paginate, multipage +- Support for private sections + ## 2020-09-25 ### Added @@ -12,12 +31,12 @@ All the changes made to Showcase theme for Hugo. - Fix issue with showing homepage filters in other custom pages -## 2020-06-24 +## v1.1.0 - 2020-06-24 ### Added - Add support for custom menu option -## 2020-06-10 +## v1.0.0 - 2020-06-10 - Initial Release diff --git a/README.md b/README.md index fdab5eb..2cdee6b 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ Features: - Filtering content - Social links - Custom menu +- Darkmode ## Get the theme @@ -72,6 +73,10 @@ It is possible to exclude sections from the auto-generated list. In order to exc You can also add a custom menu item using the `config.toml` and disable auto-generated sections if not required. Refer config in [exampleSite](https://github.com/apvarun/showcase-hugo-theme/blob/master/exampleSite/config.toml) +## Dark mode + +In order to enable darkmode toggle in your side, set the `params.darkMode` property to `true` in your `config.toml`. + ## Google Analytics Set `googleAnalytics` in `config.toml` to activate Hugo's [internal Google Analytics template](https://gohugo.io/templates/internal/#google-analytics). diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 3228fd1..9ed6a89 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -19,6 +19,9 @@ pluralizelisttitles = false paginate = 3 multipage = true + # Dark mode + darkMode = true + [[menu.main]] name = "External" url = "https://example.com" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5f8e2ec..b8d887e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,7 +1,7 @@ - + {{- partial "head.html" . -}} - + {{- partial "header.html" . -}}
{{- block "main" . }}{{- end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 31e4967..a23f18d 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+

{{ .Title }}

diff --git a/layouts/partials/custom-message.html b/layouts/partials/custom-message.html index 0a1e16f..e63c3bb 100644 --- a/layouts/partials/custom-message.html +++ b/layouts/partials/custom-message.html @@ -1,6 +1,6 @@
{{ if .Site.Params.Message }} -

+

{{ .Site.Params.Message }}

{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 34549f1..d7820be 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -138,5 +138,28 @@ }); const showAllButton = document.querySelector(`.show-all`) - if(showAllButton) showAllButton.addEventListener("click", showAll); + if(showAllButton) { + showAllButton.addEventListener("click", showAll); + } + + {{ if .Site.Params.darkMode }} + const darkmode = document.querySelector('.toggle-dark-mode'); + function toggleDarkMode() { + if (document.documentElement.classList.contains('dark')) { + document.documentElement.classList.remove('dark') + localStorage.setItem('darkmode', 'light') + } else { + document.documentElement.classList.add('dark') + localStorage.setItem('darkmode', 'dark') + } + } + if (darkmode) { + darkmode.addEventListener('click', toggleDarkMode); + } + + const isDark = localStorage.getItem('darkmode'); + if(isDark && isDark === 'dark') { + toggleDarkMode(); + } + {{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index c58f796..66f973b 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -11,8 +11,15 @@ /> {{ end }} {{ .Site.Title }} - - + + {{ $styles := resources.Get "css/main.css" | postCSS (dict "config" "./postcss.config.js") }} + + {{ if .Site.IsServer }} + + {{ else }} + {{ $styles := $styles | minify | fingerprint | resources.PostProcess }} + + {{ end }}