Merge branch 'main' of github.com:HTTPArchive/almanac.httparchive.org into production

Author: tunetheweb

src/config/last_updated.json

@@ -21,8 +21,8 @@
   },
   "/static/css/page.css": {
     "date_published": "2020-11-13T00:00:00.000Z",
-    "date_modified": "2022-10-25T00:00:00.000Z",
-    "hash": "5f0f74e0a58f1876aa0403a5967ac483"
+    "date_modified": "2022-12-13T00:00:00.000Z",
+    "hash": "f00848215660c365c3266948f44017f0"
   },
   "/static/css/splash.css": {
     "date_published": "2020-11-13T00:00:00.000Z",
@@ -31,8 +31,8 @@
   },
   "/static/js/almanac.js": {
     "date_published": "2021-02-24T00:00:00.000Z",
-    "date_modified": "2022-04-29T00:00:00.000Z",
-    "hash": "4c4ea41eae805e8a6894a7cf51308dea"
+    "date_modified": "2022-12-13T00:00:00.000Z",
+    "hash": "9c395a38708aa33f3c645692687b4245"
   },
   "/static/js/send-web-vitals.js": {
     "date_published": "2021-02-24T00:00:00.000Z",
@@ -46,8 +46,8 @@
   },
   "/static/js/webmentions.js": {
     "date_published": "2021-12-01T00:00:00.000Z",
-    "date_modified": "2022-10-25T00:00:00.000Z",
-    "hash": "6d0a0ac4914e62f499c6f4a50541a105"
+    "date_modified": "2022-12-13T00:00:00.000Z",
+    "hash": "13be3f76f6902375f7b2aa27ae4255e8"
   },
   "/static/pdfs/web_almanac_2019_en.pdf": {
     "date_published": "2020-05-15T00:00:00.000Z",

src/server/__init__.py

@@ -4,6 +4,7 @@
 from .helpers import (
     get_view_args,
     chapter_lang_exists,
+    page_lang_exists,
     featured_chapters_exists,
     get_ebook_methodology,
     add_footnote_links,
@@ -63,6 +64,7 @@ def add_header(response):
 # Make these functions available in templates.
 app.jinja_env.globals["get_view_args"] = get_view_args
 app.jinja_env.globals["chapter_lang_exists"] = chapter_lang_exists
+app.jinja_env.globals["page_lang_exists"] = page_lang_exists
 app.jinja_env.globals["featured_chapters_exists"] = featured_chapters_exists
 app.jinja_env.globals["HTTP_STATUS_CODES"] = HTTP_STATUS_CODES
 app.jinja_env.globals["get_ebook_methodology"] = get_ebook_methodology

src/server/helpers.py

@@ -133,6 +133,15 @@ def chapter_lang_exists(lang, year, chapter):
         return False
 
 
+def page_lang_exists(lang, year, page):
+    if os.path.isfile(
+        TEMPLATES_DIR + "/%s/%s/%s.html" % (lang, year, page)
+    ):
+        return True
+    else:
+        return False
+
+
 def featured_chapters_exists(lang, year):
     if os.path.isfile(TEMPLATES_DIR + "/%s/%s/featured_chapters.html" % (lang, year)):
         return True

src/server/tests/helpers_test.py

@@ -3,6 +3,7 @@
     get_versioned_filename,
     get_ebook_size_in_mb,
     chapter_lang_exists,
+    page_lang_exists,
     featured_chapters_exists,
     get_chapter_nextprev,
     get_chapter_config,
@@ -158,6 +159,14 @@ def test_chapter_lang_not_exists():
     assert chapter_lang_exists("en", "2019", "random") is False
 
 
+def test_page_lang_exists():
+    assert page_lang_exists("en", "2019", "methodology") is True
+
+
+def test_page_lang_not_exists():
+    assert page_lang_exists("en", "2019", "random") is False
+
+
 def test_featured_chapters_exists():
     assert featured_chapters_exists("en", "2019") is True
 

src/static/css/page.css

@@ -230,6 +230,10 @@
   margin: -6px 3px;
 }
 
+#cta-container.invisible {
+  opacity: 0;
+}
+
 #cta-container {
   display: flex;
   height: 0;
@@ -239,6 +243,8 @@
   bottom: 1.25rem;
   z-index: 1;
   justify-content: flex-end;
+  opacity: 1;
+  transition: opacity 1000ms;
 }
 
 .chapter-cta {
@@ -265,6 +271,15 @@
   line-height: 1.5rem;
 }
 
+.share-cta {
+  line-height: 1.6em;
+}
+
+.share-cta:hover svg,
+.share-cta:focus svg {
+  fill: white;
+}
+
 [data-translation] {
   display: none;
 }

src/static/js/almanac.js

@@ -482,7 +482,8 @@ function setDiscussionCount() {
               el.removeAttribute('data-translation');
             });
           }
-
+          document.querySelector('#cta-container').classList.remove('invisible');
+          document.querySelector('.discuss-cta').classList.remove('hidden');
           gtag('event', 'discussion-count', { 'event_category': 'user', 'event_label': 'enabled', 'value': 1 });
         })
         .catch(function (err) {

src/static/js/webmentions.js

@@ -1,4 +1,5 @@
 // Code related to parsing and showing webmentions
+// And Share button
 
 // Gets the webmentions json data from current URL
 async function getWebmentions(targetURL) {
@@ -51,17 +52,23 @@ function setReactionsLabel(length, reactionLabel) {
 
   // Singular
   if (plural_rules.select(length) === "one") {
-    reactionLabel.textContent = reactionLabel.getAttribute("data-singular");
+    reactionLabel.textContent = reactionLabel.dataset.singular;
     return;
   }
 
   // Few - alternative plural (Used by "ru" and "uk")
-  if (reactionLabel.getAttribute("data-plural-alt") !== "" && plural_rules.select(length) === "few") {
-    reactionLabel.textContent = reactionLabel.getAttribute("data-plural-alt");
-      return;
+  if (reactionLabel.dataset.plural_alt !== "" && plural_rules.select(length) === "few") {
+    reactionLabel.textContent = reactionLabel.dataset.plural_alt;
+    return;
+  }
+
+  // If a plural exists use that.
+  if (reactionLabel.dataset.plural) {
+    reactionLabel.textContent = reactionLabel.dataset.plural;
+    return;
   }
 
-  // Everything else sticks with the default plural
+  // Everything else sticks with the default
   return;
 
 }
@@ -174,7 +181,7 @@ function renderReactions(webmentions, reactionType, wmProperty) {
       const reactionASource = document.createElement("a");
       reactionASource.setAttribute("class", "webmention-source");
       reactionASource.setAttribute("href", reaction["url"]);
-      reactionASource.textContent = document.querySelector(".reactions").getAttribute("data-source");
+      reactionASource.textContent = document.querySelector(".reactions").dataset.source;
 
       reactionDivMeta.appendChild(reactionTime);
       reactionDivMeta.appendChild(reactionSpan);
@@ -212,7 +219,12 @@ function setActiveTab() {
 
 // Parses and renders mentions into likes, reposts, replies and mentions
 function renderWebmentions(webmentions) {
+  if (!document.querySelector('.webmentions-cta')) {
+    return;
+  }
+
   if (!webmentions.length) {
+    document.querySelector('#cta-container').classList.remove('invisible');
     return;
   }
 
@@ -221,6 +233,14 @@ function renderWebmentions(webmentions) {
   renderReactions(webmentions, "replies", "in-reply-to");
   renderReactions(webmentions, "mentions", "mention-of");
 
+  // Show count of reactions (except if 0)
+  if (webmentions.length > 0) {
+    document.querySelectorAll('.num-reactions').forEach(t => t.innerText = webmentions.length);
+    document.querySelectorAll('.reactions-label').forEach(t => setReactionsLabel(webmentions.length, t));
+    document.querySelector('.webmentions-cta').classList.remove('hidden');
+  }
+  document.querySelector('#cta-container').classList.remove('invisible');
+
   // Set the first active tab (in case no "likes" so that tab is hidden)
   setActiveTab();
 }
@@ -301,6 +321,63 @@ function addTabListeners() {
 }
 
 
+// Change tabs for webmentions UI
+function handleShareButton() {
+    // DOM references
+  const button = document.querySelector('.share-cta');
+  const appleIcon = button.querySelector('.apple-icon');
+  const androidIcon = button.querySelector('.android-icon');
+  const canonical = document.querySelector('link[rel="canonical"]');
+
+  // Feature detection to see if the Web Share API is supported.
+  if (!('share' in navigator)) {
+    return;
+  }
+
+  // Find out if the user is on a device made by Apple and, if so, switch the icon.
+  if (/Mac|iPhone/.test(navigator.platform)) {
+    appleIcon.classList.remove('hidden');
+    androidIcon.classList.add('hidden');
+  }
+
+  button.addEventListener('click', async () => {
+    // Title and text are identical, since the title may actually be ignored.
+    const title = document.title;
+    const text = document.title;
+    // Use the canonical URL, if it exists, else, the current location.
+    const url = canonical?.href || location.href;
+
+    gtag('event', 'WebShare', {
+      'event_category': 'clicks',
+      'event_label': url,
+      'transport_type': 'beacon',
+      'value': 1
+    })
+
+    try {
+      await navigator.share({
+        url,
+        text,
+        title,
+      });
+      return;
+    } catch (err) {
+      // If the user cancels, an `AbortError` is thrown.
+      if (err.name !== "AbortError") {
+        console.error(err.name, err.message);
+        gtag('event', 'error', {
+          'event_category': 'WebShare',
+          'event_label': err.message,
+          'transport_type': 'beacon',
+          'value': 1
+        })
+      }
+    }
+  });
+  button.classList.remove('hidden');
+}
+
+handleShareButton();
 addTabListeners();
 const BASE_URL = "https://almanac.httparchive.org";
 processWebmentions(BASE_URL + window.location.pathname);

src/templates/base.html

@@ -85,6 +85,16 @@
       <symbol id="search-logo" viewBox="0 0 13 13">
         <path d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z" fill="currentColor"/>
       </symbol>
+      <!-- Share Apple -->
+      <symbol id="share-apple-logo" viewBox="0 0 24 24">
+        <path d="M0 0h24v24H0V0z" fill="none"></path>
+        <path d="M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z"></path>
+      </symbol>
+      <!-- Share Android -->
+      <symbol id="share-android-logo" viewBox="0 0 24 24">
+        <path d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"></path>
+      </symbol>
     </svg>
     {% block content %}{% endblock %}
 

src/templates/base/base.html

@@ -337,7 +337,11 @@
     </li>
     {% else %}
     <li class="nav-dropdown-list-chapter">
+      {% if page_lang_exists(lang, year, 'methodology') %}
       <a href="{{ url_for('methodology', year=year, lang=lang) }}">{{ self.methodology_title() }}</a>
+      {% else %}
+      <a href="{{ url_for('methodology', year=year, lang='en') }}">{{ self.methodology_title() }} <span class="not-translated">({{ self.translation_not_available() }})</span></a>
+      {% endif %}
     </li>
     {% endif %}
     {% if request.path.endswith("contributors") %}
@@ -346,7 +350,11 @@
     </li>
     {% else %}
     <li class="nav-dropdown-list-chapter">
+      {% if page_lang_exists(lang, year, 'contributors') %}
       <a href="{{ url_for('contributors', year=year, lang=lang) }}">{{ self.contributors_title() }}</a>
+      {% else %}
+      <a href="{{ url_for('contributors', year=year, lang='en') }}">{{ self.contributors_title() }} <span class="not-translated">({{ self.translation_not_available() }})</span></a>
+      {% endif %}
     </li>
     {% endif %}
 

src/templates/base/base_chapter.html

@@ -424,27 +424,34 @@ <h1 class="title title-lg">
         <section class="authors">
             {{ render_authors() }}
         </section>
-        {% if metadata.get('discuss') %}
-        <div id="cta-container">
-          <a class="alt btn chapter-cta comment-cta" hreflang="en" href="https://discuss.httparchive.org/t/{{ metadata.get('discuss') }}">
+        <div id="cta-container" class="invisible">
+          {% if metadata.get('discuss') %}
+          <a class="alt btn chapter-cta comment-cta discuss-cta hidden" hreflang="en" href="https://discuss.httparchive.org/t/{{ metadata.get('discuss') }}">
             <svg width="22" height="22" role="img" aria-labelledby="discuss-this-chapter-cta">
               <title id="discuss-this-chapter-cta">{{ self.discuss_this_chapter() }}:</title>
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#comment-logo"></use>
             </svg>
-            <span class="num-comments"><span class="not-mobile">{{ self.comments_fallback() }}</span></span> <span data-translation class="comment-singular visually-hidden-mobile">{{ self.comment() }}</span>
-            <span data-translation class="comment-plural visually-hidden-mobile">{{ self.comments() }}</span>
+            <span class="num-comments">{{ self.comments_fallback() }}</span> <span data-translation class="comment-singular">{{ self.comment() }}</span>
+            <span data-translation class="comment-plural">{{ self.comments() }}</span>
           </a>
-        </div>
-        {% elif year | int >= 2021 %}
-        <div id="cta-container">
-          <a class="alt btn chapter-cta comment-cta" href="#reactions">
+          {% elif year | int >= 2021 %}
+          <a class="alt btn chapter-cta comment-cta webmentions-cta hidden" href="#reactions">
             <svg width="22" height="22" role="img" aria-hidden="true">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#comment-logo"></use>
             </svg>
-            {{ self.reactions() }}
+            <span class="num-reactions"></span> <span class="reactions-label" data-singular="{{ self.reaction() }}" data-plural="{{ self.reactions() }}" data-plural-alt="{{ self.reactionsAlt() }}">{{ self.reactionsDefault() }}</span>
           </a>
+          {% endif %}
+          <button class="alt btn chapter-cta share-cta hidden">
+            <svg width="22" height="22" role="img" aria-hidden="true" class="apple-icon hidden">
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share-apple-logo"></use>
+            </svg>
+            <svg width="22" height="22" role="img" aria-hidden="true" class="android-icon">
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share-android-logo"></use>
+            </svg>
+            {{ self.share() }}
+          </button>
         </div>
-        {% endif %}
         <nav aria-label="{{ self.prev_next_title() }}" id="chapter-navigation">
             {{ render_prevnext() }}
         </nav>