From d86d1b82be15550544e2bd32254fc9a9ff752528 Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Thu, 27 Jan 2022 15:26:18 +1100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Dark=20mode=20rewrite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 +- assets/js/appearance.js | 36 +++++++++++++ assets/js/code.js | 6 +-- assets/js/dark.js | 54 ------------------- config/_default/languages.en.toml | 1 + config/_default/params.toml | 8 +-- exampleSite/config/_default/languages.en.toml | 1 + exampleSite/config/_default/params.toml | 8 +-- exampleSite/content/docs/configuration.md | 7 +-- exampleSite/content/docs/installation.md | 2 +- exampleSite/content/docs/version-2/_index.md | 6 ++- .../content/docs/version-2/upgrade/index.md | 17 ++++-- layouts/_default/baseof.html | 5 +- layouts/partials/footer.html | 19 +++---- layouts/partials/head.html | 9 ++-- 15 files changed, 92 insertions(+), 91 deletions(-) create mode 100644 assets/js/appearance.js delete mode 100644 assets/js/dark.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b63b680..a8cb2901 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,9 +25,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Changed - ⚠️ Required Hugo version is now 0.87.0 or later -- ⚠️ Author and logo images are now Hugo assets +- ⚠️ Complete rewrite of dark mode to allow more flexibile configuration +- ⚠️ All theme images are now Hugo assets - ⚠️ Overhauled `figure` shortcode which now resizes images -- ⚠️ Renamed parameter: `darkToggle` -> `showDarkToggle` - Upgrade to Tailwind v3.0.15 - Inline Javascript moved to external files - Improved JSON-LD structured data diff --git a/assets/js/appearance.js b/assets/js/appearance.js new file mode 100644 index 00000000..fc4d6095 --- /dev/null +++ b/assets/js/appearance.js @@ -0,0 +1,36 @@ +const browserIsDark = + window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; +const userPreference = localStorage.getItem("appearance"); +const switcher = document.getElementById("appearance-switcher"); + +if ( + (browserIsDark && userPreference === null) || + (browserIsDark && userPreference === "dark") || + userPreference === "dark" +) { + document.documentElement.classList.add("dark"); +} + +if (document.documentElement.getAttribute("data-auto-appearance") === "true") { + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => { + if (event.matches) { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + }); +} + +window.addEventListener("DOMContentLoaded", (event) => { + switcher.addEventListener("click", () => { + document.documentElement.classList.toggle("dark"); + localStorage.setItem( + "appearance", + document.documentElement.classList.contains("dark") ? "dark" : "light" + ); + }); + switcher.addEventListener("contextmenu", (event) => { + event.preventDefault(); + localStorage.removeItem("appearance"); + }); +}); diff --git a/assets/js/code.js b/assets/js/code.js index 2a2c270c..a41fb8b1 100644 --- a/assets/js/code.js +++ b/assets/js/code.js @@ -1,6 +1,6 @@ -var codeLang = document.getElementById("code-lang"); -var copyText = codeLang ? codeLang.getAttribute("data-copy") : "Copy"; -var copiedText = codeLang ? codeLang.getAttribute("data-copied") : "Copied"; +var scriptBundle = document.getElementById("script-bundle"); +var copyText = scriptBundle ? scriptBundle.getAttribute("data-copy") : "Copy"; +var copiedText = scriptBundle ? scriptBundle.getAttribute("data-copied") : "Copied"; function createCopyButton(highlightDiv) { const button = document.createElement("button"); diff --git a/assets/js/dark.js b/assets/js/dark.js deleted file mode 100644 index 8f07fd32..00000000 --- a/assets/js/dark.js +++ /dev/null @@ -1,54 +0,0 @@ -function loadPreferredAppearance() { - if ( - localStorage.preferredAppearance === "dark" || - (!("preferredAppearance" in localStorage) && - window.matchMedia("(prefers-color-scheme: dark)").matches) - ) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } -} - -function setPreferredAppearance(scheme) { - if (scheme == "default") { - localStorage.removeItem("preferredAppearance"); - } else { - localStorage.preferredAppearance = scheme; - } - loadPreferredAppearance(); -} - -window.addEventListener("DOMContentLoaded", (event) => { - // Hook up toggle events - darkToggle = document.getElementById("dark-toggle"); - if (darkToggle) { - darkToggle.addEventListener("click", function (e) { - e.preventDefault(); - setPreferredAppearance("dark"); - }); - darkToggle.addEventListener("contextmenu", function (e) { - e.preventDefault(); - setPreferredAppearance("default"); - }); - } - lightToggle = document.getElementById("light-toggle"); - if (lightToggle) { - lightToggle.addEventListener("click", function (e) { - e.preventDefault(); - setPreferredAppearance("light"); - }); - lightToggle.addEventListener("contextmenu", function (e) { - e.preventDefault(); - setPreferredAppearance("default"); - }); - } - - // Load user's preset preference (if any) - loadPreferredAppearance(); - - // Allow browser media overrides - window - .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", loadPreferredAppearance); -}); diff --git a/config/_default/languages.en.toml b/config/_default/languages.en.toml index f2dc0dbf..f75f48f4 100644 --- a/config/_default/languages.en.toml +++ b/config/_default/languages.en.toml @@ -6,6 +6,7 @@ weight = 1 rtl = false title = "Congo" +# logo = "img/logo.jpg" # description = "My awesome website" # copyright = "Copy, _right?_ :thinking_face:" diff --git a/config/_default/params.toml b/config/_default/params.toml index c01c0bb5..d1a1f312 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -6,13 +6,15 @@ # https://jpanther.github.io/congo/docs/configuration/#theme-parameters colorScheme = "congo" +defaultAppearance = "light" # valid options: light or dark +autoSwitchAppearance = true +showAppearanceSwitcher = false + enableSearch = false enableCodeCopy = false -darkMode = "auto" -# logo = "img/logo.jpg" + # mainSections = ["section1", "section2"] # robots = "" -showDarkToggle = false showScrollToTop = true [homepage] diff --git a/exampleSite/config/_default/languages.en.toml b/exampleSite/config/_default/languages.en.toml index b7c45ab0..8ca94547 100644 --- a/exampleSite/config/_default/languages.en.toml +++ b/exampleSite/config/_default/languages.en.toml @@ -6,6 +6,7 @@ weight = 1 rtl = false title = "Congo" +# logo = "img/logo.jpg" # description = "My awesome website" # copyright = "Copy, _right?_ :thinking_face:" diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 14666e8f..bc880d35 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -6,13 +6,15 @@ # https://jpanther.github.io/congo/docs/configuration/#theme-parameters colorScheme = "congo" +defaultAppearance = "light" # valid options: light or dark +autoSwitchAppearance = true +showAppearanceSwitcher = true + enableSearch = true enableCodeCopy = true -darkMode = "auto" -# logo = "img/logo.jpg" + mainSections = ["samples"] # robots = "" -showDarkToggle = false showScrollToTop = true [homepage] diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md index 499b9c88..b1399b7f 100644 --- a/exampleSite/content/docs/configuration.md +++ b/exampleSite/content/docs/configuration.md @@ -99,13 +99,14 @@ Many of the article defaults here can be overridden on a per article basis by sp |Name|Default|Description| |---|---|---| |`colorScheme`|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.| +|`defaultAppearance`|`"light"`|The default theme appearance, either `light` or `dark`.| +|`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.| +|`showAppearanceSwitcher`|`false`|Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.| |`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.| -|`enableCodeCopy`|`false`|Whether copy buttons are enabled for `` blocks.| -|`darkMode`|`"auto"`|The preferred theme appearance for dark mode. Set to `true` to force dark appearance or `false` to force light appearance. Using `"auto"` will defer to the user's operating system preference.| +|`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `` blocks.| |`logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.| |`mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.| |`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.| -|`showDarkToggle`|`false`|When `darkMode` is set to `"auto"`, this parameter determines whether or not to show the appearance toggle in the site footer. The browser's local storage is used to persist the user's preference.| |`showScrollToTop`|`true`|When set to `true` the scroll to top arrow is displayed.| |`homepage.layout`|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.| |`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.| diff --git a/exampleSite/content/docs/installation.md b/exampleSite/content/docs/installation.md index df7e99e1..c35126b2 100644 --- a/exampleSite/content/docs/installation.md +++ b/exampleSite/content/docs/installation.md @@ -20,7 +20,7 @@ These instructions will get you up and running using Hugo and Congo from a compl If you haven't used Hugo before, you will need to [install it onto your local machine](https://gohugo.io/getting-started/installing). You can check if it's already installed by running the command `hugo version`. {{< alert >}} -Make sure you are using **Hugo version 0.86.1** or later as the theme takes advantage of some of the latest Hugo features. +Make sure you are using **Hugo version 0.87.0** or later as the theme takes advantage of some of the latest Hugo features. {{< /alert >}} You can find detailed installation instructions for your platform in the [Hugo docs](https://gohugo.io/getting-started/installing). diff --git a/exampleSite/content/docs/version-2/_index.md b/exampleSite/content/docs/version-2/_index.md index 254b0cc5..e901edd3 100644 --- a/exampleSite/content/docs/version-2/_index.md +++ b/exampleSite/content/docs/version-2/_index.md @@ -28,7 +28,7 @@ A highly requested feature, Congo is now multilingual! If you publish your conte
:flag-au: :de: :fr: :es: :cn: :brazil: :tr:
-Thanks to submissions from the community, Congo has already been translated into [seven languages](https://github.com/jpanther/congo/tree/dev/i18n) with more to be added over time. By the way, pull requests for new languages are always welcome! +Thanks to submissions from the community, Congo has already been translated into [seven languages](https://github.com/jpanther/congo/tree/dev/i18n) with more to be added over time. By the way, [pull requests](https://github.com/jpanther/congo/pulls) for new languages are always welcome! ## RTL language support @@ -87,6 +87,10 @@ The new image resizing features also provide full control over `alt` and `title` There's countless other minor changes to explore. From being able to display taxonomies on articles and list pages, to using the new `headline` author parameter to customise your homepage. There's also improved JSON-LD strucured data which further optimises SEO performance. Plus the entire theme has had extra polish to ensure a consistent design language. +:rocket: Check out the [full changelog](https://github.com/jpanther/congo/blob/dev/CHANGELOG.md) to learn more. + +## Next steps + If you're ready to upgrade, read the [upgrading from version 1 guide]({{< ref "upgrade" >}}) to get started. If you're new to Congo, check out the [Installation guide]({{< ref "docs/installation" >}}) to begin a new project. --- diff --git a/exampleSite/content/docs/version-2/upgrade/index.md b/exampleSite/content/docs/version-2/upgrade/index.md index 4db563df..78f6ae3a 100644 --- a/exampleSite/content/docs/version-2/upgrade/index.md +++ b/exampleSite/content/docs/version-2/upgrade/index.md @@ -117,6 +117,11 @@ If you're using a language other than English, provide a `defaultContentLanguage # config/_default/config.toml defaultContentLanguage = "en" + +enableRobotsTXT = true +paginate = 10 +summaryLength = 0 + [outputs] home = ["HTML", "RSS", "JSON"] ``` @@ -139,11 +144,17 @@ The recommended settings are as follows, which includes any headings in the Mark A number of new theme parameters have been introduced in Congo 2.0. Some minor changes are requried to existing configurations. Remember, the theme will always revert to a sensible default if a parameter is not provided. -The follow parameters have been **renamed**: +The way that dark mode works in Congo has been changed to allow greater flexibility around configuration. The old `darkMode` and `darkToggle` parameters have been **removed and replaced** by three new parameters. These new options operate independently of each other, making it possible to force the appearance while still allowing the user to override. -`darkToggle` **→** `showDarkToggle` + +| New parameter | Type | Default | Description | +| --- | --- | --- | --- | +| `defaultAppearance` | String | `"light"` | Default theme appearance; either `light` or `dark`.
:warning: _Setting this to `light` replicates the old `darkMode = false` setting, while `dark` replicates `darkMode = true`._ | +| `autoSwitchAppearance` | Boolean | `true` | Whether the theme appearance automatically switches based upon the operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.
:warning: _Setting this to `true` replicates the old `darkMode = "auto"` setting._ | +| `showAppearanceSwitcher` | Boolean | `false` | Whether the theme appearance switcher is dispalyed in the site footer.
:warning: _This parameter replaces `darkToggle`._ | + -The following table outlines some key **new parameters** that control new features in version 2: +The following table outlines some other key **new parameters** that control new features in version 2: | New parameter | Type | Default | | ----------------------------- | ------- | ------- | diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index e507636c..f975e26a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,7 +8,10 @@ {{- else -}} ltr {{- end }}" - class="scroll-smooth {{ if .Site.Params.darkMode | default false }}dark{{ end }}" + class="scroll-smooth {{ if eq (.Site.Params.defaultAppearance | default "light") "dark" -}} + dark + {{- end }}" + data-auto-appearance="{{ .Site.Params.autoSwitchAppearance | default "true" }}" > {{- partial "head.html" . -}} {{ end }} - {{/* Dark mode toggle */}} - {{ if and (.Site.Params.showDarkToggle | default false) (eq (.Site.Params.darkMode | default "auto") "auto") }} + {{/* Appearance switch */}} + {{ if .Site.Params.showAppearanceSwitcher | default false }}
-
{{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 8cecb591..cf213072 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -50,9 +50,9 @@ href="{{ $bundleCSS.RelPermalink }}" integrity="{{ $bundleCSS.Data.Integrity }}" /> - {{ if eq (.Site.Params.darkMode | default "auto") "auto" }} - {{ $jsDark := resources.Get "js/dark.js" }} - {{ $assets.Add "js" (slice $jsDark) }} + {{ if .Site.Params.enableAppearanceSwitching | default true }} + {{ $jsAppearance := resources.Get "js/appearance.js" }} + {{ $assets.Add "js" (slice $jsAppearance) }} {{ end }} {{ if .Site.Params.enableSearch | default false }} {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }} @@ -62,11 +62,10 @@ {{ if .Site.Params.enableCodeCopy | default false }} {{ $jsCode := resources.Get "js/code.js" }} {{ $assets.Add "js" (slice $jsCode) }} - {{ end }} {{ if $assets.Get "js" }} {{ $bundleJS := $assets.Get "js" | resources.Concat "js/main.bundle.js" | resources.Minify | resources.Fingerprint "sha512" }} - + {{ end }} {{/* Icons */}} {{ if templates.Exists "partials/favicons.html" }}