Merge pull request #105 from carpentries/add-l10n-support

Add l10n support

DESCRIPTION

@@ -30,6 +30,11 @@ Authors@R: c(
            role = c("ctb"),
            email = "[email protected]",
            comment = c(ORCID = "0000-0002-5589-7754")),
+    person(given = "Joel H.",
+           family = "Nitta",
+           role = c("ctb"),
+           email = "[email protected]",
+           comment = c(ORCID = "0000-0003-4719-7472")),
     person()
     )
 Description: This package does nothing but contain template HTML CSS and JS files.

NEWS.md

@@ -1,5 +1,17 @@
 # varnish 0.4.0.9000 (unreleased)
 
+## NEW FEATURES
+
+* Translation of lesson elements is now incorporated. Translation strings within
+  the HTML templates can be found be searching for the word `translate`. All
+  variables are assumed to exist and are defined in The Workbench as PascalCase
+  variables. In order for this version of {varnish} to work, it _requires_
+  {sandpaper} version 0.16.0 or greater. **This is a breaking change**
+  (reported: @zkamvar, #104; implemented: @zkamvar and @joelnitta, #105)
+* Buttons to show/hide the sidebar and solutions now have extra data attributes
+  that are used for the language used by the button when they are toggled. This
+  is an improvement over hard-coding the phrases inside of the JavaScript.
+
 ## BUG FIX
 
 * Overview box heading font sizes now scaled based on viewport size. This fixes

inst/pkgdown/templates/content-chapter.html

@@ -1,26 +1,26 @@
 <!-- START: inst/pkgdown/templates/content-instructor.html -->
   <div class="col-xl-8 col-lg-12 primary-content">
-    <nav class="lesson-content mx-md-4" aria-label="Previous and Next Chapter">
+    <nav class="lesson-content mx-md-4" aria-label="{{ translate.PreviousAndNext }}">
       <!-- content for small screens -->
       <div class="d-block d-sm-block d-md-none">
         {{#page_back}}
-        <a class="chapter-link" href="{{#site}}{{root}}{{/site}}{{page_back}}"><i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>Previous</a>
+        <a class="chapter-link" href="{{#site}}{{root}}{{/site}}{{page_back}}"><i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>{{ translate.Previous }}</a>
         {{/page_back}}
         {{#page_forward}}
-        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}">Next<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
+        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}">{{ translate.Next }}<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
         {{/page_forward}}
       </div>
       <!-- content for large screens -->
       <div class="d-none d-sm-none d-md-block">
         {{#page_back}}
         <a class="chapter-link" href="{{#site}}{{root}}{{/site}}{{page_back}}" rel="prev">
           <i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>
-          {{#back_title}}Previous: {{{back_title}}}{{/back_title}}{{^back_title}}Home{{/back_title}}
+          {{#back_title}}{{ translate.Previous }}: {{{back_title}}}{{/back_title}}{{^back_title}}{{ translate.Home }}{{/back_title}}
         </a>
         {{/page_back}}
         {{#page_forward}}
         <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}" rel="next">
-          {{#forward_title}}Next: {{{forward_title}}}... {{/forward_title}}{{^forward_title}}Home{{/forward_title}}
+          {{#forward_title}}{{ translate.Next }}: {{{forward_title}}}... {{/forward_title}}{{^forward_title}}{{ translate.Home }}{{/forward_title}}
           <i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i>
         </a>
         {{/page_forward}}
@@ -30,50 +30,50 @@
     <main id="main-content" class="main-content">
       <div class="container lesson-content">
         <h1>{{& pagetitle}}</h1>
-        <p>{{#updated}} Last updated on {{updated}} | {{/updated}}
+        <p>{{# translate.LastUpdate }}{{& translate.LastUpdate }} |{{/ translate.LastUpdate }}
         {{#yaml}}
         {{^beta-date}}{{^pre-beta-date}}
-        <a href="{{#yaml}}{{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">Edit this page <i aria-hidden="true" data-feather="edit"></i></a></p>
+        <a href="{{#yaml}}{{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">{{ translate.EditThisPage }} <i aria-hidden="true" data-feather="edit"></i></a></p>
         {{/pre-beta-date}}{{/beta-date}}
         {{#pre-beta-date}}
-        <a href="{{#yaml}}https://carpentries.github.io/workbench/contributor/pre-beta.html?id={{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">Edit this page <i aria-hidden="true" data-feather="edit"></i></a></p>
+        <a href="{{#yaml}}https://carpentries.github.io/workbench/contributor/pre-beta.html?id={{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">{{ translate.EditThisPage }} <i aria-hidden="true" data-feather="edit"></i></a></p>
         {{/pre-beta-date}}
         {{#beta-date}}{{^pre-beta-date}}
-        <a href="{{#yaml}}{{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">Edit this page <i aria-hidden="true" data-feather="edit"></i></a></p>
+        <a href="{{#yaml}}{{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">{{ translate.EditThisPage }} <i aria-hidden="true" data-feather="edit"></i></a></p>
         {{/pre-beta-date}}{{/beta-date}}
         {{/yaml}}
         {{#instructor}}
-        {{#minutes}}<p>Estimated time <i aria-hidden="true" data-feather="clock"></i> {{minutes}} minutes </p>{{/minutes}}
-        {{#slides}}<p><button class="btn btn-primary-outline">Export Chapter Slides</button></p>{{/slides}}
+        {{# translate.EstimatedTime }}<p>{{& translate.EstimatedTime }}</p>{{/ translate.EstimatedTime }}
+        {{#slides}}<p><button class="btn btn-primary-outline">{{ translate.ExportSlides }}</button></p>{{/slides}}
         {{/instructor}}
         <div class="text-end">
-          <button role="button" aria-pressed="false" tabindex="0" id="expand-code" class="pull-right"> Expand All Solutions <i aria-hidden="true" data-feather="plus"></i></button>
+          <button role="button" aria-pressed="false" tabindex="0" id="expand-code" class="pull-right" data-expand="{{ translate.ExpandAllSolutions }} " data-collapse="{{ translate.CollapseAllSolutions }} "> {{ translate.ExpandAllSolutions }} <i aria-hidden="true" data-feather="plus"></i></button>
         </div>
 
         {{{body}}}
 
       </div> <!-- / div.lesson-content -->
     </main> <!-- / main#main-content.main-content -->
-    <nav class="bottom-pagination mx-md-4" aria-label="Previous and Next Chapter">
+    <nav class="bottom-pagination mx-md-4" aria-label="{{ translate.PreviousAndNext }}">
       <div class="d-block d-sm-block d-md-none">
         {{#page_back}}
-        <a class="chapter-link" href="{{#site}}{{root}}{{/site}}{{page_back}}"><i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>Previous</a>
+        <a class="chapter-link" href="{{#site}}{{root}}{{/site}}{{page_back}}"><i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>{{ translate.Previous }}</a>
         {{/page_back}}
         {{#page_forward}}
-        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}">Next<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
+        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}">{{ translate.Next }}<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
       </div>
         {{/page_forward}}
       <!-- content for large screens -->
       <div class="d-none d-sm-none d-md-block">
         {{#page_back}}
         <a class="chapter-link" href="{{#site}}{{root}}{{/site}}{{page_back}}" rel="prev">
           <i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>
-          {{#back_title}}Previous: {{{back_title}}}{{/back_title}}{{^back_title}}Home{{/back_title}}
+          {{#back_title}}{{ translate.Previous }}: {{{back_title}}}{{/back_title}}{{^back_title}}{{ translate.Home }}{{/back_title}}
         </a>
         {{/page_back}}
         {{#page_forward}}
         <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}" rel="next">
-          {{#forward_title}}Next: {{{forward_title}}}... {{/forward_title}}{{^forward_title}}Home{{/forward_title}}
+          {{#forward_title}}{{ translate.Next }}: {{{forward_title}}}... {{/forward_title}}{{^forward_title}}{{ translate.Home }}{{/forward_title}}
           <i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i>
         </a>
         {{/page_forward}}

inst/pkgdown/templates/content-extra.html

@@ -1,24 +1,24 @@
 <!-- START: inst/pkgdown/templates/content-extra.html -->
   <div class="col-xl-8 col-lg-12 primary-content">
     {{#overview}}
-    <nav class="lesson-content mx-md-4" aria-label="Home Page Navigation">
+    <nav class="lesson-content mx-md-4" aria-label="{{ translate.HomePageNav }}">
       <!-- content for small screens -->
       <div class="d-block d-sm-block d-md-none">
-        <a class="chapter-link" href="index.html"><i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>Home</a>
-        <a class="chapter-link float-end" href="index.html">Home<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
+        <a class="chapter-link" href="index.html"><i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>{{ translate.Home }}</a>
+        <a class="chapter-link float-end" href="index.html">{{ translate.Home }}<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
       </div>
       <!-- content for large screens -->
       <div class="d-none d-sm-none d-md-block">
-        <a class="chapter-link" href="index.html"><i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>Home</a>
-        <a class="chapter-link float-end" href="index.html">Home<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
+        <a class="chapter-link" href="index.html"><i aria-hidden="true" class="small-arrow" data-feather="arrow-left"></i>{{ translate.Home }}</a>
+        <a class="chapter-link float-end" href="index.html">{{ translate.Home }}<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
       </div>
       <hr/>
     </nav>
     {{/overview}}
     <main id="main-content" class="main-content">
       <div class="container lesson-content">
-        <h1>{{{pagetitle}}}</h1>
-        {{{body}}}
+        <h1>{{& pagetitle }}</h1>
+        {{& body }}
       </div>
     </main>
   </div>

inst/pkgdown/templates/content-overview.html

@@ -1,30 +1,30 @@
 <!-- START: inst/pkgdown/templates/content-syllabus.html -->
 <div class="col-xl-12 col-lg-12">
     <main id="main-content" class="main-content">
-      <h1>{{{pagetitle}}}</h1>
+      <h1>{{& pagetitle }}</h1>
       <div class="container lesson-content">
         <p>
-          {{#updated}} Last updated on {{updated}} | {{/updated}}
+          {{# translate.LastUpdate }} {{& translate.LastUpdate }} |{{/ translate.LastUpdate }}
           <a href="{{#yaml}}{{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}index.md{{/file_source}}">
-            Edit this page <i aria-hidden="true" data-feather="edit"></i>
+            {{ translate.EditThisPage }} <i aria-hidden="true" data-feather="edit"></i>
           </a>
         </p>
 
-      {{{readme}}}
+      {{& readme }}
 
       {{#syllabus}}
       <section id="schedule">
       <table class="table schedule table-striped" role="presentation">
         <tbody>
           {{#setup}}
           <tr>
-            <td></td><td><a href="#setup">Setup Instructions</a></td><td> Download files required for the lesson</td>
+            <td></td><td><a href="#setup">{{ translate.SetupInstructions }}</a></td><td> {{ translate.DownloadFiles }}</td>
           </tr>
           {{/setup}}
-          {{{syllabus}}}
+          {{& syllabus }}
       </table>
       <p>
-      The actual schedule may vary slightly depending on the topics and exercises chosen by the instructor.
+      {{ translate.ActualScheduleNote }}
       </p>
       </section>
       {{/syllabus}}

inst/pkgdown/templates/content-syllabus.html

@@ -1,36 +1,36 @@
 <!-- START: inst/pkgdown/templates/content-syllabus.html -->
   <div class="col-xl-8 col-lg-12 primary-content">
-    <nav class="lesson-content mx-md-4" aria-label="Next Chapter">
+    <nav class="lesson-content mx-md-4" aria-label="{{ translate.NextChapter }}">
       <!-- content for small screens -->
       <div class="d-block d-sm-block d-md-none">
         {{#page_forward}}
-        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}">Next<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
+        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}">{{ translate.Next }}<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
         {{/page_forward}}
       </div>
       <!-- content for large screens -->
       <div class="d-none d-sm-none d-md-block">
         {{#page_forward}}
-        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}" rel="next">Next{{#forward_title}}: {{{forward_title}}}{{/forward_title}}... <i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
+        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}" rel="next">{{ translate.Next }}{{#forward_title}}: {{{forward_title}}}{{/forward_title}}... <i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
         {{/page_forward}}
       </div>
       <hr/>
     </nav>
     <main id="main-content" class="main-content">
-      <h1 class="schedule-heading">{{{pagetitle}}}</h1>
+      <h1 class="schedule-heading">{{& pagetitle }}</h1>
       {{{readme}}}
       {{#syllabus}}
       <section id="schedule">
       <table class="table schedule table-striped" role="presentation">
         <tbody>
           {{#setup}}
           <tr>
-            <td></td><td><a href="#setup">Setup Instructions</a></td><td> Download files required for the lesson</td>
+            <td></td><td><a href="#setup">{{ translate.SetupInstructions }}</a></td><td> {{ translate.DownloadFiles }}</td>
           </tr>
           {{/setup}}
           {{{syllabus}}}
       </table>
       <p>
-      The actual schedule may vary slightly depending on the topics and exercises chosen by the instructor.
+      {{ translate.ActualScheduleNote }}
       </p>
       </section>
       {{/syllabus}}
@@ -40,17 +40,17 @@ <h1 class="schedule-heading">{{{pagetitle}}}</h1>
       </section>
       {{/setup}}
     </main>
-    <nav class="bottom-pagination mx-md-4" aria-label="Next Chapter">
+    <nav class="bottom-pagination mx-md-4" aria-label="{{ translate.NextChapter }}">
       <!-- content for small screens -->
       <div class="d-block d-sm-block d-md-none">
         {{#page_forward}}
-        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}">Next<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
+        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}">{{ translate.Next }}<i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
         {{/page_forward}}
       </div>
       <!-- content for large screens -->
       <div class="d-none d-sm-none d-md-block">
         {{#page_forward}}
-        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}" rel="next">Next{{#forward_title}}: {{{forward_title}}}{{/forward_title}}... <i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
+        <a class="chapter-link float-end" href="{{#site}}{{root}}{{/site}}{{page_forward}}" rel="next">{{ translate.Next }}{{#forward_title}}: {{{forward_title}}}{{/forward_title}}... <i aria-hidden="true" class="small-arrow" data-feather="arrow-right"></i></a>
         {{/page_forward}}
       </div>
     </nav>

inst/pkgdown/templates/footer.html

@@ -1,40 +1,39 @@
 		<footer class="row footer mx-md-3">
 			<hr/>
 			<div class="col-md-6">
-				<p>This lesson is subject to the <a href="CODE_OF_CONDUCT.html">Code of Conduct</a></p>
+        {{# translate.ThisLessonCoC }}<p>{{& translate.ThisLessonCoC }}</p>{{/ translate.ThisLessonCoC }}
         {{#yaml}}
         <p>
         {{^old-url}}
-        <a href="{{#yaml}}{{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">Edit on GitHub</a>
+        <a href="{{#yaml}}{{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">{{ translate.EditOnGH }}</a>
         {{/old-url}}
 	{{#old-url}}
         {{#pre-beta-date}}
-        <a href="{{#yaml}}https://carpentries.github.io/workbench/contributor/pre-beta.html?id={{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">Edit on GitHub</a>
+        <a href="{{#yaml}}https://carpentries.github.io/workbench/contributor/pre-beta.html?id={{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">{{ translate.EditOnGH }}</a>
         {{/pre-beta-date}}
         {{^pre-beta-date}}
-        <a href="{{#yaml}}{{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">Edit on GitHub</a>
+        <a href="{{#yaml}}{{source}}/edit/{{branch}}/{{/yaml}}{{file_source}}{{^file_source}}README.md{{/file_source}}">{{ translate.EditOnGH }}</a>
         {{/pre-beta-date}}
 	{{/old-url}}
         {{/yaml}}
-        | <a href="{{#yaml}}{{source}}/blob/{{branch}}/{{/yaml}}CONTRIBUTING.md">Contributing</a> 
-        | <a href="{{#yaml}}{{source}}/{{/yaml}}">Source</a></p>
-				<p><a href="{{#yaml}}{{source}}/blob/{{branch}}/{{/yaml}}CITATION">Cite</a> | <a href="mailto:{{#yaml}}{{contact}}{{/yaml}}">Contact</a> | <a href="https://carpentries.org/about/">About</a></p>
+        | <a href="{{#yaml}}{{source}}/blob/{{branch}}/{{/yaml}}CONTRIBUTING.md">{{ translate.Contributing }}</a>
+        | <a href="{{#yaml}}{{source}}/{{/yaml}}">{{ translate.Source }}</a></p>
+				<p><a href="{{#yaml}}{{source}}/blob/{{branch}}/{{/yaml}}CITATION">{{ translate.Cite }}</a> | <a href="mailto:{{#yaml}}{{contact}}{{/yaml}}">{{ translate.Contact }}</a> | <a href="https://carpentries.org/about/">{{ translate.About }}</a></p>
 			</div>
 			<div class="col-md-6">
         {{#yaml}}{{#license}}
-        <p>Materials licensed under <a href="{{#site}}{{root}}{{/site}}LICENSE.html">{{license}}</a> by the authors</p>
+        <p>{{& translate.MaterialsLicensedUnder }}</p>
         {{/license}}{{/yaml}}
-        <p><a href="https://creativecommons.org/licenses/by-sa/4.0/">Template licensed under CC-BY 4.0</a> by <a href="https://carpentries.org">The Carpentries</a></p>
-        <p>Built with <a href="https://github.com/{{sandpaper_cfg}}{{^sandpaper_cfg}}carpentries/sandpaper{{/sandpaper_cfg}}">sandpaper{{sandpaper_version}}</a>,
-        <a href="https://github.com/{{pegboard_cfg}}{{^pegboard_cfg}}carpentries/pegboard{{/pegboard_cfg}}">pegboard{{pegboard_version}}</a>,
-      and <a href="https://github.com/{{varnish_cfg}}{{^varnish_cfg}}carpentries/varnish{{/varnish_cfg}}">varnish{{varnish_version}}</a>.</p>
+        <p>{{& translate.TemplateLicense }}</p>
+        <p>{{& translate.BuiltWith }}</p>
 			</div>
 		</footer>
 	</div> <!-- / div.container -->
 	<div id="to-top">
 		<a href="#top">
-			<i class="search-icon" data-feather="arrow-up" role="img" aria-label="Back to top"></i><br/>
-			<span class="d-none d-sm-none d-md-none d-lg-none d-xl-block">Back</span> To Top
+      <i class="search-icon" data-feather="arrow-up" role="img" aria-label="{{ translate.BackToTop }}"></i><br/>
+			<!-- <span class="d-none d-sm-none d-md-none d-lg-none d-xl-block">Back</span> To Top -->
+      {{& translate.SpanToTop }}
 		</a>
 	</div>
   {{#json}}