Skip to content

Commit

Permalink
Merge pull request #114 from w3c/footer-doc
Browse files Browse the repository at this point in the history
Update theme documentation: translation box and page footer
  • Loading branch information
remibetin authored Nov 4, 2024
2 parents 4ecd585 + b20a8f2 commit d5ea2c8
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 33 deletions.
70 changes: 42 additions & 28 deletions _components/document-notes/translation.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,64 @@
---
title: "Document Notes: Translations"
lang: en
translators: # Uncomment (remove #) for translations, one - name line per translator.
last_updated: 2024-11-04

# Do not remove the following lines, used by the examples.
translation:
status: outdated
last_updated: 2022-01-04

translators:
- name: Translator 1
- name: Translator 2
contributors:
- name: Contributor 1
- name: Contributor 2
footer: > # Text in footer in HTML
This is the text in the footer
last_updated: 2019-08-01
---

The message for the translation is automatically generated on the translated pages and reads as follows (in the translated language):
The message for the translation is automatically generated on the translated pages and reads as follows (in the translated language):

## Up-to-Date Translation

<section class="doc-note-box doc-note-translation">
<h2 class="visuallyhidden">{% include t.html t="About this Translation" %}</h2>
<p>{% assign replacepattern = page.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>
<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: "%Y-%m-%d"}}</span>. {% include t.html t='English updated:' %} <span dir="auto">{{page.last_updated | date: "%Y-%m-%d"}}</span>.
</p>
<p>
{%- capture translatorslabel %}<strong>{% include t.html t='Translator:' %}</strong>{%- endcapture %}
{% include peoplelist.html label=translatorslabel people=page.translators %}
{%- capture contributorslabel %}{% include t.html t='Contributor:' %}{%- endcapture %}
{% include peoplelist.html label=contributorslabel people=page.contributors %}
{%- assign replacepattern = "/about/translating/" | relative_url | prepend: "$1|" -%}
<br>{% include t.html t='WAI thanks translators, and welcomes other <a href="$1">translations</a>.' replace=replacepattern %}</p>
<h2 class="visuallyhidden">{% include_cached t.html t="About this translation" lang=page.lang %}</h2>
<p>
{%- assign replace_pattern = page.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=replace_pattern lang=page.lang -%}
</p>
<p>
{%- capture translatorslabel %}<strong>{% include_cached t.html t='Translator:' lang=page.lang %}</strong>{%- endcapture %}
{%- include peoplelist.html label=translatorslabel people=page.translators -%}
{%- capture contributorslabel %}{% include_cached t.html t='Contributor:' lang=page.lang %}{%- endcapture -%}
{%- include peoplelist.html label=contributorslabel people=page.contributors -%}
<br />
{%- assign replace_pattern = "/about/translating/" | relative_url | prepend: "$1|" -%}
{%- include_cached t.html t='The Web Accessibility Initiative (WAI) thanks translators, and welcomes other <a href="$1">translations</a>.' replace=replace_pattern lang=page.lang -%}
</p>
</section>

## Outdated Translation


<section class="doc-note-box doc-note-translation">
<h2 class="visuallyhidden">{% include t.html t="About this Translation" %}</h2>
<p>{% assign replacepattern = page.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>
<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">{{page.last_updated | date: "%Y-%m-%d"}}</span>. {% include t.html t='Translation updated:' %} <span dir="auto">{{page.last_updated | date: "%Y-%m-%d"}}</span>.
<h2 class="visuallyhidden">{% include_cached t.html t="About this translation" lang=page.lang %}</h2>
<p>
{%- assign replace_pattern = page.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=replace_pattern lang=page.lang -%}
</p>
<p>
{%- capture translatorslabel %}<strong>{% include t.html t='Translator:' %}</strong>{%- endcapture %}
{% include peoplelist.html label=translatorslabel people=page.translators %}
{%- capture contributorslabel %}{% include t.html t='Contributor:' %}{%- endcapture %}
{% include peoplelist.html label=contributorslabel people=page.contributors %}
{%- assign replacepattern = "/about/translating/" | relative_url | prepend: "$1|" -%}
<br>{% include t.html t='WAI thanks translators, and welcomes other <a href="$1">translations</a>.' replace=replacepattern %}</p>
{%- capture translatorslabel %}<strong>{% include_cached t.html t='Translator:' lang=page.lang %}</strong>{%- endcapture %}
{%- include peoplelist.html label=translatorslabel people=page.translators -%}
{%- capture contributorslabel %}{% include_cached t.html t='Contributor:' lang=page.lang %}{%- endcapture -%}
{%- include peoplelist.html label=contributorslabel people=page.contributors -%}
<br />
{%- assign replace_pattern = "/about/translating/" | relative_url | prepend: "$1|" -%}
{%- include_cached t.html t='The Web Accessibility Initiative (WAI) thanks translators, and welcomes other <a href="$1">translations</a>.' replace=replace_pattern lang=page.lang -%}
</p>
{%- if page.translation.status == "outdated" -%}
<div class="translation-needs-update">
<p>{% include_cached icon.html name="warning" %} <strong>{% include_cached t.html t='Notice:' lang=page.lang %}</strong> {% include t.html t='The English original has been substantially updated since this translation.' lang=page.lang %}{%- if changelog_page %} &mdash; <a href="{{ changelog_page.url | relative_url }}">{%- include_cached t.html t="Latest changes" lang=page.lang -%}</a>{%- endif -%}
<br />{% include_cached t.html t='English version updated:' lang=page.lang %} <span dir="auto">{{ page.last_updated | date: "%Y-%m-%d" }}</span> — {% include_cached t.html t='Translation date:' lang=page.lang %} <span dir="auto">{{ page.translation.last_updated | date: "%Y-%m-%d" }}</span>.
<br />{% include_cached t.html t='We welcome a <a href="$1">translation update</a>.' lang=page.lang replace=replace_pattern %}</p>
</div>
{%- endif -%}
</section>
23 changes: 18 additions & 5 deletions _components/footer.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,46 @@
title: "Footers (Page and Site)"
lang: en
custom_changelog: /writing/changelogs/example/
last_updated: 2024-09-24
last_updated: 2024-11-04
---

***Note:** This is only a visual design reference. [The content is defined in the frontmatter](/writing/frontmatter/#footer-).*

## Page Footer

### With last updated date
### Example 1: Last updated date

<footer class="page-footer default-grid">
<div class="inner">
<p><strong>Updated:</strong> {{ 'now' | date: "%d %B %Y" }}. <a href="{{ '/writing/changelogs/example/' | relative_url }}">Latest changes</a>.</p>
<p><strong>Updated:</strong> {{ 'now' | date: "%d %B %Y" }}. <a href="{{ '/writing/changelogs/example/' | relative_url }}">Latest changes</a>.<br />First published March 2022.</p>
<p>Editors: Jane Doe. Previously John Doe. Contributors: Jan Doe.</p>
<p>First developed with support from ONE Project, then updated with support of the TWO Project and later the THREE Project.</p>
</div>
</footer>

### With a more recent date of review
### Example 2: More recent last reviewed date

<footer class="page-footer default-grid">
<div class="inner">
<p><strong>This page has been reviewed and is current as of</strong> {{ 'now' | date: "%d %B %Y" }}. <a href="{{ '/writing/changelogs/example/' | relative_url }}">Latest changes</a>.</p>
<p><strong>This page has been reviewed and is current as of</strong> {{ 'now' | date: "%d %B %Y" }}. <a href="{{ '/writing/changelogs/example/' | relative_url }}">Latest changes</a>.<br />First published March 2022.</p>
<p>Editors: Jane Doe. Previously John Doe. Contributors: Jan Doe.</p>
<p>First developed with support from ONE Project, then updated with support of the TWO Project and later the THREE Project.</p>
</div>
</footer>

### Example 3: Translation

***Note**: Following text is in English for reference. On live website, the page footer is displayed in the translated language.*

<footer class="page-footer default-grid">
<div class="inner">
<p><strong>English version updated:</strong> {{ 'now' | date: "%Y-%m-%d" }}. <a href="{{ '/writing/changelogs/example/' | relative_url }}">Latest changes</a>. (Translated {{ 'now' | date: "%Y-%m-%d" }}).<br />First published March 2022.</p>
<p>Editors: Jane Doe. Previously John Doe. Contributors: Jan Doe.</p>
<p>First developed with support from ONE Project, then updated with support of the TWO Project and later the THREE Project.</p>
</div>
</footer>


## Site Footer

<footer class="site-footer grid-4q" aria-label="Site">
Expand Down

0 comments on commit d5ea2c8

Please sign in to comment.