Add jekyll-multiple-language-plugin and refactor strings into /_i18n

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
@@ -27,3 +28,6 @@ end
 
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+# HTTP Server for local development
+gem "webrick", "~> 1.7"

_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/home.yml

@@ -1,46 +1,15 @@
-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'
     - '/assets/images/slide-img-2.png'
     - '/assets/images/slide-img-3.png'
     - '/assets/images/slide-img-4.png'
-    - '/assets/images/slide-img-5.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'

_i18n/en.yml

@@ -1,5 +1,5 @@
 site_name: 'Butter'
-page_logo: ['/assets/images/butter-logo-feature-large.svg', 'Butter App Feature Logo']
+page_logo_alt: 'Butter App Feature Logo'
 title: 'Life without internet made smoother. <br /> Get access to tools that help.'
 text:
   show_chat: |
@@ -11,13 +11,15 @@ text:
   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'
+fdroid_button_text: 'DOWNLOAD ANDROID APP'
-chat_button_text: 'Start a chat room instantly'
+chat_button_text: 'CREATE A CHAT ROOM'
-image: ['/assets/images/butter-collection-features-offline-essentials.svg', 'Butter App features collection']
+app_tiles_image_alt: 'Butter App features collection'
+view_all_apps: 'View All Apps'
+built_on_fdroid: Built on F-Droid Free Software
 
-modal_data:
+modal:
   title: 'Butter: Free, ad-free apps to help you offline'
-  logo: ['/assets/images/butter-app-icon-large.svg', 'Butter App Logo']
+  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.
@@ -26,18 +28,11 @@ modal_data:
     - By Team Butter
     - Available for Android phones
     - Less than 10 MB!
-  button_text: 'Download Android App'
+  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:
+captive:
   welcome_message: |
     Welcome to Butterbox.
   welcome_details: |

_i18n/es.yml

@@ -1,5 +1,5 @@
 site_name: 'Mantequilla'
-page_logo: ['/assets/images/butter-logo-feature-large.svg', 'Butter App Feature Logo']
+page_logo_alt: 'Logo de Mantequilla'
 title: 'Para hacer tu vida sin Internet más fácil. Obtén herramientas que ayudan.'
 text:
   show_chat: |
@@ -8,13 +8,14 @@ text:
    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
+chat_button_text: 'CREA UN SALA DE CHAT'
-image: ['/assets/images/butter-collection-features-offline-essentials.svg', 'Butter App features collection']
+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:
-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']
+  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:
@@ -22,17 +23,10 @@ modal_data:
     - 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:
+captive:
   welcome_message: |
     Bienvenido.  Esto es "como la mantequilla."
   welcome_details: |

_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/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>