Merge branch 'i18n' into 'master'

I18n via jekyll-multiple-languages-plugin

See merge request guardianproject/wind/butter-app-site!18

Gemfile

@@ -16,6 +16,7 @@ gem "jekyll", "~> 4.2.0"
 # If you have any plugins, put them here!
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
+  gem 'jekyll-multiple-languages-plugin'
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

_config.yml

@@ -6,6 +6,7 @@ url: "" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: Butter App
 github_username:  Butter App
 logo: "/assets/images/butter-app-logo-small.svg"
+languages: ['en', 'es'] # powered by jekyll-multiple-languages-plugin
 
 # Build settings
 sass:
@@ -14,6 +15,7 @@ sass:
 
 plugins:
   - jekyll-feed
+  - jekyll-multiple-languages-plugin
 
 # Exclude from processing.
 # The following items will not be processed, by default.

_data/en/home.yml

@@ -1,46 +0,0 @@
-site_name: 'Butter'
-page_logo: ['/assets/images/butter-logo-feature-large.svg', 'Butter App Feature Logo']
-title: 'Life without internet made smoother. <br /> Get access to tools that help.'
-text:
-  show_chat: |
-    This Butter Box offers an Android app store and chat rooms. <br />
-    Download the Butter app to discover and download free, ad-free <br />
-    apps or to spread the love and share apps offline. Or, create a <br />
-    chat room which hangs on to messages while you're gone and <br/>
-    delivers them whenever your device reconnects to the Butter Box.
-  dont_show_chat: |
-    Butter features a collection of apps to make life without <br /> the internet a little smoother.  Use it to discover and download <br /> free, ad-free apps or to spread the love and share offline.
-fdroid_apps_caption: Just a few of the apps available via Butter.
-fdroid_button_text: 'Download Android App'
-chat_button_text: 'Start a chat room instantly'
-image: ['/assets/images/butter-collection-features-offline-essentials.svg', 'Butter App features collection']
-
-modal_data:
-  title: 'Butter: Free, ad-free apps to help you offline'
-  logo: ['/assets/images/butter-app-icon-large.svg', 'Butter App Logo']
-  text: |
-    Be in-the-know, be entertained, manage business and life—even with little internet.
-    Butter app makes it easy to find apps that use less internet and battery.
-    Download your favorites, and get free updates from Butter. Care to share? Send any app on your phone to a friend near you with Butter nearby. No internet needed.
-  info_list:
-    - By Team Butter
-    - Available for Android phones
-    - Less than 10 MB!
-  button_text: 'Download Android App'
-  button_url: '/assets/download/butter.apk'
-  slider_list:
-    - '/assets/images/slide-img-1.png'
-    - '/assets/images/slide-img-2.png'
-    - '/assets/images/slide-img-3.png'
-    - '/assets/images/slide-img-4.png'
-    - '/assets/images/slide-img-5.png'
-  warning: |
-    You will need to enable downloads from unknown sources to install this app on your Android phone.
-
-captive_data:
-  welcome_message: |
-    Welcome to Butterbox.
-  welcome_details: |
-    This network doesn't provide internet access, just the next best thing, the Butter app.  Butter features a collection of apps to make life without the internet a little smoother.
-    <br/><br/>Once you've connected, simply open http://butterbox.lan in your browser. 
-  continue_button: 'Continue'

_data/es/home.yml

@@ -1,41 +0,0 @@
-site_name: 'Mantequilla'
-page_logo: ['/assets/images/butter-logo-feature-large.svg', 'Butter App Feature Logo']
-title: 'Para hacer tu vida sin Internet más fácil. Obtén herramientas que ayudan.'
-text:
-  show_chat: |
-   Este Caja de Mantequilla presenta una colección de aplicaciones de Android y salas de chat.  Descarga la aplicación Mantequilla para descubrir y descargar aplicaciones gratuitas y sin publicidad o compartir cuando no tienes conexión. O, crea una sala de chat que conserva mensajes cuando no estás aquí y los entrega cuando se vuelve a conectar a la Caja de Mantequilla.
-  dont_show_chat: |
-   Mantequilla presenta una colección de aplicaciones para ayudarte cuando no tienes acceso a Internet. Úsala para descubrir y descargar aplicaciones gratuitas y sin publicidad o  compartir cuando no tienes conexión.
-fdroid_apps_caption: Unas aplicaciónes disponible de Mantequilla
-fdroid_button_text: 'DESCARGA LA APLICACIÓN ANDROID'
-chat_button_text: Crea una sala de chat
-image: ['/assets/images/butter-collection-features-offline-essentials.svg', 'Butter App features collection']
-
-
-modal_data:
-  title: 'Mantequilla: aplicaciones gratuitas y sin anuncios para ayudarte cuando no tienes acceso a internet'
-  logo: ['/assets/images/butter-app-icon-large.svg', 'Butter App Logo']
-  text: |
-    Mantente al tanto, diviértete, administra tus negocios y tu vida, incluso con poco Internet. La aplicación Mantequilla facilita la tarea de encontrar aplicaciones que usan menos Internet y batería. Descarga tus favoritas y obtén actualizaciones gratuitas de Mantequilla. ¿Te interesa compartir? Envía cualquier aplicación en tu teléfono a un amigo cerca de ti con “Mantequilla cercano”. No se necesita internet.
-  info_list:
-    - Autor Team Butter
-    - Disponible para teléfonos Android
-    - Menos de 10 MB!
-  button_text: 'DESCARGA'
-  button_url: '/assets/download/butter.apk'
-  slider_list:
-    - '/assets/images/slide-img-1.png'
-    - '/assets/images/slide-img-2.png'
-    - '/assets/images/slide-img-3.png'
-    - '/assets/images/slide-img-4.png'
-    - '/assets/images/slide-img-5.png'
-  warning: |
-     Debes 'habilitar descargas de fuentes desconocidas' para descargar esta aplicación en tu teléfono Android.
-
-captive_data:
-  welcome_message: |
-    Bienvenido.  Esto es "como la mantequilla."
-  welcome_details: |
-    Esta red no proporciona acceso a Internet, solo lo mejor de la siguiente, la aplicación Mantequilla. Mantequilla presenta una colección de aplicaciones para ayudarte cuando no tienes acceso a Internet.  
-    <br/><br/>Una vez que se haya conectado, simplemente abra http://comolamantequilla.lan en su navegador.
-  continue_button: 'Continuar'

_data/home.yml

@@ -1,32 +1,11 @@
-site_name: 'Butter'
+# This file is sitewide, for all languages.
-page_logo: ['/assets/images/butter-logo-feature-large.svg', 'Butter App Feature Logo']
+# To specify per-language data, use the _i18n folder's yml files.
-title: 'Life without internet made smoother. <br /> Get access to tools that help.'
-text:
-  show_chat: |
-    This Butter Box offers an Android app store and chat rooms. <br />
-    Download the Butter app to discover and download free, ad-free <br />
-    apps or to spread the love and share apps offline. Or, create a <br />
-    chat room which hangs on to messages while you're gone and <br/>
-    delivers them whenever your device reconnects to the Butter Box.
-  dont_show_chat: |
-    Butter features a collection of apps to make life without <br /> the internet a little smoother.  Use it to discover and download <br /> free, ad-free apps or to spread the love and share offline.
-fdroid_apps_caption: Just a few of the apps available via Butter.
-fdroid_button_text: 'Download Android App'
-chat_button_text: 'Start a chat room instantly'
-image: ['/assets/images/butter-collection-features-offline-essentials.svg', 'Butter App features collection']
 
-modal_data:
+page_logo: '/assets/images/butter-logo-feature-large.svg'
-  title: 'Butter: Free, ad-free apps to help you offline'
+app_tiles_image: '/assets/images/butter-collection-features-offline-essentials.svg'
-  logo: ['/assets/images/butter-app-icon-large.svg', 'Butter App Logo']
+
-  text: |
+modal:
-    Be in-the-know, be entertained, manage business and life—even with little internet.
+  butter_app_logo: '/assets/images/butter-app-icon-large.svg'
-    Butter app makes it easy to find apps that use less internet and battery.
-    Download your favorites, and get free updates from Butter. Care to share? Send any app on your phone to a friend near you with Butter nearby. No internet needed.
-  info_list:
-    - By Team Butter
-    - Available for Android phones
-    - Less than 10 MB!
-  button_text: 'Download Android App'
   button_url: '/assets/download/butter.apk'
   slider_list:
     - '/assets/images/slide-img-1.png'
@@ -34,13 +13,7 @@ modal_data:
     - '/assets/images/slide-img-3.png'
     - '/assets/images/slide-img-4.png'
     - '/assets/images/slide-img-5.png'
-  warning: |
-    You will need to enable downloads from unknown sources to install this app on your Android phone.
 
-captive_data:
+language_selector:
-  welcome_message: |
+  en: English
-    Welcome to Butterbox.
+  es: Español
-  welcome_details: |
-    This network doesn't provide internet access, just the next best thing, the Butter app.  Butter features a collection of apps to make life without the internet a little smoother.
-    <br/><br/>Once you've connected, simply open http://butterbox.lan in your browser. 
-  continue_button: 'Continue'

_i18n/en.yml

@@ -0,0 +1,35 @@
+site_name: 'Butter'
+page_logo_alt: 'Butter App Feature Logo'
+title: 'Life without internet made smoother. <br /> Get access to tools that help.'
+text:
+  show_chat: |
+    This Butter Box offers an Android app store and chat rooms. Download the Butter app to discover and download free, ad-free apps or to spread the love and share apps offline. Or, create a chat room which hangs on to messages while you're gone and delivers them whenever your device reconnects to the Butter Box.
+  dont_show_chat: |
+    Butter features a collection of apps to make life without the internet a little smoother. Use it to discover and download free, ad-free apps or to spread the love and share offline.
+fdroid_apps_caption: Just a few of the apps available via Butter
+fdroid_button_text: 'DOWNLOAD ANDROID APP'
+chat_button_text: 'CREATE A CHAT ROOM'
+app_tiles_image_alt: 'Butter App features collection'
+view_all_apps: 'View All Apps'
+built_on_fdroid: Built on F-Droid Free Software
+
+modal:
+  title: 'Butter: Free, ad-free apps to help you offline'
+  butter_app_logo_alt: 'Butter App Logo'
+  text: |
+    Be in-the-know, be entertained, manage business and life—even with little internet. Butter app makes it easy to find apps that use less internet and battery. Download your favorites, and get free updates from Butter. Care to share? Send any app on your phone to a friend near you with Butter nearby. No internet needed.
+  info_list:
+  - By Team Butter
+  - Available for Android phones
+  - Less than 10 MB!
+  button_text: 'DOWNLOAD ANDROID APP'
+  warning: |
+    You will need to enable downloads from unknown sources to install this app on your Android phone.
+
+captive:
+  welcome_message: |
+    Welcome to Butterbox.
+  welcome_details: |
+    This network doesn't provide internet access, just the next best thing, the Butter app. Butter features a collection of apps to make life without the internet a little smoother.
+    <br/><br/>Once you've connected, simply open http://butterbox.lan in your browser. 
+  continue_button: 'Continue'

_i18n/es.yml

@@ -0,0 +1,36 @@
+site_name: 'Mantequilla'
+page_logo_alt: 'Logo de Mantequilla'
+title: 'Para hacer tu vida sin Internet más fácil. <br /> Obtén herramientas que ayudan.'
+text:
+  show_chat: |
+    Este Caja de Mantequilla presenta una colección de aplicaciones de Android y salas de chat. Descarga la aplicación Mantequilla para descubrir y descargar aplicaciones gratuitas y sin publicidad o compartir cuando no tienes conexión. O, crea una sala de chat que conserva mensajes cuando no estás aquí y los entrega cuando se vuelve a conectar a la Caja de Mantequilla.
+  dont_show_chat: |
+    Mantequilla presenta una colección de aplicaciones para ayudarte cuando no tienes acceso a Internet. Úsala para descubrir y descargar aplicaciones gratuitas y sin publicidad o compartir cuando no tienes conexión.
+fdroid_apps_caption: Unas aplicaciónes disponible de Mantequilla
+fdroid_button_text: 'DESCARGA LA APLICACIÓN ANDROID'
+chat_button_text: 'CREA UN SALA DE CHAT'
+app_tiles_image_alt: 'colección de aplicaciones de Mantequilla'
+view_all_apps: 'Ver todas las aplicaciones'
+built_on_fdroid: 'Basado en el software libre F-Droid'
+
+modal:
+  title: 'Mantequilla: aplicaciones gratuitas y sin anuncios para ayudarte cuando
+    no tienes acceso a internet'
+  butter_app_logo_alt: 'Logo de aplicación Mantequilla'
+  text: |
+    Mantente al tanto, diviértete, administra tus negocios y tu vida, incluso con poco Internet. La aplicación Mantequilla facilita la tarea de encontrar aplicaciones que usan menos Internet y batería. Descarga tus favoritas y obtén actualizaciones gratuitas de Mantequilla. ¿Te interesa compartir? Envía cualquier aplicación en tu teléfono a un amigo cerca de ti con “Mantequilla cercano”. No se necesita internet.
+  info_list:
+  - Autor Team Butter
+  - Disponible para teléfonos Android
+  - Menos de 10 MB!
+  button_text: 'DESCARGA'
+  warning: |
+    Debes 'habilitar descargas de fuentes desconocidas' para descargar esta aplicación en tu teléfono Android.
+
+captive:
+  welcome_message: |
+    Bienvenido. Esto es "como la mantequilla."
+  welcome_details: |
+    Esta red no proporciona acceso a Internet, solo lo mejor de la siguiente, la aplicación Mantequilla. Mantequilla presenta una colección de aplicaciones para ayudarte cuando no tienes acceso a Internet. 
+    <br/><br/>Una vez que se haya conectado, simplemente abra http://comolamantequilla.lan en su navegador. 
+  continue_button: 'Continuar'

_includes/footer.html

@@ -1,10 +1,7 @@
 <footer class="footer-area">
   <div class="container">
     <div class="footer-area-wrapper text-center">
-	    <!--
+        <a href="apps">{% t view_all_apps %}</a> | <a href="https://gitlab.com/guardianproject/wind-fdroidclient">{% t built_on_fdroid %}</a>
-      <p class="ls-40">&copy; {{ 'now' | date: "%Y" }} Butter. All rights reserved.</p>
-      	-->
-        <a href="apps">View All Apps</a> | <a href="https://gitlab.com/guardianproject/wind-fdroidclient">Built on F-Droid Free Software</a>
     </div>
   </div>
 </footer>

_includes/header.html

@@ -6,13 +6,18 @@
           <img src="{{ site.logo }}" alt="Butter App Logo" />
         </a>
         <div class="header-logo-text">
-		<p class="">{{ site.data.home.site_name }}</p>
+          <p class="">{{ site.data.home.site_name }}</p>
         </div>
       </div>
       <div class="header-menu">
         <ul class="header-menu-list ls-40">
-		<li><a href="/en" class="darklink">English</a></li>
+        {% for lang in site.languages %}
-		<li><a href="/es" class="darklink">Español</a></li>
+          {% if forloop.index0 == 0 %}
+            <li><a href="{{ page.url }}" class="darklink">{{ site.data.home.language_selector[lang] }}</a></li>
+          {% else %}
+            <li><a href="/{{ lang }}{{ page.url }}" class="darklink">{{ site.data.home.language_selector[lang] }}</a></li>
+          {% endif %}
+        {% endfor %}
         </ul>
       </div>
     </div>

_includes/modal.html

@@ -7,26 +7,26 @@
       <main class="modal__content" id="product-modal-content">
         <div class="modal__content__header">
           <div class="header__logo">
-            <img src="{{ site.baseurl }}{{ page_data.modal_data.logo[0] }}" alt="{{ page_data.modal_data.logo[1] }}" />
+            <img src="{{ site.baseurl }}{{ page_data.modal.butter_app_logo }}" alt="{% t modal.butter_app_logo_alt %}" />
           </div>
           <div class="header__text">
-            <h2 class="modal__title ls-40" id="product-modal-title">{{ page_data.modal_data.title }}</h2>
+            <h2 class="modal__title ls-40" id="product-modal-title">{% t modal.title %}</h2>
             <ul class="info__list">
-              {% for item in page_data.modal_data.info_list %}
+              {% for item in site.translations[site.lang].modal.info_list %}
                 <li>{{ item }}</li>
               {% endfor %}
             </ul>
           </div>
           <div class="header__btn">
-            <a class="btn-main" href="{{ page_data.modal_data.button_url }}">{{ page_data.modal_data.button_text | upcase }}</a>
+            <a class="btn-main" href="{{ page_data.modal.button_url }}">{% t modal.button_text %}</a>
           </div>
         </div>
         <div class="modal__content__description">
-          <p class="content-text ls-40">{{ page_data.modal_data.text }}</p>
+          <p class="content-text ls-40">{% t modal.text %}</p>
         </div>
         <div class="modal__content__slider">
           <div class="screens-slider">
-            {% for slide in page_data.modal_data.slider_list %}
+            {% for slide in page_data.modal.slider_list %}
               <div class="slider-item">
                 <img src="{{ site.baseurl }}{{ slide }}" alt="slider image" />
               </div>
@@ -35,7 +35,7 @@
         </div>
       </main>
       <footer class="modal__footer">
-        <p class="ls-40">{{ page_data.modal_data.warning | markdownify | remove: '<p>' | remove: '</p>' }}</p>
+        <p class="ls-40">{% t modal.warning %}</p>
       </footer>
     </div>
   </div>

_layouts/basic.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% include seo.html %}
-    <title>{{ site.title }}</title>
+    <title>{% t title %}</title>
     <link rel="icon" href="{{ '/assets/images/butter-favicon-120.png' | relative_url }}" type="image/png" />
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/slick.min.css"/>
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css" />

captive.html

@@ -7,14 +7,14 @@ layout: basic
 <section class="content-area">
   <div class="container">
     <div class="content-area-wrapper text-center">
-      <img src="{{site.baseurl}}{{ page_data.page_logo[0] }}" alt="{{ page_data.page_logo[1] }}" />
+      <img src="{{site.baseurl}}{{ page_data.page_logo }}" alt="{% t page_logo_alt %}" />
-      <h1 class="content-title mb-2">{{ page_data.captive_data.welcome_message }}</h1>
+      <h1 class="content-title mb-2">{% t captive.welcome_message %}</h1>
-      <p class="content-text text-black ls-40 mb-2">{{ page_data.captive_data.welcome_details }}</p>
+      <p class="content-text text-black ls-40 mb-2">{% t captive.welcome_details %}</p>
       <!-- Use NoDogSplash-provided variables to render a "continue" button -->
       <form method="get" action="$authaction">
         <input type="hidden" name="tok" value="$tok">
         <input type="hidden" name="redir" value="$redir">
-        <input type="submit" value="{{ page_data.captive_data.continue_button }}">
+        <input type="submit" value="{% t captive.continue_button %}">
       </form>
     </div>
   </div>

index.html

@@ -7,24 +7,23 @@ layout: default
 <section class="content-area">
   <div class="container">
     <div class="content-area-wrapper text-center">
-      <img src="{{site.baseurl}}{{ page_data.page_logo[0] }}" alt="{{ page_data.page_logo[1] }}" />
+      <img src="{{site.baseurl}}{{ page_data.page_logo }}" alt="{% t page_logo_alt %}" />
-      <h1 class="content-title mb-2 mt-2">{{ page_data.title }}</h1>
+      <h1 class="content-title mb-2 mt-2">{% t title %}</h1>
       <p class="content-text text-black ls-40 mb-2">
         {% if site.data.deployment.show_chat %}
-          {{ page_data.text.show_chat }}
+          {% t text.show_chat %}
         {% else %}
-          {{ page_data.text.dont_show_chat }}
+          {% t text.dont_show_chat %}
         {% endif %}
       </p>
       <div class="content-img">
-        <img src="{{site.baseurl}}{{ page_data.image[0] }}" alt="{{ page_data.image[1] }}" />
+        <img src="{{site.baseurl}}{{ page_data.app_tiles_image }}" alt="{% t app_tiles_image_alt %}" />
-        <p class="caption ls-40 mb-2">{{ page_data.fdroid_apps_caption }}</p>
+        <p class="caption ls-40 mb-2">{% t fdroid_apps_caption %}</p>
       </div>
-      <a class="btn-main btn-modal" href="#" data-micromodal-trigger="product-modal">{{ page_data.fdroid_button_text | upcase }}</a>
+      <a class="btn-main btn-modal" href="#" data-micromodal-trigger="product-modal">{% t fdroid_button_text %}</a>
       {% if site.data.deployment.show_chat %}
-      <a class="btn-main btn-modal" href="/chat">{{ page_data.chat_button_text | upcase }}</a>
+      <a class="btn-main btn-modal" href="/chat">{% t chat_button_text %}</a>
       {% endif %}
-      <p class="content-text text-black ls-40 mb-2">{{ page_data.chat_text }}</p>
     </div>
   </div>
 </section>