Language links refactor (programminghistorian#818)

* use snippets for author info heading * refactor translation<>original links using where_exp * for citation use translation_date rather than trying to check language * use direct paths to spanish lessons rather than redirects * bundle update * add "original" metadata to all translated lessons * Functioning page-to-page translation links Refactors the generation of translation links so that, for any page that points to an "original" source language, we can identify its translations and generate the proper links in the menu header * add "original" links for existing spanish lessons * only create twitter cards for lessons and posts * Create autogenerated translation concordance Useful for debugging * Describe how to use `original` YAML tag in ES editorial guide * Document how the new translation links work. * render translation concordance as table * add translation concordance to about menu * enforce "original" links on spanish lessons This does mean that lessons submitted originally in Spanish will need to use the "exclude_from_check" tag.
ianmilligan1 · May 5, 2018 · 5329dcabc2ff89d38512d88b23a0fa864208b195 · 5329dca
1 parent 5e23c09
commit 5329dcabc2ff89d38512d88b23a0fa864208b195
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -24,12 +24,12 @@ GEM
      ffi (>= 1.3.0)
    eventmachine (1.2.5)
    execjs (2.7.0)
-  
-    faraday (0.14.0)
+  
+    faraday (0.15.0)
      multipart-post (>= 1.2, < 3)
    ffi (1.9.23)
    forwardable-extended (2.6.0)
    gemoji (3.0.0)
-  
-    github-pages (180)
+  
+    github-pages (182)
      activesupport (= 4.2.9)
      github-pages-health-check (= 1.4.0)
      jekyll (= 3.7.3)
@@ -51,26 +51,26 @@ GEM
      jekyll-seo-tag (= 2.4.0)
      jekyll-sitemap (= 1.2.0)
      jekyll-swiss (= 0.4.0)
-  
-      jekyll-theme-architect (= 0.1.0)
-  
-      jekyll-theme-cayman (= 0.1.0)
-  
-      jekyll-theme-dinky (= 0.1.0)
-  
-      jekyll-theme-hacker (= 0.1.0)
-  
-      jekyll-theme-leap-day (= 0.1.0)
-  
-      jekyll-theme-merlot (= 0.1.0)
-  
-      jekyll-theme-midnight (= 0.1.0)
-  
-      jekyll-theme-minimal (= 0.1.0)
-  
-      jekyll-theme-modernist (= 0.1.0)
-  
-      jekyll-theme-primer (= 0.5.2)
-  
-      jekyll-theme-slate (= 0.1.0)
-  
-      jekyll-theme-tactile (= 0.1.0)
-  
-      jekyll-theme-time-machine (= 0.1.0)
+  
+      jekyll-theme-architect (= 0.1.1)
+  
+      jekyll-theme-cayman (= 0.1.1)
+  
+      jekyll-theme-dinky (= 0.1.1)
+  
+      jekyll-theme-hacker (= 0.1.1)
+  
+      jekyll-theme-leap-day (= 0.1.1)
+  
+      jekyll-theme-merlot (= 0.1.1)
+  
+      jekyll-theme-midnight (= 0.1.1)
+  
+      jekyll-theme-minimal (= 0.1.1)
+  
+      jekyll-theme-modernist (= 0.1.1)
+  
+      jekyll-theme-primer (= 0.5.3)
+  
+      jekyll-theme-slate (= 0.1.1)
+  
+      jekyll-theme-tactile (= 0.1.1)
+  
+      jekyll-theme-time-machine (= 0.1.1)
      jekyll-titles-from-headings (= 0.5.1)
      jemoji (= 0.9.0)
      kramdown (= 1.16.2)
      liquid (= 4.0.0)
      listen (= 3.1.5)
      mercenary (~> 0.3)
-  
-      minima (= 2.4.0)
+  
+      minima (= 2.4.1)
      nokogiri (>= 1.8.1, < 2.0)
      rouge (= 2.2.1)
      terminal-table (~> 1.4)
@@ -153,44 +153,44 @@ GEM
    jekyll-sitemap (1.2.0)
      jekyll (~> 3.3)
    jekyll-swiss (0.4.0)
-  
-    jekyll-theme-architect (0.1.0)
+  
+    jekyll-theme-architect (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-cayman (0.1.0)
+  
+    jekyll-theme-cayman (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-dinky (0.1.0)
+  
+    jekyll-theme-dinky (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-hacker (0.1.0)
+  
+    jekyll-theme-hacker (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-leap-day (0.1.0)
+  
+    jekyll-theme-leap-day (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-merlot (0.1.0)
+  
+    jekyll-theme-merlot (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-midnight (0.1.0)
+  
+    jekyll-theme-midnight (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-minimal (0.1.0)
+  
+    jekyll-theme-minimal (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-modernist (0.1.0)
+  
+    jekyll-theme-modernist (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-primer (0.5.2)
+  
+    jekyll-theme-primer (0.5.3)
      jekyll (~> 3.5)
      jekyll-github-metadata (~> 2.9)
-  
-      jekyll-seo-tag (~> 2.2)
-  
-    jekyll-theme-slate (0.1.0)
+  
+      jekyll-seo-tag (~> 2.0)
+  
+    jekyll-theme-slate (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-tactile (0.1.0)
+  
+    jekyll-theme-tactile (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
-  
-    jekyll-theme-time-machine (0.1.0)
+  
+    jekyll-theme-time-machine (0.1.1)
      jekyll (~> 3.5)
      jekyll-seo-tag (~> 2.0)
    jekyll-titles-from-headings (0.5.1)
@@ -210,7 +210,7 @@ GEM
      ruby_dep (~> 1.2)
    mercenary (0.3.6)
    mini_portile2 (2.3.0)
-  
-    minima (2.4.0)
+  
+    minima (2.4.1)
      jekyll (~> 3.5)
      jekyll-feed (~> 0.9)
      jekyll-seo-tag (~> 2.1)
@@ -249,7 +249,7 @@ GEM
      ethon (>= 0.9.0)
    tzinfo (1.2.5)
      thread_safe (~> 0.1)
-  
-    unicode-display_width (1.3.0)
+  
+    unicode-display_width (1.3.2)
    yell (2.0.7)
 PLATFORMS
diff --git a/_config.yml b/_config.yml
@@ -20,11 +20,15 @@ defaults:
      path: ""
    values:
      lang: "en"
+  
+      basepath: ""
+  
+      lessonpath: "/lessons"
  -
    scope:
      path: "es"
    values:
      lang: "es"
+  
+      basepath: "/es"
+  
+      lessonpath: "/lecciones"
  -
    scope:
      path: "lessons"
diff --git a/_data/snippets.yml b/_data/snippets.yml
@@ -1,3 +1,7 @@
+  
+language-list:
+  
+  - en
+  
+  - es
+  
+
 # top nav bar
 menu-home:
  en: /
@@ -86,13 +90,19 @@ menu-blog:
    title: Blog
    link: /blog
 menu-lang:
-  
-  en:
-  
-    title: '[español]'
-  
-    link: /es
  es:
+  
+    title: '[es]'
+  
+    link: /es
+  
+  en:
    title: '[en]'
    link: /
-  
-
+  
+menu-translation-concordance:
+  
+  es:
+  
+    title: Concordancia de traducción
+  
+    link: /translation-concordance
+  
+  en:
+  
+    title: Translation Concordance
+  
+    link: /translation-concordance
 # site footer
 footer:
  license:
@@ -276,3 +286,15 @@ language-name:
 translation-source:
  en: This lesson was originally published in
  es: Esta lección fue publicada originalmente en
+  
+
+  
+# Author Info
+  
+about-the:
+  
+  en: About the
+  
+  es: Acerca
+  
+the-authors:
+  
+  singular:
+  
+    en: author
+  
+    es: del autor
+  
+  plural:
+  
+    en: authors
+  
+    es: de los autores
diff --git a/_includes/author-info.html b/_includes/author-info.html
@@ -5,12 +5,7 @@
 {% assign authorCount = page.authors | size %}
 <div class="author-info">
-  
-  {% if page.lang == 'en' %}
-  
-      <h5 class="author-name">About the {% if authorCount == 1 %}author{% else %}authors{% endif %}</h5>
-  
-  {% endif %}
-  
-  {% if page.lang == 'es' %}
-  
-      <p class="author-name">Acerca {% if authorCount == 1 %}del autor{% else %}de los autores{% endif %}</p>
-  
-  {% endif %}
+  
+    <h5 class="author-name">{{ site.data.snippets.about-the[page.lang] }} {% if authorCount == 1 %}{{ site.data.snippets.the-authors.singular[page.lang] }}{% else %}{{ site.data.snippets.the-authors.plural[page.lang] }}{% endif %}</h5>
 </div>
 <div class="author-description">
  {% for author in page.authors %}
diff --git a/_includes/figure.html b/_includes/figure.html
@@ -8,14 +8,13 @@
 {% endcomment %}
-  
-
-  
-{% include lesson-slug.html %}
+  
+{% include page-slug.html %}
 {% if include.filename contains "http" %}
  {% capture fullpath %}{{ include.filename }}{% endcapture %}
 {% else %}
 {% if page.layout == "lesson" %}
-  
-  {% capture fullpath %}{{ site.baseurl }}/images/{{ slug }}/{{ include.filename }}{% endcapture %}
+  
+  {% capture fullpath %}{{ site.baseurl }}/images/{{ canonical_slug }}/{{ include.filename }}{% endcapture %}
 {% else %}
  {% capture fullpath %}{{ site.baseurl }}/{{ include.filename }}{% endcapture %}
 {% endif %}
diff --git a/_includes/header.html b/_includes/header.html
@@ -4,7 +4,9 @@
  {% include metadata.html %}
+  
+  {% if page.lesson or page.category == "posts" %}
  {% include twitter-card.html %}
+  
+  {% endif %}
  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width">
diff --git a/_includes/lesson-slug.html b/_includes/lesson-slug.html
diff --git a/_includes/lesson_describe.html b/_includes/lesson_describe.html
@@ -8,23 +8,20 @@
 {% endcomment %}
-  
-{% include lesson-slug.html lesson=lesson %}
-  
-
-  
-{% if lesson.lang == "es" %}
-  
-  {% capture path %}{{ site.baseurl }}/es/lessons/{{ slug }}{% endcapture %}
-  
-{% else %}
-  
-  {% capture path %}{{ site.baseurl }}/lessons/{{ slug }}{% endcapture %}
-  
-{% endif %}
-  
-{% capture imgpath %}{{ site.baseurl }}/gallery/{{ slug }}{% endcapture %}
-  
-
 <div class="lesson-description clearfix">
+  
+  {% if lesson.original %}
+  
+    {% assign canonical_slug = lesson.original %}
+  
+  {% else %}
+  
+    {% assign canonical_slug = lesson.url | split: "/" | last | remove_first: ".html" %}
+  
+  {% endif %}
+  
+
  <div class="lesson-image">
-  
-    <a href="{{ path }}"><img class="rounded" src="{{ imgpath }}.png"></a>
+  
+    <a href="{{ lesson.url }}"><img class="rounded" src="/gallery/{{ canonical_slug }}.png"></a>
  </div>
  <h3 class="above-title">{{ include.authors }}</h3>
-  
-  <a href="{{ path }}"><h2 class="title">{{ lesson.title }}</h2></a>
+  
+  <a href="{{ lesson.url }}"><h2 class="title">{{ lesson.title }}</h2></a>
  <p class="abstract">{{ lesson.abstract }}</p>
diff --git a/_includes/menu.html b/_includes/menu.html
@@ -1,3 +1,5 @@
+  
+{% include translation-links.html %}
+  
+
 <nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
  <!--<div class="container">-->
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -14,6 +16,7 @@
            <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-about-overview[page.lang].link}}">{{site.data.snippets.menu-about-overview[page.lang].title}}</a>
            <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-about-team[page.lang].link}}">{{site.data.snippets.menu-about-team[page.lang].title}}</a>
            <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-about-research[page.lang].link}}">{{site.data.snippets.menu-about-research[page.lang].title}}</a>
+  
+            <a class="dropdown-item" href="{{ site.data.snippets.menu-translation-concordance[page.lang].link}}">{{site.data.snippets.menu-translation-concordance[page.lang].title}}</a>
          </div>
        </li>
@@ -35,14 +38,37 @@
        <a class="nav-link" href="{{site.baseurl}}{{site.data.snippets.menu-lessons[page.lang].link}}">{{site.data.snippets.menu-lessons[page.lang].title}}</a>
      </li>
+  
+      {% comment %}
+  
+      This tries to find the correct corresponding link to give to the language switching buttons in the upper right of the page. Where it can find a matching translation/translation_source for the current page in another language, that link will be added. If no translation/translation_source for this page is found for a given language, then the default "home page" link for that language is used instead.
+  
+      {% endcomment %}
+  
+
      <li class="nav-item">
        <a class="nav-link" href="{{site.baseurl}}{{site.data.snippets.menu-blog[page.lang].link}}">{{site.data.snippets.menu-blog[page.lang].title}}</a>
      </li>
-  
-      <li class="nav-item">
-  
-        <a class="nav-link lang" href="{{site.baseurl}}{{site.data.snippets.menu-lang[page.lang].link}}">{{site.data.snippets.menu-lang[page.lang].title}}</a>
-  
-      </li>
+  
+        {% assign other_languages = site.data.snippets.language-list | where_exp: "item", "item != page.lang" %}
+  
+
+  
+        {% for lang in other_languages %}
+  
+        {% assign language_is_source = translation_source | where_exp: "item", "item.lang == lang" | first %}
+  
+
+  
+        {% if language_is_source %}
+  
+          {% assign alternate_target = language_is_source %}
+  
+        {% else %}
+  
+
+  
+        {% assign alternate_target = translation_candidates | where_exp: "item", "item.lang == lang" | first %}
+  
+
+  
+        {% endif %}
+  
+
+  
+        {% if alternate_target %}
+  
+          {% assign page_link = alternate_target.url %}
+  
+        {% else %}
+  
+          {% assign page_link = site.data.snippets.menu-lang[lang].link %}
+  
+        {% endif %}
+  
+        <li class="nav-item">
+  
+          <a class="nav-link lang" href="{{ page_link }}">{{site.data.snippets.menu-lang[lang].title}}</a>
+  
+        </li>
+  
+        {% endfor %}
    </ul>
  </div>
diff --git a/_includes/page-slug.html b/_includes/page-slug.html
@@ -0,0 +1,12 @@
+  
+{% comment %}
+  
+
+  
+Calculates canonical page slug used for referencing subdirectories in the /assets/images and /gallery directories. If the page is translated, then the canonical slug belongs to the original lesson; if not, then the canonical slug is taken from the page url alone.
+  
+
+  
+{% endcomment %}
+  
+
+  
+{% assign slug = page.url | split: "/" | last | remove_first: ".html" %}
+  
+{% if page.original %}
+  
+  {% assign canonical_slug = page.original %}
+  
+{% else %}
+  
+  {% assign canonical_slug = slug %}
+  
+{% endif %}
diff --git a/_includes/translation-links.html b/_includes/translation-links.html
@@ -0,0 +1,14 @@
+  
+{% comment %}
+  
+Attached to all pages, this include will check two things:
+  
+
+  
+1. First, if there are any translations of this page elsewhere on the site. Those 0+ page objects are saved to the variable `translation_candidates` available when rendering the rest of the page.
+  
+
+  
+2. IF this page is known to be a translation of another page because its YAML contains an `original` tag, then the second section of this workflow searches across the site to find the 1 matching page that is the `translation_source`
+  
+{% endcomment %}
+  
+
+  
+{% include page-slug.html %}
+  
+
+  
+{% assign translation_candidates = site.pages | where_exp: "item", "item.original contains slug" | where_exp: "item", "item.url != page.url" %}
+  
+
+  
+{% assign target_slug = page.original %}
+  
+{% assign translation_source = site.pages | where_exp: "item", "item.url contains target_slug" | where_exp: "item", "item.url != page.url" | where_exp: "item", "item.name != 'redirect.html'" %}
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -4,6 +4,8 @@
  This template, therefore, is most useful on pages requiring full-window bleeds: the index page and lessons pages.
 {% endcomment %}
+  
+<!-- Calculate the lesson slug for use across this page -->
+  
+
 <!DOCTYPE html>
 <html lang="{{ page.lang }}">
diff --git a/_layouts/blank.html b/_layouts/blank.html
@@ -4,7 +4,6 @@
  This is the standard template used by ALL site pages EXCEPT the home page and lessons pages (which have full-window bleeds and therefore cannot have all page content wrapped in the "container" div; they use the base template).
 {% endcomment %}
-  
-
 <!DOCTYPE html>
 <html lang="{{ page.lang }}">