Merge pull request #37 from berkeley-cdss/styling

Fixed Specs, Refactor CSS + Use Berkeley Themes

.github/workflows/rspec.yml

@@ -7,7 +7,7 @@ on:
   - push
   - workflow_dispatch
   - deployment
-  - release 
+  - release
 
 jobs:
   build:
@@ -21,3 +21,14 @@ jobs:
       - name: Run rspec tests
         run: |
           bundle exec rspec
+      - name: summary
+        if: always()
+        run: ruby spec/support/spec_summary.rb
+      - name: Keep screenshots from failed tests
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: screenshots
+          path: ${{ github.workspace }}/tmp/capybara
+          if-no-files-found: ignore
+          retention-days: 7

.rspec

@@ -1 +1 @@
---require spec_helper
+-f documentation -f documentation --out tmp/rspec_output.txt -f json --out tmp/rspec_output.json -f html --out tmp/rspec_output.html

Gemfile

@@ -2,6 +2,8 @@
 
 source 'https://rubygems.org'
 
+gem 'jekyll', '~> 4'
+
 gem 'faraday-retry', '~> 2.2'
 gem 'kramdown-parser-gfm'
 gem 'webrick'
@@ -16,7 +18,8 @@ group :development, :test do
   gem 'axe-core-capybara'
   gem 'axe-core-rspec'
   gem 'capybara'
-  gem 'rack-jekyll', '>= 0.5.0'
+  gem 'capybara-screenshot'
+  gem 'rack'
   gem 'rackup'
   gem 'rspec'
   gem 'selenium-webdriver'

Gemfile.lock

@@ -1,8 +1,8 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.6)
-      public_suffix (>= 2.0.2, < 6.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.2)
     axe-core-api (4.9.1)
       dumb_delegator
@@ -29,10 +29,15 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
+    capybara-screenshot (1.0.26)
+      capybara (>= 1.0, < 4)
+      launchy
+    childprocess (5.1.0)
+      logger (~> 1.5)
     coercible (1.0.0)
       descendants_tracker (~> 0.0.1)
     colorator (1.1.0)
-    concurrent-ruby (1.3.3)
+    concurrent-ruby (1.3.4)
     descendants_tracker (0.0.4)
       thread_safe (~> 0.3, >= 0.3.1)
     diff-lcs (1.5.1)
@@ -52,13 +57,13 @@ GEM
     ffi (1.17.0-x86_64-darwin)
     ffi (1.17.0-x86_64-linux-gnu)
     forwardable-extended (2.6.0)
-    google-protobuf (4.27.1-arm64-darwin)
+    google-protobuf (4.27.3-arm64-darwin)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.1-x86_64-darwin)
+    google-protobuf (4.27.3-x86_64-darwin)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.1-x86_64-linux)
+    google-protobuf (4.27.3-x86_64-linux)
       bigdecimal
       rake (>= 13)
     http_parser.rb (0.8.0)
@@ -95,7 +100,7 @@ GEM
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     json (2.7.2)
-    just-the-docs (0.8.2)
+    just-the-docs (0.9.0)
       jekyll (>= 3.8.5)
       jekyll-include-cache
       jekyll-seo-tag (>= 2.0)
@@ -105,6 +110,9 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     language_server-protocol (3.17.0.3)
+    launchy (3.0.1)
+      addressable (~> 2.8)
+      childprocess (~> 5.0)
     liquid (4.0.4)
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -115,40 +123,36 @@ GEM
     mini_mime (1.1.5)
     net-http (0.4.1)
       uri
-    nokogiri (1.16.6-arm64-darwin)
+    nokogiri (1.16.7-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-darwin)
+    nokogiri (1.16.7-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-linux)
+    nokogiri (1.16.7-x86_64-linux)
       racc (~> 1.4)
     octokit (6.1.1)
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
-    parallel (1.25.1)
-    parser (3.3.3.0)
+    parallel (1.26.2)
+    parser (3.3.4.2)
       ast (~> 2.4.1)
       racc
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (5.1.1)
-    racc (1.8.0)
-    rack (1.6.13)
-    rack-jekyll (0.5.0)
-      jekyll (>= 1.3)
-      listen (>= 1.3)
-      rack (~> 1.5)
+    public_suffix (6.0.1)
+    racc (1.8.1)
+    rack (3.1.7)
     rack-test (2.1.0)
       rack (>= 1.3)
-    rackup (1.0.0)
-      rack (< 3)
-      webrick
+    rackup (2.1.0)
+      rack (>= 3)
+      webrick (~> 1.8)
     rainbow (3.1.1)
     rake (13.2.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
     regexp_parser (2.9.2)
-    rexml (3.3.0)
+    rexml (3.3.5)
       strscan
     rouge (4.3.0)
     rspec (3.13.0)
@@ -164,37 +168,38 @@ GEM
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
     rspec-support (3.13.1)
-    rubocop (1.64.1)
+    rubocop (1.65.1)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
+      regexp_parser (>= 2.4, < 3.0)
       rexml (>= 3.2.5, < 4.0)
       rubocop-ast (>= 1.31.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.31.3)
+    rubocop-ast (1.32.0)
       parser (>= 3.3.1.0)
     rubocop-capybara (2.21.0)
       rubocop (~> 1.41)
-    rubocop-rspec (3.0.1)
+    rubocop-rspec (3.0.4)
       rubocop (~> 1.61)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
     safe_yaml (1.0.5)
-    sass-embedded (1.77.5-arm64-darwin)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-x86_64-darwin)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-x86_64-linux-gnu)
-      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.8-arm64-darwin)
+      google-protobuf (~> 4.26)
+    sass-embedded (1.77.8-x86_64-darwin)
+      google-protobuf (~> 4.26)
+    sass-embedded (1.77.8-x86_64-linux-gnu)
+      google-protobuf (~> 4.26)
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
-    selenium-webdriver (4.21.1)
+    selenium-webdriver (4.23.0)
       base64 (~> 0.2)
+      logger (~> 1.4)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
@@ -209,7 +214,7 @@ GEM
       coercible (~> 1.0)
       descendants_tracker (~> 0.0, >= 0.0.3)
     webrick (1.8.1)
-    websocket (1.2.10)
+    websocket (1.2.11)
     xpath (3.2.0)
       nokogiri (~> 1.8)
 
@@ -222,12 +227,14 @@ DEPENDENCIES
   axe-core-capybara
   axe-core-rspec
   capybara
+  capybara-screenshot
   faraday-retry (~> 2.2)
+  jekyll (~> 4)
   jekyll-github-metadata (~> 2.16)
   jekyll-sitemap
   just-the-docs
   kramdown-parser-gfm
-  rack-jekyll (>= 0.5.0)
+  rack
   rackup
   rspec
   rubocop

_config.yml

@@ -21,24 +21,14 @@ tagline: A Jekyll template for course websites
 description: A modern, highly customizable, responsive Jekyll template for course websites
 # TODO(template): this should be built from the staff list...
 author: Various Bears
+# You should use either light or dark as the theme.
+color_scheme: light
 
 # TODO(setup): Set this to the semester, e.g. /sp24, (faXX / spXX / suXX / wiXX )
 baseurl: '/berkeley-class-site' # the subpath of your site, which should just be the semester.
 # TODO(setup): Set this to your course's domain
 url: 'https://berkeley-eecs.github.io' # the hostname & protocol for your site, e.g. http://example.com
 
-# TODO(setup): This should be one of eecs, dsus, stats
-# This controls some footer text, and later custom styling.
-course_department: dsus
-
-# The sitemap **must** be enabled. It's published as /baseurl/sitemap.xml
-plugins:
-  - jekyll-sitemap
-  - jekyll-seo-tag
-  - jekyll-github-metadata
-  - jekyll-include-cache
-
-
 # Course variables
 # Course variables can appear in various places around the website, if something isn't used leave it blank.
 # TODO(setup): Set all of these course variables
@@ -48,6 +38,9 @@ gradescope_course_id: 123456 # you can find this in the Gradescope URL after /co
 bcourses_course_id: 123456 # Same as above, but for bCourses. Leave blank if not in use...
 ed_course_id: 123456 # Again, same as above.
 sememster: spYY | suYY | faYY # set for the current seemester
+# This should be one of eecs, dsus, stat
+# (Future) This will control some footer text, and later custom styling.
+course_department: dsus
 # This should be the page of all class archives
 # Typically just / for DS courses (with a visible index page), or /archives if you're hosting your own, or a link to the inst.eecs page
 # If you have no archive page, comment this line out or leave blank.
@@ -56,7 +49,7 @@ class_archive_path: /
 # TODO(setup): Set these auxiliary links as you wish - they show up on the top right
 aux_links:
   # TODO(template): Move this to be built-in.
-  Ed: 
+  Ed:
     - 'https://edstem.org'
   OH Queue:
     - 'https://oh.c88c.org'
@@ -129,10 +122,23 @@ defaults:
 # Just the Docs / Berkeley Class Site Common Config
 # Options below here will likely not need to be configured..
 ######################################################################
+# TODO(template): CSS compilations. Handle warnings...
+sass:
+  style: expanded
+  sass_dir: _sass
+  sourcemap: always
+  quiet_deps: true
+  verbose: false
+
+# The sitemap **must** be enabled. It's published as /baseurl/sitemap.xml
+plugins:
+  - jekyll-sitemap
+  - jekyll-seo-tag
+  - jekyll-github-metadata
+  - jekyll-include-cache
 
 # Theme settings
 theme: just-the-docs
-color_scheme: light
 search_enabled: true
 heading_anchors: true
 permalink: pretty
@@ -158,7 +164,7 @@ compress_html:
   profile: false
 
 # Native Jeykll build options
-# You likely shouldn't need to touch these, but they are documented here just in case. 
+# You likely shouldn't need to touch these, but they are documented here just in case.
 # https://jekyllrb.com/docs/configuration/options/
 
 # This makes it easier when pushing to a static directory.
@@ -172,7 +178,8 @@ timezone: America/Los_Angeles
 include:
   - LICENSE
   - .htaccess
-
+  - robots.txt
+
 exclude:
   - .sass-cache/
   - .jekyll-cache/

_includes/footer_custom.html

@@ -13,10 +13,10 @@
 </p>
 
 <!-- Use this to add additional content. -->
-<p class="text-small text-grey-dk-100 m-0">
+<p class="text-small text-lighter m-0">
   Copyright ©{{ "now" | date: "%Y" }}, Regents of the University of Californa and respective authors.
 </p>
 
-<p class="fs-1 text-grey-dk-100 my-1">
+<p class="fs-1 text-lighter my-1">
   This site is built following the <a href="https://github.com/just-the-docs/just-the-docs" target="_bank" rel="noopener">Berkeley Class Site <i class="fa-solid fa-external-link" aria-hidden=true></i></a> template, which is generously based on the <a href="https://github.com/kevinl/just-the-class" target="_bank" rel="noopener">Just the Class <i class="fa-solid fa-external-link" aria-hidden=true></i></a>, and <a href="https://github.com/just-the-docs/just-the-docs" target="_bank" rel="noopener">Just the Docs <i class="fa-solid fa-external-link" aria-hidden=true></i></a> templates.
 </p>

_includes/head_custom.html

@@ -2,5 +2,24 @@
 
   <!-- Loading the v6 core styles and the Solid and Brands styles -->
   <link href="{{ site.baseurl }}/assets/vendor/fontawesome/css/fontawesome.css" rel="stylesheet" />
-  <link href="{{ site.baseurl }}/assets/vendor/fontawesome/css/brands.css" rel="stylesheet" />
   <link href="{{ site.baseurl }}/assets/vendor/fontawesome/css/solid.css" rel="stylesheet" />
+  <!-- <link href="{{ site.baseurl }}/assets/vendor/fontawesome/css/brands.css" rel="stylesheet" /> -->
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    if (jtd && localStorage['jtd-theme']) {
+      jtd.setTheme(localStorage['jtd-theme']);
+    }
+
+    const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+    jtd.addEvent(toggleDarkMode, 'click', function() {
+      if (jtd.getTheme() === 'dark') {
+        localStorage['jtd-theme'] = 'light';
+        jtd.setTheme('light');
+      } else {
+        jtd.setTheme('dark');
+        localStorage['jtd-theme'] = 'dark';
+      }
+    });
+  });
+</script>

_includes/nav_footer_custom.html

@@ -1,9 +1,9 @@
 <!-- This file adds links at the bottom of the sidebar on the left. -->
 
 {% if site.class_archive_path %}
-<footer class="site-footer">
+<section class="site-footer" aria-label="Footer: site archive">
   <a href="{{ site.class_archive_path }}"
     target="_blank" rel="noopener nofollow">View all course offerings
     <i class="fa-solid fa-external-link" aria-hidden="true"></i></a>
-</footer>
+</section>
 {% endif %}