Add language switcher

Author: melissawm

_config.yml

@@ -86,3 +86,6 @@ footer:
     - label: "Zulip"
       icon: "fas fa-comments"
       url: "https://ossci.zulipchat.com/"
+
+head_scripts:
+  - assets/js/language_switcher.js

_data/languages.yml

@@ -0,0 +1,10 @@
+languages:
+  - name: English
+    code: en
+    url: /en/
+  - name: Español
+    code: es
+    url: /es/
+  - name: Português
+    code: pt
+    url: /pt/

_data/navigation.yml

@@ -1,12 +1,58 @@
 main:
-  - title: "Documentation"
-    url: "https://zarr.readthedocs.io/en/stable/"
-  - title: "Contribute"
-    url: "https://zarr.readthedocs.io/en/stable/developers/contributing.html"
-  - title: "Python Quickstart"
-    url: "https://zarr.readthedocs.io/en/stable/quickstart.html"
+  - title: "en"
+    url: "/content/en/"
+    children:
+    - title: "Documentation"
+      url: "https://zarr.readthedocs.io/en/stable/"
+    - title: "Contribute"
+      url: "https://zarr.readthedocs.io/en/stable/developers/contributing.html"
+    - title: "Python Quickstart"
+      url: "https://zarr.readthedocs.io/en/stable/quickstart.html"
+    - title: "Language"
+      children:
+        - title: "English"
+          url: "/en/"
+        - title: "Español"
+          url: "/es/"
+        - title: "Português"
+          url: "/pt/"
+  - title: "es"
+    url: "/content/es/"
+    children:
+    - title: "Documentación"
+      url: "https://zarr.readthedocs.io/en/stable/"
+    - title: "Contribuye"
+      url: "https://zarr.readthedocs.io/en/stable/developers/contributing.html"
+    - title: "Python Quickstart"
+      url: "https://zarr.readthedocs.io/en/stable/quickstart.html"
+    - title: "Language"
+      children:
+        - title: "English"
+          url: "/en/"
+        - title: "Español"
+          url: "/es/"
+        - title: "Português"
+          url: "/pt/"
+  - title: "pt"
+    url: "/content/pt/"
+    children:
+    - title: "Documentação"
+      url: "https://zarr.readthedocs.io/en/stable/"
+    - title: "Contribuir"
+      url: "https://zarr.readthedocs.io/en/stable/developers/contributing.html"
+    - title: "Python Quickstart"
+      url: "https://zarr.readthedocs.io/en/stable/quickstart.html"
+    - title: "Language"
+      children:
+        - title: "English"
+          url: "/en/"
+        - title: "Español"
+          url: "/es/"
+        - title: "Português"
+          url: "/pt/"
+
 
-sidebar:
+sidebar-en:
   - title: About
     children:
       - title: "Description"
@@ -22,22 +68,92 @@ sidebar:
   - title: Subpages
     children:
       - title: "Adopters"
-        url: "/adopters"
+        url: "/content/en/adopters"
       - title: "Blog"
         url: '/blog'
       - title: "Community"
-        url: '/community'
+        url: '/content/en/community'
       - title: "Conventions"
-        url: '/conventions'
+        url: '/content/en/conventions'
       - title: "Datasets"
-        url: '/datasets'
+        url: '/content/en/datasets'
       - title: "Implementations"
-        url: '/implementations'
+        url: '/content/en/implementations'
       - title: "Office Hours"
-        url: "/office-hours"
+        url: "/content/en/office-hours"
       - title: "Slides"
         url: "/slides"
       - title: "Specification"
         url: https://zarr-specs.readthedocs.io/
       - title: "ZEPs"
         url: '/zeps'
+sidebar-es:
+  - title: Acerca de
+    children:
+      - title: "Descripción"
+        url: '#description'
+      - title: "Aplicaciones"
+        url: '#applications'
+      - title: "Características"
+        url: '#features'
+      - title: "Patrocinio"
+        url: "#sponsorship"
+      - title: "Videos"
+        url: "#videos"
+  - title: Subpáginas
+    children:
+      - title: "Adoptantes"
+        url: "/content/es/adopters"
+      - title: "Blog"
+        url: '/blog'
+      - title: "Comunidad"
+        url: '/content/es/community'
+      - title: "Convenciones"
+        url: '/content/es/conventions'
+      - title: "Conjuntos de datos"
+        url: '/content/es/datasets'
+      - title: "Implementaciones"
+        url: '/content/es/implementations'
+      - title: "Oficina de horas"
+        url: "/content/es/office-hours"
+      - title: "Diapositivas"
+        url: "/slides"
+      - title: "Especificación"
+        url: https://zarr-specs.readthedocs.io/
+      - title: "ZEPs"
+        url: '/zeps'
+sidebar-pt:
+  - title: Sobre
+    children:
+      - title: "Descrição"
+        url: '#description'
+      - title: "Aplicações"
+        url: '#applications'
+      - title: "Características"
+        url: '#features'
+      - title: "Patrocínio"
+        url: "#sponsorship"
+      - title: "Vídeos"
+        url: "#videos"
+  - title: Subpáginas
+    children:
+      - title: "Adotantes"
+        url: "/content/pt/adopters"
+      - title: "Blog"
+        url: '/blog'
+      - title: "Comunidade"
+        url: '/content/pt/community'
+      - title: "Convenções"
+        url: '/content/pt/conventions'
+      - title: "Conjuntos de dados"
+        url: '/content/pt/datasets'
+      - title: "Implementacões"
+        url: '/content/pt/implementations'
+      - title: "Reuniões"
+        url: "/content/pt/office-hours"
+      - title: "Apresentações"
+        url: "/slides"
+      - title: "Especificação"
+        url: https://zarr-specs.readthedocs.io/
+      - title: "ZEPs"
+        url: '/zeps'

_includes/masthead.html

@@ -0,0 +1,54 @@
+
+{% capture logo_path %}{{ site.logo }}{% endcapture %}
+{% assign document = post | default: page %}
+
+<div class="masthead">
+    <div class="masthead__inner-wrap">
+        <div class="masthead__menu">
+            <nav id="site-nav" class="greedy-nav">
+                {% unless logo_path == empty %}
+                <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}"
+                        alt="{{ site.masthead_title | default: site.title }}"></a>
+                {% endunless %}
+                <a class="site-title" href="{{ '/' | relative_url }}">
+                    {{ site.masthead_title | default: site.title }}
+                    {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
+                </a>
+                    {%- for lang in site.data.navigation.main -%}
+                    <ul class="visible-links" id="{{ lang.title }}">
+                        {%- for link in lang.children -%}
+                            {%- if link.title != "Language" -%}
+                                <li class="masthead__menu-item">
+                                <a href="{{ link.url | relative_url }}" {% if link.description %} title="{{ link.description }}" {% endif %} {% if
+                                link.target %} target="{{ link.target }}" {% endif %}>{{ link.title }}</a>
+                                </li>
+                            {%- endif -%}
+                        {%- endfor -%}
+                    </ul>
+                    {%- endfor -%}
+                {% if site.search == true %}
+                <button class="search__toggle" type="button">
+                    <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle
+                        search" }}</span>
+                    <i class="fas fa-search"></i>
+                </button>
+                {% endif %}
+                <div class="masthead__dropdown" style="display: flex;">
+                    <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle
+                        search" }}</span>
+                    <select class="masthead__dropdown-select" style="box-shadow: none; background-color: unset; margin-bottom: 0px;" onchange="change_language()" id="select_language">
+                        {% for lang in site.data.languages.languages %}
+                            <option value="/content{{ lang.url | relative_url }}">{{ lang.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <button class="greedy-nav__toggle hidden" type="button">
+                    <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu"
+                        }}</span>
+                    <div class="navicon"></div>
+                </button>
+                <ul class="hidden-links hidden"></ul>
+            </nav>
+        </div>
+    </div>
+</div>

assets/js/language_switcher.js

@@ -0,0 +1,41 @@
+window.addEventListener("DOMContentLoaded", function() {
+  let current_language = localStorage.getItem("current_language");
+  if (current_language === null) {
+    // No language set, defaulting to English
+    current_language = "/content/en";
+  }
+  // Set the option in the select element to have the "selected" attribute
+  var selectElement = document.getElementById("select_language");
+  var selectedOption = selectElement.querySelector(
+    'option[value="' + current_language + '"]'
+  );
+  if (selectedOption) {
+    selectedOption.setAttribute("selected", "");
+  }
+  // Remove items from navigation which do not correpond to current language
+  const navlist = document.getElementsByClassName("visible-links");
+  Array.from(navlist).forEach(element => {
+    if (element.id !== current_language.split("/")[2]) {
+      const parent = element.parentNode;
+      if (parent) {
+        parent.removeChild(element);
+      }
+    }
+  });
+});
+
+// Change language for current page
+function change_language() {
+  var selectElement = document.getElementById("select_language");
+  var value = selectElement.options[selectElement.selectedIndex].value;
+  // Get the current page URL
+  const currentPageUrl = window.location.href;
+  const old_language = localStorage.getItem("current_language");
+  localStorage.setItem("current_language", value);
+  // Update the lang attribute of the HTML element
+  document.documentElement.setAttribute("lang", value.split("/")[2]);
+  window.location.href = currentPageUrl.replace(
+    old_language,
+    value
+  );
+}

about/index.html renamed to content/en/about/index.html

@@ -4,7 +4,7 @@ author_profile: false
 title: Zarr Adopters
 sidebar:
   title: "Content"
-  nav: sidebar
+  nav: sidebar-en
 ---
 
 <p style="font-family:Trebuchet MS"><font size="4">💡 If you're using Zarr in any way and would like to be added on this page, please drop your logo and blurb <a href="https://github.com/zarr-developers/community/issues/60">here</a>.</font></p>

adopters/index.md renamed to content/en/adopters/index.md

@@ -4,7 +4,7 @@ author_profile: false
 title: Zarr Community
 sidebar:
   title: "Content"
-  nav: sidebar
+  nav: sidebar-en
 ---
 
 Zarr is a community-driven open-source data format specification developed and maintained by diverse [contributors](https://github.com/orgs/zarr-developers/teams). The Zarr contributors aim to maintain an open, equal, diverse, and inclusive community. Please read the [Zarr Code of Conduct](https://github.com/zarr-developers/.github/blob/main/CODE_OF_CONDUCT.md) for the appropriate way to interact with the community and help each other.

adopters/logos/carbonplan.svg renamed to content/en/adopters/logos/carbonplan.svg

@@ -4,7 +4,7 @@ author_profile: false
 title: Zarr Conventions
 sidebar:
   title: "Content"
-  nav: sidebar
+  nav: sidebar-en
 ---
 
 <font size="4">

adopters/logos/columbia.png renamed to content/en/adopters/logos/columbia.png

@@ -4,7 +4,7 @@ author_profile: false
 title: Zarr Datasets
 sidebar:
   title: "Content"
-  nav: sidebar
+  nav: sidebar-en
 ---
 
 <font size="4">

adopters/logos/dandi.svg renamed to content/en/adopters/logos/dandi.svg

@@ -4,7 +4,7 @@ author_profile: false
 title: Zarr Implementations
 sidebar:
   title: "Content"
-  nav: sidebar
+  nav: sidebar-en
 ---
 
 <font size="4">