FR - Language-specific templates part I

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": [

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
 

src/static/css/page.css

@@ -154,6 +154,9 @@
 #num_comments {
   line-height: 24px;
 }
+[data-translation] {
+  display: none;
+}
 
 .authors h4{
   padding: 16px 0;

src/static/js/chapter.js

@@ -200,7 +200,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) {

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 %}

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 %}

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 %}