[DRAFT] Example of what the course would look like with the new renderer

.github/workflows/publish.yml

@@ -41,19 +41,7 @@ jobs:
         run: mdbook build -d book
 
       - name: Zip exercise templates
-        run: cd book/exerciser && zip --recurse-paths ../html/comprehensive-rust-exercises.zip comprehensive-rust-exercises/
-
-      - name: Build all translations
-        run: |
-          for po_lang in ${{ env.LANGUAGES }}; do
-              echo "::group::Building $po_lang translation"
-              MDBOOK_BOOK__LANGUAGE=$po_lang \
-              MDBOOK_OUTPUT__HTML__SITE_URL=/comprehensive-rust/$po_lang/ \
-              mdbook build -d book/$po_lang
-              (cd book/$po_lang/exerciser && zip --recurse-paths ../html/comprehensive-rust-exercises.zip comprehensive-rust-exercises/)
-              mv book/$po_lang/html book/html/$po_lang
-              echo "::endgroup::"
-          done
+        run: cd book && find . -name "exerciser" -type d -exec bash -c 'zip --recurse-paths ./html/$(dirname {})/comprehensive-rust-exercises.zip {}/comprehensive-rust-exercises/' \;
 
       - name: Setup Pages
         uses: actions/configure-pages@v2

book.toml

@@ -29,7 +29,7 @@ class = "bob"
 [output.html]
 curly-quotes = true
 additional-js = ["speaker-notes.js"]
-additional-css = ["svgbob.css", "speaker-notes.css", "language-picker.css"]
+additional-css = ["svgbob.css", "speaker-notes.css"]
 site-url = "/comprehensive-rust/"
 git-repository-url = "https://github.com/google/comprehensive-rust"
 edit-url-template = "https://github.com/google/comprehensive-rust/edit/main/{path}"
@@ -82,3 +82,17 @@ line-numbers = true
 
 [output.exerciser]
 output-directory = "comprehensive-rust-exercises"
+
+[output.i18n]
+default_language = "en"
+translate_all_languages = true
+optional = true
+
+[output.i18n.languages]
+"en" = "English"
+"es" = "Spanish (Español)"
+"ko" = "Korean (한국어)"
+"pt-BR" = "Brazilian Portuguese (Português do Brasil)"
+
+[output.tera-backend]
+template_dir = "src/components"

src/components/LanguagePicker.html

@@ -0,0 +1,41 @@
+{% import "macros.html" as macros %}
+{% set current_language = ctx.config.book.language %}
+<button id="language-toggle" class="icon-button" type="button"
+    title="Change language" aria-label="Change language"
+    aria-haspopup="true" aria-expanded="false"
+    aria-controls="language-list">
+    <i class="fa fa-globe"></i>
+</button> 
+<ul id="language-list" class="theme-popup" aria-label="Languages"
+    role="menu" style="left: auto; right: 10px; display: none;">
+    {% for identifier, language_name in ctx.config.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 == current_language %} theme-selected {% endif %}">
+                {{ language_name }}
+            </button>
+        </a> 
+    </li>
+    {% endfor %}
+</ul>
+
+<script>
+    let langToggle = document.getElementById("language-toggle");
+    let langList = document.getElementById("language-list");
+    {% raw %} 
+    langToggle.addEventListener("click", (event) => {
+        langList.style.display = langList.style.display == "block" ? "none" : "block";
+    });
+    {% endraw %}
+</script>
+
+
+<style>
+    [dir=rtl] #language-list {% raw %} {
+        left: 10px;
+        right: auto;
+    }
+    {% endraw %}
+</style>

src/components/include_language_picker.html

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

src/components/macros.html

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

theme/index.hbs

@@ -165,59 +165,11 @@
                     </div>
 
                     <h1 class="menu-title">{{ book_title }}</h1>
-
                     <div class="right-buttons">
-                        <button id="language-toggle" class="icon-button" type="button"
-                                title="Change language" aria-label="Change language"
-                                aria-haspopup="true" aria-expanded="false"
-                                aria-controls="language-list">
-                            <i class="fa fa-globe"></i>
-                        </button>
-                        <ul id="language-list" class="theme-popup" aria-label="Languages" role="menu">
-                          <li role="none"><button role="menuitem" class="theme">
-                              <a id="en">English</a>
-                          </button></li>
-                          <li role="none"><button role="menuitem" class="theme">
-                              <a id="pt-BR">Brazilian Portuguese (Português do Brasil)</a>
-                          </button></li>
-                          <li role="none"><button role="menuitem" class="theme">
-                              <a id="ko">Korean (한국어)</a>
-                          </button></li>
-                          <li role="none"><button role="menuitem" class="theme">
-                              <a id="es">Spanish (Español)</a>
-                          </button></li>
-                        </ul>
-
-                        <script>
-                          let langToggle = document.getElementById("language-toggle");
-                          let langList = document.getElementById("language-list");
-                          langToggle.addEventListener("click", (event) => {
-                              langList.style.display = langList.style.display == "block" ? "none" : "block";
-                          });
-                          let selectedLang = document.getElementById("{{ language }}");
-                          if (selectedLang) {
-                              selectedLang.parentNode.classList.add("theme-selected");
-                          }
-
-                          // The path to the root, taking the current
-                          // language into account.
-                          {{#if (eq language "en")}}
-                          let full_path_to_root = "{{ path_to_root }}";
-                          {{else}}
-                          let full_path_to_root = "{{ path_to_root }}../";
-                          {{/if}}
-                          // The page path (mdbook only gives us
-                          // access to the path to the Markdown file).
-                          let path = "{{ path }}".replace(/\.md$/, ".html");
-                          for (let lang of langList.querySelectorAll("a")) {
-                              if (lang.id == "en") {
-                                  lang.href = `${full_path_to_root}${path}`;
-                              } else {
-                                  lang.href = `${full_path_to_root}${lang.id}/${path}`;
-                              }
-                          }
-                        </script>
-
+                        {{{{raw}}}}
+                        {% set current_language = ctx | get(key="config") | get(key="book") | get(key="language", default="en") %}
+                        {% include "LanguagePicker.html" %}
+                        {{{{/raw}}}}
                         {{#if print_enable}}
                         <a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">
                             <i id="print-button" class="fa fa-print"></i>