wai-website-theme 1.7 → 1.9.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e5ff63f525b7bdbfaa526b5948a80d9d15cc614ef5d7755d86452872de8fba92
-  data.tar.gz: b8ab68ccfe3ca812cf2cf3129d59d812911d226a9087e9097985d5891e955d10
+  metadata.gz: ef42242775fe2daa5d56c1b68d38adf6307234ef66ed95bd578ef24e09a5a6c4
+  data.tar.gz: b8a9d36dd55e72b4a996902c4a4d85b0b75e006eb85877cc326096fc7e198796
 SHA512:
-  metadata.gz: f963eeee23e3c8e16afb9568555345d7c29ce2067c25e1e0c22129d6bb436c05cf831a8fdcf62b1c5d2a24f47d77d9855d0f3c297c308da9b5c4e85757a46c54
-  data.tar.gz: a195c9358385c40ce63f4a0292ded5fa527a710f38beceb3ab601004601437dc8b1c82602b273bdbe6954a2a34dc872bb65e528d161263588b7a47afeecb3df9
+  metadata.gz: d4ab5ccb145515efd8a7b7b5b2fb8ced616570b5cebfca7b584cf246cc3a895afca8b971afc4eb9dc1ef1588ff9a6ca993ab266fbeac9437e0ec7543ec2d0ffa
+  data.tar.gz: a8abd848c209eb1e9bc2d2387b8b0f457f3d35f0d9cc85b3fb3d546b8d5c1c48b309fbaf533b5f1e3a5118e7c156dba154ebcc6516917d8ec97e8b30744f8498

data/_data/navigation.yml

@@ -3,15 +3,29 @@
   pages:
   - name: Overview
     url: "/overview/"
+  - name: Technical Information
+    url: "/technical/"
+  - name: Files in Repositories
+    url: "/technical/files/"
+  - name: Publication of the WAI Site
+    url: "/technical/publication/"
+  - name: Creating a New Resource
+    url: "/technical/new-resource/"
 - name:
-    en: 'Writing Documents'
+    en: 'Create and Edit Documents'
   pages:
   - name: Overview
     url: "/writing/"
+  - name: Frontmatter
+    url: "/writing/frontmatter/"
   - name: Markdown
     url: "/writing/markdown/"
   - name: Custom Markdown Extensions
     url: "/writing/wai-markdown/"
+  - name: Using HTML
+    url: "/writing/html/"
+  - name: Images
+    url: "/writing/images/"
 - name:
     en: 'Design Components'
   pages:
@@ -62,6 +76,8 @@
     url: "/components/figure/"
   - name: "Footer (Page & Site)"
     url: "/components/footer/"
+  - name: "Footnotes"
+    url: "/components/footnotes/"
   - name: "Form"
     url: "/components/form/elements/"
     pages:
@@ -71,6 +87,8 @@
       url: "/components/form/search/"
   - name: "Headings"
     url: "/components/headings/"
+  - name: Icons
+    url: "/components/icons/"
   - name: Images
     url: "/components/images/"
   - name: "Lists"
@@ -79,6 +97,11 @@
     url: "/components/publication-warning/"
   - name: "Tables"
     url: "/components/tables/"
+  - name: "Teasers"
+    url: "/components/teasers/"
+    pages:
+    - name: "Making the Web Accessible"
+      url: "/components/teasers/mwa/"
   - name: "Video Links"
     url: "/components/video-links/"
   - name: "Video Player"

data/_includes/body-class.html

@@ -1 +1 @@
-{% if include.collection %}resource-{{include.collection | slugify}}{% endif %}{%if include.doc-note-type %} doc-note doc-{{include.doc-note-type}}{% endif %}
+{% if include.collection %}resource-{{include.collection | slugify}}{% endif %}{%if include.doc-note-type %} doc-note doc-{{include.doc-note-type}}{% endif %}{%if include.pageclass %} {{include.pageclass}}{% endif %}

data/_includes/ednote.html

@@ -0,0 +1,32 @@
+{%- unless site.published -%}
+{%- capture text -%}
+{%- if include.issue -%}
+  <a href="https://github.com/{% if include.repo %}{{include.repo}}{% else %}{{page.github.repository}}{% endif %}/issues/{{include.issue}}">Issue #{{include.issue}}</a> — {{ include.note }}
+{%- else -%}
+  {%- if include.pr -%}
+    <a href="https://github.com/{% if include.repo %}{{include.repo}}{% else %}{{page.github.repository}}{% endif %}/pull/{{include.pr}}">Pull Request #{{include.pr}}</a> — {{ include.note }}
+  {%- else -%}
+    {{ include.note }}
+  {%- endif -%}
+{%- endif -%}
+{%- endcapture -%}
+{%- assign statustext = "Editor’s Note" -%}
+{%- assign statuscolor = "--grey" -%}
+{%- assign textcolor = "--pure-white" -%}
+{%- if include.status == "open" -%}
+  {%- assign statustext = "Open Issue" -%}
+  {%- assign statuscolor = "--faded-red" -%}
+  {%- assign textcolor = "--pure-white" -%}
+{%- endif -%}
+{%- if include.status == "proposed" -%}
+  {%- assign statustext = "Proposed Change" -%}
+  {%- assign statuscolor = "--gold" -%}
+  {%- assign textcolor = "--off-black" -%}
+{%- endif -%}
+{%- if include.status == "accepted" -%}
+  {%- assign statustext = "Accepted Change" -%}
+  {%- assign statuscolor = "--ocean" -%}
+  {%- assign textcolor = "--off-black" -%}
+{%- endif -%}
+<span style="border: 5px solid var({{ statuscolor }});"><strong style="background-color: var({{ statuscolor }});border-right: 5px solid var({{ statuscolor }}); color: var({{ textcolor }});">{{ statustext }}</strong> {{ text }}</span><br>
+{%- endunless -%}

data/_includes/footer.html

@@ -12,17 +12,32 @@
 {%- else -%}
   {%- assign changelog = "" -%}
 {%- endif -%}
+{%- if page.acknowledgements -%}
+  {%- assign acknowledgementspage=site.documents | where:"ref", page.acknowledgements | first -%}
+  {%- unless acknowledgementspage.ref -%}
+    {%- assign acknowledgementspage=site.pages | where:"ref", page.acknowledgements | first -%}
+  {%- endunless -%}
+  {% assign acknowledgementspageurl = acknowledgementspage.url | relative_url %}
+  {%- capture acknowledgementstext -%}
+  {%- include_cached t.html t="Acknowledgements" lang=page.lang -%}
+  {%- endcapture -%}
+  {%- assign acknowledgements = '<a href="' | append: acknowledgementspageurl | append: '">' | append: acknowledgementstext | append: '</a>' -%}
+{%- else -%}
+  {%- assign acknowledgements = "" -%}
+{%- endif -%}
 {% if col.footer %}
 <footer id="wai-page-footer" class="page-footer default-grid" aria-label="Page">
   <div class="inner">
-    {{col.footer | replace: "CHANGELOG", changelog }}
+    {{ col.footer | replace: "CHANGELOG", changelog | replace: "ACKNOWLEDGEMENTS", acknowledgements }}
+    {%- if page.license == 'creative-commons' -%}<p>{% include_cached icon.html name="creative-commons" %} This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</p>{%- endif -%}
   </div>
 </footer>
 {% else %}
   {% if page.footer %}
   <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page">
     <div class="inner">
-      {{page.footer | replace: "CHANGELOG", changelog}}
+      {{ page.footer | replace: "CHANGELOG", changelog | replace: "ACKNOWLEDGEMENTS", acknowledgements }}
+      {%- if page.license == 'creative-commons' -%}<p>{% include_cached icon.html name="creative-commons" %} This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</p>{%- endif -%}
     </div>
   </footer>
   {% endif %}
@@ -71,6 +86,17 @@
 <script>
   svg4everybody();
 </script>
+{%- assign defaultlang = false -%}
+{%- if include.lang == "en"-%}{%- assign defaultlang = true -%}{%- endif -%}
+{%- if include.lang == ""-%}{%- assign defaultlang = true -%}{%- endif -%}
+{%- if include.lang == "en_US"-%}{%- assign defaultlang = true -%}{%- endif -%}
+{%- if defaultlang == true -%}
+<script>
+  var translationStrings = {};
+</script>
+{% else %}
+<script src="{{ '/assets/scripts/lang/' | append: page.lang | append: '.js' | append: timestamp | relative_url }}"></script>
+{%- endif -%}
 <!-- Matomo -->
 <script>
   var _paq = _paq || [];

data/_includes/icon.html

@@ -1,6 +1,6 @@
 {%- if include.name %}{%assign name = include.name%}{% else %}{% assign name="default" %}{% endif -%}
 {%- if include.label -%}
-<svg aria-label="{{ include.label }}" class="icon-{{ name }} {{include.class}}"><use xlink:href="{{ "/assets/images/icons.svg" | relative_url }}#icon-{{ name }}"></use></svg>
+<svg focusable="false" aria-label="{{ include.label }}" class="icon-{{ name }} {{include.class}}"><use xlink:href="{{ "/assets/images/icons.svg" | relative_url }}#icon-{{ name }}"></use></svg>
 {%- else -%}
-<svg aria-hidden="true" class="icon-{{ name }} {{include.class}}"><use xlink:href="{{ "/assets/images/icons.svg" | relative_url }}#icon-{{ name }}"></use></svg>
+<svg focusable="false" aria-hidden="true" class="icon-{{ name }} {{include.class}}"><use xlink:href="{{ "/assets/images/icons.svg" | relative_url }}#icon-{{ name }}"></use></svg>
 {%- endif -%}

data/_includes/link.html

@@ -71,7 +71,7 @@
 {%- if protocol[0] == "" -%}
   {%- assign linkurl = 'https://www.w3.org/WAI' | append: include.to -%}
 {%- else -%}
-  {%- assign linkurl = include.to -%}
+  {%- assign linkurl = include.to | relative_url -%}
 {%- endif -%}
 
 {%- if link_page.url -%}

data/_includes/prevnext-navigation.html

@@ -19,13 +19,6 @@ navigation:
   {%- assign next=site.pages | where:"ref", page.navigation.next | where: "lang", lang | first -%}
 {% endunless %}
 
-{%- assign col = site.collections | where: "label", page.collection | first -%}
-{%- unless col.prevnext == false -%}
-{%- if page.group -%}
-  {%- assign docs = col.docs | where: "group", page.group | where: "lang", lang -%}
-{%- else -%}
-  {%- assign docs = col.docs | where: "lang", lang -%}
-{%- endif -%}
 <nav class="pager" aria-label="Previous/Next Page" style="clear: both;">
   <ul>
     {%- if page.navigation.previous -%}
@@ -52,5 +45,4 @@ navigation:
   </ul>
   {%- endif -%}
 </nav>
-{%- endunless -%}
 {%- endif -%}

data/_includes/secondarynav.html

@@ -11,88 +11,18 @@
     {%- assign searchurl = page.url -%}
   {%- endif -%}
 {%- endif -%}
-{%- if col.navigation -%}
-  {%- assign currentsubnav = col.navigation -%}
-{%- else -%}
 {%- for item in site.data.navigation -%}
-  {%- for i in item.pages -%}
-    {%- if i.url == searchurl -%}
-      {%- assign currentsubnav = item -%}
-    {%- else -%}
-      {%- for j in i.pages -%}
-        {%- if j.url == searchurl -%}
-          {%- assign currentsubnav = item -%}
-        {%- else -%}
-          {%- for k in j.pages -%}
-            {%- if k.url == searchurl -%}
-              {%- assign currentsubnav = item -%}
-            {%- endif -%}
-          {%- endfor -%}
-        {%- endif -%}
-      {%- endfor -%}
-    {%- endif -%}
-  {%- endfor -%}
-{%- endfor -%}
-{%- endif -%}
-<div class="sidenav">
-{%- for i in currentsubnav.pages -%}
-  {%- if forloop.first -%}
-    <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 -%}
-  {%- assign insubsub = false -%}
-  {%- capture submenu -%}
-    {%- for j in i.pages -%}
-      {%- capture subsubmenu -%}
-        {%- for k in j.pages -%}
-          {%- if forloop.first %}<ul>{% endif -%}
-            {%- if k.url == searchurl -%}
-              {% assign insub = true %}
-              {% assign insubsub = true %}
-              {% include menuitem.html name=k.name url=k.url hide=k.hide insub=false current=true %}
-            {%- else -%}
-              {% include menuitem.html name=k.name url=k.url hide=k.hide insub=false current=false %}
-            {%- endif -%}
-          {%- if forloop.last %}</ul>{% endif -%}
-        {%- endfor -%}
-      {%- endcapture -%}
-      {%- if forloop.first %}<ul>{% endif -%}
-        {%- if j.url == searchurl -%}
-          {% assign insub = true %}
-          {% include menuitem.html name=j.name url=j.url hide=j.hide insub=insubsub current=true submenu=subsubmenu %}
-        {%- else -%}
-          {% include menuitem.html name=j.name url=j.url hide=j.hide insub=insubsub current=false submenu=subsubmenu %}
-        {%- endif -%}
-      {%- if forloop.last %}</ul>{% endif -%}
-    {%- endfor -%}
-  {%- endcapture -%}
-  {%- if i.url == searchurl -%}
-    {% include menuitem.html name=i.name url=i.url hide=i.hide insub=insub current=true submenu=submenu %}
-  {%- else -%}
-    {% include menuitem.html name=i.name url=i.url hide=i.hide insub=insub current=false submenu=submenu %}
-  {%- endif -%}
-  {%- if forloop.last %}</ul></nav>{% endif -%}
-{%- 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>
+  {% assign seen_current = false %}
+  {% assign is_in_here = false %}
+  {% capture menu %}
+    {% include subpages.html name=false pages=item.pages hide=item.hide %}
+  {% endcapture %}
+  {% if is_in_here == true %}
+    <div class="sidenav">
+      <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=item.name %}</div></div></div>
+        {{menu}}
       </nav>
-    {%- endif -%}
-  {% endfor -%}
-{% endif %}
-</div>
+    </div>
+  {% endif %}
+{%- endfor -%}

data/_includes/subpages.html

@@ -0,0 +1,35 @@
+{% if include.url == searchurl %}
+  {% assign seen_current = true %}
+  {% assign is_in_here = true %}
+  {% capture subpages %}
+  {% for page in include.pages %}
+    {% if forloop.first %}<ul>{% endif %}
+      {% include subpages.html name=page.name url=page.url pages=page.pages hide=page.hide subpageofcurrent=true %}
+    {% if forloop.last %}</ul>{% endif %}
+  {% endfor %}
+  {% endcapture %}
+  {% unless include.name == false%}<li>{% include_cached link.html to=include.url text=include.name class="page-link" usenavtitle=true lang=page.lang hidelangnotice=true aria-current="page" %} {% endunless %}{{subpages}}{% unless include.name == false%}</li>{% endunless %}
+{% else %}
+  {% unless include.hide %}
+    {% capture subpages %}
+    {% for page in include.pages %}
+      {% if forloop.first %}<ul{% if include.name == false%} class="sidenav--list"{% endif %}>{% endif %}
+        {% include subpages.html name=page.name url=page.url pages=page.pages hide=page.hide %}
+      {% if forloop.last %}</ul>{% endif %}
+    {% endfor %}
+    {% endcapture %}
+    {% if include.name == false %}
+      {{subpages}}
+    {% else %}
+      {% if is_in_here == true %}
+        {% if include.subpageofcurrent == true %}
+          <li>{% include_cached link.html to=include.url text=include.name class="page-link" usenavtitle=true lang=page.lang hidelangnotice=true subpageofcurrent=include.subpageofcurrent %} {{subpages}}</li>
+        {% else %}
+           <li>{% include_cached link.html to=include.url text=include.name class="page-link" usenavtitle=true lang=page.lang hidelangnotice=true aria-current="location" subpageofcurrent=include.subpageofcurrent %} {{subpages}}</li>
+        {% endif %}
+      {% else %}
+        <li>{% include_cached link.html to=include.url text=include.name class="page-link" usenavtitle=true lang=page.lang hidelangnotice=true subpageofcurrent=include.subpageofcurrent %}{{subpages}}</li>
+      {% endif %}
+    {% endif %}
+  {% endunless %}
+{% endif %}

data/_layouts/default.html

@@ -11,7 +11,7 @@
   {%- endunless -%}
 {%- endif -%}
 {%- assign englishpageurl = enpage.url %}
-{% assign translations=site.documents | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
+{%- 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 -%}
@@ -36,7 +36,7 @@
   <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
   {%- 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 %}">
+  <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type pageclass=page.class%}"{%if page.footnotestitle %} data-footnotestitle="{{page.footnotestitle}}"{% endif %}>
     {% include header.html translations=translations %}
     <div class="default-grid with-gap{% unless page.noleftcol %} leftcol{% endunless %}">
 
@@ -62,7 +62,7 @@
 
   <main id="main"{% if page.lang %} lang="{{page.lang}}"{% endif %}>
     <header{%- if page.resource.ref %}{%- unless page.ref == page.resource.ref %} class="in-resource"{%- endunless -%}{%- 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>
+      <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_image %}<img src="{{page.title_image | relative_url }}" alt="" class="title-image right" style="height: 2em;"> {% endif %}{% if page.title_html %}{{ page.title_html }}{% else %}{{ page.title }}{% endif %}</h1>
       {%- if page.resource.ref -%}{%- unless page.ref == page.resource.ref -%}
         <p>{% include t.html t="in" %} {% include link.html to=page.resource.ref %}</p>
       {%- endunless -%}{%- endif -%}
@@ -92,7 +92,7 @@
   </main>
 </div>
 
-{% include footer.html %}
+{% include footer.html lang=pagelang %}
 
   </body>
 </html>

data/_layouts/home.html

@@ -45,7 +45,7 @@
 {% include_cached backtotop.html lang=page.lang %}
 </main>
 
-{% include footer.html %}
+{% include footer.html lang=pagelang %}
 
   </body>
 </html>

data/_layouts/languagefile.js

@@ -0,0 +1,7 @@
+var translationStrings = {
+{%- for t in site.data.translations -%}
+{%- if t.javascript == true -%}
+  "{{t.en}}": "{{t[page.language]}}",
+{%- endif -%}
+{%- endfor -%}
+};

data/_layouts/news.html

@@ -35,7 +35,7 @@
   <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
   {%- 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 %}">
+  <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}"{%if page.footnotestitle %} data-footnotestitle="{{page.footnotestitle}}"{% endif %}>
     {% include header.html translations=translations %}
 
 <main id="main">
@@ -60,7 +60,7 @@
   {% include_cached backtotop.html lang=page.lang %}
 </main>
 
-{% include footer.html %}
+{% include footer.html lang=pagelang %}
 
   </body>
 </html>

data/_layouts/policy.html

@@ -35,7 +35,7 @@
   <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
   {%- 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 %}">
+  <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}"{%if page.footnotestitle %} data-footnotestitle="{{page.footnotestitle}}"{% endif %}>
     {% include header.html translations=translations %}
 
 <div class="default-grid with-gap leftcol contentarea">
@@ -107,7 +107,7 @@
 
 </div>
 
-{% include footer.html %}
+{% include footer.html lang=pagelang %}
 <style>@import url('{{"/policies/css/policies.css" | relative_url }}');</style>
   </body>
 </html>

data/_layouts/sidenav.html

@@ -35,7 +35,7 @@
   <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
   {%- 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 %}">
+  <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}"{%if page.footnotestitle %} data-footnotestitle="{{page.footnotestitle}}"{% endif %}>
     {% include header.html translations=translations %}
 
 <div class="default-grid with-gap leftcol">
@@ -68,7 +68,7 @@
   </main>
 </div>
 
-{% include footer.html %}
+{% include footer.html lang=pagelang %}
 
   </body>
 </html>