From 6ec64b6d15f94fc111ac23e369a7589f0271b71d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sof=C3=ADa=20Aritz?= Date: Thu, 20 Apr 2023 23:02:49 +0200 Subject: [PATCH] Add language detection Check `navigator.language` and suggest going to that language's page. This JS file is not required for the page to run, and the notices can easily be disabled using the button that is alongside the notice. The status if the redirect notice is saved in localStorage under the `i18n:no_redirect_notice` key. --- src/_includes/simple_page.njk | 3 ++- static/assets/scripts/detectlang.js | 42 +++++++++++++++++++++++++++++ static/css/app.css | 26 ++++++++++++++++++ 3 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 static/assets/scripts/detectlang.js diff --git a/src/_includes/simple_page.njk b/src/_includes/simple_page.njk index 44f3000..b95306e 100644 --- a/src/_includes/simple_page.njk +++ b/src/_includes/simple_page.njk @@ -9,8 +9,9 @@ + {% if load_comments_script %} - + {% endif %} diff --git a/static/assets/scripts/detectlang.js b/static/assets/scripts/detectlang.js new file mode 100644 index 0000000..46bc48c --- /dev/null +++ b/static/assets/scripts/detectlang.js @@ -0,0 +1,42 @@ +const SPANISH_MESSAGE = "Versión en español" +const SPANISH_BUTTON = "No mostrar esto de nuevo" +const ENGLISH_MESSAGE = "English page" +const ENGLISH_BUTTON = "Do not show me this again" + +if (redirect_notice_enabled()) { + let language = (navigator.language || navigator.userLanguage).split("-")[0] + if (location.pathname.startsWith("/en")) { + if (language === "es") { + add_redirect_notice(location.pathname.replace("/en", ""), SPANISH_MESSAGE, SPANISH_BUTTON) + } + } else if (!["weblog", "recommendations", "projects", "links"].includes(location.pathname.split("/")[1])) { + if (language !== "es") { + add_redirect_notice("/en" + location.pathname, ENGLISH_MESSAGE, ENGLISH_BUTTON) + } + } +} + +function add_redirect_notice(redirect, message, btn_message) { + let main = document.getElementsByTagName("main").item(0) + let div = document.createElement("div") + div.classList.add("redirect-notice") + div.innerHTML = `
${message}: ${redirect}
` + + let button = document.createElement("button") + button.addEventListener("click", () => { + disable_redirect_notice() + location.reload() + }) + button.innerText = btn_message + div.append(button) + + main.prepend(div) +} + +function redirect_notice_enabled() { + return localStorage.getItem("i18n:no_redirect_notice") !== "1" +} + +function disable_redirect_notice() { + localStorage.setItem("i18n:no_redirect_notice", "1") +} diff --git a/static/css/app.css b/static/css/app.css index 8efee7d..97c0f0e 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -31,6 +31,22 @@ code { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); } +button { + color: white; + padding: 3px; + margin: 3px; + + transition: all 150ms; + background-color: #dc3f99; + border: solid 3px; + border-color: #f38cc2 #dc158d #dc158d #f38cc2; +} + +button:hover { + cursor: pointer; + border-color: #d76d9c #ff0088 #ff0088 #d76d9c; +} + hr { color: #bebebe; } @@ -79,6 +95,16 @@ pre { justify-content: center; } +.redirect-notice { + display: flex; + justify-content: space-between; + align-items: center; + border: #d76d9c solid 3px; + padding: 5px; + border-radius: 5px; + background-color: rgba(0, 0, 0, 0.1); +} + main { width: 40vw; }