kevinlin1 / just-the-class

A modern, highly customizable, responsive Jekyll template for course websites.

layout	title	nav_exclude	permalink	seo
home	Just the Class	true	/:path/	type name Course Just the Class

Just the Class

Just the Class is a GitHub Pages template developed for the purpose of quickly deploying course websites. In addition to serving plain web pages and files, it provides a boilerplate for:

• announcements,
• a course calendar,
• a staff page,
• and a weekly schedule.

Just the Class is a template that extends the popular Just the Docs theme, which provides a robust and thoroughly-tested foundation for your website. Just the Docs include features such as:

• automatic navigation structure,
• instant, full-text search and page indexing,
• and a set of UI components and authoring utilities.

Getting Started

Getting started with Just the Class is simple.

1. Create a new repository based on Just the Class.
2. Update _config.yml and README.md with your course information. Be sure to update the url and baseurl.
3. Configure a publishing source for GitHub Pages. Your course website is now live!
4. Edit and create .md Markdown files to add more content pages.

Just the Class has been used by instructors at Stanford University (CS 161), UC Berkeley (Data 100), UC Santa Barbara (CSW8), Northeastern University (CS4530/5500), and Carnegie Mellon University (17-450/17-950). Share your course website and find more examples in the show and tell discussion!

Local development environment

Just the Class requires no special Jekyll plugins and can run on GitHub Pages' standard Jekyll compiler. To setup a local development environment, clone your template repository and follow the GitHub Docs on Testing your GitHub Pages site locally with Jekyll.

just-the-class's Issues

README inaccurate instructions for local dev

Describe the bug

The current README states that "Just the Class requires no special Jekyll plugins" and a local dev environment can be set up by following this GitHub Docs guide. However, on step 4 of Building your site locally, I got the following error:

❯ bundle exec jekyll serve
Configuration file: /home/jesse/Documents/GitHub/COMP210/website/_config.yml
To use retry middleware with Faraday v2.0+, install `faraday-retry` gem
            Source: /home/jesse/Documents/GitHub/COMP210/website
       Destination: /home/jesse/Documents/GitHub/COMP210/website/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
      Remote Theme: Using theme just-the-docs/just-the-docs
                    done in 2.959 seconds.
                    Auto-regeneration may not work on some Windows versions.
                    Please see: https://github.com/Microsoft/BashOnWindows/issues/216
                    If it does not work, please upgrade Bash on Windows or run Jekyll with --no-watch.
 Auto-regeneration: enabled for '/home/jesse/Documents/GitHub/COMP210/website'
/home/jesse/gems/gems/jekyll-3.9.5/lib/jekyll/commands/serve/servlet.rb:3:in `require': cannot load such file -- webrick (LoadError)

... (omitted the rest)

This GitHub issue said to first run bundle add webrick, which fixed the issue (i.e., bundle exec jekyll serve worked afterward).

I think the README instructions should be updated to include that the user should manually install webrick. This GitHub issue says that Ruby 3.0 doesn't come with webrick anymore, which is possibly why the original wording is that this repo "requires no special Jekyll plugins".

To Reproduce

Steps to reproduce the behavior are described above. I believe this issue would occur regardless of OS as long as the user installs Ruby 3.0 or higher.

Expected behavior

Expected the website to be served locally.

Screenshots

Before installing webrick:

After installing webrick:

Desktop (please complete the following information):

• OS: WSL2 on Windows 11
• Browser [e.g. chrome, safari]: Not relevant, but Chrome
• Version [e.g. 22]: Not relevant

delete

sorry

Overlapping schedule items

Thanks again for all your work on just-the-class!

Is your feature request related to a problem? Please describe.

In a course, we may have two completely overlapping schedule items. For example, in the spring iteration of the class I'm TAing for, we have two discussion sections that happen at the same time: on Friday from 2-3:50 PM.

Unfortunately, since they completely overlap, it's not possible to see the first event at all (in this case, Section 1B). You can verify that it's still being rendered in the DOM with dev tools, etc.

Describe the solution you'd like

The immediate solution that jumped to my mind is to have "half-cards" when there's overlap. Here's a hacky solution that sets width: 50%, and right: 0 on the second card. This is inspired by what Google Calendar does.

As it stands, it's not great, but I think with some minor CSS tweaks this could be resolved (ex font sizes, etc.).

Detecting just two complete overlaps should be doable with a bit of preprocessing before iterating through site.schedules.

Describe alternatives you've considered

Two issues with what I've mentioned above:

• it scales poorly to 3+ overlaps (you'd have little to no screen real estate)
• the cards have quite a bit more visual clutter, and the shared color does not help

A handful of other suggestions:

• render only one card for the overlap slot; but, merge the information on one card. This approach doesn't work if the overlap isn't exact.
• show one card, but let the user know that there are two events "on" that card; with some interaction (ex on hover/click), see the other one. This one seems to have too much friction and could be inaccessible.
• expand the width of the column when there are overlaps. Scales poorly if multiple days have overlaps :')
• if automatically detecting the overlap isn't possible, we could also ask the user to specify this in configuration (ex a left or right key that toggles a CSS class)

Additional context

Could be out of scope of the theme; if so, feel free to close. Also happy to submit a PR if you'd like!

Unable to display more than one section on the same day

Hello!

I'm working on the _schedules/weekly.md file and I noticed that I am unable to display more than one section on the same day. Here's what I have for one of the days:

...
  Wednesday:
    Section:
      start: 10:00 AM
      end: 10:50 AM
      location: Zoom
    Section:
      start: 11:00 AM
      end: 11:50 AM
      location: Zoom
...

The resulting page displays only the 11AM section. Am I able to fix this issue on my end?

Also, where can I change the color of each type of event?

Thank you in advance for looking into this!

Controlling the order in which the modules appear

Hello,

I renamed the markdown files for weekly modules (from the template) and now they're displayed out of order on the site. Below, the module entitled 'fin' should be last, for example.

Can you give me some tips on how to control the sequence? Thanks!

Visualization of website not correct

Describe the bug
I just forked your template, and tried to visualize the website (I haven't modified anything yet). However, the visualization of the website seems not correct. Please see screenshot below. Hope you can help, thanks!

Course Logo

Hey Kevin,

This template is awesome. I was wondering what the easiest way to add a logo to the title/navbar would be. Seems like the just-the-docs template has a config variable for logo that I don't see on this one.

Thanks!

Linking to other site pages

I've been trying to figure out how to correctly link to different pages of the site. Specifically, I wanted the announcements to link to the corresponding pages elsewhere on the site.

Here's an undo of my previous attempt: the links in the announcement were resulting in 404, so I removed the text from the announcement and added it to the index page, where links worked correctly:
ucsb-ds/ds1-f20@346c75d

Seems that I need to use {{ site.baseurl }} and drop .md in the page name.

The following links added to an announcement seem to work:

[Getting Started section]({{ site.baseurl }}/#getting-started)
or
[Getting Started section]({{ site.baseurl }}/index#getting-started)

Or to link to a calendar.md:
[Calendar]({{ site.baseurl }}/calendar).

Is this the correct/suggested way to link to the other pages of the site?

If so, I was hoping that we can add it to the README.

Thank you!

Staff photos stretched out

Hello, thanks for creating this awesome repo!

I'm having an issue where the staff photos appear very stretched out. This is also true (at least on my computer) at https://kevinl.info/just-the-class/staff/.

I've attached a screenshot.

Do you have any idea what the issue may be? Thanks!

Dark Mode Toggle

Hi Kevin,

Nice job on this template. I just wanted to suggest a three-way dark mode toggle on the top right similar to what is implemented here:
https://peps.python.org

I know we can edit _config.yml to change the theme to dark, but it is before deployment and robs users of a choice. Could you please have a look into this?

Thanks!

Site not displaying correctly

Hello, and thank you for providing this template.

I created a repository by following your link (1. Create a new repository based on Just the Class.).

After pointing GitHub Pages to the master branch of my repo, the resulting website does not display correctly. When I inspect the site, I see the following errors:

just-the-docs.js:1 Failed to load resource: the server responded with a status of 404 ()
lunr.min.js:1 Failed to load resource: the server responded with a status of 404 ()
just-the-docs-default.css:1 Failed to load resource: the server responded with a status of 404 ()
just-the-docs.js:1 Failed to load resource: the server responded with a status of 404 ()
just-the-docs-default.css:1 Failed to load resource: the server responded with a status of 404 ()

Note that the site is displayed correctly, when I test it locally. I only see the following error on the console: /sw.js' not found.

Am I missing something in my repo setup?

better supporting just-the-class from upstream (just-the-docs)

Hi @kevinlin1! I'm one of the new maintainers for just-the-docs. Big fan of just-the-class (and, CS Ed - your research / pedagogy sounds very cool)!

Wanted to open this issue to see if there are any things we can implement upstream to better support just-the-class; I'm wrapping up the 0.4.0 release candidate, and can slot in any changes you have in mind before the fall quarter starts! Looking to be more proactive now that just-the-docs is actively maintained again (for example, another maintainer implemented a PR to significantly improve nav generation for large sites - just-the-docs/just-the-docs#956).

If not, no worries - feel free to close this issue!