sofia/website
Archived
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity

Add language detection

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/_includes/simple_page.njk
View file

@ -9,8 +9,9 @@
<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/comments.css" type="text/css">
<script src="/assets/scripts/detectlang.js" defer></script>
{% if load_comments_script %}
<script src="/scripts/dompurify.js"></script>
<script src="/assets/scripts/dompurify.js"></script>
{% endif %}
</head>
<body>

42
static/assets/scripts/detectlang.js Normal file
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")
}

26
static/css/app.css
View file

@ -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;
}