Migrate all homepage strings into app.ftl file, update DE sample FTL …

…file
mozilla · May 28, 2021 · 3b7e080 · 3b7e080
1 parent fdae805
commit 3b7e080
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 20 deletions.
diff --git a/privaterelay/ftl_bundles.py b/privaterelay/ftl_bundles.py
@@ -1,3 +1,3 @@
 from django_ftl.bundles import Bundle
 
-main = Bundle(['privaterelay/brands.ftl', 'privaterelay/home.ftl'])
+main = Bundle(['privaterelay/app.ftl'])
diff --git a/privaterelay/locales/de/privaterelay/app.ftl b/privaterelay/locales/de/privaterelay/app.ftl
@@ -0,0 +1,22 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+### Brands
+
+-brand-name-firefox-relay = Firefox Relay
+
+### Navigation 
+
+logo-alt= { -brand-name-firefox-relay }
+nav-home = Home
+# FAQ stands for Frequently Asked Questions. The intent of this page is to answer commonly asked questions.
+nav-faq = FAQ
+
+### Home Page
+### URL: https://dev.fxprivaterelay.nonprod.cloudops.mozgcp.net/
+
+home-hero-headline = [DE] Hide your real email address to help protect your identity
+home-hero-copy = { -brand-name-firefox-relay } makes it easy to create aliases, randomly generated email addresses that forward to your real inbox. Use it to protect your online accounts - and your identity - from hackers. Sign in with your { -brand-firefox } account to get started.
+home-hero-cta = Sign In
+
diff --git a/privaterelay/locales/en/privaterelay/app.ftl b/privaterelay/locales/en/privaterelay/app.ftl
@@ -2,10 +2,37 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-### URL: {ADD URl HERE}
+### Brands
+### Dev Note: When adding to this section, use this file for naming conventions: https://github.com/mozilla/bedrock/blob/master/l10n/en/brands.ftl
 
-logo-alt= { -brand-name-firefox-relay }
+-brand-name-firefox = Firefox
+-brand-name-firefox-relay = Firefox Relay
+-brand-name-firefox-account = Firefox Account
+-brand-name-firefox-browser = Firefox Browser
+
+### Navigation 
 
+logo-alt= { -brand-name-firefox-relay }
 nav-home = Home
 # FAQ stands for Frequently Asked Questions. The intent of this page is to answer commonly asked questions.
 nav-faq = FAQ
+
+### Home Page
+### URL: https://dev.fxprivaterelay.nonprod.cloudops.mozgcp.net/
+
+home-hero-headline = Hide your real email address to help protect your identity
+home-hero-copy = { -brand-name-firefox-relay } makes it easy to create aliases, randomly generated email addresses that forward to your real inbox. Use it to protect your online accounts - and your identity - from hackers. Sign in with your { -brand-name-firefox-account } to get started.
+home-hero-cta = Sign In
+
+how-it-works-headline = How It Works
+how-it-works-subheadline = Protect your personal identity everywhere you use the { -brand-name-firefox-browser }.
+how-it-works-step-1-headline = Install the extension
+
+# Variables:
+#   $addon (url) - https://addons.mozilla.org/firefox/addon/private-relay/
+#   $attrs (string) - specific attributes added to external links
+how-it-works-step-1-copy-html = <a href="{ $addon }" { $attrs }>Download the Relay extension for { -brand-name-firefox }</a>. Select the icon that appears on your { -brand-name-firefox } toolbar to access the sign in page. Sign in with your { -brand-name-firefox-account } to get started.
+how-it-works-step-2-headline = Create a new alias
+how-it-works-step-2-copy = As you browse, the Relay icon will appear in form fields where sites ask for your email address. Select it to generate a new, random address that ends in @relay.firefox.com. Relay will forward messages to the primary email address associated with your account.
+how-it-works-step-3-headline = Manage your account
+how-it-works-step-3-copy = Sign in to the Relay website to keep track of the aliases you’ve created.  If you find that one receives spam or unwanted messages, you can block all messages or even delete the alias, right from the management page.
diff --git a/privaterelay/templates/home.html b/privaterelay/templates/home.html
@@ -7,13 +7,13 @@
 
 {% include "includes/messages.html" %}
 
-{% withftl bundle='privaterelay.ftl_bundles.main' %}
+{% ftlconf bundle='privaterelay.ftl_bundles.main' %}
 
 <main data-landing-page="" class="flx row-full-width home-hero">
 	<div class="flx flx-row hero-content">
 		<div class="hero-left flx flx-col">
         <h1 class="home-hero-headline">{% ftlmsg 'home-hero-headline' %}</h1>
-        <span class="sub-head hero-sub-head">Firefox Relay makes it easy to create aliases, randomly generated email addresses that forward to your real inbox. Use it to protect your online accounts - and your identity - from hackers. Sign in with your Firefox account to get started.</span>
+        <span class="sub-head hero-sub-head">{% ftlmsg 'home-hero-copy' %}</span>
 			{% include "includes/landing_ctas.html" with page_position="landing-hero" %}
 		</div>
 		<div class="hero-right flx flx-col">
@@ -27,41 +27,35 @@ <h1 class="home-hero-headline">{% ftlmsg 'home-hero-headline' %}</h1>
 </main>
 	<div class="container flx al-cntr flx-col">
 		<div class="how-it-works-content txt-white flx flx-col al-cntr">
-      <h2 class="how-it-works-header text-center">How It Works</h2>
-      <span class="text-center">Protect your personal identity everywhere you use the Firefox browser.</span>
+      <h2 class="how-it-works-header text-center">{% ftlmsg 'how-it-works-headline' %}</h2>
+      <span class="text-center">{% ftlmsg 'how-it-works-subheadline' %}</span>
       <div class="how-it-works-steps flx flx-row">
         <section class="step step-1 flx flx-col al-cntr">
             <div class="step-illustration step-1"></div>
             <div class="step-text step-1">
-              <h3 class="step-headline ff-Met">Install the extension</h3>
+              <h3 class="step-headline ff-Met">{% ftlmsg 'how-it-works-step-1-headline' %}</h3>
               <p class="step-body">
-                <a href="https://addons.mozilla.org/firefox/addon/private-relay/" target="_blank" rel="noopener" class="text-link">Download the Relay extension for Firefox</a>. Select the icon that appears on your Firefox toolbar to access the sign in page. Sign in with your Firefox account to get started.
+                {% ftlmsg 'how-it-works-step-1-copy-html' url='https://addons.mozilla.org/firefox/addon/private-relay/' attrs='target="_blank" rel="noopener" class="text-link"' %}
               </p>
             </div>
           </section>
           <section class="step step-2 flx flx-col al-cntr">
             <div class="step-illustration step-2"></div>
             <div class="step-text step-2">
-              <h3 class="step-headline ff-Met">Create a new alias</h3>
-              <p class="step-body">
-                As you browse, the Relay icon will appear in form fields where sites ask for your email address. Select it to generate a new, random address that ends in @relay.firefox.com. Relay will forward messages to the primary email address associated with your account.
-              </p>
+              <h3 class="step-headline ff-Met">{% ftlmsg 'how-it-works-step-2-headline' %}</h3>
+              <p class="step-body">{% ftlmsg 'how-it-works-step-2-copy' %}</p>
             </div>
           </section>
           <section class="step step-3 flx flx-col al-cntr">
             <div class="step-illustration step-3"></div>
             <div class="step-text step-3">
-              <h3 class="step-headline ff-Met">Manage your account</h3>
-              <p class="step-body">
-                Sign in to the Relay website to keep track of the aliases you’ve created.  If you find that one receives spam or unwanted messages, you can block all messages or even delete the alias, right from the management page.
-              </p>
+              <h3 class="step-headline ff-Met">{% ftlmsg 'how-it-works-step-3-headline' %}</h3>
+              <p class="step-body">{% ftlmsg 'how-it-works-step-3-copy' %}</p>
             </div>
           </section>
       </div>
 			{% include "includes/landing_ctas.html" with page_position="landing-bottom" %}
 		</div>
 	</div>
 
-{% endwithftl %}
-
 {% endblock %}
diff --git a/privaterelay/templates/includes/landing_ctas.html b/privaterelay/templates/includes/landing_ctas.html
@@ -1,6 +1,9 @@
 {% load static %}
 {% load socialaccount %}
+{% load ftl %}
+
+{% ftlconf bundle='privaterelay.ftl_bundles.main' %}
 
 <div class="hero-sign-up-bg bg-fx-gradient fx-gradient-btn">
-  <a data-ga="send-ga-funnel-pings" data-event-category="Sign In" data-event-label="sign-up-btn-{{ page_position }}" class="hero-sign-up blue-button puffy" href="{% provider_login_url 'fxa' process='login' %}">Sign In</a>
+  <a data-ga="send-ga-funnel-pings" data-event-category="Sign In" data-event-label="sign-up-btn-{{ page_position }}" class="hero-sign-up blue-button puffy" href="{% provider_login_url 'fxa' process='login' %}">{% ftlmsg 'home-hero-cta' %}</a>
 </div>