feat: implement language switcher logic

docs/conf.py

@@ -9,6 +9,7 @@
 project = "IATI Sphinx Theme"
 copyright = "2024 IATI Secretariat"
 author = "IATI Secretariat"
+language = "en"
 
 # -- General configuration ---------------------------------------------------
 # https://www.sphinx-doc.org/en/master/usage/configuration.html#general-configuration
@@ -26,6 +27,11 @@
 # https://www.sphinx-doc.org/en/master/usage/configuration.html#options-for-html-output
 
 html_theme = "iati_sphinx_theme"
-html_theme_options = {"github_repository": "https://github.com/IATI/sphinx-theme"}
+html_theme_options = {
+    "github_repository": "https://github.com/IATI/sphinx-theme",
+    "languages": {
+        "en": "English",
+    },
+}
 
 todo_include_todos = True

iati_sphinx_theme/__init__.py

@@ -9,4 +9,6 @@ def setup(app: sphinx.application.Sphinx) -> None:
     app.add_html_theme("iati_sphinx_theme", path.abspath(path.dirname(__file__)))
     app.config["html_permalinks_icon"] = "#"
     app.config["html_favicon"] = "static/favicon-16x16.png"
+    app.config["html_context"]["language"] = app.config["language"]
     app.add_js_file("header.js")
+    app.add_js_file("language-switcher.js")

iati_sphinx_theme/footer.html

@@ -28,12 +28,9 @@ <h2 class="iati-footer-block__title">Additional information</h2>
             </li>
           </ul>
         </nav>
-        <div class="iati-country-switcher">
-          <label for="iati-country-switcher" class="iati-country-switcher__label">Choose your language</label>
-          <select id="iati-country-switcher" class="iati-country-switcher__control">
-            <option>English</option>
-          </select>
-        </div>
+
+        {%- include "language-switcher.html" %}
+
         <div class="iati-footer__social">
           <a
             href="https://www.linkedin.com/company/international-aid-transparency-initiative/"

iati_sphinx_theme/header.html

@@ -53,12 +53,7 @@ <h2 class="iati-mobile-nav__label">Menu</h2>
 
       <div class="iati-header__actions">
 
-        <div class="iati-country-switcher">
-          <label for="iati-country-switcher" class="iati-country-switcher__label">Choose your language</label>
-          <select id="iati-country-switcher" class="iati-country-switcher__control">
-            <option>English</option>
-          </select>
-        </div>
+        {%- include "language-switcher.html" %}
 
         <a href="{{ pathto('search') }}" class="iati-button iati-button--light">
           <span>Search</span>

iati_sphinx_theme/language-switcher.html

@@ -0,0 +1,10 @@
+<div class="iati-country-switcher">
+  <label for="iati-country-switcher" class="iati-country-switcher__label">Choose your language</label>
+  <select id="iati-country-switcher" class="iati-country-switcher__control">
+    {% for language_code in theme_languages %}
+      <option value="{{ language_code }}" {% if language_code == language %}selected{% endif %}>
+        {{- theme_languages[language_code] -}}
+      </option>
+    {% endfor %}
+  </select>
+</div>

iati_sphinx_theme/static/language-switcher.js

@@ -0,0 +1,20 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const handleChange = (event) => {
+    const { value } = event.target;
+    const currentPath = window.location.pathname;
+    const countryCodeRegex = /^\/[a-z]{2}\//;
+    const currentPathWithoutCountryCode = currentPath.replace(
+      countryCodeRegex,
+      "/"
+    );
+    const newPath = "/" + value + currentPathWithoutCountryCode;
+    event.target.selectedIndex = Array.from(event.target.options).findIndex(
+      (option) => option.hasAttribute("selected")
+    );
+    window.location.pathname = newPath;
+  };
+  const languageSwitchers = document.querySelectorAll("#iati-country-switcher");
+  languageSwitchers.forEach((languageSwitcher) => {
+    languageSwitcher.addEventListener("change", handleChange);
+  });
+});

iati_sphinx_theme/theme.conf

@@ -8,3 +8,4 @@ github_repository =
 globaltoc_maxdepth = 2
 show_relations = False
 plausible_domain =
+languages =