michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 14:35:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #683 from DanWiseProgramming/feature/add_logo_dark_light_mode_switching

Browse source 
✨[#676] Add logo dark/light mode switching mechanism
This commit is contained in:
Nuno Coração 2023-05-12 14:13:14 +01:00 committed by GitHub
commit 50e4c2b9aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
assets/js/appearance.js
View file

@ -26,16 +26,19 @@ window.addEventListener("DOMContentLoaded", (event) => {
const switcher = document.getElementById("appearance-switcher");
const switcherMobile = document.getElementById("appearance-switcher-mobile");
updateMeta()
updateMeta();
this.updateLogo?.(getTargetAppearance());
if (switcher) {
switcher.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
var targetAppearance = getTargetAppearance();
localStorage.setItem(
"appearance",
document.documentElement.classList.contains("dark") ? "dark" : "light"
targetAppearance
);
updateMeta()
updateMeta();
this.updateLogo?.(targetAppearance);
});
switcher.addEventListener("contextmenu", (event) => {
event.preventDefault();
@ -45,11 +48,13 @@ window.addEventListener("DOMContentLoaded", (event) => {
if (switcherMobile) {
switcherMobile.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
var targetAppearance = getTargetAppearance();
localStorage.setItem(
"appearance",
document.documentElement.classList.contains("dark") ? "dark" : "light"
targetAppearance
);
updateMeta()
updateMeta();
this.updateLogo?.(targetAppearance);
});
switcherMobile.addEventListener("contextmenu", (event) => {
event.preventDefault();
@ -66,10 +71,31 @@ 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) => {
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 }}
var getTargetAppearance = () => {
return document.documentElement.classList.contains("dark") ? "dark" : "light"
}
window.addEventListener("DOMContentLoaded", (event) => {
const scroller = document.getElementById("top-scroller");
const footer = document.getElementById("site-footer");
if(scroller.getBoundingClientRect().top > footer.getBoundingClientRect().top) {
scroller.hidden = true;
}
});
});

1
config/_default/languages.en.toml
View file

@ -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:"

1
exampleSite/content/docs/configuration/index.md
View file

@ -141,6 +141,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 `<code>` 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. |

2
layouts/partials/head.html
View file

@ -50,7 +50,7 @@
<link type="text/css" rel="stylesheet" href="{{ $bundleCSS.RelPermalink }}"
integrity="{{ $bundleCSS.Data.Integrity }}" />
{{ $jsAppearance := resources.Get "js/appearance.js" }}
{{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint "sha512" }}
{{ $jsAppearance = $jsAppearance | resources.ExecuteAsTemplate $jsAppearance.RelPermalink . | resources.Minify | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $jsAppearance.RelPermalink }}"
integrity="{{ $jsAppearance.Data.Integrity }}"></script>
{{ if .Site.Params.enableSearch | default false }}

2
layouts/partials/header/basic.html
View file

@ -8,7 +8,7 @@
<span class="sr-only">{{ .Site.Title | markdownify | emojify }}</span>
<img src="{{ $logo.RelPermalink }}" width="{{ div $logo.Width 2 }}" height="{{ div $logo.Height 2 }}"
class="max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt="{{ .Site.Title }}" />
class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt="{{ .Site.Title }}" />
</a>
</div>