From 25a60fffd1551e671e8ba29f50ca03680d03179b Mon Sep 17 00:00:00 2001 From: Daniel Odrinski Date: Wed, 26 Apr 2023 18:49:53 +0100 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8[#676]=20Add=20logo=20dark/light?= =?UTF-8?q?=20mode=20switching=20mechanism?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/js/appearance.js | 29 ++++++++++++++++++++++++++--- config/_default/languages.en.toml | 1 + 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/assets/js/appearance.js b/assets/js/appearance.js index 0acf9f18..d0663390 100644 --- a/assets/js/appearance.js +++ b/assets/js/appearance.js @@ -26,16 +26,20 @@ window.addEventListener("DOMContentLoaded", (event) => { const switcher = document.getElementById("appearance-switcher"); const switcherMobile = document.getElementById("appearance-switcher-mobile"); + var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" updateMeta() + updateLogo(targetAppearance) if (switcher) { switcher.addEventListener("click", () => { document.documentElement.classList.toggle("dark"); + var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" localStorage.setItem( "appearance", - document.documentElement.classList.contains("dark") ? "dark" : "light" + targetAppearance ); updateMeta() + updateLogo(targetAppearance) }); switcher.addEventListener("contextmenu", (event) => { event.preventDefault(); @@ -45,11 +49,13 @@ window.addEventListener("DOMContentLoaded", (event) => { if (switcherMobile) { switcherMobile.addEventListener("click", () => { document.documentElement.classList.toggle("dark"); + var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" localStorage.setItem( "appearance", - document.documentElement.classList.contains("dark") ? "dark" : "light" + targetAppearance ); updateMeta() + updateLogo(targetAppearance) }); switcherMobile.addEventListener("contextmenu", (event) => { event.preventDefault(); @@ -64,4 +70,21 @@ var updateMeta = () => { elem = document.querySelector('body'); style = getComputedStyle(elem); document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor); -} \ No newline at end of file +} + +var updateLogo = (targetAppearance) => { + {{ if and (.Site.Params.Logo) (.Site.Params.SecondaryLogo) }} + {{ $primaryLogo := resources.Get .Site.Params.Logo }} + {{ $secondaryLogo := resources.Get .Site.Params.SecondaryLogo }} + {{ if and ($primaryLogo) ($secondaryLogo) }} + var elems; + elems = document.querySelectorAll("img.logo") + targetLogoPath = + targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ? + "{{ $primaryLogo.RelPermalink }}" : "{{ $secondaryLogo.RelPermalink }}" + for (const elem of elems) { + elem.setAttribute("src", targetLogoPath) + } + {{ end }} + {{- end }} +} diff --git a/config/_default/languages.en.toml b/config/_default/languages.en.toml index 379c57ba..31e570ba 100644 --- a/config/_default/languages.en.toml +++ b/config/_default/languages.en.toml @@ -7,6 +7,7 @@ rtl = false title = "Blowfish" # logo = "img/logo.png" +# secondaryLogo = "img/secondary-logo.png" # description = "My awesome website" # copyright = "Copy, _right?_ :thinking_face:" From bf8f63b4a60d8ea359cad4239bd4b30be8586a6e Mon Sep 17 00:00:00 2001 From: Daniel Odrinski Date: Mon, 1 May 2023 21:50:54 +0100 Subject: [PATCH 2/7] [#676] Add accidentally un-committed files --- layouts/partials/head.html | 2 +- layouts/partials/header/basic.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 34a89492..daa8f821 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -50,7 +50,7 @@ {{ $jsAppearance := resources.Get "js/appearance.js" }} - {{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint "sha512" }} + {{ $jsAppearance = $jsAppearance | resources.ExecuteAsTemplate $jsAppearance.RelPermalink . | resources.Minify | resources.Fingerprint "sha512" }} {{ if .Site.Params.enableSearch | default false }} diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html index 4a020e1a..c370accc 100644 --- a/layouts/partials/header/basic.html +++ b/layouts/partials/header/basic.html @@ -8,7 +8,7 @@ {{ .Site.Title | markdownify | emojify }} {{ .Site.Title }} + class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt="{{ .Site.Title }}" /> From b8f23598c85e0e39c043377fa54a6eb034b68334 Mon Sep 17 00:00:00 2001 From: Daniel Odrinski Date: Wed, 26 Apr 2023 18:49:53 +0100 Subject: [PATCH 3/7] =?UTF-8?q?=E2=9C=A8[#676]=20Add=20logo=20dark/light?= =?UTF-8?q?=20mode=20switching=20mechanism?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/js/appearance.js | 29 ++++++++++++++++++++++++++--- config/_default/languages.en.toml | 1 + 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/assets/js/appearance.js b/assets/js/appearance.js index 0acf9f18..d0663390 100644 --- a/assets/js/appearance.js +++ b/assets/js/appearance.js @@ -26,16 +26,20 @@ window.addEventListener("DOMContentLoaded", (event) => { const switcher = document.getElementById("appearance-switcher"); const switcherMobile = document.getElementById("appearance-switcher-mobile"); + var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" updateMeta() + updateLogo(targetAppearance) if (switcher) { switcher.addEventListener("click", () => { document.documentElement.classList.toggle("dark"); + var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" localStorage.setItem( "appearance", - document.documentElement.classList.contains("dark") ? "dark" : "light" + targetAppearance ); updateMeta() + updateLogo(targetAppearance) }); switcher.addEventListener("contextmenu", (event) => { event.preventDefault(); @@ -45,11 +49,13 @@ window.addEventListener("DOMContentLoaded", (event) => { if (switcherMobile) { switcherMobile.addEventListener("click", () => { document.documentElement.classList.toggle("dark"); + var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" localStorage.setItem( "appearance", - document.documentElement.classList.contains("dark") ? "dark" : "light" + targetAppearance ); updateMeta() + updateLogo(targetAppearance) }); switcherMobile.addEventListener("contextmenu", (event) => { event.preventDefault(); @@ -64,4 +70,21 @@ var updateMeta = () => { elem = document.querySelector('body'); style = getComputedStyle(elem); document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor); -} \ No newline at end of file +} + +var updateLogo = (targetAppearance) => { + {{ if and (.Site.Params.Logo) (.Site.Params.SecondaryLogo) }} + {{ $primaryLogo := resources.Get .Site.Params.Logo }} + {{ $secondaryLogo := resources.Get .Site.Params.SecondaryLogo }} + {{ if and ($primaryLogo) ($secondaryLogo) }} + var elems; + elems = document.querySelectorAll("img.logo") + targetLogoPath = + targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ? + "{{ $primaryLogo.RelPermalink }}" : "{{ $secondaryLogo.RelPermalink }}" + for (const elem of elems) { + elem.setAttribute("src", targetLogoPath) + } + {{ end }} + {{- end }} +} diff --git a/config/_default/languages.en.toml b/config/_default/languages.en.toml index 379c57ba..31e570ba 100644 --- a/config/_default/languages.en.toml +++ b/config/_default/languages.en.toml @@ -7,6 +7,7 @@ rtl = false title = "Blowfish" # logo = "img/logo.png" +# secondaryLogo = "img/secondary-logo.png" # description = "My awesome website" # copyright = "Copy, _right?_ :thinking_face:" From e3869849bd5ee651c2fa09c92dc22fd6dd6b967c Mon Sep 17 00:00:00 2001 From: Daniel Odrinski Date: Mon, 1 May 2023 21:50:54 +0100 Subject: [PATCH 4/7] [#676] Add accidentally un-committed files --- layouts/partials/head.html | 2 +- layouts/partials/header/basic.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 34a89492..daa8f821 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -50,7 +50,7 @@ {{ $jsAppearance := resources.Get "js/appearance.js" }} - {{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint "sha512" }} + {{ $jsAppearance = $jsAppearance | resources.ExecuteAsTemplate $jsAppearance.RelPermalink . | resources.Minify | resources.Fingerprint "sha512" }} {{ if .Site.Params.enableSearch | default false }} diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html index 4a020e1a..c370accc 100644 --- a/layouts/partials/header/basic.html +++ b/layouts/partials/header/basic.html @@ -8,7 +8,7 @@ {{ .Site.Title | markdownify | emojify }} {{ .Site.Title }} + class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt="{{ .Site.Title }}" /> From 0e07a9f265ed7c11b2026f0f5675ed347066e3a3 Mon Sep 17 00:00:00 2001 From: Daniel Odrinski Date: Tue, 2 May 2023 11:04:13 +0100 Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=93=9D[#676]=20Update=20documentation?= =?UTF-8?q?=20for=20'secondaryLogo'=20parameter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- exampleSite/content/docs/configuration/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md index 69066178..33dfaf55 100644 --- a/exampleSite/content/docs/configuration/index.md +++ b/exampleSite/content/docs/configuration/index.md @@ -140,6 +140,7 @@ Many of the article defaults here can be overridden on a per article basis by sp | `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-to-clipboard buttons are enabled for `` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. | | `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. | +| `secondaryLogo` | _Not set_ | The relative path to the secondary site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions. This should have an inverted/contrasting colour scheme to `logo`. If set, this logo will be shown when users toggle from the `defaultAppearance` mode. | | `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. | | `showViews` | _Not set_ | Whether or not articles and list views are displayed. This requires firebase integrations to be enabled, look below. | | `showLikes` | _Not set_ | Whether or not articles and list likes are displayed. This requires firebase integrations to be enabled, look below. | From c6869834ea0ad6ddc18296b48dc5369ade770576 Mon Sep 17 00:00:00 2001 From: Daniel Odrinski Date: Tue, 2 May 2023 20:46:56 +0100 Subject: [PATCH 6/7] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20[#676]=20Optimise=20ap?= =?UTF-8?q?pearance.js=20for=20no=20secondary=20logo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/js/appearance.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/assets/js/appearance.js b/assets/js/appearance.js index d0663390..21c62d10 100644 --- a/assets/js/appearance.js +++ b/assets/js/appearance.js @@ -28,7 +28,7 @@ window.addEventListener("DOMContentLoaded", (event) => { var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" updateMeta() - updateLogo(targetAppearance) + this.updateLogo?.(targetAppearance) if (switcher) { switcher.addEventListener("click", () => { @@ -39,7 +39,7 @@ window.addEventListener("DOMContentLoaded", (event) => { targetAppearance ); updateMeta() - updateLogo(targetAppearance) + this.updateLogo?.(targetAppearance) }); switcher.addEventListener("contextmenu", (event) => { event.preventDefault(); @@ -55,7 +55,7 @@ window.addEventListener("DOMContentLoaded", (event) => { targetAppearance ); updateMeta() - updateLogo(targetAppearance) + this.updateLogo?.(targetAppearance) }); switcherMobile.addEventListener("contextmenu", (event) => { event.preventDefault(); @@ -72,11 +72,11 @@ var updateMeta = () => { document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor); } +{{ if and (.Site.Params.Logo) (.Site.Params.SecondaryLogo) }} +{{ $primaryLogo := resources.Get .Site.Params.Logo }} +{{ $secondaryLogo := resources.Get .Site.Params.SecondaryLogo }} +{{ if and ($primaryLogo) ($secondaryLogo) }} var updateLogo = (targetAppearance) => { - {{ if and (.Site.Params.Logo) (.Site.Params.SecondaryLogo) }} - {{ $primaryLogo := resources.Get .Site.Params.Logo }} - {{ $secondaryLogo := resources.Get .Site.Params.SecondaryLogo }} - {{ if and ($primaryLogo) ($secondaryLogo) }} var elems; elems = document.querySelectorAll("img.logo") targetLogoPath = @@ -85,6 +85,6 @@ var updateLogo = (targetAppearance) => { for (const elem of elems) { elem.setAttribute("src", targetLogoPath) } - {{ end }} - {{- end }} } +{{ end }} +{{- end }} From a660482b24d671bdeda2eeffbebc808935dae737 Mon Sep 17 00:00:00 2001 From: Daniel Odrinski Date: Tue, 2 May 2023 21:16:16 +0100 Subject: [PATCH 7/7] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[#676]=20Further=20opt?= =?UTF-8?q?imise=20appearance.js=20to=20reduce=20code=20duplication?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/js/appearance.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/assets/js/appearance.js b/assets/js/appearance.js index 21c62d10..1e487458 100644 --- a/assets/js/appearance.js +++ b/assets/js/appearance.js @@ -26,20 +26,19 @@ window.addEventListener("DOMContentLoaded", (event) => { const switcher = document.getElementById("appearance-switcher"); const switcherMobile = document.getElementById("appearance-switcher-mobile"); - var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" - updateMeta() - this.updateLogo?.(targetAppearance) + updateMeta(); + this.updateLogo?.(getTargetAppearance()); if (switcher) { switcher.addEventListener("click", () => { document.documentElement.classList.toggle("dark"); - var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" + var targetAppearance = getTargetAppearance(); localStorage.setItem( "appearance", targetAppearance ); - updateMeta() - this.updateLogo?.(targetAppearance) + updateMeta(); + this.updateLogo?.(targetAppearance); }); switcher.addEventListener("contextmenu", (event) => { event.preventDefault(); @@ -49,13 +48,13 @@ window.addEventListener("DOMContentLoaded", (event) => { if (switcherMobile) { switcherMobile.addEventListener("click", () => { document.documentElement.classList.toggle("dark"); - var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light" + var targetAppearance = getTargetAppearance(); localStorage.setItem( "appearance", targetAppearance ); - updateMeta() - this.updateLogo?.(targetAppearance) + updateMeta(); + this.updateLogo?.(targetAppearance); }); switcherMobile.addEventListener("contextmenu", (event) => { event.preventDefault(); @@ -88,3 +87,7 @@ var updateLogo = (targetAppearance) => { } {{ end }} {{- end }} + +var getTargetAppearance = () => { + return document.documentElement.classList.contains("dark") ? "dark" : "light" +}