Custom components

book.toml

@@ -83,11 +83,21 @@ line-numbers = true
 [output.exerciser]
 output-directory = "comprehensive-rust-exercises"
 
-[output.i18n-helpers]
+[output.i18n]
 default_language = "en"
+translate_all_languages = true
+optional = true
 
-[output.i18n-helpers.languages]
+[output.i18n.languages]
 "en" = "English"
 "es" = "Spanish (Español)"
 "ko" = "Korean (한국어)"
-"pt-BR" = "Brazilian Portuguese (Português do Brasil)"
+"pt-BR" = "Brazilian Portuguese (Português do Brasil)"
+
+[output.tera-backend]
+after = "html"
+components = [
+    { name = "Macros", path = "src/components/macros.html" },
+    { name = "Included", path = "src/components/include_language_picker.html" },
+    { name = "LanguagePicker", path = "src/components/language_picker.html", dependencies = ["Included", "Macros"] },
+]

src/components/include_language_picker.html

@@ -0,0 +1 @@
+Language: 

src/components/language_picker.html

@@ -0,0 +1,39 @@
+{% import "Macros" as macros %}
+<button id="language-toggle{{ counter }}" class="icon-button" type="button"
+    title="Change language" aria-label="Change language"
+    aria-haspopup="true" aria-expanded="false"
+    aria-controls="language-list{{ counter }}">
+    <i class="fa fa-globe"></i>
+</button>
+<ul id="language-list{{ counter }}" class="theme-popup" aria-label="Languages"
+    role="menu" style="left: auto; right: 10px;">
+    {% for identifier, language_name in get_context(key="output.i18n.languages") %}
+    <li role="none">
+        <a id="{{ identifier }}"
+            href="{{ macros::get_rendered_path(identifier=identifier) }}"
+            style="color: inherit;">
+            <button role="menuitem" class="theme {% if identifier == language %} theme-selected {% endif %}">
+                {% include "Included" %} {{ language_name }}
+            </button>
+        </a>
+    </li>
+    {% endfor %}
+</ul>
+
+<script>
+    let langToggle = document.getElementById("language-toggle{{ counter }}");
+    let langList = document.getElementById("language-list{{ counter }}");
+    {% raw %}
+    langToggle.addEventListener("click", (event) => {{
+        langList.style.display = langList.style.display == "block" ? "none" : "block";
+    }});
+    {% endraw %}
+</script>
+
+<style>
+    [dir=rtl] #language-list{{ counter }} {% raw %} {
+        left: 10px;
+        right: auto;
+    }
+    {% endraw %}
+</style>

src/components/macros.html

@@ -0,0 +1,3 @@
+{% macro get_rendered_path(identifier) %}
+{% if identifier != get_context(key="output.i18n.default_language") %}/{{ identifier }}{% endif %}{{ strip_prefix(s=path, prefix=book_dir ~ "/html") }}
+{% endmacro get_rendered_path %}

theme/head.hbs

@@ -8,7 +8,7 @@
   gtag('js', new Date());
   gtag('config', 'G-ZN78TEJMRW');
 </script>
-
+ 
 {{! Move to template code after fixing this issue:
     https://github.com/google/mdbook-i18n-helpers/issues/70 }}
 <script>