Use Jekyll to generate the 'all-in-one' page (carpentries/styles#438)

Author: fmichonneau

_includes/aio-script.md

@@ -6,45 +6,20 @@ open an issue: https://github.com/carpentries/styles/issues/new
 
 {% include manual_episode_order.html %}
 
-<script>
-  window.onload = function() {
-    var lesson_episodes = [
-    {% for lesson_episode in lesson_episodes %}
-      {% if site.episode_order %}
-        {% assign episode = site.episodes | where: "slug", lesson_episode | first %}
-      {% else %}
-        {% assign episode = lesson_episode %}
-      {% endif %}
-    "{{ episode.url}}"{% unless forloop.last %},{% endunless %}
-    {% endfor %}
-    ];
-    var xmlHttp = [];  /* Required since we are going to query every episode. */
-    for (i=0; i < lesson_episodes.length; i++) {
-      xmlHttp[i] = new XMLHttpRequest();
-      xmlHttp[i].episode = lesson_episodes[i];  /* To enable use this later. */
-      xmlHttp[i].onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
-          var article_here = document.getElementById(this.episode);
-          var parser = new DOMParser();
-          var htmlDoc = parser.parseFromString(this.responseText,"text/html");
-          var htmlDocArticle = htmlDoc.getElementsByTagName("article")[0];
-          article_here.innerHTML = htmlDocArticle.innerHTML;
-        }
-      }
-      var episode_url = "{{ relative_root_path }}" + lesson_episodes[i];
-      xmlHttp[i].open("GET", episode_url);
-      xmlHttp[i].send(null);
-    }
-  }
-</script>
+{% for lesson_episode in lesson_episodes %}
 
-{% comment %} Create an anchor for every episode.  {% endcomment %}
+{% if site.episode_order %}
+  {% assign e = site.episodes | where: "slug", lesson_episode | first %}
+{% else %}
+  {% assign e = lesson_episode %}
+{% endif %}
 
-{% for lesson_episode in lesson_episodes %}
-  {% if site.episode_order %}
-    {% assign episode = site.episodes | where: "slug", lesson_episode | first %}
-  {% else %}
-    {% assign episode = lesson_episode %}
-  {% endif %}
-  <article id="{{ episode.url }}"></article>
+<h1 id="{{ e.title | slugify }}" class="maintitle">{{ e.title }}</h1>
+
+{% include episode_overview.html teaching_time=e.teaching exercise_time=e.exercises episode_questions=e.questions episode_objectives=e.objectives %}
+
+{{ e.content }}
+
+{% include episode_keypoints.html episode_keypoints=e.keypoints %}
+<hr />
 {% endfor %}

_includes/episode_keypoints.html

@@ -1,10 +1,17 @@
 {% comment %}
   Display key points for an episode.
 {% endcomment %}
+
+{% if page.keypoints == nil %}
+{% assign episode_keypoints = include.episode_keypoints %}
+{% else %}
+{% assign episode_keypoints = page.keypoints %}
+{% endif %}
+
 <blockquote class="keypoints">
   <h2>Key Points</h2>
   <ul>
-    {% for keypoint in page.keypoints %}
+    {% for keypoint in episode_keypoints %}
     <li>{{ keypoint|markdownify }}</li>
     {% endfor %}
   </ul>

_includes/episode_overview.html

@@ -1,19 +1,59 @@
 {% comment %}
-    Display an episode's timings and learning objectives.
+    Display episode's timings and learning objectives.
+
+    Regarding the `if page.*** == nil` below:
+    all-in-one page combines all episodes into one.
+    It, therefore, does not define its own objectives, exercises,
+    and questions, which 'normal' episodes define in the front matter.
+
+    To display episodes' teaching and exercise times, as well as episode
+    questions and objectives, we pass them as parameters to the Liquid's
+    `include` statement when we generate the page:
+
+	{% include episode_overview.html teaching_time=e.teaching ... %}
+
+    Here we obtain the information we need either from the episode itself or
+    from the parameters passed in.
 {% endcomment %}
+
+{% if page.teaching == nil %}
+{% assign teaching_time = include.teaching_time %}
+{% else %}
+{% assign teaching_time = page.teaching %}
+{% endif %}
+
+{% if page.exercises == nil %}
+{% assign exercise_time = include.exercise_time %}
+{% else %}
+{% assign exercise_time = page.exercises %}
+{% endif %}
+
+{% if page.questions == nil %}
+{% assign episode_questions = include.episode_questions %}
+{% else %}
+{% assign episode_questions = page.questions %}
+{% endif %}
+
+{% if page.objectives == nil %}
+{% assign episode_objectives = include.episode_objectives %}
+{% else %}
+{% assign episode_objectives = page.objectives %}
+{% endif %}
+
+
 <blockquote class="objectives">
   <h2>Overview</h2>
 
   <div class="row">
     <div class="col-md-3">
-      <strong>Teaching:</strong> {{ page.teaching }} min
+      <strong>Teaching:</strong> {{ teaching_time }} min
       <br/>
-      <strong>Exercises:</strong> {{ page.exercises }} min
+      <strong>Exercises:</strong> {{ exercise_time }} min
     </div>
     <div class="col-md-9">
       <strong>Questions</strong>
       <ul>
-	{% for question in page.questions %}
+	{% for question in episode_questions %}
 	<li>{{ question|markdownify }}</li>
 	{% endfor %}
       </ul>
@@ -26,7 +66,7 @@ <h2>Overview</h2>
     <div class="col-md-9">
       <strong>Objectives</strong>
       <ul>
-	{% for objective in page.objectives %}
+	{% for objective in episode_objectives %}
 	<li>{{ objective|markdownify }}</li>
 	{% endfor %}
       </ul>