Skip to content

Commit

Permalink
Initial support for Pocket l10n using Fluent strings in Bedrock (#11541)
Browse files Browse the repository at this point in the history 
* Support running in Mozorg or Pocket modes in dev or prod via Docker, via Makefile commands

* Support Mozorg or Pocket mode via env var

Setting the SITE_MODE env var to Mozorg or Pocket will now switch the site
into serving only the URLs for that particular mode.

When in Pocket mode, its pages are served from the root path, not from
the 'externalpages' namespace/module name

The default behaviour, for now, remains as is: all URLs will be served, and
Pocket URLs are served as 'external/pocket/*`

* Flatten externalpages/pocket to just pocket

* Make Mozorg the default mode, with Pocket enabled via SITE_MODE env var

* Add in robots.txt for Pocket mode, based on current state of https://getpocket.com/robots.txt

* Revert "Add in robots.txt for Pocket mode, based on current state of https://getpocket.com/robots.txt"

This reverts commit 5934b4d.

* Initial laying in of l10n-pocket directory and config files

* First pass at marking up a Pocket template for Fluent

There's more work to be done to wire it all up - the views aren't aware of the
Fluent side, yet

* Enable Fluent string replacement for Pocket About page

Note how we get the brands.ftl from main l10n to _always_ be used in Pocket
mode, regardless of locale.

* Switch to looking up Pocket paths via named URLs

* Fix slip in Fluent markup

* Update README for l10n-pocket with info about namespacing

* Markup spacing nitfix

* Improve markup of HTML: remove ids from strings; snake_case variables

* Switch BETA to title case, to avoid translation confusion with an acronym.

Has no semantic impact to change it.

* Fixup: two missing curly quotes

* Nitfix: snake_case for all FTL variables

* Fix up broken FTL markup: brands can't be used directly in a template; need to go via the template-specific FTL file

* Refactor attributes for hyperlinks to reduce risk of breakage and increaase scope to tune them without triggering new translations

* Collapse all press-link attrs into a single variable, to make less brittle for translation

* Add a Pocket-specific brands.ftl file and wire it in

The -brand-name-read-it-later-inc string is moved from l10n/en/brands.ftl
into the new Pocket-specific one, and can be used as proof that the new brands
file is being loaded, because the correct Read It Later, Inc string appears
at the bottom of the about page.

Also improve some of the brand-meets-product phrasing, to help with translation
- eg Pocket Premium, Pocket for Firefox

* Add 'es' locale, for mapping to non-Spain versions of Spanish

* Drop 'Pocket for Firefox' as a dedicated brand name -- unnecessary

* Ensure l10n-pocket/en/brands.ftl is disovered by default in Pocket mode

This means we can do without the override that forces the loading of brands
when in Pocket mode. We still need it for non-en locales, but at least now
it behaves the same as for Mozorg mode

* Update Pocket l10n README now the two modes do not share l10n files

* Typo fixup

* Explicitly redefine FLUENT_PATHS, to avoid pain later
  • Loading branch information
@stevejalim
stevejalim authored May 3, 2022
1 parent 3709447 commit 1df8b3d
Show file tree
Hide file tree
Showing 16 changed files with 397 additions and 93 deletions.
53 changes: 35 additions & 18 deletions bedrock/pocket/templates/pocket/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@

{% extends "pocket/base.html" %}

{% block page_title %}About Us{% endblock %}
{% block page_title %}{{ ftl('pocket-about-us') }}{% endblock %}

{% block page_desc %}Pocket empowers people to keep their minds focused, stimulated, and nourished. We’re powered by a community of interesting people with curious minds.{% endblock %}
{% block page_desc %}{{ ftl('pocket-about-us-page-desc') }}{% endblock %}

{% block pocket_css %}
{{ css_bundle('pocket-about') }}
Expand All @@ -20,45 +20,62 @@
<div class="intro-wrapper">
<section class="about-section first">
<div class="about-section-text-wrapper">
<h1 class="about-section-heading">Hi, we're Pocket.</h1>
<p class="about-section-body"> We’re powered by a community of interesting people with curious minds, and we empower people to keep their minds focused, stimulated, and nourished. Which makes us a refreshing change from other digital spaces.</p>
<h1 class="about-section-heading">{{ ftl('pocket-about-us-hi') }}</h1>
<p class="about-section-body">{{ ftl('pocket-about-powered-by-community-of-interesting-people') }}</p>
</div>
</section>
</div>
<section class="about-section second">
<div class="about-section-text-wrapper">
<h3 class="about-section-heading">Save your inspirations</h3>
<p class="about-section-body">If something catches your interest, there’s probably something to it. With our <a id="save-button-for-the-internet" href="https://getpocket.com/save-to-pocket"> save button for the internet</a> and our award-winning <a id="top-pocket-app" href="https://getpocket.com/add">Pocket app</a> you can save anything from across the web in a distraction free space, for you to focus and let the ideas flow.</p>
<h3 class="about-section-heading">{{ ftl('pocket-about-us-save-inspirations') }}</h3>
<p class="about-section-body">{{ ftl('pocket-about-if-something-catches-your-interest',
save_to_pocket=url('pocket.save-to-pocket'),
add_to_pocket=url('pocket.add') ) }}
</p>
</div>
</section>
<section class="about-section third">
<div class="about-section-text-wrapper">
<h3 class="about-section-heading">Find hidden gems</h3>
<p class="about-section-body">The internet is filled with buried treasures and our vibrant, well-read community has a real knack for finding them. Through the act of saving and consuming content, Pocket users signal where fascination can be found.</p>
<p class="about-section-body">Our curators vet the most fascinating finds to ensure they’re from a diverse range of publications with a track record of trustworthy and accurate coverage, and we share them on <a id="home-page" href="https://getpocket.com/">GetPocket.com</a>, <a id="pocket-and-firefox" href="https://getpocket.com/pocket-and-firefox">Pocket for Firefox</a>, in our <a id="daily-newsletter" href="https://getpocket.com/explore/pocket-hits-signup">daily newsletter</a>, and within the <a id="bottom-pocket-app" href="https://getpocket.com/add">Pocket app</a>. Our recommendations are available primarily in English and German, though we look forward to sharing in more languages in the future.</p>
<h3 class="about-section-heading">{{ ftl('pocket-about-find-hidden-gems')}}</h3>
<p class="about-section-body">{{ ftl('pocket-about-internet-filled-with-buried-treasures') }}</p>
<p class="about-section-body">

{% set pocket_and_firefox_attrs = 'id="pocket-and-firefox" href="'|safe ~ url('pocket.pocket-and-firefox') ~ '"'|safe %}
{% set pocket_app_attrs = 'id="bottom-pocket-app" href="'|safe ~ url('pocket.add') ~ '"'|safe %}
{{ ftl(
'pocket-about-our-curators-vet-the-most-fascinating',
pocket_home_attrs='id="home-page" href="/"',
pocket_home_domain='GetPocket.com',
pocket_and_firefox_attrs=pocket_and_firefox_attrs,
pocket_daily_newsletter_attrs='id="daily-newsletter" href="https://getpocket.com/explore/pocket-hits-signup"',
pocket_app_attrs=pocket_app_attrs)
}}
</p>
</div>
</section>
<section class="about-section fourth">
<div class="about-section-text-wrapper">
<h3 class="about-section-heading">Use Pocket your way</h3>
<p class="about-section-body">There are lots of ways you can use Pocket. Some people use it to save stories throughout the day to read when they’re ready. Hunter-gatherer types use it to save all the things they want to read, watch, listen to, or buy. Others use Pocket to highlight key passages to help them grow, learn, and thrive.</p>
<p class="about-section-body">And some folks love exploring Pocket’s recommendations to find inspiration, challenge their views, and see the occasional cat (or dog) story. </p>
<h3 class="about-section-heading">{{ ftl('pocket-about-use-pocket-your-way') }}</h3>
<p class="about-section-body">{{ ftl('pocket-about-there-are-lots-of-ways') }}</p>
<p class="about-section-body">{{ ftl('pocket-about-some-folks-love-exploring') }}</p>
</div>
</section>
<section class="about-section fifth">
<div class="about-section-text-wrapper">
<h3 class="about-section-heading">Know it's good</h3>
<p class="about-section-body"> The internet’s only as good as the content you encounter, so — by saving and consuming with intent — together we make Pocket a brighter corner of the internet. And, as part of the Mozilla and Firefox family, we do all this with the same dedication to privacy you’ve come to expect from Firefox and Mozilla. </p>
<h3 class="about-section-heading">{{ ftl('pocket-about-know-its-good') }}</h3>
<p class="about-section-body">{{ ftl('pocket-about-internets-only-as-good-as') }}</p>
</div>
</section>
<section class="about-cta-section">
<h2 class="about-cta-heading">Welcome to the sunny side of the web.</h2>
<h2 class="about-cta-heading">{{ ftl('pocket-about-welcome-to-the-sunny-side') }}</h2>
<div class="cta-wrapper">
<a id="start-using-pocket" href="https://getpocket.com/signup">Start using Pocket</a>
<a id="start-using-pocket" href="https://getpocket.com/signup">{{ ftl('pocket-about-start-using-pocket') }}</a>
</div>
<hr/>
<p class="about-cta-body">Contact us for press inquiries at <a href="mailto:press@getpocket.com">press@getpocket.com</a>.</p>
<p class="about-cta-body">Download our images and press kit <a id="press-page" href="https://blog.getpocket.com/press/">here</a>.</p>
<p class="about-cta-body">{{ ftl('pocket-about-contact-us-press', press_email_link='mailto:press@getpocket.com',
press_email='press@getpocket.com' ) }}</p>
{% set presspage_attrs = 'id="press-page" href="https://blog.getpocket.com/press/"' %}
<p class="about-cta-body">{{ ftl('pocket-about-download-press-kit', presspage_attrs=presspage_attrs)}}</p>
</section>

{% include 'pocket/includes/footer.html' %}
Expand Down
53 changes: 27 additions & 26 deletions bedrock/pocket/templates/pocket/includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,94 +8,95 @@
<div class="pocket-footer-content">
<nav class="pocket-footer-primary">
<section class="pocket-footer-section">
<h6 class="pocket-footer-heading">Products</h6>
<h6 class="pocket-footer-heading">{{ ftl('pocket-footer-products') }}</h6>
<ul class="pocket-footer-list">
<li>
<a href="https://getpocket.com/explore" rel="external noopener" target="_blank">Must-read articles</a>
<a href="https://getpocket.com/explore/must-reads?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-must-read-articles') }}</a>
</li>
<li>
<a href="https://getpocket.com/explore/pocket-hits" rel="external noopener" target="_blank">Daily newsletter</a>
<a href="https://getpocket.com/explore/pocket-hits?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-daily-newsletter')}}</a>
</li>
<li>
<a href="https://getpocket.com/premium" rel="external noopener" target="_blank">Pocket Premium</a>
<a href="https://getpocket.com/premium?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-pocket-premium') }}</a>
</li>
<li>
<a href="https://getpocket.com/welcome" rel="external noopener" target="_blank">Save to Pocket extensions</a>
<a href="{{ url('pocket.welcome') }}?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-save-to-pocket-extensions') }}</a>
</li>
</ul>
</section>
<section class="pocket-footer-section">
<h6 class="pocket-footer-heading">Company</h6>
<h6 class="pocket-footer-heading">{{ ftl('pocket-footer-company') }}</h6>
<ul class="pocket-footer-list">
<li>
<a href="https://getpocket.com/about" rel="external noopener" target="_blank">About</a>
<a href="{{ url('pocket.about') }}?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-about') }}</a>
</li>
<li>
<a href="https://getpocket.com/jobs" rel="external noopener" target="_blank">Careers</a>
<a href="{{ url('pocket.jobs') }}?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-careers') }}</a>

</li>
<li>
<a href="https://getpocket.com/blog" rel="external noopener" target="_blank">Blog</a>
<a href="https://getpocket.com/blog?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-blog') }}</a>

</li>
<ul>
</section>
<section class="pocket-footer-section">
<h6 class="pocket-footer-heading">Resources</h6>
<h6 class="pocket-footer-heading">{{ ftl('pocket-footer-resources') }}</h6>
<ul class="pocket-footer-list">
<li>
<a href="https://help.getpocket.com/" rel="external noopener" target="_blank">Get help</a>
<a href="https://help.getpocket.com/?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-get-help') }}</a>

</li>
<li>
<a href="https://getpocket.com/developer/" rel="external noopener" target="_blank">Developer API</a>
<a href="https://getpocket.com/developer/?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-developer-api') }}</a>

</li>
<li>
<a href="https://getpocket.com/publisher/" rel="external noopener" target="_blank">Pocket for publishers</a>
<a href="https://getpocket.com/publisher/?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-pocket-for-publishers') }}</a>
</li>
<li>
<a href="https://getpocket.com/sponsor/" rel="external noopener" target="_blank">Advertise</a>
<a href="https://getpocket.com/sponsor/?src=footer_v2" rel="external noopener" target="_blank">{{ ftl('pocket-footer-advertise') }}</a>
</li>
<ul>
</section>
<section class="pocket-footer-section">
<h6 class="pocket-footer-heading">Get the app</h6>
<h6 class="pocket-footer-heading">{{ ftl('pocket-footer-get-the-app') }}</h6>
<ul class="pocket-footer-list download-links">
<li>
<a class="app-download-link"
href="https://apps.apple.com/us/app/pocket-save-read-grow/id309601447" target="_blank"
rel="noopener noreferrer">
<img src="{{ static('img/pocket/apple-app-store-badge.svg') }}" alt="Download On the Apple App Store">
<img src="{{ static('img/pocket/apple-app-store-badge.svg') }}" alt="{{ ftl('pocket-footer-download-on-apple-app-store') }}">
</a>
</li>
<li>
<a class="app-download-link google-play-badge"
href="https://play.google.com/store/apps/details?id=com.ideashower.readitlater.pro"
target="_blank" rel="noopener noreferrer">
<img src="{{ static('img/pocket/google-play-badge.png') }}" alt="Get It On Google Play">
<img src="{{ static('img/pocket/google-play-badge.png') }}" alt="{{ ftl('pocket-footer-get-it-google-play') }}">
</a>
</li>
</ul>
</section>
</nav>
<div class="pocket-footer-secondary">
<div class="pocket-footer-legal-details">
<p class="pocket-footer-secondary-desc">Pocket is part of the <a href="https://www.mozilla.org/about/">Mozilla</a> family of products.</p>

<div class="legal" aria-label="Legal">
<span>© 2021 Read It Later, Inc.</span>
<a href="https://getpocket.com/privacy?src=footer_v2">Privacy policy</a>
<a href="https://getpocket.com/tos?src=footer_v2">Terms of service</a>
<button id="ot-sdk-btn" class="ot-sdk-show-settings">Cookie preferences</button>
<p class="pocket-footer-secondary-desc">
{{ ftl('pocket-footer-pocket-is-part-of-mozilla-family',
mozorgabout='https://www.mozilla.org/about/') }}</p>
<div class="legal" aria-label="{{ ftl('pocket-footer-aria-label-legal') }}">
<span>© 2021 {{ ftl ('pocket-footer-read-it-later-brand-name') }}</span>
<a href="{{ url('pocket.privacy') }}?src=footer_v2">{{ ftl ('pocket-footer-privacy-policy') }}</a>
<a href="{{ url('pocket.tos') }}?src=footer_v2">{{ ftl ('pocket-footer-terms-of-service') }}</a>
<button id="ot-sdk-btn" class="ot-sdk-show-settings">{{ ftl ('pocket-footer-cookie-preferences') }}</button>
</div>
</div>
<ul class="pocket-footer-socials">
<li class="pocket-footer-socials-item">
<a href="https://twitter.com/pocket" class="pocket-footer-socials-item-link twitter" target="_blank" rel="external noopener noreferrer"><span>Twitter</span></a>
<a href="https://twitter.com/pocket" class="pocket-footer-socials-item-link twitter" target="_blank" rel="external noopener noreferrer"><span>{{ ftl ('pocket-footer-twitter-brand-name') }}</span></a>
</li>
<li class="pocket-footer-socials-item">
<a href="https://facebook.com/pocket" class="pocket-footer-socials-item-link facebook" target="_blank" rel="external noopener noreferrer"><span>Facebook</span></a>
<a href="https://facebook.com/pocket" class="pocket-footer-socials-item-link facebook" target="_blank" rel="external noopener noreferrer"><span>{{ ftl ('pocket-footer-facebook-brand-name') }}</span></a>
</li>
</ul>
</div>
Expand Down
24 changes: 12 additions & 12 deletions bedrock/pocket/templates/pocket/includes/mobile-nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,40 @@
#}

<div class="mobile-nav-wrapper" tabindex="-1">
<nav class="mobile-nav" role="dialog" aria-modal="true" aria-label="Pocket Mobile Menu">
<nav class="mobile-nav" role="dialog" aria-modal="true" aria-label="{{ ftl('pocket-mobile-nav-aria-label') }}">
<div class="mobile-nav-close">
<button class="mobile-nav-close-btn" data-tooltip="Close">Close the Pocket Mobile Menu</button>
<button class="mobile-nav-close-btn" data-tooltip="{{ ftl('pocket-mobile-nav-close-tooltip') }}">{{ ftl('pocket-mobile-nav-close-menu') }}</button>
</div>
<ul class="mobile-nav-list">
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link home" href="https://getpocket.com/home?src=navbar">Home<span class="beta">BETA</span></a>
<a class="mobile-nav-list-link home" href="https://getpocket.com/home?src=navbar">{{ ftl('pocket-nav-home') }}<span class="beta">{{ ftl('pocket-mobile-nav-beta') }}</span></a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link my-list" href="https://getpocket.com/my-list?src=navbar">My List</a>
<a class="mobile-nav-list-link my-list" href="https://getpocket.com/my-list?src=navbar">{{ ftl('pocket-nav-my-list') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link discover" href="https://getpocket.com/explore?src=navbar">Discover</a>
<a class="mobile-nav-list-link discover" href="https://getpocket.com/explore?src=navbar">{{ ftl('pocket-nav-discover') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link collections" href="https://getpocket.com/collections?src=navbar">Collections</a>
<a class="mobile-nav-list-link collections" href="https://getpocket.com/collections?src=navbar">{{ ftl('pocket-nav-collections') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link archive" href="https://getpocket.com/my-list/archive">Archive</a>
<a class="mobile-nav-list-link archive" href="https://getpocket.com/my-list/archive">{{ ftl('pocket-nav-archive') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link favorites" href="https://getpocket.com/my-list/favorites">Favorites</a>
<a class="mobile-nav-list-link favorites" href="https://getpocket.com/my-list/favorites">{{ ftl('pocket-nav-favorites') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link highlights" href="https://getpocket.com/my-list/highlights">Highlights</a>
<a class="mobile-nav-list-link highlights" href="https://getpocket.com/my-list/highlights">{{ ftl('pocket-nav-highlights') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link articles" href="https://getpocket.com/my-list/articles">Articles</a>
<a class="mobile-nav-list-link articles" href="https://getpocket.com/my-list/articles">{{ ftl('pocket-nav-articles') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link videos" href="https://getpocket.com/my-list/videos">Videos</a>
<a class="mobile-nav-list-link videos" href="https://getpocket.com/my-list/videos">{{ ftl('pocket-nav-videos') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link tags" href="https://getpocket.com/my-list/tags">All Tags</a>
<a class="mobile-nav-list-link tags" href="https://getpocket.com/my-list/tags">{{ ftl('pocket-nav-all-tags') }}</a>
</li>
</ul>
</nav>
Expand Down
Loading

0 comments on commit 1df8b3d

Please sign in to comment.