feat: add multilingual mode support (#241)v0.24.0

BREAKING CHANGE:  Layout file renamed ´layouts/partials/page-footer.html → layouts/partials/menu-nextprev.html`. If you use overrides, you might need to change the filenames as well.

6 files changed, 59 insertions, 24 deletions

diff --git a/src/icons/language.svg b/src/icons/language.svg
new file mode 100644
index 0000000..15a4de1
--- /dev/null
+++ b/src/icons/language.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
+<title>language</title>
+<path d="M20.112 16.826h4.732q0.394-1.84 0.394-2.826t-0.394-2.826h-4.732q0.197 1.38 0.197 2.826t-0.197 2.826zM17.615 24.582q1.643-0.526 3.418-2.005t2.695-2.991h-4.141q-0.657 2.629-1.972 4.995zM17.286 16.826q0.197-1.38 0.197-2.826t-0.197-2.826h-6.573q-0.197 1.38-0.197 2.826t0.197 2.826h6.573zM14 25.173q1.84-2.695 2.695-5.587h-5.39q0.854 2.892 2.695 5.587zM8.413 8.413q0.789-2.826 1.972-4.995-1.643 0.526-3.451 2.005t-2.662 2.991h4.141zM4.272 19.587q0.854 1.512 2.662 2.991t3.451 2.005q-1.315-2.366-1.972-4.995h-4.141zM3.155 16.826h4.732q-0.197-1.38-0.197-2.826t0.197-2.826h-4.732q-0.394 1.84-0.394 2.826t0.394 2.826zM14 2.826q-1.84 2.695-2.695 5.587h5.39q-0.854-2.892-2.695-5.587zM23.727 8.413q-0.92-1.512-2.695-2.991t-3.418-2.005q1.183 2.169 1.972 4.995h4.141zM14 0q5.784 0 9.892 4.108t4.108 9.892-4.108 9.892-9.892 4.108-9.892-4.108-4.108-9.892 4.108-9.892 9.892-4.108z"></path>
+</svg>
diff --git a/src/js/search.js b/src/js/search.js
index 221ea04..9fe6921 100644
--- a/src/js/search.js
+++ b/src/js/search.js
@@ -6,6 +6,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
   const input = document.querySelector("#gdoc-search-input")
   const results = document.querySelector("#gdoc-search-results")
   const basePath = urlPath(input ? input.dataset.siteBaseUrl : "")
+  const lang = input ? input.dataset.siteLang : ""
 
   const configSchema = {
     type: "object",
@@ -26,7 +27,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
   if (!input) return
 
-  getJson(combineURLs(basePath, "/search/config.min.json"), function (searchConfig) {
+  getJson(combineURLs(basePath, "/search/" + lang + ".config.min.json"), function (searchConfig) {
     const validationResult = validator.validate(searchConfig)
 
     if (!validationResult.valid)
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 44a228b..18ea19a 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -204,7 +204,7 @@ img {
 
 .gdoc-menu-header {
   &__items {
-    display: inline-block;
+    display: flex;
 
     > span {
       margin-left: $padding-8;
@@ -287,7 +287,7 @@ img {
     & ~ label {
       cursor: pointer;
 
-      .icon {
+      .icon.toggle {
         font-size: $font-size-12;
       }
     }
@@ -323,7 +323,8 @@ img {
 }
 
 .gdoc-nav__entry,
-.gdoc-search__entry {
+.gdoc-search__entry,
+.gdoc-language__entry {
   flex: 1;
   color: var(--body-font-color);
 
@@ -338,8 +339,21 @@ img {
   }
 }
 
+.gdoc-search__list,
+.gdoc-language__list {
+  background: var(--body-background);
+  border-radius: $border-radius;
+  box-shadow: 0 1px 3px 0 var(--accent-color), 0 1px 2px 0 var(--accent-color-lite);
+  position: absolute;
+  margin: 0;
+  padding: $padding-8 !important;
+  list-style: none;
+  top: calc(100% + #{$padding-8});
+  z-index: 2;
+}
+
 .gdoc-page {
-  min-width: $body-min-width;
+  min-width: calc($body-min-width - $padding-16 * 2);
   flex-grow: 1;
   padding: $padding-16 0;
 
@@ -594,17 +608,8 @@ img {
 
   &__list {
     visibility: hidden;
-    background: var(--body-background);
-    border-radius: $border-radius;
-    box-shadow: 0 1px 3px 0 var(--accent-color), 0 1px 2px 0 var(--accent-color-lite);
-    position: absolute;
-    margin: 0;
-    padding: $padding-8;
-    list-style: none;
     left: 0;
-    top: calc(100% + #{$padding-8});
     width: 100%;
-    z-index: 2;
 
     ul {
       list-style: none;
@@ -635,6 +640,33 @@ img {
   }
 }
 
+.gdoc-language {
+  &__selector {
+    position: relative;
+    list-style: none;
+    user-select: none;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+
+    &:focus,
+    &:focus-within,
+    &:active {
+      .gdoc-language__list {
+        display: block;
+      }
+    }
+  }
+
+  &__list {
+    display: none;
+    right: 0;
+    width: auto;
+    white-space: nowrap;
+  }
+}
+
 .gdoc-error {
   padding: $padding-16 * 6 $padding-16;
   margin: 0 auto;
diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss
index 0e2c2a7..843bb9e 100644
--- a/src/sass/_defaults.scss
+++ b/src/sass/_defaults.scss
@@ -56,10 +56,7 @@ $main-color: rgba(65, 134, 201, 1) !default;
 $second-color: rgba(47, 51, 62, 1) !default;
 $mark-color: rgba(255, 171, 0, 1) !default;
 
-$body-background-dark: mix(
-  invert($body-background, 75%),
-  $second-color
-) !default;
+$body-background-dark: mix(invert($body-background, 75%), $second-color) !default;
 $link-color-dark: rgba(110, 168, 212, 1) !default;
 $link-color-visited-dark: rgba(186, 142, 240) !default;
 
@@ -76,5 +73,5 @@ $hint-colors: (
   info: rgba(0, 145, 234, 1),
   ok: rgba(0, 200, 83, 1),
   warning: rgba(255, 171, 0, 1),
-  danger: rgba(213, 0, 0, 1),
+  danger: rgba(213, 0, 0, 1)
 ) !default;
diff --git a/src/sass/_fonts.scss b/src/sass/_fonts.scss
index 93c589c..f202b13 100644
--- a/src/sass/_fonts.scss
+++ b/src/sass/_fonts.scss
@@ -45,8 +45,7 @@
 
 @font-face {
   font-family: "Metropolis";
-  src: url("fonts/Metropolis.woff2") format("woff2"),
-    url("fonts/Metropolis.woff") format("woff");
+  src: url("fonts/Metropolis.woff2") format("woff2"), url("fonts/Metropolis.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss
index 60ab22b..3d33e77 100644
--- a/src/sass/_mobile.scss
+++ b/src/sass/_mobile.scss
@@ -17,6 +17,7 @@
 
   .gdoc-brand {
     font-size: $font-size-24;
+    line-height: $font-size-24;
 
     &__img {
       display: none;
@@ -30,7 +31,7 @@
 
     &__control,
     &__home {
-      display: inline-block;
+      display: flex;
     }
   }
 
@@ -86,13 +87,13 @@
   }
 
   #menu-header-control:checked ~ .gdoc-header {
-    .gdoc-brand__title {
+    .gdoc-brand {
       display: none;
     }
 
     .gdoc-menu-header {
       &__items {
-        display: inline-block;
+        display: flex;
       }
 
       &__control {