RubyGems - jekyll-theme-open-course - Versions diffs - 1.0.1 → 2.1.1 - Mend

jekyll-theme-open-course 1.0.1 → 2.1.1

Files changed (24) hide show

checksums.yaml +4 -4
data/Gemfile.lock +17 -15
data/_config.yml +2 -0
data/_layouts/calendar.html +36 -21
data/_layouts/default.html +36 -25
data/_layouts/error.html +10 -0
data/_layouts/links.html +10 -0
data/_layouts/projects.html +11 -11
data/_sass/_base.scss +108 -0
data/_sass/_colors.scss +195 -0
data/_sass/_fonts.scss +10 -0
data/_sass/_typography.scss +385 -0
data/assets/css/print.css +5 -5
data/assets/css/screen.scss +10 -0
data/assets/js/site.js +277 -8
data/assets/js/sw.js +220 -0
data/lib/jtoc.rb +15 -3
data/lib/starter_files/Gemfile +7 -0
data/lib/starter_files/_config.yml.erb +8 -0
data/lib/starter_files/offline/index.md +7 -0
data/lib/starter_files/syllabus/_policies/books.md +6 -2
data/lib/starter_files/syllabus/_policies/materials.md +6 -2
data/lib/starter_files/syllabus/_weeks/week-00.md.erb +1 -1
metadata +12 -3

@@ -1,3 +1,7 @@
+html {
+  font-size: 11pt;
+}
 #header,
 #footer {
   color: inherit;
@@ -19,14 +23,10 @@ p,li {
   -webkit-hyphens: none;
   hyphens: none;
 }
-h2 {
-  font-family: "moderno-fb-condensed";
-  font-weight: 700;
-}
 /* Hide Navigation Stuff */
+#quick-nav,
 #nav-nav,
 #full-nav {
   display: none;

data/assets/css/screen.scss CHANGED

@@ -1,5 +1,7 @@
 ---
 ---
+@import url("{{site.course.css.font-url}}");
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
@@ -9,4 +11,12 @@
 a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html,.reset{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
 /* stylelint-enable */
+html.loading,
+html.loading * {
+  transition: none !important;
+}
+@import "fonts";
+@import "colors";
 @import "typography";
+@import "base";

data/assets/js/site.js CHANGED

@@ -1,8 +1,206 @@
 // Add a .js utility class to <html>
-document.querySelector('html').classList.add('js');
+var html = document.querySelector('html');
+html.classList.add('js');
+// Register service worker, if browser supports them
+if ('serviceWorker' in navigator) {
+  var scope = detectSiteScope(location.href);
+  // console.log(scope.path);
+  navigator.serviceWorker.register(scope.path + 'assets/js/sw.js', { scope: scope.path })
+  .then(function(registration) {
+    console.log('Registered service worker scoped to', registration.scope);
+  })
+  .catch(function(error) {
+    console.error('Failed to register service worker', error)
+  });
+  function detectSiteScope(url) {
+    var scope = {};
+    scope.id = url.split('/')[3];
+    scope.path = '/';
+    if (scope.id.length > 0) {
+      scope.path = '/' + scope.id + '/';
+    }
+    return scope;
+  }
+}
+// Load up the theme switcher if @supports & custom properties available
+if ('supports' in CSS && CSS.supports("(--foo: bar)")) {
+  function ThemeSwitch() {
+    var html = document.querySelector('html');
+    var icons = {
+      light: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>',
+      dark: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>',
+      system: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"/></svg>'
+      // system: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 1l9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>'
+    }
+    var mode = 'system';
+    var modes = ['dark','light'];
+    var button = document.createElement('a');
+    var cleanupOldPreferences = function() {
+      // Clean up earlier `modes` item
+      if (storageAvailable('localStorage')) {
+        localStorage.removeItem('modes');
+      }
+    }
+    var loadPreference = function() {
+      // read from local storage
+      if (storageAvailable('localStorage')) {
+        if (localStorage.getItem('mode')) {
+          mode = localStorage.getItem('mode');
+        } else {
+          mode = 'system';
+        }
+      }
+    }
+    var setModeOrder = function() {
+      // reverse the modes if dark mode is preferred,
+      // or if dark is set in preferences
+      if ('matchMedia' in window) {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches && (mode !== 'light')) {
+          modes.reverse(); // ['light','dark']
+        }
+      }
+      // system gets tacked onto the end as the last option, always
+      modes.push('system');
+    }
+    var storePreference = function() {
+      // store current mode (default or selected) in local storage
+      if (storageAvailable('localStorage')) {
+        localStorage.setItem('mode', mode);
+      }
+    }
+    var setHTMLClass = function() {
+      html.classList.replace(mode,modes[0]);
+    }
+    var cycleModes = function() {
+      mode = modes.shift(); // grab the current mode from the front of the array...
+      modes.push(mode); // ...and push it to the end of the array
+    }
+    this.switcherButton = function() {
+      button.id = 'theme-button';
+      button.href = '#null';
+      button.title = 'Switch to ' + modes[0] + ' theme';
+      button.innerHTML = icons[modes[0]];
+      button.addEventListener('click', function(e) {
+        e.preventDefault();
+        // fix the class list on <html>
+        setHTMLClass();
+        cycleModes();
+        storePreference();
+        button.title = 'Switch to ' + modes[0] + ' theme';
+        button.innerHTML = icons[modes[0]];
+      });
+      return button;
+    }
+    // Do things on construction
+    cleanupOldPreferences();
+    loadPreference();
+    setModeOrder();
+    html.classList.add(mode);
+  }
+  var ts = new ThemeSwitch();
+  var ts_li = document.createElement('li');
+  ts_li.id = 'nav-thm';
+  ts_li.appendChild(ts.switcherButton());
+  document.querySelector('#quick-nav .nav').appendChild(ts_li);
+}
+function storageAvailable(type) {
+  try {
+    var storage = window[type];
+    var x = '__storage_test__';
+    storage.setItem(x, x);
+    storage.removeItem(x);
+    return true;
+  }
+  catch(e) {
+    return false;
+  }
+}
+// Move the nav to the header when there is room
+// Responsive detection
+function responsiveFeature(feature) {
+  var size = window
+    .getComputedStyle(document.body, ':after')
+    .getPropertyValue('content');
+  var has_feature = true;
+  if(size.indexOf(feature) === -1) {
+    has_feature = false;
+  }
+  return has_feature;
+}
+function ToggledNav() {
+  var nav = document.querySelector('#full-nav .nav');
+  var quick_nav = document.querySelector('#quick-nav .nav');
+  var full_nav = document.querySelector('#full-nav');
+  var thm_btn = document.querySelector('#theme-button')
+  var nav_thm;
+  var nav_nav;
+  var nav_items = [];
+  this.toggle = function() {
+    if (responsiveFeature('navbar') && !html.classList.contains('navbar')) {
+      if (thm_btn) {
+        nav_thm = quick_nav.removeChild(document.getElementById('nav-thm'));
+      }
+      while (nav.firstChild) {
+        if (nav.firstChild.tagName) {
+          nav_items.push(nav.removeChild(nav.firstChild));
+        } else {
+          nav.removeChild(nav.firstChild); // remove text nodes
+        }
+      }
+      for (var i = 0; i < nav_items.length; i++) {
+        quick_nav.appendChild(nav_items[i]);
+      }
+      if (thm_btn) {
+        quick_nav.appendChild(nav_thm);
+      }
+      nav_nav = quick_nav.removeChild(document.getElementById('nav-nav'));
+      html.classList.add('navbar');
+      full_nav.classList.add('hidden');
+    }
+    if (!responsiveFeature('navbar') && html.classList.contains('navbar')) {
+      if (thm_btn) {
+        nav_thm = quick_nav.removeChild(document.getElementById('nav-thm'));
+      }
+      quick_nav.appendChild(nav_nav);
+      for (var i = 0; i < nav_items.length; i++) {
+        nav.appendChild(nav_items[i]);
+      }
+      if (thm_btn) {
+        quick_nav.appendChild(nav_thm);
+      }
+      full_nav.classList.remove('hidden');
+      html.classList.remove('navbar');
+    }
+  }
+}
+var tn = new ToggledNav();
+tn.toggle();
+window.addEventListener('resize', function() {
+  tn.toggle();
+});
 // Capture and replicate the current week at the top of the calendar
-if (document.querySelector('#calendar')) {
+if ((document.querySelector('#calendar')) && (document.querySelector('#this-week'))) {
   var this_week = document.querySelector('#this-week').closest('article'); // grab this week's <article>
   var current_week = this_week.cloneNode(true); // make a copy of it,
   this_week.querySelector('#this-week').id = ''; // remove the original #this-week id
@@ -10,15 +208,15 @@ if (document.querySelector('#calendar')) {
   current_week.classList.remove('past'); // remove the past class
   current_week.querySelector('#this-week small').innerText = "This Week";
   document.querySelector('#content').prepend(current_week); // insert the copy at the top of the calendar
-  if (location.hash === '') {
-    location.hash = '#this-week'; // point at the new hash position; viewport should show this one
-  }
+  // if (location.hash === '') {
+  //  location.hash = '#this-week'; // point at the new hash position; viewport should show this one
+  // }
   var btn_show_calendar = document.createElement('a');
+  var past_weeks = document.querySelectorAll('article.past');
   btn_show_calendar.id = "btn-show-calendar";
   btn_show_calendar.href = "#null";
   btn_show_calendar.text = "Show Previous Weeks"
   btn_show_calendar.addEventListener('click', function(e) {
-      var past_weeks = document.querySelectorAll('article.past');
       for (var week of past_weeks) {
         week.classList.remove('past');
       }
@@ -26,13 +224,84 @@ if (document.querySelector('#calendar')) {
       e.preventDefault();
     }
   );
-  current_week.insertAdjacentElement('afterend', btn_show_calendar);
+  if (past_weeks.length > 1) {
+    current_week.insertAdjacentElement('afterend', btn_show_calendar);
+  }
+}
+if ('fetch' in window) {
+  var namedDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  var namedMonths = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];
+  var github_url = (function() {
+    var url = document.querySelector('#github').getAttribute('href'); // grab the href value of the repo link
+    if (typeof(url) !== 'undefined') {
+      var fragment = url.substring(url.indexOf('.com/') + 5); // find the tail end (5 = .com/)
+      return 'https://api.github.com/repos/' + fragment + '/commits?per_page=1'; // return the API url
+    }
+  })();
+  function escapeHTML(str) {
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+  if(typeof(github_url) !== "undefined") {
+    fetch(github_url)
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(data) {
+      var commit = {};
+      data = data[0]; // only need most recent commit
+      // Lowercase commit message's first word to run in `...to XYZ` copy:
+      commit.message = data.commit.message.charAt(0).toLowerCase() + data.commit.message.slice(1);
+      // Grab only the first line of a multiline message
+      commit.message = commit.message.split("\n\n")[0];
+      commit.url = data.html_url;
+      commit.stamp = data.commit.author.date;
+      commit.date = new Date(commit.stamp);
+      // Put the date in Day, Month 31 at <Local Time String> format
+      commit.time_string = namedDays[commit.date.getDay()] + ', ' +
+        namedMonths[commit.date.getMonth()] + ' ' +
+        commit.date.getDate() + ' at ' + commit.date.toLocaleTimeString();
+      // Append to footer on calendar
+      document.querySelector('#footer p').innerHTML +=
+        ' Course last updated on <time datetime="' + commit.stamp + '">' + commit.time_string +
+        '</time> to <a id="commit-message" href="' + commit.url + '">' + escapeHTML(commit.message) + '</a>.';
+    });
+  }
 }
+// This is 10,000 kinds of ugly and bad, but it gets the job done...for now.
+var course_levels = ['grad','ugrad','all'];
+var title = document.querySelector('title');
+var title_components = {};
+  title_components.original = title.innerText;
+  title_components.name = title_components.original.split(':')[1] // Web Real-Time Communications
+  title_components.full = title_components.original.split(':')[0]; // ITMD 469/545
+  title_components.code = title_components.full.split(' ')[0]; // ITMD
+  title_components.all = title_components.full.split(' ')[1]; // 469/545
+  title_components.ugrad = title_components.all.split('/')[0]; // 469
+  title_components.grad = title_components.all.split('/')[1]; // 545
+document.querySelector('#footer').addEventListener('dblclick', function(e) {
+  // Adjust the <title> contents
+  title.innerText = title_components.code + ' ' + title_components[course_levels[0]] + ': ' + title_components.name;
+  // Switch up the ancestor level class
+  html.classList.remove(course_levels[course_levels.length - 1]);
+  html.classList.add(course_levels[0]);
+  // Push the current level to the end of the array
+  course_levels.push(course_levels.shift());
+});
 window.addEventListener('keyup', function(e) {
   // console.log(e.keyCode);
   // Toggle the visibility of gridlines when `g` is pressed
   if (e.keyCode === 71) {
     document.querySelector('html').classList.toggle('g');
   }
-})
+});
+html.classList.remove('loading');

data/assets/js/sw.js ADDED

@@ -0,0 +1,220 @@
+var VERSION;
+const version = VERSION ? VERSION : mockTenMinuteVersion();
+// Update with all essential and supporting assets
+// (supporting assets might be things URLs to externally hosted web fonts)
+// There can be NO errors here, or nothing will be cached
+const site_scope = detectSiteScope(location.href);
+const site_offline_path = 'offline/';
+const site_preloaded_assets = {
+  essential: [
+    'assets/css/screen.css',
+    'assets/css/print.css',
+    'assets/js/site.js',
+    site_offline_path
+  ].map(function(asset){
+    return site_scope.path + asset;
+  }),
+  supporting: [].map(function(asset){
+    return site_scope.path + asset;
+  })
+};
+// Also preload the home page into the cache
+site_preloaded_assets.essential.push(site_scope.path);
+const site_cache_of = {
+  assets: `assets.${version}`,
+  pages: `pages`,
+  requests: `requests`
+};
+// prefix scoped values
+if (site_scope.id.length > 0) {
+  for (c in site_cache_of) {
+    site_cache_of[c] = site_scope.id + '.' + site_cache_of[c];
+  }
+}
+// For convenience in the activation event, programmatically build a simple array
+// of the names of all the caches listed in the site_caches object literal
+const site_cache_list = [];
+for (let c in site_cache_of) {
+  site_cache_list.push(site_cache_of[c]);
+}
+// The first step in a ServiceWorker's life cycle is to install it...
+addEventListener('install', function(e) {
+  console.log('Preparing to install the service worker...');
+  // shorthand for ServiceWorkerGlobalScope.self
+  // see https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/self
+  // documentation for skipWaiting() at
+  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting
+  self.skipWaiting();
+  e.waitUntil(
+    caches.open(site_cache_of.assets)
+    .then(function(c) {
+      // non-essential/nice-to-have assets are added asynchronously
+      c.addAll(site_preloaded_assets.supporting);
+      // *synchronously* add only for essential assets and fallbacks
+      return c.addAll(site_preloaded_assets.essential);
+    })
+    .catch(function(e) {
+      console.error('Caches error:', e);
+    })
+  );
+// end install event listener
+});
+// Once the ServiceWorker has been installed, it must be activated. Ordinarily, that will only
+// happen if all tabs and windows open to your site on a user's computer are closed. But the
+// call to skipWaiting() above is more aggressive, and activates the ServiceWorker immediately.
+// The primary tasks of the activate event function is to check all existing caches and delete
+// any that aren't listed in the site_cache_list created above
+addEventListener('activate', function(e) {
+  console.log('The service worker is activated!');
+  e.waitUntil(
+    caches.keys()
+    .then(function(existing_caches) {
+      // Only work with relevant caches, e.g., those in the same site_scope
+      let relevant_caches = existing_caches.filter(function(c) {
+        return c.includes(site_scope.id);
+      });
+      return Promise.all(
+        relevant_caches.map(function(relevant_cache) {
+          if (!site_cache_list.includes(relevant_cache)) {
+            return caches.delete(relevant_cache);
+          }
+        })
+      );
+    })
+    .then(function(){
+      // see https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim
+      return clients.claim();
+    })
+  // end waitUntil
+  );
+// end activate event listener
+});
+// Now we get to the main monkey business: intercepting fetch events and instructing the browser
+// whether to read from a cache, try the network, and so on.
+addEventListener('fetch', function(fe) {
+  // hold onto a copy of the original request
+  const request = fe.request;
+  // Pages: Try the network first; if it's available, cache and return the page; otherwise, serve
+  // from the cache if it exists, or respond with the offline HTML
+  if (request.headers.get('Accept').includes('text/html')) {
+    fe.respondWith(
+      fetch(request)
+      .then(function(fetch_response) {
+        const copy = fetch_response.clone();
+        fe.waitUntil(
+          caches.open(site_cache_of.pages)
+          .then(function(this_cache) {
+            this_cache.put(request,copy);
+          })
+        );
+        return fetch_response;
+      })
+      .catch(function(error) {
+        return caches.match(request)
+        .then(function(cached_response) {
+          if (cached_response) {
+            return cached_response;
+          }
+          return caches.match(site_scope.path + site_offline_path);
+        });
+      })
+    // end respondWith
+    );
+    return;
+  }
+  // External requests: Try the cache first; update the cache from the network
+  if (!request.url.includes(location.hostname)) {
+    fe.respondWith(
+      caches.match(request)
+      .then(function(cached_response) {
+        if (cached_response) {
+          fe.waitUntil(
+            fetch(request)
+            .then(function(fetch_response){
+              caches.open(site_cache_of.requests)
+              .then(function(this_cache){
+                return this_cache.put(request, fetch_response);
+              });
+            })
+          );
+          return cached_response;
+        }
+        return fetch(request)
+        .then(function(fetch_response) {
+          const copy = fetch_response.clone();
+          fe.waitUntil(
+            caches.open(site_cache_of.requests)
+            .then(function(this_cache) {
+              this_cache.put(request, copy);
+            })
+          );
+          return fetch_response;
+        });
+      })
+    // end respondWith
+    );
+    return;
+  }
+  // Everything else: try the cache first, then the network; if the network fails, respond with the
+  // offline site path
+  fe.respondWith(
+    caches.match(request)
+      .then(function(cached_response) {
+        if (cached_response) {
+          return cached_response;
+        }
+        return fetch(request)
+        .catch(function(error) {
+          return caches.match(site_scope.path + site_offline_path);
+        })
+      }
+    )
+  );
+// end fetch event listener
+});
+// Helper and utility functions
+function mockTenMinuteVersion() {
+  var d = new Date();
+  var year = d.getFullYear().toString();
+  var month = (d.getMonth() + 1).toString();
+  var date = d.getDate().toString();
+  var mins = new Date().getMinutes();
+  mins = Math.floor(mins/10).toString();
+  return year + '.' + zeroPad(month) + '.' + zeroPad(date) + '-' + zeroPad(mins);
+  function zeroPad(num,n = 2) {
+    num = num.toString();
+    while (num.length < n) {
+      num = '0' + num;
+    }
+    return num;
+  }
+}
+function detectSiteScope(url) {
+  var scope = {};
+  scope.id = url.split('/')[3];
+  scope.path = '/';
+  if (scope.id.length > 0) {
+    scope.path = '/' + scope.id + '/';
+  }
+  return scope;
+}
+// console.log(version);