FR - Language-specific templates part I (#564)

* FR - Language-specific templates part I * Adding pluralization of the word "comment" to the EN version * Adding French to supported languages * Adding myself to contributors (assuming I join the translators team) * Removing inline style - Does not conform with the CSP - Is useless with the CSS styling * Change logic for comment pluralization Show the right word according to the number of comment. * Translating a string * Update src/config/2019.json Co-Authored-By: Barry Pollard <[email protected]> * Update src/config/2019.json Co-Authored-By: Barry Pollard <[email protected]> * Update src/templates/fr/2019/base_chapter.html Co-Authored-By: Barry Pollard <[email protected]> * Adding some missing translation on alternatives * Add FR translation for Contributors template * Add FR translation for Index template * Hardcode Contributors's team names in FR According to #568 (comment) * Update src/templates/fr/2019/contributors.html Co-Authored-By: Barry Pollard <[email protected]> * Update src/templates/fr/2019/contributors.html Co-Authored-By: Barry Pollard <[email protected]> * Localize Breadcrumb's name * Fixing a missed "on" => "sur" * Update src/templates/fr/2019/base_chapter.html Co-Authored-By: Barry Pollard <[email protected]> * Improving alternatives on avatars * Update src/templates/fr/2019/contributors.html Co-Authored-By: Barry Pollard <[email protected]> * Improving wording on "one's website" to "site web de…" * Typofix Web Almanac * FR - Localized Team Names With fallback to English team names if the dictionary is not populated. related to #569 * Using a null coalescing operator instead of duplicating HTML markup. Thanks @mikegeyser * Update src/templates/fr/2019/base_chapter.html Co-Authored-By: Barry Pollard <[email protected]> * Update src/templates/fr/2019/chapter.html Co-Authored-By: Barry Pollard <[email protected]>
HTTPArchive · Nov 29, 2019 · ec783e8 · ec783e8
1 parent efa3472
commit ec783e8
Show file tree

Hide file tree

Showing 10 changed files with 1,078 additions and 2 deletions.
diff --git a/src/config/2019.json b/src/config/2019.json
@@ -311,6 +311,17 @@
       "github": "bkardell",
       "twitter": "briankardell"
     },
+    "borisschapira": {
+      "name": "Boris Schapira",
+      "teams": [
+        "developers",
+        "translators"
+      ],
+      "avatar_url": "https:\/\/avatars1.githubusercontent.com\/u\/284742?v=4&s=200",
+      "website": "https:\/\/boris.schapira.dev",
+      "github": "borisschapira",
+      "twitter": "boostmarks"
+    },
     "caraya": {
       "name": "Carlos Araya",
       "teams": [

diff --git a/src/language.py b/src/language.py
@@ -30,6 +30,7 @@ class Language(object):
   JAPANESE = _Language('日本語', 'ja', 'JP')
   ENGLISH = _Language('English', 'en', 'US')
   SPANISH = _Language('Español', 'es', 'ES')
+  FRENCH = _Language('Français', 'fr', 'FR')
 
 DEFAULT_LANGUAGE = Language.ENGLISH
 

diff --git a/src/static/css/page.css b/src/static/css/page.css
@@ -154,6 +154,9 @@
 #num_comments {
   line-height: 24px;
 }
+[data-translation] {
+  display: none;
+}
 
 .authors h4{
   padding: 16px 0;

diff --git a/src/static/js/chapter.js b/src/static/js/chapter.js
@@ -239,7 +239,10 @@ function setDiscussionCount() {
             return;
           }
           var el = document.getElementById('num_comments');
-          el.innerText = comments + ' ' + (comments == 1 ? 'comment' : 'comments');
+          el.innerText = comments;
+
+          document.getElementById(comments <= 1 ? 'comment-singular' : 'comment-plural').removeAttribute('data-translation');
+
           gtag('event', 'discussion-count', { 'event_category': 'user', 'event_label': 'enabled', 'value': 1 });
         })
         .catch(function (err) {

diff --git a/src/templates/en/2019/base_chapter.html b/src/templates/en/2019/base_chapter.html
@@ -44,7 +44,7 @@
 {% macro render_actions() %}
   <div class="discuss">
     <a class="alt btn" href="https://discuss.httparchive.org/t/{{ metadata.get('discuss') }}">
-      <img src="/static/images/discuss.png" alt="Discuss this chapter" height="24" width="24" loading="lazy" /><span id="num_comments"></span>
+      <img src="/static/images/discuss.png" alt="Discuss this chapter" height="24" width="24" loading="lazy" /><span id="num_comments"></span> <span data-translation id="comment-singular">comment</span><span data-translation id="comment-plural">comments</span>
     </a>
   </div>
 {% endmacro %}

diff --git a/src/templates/fr/2019/base.html b/src/templates/fr/2019/base.html
@@ -0,0 +1,166 @@
+{% extends "base.html" %}
+
+{% block styles %}
+  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
+  <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900%7CPoppins:300,400,700,900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/css/2019.css">
+{% endblock %}
+
+{% block content%}
+  {% block header %}
+  <header class="alt-bg">
+    <div class="top-header">
+      <a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}"><img src="/static/images/logo.svg" alt="Web Almanac par HTTP Archive"></a>
+      <nav>
+        <a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">Table des matières</a>
+        <a href="{{ url_for('contributors', year=year, lang=lang) }}">Contributeurs et contributrices</a>
+        <a href="{{ url_for('methodology', year=year, lang=lang) }}">Méthodologie</a>
+        {% if supported_years | length > 1 %}
+          {{ year_switcher() }}
+        {% endif %}
+      </nav>
+      <div class="cta">
+        {% if request.endpoint == 'home' %}
+          <a href="{{ url_for('table_of_contents', year=year, lang=lang) }}" class="alt btn">
+            Commencer l'exploration
+          </a>
+        {% endif %}
+        {{ language_switcher() }}
+      </div>
+      <button type="button" class="menu-btn" arial-label="Menu">
+        <img class="menu-icon" src="/static/images/menu.png" data-src-close="/static/images/close.png" alt="" />
+      </button>
+      <nav class="menu">
+        <a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">Table des matières</a>
+        <a href="{{ url_for('contributors', year=year, lang=lang) }}">Contributeurs et contributrices</a>
+        <a href="{{ url_for('methodology', year=year, lang=lang) }}">Méthodologie</a>
+        <div class="misc">
+          <a href="https://httparchive.org/">
+            <img src="/static/images/ha-home.svg" alt="Page d'accueil HTTP Archive" height="35" width="70">
+          </a>
+          <div class="social-media">
+            <a href="https://twitter.com/HTTPArchive" class="twitter">
+              <img src="/static/images/twitter.png" height="80" width="65" alt="Twitter" loading="lazy" />
+            </a>
+            <a href="https://github.com/HTTPArchive/almanac.httparchive.org" class="github">
+              <img src="/static/images/github.png" height="80" width="78" alt="GitHub" loading="lazy" />
+            </a>
+          </div>
+          {{ language_switcher() }}
+        </div>
+      </nav>
+    </div>
+    {% if request.endpoint == 'home' %}
+    <div class="intro-container">
+      <div class="intro">
+        <div class="intro-year">2019</div>
+        <h1 class="title title-lg title-alt">Web Almanac</h1>
+        <h2>
+          Rapport annuel<br>
+          de HTTP Archive sur<br>
+          <b>l'état du Web</b>
+        </h2>
+        <p>
+          Notre mission est de combiner les statistiques brutes et les tendances de HTTP Archive avec l'expertise de la communauté web. Le Web Almanac est un rapport complet sur l'état du Web, soutenu par des données réelles et des experts du Web. Il est composé de 20 chapitres couvrant l'expérience utilisateur, le contenu des pages, leur publication et leur distribution.
+        </p>
+        <a href="{{ url_for('table_of_contents', year=year, lang=lang) }}" class="btn">
+          Commencer l'exploration
+        </a>
+      </div>
+      <img class="intro-image-2019" src="/static/images/home-hero-2019.png" alt="Édition 2019 du Web Almanac" />
+      <img class="intro-image" src="/static/images/home-hero.png" alt="Web Almanac" />
+    </div>
+    {% endif %}
+  </header>
+  {% endblock %}
+
+  {% block main %}{% endblock %}
+
+  {% block footer %}
+    <footer class="alt-bg">
+      <a class="navigation-logo home-logo" href="{{ url_for('home', year=year, lang=lang) }}"><img src="/static/images/logo.svg" alt="Web Almanac par HTTP Archive"></a>
+      <a class="navigation-logo ha-logo" href="https://httparchive.org">
+        <img src="/static/images/ha-home.svg" alt="Page d'accueil HTTP Archive" height="35" width="70">
+      </a>
+      <nav class="nav-items">
+        <a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">Table des matières</a>
+        <a href="{{ url_for('contributors', year=year, lang=lang) }}">Contributeurs et contributrices</a>
+        <a href="{{ url_for('methodology', year=year, lang=lang) }}">Méthodologie</a>
+      </nav>
+      <div class="language-switcher">{{ language_switcher() }}</div>
+      <p class="copyright"><span>© 2019 Web Almanac. Sous licence <a href="https://github.com/HTTPArchive/almanac.httparchive.org/blob/master/LICENSE">Apache 2.0</a>.</span></p>
+      <div class="social-media">
+        <a href="https://twitter.com/HTTPArchive" class="twitter">
+          <img src="/static/images/twitter.png" alt="Twitter" height="80" width="65" loading="lazy" />
+        </a>
+        <a href="https://github.com/HTTPArchive/almanac.httparchive.org" class="github">
+          <img src="/static/images/github.png" alt="GitHub" height="80" width="78" loading="lazy" />
+        </a>
+      </div>
+      <hr>
+      <hr>
+    </footer>
+  {% endblock %}
+  {% block scripts %}
+    <script nonce="{{ csp_nonce() }}">
+      (function() {
+        // Language switching
+        var languageSwitchers = document.querySelectorAll('.language-switcher select');
+        for (var i = 0; i < languageSwitchers.length; i++) {
+          languageSwitchers[i].addEventListener('change', function(e) {
+            if (e.target.value) {
+              window.location = e.target.value;
+            }
+          });
+        }
+
+        // Mobile menu
+        var menuIcon = document.querySelector('.menu-icon');
+        var menuIconInitialSrc = document.querySelector('.menu-icon').src;
+        var menuIconSrcClose = document.querySelector('.menu-icon').dataset.srcClose;
+
+        document.querySelector('.menu-btn').addEventListener('click', function() {
+          var menuOpen = document.body.classList.toggle('menu-open');
+          menuIcon.src = menuOpen ? menuIconSrcClose : menuIconInitialSrc;
+        });
+      })();
+    </script>
+  {% endblock %}
+{% endblock %}
+
+{% macro language_switcher() %}
+{% if supported_languages | length > 1%}
+<div class="language-switcher">
+  {% if language is not none %}
+    <img src="/static/images/{{ language }}.png" class="flag" height="25" width="25" loading="lazy" />
+  {% else %}
+    <img src="/static/images/English.png" class="flag" height="25" width="25" loading="lazy" />
+  {% endif %}
+  <select>
+    {% for l in supported_languages %}
+      <option
+        {% if l == language %}selected="selected"{% endif %}
+        value="{{ url_for(request.endpoint, **get_view_args(lang=l.lang_code)) }}">
+        {{ l }}
+      </option>
+    {% endfor %}
+  </select>
+  <img class="dropdown-arrow" src="/static/images/dropdown-arrow.png" alt="ouvrir" height="20" width="20" loading="lazy" />
+</div>
+{% endif %}
+{% endmacro %}
+
+{% macro year_switcher() %}
+<div class="year-switcher">
+  <select>
+      {% for y in supported_years %}
+        <option
+          {% if y == year %}selected="selected"{% endif %}
+          value="{{ url_for('table_of_contents', **get_view_args(year=y)) }}">
+          Édition {{ y }}
+        </option>
+      {% endfor %}
+  </select>
+  <img class="dropdown-arrow" src="/static/images/dropdown-arrow.png" alt="ouvrir" height="20" width="20" loading="lazy" />
+</div>
+{% endmacro %}
diff --git a/src/templates/fr/2019/base_chapter.html b/src/templates/fr/2019/base_chapter.html
@@ -0,0 +1,149 @@
+{% extends "fr/2019/base.html" %}
+
+{% block title %}{{ metadata.get('title') }} | 2019 | Le Web Almanac par HTTP Archive{% endblock %}
+
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="/static/css/page.css">
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<script nonce="{{ csp_nonce() }}">
+
+var indexBox = document.querySelector('.index-box');
+var indexBoxTitle = document.querySelector('.index .header');
+
+indexBoxTitle.addEventListener('click', function(e) {
+  indexBox.classList.toggle('show');
+});
+
+document.addEventListener("keypress", function onPress(event) {
+ 	if (event.key === 'p' || event.key === 'P' || event.key === ',' || event.key === '<') {
+ 		var previous = document.getElementById('previous-chapter');
+ 		if (previous) {
+ 		  previous.click();
+ 		}
+ 	}
+ 	if (event.key === 'n' || event.key === 'N' || event.key === '.' || event.key === '>') {
+ 		var next = document.getElementById('next-chapter');
+ 		if (next) {
+ 		  next.click();
+ 		}
+ 	}
+});
+
+window.discussion_url="https://discuss.httparchive.org/t/{{ metadata.get('discuss') }}.json";
+</script>
+
+<script src='/static/js/chapter.js' defer></script>
+
+{% endblock %}
+
+{# Calls to action for readers who want to engage more with this chapter. #}
+{% macro render_actions() %}
+  <div class="discuss">
+    <a class="alt btn" href="https://discuss.httparchive.org/t/{{ metadata.get('discuss') }}">
+      <img src="/static/images/discuss.png" alt="Discuter de ce chapitre" height="24" width="24" loading="lazy" /><span id="num_comments"></span> <span data-translation id="comment-singular">commentaire</span><span data-translation id="comment-plural">commentaires</span>
+    </a>
+  </div>
+{% endmacro %}
+
+
+{% macro render_byline() %}
+  <div class="byline">Écrit par
+  {% for author in metadata.get('authors') %}
+    <a class="author" href="{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}">{{ config.contributors[author].name if author in config.contributors else author }}</a>{% if loop.index != loop.length and loop.length != 2 %},{% endif %}
+    {% if loop.index == loop.length - 1 %} et{% endif %}
+  {% endfor %}
+  </div>
+
+  <div class="byline reviewers">Relu par
+  {% for reviewer in metadata.get('reviewers') %}
+    <a class="reviewer" href="{{ url_for('contributors', year=year, lang=lang, _anchor=reviewer) }}">{{ config.contributors[reviewer].name if reviewer in config.contributors else reviewer }}</a>{% if loop.index != loop.length and loop.length != 2 %},{% endif %}
+    {% if loop.index == loop.length - 1 %} et{% endif %}
+  {% endfor %}
+  </div>
+
+  {% if metadata.get('translators') | length > 1 %}
+  <div class="byline translators">Traduit par
+  {% for translator in metadata.get('translators') %}
+    <a class="translator" href="{{ url_for('contributors', year=year, lang=lang, _anchor=translator) }}">{{ config.contributors[translator].name if translator in config.contributors else translator }}</a>{% if loop.index != loop.length and loop.length != 2 %},{% endif %}
+    {% if loop.index == loop.length - 1 %} et{% endif %}
+  {% endfor %}
+  </div>
+  {% endif %}
+{% endmacro %}
+
+{% macro render_authors() %}
+  {% for author in metadata.get('authors') %}
+  {% if loop.length == 1 %}<h4>Auteur·ice</h4>{% endif -%}
+  {% if loop.length > 1 and loop.index == 1 %}<h4>Auteur·ice·s</h4>{% endif %}
+  {% if loop.index == 1 %}<ul>{% endif %}
+      {% set authordata = config.contributors[author] if author in config.contributors else None %}
+    {% if authordata %}
+      <li>
+          <a href="https://almanac.httparchive.org{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}"><img class="avatar" alt="avatar de {{ authordata.name }}" src="{{ authordata.avatar_url }}" height="200" width="200" loading="lazy" /></a>
+          <div class="info">
+            <a href="https://almanac.httparchive.org{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}"><span class="name">{{ authordata.name if authordata.name else author }}</span></a>
+              {% if authordata.twitter or authordata.github %}
+                  <span class="social">
+                  {% if authordata.twitter %}
+                  <a class="twitter" href="https://twitter.com/{{ authordata.twitter }}"><img src="/static/images/twitter.png" alt="@{{ authordata.twitter }} sur Twitter" height="80" width="65" loading="lazy" /></a>
+                  {% endif %}
+                  {% if authordata.github %}
+                  <a class="github" href="https://github.com/{{ authordata.github }}"><img src="/static/images/github.png" alt="{{ authordata.github }} sur GitHub" height="80" width="78" loading="lazy" /></a>
+                  {% endif %}
+                  {% if authordata.website %}
+                  <a class="website" href="{{ authordata.website }}"><img src="/static/images/blog.png" alt="site web de {{ contributor.name }}" height="72" width="72" loading="lazy" /></a>
+                  {% endif %}
+                  </span>
+              {% endif %}
+              {% if authordata.tagline %}
+                  <div class="tagline">
+                      {{ authordata.tagline }}
+                  </div>
+              {% endif %}
+              {% if authordata.bio %}
+              <div class="bio">
+                  {{ authordata.bio | safe }}
+              </div>
+          {% endif %}
+          </div>
+      </li>
+    {% else %}
+      <li>
+          <div class="info">
+            <span class="name">{{ author }}</span>
+          </div>
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>
+{% endmacro %}
+
+{% macro render_prevnext() %}
+  {% if prev_chapter %}
+      <a id="previous-chapter" title="Chapitre précédent (appuyez sur 'p' ou ',')" href="/{{lang}}/{{year}}/{{prev_chapter['title'].lower().replace(' ', '-').replace('/', '')}}">
+          <span class="arrow">&#8963;</span>
+          <span class="chapter-no">
+              Chapitre {{ prev_chapter['chapter'] }}
+          </span>
+          <span class="chapter-title">
+              {{ prev_chapter['title'] }}
+          </span>
+      </a>
+  {% endif %}
+
+  {% if next_chapter %}
+      <a id="next-chapter" title="Chapitre suivant (appuyez sur 'n' or '.')" href="/{{lang}}/{{year}}/{{next_chapter['title'].lower().replace(' ', '-').replace('/', '')}}">
+              <span class="arrow">&#8963;</span>
+              <span class="chapter-no">
+                  Chapitre {{ next_chapter['chapter'] }}
+              </span>
+              <span class="chapter-title">
+                  {{ next_chapter['title'] }}
+              </span>
+      </a>
+  {% endif %}
+{% endmacro %}