refactor(session): Auto generate session header using course.header_tag so the header can be suppressed

Author: pham

_data/sessions.yml

@@ -2,7 +2,6 @@ session-01:
   segment: 'week-01'
   title: 'Syllabus & Course Overview'
   icon: web_stories
-  header: 'Session 1'
   sequence: 1
   url: 'session-01'
   videos: [ 'NoWbwykidu0' ]
@@ -11,7 +10,6 @@ session-02:
   segment: 'week-01'
   title: "AskClass Course Theme Intro"
   icon: web_stories
-  header: 'Session 2'
   sequence: 2
   url: 'session-02'
   images:
@@ -33,7 +31,6 @@ session-03:
   segment: 'week-02'
   title: "Formatting Content"
   icon: web_stories
-  header: 'Session 3'
   sequence: 3
   url: 'session-03'
 

_includes/course.html

@@ -25,17 +25,26 @@ <h4>{{ info.desc }}</h4>
           {%- endif -%}
           {%- for item in info.items -%}
             {%- assign session = site.data.sessions[item] -%}
+            {%- if session.header %}
+              {%- assign header = session.header %}
+            {%- elsif session.sequence %}
+              {%- assign header = course.session_tag | append: " " | append: session.sequence %}
+            {%- else %}
+              {%- assign header = nul %}
+            {%- endif %}
             <div class="item">
+              {%- if header %}
               <div class="middle-align">
-                <span class="{{ symbols }}">{{ session.icon }}</span>
+                <span class="card-color {{ symbols }}">{{ session.icon }}</span>
                 {%- if session.url -%}
                   <a href="/session/{{ session.url }}" title="{{ session.title }}">
-                    <h3>{{ session.header }}</h3>
+                    <h3 class="card-color">{{ header }}</h3>
                   </a>
                 {%- else -%}
-                  <h3>{{ session.header }}</h3>
+                  <h3 class="card-color">{{ header }}</h3>
                 {%- endif -%}
               </div>
+              {%- endif %}
               {%- if session.due -%}
                 <small class="due"
                   data-date="{{ session.due }}"
@@ -45,10 +54,16 @@ <h3>{{ session.header }}</h3>
                 </small>
               {%- endif -%}
 
-              {{ session.title }}
+              {%- if header == nul && session.url %}
+                <a class="card-color" href="/session/{{ session.url }}" title="{{ session.title }}">
+                  {{ session.title }}
+                </a>
+              {%- else %}
+                {{ session.title }}
+              {%- endif %}
 
               {%- if session.part -%}
-                <small>({{ session.part }})</small>
+                <small class="card-color">({{ session.part }})</small>
               {%- endif -%}
             </div>
           {%- endfor -%}

_includes/segment/index.html

@@ -29,13 +29,13 @@
 
       <div class="body">
         {%- if session.url -%}
-          <h3><a href="/session/{{ session.url }}">{{ session.title }}</a></h3>
+          <h3><a class="card-color" href="/session/{{ session.url }}">{{ session.title }}</a></h3>
         {%- else -%}
-          <h3>{{ session.title }}</h3>
+          <h3 class="card-color">{{ session.title }}</h3>
         {%- endif -%}
 
         {%- if session.part -%}
-          <div class="item">
+          <div class="card-color item">
           {{ session.part }}
           </div>
         {%- endif -%}