Misc. Website Updates

A quick set of sections on how to update various areas of the course website! Most of these relate to features of Just the Class.

This playbook assumes you’ve already completed the Getting Started guide, and that the website has been set up.

Table of Contents

Syllabus and Course Calendar

Updating the syllabus is relatively simple; navigate to syllabus.md, and edit the relevant markdown and HTML. If you haven’t already, you may want to read about GFM’s support for tables and the <details> element, which significantly help with formatting.

The course calendar page is generated from the _modules folder (in Jekyll, this is a special type of folder called a collection). As a TA you should only have to edit, add, or delete lines; without going into details, the simplest advice we can give you is to “mess around” and see what works.

---
title: Logical Programming
---

M Jun 5
: **Lecture**{: .label .label-blue }Logic Programming
  : [Lecture Notes]({{site.baseurl}}/lectures/18), [Slides](https://docs.google.com/presentation/d/1-lNmUwBASu-KslLvfHpr7up8yOyRZmpa/edit?usp=sharing&ouid=101757866260235503028&rtpof=true&sd=true)

W Jun 7
: **Lecture**{: .label .label-blue }Logic Programming
  : Lecture Notes, [Slides](https://docs.google.com/presentation/d/1-lNmUwBASu-KslLvfHpr7up8yOyRZmpa/edit?usp=sharing&ouid=101757866260235503028&rtpof=true&sd=true)

F Jun 9
: **Section**{: .label .label-purple }Discussion (Prolog, Final)
  : [Discussion Resources](https://drive.google.com/drive/folders/1TBOqhuq2-JFEcW0KNkbnC6UXtpGUsATe)
: **Due**{: .label .label-red }HW 9
  : [Solutions](https://drive.google.com/file/d/16f648EtHlRrA-2ORX2ZBmMO1jPw9huhj/view?usp=sharing)

Observe the use of the .label class (and different colors) to differentiate line items.

On top of Just the Class, Matt wrote a feature to filter in/out entries based on their associated label. The filtering feature assumes that the labels are one of ['Lecture', 'Section', 'Posted', 'Due', 'Exam'].

Weekly Schedule

The weekly schedule is generated by the YAML file in _schedules/weekly.yml. Generally, each “event” in the calendar has four associated keys: a name, start, end, and location. The start and end determine the position for the event within the day it’s centered under.

There are a few things to keep in mind with the weekly schedule:

  • it doesn’t handle having many events overlapping (either partially or completely); see #29 in the Just the Class repo for more information
  • the colours for items in the schedule are based on the slug of the name of the event. If you want the colour to be something that’s not gray, you should add a custom class. See _sass/custom/schedule.scss for examples.
.schedule {
  // ...
  .schedule-event {
    //...

    // this converts events with the title "Section", "Section 1A"
    // and "Section 1B" to purple
    &.section,
    &.section-1a,
    &.section-1b
    {
      background-color: $purple-000;
    }
  }
}

Staff Page

The staff page is generated from files in the _staffers collection. To add a new staffer, make a new Markdown page with the relevant front matter (name, role, photo, email). The photo should be placed in assets/images.

---
name: Matt Wang
role: Teaching Assistant
email: matt@matthewwang.me
website: https://matthewwang.me
photo: matt.jpg
---

[Schedule an appointment](https://mattxw.com/cal); **please check with Matt first!**

Any content placed in the body of the Markdown file will be rendered in the line under the TA’s name + role.

Links to internal pages in the sidebar should generally be automatic (i.e., any page you make with layout: default or a layout that inherits it will automatically render within the sidebar). You can edit the order of the links in the sidebar using the nav_order front matter variable, which takes in a number; the sidebar is sorted in ascending order.

Links to external pages in the sidebar are configured in _config.yml. To add a new page, add a new entry to the nav_external_links key with a url and title. For changes to be reflected, you need to restart your dev server — i.e. re-run bundle exec jekyll serve.

Links to pages in the navbar (to the right of the search bar) are configured similarly, in the aux_links configuration option.

Other Elements

This isn’t a comprehensive guide to editing the entire site! If you’re wondering how to edit a specific element, we first suggest:

  1. finding the source file for that page; is it easy to understand?
  2. if not, consult the documentation for: