Merge branch 'per-deployment-copy' into 'master'

Per environment configuration

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

_data/deployment.yml

@@ -0,0 +1,3 @@
+# Deployment-specific variables to specify what features to surface.
+has_internet: true
+show_chat: false

_data/deployments/butterbox/deployment.yml

@@ -0,0 +1,3 @@
+# Deployment-specific variables to specify what features to surface.
+has_internet: false
+show_chat: true

_data/deployments/web/deployment.yml

@@ -0,0 +1,3 @@
+# Deployment-specific variables to specify what features to surface.
+has_internet: true
+show_chat: false

_data/en/home.yml

@@ -1,13 +1,20 @@
 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: |
+text:
-  Butter features a collection of apps to make life without <br /> the internet a little smoother.
+  show_chat: |
-  Use it to discover and download <br /> free, ad-free apps or to spread the love and share offline.
+    This Butter Box offers an Android app store and chat rooms. <br />
-button_text: 'Download Android App'
+    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']

_data/es/home.yml

@@ -1,9 +1,14 @@
 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. <br /> Obtén herramientas que ayudan.'
+title: 'Para hacer tu vida sin Internet más fácil. Obtén herramientas que ayudan.'
-text: |
+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.
-button_text: 'DESCARGA LA APLICACIÓN ANDROID'
+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']
 
 

_data/home.yml

@@ -1,13 +1,20 @@
 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: |
+text:
-  Butter features a collection of apps to make life without <br /> the internet a little smoother.
+  show_chat: |
-  Use it to discover and download <br /> free, ad-free apps or to spread the love and share offline.
+    This Butter Box offers an Android app store and chat rooms. <br />
-button_text: 'Download Android App'
+    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']

_layouts/basic.html

@@ -21,7 +21,7 @@
     <script src="{{ site.baseurl }}/assets/js/micromodal.min.js"></script>
     <script src="{{ site.baseurl }}/assets/js/main.js"></script>
 
-
+    {% if site.data.deployment.has_internet %}
     <!-- Matomo -->
     <script>
       var _paq = window._paq = window._paq || [];
@@ -29,7 +29,7 @@
       _paq.push(['trackPageView']);
       _paq.push(['enableLinkTracking']);
       (function() {
-    var u="//metrics.cleaninsights.org/";
+        var u="https://metrics.cleaninsights.org/";
         _paq.push(['setTrackerUrl', u+'matomo.php']);
         _paq.push(['setSiteId', '20']);
         var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
@@ -37,7 +37,7 @@
       })();
     </script>
     <!-- End Matomo Code -->
-
+    {% endif %}
 
   </body>
 </html>

_scss/helpers/utilities.scss

@@ -64,6 +64,7 @@ body {
   &:hover {
     background-color: lighten($royal-blue, 5%);
   }
+  margin-bottom: 10px;
 }
 
 
@@ -77,6 +78,13 @@ body {
   }
 }
 
+.caption {
+  color: $dark-gray;
+  font-family: $text-font-family;
+  font-size: 16px;
+  margin-top: 8px;
+}
+
 .text-black {
   color: $black;
 }
@@ -94,6 +102,9 @@ body {
 .mb-2 {
   margin-bottom: 24px;
 }
+.mt-2 {
+  margin-top: 24px;
+}
 
 
 // Arrows classes

_scss/pages/home.scss

@@ -3,6 +3,7 @@
 // -------------------------
 body {
   background-color: $gold;
+  min-height: 100vh;
 }
 
 // -------------------------
@@ -92,6 +93,7 @@ a:active {
 .content-area {
   &-wrapper {
     margin-top: 30px;
+    min-height: calc(100vh - 202px);  // take up space above the footer
     margin-bottom: 30px;
     .content-title {
       font-size: 42px;
@@ -115,7 +117,7 @@ a:active {
       img {
         display: block;
         margin: 0 auto;
-        max-width: 100%;
+        max-width: 70%;
       }
     }
   }

index.html

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