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.
This commit is contained in:
Sofía Aritz 2023-04-20 23:02:49 +02:00
parent 86f8ae2021
commit 6ec64b6d15
3 changed files with 70 additions and 1 deletions

View file

@ -9,8 +9,9 @@
<link rel="stylesheet" href="/css/app.css" type="text/css"> <link rel="stylesheet" href="/css/app.css" type="text/css">
<link rel="stylesheet" href="/css/navbar.css" type="text/css"> <link rel="stylesheet" href="/css/navbar.css" type="text/css">
<link rel="stylesheet" href="/css/comments.css" type="text/css"> <link rel="stylesheet" href="/css/comments.css" type="text/css">
<script src="/assets/scripts/detectlang.js" defer></script>
{% if load_comments_script %} {% if load_comments_script %}
<script src="/scripts/dompurify.js"></script> <script src="/assets/scripts/dompurify.js"></script>
{% endif %} {% endif %}
</head> </head>
<body> <body>

View file

@ -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 = `<div><span>${message}:</span> <a href="${redirect}">${redirect}</a></div>`
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")
}

View file

@ -31,6 +31,22 @@ code {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 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 { hr {
color: #bebebe; color: #bebebe;
} }
@ -79,6 +95,16 @@ pre {
justify-content: center; 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 { main {
width: 40vw; width: 40vw;
} }