WerySkok/weryskok.ru
1
0
Fork 0
mirror of https://github.com/WerySkok/weryskok.ru.git synced 2025-01-14 11:33:13 +03:00
Code Issues Projects Releases Packages Wiki Activity

Auto-detect language

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

4
_includes/header-en.html
View file

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

4
_includes/header.html
View file

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

96
_layouts/default-en.html
View file

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

96
_layouts/default.html
View file

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

41
assets/scripts/change_language.js Normal file
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();