Merge pull request #354 from github/i18n-switcher

Locale switching

Author: bkeepers

_config.yml

@@ -4,9 +4,9 @@ description: A community guide for open source creators.
 # See: docs/translations.md
 locale: en-US
 translations:
-  - locale: en-US
+  en-US:
     name: English (US)
-    repository: github/open-source-guide
+    url: https://opensource.guide
 
 exclude:
   - bin

_includes/footer.html

@@ -41,20 +41,30 @@ <h3 class="alt-h3 mb-3">{{ site.data.locale[site.locale].footer.subscribe.headin
     </div>
 
     <div class="border-top text-gray py-5">
-      {% capture code %}
-        {% assign code_label = site.data.locale[site.locale].footer.byline.code_label %}
-        <svg height="20" class="octicon octicon-code v-align-middle fill-gray mr-1" aria-label="{{ code_label }}" viewBox="0 0 14 16" version="1.1" width="17" role="img"><path d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"></path></svg>
-      {% endcapture %}
-      {% capture love %}
-        {% assign love_label = site.data.locale[site.locale].footer.byline.love_label %}
-        <svg height="20" class="octicon octicon-heart v-align-middle fill-gray mx-1" aria-label="{{love_label}}" viewBox="0 0 12 16" version="1.1" width="15" role="img"><path d="M11.2 3c-.52-.63-1.25-.95-2.2-1-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-.95.05-1.69.38-2.2 1-.52.61-.78 1.28-.8 2 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.02-.72-.28-1.39-.8-2.02V3z"></path></svg>
-      {% endcapture %}
-      {% capture github %}
-        <svg height="20" class="octicon octicon-mark-github v-align-middle fill-gray mx-1" aria-label="GitHub" viewBox="0 0 16 16" version="1.1" width="20" role="img"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
-      {% endcapture %}
+      <div>
+        {% capture code %}
+          {% assign code_label = site.data.locale[site.locale].footer.byline.code_label %}
+          <svg height="20" class="octicon octicon-code v-align-middle fill-gray mr-1" aria-label="{{ code_label }}" viewBox="0 0 14 16" version="1.1" width="17" role="img"><path d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"></path></svg>
+        {% endcapture %}
+        {% capture love %}
+          {% assign love_label = site.data.locale[site.locale].footer.byline.love_label %}
+          <svg height="20" class="octicon octicon-heart v-align-middle fill-gray mx-1" aria-label="{{love_label}}" viewBox="0 0 12 16" version="1.1" width="15" role="img"><path d="M11.2 3c-.52-.63-1.25-.95-2.2-1-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-.95.05-1.69.38-2.2 1-.52.61-.78 1.28-.8 2 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.02-.72-.28-1.39-.8-2.02V3z"></path></svg>
+        {% endcapture %}
+        {% capture github %}
+          <svg height="20" class="octicon octicon-mark-github v-align-middle fill-gray mx-1" aria-label="GitHub" viewBox="0 0 16 16" version="1.1" width="20" role="img"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
+        {% endcapture %}
 
-      {% assign byline = site.data.locale[site.locale].footer.byline.format %}
-      {{ byline | replace: "[code]", code | replace: "[love]", love | replace: "[github]", github }}
+        {% assign byline = site.data.locale[site.locale].footer.byline.format %}
+        {{ byline | replace: "[code]", code | replace: "[love]", love | replace: "[github]", github }}
+      </div>
+
+      <div class="text-small my-6">
+        {% for translation in site.translations %}
+          <a class="locale-chooser text-gray-light d-inline-block px-1"
+            lang="{{ translation[0] }}"
+            href="{{ page.url | prepend: translation[1].url }}?l={{ translation[0] }}">{{ translation[1].name }}</a>
+        {% endfor %}
+      </div>
     </div>
   </div>
 </footer>

_includes/head.html

@@ -6,6 +6,7 @@
   <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="{{ "/js/script.js" | relative_url }}"></script>
+  <script src="{{ "/js/locale.js" | relative_url }}"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

_layouts/landing.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{ site.locale }}">
   {% include head.html %}
   <body class="">
     <div class="">

js/locale.js

@@ -0,0 +1,48 @@
+---
+---
+
+$(document).ready(function() {
+  var currentLocale = $('html').attr('lang');
+
+  // All available translations
+  var translations = $('a.locale-chooser');
+
+  // Get the preferred locale
+  var locale = getLocaleFromQuery()
+    || getLocaleFromCookie()
+    || getLocaleFromBrowser(translations);
+
+  // If preferred locale is not the same as the current locale, then set it.
+  if (locale && locale != currentLocale) {
+    translations.filter("[lang=" + locale + "]").click();
+  }
+
+  // Set locale when clicking on locale link
+  translations.on('click', function(event) {
+    setLocale($(event.target).attr('lang'));
+  });
+});
+
+// Save the preferred locale in a cookie, which will be set on any subdomain.
+function setLocale(locale) {
+  document.cookie = 'locale=' + locale;
+}
+
+// Get locale from the `l` parameter of the query string
+function getLocaleFromQuery() {
+  return window.location.search.replace(/.*[?&]l=([^&$]+).*/, '$1');
+}
+
+function getLocaleFromCookie() {
+  return document.cookie.replace(/(?:(?:^|.*;\s*)locale\s*\=\s*([^;]*).*$)|^.*$/, '$1');
+}
+
+// Use locale that matches browser's preferred locales
+function getLocaleFromBrowser(translations) {
+  var browserLocales = [].concat(navigator.languages || navigator.userLanguage || navigator.language);
+  for(var i = 0; i < browserLocales.length; i++) {
+    if (translations.filter('[lang=' + browserLocales[i] + ']').length) {
+      return browserLocales[i];
+    }
+  }
+}