askclass-course-theme 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c4497dc0bdd7bfef0d4ec7fb2c8a4542d66672c03f190b4f3f98e1488014066
-  data.tar.gz: a2b1205e39c4e2278892e1f952761b9b2193ad8379b9600197256f1786680395
+  metadata.gz: 88944da73226846738e890fd869201ead4c90ba175b15b5f84589280692f6249
+  data.tar.gz: 903afe597c3581bd5c2f47dd1dc810cd3bf9a31018adb946588e6ad6782adf33
 SHA512:
-  metadata.gz: 636f91253c0d636c2c4bab55363129591685549807c78a95c20df4555f2c9b5a2a7b07ef3a507779be3a0168e6432da018f2810620973fd603b36c4ff74d0f83
-  data.tar.gz: cffa8e8e9c34692536abc8d1e951acb953b32ebd9887eaff449fc65f3fc51f5f82df9be36ab04c9e96ea4c14b6f1d570da6d7fbd10f11dfdc871bfbbbc85cfb5
+  metadata.gz: e080960a5865377a9726c3bb6b4af43c63ddd022f601dbdf600daa10fbf859f8f780cac9fa5789a79389fc3069680b6e66bf7f6d92256bc874cd92ac46f31e78
+  data.tar.gz: 7d627370226b11b2129663257b326fc60e10e720599a94cec02ee4393d345014a0a172daf53404ac42ab7a16a435fbbcc1c210dded45ccfc25b3bf8a72c86268

data/README.md

@@ -1,17 +1,25 @@
 # AskClass News Theme
-[![Build]][Build Link] [![CodeQL]][CodeQL Link]
+[![Deploy Jekyll]][Deploy Jekyll Link] [![Build]][Build Link] [![CodeQL]][CodeQL Link]
 
 Simple responsive Jekyll theme for a course syllabus.
 
 ## Installation
 
+Starting fresh:
 ```sh
-# If starting fresh add this
 $ echo 'source "https://rubygems.org"' > Gemfile
+$ echo 'theme: askclass-course-theme/ > _config.yml
+$ bundle
+$ jekyll serve
+```
 
+Copy and edit `_config.yml`.
+Copy `index.html`, `pwabuilder-sw.jq`, `404.html`, `_data`, and `content` to the root dir.
+
+Existing project:
+```sh
 $ echo 'gem "askclass-course-theme"' >> Gemfile
 $ sed -i '1 s/^/theme: askclass-course-theme\n/' _config.yml
-$ bundle
 ```
 
 ----
@@ -45,7 +53,12 @@ The theme is available as open source under the terms of the [MPL-2.0 License].
 [MPL-2.0 License]: https://opensource.org/licenses/MPL-2.0
 [Contributor Covenant]: http://contributor-covenant.org
 [Card Colors]: https://acn.askclass.com/2022/06/18/card-colors
+
+[Deploy Jekyll]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/pages.yml/badge.svg
+[Deploy Jekyll Link]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/pages.yml
+
 [Build]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/gem-push.yml/badge.svg
 [Build Link]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/gem-push.yml
+
 [CodeQL]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/codeql-analysis.yml/badge.svg
 [CodeQL Link]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/codeql-analysis.yml

data/_includes/course.html

@@ -1,49 +1,50 @@
-{% 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 }}">
@@ -52,6 +53,16 @@
           </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>

data/_includes/date_range.html

@@ -0,0 +1,21 @@
+{%- assign _d = include.info -%}
+
+{%- if _d.begin and _d.end -%}
+  {%- assign y1 = _d.begin | date: '%Y' -%}
+  {%- assign y2 = _d.end | date: '%Y' -%}
+  {%- if y1 == y2 -%}
+    {%- assign m1 = _d.begin | date: '%m' -%}
+    {%- assign m2 = _d.end | date: '%m' -%}
+    {{ _d.begin | date: '%b %e - ' }}
+    {%- if m1 == m2 -%}
+      {{ _d.end | date: '%e, %y' }}
+    {%- else -%}
+      {{ _d.end | date: '%b %e, %y' }}
+    {%- endif -%}
+  {%- else -%}
+    {{ _d.begin | date: '%b %e, %y-' }}{{ _d.end | date: '%b %e, %y' }}
+  {%- endif -%}
+{%- elsif _d.date | date: '%b %e, %y' -%}
+  {{ _d.date }}
+{%- endif -%}
+

data/_includes/segment/header.html

@@ -1,10 +1,5 @@
 {% assign info = include.info %}
 <section class="center-align">
   <h1 class="special">{{ info.title }}</h1>
-
-  {% if info.begin and info.end %}
-    {{ info.begin | date: '%b %e' }} - {{ info.end | date: '%b %e, %Y' }}
-  {% else %}
-    {{ info.date }}
-  {% endif %}
+  {%- include date_range.html info=include.info -%}
 </section>

data/_includes/segment/index.html

@@ -1,44 +1,48 @@
-{% assign info = include.info %}
+{%- assign info = include.info -%}
 
 <ul class="grid">
-  {% for item in info.items %}
-    {% assign session = site.data.sessions[item] %}
+  {%- for item in info.items -%}
+    {%- assign session = site.data.sessions[item] -%}
     <li class="card-tab {{ info.theme }}">
 
-      {% if session.type %}
+      {%- if session.type -%}
         <div class="top-bar">{{ session.type }}</div>
-        <div class="tab">{{ session.sequence }}</div>
-      {% elsif session.sequence %}
+      {%- elsif session.sequence -%}
         <div class="top-bar">{{ site.data.course.session_tag }}</div>
-        <div class="tab">{{ session.sequence }}</div>
-      {% else %}
+      {%- else -%}
         <div class="top-bar">&nbsp;</div>
-      {% endif %}
+      {%- endif -%}
+
+      {%- if session.sequence -%}
+        <div class="tab">{{ session.sequence }}</div>
+      {%- elsif session.icon -%}
+        <div class="tab material-symbols-outlined">{{ session.icon }}</div>
+      {%- endif -%}
 
-      {% if session.due %}
+      {%- if session.due -%}
         <div class="header">
           <span class="material-symbols-outlined">alarm_on</span>
           {{ session.due | date: '%b %e, %y' }}
         </div>
-      {% elsif session.type %}
+      {%- elsif session.type -%}
         <div class="header">{{ session.header }}</div>
-      {% else %}
+      {%- else -%}
         <div class="header">&nbsp;</div>
-      {% endif %}
+      {%- endif -%}
 
       <div class="body">
-        {% if session.url %}
+        {%- if session.url -%}
           <h3><a href="/session/{{ session.url }}">{{ session.title }}</a></h3>
-        {% else %}
+        {%- else -%}
           <h3>{{ session.title }}</h3>
-        {% endif %}
+        {%- endif -%}
 
-        {% if session.part %}
+        {%- if session.part -%}
           <div class="item">
           Part {{ session.part }}
           </div>
-        {% endif %}
+        {%- endif -%}
       </div>
     </li>
-  {% endfor %}
+  {%- endfor -%}
 </ul>

data/_includes/session/header.html

@@ -1,35 +1,40 @@
 <section class="center-align special">
-  {% if session_data.header %}
+  {%- if session_data.header -%}
     <div>{{ session_data.header }}</div>
-  {% endif %}
+  {%- endif -%}
 
   <h1 class="special">{{ session_data.title }}</h1>
 
-  {% if session_data.part %}
+  {%- if session_data.part -%}
     <div>Part {{ session_data.part }}</div>
-  {% endif %}
+  {%- endif -%}
 
-  {% include segment/nav.html segment=session_data.segment %}
+  {%- include segment/nav.html segment=session_data.segment -%}
 
   <div>
-    {% if segment_data.begin and segment_data.end %}
-      {{ segment_data.begin | date: '%b %e' }} - {{ segment_data.end | date: '%b %e, %Y' }}
-    {% else %}
-      {{ segment_data.date }}
-    {% endif %}
+    {%- include date_range.html info=segment_data -%}
   </div>
 
   <div class="middle-align">
-    {% for item in segment_data.items %}
-      {% assign _info = site.data.sessions[item] %}
+    {%- for item in segment_data.items -%}
+      {%- assign _info = site.data.sessions[item] -%}
+      {%- if _info.sequence -%}
+        {%- assign _mso = '' -%}
+      {%- else -%}
+        {%- assign _mso = 'material-symbols-outlined' -%}
+      {%- endif -%}
 
-      {% if item == session_id %}
-        <span class="lesson-number current">{{ _info.sequence }}</span>
-      {% elsif _info.url %}
-        <a class="lesson-number" href="/session/{{ _info.url }}">{{ _info.sequence }}</a>
-      {% else %}
+      {%- if item == session_id -%}
+        <span class="lesson-number current {{_mso}}">
+          {{ _info.sequence | default: _info.icon }}
+        </span>
+      {%- elsif _info.url -%}
+        <a class="lesson-number {{_mso}}" href="/session/{{ _info.url }}">
+          {{ _info.sequence | default: _info.icon }}
+        </a>
+      {%- else -%}
         <span class="lesson-number">{{ _info.sequence }}</span>
-      {% endif %}
-    {% endfor %}
+      {%- endif -%}
+    {%- endfor -%}
   </div>
 </section>

data/_includes/session/points.html

@@ -1,11 +1,16 @@
-{%- if session_data.type == 'Assignment' -%}
-<pre>
-{%- if session_data.points -%}
-Points: {{ session_data.points }}
-{%- endif -%}
-
-{%- if session_data.due %}
-Due: {{ session_data.due | date: '%B %d, %Y' }}
-{%- endif -%}
-</pre>
+{%- if session_data.points or session_data.due -%}
+<table style="width: max-content">
+  {%- if session_data.points -%}
+  <tr>
+    <td>Points</td>
+    <td>{{ session_data.points }}</td>
+  </tr>
+  {%- endif -%}
+  {%- if session_data.due -%}
+  <tr>
+    <td>Due</td>
+    <td>{{ session_data.due | date: '%B %d, %Y' }}</td>
+  </tr>
+  {%- endif -%}
+</table>
 {%- endif -%}

data/_layouts/segment.html

@@ -5,7 +5,7 @@
 <html lang="en">
   {% include header.html %}
   <body>
-    {% include logo.html size=50 title=site.data.course.id %}
+    {% include logo.html size=50 %}
     {% include segment/header.html info=info %}
 
     {% include segment/index.html info=info %}
@@ -13,5 +13,6 @@
     {{ content }}
 
     {% include segment/nav.html segment=segment %}
+    {% include footer.html %}
   </body>
 </html>

data/_layouts/session.html

@@ -6,7 +6,7 @@
 <html lang="en">
   {% include header.html %}
   <body>
-    {% include logo.html size=50 title=site.data.course.id %}
+    {% include logo.html size=50 title=site.acc.short_name %}
     {% include session/header.html %}
 
     <section class="center-align spacer content">

data/_sass/_lesson.scss

@@ -27,6 +27,11 @@ samp {
   &.current {
     background-color: var(--secondaryColor);
   }
+  &.material-symbols-outlined {
+    font-size: 25px;
+    padding: 5px;
+    font-family: 'Material Symbols Outlined';
+  }
 }
 
 a.lesson-number{

data/_sass/_tab.scss

@@ -51,8 +51,10 @@ html {
     display: block;
     font-size: 12px;
   }
-  .material-symbols-outlined {
-    font-size: 24px;
+  &.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    line-height: 0.7;
+    font-size: 37px;
   }
 }
 
@@ -74,7 +76,7 @@ html {
 
 .body {
   flex-grow: 2;
-  padding: 0 10px;
+  padding: 10px;
   overflow: hidden;
   text-align: left;
   h2 {
@@ -82,11 +84,17 @@ html {
     margin-top: 10px;
     line-height: 2.4rem;
   }
+  h4 {
+    color: inherit;
+    margin: 5px 0;
+  }
+  .item:not(:first-child) {
+    border-top: 3px outset;
+  }
   .item {
     margin-bottom: 20px;
     text-align: left;
     font-size: $size-font;
-    border-top: 3px outset;
     line-height: normal;
     h3 {
       margin: 3px 5px 0 5px;
@@ -98,10 +106,14 @@ html {
       border-radius: 5px;
       margin: 0 3px;
       padding: 2px 5px;
+      width: fit-content;
       .material-symbols-outlined {
         font-size: 1.3em;
         font-variation-settings: 'FILL' 1;
       }
+      &.past {
+        background-color: var(--darkColor);
+      }
     }
   }
   pre, code {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: askclass-course-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - AskClass
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-10-01 00:00:00.000000000 Z
+date: 2022-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -35,6 +35,7 @@ files:
 - README.md
 - _config.yml
 - _includes/course.html
+- _includes/date_range.html
 - _includes/foot/mathjax.html
 - _includes/foot/pwaupdate.html
 - _includes/footer.html
@@ -42,7 +43,6 @@ files:
 - _includes/head/meta.html
 - _includes/header.html
 - _includes/logo.html
-- _includes/segment/common.html
 - _includes/segment/header.html
 - _includes/segment/index.html
 - _includes/segment/nav.html
@@ -64,7 +64,6 @@ files:
 - _sass/_post.scss
 - _sass/_tab-colors.scss
 - _sass/_tab.scss
-- _sass/_tab.scsse
 - _sass/_table.scss
 - _sass/_video.scss
 - assets/css/grid.scss

data/_includes/segment/common.html

@@ -1,25 +0,0 @@
-{% assign classes = site.data.common.index.classes %}
-
-<div class="center-align">
-  <a href="/"><img src="/assets/logo.svg" width="100" title="{{ site.title }}"/></a>
-
-  <h1 class="special">{{ page.title }}</h1>
-</div>
-
-<ul>
-  {% for class in classes %}
-    {% assign item = site.data.common.index[class] %}
-    {% assign count = site.data.common[class] | size %}
-    <li class="card-tab c{{ forloop.index }}">
-      <div class="top-bar">{{ item.title }}</div>
-      <div class="tab">{{ count }}</div>
-      <div class="header">&nbsp;</div>
-
-      {% if count > 0 %}
-        <div class="body">
-          <h2><a href="/{{ page.collection }}/{{ class }}">{{ item.title }}</a></h2>
-        </div>
-      {% endif %}
-    </li>
-  {% endfor %}
-</ul>

data/_sass/_tab.scsse

@@ -1,125 +0,0 @@
-$color-bg: whitesmoke;
-$color-fg: #444;
-$size-font: 16px;
-
-@mixin special() {
-  color: $color-bg;
-  font-family: var(--specialFont);
-}
-
-html {
-  --bg: #{$color-bg};
-  --fg: #{$color-fg};
-  --fontSize: #{$size-font};
-}
-
-.card-tab {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  background-image: linear-gradient(225deg, $color-fg 50%, transparent 50%);
-  background-size: 120px 27px;
-  background-repeat: no-repeat;
-  background-position: right top;
-  border-radius: 2px;
-  box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
-  border-top-width: 22px;
-  border-top-style: solid;
-  border-top-color: $color-fg;
-  background-color: $color-bg;
-  color: $color-fg;
-  text-transform: none;
-  height: calc(100% - 22px);
-}
-
-.top-bar {
-  @include special();
-  margin: -21px 0 0 5px;
-  font-size: 15px;
-  text-align: left;
-}
-
-.tab {
-  @include special();
-  position: absolute;
-  top: -10px;
-  right: 3px;
-  font-size: 45px;
-  line-height: 30px;
-  text-align: right;
-  small {
-    display: block;
-    font-size: 12px;
-  }
-  .material-symbols-outlined {
-    font-size: 24px;
-  }
-}
-
-.header {
-  margin: 4px 50px 0 5px;
-  text-align: left;
-  line-height: 1;
-  height: 30px;
-  font-size: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  font-family: var(--secondaryFont);
-  a {
-    color: var(--bgColor);
-  }
-}
-
-.body {
-  flex-grow: 2;
-  padding: 0 10px;
-  overflow: hidden;
-  text-align: left;
-  h2 {
-    word-break: break-word;
-    margin-top: 10px;
-    line-height: 2.4rem;
-  }
-  .item {
-    margin-bottom: 20px;
-    text-align: left;
-    font-size: $size-font;
-    border-top: 3px outset;
-    line-height: normal;
-    h3 {
-      margin: 0 0 0 5px;
-      color: $color-fg;
-    }
-  }
-  pre, code {
-    color: inherit;
-  }
-}
-
-.control {
-  margin-top: 10px;
-  padding: 10px;
-  display: flex;
-  justify-content: space-between;
-  a {
-    text-decoration: none;
-    font-size: $size-font;
-    display: contents;
-    &.button {
-      display: flex;
-      border-radius: 5px;
-      padding: 5px 10px;
-      color: white!important;
-      background-color: $color-fg;
-    }
-  }
-  .tags {
-    font-family: var(--secondaryFont);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-}