_includes/course.html in askclass-course-theme-0.1.0 vs _includes/course.html in askclass-course-theme-0.2.0

@@ -1,57 +1,68 @@
-{% assign course = site.data.course %}
+{%- assign course = site.data.course -%}
 <ul class="grid">
-  {% for segment in course.segments %}
-    {% assign info = site.data.syllabus[segment] %}
-    {% if info %}
+  {%- for segment in course.segments -%}
+    {%- assign info = site.data.syllabus[segment] -%}
+    {%- if info -%}
       <li class="card-tab {{ info.theme }}">
         <div class="top-bar">{{ info.segment[0] }}</div>
         <div class="tab">{{ info.segment[1] }}</div>
         <div class="header">
           <a href="/segment/{{ segment }}">
-            {% if info.begin and info.end %}
-              {{ info.begin | date: site.acc.date_format }} - {{ info.end | date: site.acc.date_format }}
-            {% else %}
-              {{ info.date }}
-            {% endif %}
+            {%- include date_range.html info=info -%}
           </a>
         </div>
         <div class="body">
-          {% if info.image %}
+          {%- if info.desc -%}
+            <h4>{{ info.desc }}</h4>
+          {%- endif -%}
+          {%- if info.image -%}
             <img src="/assets/loading.svg" data="{{ info.thumb | default: info.image }}" alt="{{ info.title }}" />
-          {% endif %}
-          {% for item in info.items %}
-            {% assign session = site.data.sessions[item] %}
+          {%- endif -%}
+          {%- for item in info.items -%}
+            {%- assign session = site.data.sessions[item] -%}
             <div class="item">
               <div class="middle-align">
                 <span class="material-symbols-outlined">{{ session.icon }}</span>
                 <h3>{{ session.header }}</h3>
-                {% if session.due %}
-                  <small class="due" title="Due {{ session.due | date: site.acc.date_format }}">
-                    <span class="material-symbols-outlined">alarm_on</span>
-                    {{ session.due | date: site.acc.date_format }}
-                  </small>
-                {% endif %}
               </div>
+              {%- if session.due -%}
+                <small class="due"
+                  data-date="{{ session.due }}"
+                  title="Due {{ session.due | date: site.acc.date_format }}">
+                  <span class="material-symbols-outlined">alarm_on</span>
+                  {{ session.due | date: '%b %e' }}
+                </small>
+              {%- endif -%}
 
-              {% if session.url %}
+              {%- if session.url -%}
                 <a href="/session/{{ session.url }}" title="{{ session.title }}">{{ session.title }}</a>
-              {% else %}
+              {%- else -%}
                 {{ session.title }}
-              {% endif %}
+              {%- endif -%}
 
-              {% if session.part %}
+              {%- if session.part -%}
                 <small>(Part {{ session.part }})</small>
-              {% endif %}
+              {%- endif -%}
             </div>
-          {% endfor %}
+          {%- endfor -%}
         </div>
         <div class="control">
           <a class="button" href="/segment/{{ segment }}">
             {{ info.title }}&nbsp;
             <span class="middle-align material-symbols-outlined">rocket_launch</span>
           </a>
         </div>
       </li>
-    {% endif %}
-  {% endfor %}
+    {%- endif -%}
+  {%- endfor -%}
 </ul>
+
+<script defer>
+  const due = document.querySelectorAll('.due');
+  due.forEach( el => {
+      const d = new Date(el.dataset.date.split('-')).getTime();
+      if (d < Date.now()) {
+        el.classList.add('past');
+      }
+    });
+</script>