i18n: Keying the site (1/5) - Card/cardv2, misc, navbar, and providers #1510

jonah · 2019-11-23T22:25:40Z

djoate commented

2019-11-23 22:25:40 +00:00

(Migrated from github.com)

Related to PR https://github.com/privacytoolsIO/privacytools.io/pull/1509

Part 1 (here):
Card/cardv2 content, navbar text, misc, and everything under Providers in the navbar.
Part 2 (https://github.com/privacytoolsIO/privacytools.io/pull/1517):
Everything under Browsers in the navbar
Part 3 (https://github.com/privacytoolsIO/privacytools.io/pull/1518):
Everything under Software in the navbar
Part 4 (https://github.com/privacytoolsIO/privacytools.io/pull/1519):
Everything under OS in the navbar
Part 5 (https://github.com/privacytoolsIO/privacytools.io/pull/1509):
Merging master into i18n-simple to fix conflicts, and fixing loose ends

To prevent myself from constantly merging due to changes on master, Part 5 to clean up loose ends and merging master into i18n-simple will not be opened until all of the other parts have been reviewed and merged.

Since there are going to be changes to every string on the site, I'm splitting the keying process in multiple PRs. This PR aims to key

the contents of card and cardv2
miscellaneous content:
- index.html
- /about/
- /sponsors/ and /donate/
- /services/
the text on the navbar (though this does not handle a language selector just yet)
everything under providers in the navbar, i.e.
- Avoid US & UK services
- Cloud Storage
- DNS
- Email
- Hosting
- Pastebins
- Search Engines
- Social Networks
- Social News Aggregators
- VPN

The migration to jekyll-simple-i18n makes keying of some pages trivial with regexp replacements.

This PR also adds in two new filters to aid the keying process.

translate_text adds strings to the source file in the same manner as the tag. This lets us key contents of card and cardv2, which is as simple as just using {{ include.title | translate_text}} in card.html/cardv2.html. This allows us to not use capture tags for every single card. This also lets us key external links.
translate_page ensures proper redirection to the appropriate local page. For example, on the original site, a link going to /providers/ is just /providers/, but the same link in the es version would be changed to /es/providers.

Some comments:

404 page: Not sure how to key this

Known issues

Capture tags
I've opted to still use capture tags for the extra buttons inside of _includes/sections/participate.html as I thought that it would be better not to include entire buttons in the source file (e.g., '<a class="btn btn-warning mb-1" href="https://github.com/privacytoolsIO/privacytools.io/graphs/contributors">Contributor List</a>)

New lines in strings
Refrain from putting newlines in strings, otherwise the plugin will think it's a new key. The description string in _includes/section/browser-recommendation.html

description='Firefox is fast, reliable, open-source, and respects your privacy. Don\'t forget to adjust the settings according to our
recommendations: <a href="#webrtc"><i class="fas fa-link"></i> WebRTC</a> and <a href="#about_config"><i class="fas fa-link"></i> about:config</a> and get the <a href="#addons"><i class="fas fa-link"></i> privacy add-ons</a>.'

was automatically keyed as

Firefox_is_fast_reliable_opensource_and_respects_your_privacy._Dont_forget_to_adjust_the_setting: |
  Firefox is fast, reliable, open-source, and respects your privacy. Don't forget to adjust the settings according to our  
recommendations: <a href="#webrtc"><i class="fas fa-link"></i> WebRTC</a> and <a href="#about_config"><i class="fas fa-link"></i> about:config</a> and get the <a href="#addons"><i class="fas fa-link"></i> privacy add-ons</a>.

The plugin thinks "recommendations:" is another key. The fix is to remove the newline in the original string.

This string in email-alternatives caused an error in the build process (there's a line break between "trustless," and "meaning"):

description="Bitmessage is a P2P communications protocol used to send encrypted messages to another person or to many subscribers. It is decentralized and trustless,
meaning that you need not inherently trust any entities like root certificate authorities. It uses strong authentication which means that the sender of a message cannot be spoofed, and it aims to hide \"non-content\" data."

I've had to fix these two issues for it to key properly.

## Keying the site, part 1 - Card/cardv2, misc, navbar, Providers Related to PR https://github.com/privacytoolsIO/privacytools.io/pull/1509 - Part 1 (here): Card/cardv2 content, navbar text, misc, and everything under Providers in the navbar. - Part 2 (https://github.com/privacytoolsIO/privacytools.io/pull/1517): Everything under Browsers in the navbar - Part 3 (https://github.com/privacytoolsIO/privacytools.io/pull/1518): Everything under Software in the navbar - Part 4 (https://github.com/privacytoolsIO/privacytools.io/pull/1519): Everything under OS in the navbar - Part 5 (https://github.com/privacytoolsIO/privacytools.io/pull/1509): Merging `master` into `i18n-simple` to fix conflicts, and fixing loose ends To prevent myself from constantly merging due to changes on `master`, Part 5 to clean up loose ends and merging `master` into `i18n-simple` will not be opened until all of the other parts have been reviewed and merged. --- Since there are going to be changes to every string on the site, I'm splitting the keying process in multiple PRs. This PR aims to key - the contents of card and cardv2 - miscellaneous content: * index.html * /about/ * /sponsors/ and /donate/ * /services/ - the text on the navbar (though this does not handle a language selector just yet) - everything under providers in the navbar, i.e. * Avoid US & UK services * Cloud Storage * DNS * Email * Hosting * Pastebins * Search Engines * Social Networks * Social News Aggregators * VPN The migration to jekyll-simple-i18n makes keying of some pages trivial with regexp replacements. This PR also adds in two new filters to aid the keying process. - `translate_text` adds strings to the source file in the same manner as the tag. This lets us key contents of card and cardv2, which is as simple as just using `{{ include.title | translate_text}}` in card.html/cardv2.html. This allows us to not use capture tags for every single card. This also lets us key external links. - `translate_page` ensures proper redirection to the appropriate local page. For example, on the original site, a link going to `/providers/` is just `/providers/`, but the same link in the `es` version would be changed to `/es/providers`. Some comments: - 404 page: Not sure how to key this ### Known issues **Capture tags** I've opted to still use capture tags for the extra buttons inside of `_includes/sections/participate.html` as I thought that it would be better not to include entire buttons in the source file (e.g., `'<a class="btn btn-warning mb-1" href="https://github.com/privacytoolsIO/privacytools.io/graphs/contributors">Contributor List</a>`) **New lines in strings** Refrain from putting newlines in strings, otherwise the plugin will think it's a new key. The `description` string in `_includes/section/browser-recommendation.html` ```html description='Firefox is fast, reliable, open-source, and respects your privacy. Don\'t forget to adjust the settings according to our recommendations: <a href="#webrtc"> WebRTC</a> and <a href="#about_config"> about:config</a> and get the <a href="#addons"> privacy add-ons</a>.' ``` was automatically keyed as ```yml Firefox_is_fast_reliable_opensource_and_respects_your_privacy._Dont_forget_to_adjust_the_setting: | Firefox is fast, reliable, open-source, and respects your privacy. Don't forget to adjust the settings according to our recommendations: <a href="#webrtc"> WebRTC</a> and <a href="#about_config"> about:config</a> and get the <a href="#addons"> privacy add-ons</a>. ``` The plugin thinks "recommendations:" is another key. The fix is to remove the newline in the original string. This string in `email-alternatives` caused an error in the build process (there's a line break between "trustless," and "meaning"): ```html description="Bitmessage is a P2P communications protocol used to send encrypted messages to another person or to many subscribers. It is decentralized and trustless, meaning that you need not inherently trust any entities like root certificate authorities. It uses strong authentication which means that the sender of a message cannot be spoofed, and it aims to hide \"non-content\" data." ``` I've had to fix these two issues for it to key properly.

jonah reviewed 2019-11-23 22:25:40 +00:00

privacytoolsIO (Migrated from github.com) reviewed 2019-11-23 22:25:40 +00:00

djoate commented

2019-11-23 22:43:48 +00:00

(Migrated from github.com)

Found some other strings that are giving compile errors

djoate commented

2019-11-23 22:48:26 +00:00

(Migrated from github.com)

I've built this locally and there doesn't seem to be any problems with using href inside of the source file. The source strings may look messy with all of the <a and href, but at least it lets us specify language-specific sites for any links we include in our descriptions.

Not sure if the same should be done all links though. For example, we could also key the links that these buttons point to:

This would let translators specify links to specific locales. For instance, Firefox offers multiple translations (https://www.mozilla.org/en-US/firefox/windows/, https://www.mozilla.org/es-MX/firefox/windows/, https://www.mozilla.org/it/firefox/windows/, etc.)

EDIT: This is now done in 3629ad6509

I've built this locally and there doesn't seem to be any problems with using href inside of the source file. The source strings may look messy with all of the `<a` and `href`, but at least it lets us specify language-specific sites for any links we include in our descriptions. Not sure if the same should be done all links though. For example, we could also key the links that these buttons point to: ![buttons](https://user-images.githubusercontent.com/56777051/69486512-39e38b00-0e44-11ea-8d8a-881741b25aeb.png) This would let translators specify links to specific locales. For instance, Firefox offers multiple translations (https://www.mozilla.org/en-US/firefox/windows/, https://www.mozilla.org/es-MX/firefox/windows/, https://www.mozilla.org/it/firefox/windows/, etc.) EDIT: This is now done in https://github.com/privacytoolsIO/privacytools.io/pull/1510/commits/3629ad6509afe4441082e35dbabb3548f50ed066

jonah commented

2019-11-24 20:00:56 +00:00

The 404 page is defined in Nginx on the server-side. Even if we had language-specific files, I’m not sure how the server would determine whether or not to use them. That’s not a super big priority to me.

djoate commented

2019-11-24 21:06:39 +00:00

(Migrated from github.com)

This PR is now done and awaiting review.
Just to recall, this PR aims to key

the contents of card and cardv2
miscellaneous content:
- index.html
- /about/
- /sponsors/ and /donate/
- /services/
the text on the navbar (though this does not handle a language selector just yet)
everything under Providers in the navbar, i.e.
- Avoid US & UK services
- Cloud Storage
- DNS
- Email
- Hosting
- Pastebins
- Search Engines
- Social Networks
- Social News Aggregators
- VPN

I have not the touched breadcrumbs and the 404 page in this PR

This PR is now done and awaiting review. Just to recall, this PR aims to key - the contents of card and cardv2 - miscellaneous content: * index.html * /about/ * /sponsors/ and /donate/ * /services/ - the text on the navbar (though this does not handle a language selector just yet) - everything under Providers in the navbar, i.e. * Avoid US & UK services * Cloud Storage * DNS * Email * Hosting * Pastebins * Search Engines * Social Networks * Social News Aggregators * VPN I have not the touched breadcrumbs and the 404 page in this PR

djoate commented

2019-11-24 21:31:46 +00:00

(Migrated from github.com)

Just added support for using the right HTML page language and hreflang tags. For example, the "Spanish" version of cloud providers has this in the source:

<!DOCTYPE html>
<html lang="es">  <!-- New -->
<head>
  <meta charset="utf-8">
  <meta name="referrer" content="no-referrer">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="privacy, anonymity, privacy tools, surveillance, encryption">
  <meta name="description" content="Find a cloud storage provider that won't look through your files.">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-TileImage" content="/assets/img/favicons/mstile-144x144.png">
  <meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
  <meta name="theme-color" content="#ffffff">
  <link rel="canonical" href="https://www.privacytools.io/providers/cloud-storage/">
   <!-- New: hreflang tags -->
  <link rel="alternate" hreflang="en" href="https://www.privacytools.io/providers/search-engines/" /><link rel="alternate" hreflang="en" href="https://www.privacytools.io/en/providers/search-engines/" /><link rel="alternate" hreflang="es" href="https://www.privacytools.io/es/providers/search-engines/" />

  <!-- title -->
  
  <title>Cloud Storage | PrivacyTools</title>
  <meta property="og:title" content="Cloud Storage | PrivacyTools" />
  
  <meta property="og:type" content="website" />
  <meta property="og:url" content="http://localhost:4000/es/providers/cloud-storage/" />
  <meta property="og:image" content="https://www.privacytools.io/assets/img/layout/ogimage.jpg" />
  <meta property="og:description" content="Find a cloud storage provider that won't look through your files."/>
  <!-- New: Locale changes (still defaults to en_GB) -->
  <meta property="og:locale" content="es" />
  <meta property="og:site_name" content="PrivacyTools" />
  ...

Though maybe we should also key those keywords and description

Just added support for using the right HTML page language and hreflang tags. For example, the "Spanish" version of cloud providers has this in the source: ```html <!DOCTYPE html> <html lang="es">  <head> <meta charset="utf-8"> <meta name="referrer" content="no-referrer"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="privacy, anonymity, privacy tools, surveillance, encryption"> <meta name="description" content="Find a cloud storage provider that won't look through your files."> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/assets/img/favicons/mstile-144x144.png"> <meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <link rel="canonical" href="https://www.privacytools.io/providers/cloud-storage/">  <link rel="alternate" hreflang="en" href="https://www.privacytools.io/providers/search-engines/" /><link rel="alternate" hreflang="en" href="https://www.privacytools.io/en/providers/search-engines/" /><link rel="alternate" hreflang="es" href="https://www.privacytools.io/es/providers/search-engines/" />  <title>Cloud Storage | PrivacyTools</title> <meta property="og:title" content="Cloud Storage | PrivacyTools" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://localhost:4000/es/providers/cloud-storage/" /> <meta property="og:image" content="https://www.privacytools.io/assets/img/layout/ogimage.jpg" /> <meta property="og:description" content="Find a cloud storage provider that won't look through your files."/>  <meta property="og:locale" content="es" /> <meta property="og:site_name" content="PrivacyTools" /> ... ``` Though maybe we should also key those keywords and description

djoate commented

2019-11-25 01:06:41 +00:00

(Migrated from github.com)

@JonahAragon After this part gets merged, see if you can get this some of this stuff working with Weblate

This repo is archived. You cannot comment on pull requests.

No reviewers

privacytoolsIO