wai-website-theme 1.2 → 1.3

data/_includes/secondarynav.html

@@ -1,9 +1,16 @@
 {%- if page.parent == "/" -%}
   {%- assign searchurl = page.parent -%}
 {%- else -%}
-  {%- assign searchurl = page.url -%}
+  {%- if page.ref and page.lang -%}
+    {%- if page.lang != "en" -%}
+      {%- assign searchurl = enpage.url -%}
+    {%- else -%}
+      {%- assign searchurl = page.url -%}
+    {%- endif -%}
+  {%- else -%}
+    {%- assign searchurl = page.url -%}
+  {%- endif -%}
 {%- endif -%}
-{%- assign col = site.collections | where: "label", page.collection | first -%}
 {%- if col.navigation -%}
   {%- assign currentsubnav = col.navigation -%}
 {%- else -%}
@@ -27,11 +34,11 @@
   {%- endfor -%}
 {%- endfor -%}
 {%- endif -%}
-
+<div class="sidenav">
 {%- for i in currentsubnav.pages -%}
   {%- if forloop.first -%}
-    <nav class="sidenav sn-contents" aria-label="Secondary">
-      <div class="sidenav--head"><div class="sidenav--head-title"><div class="sidenav--head-subsection">{{ currentsubnav.name }}</div></div></div>
+    <nav class="sn-contents" aria-label="Secondary">
+      <div class="sidenav--head"><div class="sidenav--head-title"><div class="sidenav--head-subsection">{% include_cached inpl.html lang=page.lang a=currentsubnav.name %}</div></div></div>
       <ul class="sidenav--list">
   {% endif %}
   {%- assign insub = false -%}
@@ -67,4 +74,25 @@
     {% include menuitem.html name=i.name url=i.url different=i.different hide=i.hide insub=insub current=false submenu=submenu %}
   {%- endif -%}
   {%- if forloop.last %}</ul></nav>{% endif -%}
-{%- endfor -%}
+{%- endfor -%}
+{% if page.ref %}
+  {%- for p in translations %}
+    {%-if forloop.first -%}
+      <nav class="sidenav-languages" aria-labelledby="languagehead">
+        <header id="languagehead">{% include t.html t="Languages/Translations" %}</header>
+        <ul class="langlist">
+          <li style="margin-bottom: 2px;">{% if 'en' == page.lang %}<strong style="text-transform: capitalize;">{{ site.data.lang['en'].nativeName }} (original)</strong>{% else %}<a href="{{ enpage.url | relative_url }}" lang="en" dir="auto" translate="no">{{ site.data.lang['en'].nativeName }} (original)</a>{% endif %}</li>
+    {%- endif -%}
+    <li style="margin-bottom: 2px;">{% if p.lang == page.lang %}<strong style="text-transform: capitalize;">{{ site.data.lang[p.lang].nativeName }}</strong>{% else %}<a style="text-transform: capitalize;" href="{{ p.url | relative_url }}" dir="auto" translate="no" lang="{{ p.lang }}">{{ site.data.lang[p.lang].nativeName }}</a>{% endif %}</li>
+    {%- if forloop.last -%}
+        </ul>
+        {%- unless page.lang == "en" -%}
+        <p><a href="{{"/translations/#" | append: page.lang | relative_url}}">{% include t.html t="Other Resources in" %} {{ site.data.lang[page.lang].nativeName }}</a></p>
+        {% endunless %}
+        <p><a href="{{"/translations/" | relative_url}}">{% include t.html t="All&nbsp;Translations" %}</a></p>
+        <p><a href="{{"/about/translating/" | relative_url}}">{% include t.html t="Translating WAI Resources" %}</a></p>
+      </nav>
+    {%- endif -%}
+  {% endfor -%}
+{% endif %}
+</div>

data/_includes/t.html

@@ -0,0 +1,33 @@
+{%- assign pagelang = 'en' -%}
+{%- if page.lang -%}
+  {%- assign pagelang = page.lang -%}
+{%- endif -%}
+{%- if include.lang -%}
+  {%- assign pagelang = include.lang -%}
+{%- endif -%}
+{%- if pagelang == "en" -%}
+  {%- assign phrase = include.t -%}
+  {%- if include.replace -%}
+    {%- assign replacements = include.replace | split: "||" -%}
+    {%- for r in replacements -%}
+      {%- assign pair = r | split: "|" -%}
+      {%- assign phrase = phrase | replace: pair[0], pair[1] -%}
+    {%- endfor -%}
+  {%- endif -%}
+{%- else -%}
+  {%- assign source=site.data.translations | where: "en", include.t | first -%}
+  {%- if source[pagelang] -%}
+    {%- assign phrase=source[pagelang] -%}
+  {%- else -%}
+    {%- unless site.hideTranslationHints %}<mark lang="en">Needs Translation</mark> {% endunless -%}
+    {%- assign phrase=include.t -%}
+  {%- endif -%}
+  {%- if include.replace -%}
+    {%- assign replacements = include.replace | split: "||" -%}
+    {%- for r in replacements -%}
+      {%- assign pair = r | split: "|" -%}
+      {%- assign phrase = phrase | replace: pair[0], pair[1] -%}
+    {%- endfor -%}
+  {%- endif -%}
+{%- endif -%}
+{{- phrase -}}

data/_includes/translation-note-msg.html

@@ -0,0 +1,45 @@
+{%- assign pagelang = 'en' -%}
+{%- if page.lang -%}
+  {%- assign pagelang = page.lang -%}
+{%- endif -%}
+{%- unless pagelang == "en" -%}
+{%- assign enupdatedate = enpage.last_updated | date: "%s" -%}
+{%- assign thisupdatedate = page.last_updated | date: "%s" -%}
+{%- if page.changelog -%}
+  {%- assign chagelogpage=site.documents | where:"ref", page.changelog | first -%}
+  {%- unless changelogpage.ref -%}
+    {%- assign changelogpage=site.pages | where:"ref", page.changelog | first -%}
+  {%- endunless -%}
+  {%- assign changelogpageurl = changelogpage.url | relative_url -%}
+  {%- assign changelogpagereplace = "$1|" | append: changelogpageurl -%}
+{%- else -%}
+  {%- assign changelog = "" -%}
+{%- endif -%}
+<section id="translation-info" class="doc-note-box doc-note-translation">
+  <h2 class="visuallyhidden">{% include t.html t="About this Translation" %}</h2>
+  <p>{% assign replacepattern = enpage.url | relative_url | prepend: "$1|"  %}{% include t.html t='This volunteer translation might not accurately reflect the intentions of the <a href="$1">English original</a>.' replace=replacepattern %}</p>
+  {% if pagelang == 'en' %}
+  <p>{% include_cached icon.html name="check-circle" %} {% include t.html t='Translation up-to-date with the English version.' %}
+    <br>{% include t.html t='Translation updated:' %} <span dir="auto">{{page.last_updated | date: "%d %b %Y"}}</span>. {% include t.html t='English updated:' %} <span dir="auto">{{enpage.last_updated | date: "%d %b %Y"}}</span>.
+   </p>
+  <p>{% include_cached icon.html name="warning" %} {% include t.html t='English version updated since this translation: <a href="$1">Change log</a>.' replace=changelogpagereplace %}
+    <br>{% include t.html t='English updated:' %} <span dir="auto">{{enpage.last_updated | date: "%d %b %Y"}}</span>. {% include t.html t='Translation updated:' %} <span dir="auto">{{page.last_updated | date: "%d %b %Y"}}</span>.
+  </p>
+  {% else %}
+  {% if enupdatedate <= thisupdatedate %}
+  <p>{% include_cached icon.html name="check-circle" %} {% include t.html t='Translation up-to-date with the English version.' %}
+    <br>{% include t.html t='Translation updated:' %} <span dir="auto">{{page.last_updated | date: "%d %b %Y"}}</span>. {% include t.html t='English updated:' %} <span dir="auto">{{enpage.last_updated | date: "%d %b %Y"}}</span>.
+   </p>
+  {% else %}
+  <p>{% include_cached icon.html name="warning" %} {% include t.html t='English version updated since this translation: <a href="$1">Change log</a>.' replace=changelogpagereplace %}
+    <br>{% include t.html t='English updated:' %} <span dir="auto">{{enpage.last_updated | date: "%d %b %Y"}}</span>. {% include t.html t='Translation updated:' %} <span dir="auto">{{page.last_updated | date: "%d %b %Y"}}</span>.
+  </p>
+  {% endif %}
+  {% endif %}
+  <p>
+    {%- assign replacepattern = "/about/translating/" | relative_url | prepend: "$1|" -%}
+    {% if page.translator %}<strong>{% include t.html t='Translator:' %}</strong> {{page.translator}}.{% endif %}
+    {% if page.contributors %}{% include t.html t='Contributor:' %} {{page.contributors}}.{% endif %}
+    {% include t.html t='WAI thanks translators, and welcomes other <a href="$1">translations</a>.' replace=replacepattern %}</p>
+</section>
+{%- endunless -%}

data/_includes/video-player.html

@@ -1,16 +1,53 @@
+{%- assign langs = site.data.lang -%}
 <div class="video-container" data-video-type="">
-  <video preload="metadata" data-youtube-id="{{include.yt-id}}" width="450">
-    {%- assign captions = include.captions | split: ',' %}{% for caption in captions %}{% assign c = caption | split: '|' %}<track src="{{c[0] | relative_url }}" label="{{c[2]}}" kind="captions" srclang="{{c[1]}}" {% if forloop.first %}default{% endif %} />{% endfor -%}
-    {%- assign subtitles = include.subtitles | split: ',' %}{% for subtitle in subtitles %}{% assign s = subtitle | split: '|' %}<track src="{{s[0] | relative_url }}" label="{{s[2]}}" kind="subtitles" srclang="{{s[1]}}" />{% endfor -%}
-    {%- assign descriptions = include.descriptions | split: ',' %}{% for desc in descriptions %}{% assign d = desc | split: '|' %}<track src="{{ d[0] | relative_url }}" label="{{d[2]}}" kind="descriptions" srclang="{{d[1]}}" />{% endfor -%}
+  <video preload="metadata" data-youtube-id="{{include.yt-id}}" data-youtube-nocookie="true" width="450"{% if page.lang == "nl" %} data-lang="nl"{% endif %}>
+    {%- assign captions = include.captions | split: ',' -%}
+    {%- for caption in captions -%}
+      {%- assign c = caption | split: '|' -%}
+      {%- assign clangcode = c[1] -%}
+      {%- assign l = langs[clangcode].nativeName -%}
+      <track src="{{ include.path | append: c[0] | relative_url }}" label="{{l}}" kind="captions" srclang="{{c[1]}}" {% if c[2] == "default" %}default{% endif %}>
+    {%- endfor -%}
+    {%- assign subtitles = include.subtitles | split: ',' -%}
+      {%- for subtitle in subtitles -%}
+        {%- assign s = subtitle | split: '|' -%}
+        {%- assign slangcode = s[1] -%}
+        {%- assign l = langs[slangcode].nativeName -%}
+        <track src="{{ include.path | append: s[0] | relative_url }}" label="{{l}}" kind="subtitles" srclang="{{s[1]}}" {% if s[2] == "default" %}default{% endif %}>
+      {%- endfor -%}
+    {%- assign descriptions = include.descriptions | split: ',' -%}
+      {%- for desc in descriptions -%}
+        {%- assign d = desc | split: '|' -%}
+        {%- assign dlangcode = d[1] -%}
+        {%- assign l = langs[dlangcode].nativeName -%}
+        <track src="{{ include.path | append: d[0] | relative_url }}" label="{{l}}" kind="descriptions" srclang="{{d[1]}}" {% if d[2] == "default" %}default{% endif %}>
+      {%- endfor -%}
   </video>
 </div>
 {% if include.yt-id-ad %}
 <div class="video-container" data-video-type="audio-described">
-  <video preload="metadata" data-youtube-id="{{include.yt-id-ad}}" width="450">
-    {%- assign captions = include.captions-ad | split: ',' %}{% for caption in captions %}{% assign c = caption | split: '|' %}<track src="{{c[0] | relative_url }}" label="{{c[2]}}" kind="captions" srclang="{{c[1]}}" {% if forloop.first %}default{% endif %} />{% endfor -%}
-    {%- assign subtitles = include.subtitles-ad | split: ',' %}{% for subtitle in subtitles %}{% assign s = subtitle | split: '|' %}<track src="{{s[0] | relative_url }}" label="{{s[2]}}" kind="subtitles" srclang="{{s[1]}}" />{% endfor -%}
-    {%- assign descriptions = include.descriptions-ad | split: ',' %}{% for desc in descriptions %}{% assign d = desc | split: '|' %}<track src="{{ d[0] | relative_url }}" label="{{d[2]}}" kind="descriptions" srclang="{{d[1]}}" />{% endfor -%}
+  <video preload="metadata" data-youtube-id="{{include.yt-id-ad}}" data-youtube-nocookie="true" width="450">
+    {%- assign captions = include.captions-ad | split: ',' -%}
+    {%- for caption in captions -%}
+      {%- assign c = caption | split: '|' -%}
+      {%- assign clangcode = c[1] -%}
+      {%- assign l = langs[clangcode].nativeName -%}
+      <track src="{{ include.path | append: c[0] | relative_url }}" label="{{l}}" kind="captions" srclang="{{c[1]}}" {% if c[2] == "default" %}default{% endif %}>
+    {%- endfor -%}
+    {%- assign subtitles = include.subtitles-ad | split: ',' -%}
+      {%- for subtitle in subtitles -%}
+        {%- assign s = subtitle | split: '|' -%}
+        {%- assign slangcode = s[1] -%}
+        {%- assign l = langs[slangcode].nativeName -%}
+        <track src="{{ include.path | append: s[0] | relative_url }}" label="{{l}}" kind="subtitles" srclang="{{s[1]}}"  {% if s[2] == "default" %}default{% endif %}>
+      {%- endfor -%}
+    {%- assign descriptions = include.descriptions-ad | split: ',' -%}
+      {%- for desc in descriptions -%}
+        {%- assign d = desc | split: '|' -%}
+        {%- assign dlangcode = d[1] -%}
+        {%- assign l = langs[dlangcode].nativeName -%}
+        <track src="{{ include.path | append: d[0] | relative_url }}" label="{{l}}" kind="descriptions" srclang="{{d[1]}}"  {% if d[2] == "default" %}default{% endif %}>
+      {%- endfor -%}
   </video>
 </div>
 <p><button id="audio_description_button"><svg aria-hidden="true" class="icon-audio-description "><use xlink:href="{{ "/assets/images/icons.svg#icon-audio-description" | relative_url }}"></use></svg> <span>Enable Audio Description</span></button></p>
@@ -64,6 +101,8 @@
 
   var audiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
 
+  if (audiodescribed) {
+
   Array.prototype.forEach.call(audiodescribed, function(el, i){
     el.setAttribute('hidden', true);
   });
@@ -97,5 +136,7 @@
     }
   });
 
+  }
+
 }());
-</script>
+</script>

data/_layouts/default.html

@@ -1,11 +1,32 @@
+{%- assign pagelang = 'en' -%}
+{%- if page.lang -%}
+  {%- assign pagelang = page.lang -%}
+{%- endif -%}
+{%- if pagelang == 'en' -%}
+  {%- assign enpage = page -%}
+{%- else -%}
+  {%- assign enpage=site.documents | where:"ref", page.ref | where: "lang", "en" | first -%}
+  {%- unless enpage.ref -%}
+    {%- assign enpage=site.pages | where:"ref", page.ref | where: "lang", "en" | first -%}
+  {%- endunless -%}
+{%- endif -%}
+{%- assign englishpageurl = enpage.url %}
+{% assign translations=site.documents | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
+{%- unless translations[0].ref -%}
+  {% assign translations=site.pages | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
+{%- endunless -%}
 <!DOCTYPE html>
-<html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
+<html class="no-js" lang="{% if page.lang %}{{page.lang}}{% else %}en{% endif %}" dir="{% if site.data.lang[pagelang].rtl %}rtl{% else %}ltr{% endif %}" prefix="og: http://ogp.me/ns#">
   {%- assign timestamp = site.time | date: '%s%N' -%}
   {%- assign timestamp = '?' | append: timestamp -%}
-  {% include_cached head.html type="start" timestamp=timestamp %}
-  <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
-  {%- if page.external_css %}<link rel="stylesheet" href="{{ page.external_css | relative_url | append: include.timestamp }}">{% endif -%}
-  {%- if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif -%}
+  {%- include_cached head.html type="start" timestamp=timestamp -%}
+  {%- if site.data.lang[pagelang].rtl -%}
+  <title> W3C | {{ site.title | escape }} | {{ page.title | escape }} {%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%}</title>
+  {%- else -%}
+  <title>{%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
+  {%- endif -%}
+  {%- if page.external_css %}<link rel="stylesheet" href="{{ page.external_css | relative_url | append: timestamp }}">{% endif -%}
+  {%- if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: timestamp }}">{% endif -%}
   {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
   {%- capture seo -%}
     {%- seo title=false -%}
@@ -16,18 +37,20 @@
   {%- endunless -%}
   {% include_cached head.html type="end" %}
   <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
-    {% include header.html %}
+    {% include header.html translations=translations %}
     <div class="default-grid with-gap{% unless page.noleftcol %} leftcol{% endunless %}">
 
-  {% include secondarynav.html %}
+  {% include secondarynav.html parent=page.parent  %}
 
   <main id="main"{% if page.lang %} lang="{{page.lang}}"{% endif %}>
     <h1>{% if page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{page.title_icon | relative_url}}"></use></svg> {% endif %}{% if page.title_html %}{{ page.title_html }}{% else %}{{ page.title }}{% endif %}</h1>
 
     {%- include doc-note-msg.html -%}
+    {%- include translation-note-msg.html -%}
 
     {{ content }}
 
+    {{page.wcag_success_criteria}}{{page.wcag_techniques}}
     {% if page.wcag_success_criteria or page.wcag_techniques %}
       {% include resources.html %}
     {% endif %}
@@ -36,11 +59,11 @@
 
     {% include prevnext.html %}
 
-    {% include_cached backtotop.html %}
+    {% include_cached backtotop.html lang=page.lang %}
   </main>
 </div>
 
 {% include footer.html %}
 
   </body>
-</html>
+</html>

data/_layouts/home.html

@@ -1,10 +1,31 @@
+{%- assign pagelang = 'en' -%}
+{%- if page.lang -%}
+  {%- assign pagelang = page.lang -%}
+{%- endif -%}
+{%- if pagelang == 'en' -%}
+  {%- assign enpage = page -%}
+{%- else -%}
+  {%- assign enpage=site.documents | where:"ref", page.ref | where: "lang", "en" | first -%}
+  {%- unless enpage.ref -%}
+    {%- assign enpage=site.pages | where:"ref", page.ref | where: "lang", "en" | first -%}
+  {%- endunless -%}
+{%- endif -%}
+{%- assign englishpageurl = enpage.url %}
+{% assign translations=site.documents | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
+{%- unless translations[0].ref -%}
+  {% assign translations=site.pages | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
+{%- endunless -%}
 <!DOCTYPE html>
-<html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
+<html class="no-js" lang="{% if page.lang %}{{page.lang}}{% else %}en{% endif %}" dir="{% if site.lang[page.lang].rtl == true %}rtl{% else %}ltr{% endif %}" prefix="og: http://ogp.me/ns#">
   {%- assign timestamp = site.time | date: '%s%N' -%}
   {%- assign timestamp = '?' | append: timestamp -%}
-  {% include_cached head.html type="start" timestamp=timestamp %}
-  <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
-  {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif %}
+  {%- include_cached head.html type="start" timestamp=timestamp -%}
+  {%- if site.data.lang[pagelang].rtl -%}
+  <title> W3C | {{ site.title | escape }} | {{ page.title | escape }} {%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%}</title>
+  {%- else -%}
+  <title>{%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
+  {%- endif -%}
+  {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: timestamp }}">{% endif %}
   {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
   {%- capture seo -%}
     {%- seo title=false -%}
@@ -16,9 +37,12 @@
   {% include_cached head.html type="end" %}
   <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
 
-{% include header.html %}
+{% include header.html translations=translations %}
 <main id="main"{% if page.lang %} lang="{{page.lang}}"{% endif %}>
+
 {{content}}
+
+{% include_cached backtotop.html lang=page.lang %}
 </main>
 
 {% include footer.html %}

data/_layouts/news.html

@@ -1,10 +1,31 @@
+{%- assign pagelang = 'en' -%}
+{%- if page.lang -%}
+  {%- assign pagelang = page.lang -%}
+{%- endif -%}
+{%- if pagelang == 'en' -%}
+  {%- assign enpage = page -%}
+{%- else -%}
+  {%- assign enpage=site.documents | where:"ref", page.ref | where: "lang", "en" | first -%}
+  {%- unless enpage.ref -%}
+    {%- assign enpage=site.pages | where:"ref", page.ref | where: "lang", "en" | first -%}
+  {%- endunless -%}
+{%- endif -%}
+{%- assign englishpageurl = enpage.url %}
+{% assign translations=site.documents | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
+{%- unless translations[0].ref -%}
+  {% assign translations=site.pages | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
+{%- endunless -%}
 <!DOCTYPE html>
-<html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
+<html class="no-js" lang="{% if page.lang %}{{page.lang}}{% else %}en{% endif %}" dir="{% if site.lang[page.lang].rtl == true %}rtl{% else %}ltr{% endif %}" prefix="og: http://ogp.me/ns#">
   {%- assign timestamp = site.time | date: '%s%N' -%}
   {%- assign timestamp = '?' | append: timestamp -%}
-  {% include_cached head.html type="start" timestamp=timestamp %}
-  <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
-  {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif %}
+  {%- include_cached head.html type="start" timestamp=timestamp -%}
+  {%- if site.data.lang[pagelang].rtl -%}
+  <title> W3C | {{ site.title | escape }} | {{ page.title | escape }} {%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%}</title>
+  {%- else -%}
+  <title>{%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
+  {%- endif -%}
+  {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: timestamp }}">{% endif %}
   {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
   {%- capture seo -%}
     {%- seo title=false -%}
@@ -15,7 +36,7 @@
   {%- endunless -%}
   {% include_cached head.html type="end" %}
   <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
-    {% include header.html %}
+    {% include header.html translations=translations %}
 
 <main id="main">
   <div class="grid-five-three">
@@ -30,7 +51,7 @@
 
   {% include prevnext.html %}
 
-  {% include_cached backtotop.html %}
+  {% include_cached backtotop.html lang=page.lang %}
 </main>
 
 {% include footer.html %}

data/_layouts/policy.html

@@ -1,10 +1,31 @@
+{%- assign pagelang = 'en' -%}
+{%- if page.lang -%}
+  {%- assign pagelang = page.lang -%}
+{%- endif -%}
+{%- if pagelang == 'en' -%}
+  {%- assign enpage = page -%}
+{%- else -%}
+  {%- assign enpage=site.documents | where:"ref", page.ref | where: "lang", "en" | first -%}
+  {%- unless enpage.ref -%}
+    {%- assign enpage=site.pages | where:"ref", page.ref | where: "lang", "en" | first -%}
+  {%- endunless -%}
+{%- endif -%}
+{%- assign englishpageurl = enpage.url %}
+{% assign translations=site.documents | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
+{%- unless translations[0].ref -%}
+  {% assign translations=site.pages | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
+{%- endunless -%}
 <!DOCTYPE html>
-<html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
+<html class="no-js" lang="{% if page.lang %}{{page.lang}}{% else %}en{% endif %}" dir="{% if site.lang[page.lang].rtl == true %}rtl{% else %}ltr{% endif %}" prefix="og: http://ogp.me/ns#">
   {%- assign timestamp = site.time | date: '%s%N' -%}
   {%- assign timestamp = '?' | append: timestamp -%}
-  {% include_cached head.html type="start" timestamp=timestamp %}
-  <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
-  {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif %}
+  {%- include_cached head.html type="start" timestamp=timestamp -%}
+  {%- if site.data.lang[pagelang].rtl -%}
+  <title> W3C | {{ site.title | escape }} | {{ page.title | escape }} {%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%}</title>
+  {%- else -%}
+  <title>{%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
+  {%- endif -%}
+  {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: timestamp }}">{% endif %}
   {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
   {%- capture seo -%}
     {%- seo title=false -%}
@@ -15,7 +36,7 @@
   {%- endunless -%}
   {% include_cached head.html type="end" %}
   <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
-    {% include header.html %}
+    {% include header.html translations=translations %}
 
 <div class="default-grid with-gap leftcol contentarea">
 
@@ -75,7 +96,7 @@
     </div>
     {% include prevnext.html %}
 
-    {% include_cached backtotop.html %}
+    {% include_cached backtotop.html lang=page.lang %}
   </main>
 
 </div>