Auto-detect language

This commit is contained in:
Alexander Minkin 2022-10-18 23:16:29 +03:00
parent bc37c5fc88
commit 5dd0169c6b
Signed by: WerySkok
GPG Key ID: 88E9A2F3AFE44C30
5 changed files with 163 additions and 78 deletions

View File

@ -22,8 +22,8 @@
<i class="fas fa-globe"></i>&nbsp;English
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/">Русский</a></li>
<li><a class="dropdown-item active" href="/en/">English</a></li>
<li><a class="dropdown-item" onclick="usePrefferedLanguage('ru'); return false;" href="/">Русский</a></li>
<li><a class="dropdown-item active" onclick="usePrefferedLanguage('en'); return false;" href="/en/">English</a></li>
</ul>
</li>
</span>

View File

@ -22,8 +22,8 @@
<i class="fas fa-globe"></i>&nbsp;Русский
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item active" href="/">Русский</a></li>
<li><a class="dropdown-item" href="/en/">English</a></li>
<li><a class="dropdown-item active" onclick="usePrefferedLanguage('ru'); return false;" href="/">Русский</a></li>
<li><a class="dropdown-item" onclick="usePrefferedLanguage('en'); return false;" href="/en/">English</a></li>
</ul>
</li>
</span>

View File

@ -1,41 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ page.title }}</title>
<script src="https://kit.fontawesome.com/48d163f212.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://bootswatch.com/5/darkly/bootstrap.min.css" crossorigin="anonymous">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ page.title }}</title>
<script
src="https://kit.fontawesome.com/48d163f212.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://bootswatch.com/5/darkly/bootstrap.min.css"
crossorigin="anonymous"
/>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#ffffff">
{% feed_meta %}
{% seo %}
</head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#2d89ef" />
<meta name="theme-color" content="#ffffff" />
<script src="/assets/scripts/change_language.js"></script>
{% feed_meta %} {% seo %}
</head>
<body class="d-flex flex-column h-100">
{% include header-en.html %}
<main class="flex-shrink-0">
{{ content }}
</main>
{% include footer.html %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
</body>
</html>
<body class="d-flex flex-column h-100">
{% include header-en.html %}
<main class="flex-shrink-0">{{ content }}</main>
{% include footer.html %}
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
</body>
</html>

View File

@ -1,41 +1,63 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ page.title }}</title>
<script src="https://kit.fontawesome.com/48d163f212.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://bootswatch.com/5/darkly/bootstrap.min.css" crossorigin="anonymous">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ page.title }}</title>
<script
src="https://kit.fontawesome.com/48d163f212.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://bootswatch.com/5/darkly/bootstrap.min.css"
crossorigin="anonymous"
/>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#ffffff">
{% feed_meta %}
{% seo %}
</head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#2d89ef" />
<meta name="theme-color" content="#ffffff" />
<script src="/assets/scripts/change_language.js"></script>
{% feed_meta %} {% seo %}
</head>
<body class="d-flex flex-column h-100">
{% include header.html %}
<main class="flex-shrink-0">
{{ content }}
</main>
{% include footer.html %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
</body>
</html>
<body class="d-flex flex-column h-100">
{% include header.html %}
<main class="flex-shrink-0">{{ content }}</main>
{% include footer.html %}
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
</body>
</html>

View File

@ -0,0 +1,41 @@
function usePrefferedLanguage(newLang) {
function changeLanguageTo(language) {
if (document.title.includes('404')) return; // TODO: make an english version of 404
if (document.querySelector('html').lang == language) return;
switch (language) {
case 'en':
location.pathname = `/en${location.pathname}`;
break;
case 'ru':
location.pathname = location.pathname.replace('/en', '');
break;
default:
break;
}
}
function browserPrefferedLanguage() {
if (navigator.languages.includes('ru')) {
return 'ru';
}
return 'en';
}
let prefferedLanguage = localStorage.getItem('prefferedLanguage');
if (newLang) {
localStorage.setItem('prefferedLanguage', newLang);
prefferedLanguage = localStorage.getItem('prefferedLanguage');
}
if (!prefferedLanguage) {
localStorage.setItem('prefferedLanguage', browserPrefferedLanguage());
prefferedLanguage = localStorage.getItem('prefferedLanguage');
}
changeLanguageTo(prefferedLanguage);
}
usePrefferedLanguage();