Add language selection dropdown

.github/workflows/add-lang.yml

@@ -17,12 +17,14 @@ jobs:
           ISSUE_TITLE: ${{ github.event.issue.title }}
           ISSUE_NUM: ${{ github.event.issue.number }}
         run: |
-          NEW_LANG=$(sed 's/.*\[\([^]]*\)].*/\1/' <<< "$ISSUE_TITLE")
-          if [[ $NEW_LANG =~ ^[a-z]{2}(_[A-Z]{2})?$ ]]; then
-            echo "new_lang=$NEW_LANG" >> $GITHUB_ENV
+          LANG_CODE=$(sed 's/.*\[\([^]]*\)].*/\1/' <<< "$ISSUE_TITLE")
+          FULL_LANG=$(sed 's/.*<\([^>]*\)>.*/\1/' <<< "$ISSUE_TITLE")
+          if [[ $LANG_CODE =~ ^[a-z]{2}(-[A-Z]{2})?$ && $ISSUE_TITLE =~ <[^>]+> ]]; then
+            echo "lang_code=$LANG_CODE" >> $GITHUB_ENV
+            echo "full_lang=$FULL_LANG" >> $GITHUB_ENV
             echo "issue_num=$ISSUE_NUM" >> $GITHUB_ENV
           else
-            echo Error: language code in wrong format.
+            echo Error: language name/code in wrong format.
             exit 1
           fi
 
@@ -34,11 +36,11 @@ jobs:
 # Check if language has been added previously.
       - name: Check if language is already present
         run: |
-          if [ -d "_translator-files/po/${{ env.new_lang }}" ] ; then
-            echo Error: The language [${{ env.new_lang }}] seems to already exist.
+          if [ -d "_translator-files/po/${{ env.lang_code }}" ] ; then
+            echo Error: The language [${{ env.lang_code }}] seems to already exist.
             exit 1
           else
-            echo Language: [${{ env.new_lang }}] not detected. Proceeding to add [${{ env.new_lang }}].
+            echo Language: [${{ env.lang_code }}] seems to be new as no Language: [${{ env.lang_code }}] was found. Proceeding to add [${{ env.lang_code }}].
           fi
 
 # Check po4a cache. If CACHE_HIT: true, retrieve the cache.
@@ -64,19 +66,19 @@ jobs:
         with:
           branch: next-release
           default_author: github_actions
-          message: 'AUTO: Add new language: (${{ env.new_lang }}) #${{ env.issue_num }}'
+          message: 'AUTO: Add new language: ${{ env.lang_code }}: ${{ env.full_lang }} #${{ env.issue_num }}'
 
 # Add comment to issue informing of the creation of the language files:
       - name: Add comment to issue
         uses: peter-evans/create-or-update-comment@v4
         with:
           issue-number: ${{ env.issue_num }}
           body: |
-            - The .po files have been created for **${{ env.new_lang }}** and are now available on [Weblate](https://hosted.weblate.org/projects/jamulus/#languages). If you prefer not to use Weblate and intend to submit translations via a Pull Request, your language files can be found on the `next-release` branch in `_translator-files/po/${{ env.new_lang }}/`.
+            - The .po files have been created for **${{ env.full_lang }}** and are now available on [Weblate](https://hosted.weblate.org/projects/jamulus/#languages). If you prefer not to use Weblate and intend to submit translations via a Pull Request, your language files can be found on the `next-release` branch in `_translator-files/po/${{ env.lang_code }}/`.
             - Please consult [this README file](https://github.com/jamulussoftware/jamuluswebsite/tree/next-release/_translator-files#readme) for more information on the translation process.
 
 # Create target translated files. Never pushed to the repo.
-      - name: Create translated docs and stats
+      - name: Create translated docs
         run: ./_po4a-tools/po4a-create-all-targets.sh
 
 # Build site

1-ko-KR-index.md

@@ -0,0 +1 @@
+wiki/ko-KR/1-index.md

1-no-NO-index.md

@@ -0,0 +1 @@
+wiki/nb-NO/1-index.md

1-pt-BR-index.md

@@ -0,0 +1 @@
+wiki/pt-BR/1-index.md

1-pt-PT-index.md

@@ -0,0 +1 @@
+wiki/pt-PT/1-index.md

1-zh-CN-index.md

@@ -0,0 +1 @@
+wiki/zh-CN/1-index.md

_config.yml

@@ -2,8 +2,20 @@ plugins:
   - jekyll-paginate-v2
   - jekyll-polyglot
   - jekyll-minifier
-languages:                   ["en", "zh_CN", "nb_NO", "ko_KR", "pt_BR", "pt_PT", "nl", "es", "de", "it", "fr"]
+languages:                   ["en", "zh-CN", "nb-NO", "ko-KR", "pt-BR", "pt-PT", "nl", "es", "de", "it", "fr"]
 default_lang:                "en"
+language_names:
+  en: English
+  zh-CN: 简体中文
+  nb-NO: Norsk (bokmål)
+  ko-KR: 한국어
+  pt-PT: Português (Portugal)
+  pt-BR: Português (Brasil)
+  nl: Nederlands
+  es: Español
+  de: Deutsch
+  it: Italiano
+  fr: Français
 exclude_from_localization:   ["assets", "images", "css", "README.md", "manifest.json", "humans.txt", "sitemap.xml", "robots.txt", "404.html", "CNAME", "LICENSE.md"]
 parallel_localization:       true
 a_rootpage:                  "https://jamulus.io"

_includes/general/nav.html

@@ -6,19 +6,22 @@
       {% for item in site.data.navigation.nav %}
       {% if item.url %}
       <li>
-        <h3><a href="{{ item.url | relative_url }}" class="{% if subentry.url == page.url or subentry.selectOnLayout == page.layout %}selected{% endif %}">{{ item.title }}</a></h3>
+      {% if page.lang == site.default_lang %}{% capture lang_rel %}canonical{% endcapture %}{% else %}{% capture lang_rel %}alternate{% endcapture %}{% endif %}
+        <h3><a href="{{ item.url | relative_url }}" rel="{{ lang_rel }}" class="{% if subentry.url == page.url or subentry.selectOnLayout == page.layout %}selected{% endif %}">{{ item.title }}</a></h3>
       {% else %}
       <li>
         <h3>{{ item.title }}</h3>
       {% endif %}
       {% if item.subfolderitems[0] %}
         <ul>
           {% for entry in item.subfolderitems %}
-          <li><a href="{{ entry.url }}" class="{% if entry.url == page.url or entry.selectOnLayout == page.layout %}selected{% endif %}">{{ entry.page }}</a>
+            {% if page.lang == site.default_lang %}{% capture lang_rel %}canonical{% endcapture %}{% else %}{% capture lang_rel %}alternate{% endcapture %}{% endif %}
+            <li><a href="{{ entry.url }}" lang="{{ lang_rel }}" class="{% if entry.url == page.url or entry.selectOnLayout == page.layout %}selected{% endif %}">{{ entry.page }}</a>
             {% if entry.subsubfolderitems[0] %}
             <ul>
-              {% for subentry in entry.subsubfolderitems %}
-              <li><a href="{{ subentry.url }}" class="{% if subentry.url == page.url or subentry.selectOnLayout == page.layout %}selected{% endif %}">{{ subentry.page }}</a></li>
+          {% for subentry in entry.subsubfolderitems %}
+              {% if page.lang == site.default_lang %}{% capture lang_rel %}canonical{% endcapture %}{% else %}{% capture lang_rel %}alternate{% endcapture %}{% endif %}
+              <li><a href="{{ subentry.url }}"  lang="{{ lang_rel }}" class="{% if subentry.url == page.url or subentry.selectOnLayout == page.layout %}selected{% endif %}">{{ subentry.page }}</a></li>
               {% endfor %}
             </ul>
             {% endif %}
@@ -30,6 +33,6 @@ <h3>{{ item.title }}</h3>
       {% endfor %}
       {% endif %}
     </ul>
-	<div id="cc">{{ site.data.copyright.nav.docs }}</div>
+        <div id="cc">{{ site.data.copyright.nav.docs }}</div>
   </nav>
 </aside>

_includes/headtags.html

@@ -2,14 +2,16 @@
 {% for lng in site.languages %}
     {% if lng == site.default_lang %}
       {% capture langlink %}{{ site.a_rootpage }}{{ page.url }}{% endcapture %}
+          <link rel="canonical" hreflang="{{ lng }}" href="{{ langlink }}">
     {% else %}
       {% capture langlink %}{{ site.a_rootpage }}/{{ lng }}{{ page.url }}{% endcapture %}
+          <link rel="alternate" hreflang="{{ lng }}" href="{{ langlink }}">
     {% endif %}
-    <link rel="alternate" hreflang="{{ lng }}" href="{{ langlink }}">
 {% endfor %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="/assets/css/fox.min.css">
 <link rel="stylesheet" href="/assets/css/fw.css">
+<link rel="stylesheet" href="/assets/css/langsel.css">
 <noscript>
   <link rel="stylesheet" href="/assets/css/noscript.css">
 </noscript>

_includes/langselect.html

@@ -1,17 +1,39 @@
-<div id="langselect">
-  <div lang="en" id="suglang">This site might also be available in your native language. Select your preferred language below:</div>
-  <ul>
-    {% for lng in site.languages %}
-      {% if lng == site.active_lang %}
-        <li class="selected" data-slang="{{ lng }}">{{ lng }}</li>
-      {% else %}
-        {% if lng == site.default_lang %}
-          {% capture langlink %} {{ page.url }}{% endcapture %}
-        {% else %}
-          {% capture langlink %}/{{ lng }}{{ page.url }}{% endcapture %}
-        {% endif %}
-        <li><a href="{{ langlink }}" data-slang="{{ lng }}">{{ lng }}</a></li>
-      {% endif %}
-    {% endfor %}
-  </ul>
+<div id="langselect-container">
+  <div id="langselect">
+    <!-- Language Dropdown inside a form -->
+    <form action="" method="get" id="language-form">
+      <div class="language-dropdown">
+        <select id="language-select" name="language-select" onchange="location = this.value;">
+          {% assign sorted_languages = site.languages | sort %}
+          {% for lng in sorted_languages %}
+            {% if lng == site.default_lang %}
+              {% capture langlink %} {{ page.url }}{% endcapture %}
+              {% capture lang_rel %}canonical{% endcapture %}
+            {% else %}
+              {% capture langlink %}{{ site.baseurl }}/{{ lng }}{{ page.url }}{% endcapture %}
+              {% capture lang_rel %}alternate{% endcapture %}
+            {% endif %}
+            <option value="{{ langlink }}" {% if lng == site.active_lang %}selected{% endif %}>
+              {{ site.language_names[lng] }}
+            </option>
+          {% endfor %}
+        </select>
+      </div>
+    </form>
+    <!-- Plain list of language codes for non-JS users -->
+    <noscript>
+      <ul class="language-list">
+        {% for lng in sorted_languages %}
+          {% if lng == site.default_lang %}
+            {% capture langlink %} {{ page.url }}{% endcapture %}
+            {% capture lang_rel %}canonical{% endcapture %}
+          {% else %}
+            {% capture langlink %}{{ site.baseurl }}/{{ lng }}{{ page.url }}{% endcapture %}
+            {% capture lang_rel %}alternate{% endcapture %}
+          {% endif %}
+          <li><a href="{{ langlink }}" rel="{{ lang_rel }}" class="{% if lng == site.active_lang %}active{% endif %}">{{ lng }}</a></li>
+        {% endfor %}
+      </ul>
+    </noscript>
+  </div>
 </div>

_po4a-tools/po4a-add-language.sh

@@ -8,38 +8,40 @@ SCRIPT_DIR=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
 cd "$SCRIPT_DIR"
 
 # Create and populate .po file folder
-mkdir ../_translator-files/po/$new_lang
+mkdir ../_translator-files/po/$lang_code
 echo ''
-echo .po file folder created for "$new_lang"
-echo Creating .po files for "$new_lang"
+echo .po file folder created for "$lang_code"
+echo Creating .po files for "$full_lang"
 ./po4a-update-templates.sh
 
 # Go to root directory
 cd ../
 
 # Create symlinks for 1-index.md file
-ln -s -r ./wiki/$new_lang/1-index.md ./1-$new_lang-index.md
+ln -s -r ./wiki/$lang_code/1-index.md ./1-$lang_code-index.md
 if [ $(echo $?) == 0 ] ; then
     echo ''
-    echo 1-"$new_lang"-index.md symlink created for "$new_lang" in /
+    echo 1-"$lang_code"-index.md symlink created for "$full_lang" in /
 else
-    echo Error creating 1-"$new_lang"-index.md symlink in /
+    echo Error creating 1-"$lang_code"-index.md symlink in /
     exit 1
 fi
 
-# Add new language to array in _config.yml
-sed -i "s/\(\[\"en\",\)/\1 \"$new_lang\",/" _config.yml
+# Add new language to _config.yml
+sed -i "s/\(\[\"en\",\)/\1 \"$lang_code\",/" _config.yml
+sed -i "/^language_names:/a\  $lang_code: $full_lang" _config.yml
+
 if [ $(echo $?) == 0 ] ; then
-    echo "$new_lang" added to language array in _config.yml
+    echo "$lang_code" added to _config.yml
 else
-    echo Error adding "$new_lang" to language array in _config.yml
+    echo Error adding "$lang_code" to _config.yml
     exit 1
 fi
 
 # Create images folder for new language
-if [ ! -d "./assets/img/$new_lang-screenshots" ] ; then
-    cp -frp ./assets/img/en-screenshots -T ./assets/img/$new_lang-screenshots
-    echo Screenshots created for "$new_lang" in ./assets/img/"$new_lang"-screenshots/
+if [ ! -d "./assets/img/$lang_code-screenshots" ] ; then
+    cp -frp ./assets/img/en-screenshots -T ./assets/img/$lang_code-screenshots
+    echo Screenshots created for "$full_lang" in ./assets/img/"$lang_code"-screenshots/
 else
-    echo Error: screenshots folder for "$new_lang" seems to already exist
+    echo Error: screenshots folder for "$full_lang" seems to already exist
 fi

_translator-files/README.md

@@ -6,7 +6,7 @@ All the Jamulus project files (application and website) are listed together on W
 
 **Some tips regarding translations:**
 
-- Change the `lang: en` parameter in the files containing it at the beginning of the file to your language code (it, fr, de, etc.). Remember that if you are translating a regional variation (e.g. `pt_BR`), that's what you must use. Also make sure the `permalink: [parameter]` (e.g. /wiki/Client-Troubleshooting) stays the same.
+- Change the `lang: en` parameter in the files containing it at the beginning of the file to your language code (it, fr, de, etc.). Remember that if you are translating a regional variation (e.g. `pt-BR`), that's what you must use. Also make sure the `permalink: [parameter]` (e.g. /wiki/Client-Troubleshooting) stays the same.
 - At times there are links to other docs: `[translate this](don't translate this)`, or specific paragraphs in other parts of the website: `[translate this](don't translate this#translate-this-but-dont-use-capitals-nor-apostrophes)`. Make sure the last part after the hashtag uses the exact same words as the relevant paragraph title you use in your translation.
 - Some documents contain links to screenshots. Make sure you change the language code in them to your own. You can create screenshots for your language in `/assets/img/[LANG]-screenshots` - note that we do not store these image locally but instead use include files calling an external URL to them. Please see README.md on the website repository for further information. Also note that screenshots that do not need to be localised are symlinked to the English version from each `[LANG]-screenshots` directory.
 - There are documents containing portions of text that do not require translation, e.g. scripts, links, etc. In these cases, please do not leave the translation field empty, but copy the source text into the translation field.
@@ -23,9 +23,9 @@ All the Jamulus project files (application and website) are listed together on W
 
 ## Adding a new language
 
-Open an issue ([here](https://github.com/jamulussoftware/jamuluswebsite/issues)) with the language code of the new language you want to add in square brackets. It is important that you use the following format for the language code:
+Open an issue ([here](https://github.com/jamulussoftware/jamuluswebsite/issues)) with the full language name (in your language) enclosed in angle brackets (<>) and the language code of the new language you want to add in square brackets. It is important that you use the following format for the language code:
 
-- Lower case if it is a two-character code (e.g. "Add Basque [eu]")
-- Lower case + underscore + upper case for regional variations (e.g. "Add Brazilian Portuguese [pt_BR]").
+- Lower case if it is a two-character code (e.g. "Add \<Euskera\> [eu]")
+- Lower case + hyphen + upper case for regional variations (e.g. "Add \<Português (Brasil)\> [pt-BR]").
 
 You will be notified on the issue thread you opened when the language files have been created. You can then work on the translations.

assets/css/fw.css

@@ -82,44 +82,14 @@ main li {
   margin-bottom: 0.5em;
 }
 
-#suglang {
-  display: none;
-}
-
-.chlang {
-  border: solid 2px #c94a55;
-  padding: 0.2em;
-}
-
-.proplang {
-  font-style: italic;
-}
-
-#langselect {
-  color: #1181a4;
-}
-
-#langselect ul {
-  padding: 0;
-  margin: 0;
+#langselect-container {
   text-align: right;
 }
 
-#langselect ul li {
-  display: inline-block;
-  list-style-type: none;
-  margin: 0 0.8em 0 0;
-  padding: 0;
-}
-
-#langselect .selected, #gnav .selected, #paginator .selected {
+#gnav .selected, #paginator .selected {
   font-weight: bold;
   text-decoration: underline;
-  color: #2b7288;
-}
-
-#langselect.chlang ul li a, #langselect.chlang .selected {
-  color: inherit;
+  color: #2b7288; /* Dark moderate cyan */
 }
 
 header #navbtn {
@@ -321,10 +291,6 @@ details>summary {
 }
 
 @media (min-width:940px) {
-  #langselect ul li {
-    margin: 0 0.3em 0 0;
-  }
-
   #mnv {
     display: block !important;
   }
@@ -459,10 +425,6 @@ details>summary {
     background-color: #ea6571 !important;
   }
 
-  .chlang {
-    border-color: #ea6571;
-  }
-
   #cc {
     color: #52bada;
   }