From 60112440a9ed03b166b1c2ae184b10b2cbb6ff78 Mon Sep 17 00:00:00 2001 From: Almost-Senseless-Coder <109462027+Almost-Senseless-Coder@users.noreply.github.com> Date: Tue, 3 Oct 2023 15:28:23 +0200 Subject: [PATCH 1/5] Add tim-boettcher.online to README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 85aeb9d90..f9980391d 100644 --- a/README.md +++ b/README.md @@ -143,6 +143,7 @@ To learn more about multilingual support, see the [Frequently Asked Questions](h | [seadve.github.io](https://seadve.github.io/) | Dave Patrick Caberto ([SeaDve](https://github.com/SeaDve/)) | Personal blog and portfolio with custom CSS | [Source](https://github.com/SeaDve/seadve.github.io) | | [donovan.is](https://donovan.is) | [Donovan Glover](https://github.com/donovanglover) | Linux, Rust, and Full Stack Web Development | [Source](https://github.com/donovanglover/donovan.is) | | [mikufan.page](https://mikufan.page) | [Nadia](https://github.com/nyadiia) | Personal blog | [Source](https://github.com/nyadiia/mikufan.page) | +| [tim-boettcher.online](https://tim-boettcher.online/) | [Tim Böttcher](https://codeberg.oog/Tim-Boettcher/) | Insights and ramblings of a deafblind programmer | [Source](https://codeberg.org/Tim-Boettcher/tim-boettcher-online/) | Using tabi? Feel free to create a PR and add your site to this list. From 3252454e878fcc358f9b28aa5c7ee4411523a90b Mon Sep 17 00:00:00 2001 From: Almost-Senseless-Coder <109462027+Almost-Senseless-Coder@users.noreply.github.com> Date: Tue, 3 Oct 2023 15:33:42 +0200 Subject: [PATCH 2/5] Fix typo in repo URL --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f9980391d..eb2fd4875 100644 --- a/README.md +++ b/README.md @@ -143,7 +143,7 @@ To learn more about multilingual support, see the [Frequently Asked Questions](h | [seadve.github.io](https://seadve.github.io/) | Dave Patrick Caberto ([SeaDve](https://github.com/SeaDve/)) | Personal blog and portfolio with custom CSS | [Source](https://github.com/SeaDve/seadve.github.io) | | [donovan.is](https://donovan.is) | [Donovan Glover](https://github.com/donovanglover) | Linux, Rust, and Full Stack Web Development | [Source](https://github.com/donovanglover/donovan.is) | | [mikufan.page](https://mikufan.page) | [Nadia](https://github.com/nyadiia) | Personal blog | [Source](https://github.com/nyadiia/mikufan.page) | -| [tim-boettcher.online](https://tim-boettcher.online/) | [Tim Böttcher](https://codeberg.oog/Tim-Boettcher/) | Insights and ramblings of a deafblind programmer | [Source](https://codeberg.org/Tim-Boettcher/tim-boettcher-online/) | +| [tim-boettcher.online](https://tim-boettcher.online/) | [Tim Böttcher](https://codeberg.org/Tim-Boettcher/) | Insights and ramblings of a deafblind programmer | [Source](https://codeberg.org/Tim-Boettcher/tim-boettcher-online/) | Using tabi? Feel free to create a PR and add your site to this list. From 9587da0139bdaade1141ab9bd90664b58232d3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20B=C3=B6ttcher?= Date: Wed, 4 Oct 2023 09:50:02 +0200 Subject: [PATCH 3/5] Corrected i18n of dark mode toggle aria-label --- static/js/themeSwitcher.js | 1 - templates/partials/theme_switcher.html | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/static/js/themeSwitcher.js b/static/js/themeSwitcher.js index 608a6a98d..0cff465eb 100644 --- a/static/js/themeSwitcher.js +++ b/static/js/themeSwitcher.js @@ -32,7 +32,6 @@ function switchTheme() { // Initialize the theme switcher button. themeSwitcher.addEventListener("click", switchTheme, false); themeSwitcher.setAttribute("role", "button"); -themeSwitcher.setAttribute("aria-label", "Toggle dark mode"); let togglePressed = currentTheme === "dark" ? "true" : "false"; themeSwitcher.setAttribute("aria-pressed", togglePressed); diff --git a/templates/partials/theme_switcher.html b/templates/partials/theme_switcher.html index 784b84838..b87bfff79 100644 --- a/templates/partials/theme_switcher.html +++ b/templates/partials/theme_switcher.html @@ -6,7 +6,7 @@ {%- set combined_mode_str = dark_str ~ "/" ~ light_str -%} {%- set title_label = toggle_str | replace(from="$MODE", to=combined_mode_str) -%} - {%- set aria_label = 'Toggle ' ~ dark_str ~ ' mode' -%} + {%- set aria_label = toggle_str | replace(from="$MODE", to=dark_str) -%}
Date: Wed, 4 Oct 2023 10:11:05 +0200 Subject: [PATCH 4/5] Added minified version of the new JS --- static/js/themeSwitcher.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/themeSwitcher.min.js b/static/js/themeSwitcher.min.js index bb57a19da..eb3798435 100644 --- a/static/js/themeSwitcher.min.js +++ b/static/js/themeSwitcher.min.js @@ -1 +1 @@ -const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e);var r="dark"===(currentTheme=e)?"true":"false",r=(themeSwitcher.setAttribute("aria-pressed",r),t&&localStorage.setItem("theme",e),new CustomEvent("themeChanged",{detail:{theme:e}}));window.dispatchEvent(r)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),themeSwitcher.setAttribute("role","button"),themeSwitcher.setAttribute("aria-label","Toggle dark mode");let togglePressed="dark"===currentTheme?"true":"false";themeSwitcher.setAttribute("aria-pressed",togglePressed),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")}); +// Get the theme switcher button element.const themeSwitcher = document.querySelector(".theme-switcher");// Retrieve theme from either the localStorage or the data-theme attribute on the document element.let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme');// Function to set themefunction setTheme(theme, saveToLocalStorage = false) { document.documentElement.setAttribute("data-theme", theme); currentTheme = theme; let togglePressed = theme === "dark" ? "true" : "false"; themeSwitcher.setAttribute("aria-pressed", togglePressed); if (saveToLocalStorage) { localStorage.setItem("theme", theme); } // Dispatch a custom event for comment systems. const event = new CustomEvent("themeChanged", { detail: { theme: theme } }); window.dispatchEvent(event);}// Function to switch between dark and light themes.function switchTheme() { // Set the new theme based on the current theme. const newTheme = currentTheme === "dark" ? "light" : "dark"; setTheme(newTheme, true); // Save the theme to localStorage when the user changes it.}// Initialize the theme switcher button.themeSwitcher.addEventListener("click", switchTheme, false);themeSwitcher.setAttribute("role", "button");let togglePressed = currentTheme === "dark" ? "true" : "false";themeSwitcher.setAttribute("aria-pressed", togglePressed);// Update the theme based on system preference if the user hasn't manually changed the theme.window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { const newTheme = e.matches ? "dark" : "light"; setTheme(newTheme);}); \ No newline at end of file From 25801f38d4dedfe5ba8da9b53eb69d42cd3299c1 Mon Sep 17 00:00:00 2001 From: welpo Date: Wed, 4 Oct 2023 12:39:50 +0200 Subject: [PATCH 5/5] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20perf(theme-switcher):?= =?UTF-8?q?=20further=20minify=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/js/themeSwitcher.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/themeSwitcher.min.js b/static/js/themeSwitcher.min.js index eb3798435..63a311e91 100644 --- a/static/js/themeSwitcher.min.js +++ b/static/js/themeSwitcher.min.js @@ -1 +1 @@ -// Get the theme switcher button element.const themeSwitcher = document.querySelector(".theme-switcher");// Retrieve theme from either the localStorage or the data-theme attribute on the document element.let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme');// Function to set themefunction setTheme(theme, saveToLocalStorage = false) { document.documentElement.setAttribute("data-theme", theme); currentTheme = theme; let togglePressed = theme === "dark" ? "true" : "false"; themeSwitcher.setAttribute("aria-pressed", togglePressed); if (saveToLocalStorage) { localStorage.setItem("theme", theme); } // Dispatch a custom event for comment systems. const event = new CustomEvent("themeChanged", { detail: { theme: theme } }); window.dispatchEvent(event);}// Function to switch between dark and light themes.function switchTheme() { // Set the new theme based on the current theme. const newTheme = currentTheme === "dark" ? "light" : "dark"; setTheme(newTheme, true); // Save the theme to localStorage when the user changes it.}// Initialize the theme switcher button.themeSwitcher.addEventListener("click", switchTheme, false);themeSwitcher.setAttribute("role", "button");let togglePressed = currentTheme === "dark" ? "true" : "false";themeSwitcher.setAttribute("aria-pressed", togglePressed);// Update the theme based on system preference if the user hasn't manually changed the theme.window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { const newTheme = e.matches ? "dark" : "light"; setTheme(newTheme);}); \ No newline at end of file +const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e;let r="dark"===e?"true":"false";themeSwitcher.setAttribute("aria-pressed",r),t&&localStorage.setItem("theme",e);const h=new CustomEvent("themeChanged",{detail:{theme:e}});window.dispatchEvent(h)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),themeSwitcher.setAttribute("role","button");let togglePressed="dark"===currentTheme?"true":"false";themeSwitcher.setAttribute("aria-pressed",togglePressed),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(e=>{setTheme(e.matches?"dark":"light")}));