From 2685347f26d50c263b547ac8896527a5603cacec Mon Sep 17 00:00:00 2001 From: cengizcmataraci Date: Sun, 24 Nov 2024 02:38:37 +0300 Subject: [PATCH 1/2] feat: add language picker --- _data/languages.yml | 34 ++++++++++++++++++++++++++++++ _includes/header/header-de.html | 9 +++++--- _includes/header/header-en.html | 23 +++++++++++--------- _includes/header/header-es.html | 11 ++++++---- _includes/header/header-fr.html | 9 +++++--- _includes/header/header-id.html | 4 +++- _includes/header/header-it.html | 9 +++++--- _includes/header/header-ja.html | 11 ++++++---- _includes/header/header-ko.html | 11 ++++++---- _includes/header/header-pt-br.html | 9 +++++--- _includes/header/header-ru.html | 9 +++++--- _includes/header/header-sk.html | 7 ++++-- _includes/header/header-th.html | 9 +++++--- _includes/header/header-tr.html | 9 +++++--- _includes/header/header-uk.html | 9 +++++--- _includes/header/header-uz.html | 15 +++++++------ _includes/header/header-zh-cn.html | 9 +++++--- _includes/header/header-zh-tw.html | 9 +++++--- _includes/language-picker.html | 28 ++++++++++++++++++++++++ css/style.css | 27 +++++++++++++++--------- js/app.js | 17 +++++++++++++-- 21 files changed, 205 insertions(+), 73 deletions(-) create mode 100644 _data/languages.yml create mode 100644 _includes/language-picker.html diff --git a/_data/languages.yml b/_data/languages.yml new file mode 100644 index 0000000000..2cdb04c252 --- /dev/null +++ b/_data/languages.yml @@ -0,0 +1,34 @@ +- code: en + name: English +- code: fr + name: Français +- code: de + name: Deutsch +- code: es + name: Español +- code: it + name: Italiano +- code: ja + name: 日本語 +- code: ru + name: Русский +- code: zh-cn + name: 中文 (简体) +- code: zh-tw + name: 繁體中文 +- code: ko + name: 한국어 +- code: pt-br + name: Português +- code: sk + name: Slovenčina +- code: uk + name: Українська +- code: uz + name: Oʻzbekcha +- code: tr + name: Türkçe +- code: th + name: ภาษาไทย +- code: id + name: Indonesia \ No newline at end of file diff --git a/_includes/header/header-de.html b/_includes/header/header-de.html index 2c561d176c..aee78ed5a2 100644 --- a/_includes/header/header-de.html +++ b/_includes/header/header-de.html @@ -106,8 +106,11 @@ -
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/header/header-en.html b/_includes/header/header-en.html index 998494eea1..2198f9add5 100644 --- a/_includes/header/header-en.html +++ b/_includes/header/header-en.html @@ -131,20 +131,23 @@ Blog - - -
-
- - -
+ + + +
+
+ + +
+ {% include language-picker.html %} +
\ No newline at end of file diff --git a/_includes/header/header-es.html b/_includes/header/header-es.html index 58e8fec660..f36dee39d3 100644 --- a/_includes/header/header-es.html +++ b/_includes/header/header-es.html @@ -107,8 +107,11 @@ -
- - -
+
+
+ + +
+ {% include language-picker.html %} +
diff --git a/_includes/header/header-fr.html b/_includes/header/header-fr.html index 62c0db4906..a9c5593ab4 100644 --- a/_includes/header/header-fr.html +++ b/_includes/header/header-fr.html @@ -108,8 +108,11 @@ -
- +
+
+ -
+
+ {% include language-picker.html %} +
diff --git a/_includes/header/header-id.html b/_includes/header/header-id.html index a115d6dc5e..538839b17f 100644 --- a/_includes/header/header-id.html +++ b/_includes/header/header-id.html @@ -128,9 +128,11 @@ +
+ {% include language-picker.html %} +
- \ No newline at end of file diff --git a/_includes/header/header-it.html b/_includes/header/header-it.html index db0c91a349..4808e1f21a 100644 --- a/_includes/header/header-it.html +++ b/_includes/header/header-it.html @@ -104,8 +104,11 @@ -
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/header/header-ja.html b/_includes/header/header-ja.html index 1f66383f83..3d6c6d6058 100644 --- a/_includes/header/header-ja.html +++ b/_includes/header/header-ja.html @@ -107,8 +107,11 @@
-
- - -
+
+
+ + +
+ {% include language-picker.html %} +
diff --git a/_includes/header/header-ko.html b/_includes/header/header-ko.html index e7c66fe906..68f41b17a0 100644 --- a/_includes/header/header-ko.html +++ b/_includes/header/header-ko.html @@ -107,8 +107,11 @@ -
- - -
+
+
+ + +
+ {% include language-picker.html %} +
diff --git a/_includes/header/header-pt-br.html b/_includes/header/header-pt-br.html index 62a64faa25..e9897c9dbe 100644 --- a/_includes/header/header-pt-br.html +++ b/_includes/header/header-pt-br.html @@ -107,8 +107,11 @@ -
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/header/header-ru.html b/_includes/header/header-ru.html index 049d217a89..a1c1e927d6 100644 --- a/_includes/header/header-ru.html +++ b/_includes/header/header-ru.html @@ -107,8 +107,11 @@
-
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/header/header-sk.html b/_includes/header/header-sk.html index 772560507f..595e18bf8f 100644 --- a/_includes/header/header-sk.html +++ b/_includes/header/header-sk.html @@ -107,8 +107,11 @@
+
- - + +
+ {% include language-picker.html %} +
diff --git a/_includes/header/header-th.html b/_includes/header/header-th.html index 4fda2d0469..9f3789e5ad 100644 --- a/_includes/header/header-th.html +++ b/_includes/header/header-th.html @@ -119,8 +119,11 @@ -
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/header/header-tr.html b/_includes/header/header-tr.html index db2a4c7dad..cd80c71108 100644 --- a/_includes/header/header-tr.html +++ b/_includes/header/header-tr.html @@ -120,8 +120,11 @@
-
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/header/header-uk.html b/_includes/header/header-uk.html index 26e35847b5..6baf7a9ae5 100644 --- a/_includes/header/header-uk.html +++ b/_includes/header/header-uk.html @@ -105,8 +105,11 @@
-
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/header/header-uz.html b/_includes/header/header-uz.html index 1cd4b4203d..9e052c1fba 100644 --- a/_includes/header/header-uz.html +++ b/_includes/header/header-uz.html @@ -13,7 +13,7 @@ +
-
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/header/header-zh-cn.html b/_includes/header/header-zh-cn.html index 4b74a7ba22..c3a43495e0 100644 --- a/_includes/header/header-zh-cn.html +++ b/_includes/header/header-zh-cn.html @@ -107,8 +107,11 @@
-
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/header/header-zh-tw.html b/_includes/header/header-zh-tw.html index f1326c4062..e170d44115 100644 --- a/_includes/header/header-zh-tw.html +++ b/_includes/header/header-zh-tw.html @@ -107,8 +107,11 @@
-
- - +
+
+ + +
+ {% include language-picker.html %}
diff --git a/_includes/language-picker.html b/_includes/language-picker.html new file mode 100644 index 0000000000..dece43cddd --- /dev/null +++ b/_includes/language-picker.html @@ -0,0 +1,28 @@ + diff --git a/css/style.css b/css/style.css index 5b1b3b6d28..90bc5a45fa 100644 --- a/css/style.css +++ b/css/style.css @@ -230,7 +230,7 @@ li code { *::-webkit-scrollbar-thumb:active { background-color: #616161; -} +} /* links */ @@ -316,6 +316,12 @@ a { margin: 3px 0; } +.header-right { + display: flex; + align-items: center; + gap: 20px; +} + header { position: fixed; top: 0; @@ -326,7 +332,7 @@ header { display: flex; align-items: center; justify-content: space-between; - padding-inline: 45px; + padding-inline: 25px; z-index: 100; border-bottom: 1px solid #ddd; } @@ -449,7 +455,7 @@ html[xmlns] .clearfix { width: 100%; margin-top: 5px; margin-bottom: 20px; -} +} /* doc specific */ @@ -627,7 +633,7 @@ footer { #footer-copyright { display: flex; - flex-direction: column; + flex-direction: column; justify-content: center; gap: 20px; } @@ -709,7 +715,7 @@ footer { margin: auto; box-shadow: 0px 1px 3px #00000026; z-index: 1000; - min-width: 230px; + min-width: max-content; width: fit-content; background-color: #fcfcfa; border: 1px solid #b2b2b2; @@ -1100,7 +1106,7 @@ h2 a { #blog-doc { margin: 0 10px; } -#blog-doc:has(> h1#express-blog), +#blog-doc:has(> h1#express-blog), #blog-doc:has(> h1#write-a-blog-post) { min-height: 300px; } @@ -1125,7 +1131,7 @@ h2 a { justify-content: space-between; box-shadow: 2px 3px #E0E0E0; border-radius: 5px; - border: 1px solid #808080; + border: 1px solid #808080; transition: 0.1s; } .blog-post:hover { @@ -1181,7 +1187,7 @@ h2 a { margin-right: 0; padding-right: 10px; } - + #blog-doc .blog-details + p > img { @@ -1198,7 +1204,7 @@ h2 a { } .blog-tags { margin-bottom: 20px; - } + } .blog-title { font-size: 1.3rem; margin-bottom: 20px; @@ -1207,7 +1213,7 @@ h2 a { .blog-post .blog-details { display: flex; flex-direction: row; - margin-left: 1rem; + margin-left: 1rem; font-size: 90%; } .blog-post .blog-details div:first-child { @@ -1358,6 +1364,7 @@ blockquote { overflow-y: auto; overflow-x: hidden; transform: none; + cursor: pointer; } .submenu-content li > a { diff --git a/js/app.js b/js/app.js index 17b086e694..4bf7babc16 100644 --- a/js/app.js +++ b/js/app.js @@ -54,6 +54,19 @@ $(function(){ $('#fork').html(editLink); } + if (document.readyState !== 'loading') { + const languageElement = document.getElementById('languageData'); + const languagesData = languageElement ? JSON.parse(languageElement.dataset.languages) : []; + + const langDisplay = document.getElementById('current-lang'); + + if (langDisplay) { + const currentLanguage = window.location.pathname.split('/')[1]; + const matchedLang = languagesData.find(lang => lang.code === currentLanguage); + langDisplay.textContent = matchedLang ? matchedLang.name : 'English'; + } + } + // code highlight $('code.language-js').each(function(){ @@ -139,7 +152,7 @@ $(function(){ }) $('#tags-side-menu li').on('click', function() { - // Remove prev 'active's + // Remove prev 'active's $(this).next().siblings().removeClass('active'); $(this).next().addClass('active') }) @@ -185,4 +198,4 @@ function readCookie(name) { function eraseCookie(name) { createCookie(name, "", -1); -} +} \ No newline at end of file From 99a3c5afc07754edfa57fe179fea00e1e5a04c41 Mon Sep 17 00:00:00 2001 From: cengizcmataraci Date: Sun, 22 Dec 2024 15:50:19 +0300 Subject: [PATCH 2/2] feat: add language picker for mobile --- _includes/footer/footer-en.html | 10 +--- _includes/footer/footer-id.html | 10 +--- _includes/header/header-de.html | 1 + _includes/header/header-en.html | 1 + _includes/header/header-es.html | 2 + _includes/header/header-fr.html | 1 + _includes/header/header-id.html | 1 + _includes/header/header-it.html | 1 + _includes/header/header-ja.html | 1 + _includes/header/header-ko.html | 1 + _includes/header/header-pt-br.html | 1 + _includes/header/header-ru.html | 1 + _includes/header/header-sk.html | 1 + _includes/header/header-th.html | 1 + _includes/header/header-tr.html | 1 + _includes/header/header-uk.html | 1 + _includes/header/header-uz.html | 1 + _includes/header/header-zh-cn.html | 1 + _includes/header/header-zh-tw.html | 1 + _includes/language-picker-mobile.html | 18 +++++++ css/style.css | 32 ++++++++++++ js/menu.js | 70 +++++++++++++++++++++------ 22 files changed, 128 insertions(+), 30 deletions(-) create mode 100644 _includes/language-picker-mobile.html diff --git a/_includes/footer/footer-en.html b/_includes/footer/footer-en.html index d40c068f63..f6005566e5 100755 --- a/_includes/footer/footer-en.html +++ b/_includes/footer/footer-en.html @@ -1,21 +1,15 @@
{% include language-picker.html %} + {% include language-picker-mobile.html %} + diff --git a/_includes/header/header-fr.html b/_includes/header/header-fr.html index a9c5593ab4..4cb4eda51f 100644 --- a/_includes/header/header-fr.html +++ b/_includes/header/header-fr.html @@ -114,5 +114,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-id.html b/_includes/header/header-id.html index 538839b17f..8f42568015 100644 --- a/_includes/header/header-id.html +++ b/_includes/header/header-id.html @@ -134,5 +134,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-it.html b/_includes/header/header-it.html index 4808e1f21a..041f87b82d 100644 --- a/_includes/header/header-it.html +++ b/_includes/header/header-it.html @@ -110,5 +110,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-ja.html b/_includes/header/header-ja.html index 3d6c6d6058..06890dfa91 100644 --- a/_includes/header/header-ja.html +++ b/_includes/header/header-ja.html @@ -113,5 +113,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-ko.html b/_includes/header/header-ko.html index 68f41b17a0..2f1a727a0e 100644 --- a/_includes/header/header-ko.html +++ b/_includes/header/header-ko.html @@ -113,5 +113,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-pt-br.html b/_includes/header/header-pt-br.html index e9897c9dbe..24be6406f2 100644 --- a/_includes/header/header-pt-br.html +++ b/_includes/header/header-pt-br.html @@ -113,5 +113,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-ru.html b/_includes/header/header-ru.html index a1c1e927d6..3b8c47b694 100644 --- a/_includes/header/header-ru.html +++ b/_includes/header/header-ru.html @@ -113,5 +113,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-sk.html b/_includes/header/header-sk.html index 595e18bf8f..5981198a8f 100644 --- a/_includes/header/header-sk.html +++ b/_includes/header/header-sk.html @@ -113,5 +113,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-th.html b/_includes/header/header-th.html index 9f3789e5ad..3254bea502 100644 --- a/_includes/header/header-th.html +++ b/_includes/header/header-th.html @@ -125,5 +125,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-tr.html b/_includes/header/header-tr.html index cd80c71108..98aebc909c 100644 --- a/_includes/header/header-tr.html +++ b/_includes/header/header-tr.html @@ -126,5 +126,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-uk.html b/_includes/header/header-uk.html index 6baf7a9ae5..46c70ede49 100644 --- a/_includes/header/header-uk.html +++ b/_includes/header/header-uk.html @@ -111,5 +111,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-uz.html b/_includes/header/header-uz.html index 9e052c1fba..905261b795 100644 --- a/_includes/header/header-uz.html +++ b/_includes/header/header-uz.html @@ -113,5 +113,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-zh-cn.html b/_includes/header/header-zh-cn.html index c3a43495e0..4c7f8e0d7d 100644 --- a/_includes/header/header-zh-cn.html +++ b/_includes/header/header-zh-cn.html @@ -113,5 +113,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/header/header-zh-tw.html b/_includes/header/header-zh-tw.html index e170d44115..3d66948fb5 100644 --- a/_includes/header/header-zh-tw.html +++ b/_includes/header/header-zh-tw.html @@ -113,5 +113,6 @@ {% include language-picker.html %} + {% include language-picker-mobile.html %} diff --git a/_includes/language-picker-mobile.html b/_includes/language-picker-mobile.html new file mode 100644 index 0000000000..d5232eb06c --- /dev/null +++ b/_includes/language-picker-mobile.html @@ -0,0 +1,18 @@ +
+
+
+
+ +
\ No newline at end of file diff --git a/css/style.css b/css/style.css index 90bc5a45fa..a37661abc8 100644 --- a/css/style.css +++ b/css/style.css @@ -757,6 +757,10 @@ footer { text-decoration: none; } +#language-picker-menu { + display: none; +} + /* secondary menu */ #menu, @@ -992,6 +996,7 @@ h2 a { #logo { position: static; width: 100%; + margin-left: 60px; } #logo a { @@ -1032,6 +1037,33 @@ h2 a { #doc-langs { font-size: 11px; } + + .header-right { + display: flex; + align-items: center; + gap: 8px; + margin-right: -10px; + } + + #language-picker-menu #navmenu>li:first-child { + display: flex !important; + } + + #language-picker-menu #navmenu { + max-height: 70vh; + overflow-y: auto; + scrollbar-width: thin; + text-align: center; + } + + #language-picker-menu { + display: block; + position: absolute; + top: 0; + right: 0; + width: 100%; + z-index: 1000; + } } diff --git a/js/menu.js b/js/menu.js index f2bf0d633c..6ac26f02b7 100644 --- a/js/menu.js +++ b/js/menu.js @@ -31,7 +31,7 @@ for (const el of itemsMenu) { el.classList.add("open"); } }); - + el.addEventListener("mouseleave", () => { if (!isSmallScreen) { el.classList.remove("open"); @@ -39,38 +39,80 @@ for (const el of itemsMenu) { }); } -// Mobile Menu +// Mobile Menu and Language Picker const linkItemsMenu = document.querySelectorAll(".submenu > a"); +const languageItems = document.querySelectorAll("#language-picker-menu > #navbar > #navmenu > .submenu > a"); +const languagePickerMenu = document.querySelector("#language-picker-menu > #navbar > #navmenu"); const menu = document.querySelector("#navmenu"); const overlay = document.querySelector("#overlay"); +const navButton = document.querySelector("#nav-button"); +const languagePickerButton = document.querySelector("#language-picker-button"); for (const el of linkItemsMenu) { el.addEventListener("click", (e) => { if (el.classList.contains("open")) { el.classList.remove("open"); - } + } if (isSmallScreen || 'ontouchstart' in document.documentElement) { e.preventDefault(); } }); + +} + +for (const el of languageItems) { + el.addEventListener("click", (e) => { + const href = el.getAttribute("href"); + + if (href && href !== "#") { + languagePickerMenu?.classList.remove("opens"); + overlay?.classList.remove("blurs"); + document.body.classList.remove("no-scroll"); + + window.location.href = href; + } + }); } -document.querySelector("#nav-button")?.addEventListener("click", () => { - menu?.classList.toggle("opens"); - overlay?.classList.toggle("blurs"); - document.body.classList.toggle("no-scroll") +navButton?.addEventListener("click", () => { + const isLanguageMenuOpen = languagePickerMenu?.classList.contains("opens"); + + if (isLanguageMenuOpen) { + languagePickerMenu?.classList.remove("opens"); + menu?.classList.toggle("opens"); + } else { + menu?.classList.toggle("opens"); + overlay?.classList.toggle("blurs"); + document.body.classList.toggle("no-scroll"); + } +}); + +languagePickerButton?.addEventListener("click", () => { + const isMenuOpen = menu?.classList.contains("opens"); + + if (isMenuOpen) { + menu?.classList.remove("opens"); + languagePickerMenu?.classList.toggle("opens"); + } else { + languagePickerMenu?.classList.toggle("opens"); + overlay?.classList.toggle("blurs"); + document.body.classList.toggle("no-scroll"); + } }); -// close mobile menu overlay?.addEventListener("click", () => { - menu?.classList.remove("opens"); - overlay?.classList.remove("blurs"); - document.body.classList.remove("no-scroll") + if (menu?.classList.contains("opens")) { + menu.classList.remove("opens"); + } + if (languagePickerMenu?.classList.contains("opens")) { + languagePickerMenu.classList.remove("opens"); + } + overlay.classList.remove("blurs"); + document.body.classList.remove("no-scroll"); }); -// hilight the menu item of the current page document - .querySelector(`.submenu-content a[href="{document.location.pathname}"]`) - ?.classList.add("current"); + .querySelector(`.submenu-content a[href="${document.location.pathname}"]`) + ?.classList.add("current"); \ No newline at end of file