From 1808ffa226fe1ed9bbfd927edca8b99466d17a9d Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Mon, 12 Aug 2024 16:53:46 -0700 Subject: [PATCH 01/24] CSS refactoring --- _config.yml | 8 ++++---- _includes/css/custom.scss.liquid | 16 ++++++++++++++++ _sass/berkeley/berkeley.scss | 6 ++++++ _sass/berkeley/dsus.scss | 3 +++ _sass/berkeley/eecs.scss | 3 +++ _sass/berkeley/stat.scss | 3 +++ _sass/custom/custom.scss | 14 +++++--------- _sass/{custom => theme}/announcement.scss | 0 _sass/{custom => theme}/card.scss | 0 _sass/theme/just-the-class.scss | 12 ++++++++++++ _sass/{custom => theme}/lab.scss | 0 _sass/{custom => theme}/module.scss | 0 _sass/{custom => theme}/schedule.scss | 0 _sass/{custom => theme}/staffer.scss | 0 14 files changed, 52 insertions(+), 13 deletions(-) create mode 100644 _includes/css/custom.scss.liquid create mode 100644 _sass/berkeley/berkeley.scss create mode 100644 _sass/berkeley/dsus.scss create mode 100644 _sass/berkeley/eecs.scss create mode 100644 _sass/berkeley/stat.scss rename _sass/{custom => theme}/announcement.scss (100%) rename _sass/{custom => theme}/card.scss (100%) create mode 100644 _sass/theme/just-the-class.scss rename _sass/{custom => theme}/lab.scss (100%) rename _sass/{custom => theme}/module.scss (100%) rename _sass/{custom => theme}/schedule.scss (100%) rename _sass/{custom => theme}/staffer.scss (100%) diff --git a/_config.yml b/_config.yml index 46922fb..4c494ee 100644 --- a/_config.yml +++ b/_config.yml @@ -27,7 +27,7 @@ baseurl: '/berkeley-class-site' # the subpath of your site, which should just be # 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 +# TODO(setup): This should be one of eecs, dsus, stat # This controls some footer text, and later custom styling. course_department: dsus @@ -56,7 +56,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' @@ -158,7 +158,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 +172,7 @@ timezone: America/Los_Angeles include: - LICENSE - .htaccess - + exclude: - .sass-cache/ - .jekyll-cache/ diff --git a/_includes/css/custom.scss.liquid b/_includes/css/custom.scss.liquid new file mode 100644 index 0000000..3449754 --- /dev/null +++ b/_includes/css/custom.scss.liquid @@ -0,0 +1,16 @@ +// This file is loaded relative to _scss/ +// You should not need to edit it. +// This overrides as default file of just-the-docs! +// It also allows using liquid variables. + +// It loads Berkeley-specific CSS in _sass/theme/berkeley/ +// Berkeley Shared CSS. Try not to edit. +@import './berkeley/berkeley'; +// Department specific customizations +// Only one of these will be included. +@import './berkeley/{{ site.course_department }}'; + +// Just the Class customizations are all loaded in one file. +@import './theme/just-the-class'; + +@import "./custom/custom"; diff --git a/_sass/berkeley/berkeley.scss b/_sass/berkeley/berkeley.scss new file mode 100644 index 0000000..101f88b --- /dev/null +++ b/_sass/berkeley/berkeley.scss @@ -0,0 +1,6 @@ +// This config applies to all berkeley courses. +// It is loaded before all Just-the-class customizations + +// h1 { +// font-family: serif; +// } diff --git a/_sass/berkeley/dsus.scss b/_sass/berkeley/dsus.scss new file mode 100644 index 0000000..56a4c4d --- /dev/null +++ b/_sass/berkeley/dsus.scss @@ -0,0 +1,3 @@ +// DSUS-Specific styling for class sites. +// Loaded after Berkeley-specific styles. +// Currently not really used... diff --git a/_sass/berkeley/eecs.scss b/_sass/berkeley/eecs.scss new file mode 100644 index 0000000..72a8c6d --- /dev/null +++ b/_sass/berkeley/eecs.scss @@ -0,0 +1,3 @@ +// EECS-Specific styling for class sites. +// Loaded after Berkeley-specific styles. +// Currently not really used... diff --git a/_sass/berkeley/stat.scss b/_sass/berkeley/stat.scss new file mode 100644 index 0000000..a000715 --- /dev/null +++ b/_sass/berkeley/stat.scss @@ -0,0 +1,3 @@ +// STAT-Specific styling for class sites. +// Loaded after Berkeley-specific styles. +// Currently not really used... diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index f028758..b7cd3f9 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -1,15 +1,11 @@ -// Just the Class dependencies -@import 'card'; - -// Just the Class styles -@import 'announcement'; -@import 'module'; -@import 'schedule'; -@import 'staffer'; +// Place Custom CSS here. +// You may want to add CSS in additional files. +// It's recommended that you make a new file as _sass/custom/file.scss +// You would then add `@import "file"; to this file. // Overrides code { - font-size: 14px; + font-size: 16px; padding: 0.2em 0.4em; border: none; } diff --git a/_sass/custom/announcement.scss b/_sass/theme/announcement.scss similarity index 100% rename from _sass/custom/announcement.scss rename to _sass/theme/announcement.scss diff --git a/_sass/custom/card.scss b/_sass/theme/card.scss similarity index 100% rename from _sass/custom/card.scss rename to _sass/theme/card.scss diff --git a/_sass/theme/just-the-class.scss b/_sass/theme/just-the-class.scss new file mode 100644 index 0000000..dc5e2be --- /dev/null +++ b/_sass/theme/just-the-class.scss @@ -0,0 +1,12 @@ +// This file is common to Just The Class / theme styles. +// You should not add CSS directly to this file. +// You probably want to add files to _sass/custom/custom.scss + +// Just the Class dependencies +@import 'card'; + +// Just the Class styles +@import 'announcement'; +@import 'module'; +@import 'schedule'; +@import 'staffer'; diff --git a/_sass/custom/lab.scss b/_sass/theme/lab.scss similarity index 100% rename from _sass/custom/lab.scss rename to _sass/theme/lab.scss diff --git a/_sass/custom/module.scss b/_sass/theme/module.scss similarity index 100% rename from _sass/custom/module.scss rename to _sass/theme/module.scss diff --git a/_sass/custom/schedule.scss b/_sass/theme/schedule.scss similarity index 100% rename from _sass/custom/schedule.scss rename to _sass/theme/schedule.scss diff --git a/_sass/custom/staffer.scss b/_sass/theme/staffer.scss similarity index 100% rename from _sass/custom/staffer.scss rename to _sass/theme/staffer.scss From f89cad7f4fc01636e700e579a2b476ecb1614b7e Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Mon, 12 Aug 2024 18:36:41 -0700 Subject: [PATCH 02/24] disable fontawesome brands, which probably arent needed --- _includes/head_custom.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/head_custom.html b/_includes/head_custom.html index ce29aa5..91e8cc6 100644 --- a/_includes/head_custom.html +++ b/_includes/head_custom.html @@ -2,5 +2,5 @@ - + From 07e0689895337bccb582a3f16b390dc96579c2be Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Mon, 12 Aug 2024 19:22:31 -0700 Subject: [PATCH 03/24] Refactor lots of CSS * use berkeley-dark / berkeley-light as themes * dispense with dept-specific theming for now * current enable the dark theme for testing --- _config.yml | 2 +- _includes/css/custom.scss.liquid | 16 --------- _sass/berkeley/berkeley.scss | 6 ---- _sass/berkeley/dsus.scss | 3 -- _sass/berkeley/eecs.scss | 3 -- _sass/berkeley/stat.scss | 3 -- _sass/color_schemes/berkeley-dark.scss | 8 +++++ _sass/color_schemes/berkeley-light.scss | 5 +++ _sass/color_schemes/berkeley/berkeley.scss | 35 +++++++++++++++++++ _sass/color_schemes/berkeley/variables.scss | 21 +++++++++++ _sass/custom/setup.scss | 3 ++ .../announcement.scss | 0 _sass/{theme => just-the-class}/card.scss | 0 .../just-the-class.scss | 0 _sass/{theme => just-the-class}/lab.scss | 0 _sass/{theme => just-the-class}/module.scss | 0 _sass/{theme => just-the-class}/schedule.scss | 0 _sass/{theme => just-the-class}/staffer.scss | 0 assets/css/just-the-docs-berkeley-dark.scss | 4 +++ assets/css/just-the-docs-berkeley-light.scss | 4 +++ 20 files changed, 81 insertions(+), 32 deletions(-) delete mode 100644 _includes/css/custom.scss.liquid delete mode 100644 _sass/berkeley/berkeley.scss delete mode 100644 _sass/berkeley/dsus.scss delete mode 100644 _sass/berkeley/eecs.scss delete mode 100644 _sass/berkeley/stat.scss create mode 100644 _sass/color_schemes/berkeley-dark.scss create mode 100644 _sass/color_schemes/berkeley-light.scss create mode 100644 _sass/color_schemes/berkeley/berkeley.scss create mode 100644 _sass/color_schemes/berkeley/variables.scss create mode 100644 _sass/custom/setup.scss rename _sass/{theme => just-the-class}/announcement.scss (100%) rename _sass/{theme => just-the-class}/card.scss (100%) rename _sass/{theme => just-the-class}/just-the-class.scss (100%) rename _sass/{theme => just-the-class}/lab.scss (100%) rename _sass/{theme => just-the-class}/module.scss (100%) rename _sass/{theme => just-the-class}/schedule.scss (100%) rename _sass/{theme => just-the-class}/staffer.scss (100%) create mode 100644 assets/css/just-the-docs-berkeley-dark.scss create mode 100644 assets/css/just-the-docs-berkeley-light.scss diff --git a/_config.yml b/_config.yml index 4c494ee..ca4ce3a 100644 --- a/_config.yml +++ b/_config.yml @@ -21,6 +21,7 @@ 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 +color_scheme: berkeley-dark # 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. @@ -132,7 +133,6 @@ defaults: # Theme settings theme: just-the-docs -color_scheme: light search_enabled: true heading_anchors: true permalink: pretty diff --git a/_includes/css/custom.scss.liquid b/_includes/css/custom.scss.liquid deleted file mode 100644 index 3449754..0000000 --- a/_includes/css/custom.scss.liquid +++ /dev/null @@ -1,16 +0,0 @@ -// This file is loaded relative to _scss/ -// You should not need to edit it. -// This overrides as default file of just-the-docs! -// It also allows using liquid variables. - -// It loads Berkeley-specific CSS in _sass/theme/berkeley/ -// Berkeley Shared CSS. Try not to edit. -@import './berkeley/berkeley'; -// Department specific customizations -// Only one of these will be included. -@import './berkeley/{{ site.course_department }}'; - -// Just the Class customizations are all loaded in one file. -@import './theme/just-the-class'; - -@import "./custom/custom"; diff --git a/_sass/berkeley/berkeley.scss b/_sass/berkeley/berkeley.scss deleted file mode 100644 index 101f88b..0000000 --- a/_sass/berkeley/berkeley.scss +++ /dev/null @@ -1,6 +0,0 @@ -// This config applies to all berkeley courses. -// It is loaded before all Just-the-class customizations - -// h1 { -// font-family: serif; -// } diff --git a/_sass/berkeley/dsus.scss b/_sass/berkeley/dsus.scss deleted file mode 100644 index 56a4c4d..0000000 --- a/_sass/berkeley/dsus.scss +++ /dev/null @@ -1,3 +0,0 @@ -// DSUS-Specific styling for class sites. -// Loaded after Berkeley-specific styles. -// Currently not really used... diff --git a/_sass/berkeley/eecs.scss b/_sass/berkeley/eecs.scss deleted file mode 100644 index 72a8c6d..0000000 --- a/_sass/berkeley/eecs.scss +++ /dev/null @@ -1,3 +0,0 @@ -// EECS-Specific styling for class sites. -// Loaded after Berkeley-specific styles. -// Currently not really used... diff --git a/_sass/berkeley/stat.scss b/_sass/berkeley/stat.scss deleted file mode 100644 index a000715..0000000 --- a/_sass/berkeley/stat.scss +++ /dev/null @@ -1,3 +0,0 @@ -// STAT-Specific styling for class sites. -// Loaded after Berkeley-specific styles. -// Currently not really used... diff --git a/_sass/color_schemes/berkeley-dark.scss b/_sass/color_schemes/berkeley-dark.scss new file mode 100644 index 0000000..b982e06 --- /dev/null +++ b/_sass/color_schemes/berkeley-dark.scss @@ -0,0 +1,8 @@ +// Default JTD color scheme +@import "./color_schemes/dark"; + +@import './berkeley/variables'; +@import './berkeley/berkeley'; + +// Just the Class customizations are all loaded in one file. +@import '../just-the-class/just-the-class'; diff --git a/_sass/color_schemes/berkeley-light.scss b/_sass/color_schemes/berkeley-light.scss new file mode 100644 index 0000000..508c111 --- /dev/null +++ b/_sass/color_schemes/berkeley-light.scss @@ -0,0 +1,5 @@ +@import './berkeley/variables'; +@import './berkeley/berkeley'; + +// Just the Class customizations are all loaded in one file. +@import '../just-the-class/just-the-class'; diff --git a/_sass/color_schemes/berkeley/berkeley.scss b/_sass/color_schemes/berkeley/berkeley.scss new file mode 100644 index 0000000..4d5f222 --- /dev/null +++ b/_sass/color_schemes/berkeley/berkeley.scss @@ -0,0 +1,35 @@ +// This config applies to all berkeley courses. +// It is loaded before all Just-the-class customizations + +// h1 { +// font-family: serif; +// } + +// Override default JTD CSS for larger/more accessibile fonts. +html { + @include fs-3; +} + +body { + font-family: $body-font-family; + font-size: inherit; + line-height: $body-line-height; + color: $body-text-color; + background-color: $body-background-color; + overflow-wrap: break-word; +} + +// Link Colors +a, +.main-content .anchor-heading svg { + color: $link-color; + + &:hover, + &:focus { + color: $hover-focus-link-color; + } +} + +a:not([class]):hover { + text-decoration-color: lighten($link-color, 20%); +} diff --git a/_sass/color_schemes/berkeley/variables.scss b/_sass/color_schemes/berkeley/variables.scss new file mode 100644 index 0000000..7c72c97 --- /dev/null +++ b/_sass/color_schemes/berkeley/variables.scss @@ -0,0 +1,21 @@ +// Common Berkeley Variables. +// This file is explicitly included before berkeley.scss in _includes/css/custom + +$content-width: 1200px; + +// Typography +// $body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + +// Colors +$link-color: $blue-100; +$hover-focus-link-color: darken($link-color, 0.3); + +// Layout +$gutter-spacing: $sp-6; +$gutter-spacing-sm: $sp-4; +$nav-width: 256px; + +// Components +$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05); +$module-date-color: $link-color; +$staffer-image-size: 100px; diff --git a/_sass/custom/setup.scss b/_sass/custom/setup.scss new file mode 100644 index 0000000..207ea92 --- /dev/null +++ b/_sass/custom/setup.scss @@ -0,0 +1,3 @@ +// Use this file to customize SASS variables. +// You will likely want to review the Jst the Docs CSS +// This file is loaded *early* in the SASS compilation process. diff --git a/_sass/theme/announcement.scss b/_sass/just-the-class/announcement.scss similarity index 100% rename from _sass/theme/announcement.scss rename to _sass/just-the-class/announcement.scss diff --git a/_sass/theme/card.scss b/_sass/just-the-class/card.scss similarity index 100% rename from _sass/theme/card.scss rename to _sass/just-the-class/card.scss diff --git a/_sass/theme/just-the-class.scss b/_sass/just-the-class/just-the-class.scss similarity index 100% rename from _sass/theme/just-the-class.scss rename to _sass/just-the-class/just-the-class.scss diff --git a/_sass/theme/lab.scss b/_sass/just-the-class/lab.scss similarity index 100% rename from _sass/theme/lab.scss rename to _sass/just-the-class/lab.scss diff --git a/_sass/theme/module.scss b/_sass/just-the-class/module.scss similarity index 100% rename from _sass/theme/module.scss rename to _sass/just-the-class/module.scss diff --git a/_sass/theme/schedule.scss b/_sass/just-the-class/schedule.scss similarity index 100% rename from _sass/theme/schedule.scss rename to _sass/just-the-class/schedule.scss diff --git a/_sass/theme/staffer.scss b/_sass/just-the-class/staffer.scss similarity index 100% rename from _sass/theme/staffer.scss rename to _sass/just-the-class/staffer.scss diff --git a/assets/css/just-the-docs-berkeley-dark.scss b/assets/css/just-the-docs-berkeley-dark.scss new file mode 100644 index 0000000..2ef8bbb --- /dev/null +++ b/assets/css/just-the-docs-berkeley-dark.scss @@ -0,0 +1,4 @@ +--- +--- + +{% include css/just-the-docs.scss.liquid color_scheme="berkeley-dark" %} diff --git a/assets/css/just-the-docs-berkeley-light.scss b/assets/css/just-the-docs-berkeley-light.scss new file mode 100644 index 0000000..e0d2a48 --- /dev/null +++ b/assets/css/just-the-docs-berkeley-light.scss @@ -0,0 +1,4 @@ +--- +--- + +{% include css/just-the-docs.scss.liquid color_scheme="berkeley-light" %} From ac185a8e36b42e41805de57727a1af5cfedfa916 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Mon, 12 Aug 2024 23:20:02 -0700 Subject: [PATCH 04/24] Re-enable all a11y specs --- spec/accessibility_spec.rb | 25 +------------------------ spec/spec_helper.rb | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 24 deletions(-) diff --git a/spec/accessibility_spec.rb b/spec/accessibility_spec.rb index cb7c082..509fdb1 100644 --- a/spec/accessibility_spec.rb +++ b/spec/accessibility_spec.rb @@ -6,26 +6,6 @@ # spec_helper ensures the webiste is built and can be served locally require 'spec_helper' -def site_url - @site_url ||= YAML.load_file(RSPEC_CONFIG_FILE)['url'] + YAML.load_file(RSPEC_CONFIG_FILE)['baseurl'] -end - -def load_site_urls - puts "Running accessibility tests, expected deploy URL: #{site_url}" - # TODO: Handle case where build is not in _site - sitemap_text = File.read('_site/sitemap.xml') - sitemap_links = sitemap_text.scan(%r{.+}) - sitemap_links.filter_map do |link| - link = link.gsub("#{site_url}", '').gsub('', '') - # Skip non-html pages - # (FUTURE?) Are there other pages that should be audited for accessibility? - # (e.g. PDFs, documents. They'd need a different checker.) - next unless link.end_with?('.html') || link.end_with?('/') - - link - end.sort -end - ALL_PAGES = load_site_urls puts "Running tests on #{ALL_PAGES.count} pages." puts " - #{ALL_PAGES.join("\n - ")}\n#{'=' * 72}\n\n" @@ -33,7 +13,6 @@ def load_site_urls # Axe-core test standards groups # See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#axe-core-tags required_a11y_standards = %i[wcag2a wcag2aa] -# These are currently skipped until the basic tests are passing. complete_a11y_standards = %i[wcag21a wcag21 wcag22aa best-practice secion508] # axe-core rules that are not required to be accessible / do not apply @@ -50,7 +29,6 @@ def load_site_urls visit(path) end - # These tests should always be enabled. it 'according to WCAG 2.0 AA' do expect(page).to be_axe_clean .according_to(*required_a11y_standards, "#{path} does NOT meet WCAG 2.0 AA") @@ -58,8 +36,7 @@ def load_site_urls .excluding(*excluded_elements) end - it 'according to WCAG 2.2 AA', - skip: 'Berkeley: (June 2024) these tests are skipped until the basic tests are passing' do + it 'according to WCAG 2.2 AA' do expect(page).to be_axe_clean .according_to(*complete_a11y_standards) .skipping(*skipped_rules) diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb index af4c1fa..f87c6a8 100644 --- a/spec/spec_helper.rb +++ b/spec/spec_helper.rb @@ -27,6 +27,27 @@ RSPEC_CONFIG_FILE = '_config.yml' or ENV.fetch('RSPEC_CONFIG_FILE', nil) +def site_url + @site_url ||= YAML.load_file(RSPEC_CONFIG_FILE)['url'] + YAML.load_file(RSPEC_CONFIG_FILE)['baseurl'] +end + +def load_site_urls + puts "Running accessibility tests, expected deploy URL: #{site_url}" + # TODO: Handle case where build is not in _site + sitemap_text = File.read('_site/sitemap.xml') + sitemap_links = sitemap_text.scan(%r{.+}) + sitemap_links.filter_map do |link| + link = link.gsub("#{site_url}", '').gsub('', '') + # Skip non-html pages + # (FUTURE?) Are there other pages that should be audited for accessibility? + # (e.g. PDFs, documents. They'd need a different checker.) + next unless link.end_with?('.html') || link.end_with?('/') + + link + end.sort +end + + RSpec.configure do |config| # Allow rspec to use `--only-failures` and `--next-failure` flags # Ensure that `tmp` is in your `.gitignore` file From dcf087dc85b5491a82dc528785fa13b6966c8db4 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Mon, 12 Aug 2024 23:20:52 -0700 Subject: [PATCH 05/24] delint --- Gemfile | 2 ++ Gemfile.lock | 1 + spec/spec_helper.rb | 1 - 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/Gemfile b/Gemfile index ead2e29..5d10aa3 100644 --- a/Gemfile +++ b/Gemfile @@ -2,6 +2,8 @@ source 'https://rubygems.org' +gem 'jekyll', '~> 4' + gem 'faraday-retry', '~> 2.2' gem 'kramdown-parser-gfm' gem 'webrick' diff --git a/Gemfile.lock b/Gemfile.lock index 45c2296..dfd899f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -223,6 +223,7 @@ DEPENDENCIES axe-core-rspec capybara faraday-retry (~> 2.2) + jekyll (~> 4) jekyll-github-metadata (~> 2.16) jekyll-sitemap just-the-docs diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb index f87c6a8..13a2390 100644 --- a/spec/spec_helper.rb +++ b/spec/spec_helper.rb @@ -47,7 +47,6 @@ def load_site_urls end.sort end - RSpec.configure do |config| # Allow rspec to use `--only-failures` and `--next-failure` flags # Ensure that `tmp` is in your `.gitignore` file From bd96b129f411b3dcab51463264172f132cfb3937 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 00:18:19 -0700 Subject: [PATCH 06/24] Dark mode page passes a11y specs --- _config.yml | 1 + _includes/footer_custom.html | 4 +-- _includes/nav_footer_custom.html | 4 +-- _sass/color_schemes/berkeley-dark.scss | 31 ++++++++++++++++++++- _sass/color_schemes/berkeley/berkeley.scss | 10 +++++-- _sass/color_schemes/berkeley/variables.scss | 9 ++++-- _sass/just-the-class/staffer.scss | 4 +-- 7 files changed, 51 insertions(+), 12 deletions(-) diff --git a/_config.yml b/_config.yml index ca4ce3a..74a02b4 100644 --- a/_config.yml +++ b/_config.yml @@ -172,6 +172,7 @@ timezone: America/Los_Angeles include: - LICENSE - .htaccess + - robots.txt exclude: - .sass-cache/ diff --git a/_includes/footer_custom.html b/_includes/footer_custom.html index 8e86341..6aba45d 100644 --- a/_includes/footer_custom.html +++ b/_includes/footer_custom.html @@ -13,10 +13,10 @@

-

+

Copyright ©{{ "now" | date: "%Y" }}, Regents of the University of Californa and respective authors.

-

+

This site is built following the Berkeley Class Site template, which is generously based on the Just the Class , and Just the Docs templates.

diff --git a/_includes/nav_footer_custom.html b/_includes/nav_footer_custom.html index 0dcb58e..396860b 100644 --- a/_includes/nav_footer_custom.html +++ b/_includes/nav_footer_custom.html @@ -1,9 +1,9 @@ {% if site.class_archive_path %} - + {% endif %} diff --git a/_sass/color_schemes/berkeley-dark.scss b/_sass/color_schemes/berkeley-dark.scss index b982e06..853966e 100644 --- a/_sass/color_schemes/berkeley-dark.scss +++ b/_sass/color_schemes/berkeley-dark.scss @@ -1,8 +1,37 @@ // Default JTD color scheme @import "./color_schemes/dark"; - +// Then load general Berkeley data @import './berkeley/variables'; + +// Override dark-mode variables here +$grey-dk-400: #0C0A0E !default; +$body-background-color: $grey-dk-400; +$sidebar-color: $grey-dk-400; +$search-background-color: $grey-dk-400; +$body-text-color: $white; + +$link-color: #406FFE; +$hover-focus-link-color: darken($link-color, 10%); + +// TODO(template): We need to figure out a much better solution! +// This swaps the "dk" and "lt" variants from the original JTD files. +$grey-lt-000: #959396 !default; +$grey-lt-100: #5c5962 !default; +$grey-lt-200: #44434d !default; +$grey-lt-250: #302d36 !default; +$grey-lt-300: #27262b !default; + +$grey-dk-000: #f5f6fa !default; +$grey-dk-100: #eeebee !default; +$grey-dk-200: #ecebed !default; +$grey-dk-300: #e6e1e8 !default; + @import './berkeley/berkeley'; // Just the Class customizations are all loaded in one file. @import '../just-the-class/just-the-class'; + +// This is intended to be used for the footer +.text-lighter { + color: darken($body-text-color, 20%); +} diff --git a/_sass/color_schemes/berkeley/berkeley.scss b/_sass/color_schemes/berkeley/berkeley.scss index 4d5f222..6bb62a7 100644 --- a/_sass/color_schemes/berkeley/berkeley.scss +++ b/_sass/color_schemes/berkeley/berkeley.scss @@ -1,9 +1,8 @@ // This config applies to all berkeley courses. // It is loaded before all Just-the-class customizations -// h1 { -// font-family: serif; -// } +// UC Berkeley fonts 'Inter' (sans serif) 'Source Serif' (serif), and 'Source Code Pro' (monospace) +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap'); // Override default JTD CSS for larger/more accessibile fonts. html { @@ -33,3 +32,8 @@ a, a:not([class]):hover { text-decoration-color: lighten($link-color, 20%); } + +h1, h2, h3, h4, h5, h6, +.serif { + font-family: $serif-font-family; +} diff --git a/_sass/color_schemes/berkeley/variables.scss b/_sass/color_schemes/berkeley/variables.scss index 7c72c97..1ead840 100644 --- a/_sass/color_schemes/berkeley/variables.scss +++ b/_sass/color_schemes/berkeley/variables.scss @@ -4,10 +4,15 @@ $content-width: 1200px; // Typography -// $body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +$mono-font-family: "Source Code Pro", "SFMono-Regular", menlo, consolas, monospace !default; +$body-font-family: 'Inter', system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", +roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji" !default; +$serif-font-family: 'Source Serif 4', 'Georiga', 'Baskerville', serif; + +$berkeley-blue: #002676; // Colors -$link-color: $blue-100; +$link-color: $berkeley-blue; $hover-focus-link-color: darken($link-color, 0.3); // Layout diff --git a/_sass/just-the-class/staffer.scss b/_sass/just-the-class/staffer.scss index 988a721..52bd3ab 100644 --- a/_sass/just-the-class/staffer.scss +++ b/_sass/just-the-class/staffer.scss @@ -2,7 +2,7 @@ display: flex; margin: $sp-4 0; - .staffer-image { + .staffer-iage { border-radius: 50%; height: 100px; margin-right: $sp-4; @@ -15,7 +15,7 @@ } .staffer-badge { - @extend .label, .text-grey-dk-100, .bg-grey-lt-200; + @extend .label, .bg-grey-lt-200; user-select: none; } From ff29565fb10ec393d9c5f1c2bfcc77cbcd32f8e4 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 02:50:11 -0700 Subject: [PATCH 07/24] Sigh... Specs **now** actually seem to run and test the right thing... --- .github/workflows/rspec.yml | 5 +- Gemfile | 4 +- Gemfile.lock | 35 ++++++----- spec/accessibility_spec.rb | 6 +- spec/spec_helper.rb | 122 ++++++++++++++++++++++++++---------- 5 files changed, 117 insertions(+), 55 deletions(-) diff --git a/.github/workflows/rspec.yml b/.github/workflows/rspec.yml index adeecdc..a5cd367 100644 --- a/.github/workflows/rspec.yml +++ b/.github/workflows/rspec.yml @@ -7,7 +7,7 @@ on: - push - workflow_dispatch - deployment - - release + - release jobs: build: @@ -21,3 +21,6 @@ jobs: - name: Run rspec tests run: | bundle exec rspec + - name: summary + if: always() + run: ruby specs/support/spec_summary.rb diff --git a/Gemfile b/Gemfile index 5d10aa3..50bb06e 100644 --- a/Gemfile +++ b/Gemfile @@ -18,8 +18,8 @@ group :development, :test do gem 'axe-core-capybara' gem 'axe-core-rspec' gem 'capybara' - gem 'rack-jekyll', '>= 0.5.0' - gem 'rackup' + gem 'capybara-screenshot' + gem 'rack', '< 3' gem 'rspec' gem 'selenium-webdriver' end diff --git a/Gemfile.lock b/Gemfile.lock index dfd899f..a35092a 100644 --- a/Gemfile.lock +++ b/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,6 +29,11 @@ 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) @@ -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,11 +123,11 @@ 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) @@ -130,18 +138,11 @@ GEM 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 (2.2.9) rack-test (2.1.0) rack (>= 1.3) - rackup (1.0.0) - rack (< 3) - webrick rainbow (3.1.1) rake (13.2.1) rb-fsevent (0.11.2) @@ -222,14 +223,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) - rackup + rack (< 3) rspec rubocop rubocop-capybara diff --git a/spec/accessibility_spec.rb b/spec/accessibility_spec.rb index 509fdb1..118c7b7 100644 --- a/spec/accessibility_spec.rb +++ b/spec/accessibility_spec.rb @@ -24,19 +24,19 @@ ] ALL_PAGES.each do |path| - describe "'#{path}' is accessible", :js, type: :feature do + describe "page is accessible", :js, type: :feature do before do visit(path) end - it 'according to WCAG 2.0 AA' do + it "#{path} meets WCAG 2.0" do expect(page).to be_axe_clean .according_to(*required_a11y_standards, "#{path} does NOT meet WCAG 2.0 AA") .skipping(*skipped_rules) .excluding(*excluded_elements) end - it 'according to WCAG 2.2 AA' do + it "#{path} meets WCAG 2.2" do expect(page).to be_axe_clean .according_to(*complete_a11y_standards) .skipping(*skipped_rules) diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb index 13a2390..f5d4ea6 100644 --- a/spec/spec_helper.rb +++ b/spec/spec_helper.rb @@ -17,18 +17,26 @@ # See https://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration require 'rspec' +require 'rack' require 'yaml' require 'capybara/rspec' -require 'rack/jekyll' +require 'capybara/dsl' +require 'capybara-screenshot/rspec' +require 'capybara/session' + require 'rack/test' require 'axe-rspec' require 'axe-capybara' RSPEC_CONFIG_FILE = '_config.yml' or ENV.fetch('RSPEC_CONFIG_FILE', nil) +def site_config + @site_config ||= YAML.load_file(RSPEC_CONFIG_FILE) +end + def site_url - @site_url ||= YAML.load_file(RSPEC_CONFIG_FILE)['url'] + YAML.load_file(RSPEC_CONFIG_FILE)['baseurl'] + @site_url ||= site_config['url'] + site_config['baseurl'] end def load_site_urls @@ -47,6 +55,86 @@ def load_site_urls end.sort end +# -------- + +# This is the root of the repository, e.g. the bjc-r directory +# Update this is you move this file. +REPO_ROOT = File.expand_path('../', __dir__) + +# https://nts.strzibny.name/how-to-test-static-sites-with-rspec-capybara-and-webkit/ +class StaticSite + attr_reader :root, :server + + # TODO: Rack::File will be deprecated soon. Find a better solution. + def initialize(root) + @root = root + @server = Rack::File.new(root) + end + + def call(env) + # Remove the /baseurl prefix, which is present in all URLs, but not in the file system. + path = env['PATH_INFO'].gsub(site_config['baseurl'], '/') + path = "_site#{path}" + + # Use index.html for / paths + if path.end_with?('/') && exists?('index.html') + env['PATH_INFO'] = 'index.html' + elsif path.end_with?('/') && exists?(path + 'index.html') + env['PATH_INFO'] = path + 'index.html' + elsif !exists?(path) && exists?(path + '.html') + env['PATH_INFO'] = "#{path}.html" + else + env['PATH_INFO'] = path + end + + server.call(env) + end + + def exists?(path) + File.exist?(File.join(root, path)) + end +end +# --------- + +Capybara.register_driver :chrome_headless do |app| + options = Selenium::WebDriver::Chrome::Options.new + options.add_argument('--headless') + options.add_argument('--no-sandbox') + options.add_argument('--disable-dev-shm-usage') + # macbook air ~13" screen size + options.add_argument('--window-size=1280,800') + + Capybara::Selenium::Driver.new(app, browser: :chrome, options:) +end + +# Change default_driver to :selenium_chrome if you want to actually see the tests running in a browser locally. +# Should be :chrome_headless in CI though. +Capybara.default_driver = :chrome_headless +Capybara.javascript_driver = :chrome_headless + +Capybara::Screenshot.register_driver(:chrome_headless) do |driver, path| + # driver.browser.save_screenshot(path, full: true) + driver.save_screenshot(path) +end + +Capybara::Screenshot.register_filename_prefix_formatter(:rspec) do |example| + "tmp/capybara/screenshot_#{example.description.gsub('/', '-').gsub(' ', '-').gsub(/^.*\/spec\//,'')}" +end + +Capybara::Screenshot.autosave_on_failure = true +Capybara::Screenshot.append_timestamp = false +Capybara::Screenshot.prune_strategy = :keep_last_run + +# Setup for Capybara to serve static files served by Rack +Capybara.server = :webrick +Capybara.app = Rack::Builder.new do + use Rack::Lint + run StaticSite.new(REPO_ROOT) + # map '/' do + # end +end.to_app + +# --------- RSpec.configure do |config| # Allow rspec to use `--only-failures` and `--next-failure` flags # Ensure that `tmp` is in your `.gitignore` file @@ -79,35 +167,5 @@ def load_site_urls # triggering implicit auto-inclusion in groups with matching metadata. config.shared_context_metadata_behavior = :apply_to_host_groups - Capybara.register_driver :chrome_headless do |app| - options = Selenium::WebDriver::Chrome::Options.new - options.add_argument('--headless') - options.add_argument('--no-sandbox') - options.add_argument('--disable-dev-shm-usage') - # macbook air ~13" screen size - options.add_argument('--window-size=1280,800') - - Capybara::Selenium::Driver.new(app, browser: :chrome, options:) - end - - # Change default_driver to :selenium_chrome if you want to actually see the tests running in a browser locally. - # Should be :chrome_headless in CI though. - Capybara.default_driver = :chrome_headless - Capybara.javascript_driver = :chrome_headless - - # Configure Capybara to load the website through rack-jekyll. - # (force_build: true) builds the site before the tests are run, - # so our tests are always running against the latest version - # of our jekyll site. - jekyll_app = Rack::Jekyll.new(force_build: true, config: RSPEC_CONFIG_FILE) - - # https://stackoverflow.com/questions/52506822/testing-a-jekyll-site-with-rspec-and-capybara-getting-a-bizarre-race-case-on-rs - sleep 0.1 while jekyll_app.compiling? - - Capybara.app = jekyll_app - - # Configure Capybara server (otherwise it will error and say to use webrick or puma) - Capybara.server = :webrick - config.include Capybara::DSL end From 3ca67ced930ce91aafde322cd0aa95a7cd884e01 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 03:18:51 -0700 Subject: [PATCH 08/24] Lots of spec refactoring - rack 3 + screenshots * chrome screenshots work * migrate to rack 3 :tada: * add a spec summary function to github CI --- .rspec | 2 +- Gemfile | 3 +- Gemfile.lock | 49 +++++++++++++------------ spec/spec_helper.rb | 8 ++--- spec/support/spec_summary.rb | 69 ++++++++++++++++++++++++++++++++++++ 5 files changed, 103 insertions(+), 28 deletions(-) create mode 100644 spec/support/spec_summary.rb diff --git a/.rspec b/.rspec index c99d2e7..08cae59 100644 --- a/.rspec +++ b/.rspec @@ -1 +1 @@ ---require spec_helper +-f progress -f documentation --out tmp/rspec_output.txt -f json --out tmp/rspec_output.json -f html --out tmp/rspec_output.html diff --git a/Gemfile b/Gemfile index 50bb06e..40cd3dd 100644 --- a/Gemfile +++ b/Gemfile @@ -19,7 +19,8 @@ group :development, :test do gem 'axe-core-rspec' gem 'capybara' gem 'capybara-screenshot' - gem 'rack', '< 3' + gem 'rack' + gem 'rackup' gem 'rspec' gem 'selenium-webdriver' end diff --git a/Gemfile.lock b/Gemfile.lock index a35092a..8d6ed00 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -37,7 +37,7 @@ GEM 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) @@ -57,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) @@ -100,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) @@ -132,24 +132,27 @@ GEM 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 (6.0.1) racc (1.8.1) - rack (2.2.9) + rack (3.1.7) rack-test (2.1.0) rack (>= 1.3) + 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) @@ -165,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) @@ -210,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) @@ -230,7 +234,8 @@ DEPENDENCIES jekyll-sitemap just-the-docs kramdown-parser-gfm - rack (< 3) + rack + rackup rspec rubocop rubocop-capybara diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb index f5d4ea6..f0e5be7 100644 --- a/spec/spec_helper.rb +++ b/spec/spec_helper.rb @@ -19,6 +19,7 @@ require 'rspec' require 'rack' require 'yaml' +require 'webrick' require 'capybara/rspec' require 'capybara/dsl' @@ -68,7 +69,7 @@ class StaticSite # TODO: Rack::File will be deprecated soon. Find a better solution. def initialize(root) @root = root - @server = Rack::File.new(root) + @server = Rack::Files.new(root) end def call(env) @@ -101,8 +102,8 @@ def exists?(path) options.add_argument('--headless') options.add_argument('--no-sandbox') options.add_argument('--disable-dev-shm-usage') - # macbook air ~13" screen size - options.add_argument('--window-size=1280,800') + # macbook air ~13" screen size, with an absurd height for full size screenshots. + options.add_argument('--window-size=1280,4000') Capybara::Selenium::Driver.new(app, browser: :chrome, options:) end @@ -113,7 +114,6 @@ def exists?(path) Capybara.javascript_driver = :chrome_headless Capybara::Screenshot.register_driver(:chrome_headless) do |driver, path| - # driver.browser.save_screenshot(path, full: true) driver.save_screenshot(path) end diff --git a/spec/support/spec_summary.rb b/spec/support/spec_summary.rb new file mode 100644 index 0000000..a0ef001 --- /dev/null +++ b/spec/support/spec_summary.rb @@ -0,0 +1,69 @@ +# frozen_string_literal: true + +# Summarize the axe rspec failures into aggregate counts +# TODO: This should be an RSpec formatter + +require 'json' +require 'pp' + +RESULTS_PATH = File.join(File.dirname(__FILE__), '..', '..', 'tmp/rspec_output.json') +AXE_CASE_TITLE = /\n\s*\n\s*\d+\)\s+([-\w]+):/ + + +def failing_specs(results_data) + results_data['examples'].filter do |ex| + ex['status'] == 'failed' + end +end + +def summarize_results(results) + failing_specs(results).map do |ex| + ex['exception']['message'].scan(AXE_CASE_TITLE) + end.flatten.tally +end + +def group_results(results) + all_cases_list = failing_specs(results).map do |ex| + msg = ex['exception']['message'] + msg.gsub!(/\nInvocation:.*;/, '') + cases = msg.split(AXE_CASE_TITLE) + cases.delete_at(0) + Hash[*cases].transform_values { |v| { page: ex['full_description'], message: v }} + end + results = Hash.new + results.default = [] + all_cases_list.each do |test_hash| + test_hash.each do |axe_name, failure| + if results.has_key?(axe_name) + results[axe_name] << failure + else + results[axe_name] = [ failure ] + end + end + end + results +end + +def test_failures_with_pages(summary_group) + summary_group.transform_values { |list| list.map { |h| h[:page] } } +end + +def nicely_print(hash) + hash.each do |key, values| + puts "#{key}:" + values.each { |item| puts("\t#{item}") } + end +end + +def print_summary + results_data = JSON.parse(File.read(RESULTS_PATH)) + failing_tests_by_type = summarize_results(results_data) + pp(failing_tests_by_type) + puts "Total: #{failing_tests_by_type.values.sum} failures." + + puts "\n#{'-'*16}" + summary_group = group_results(results_data) + nicely_print(test_failures_with_pages(summary_group)) +end + +print_summary From 2dbcdcf24d73d04d890a359368418b1babefa5d9 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 03:49:55 -0700 Subject: [PATCH 09/24] Specs: always build jekyll site --- .github/workflows/rspec.yml | 2 +- spec/spec_helper.rb | 26 ++++++++++++++++---------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/.github/workflows/rspec.yml b/.github/workflows/rspec.yml index a5cd367..13af5bf 100644 --- a/.github/workflows/rspec.yml +++ b/.github/workflows/rspec.yml @@ -23,4 +23,4 @@ jobs: bundle exec rspec - name: summary if: always() - run: ruby specs/support/spec_summary.rb + run: ruby spec/support/spec_summary.rb diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb index f0e5be7..7a831c4 100644 --- a/spec/spec_helper.rb +++ b/spec/spec_helper.rb @@ -16,6 +16,7 @@ # # See https://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration +require 'jekyll' require 'rspec' require 'rack' require 'yaml' @@ -30,23 +31,29 @@ require 'axe-rspec' require 'axe-capybara' -RSPEC_CONFIG_FILE = '_config.yml' or ENV.fetch('RSPEC_CONFIG_FILE', nil) - +# ------------ +# Tools to build / compile the Jekyll site and extract the sitemap def site_config - @site_config ||= YAML.load_file(RSPEC_CONFIG_FILE) + # TODO(template): We should standardize the build for specs + # Consider simplifying baseurl + # Consider forcing the desination folder + # Override the local URL too? Would it break the sitemap? + # Note: Config keys must be strings and thus use => style hashes. + @config ||= ::Jekyll.configuration({ + 'sass' => { 'quiet_deps' => true } + }) end -def site_url - @site_url ||= site_config['url'] + site_config['baseurl'] -end +@site = ::Jekyll::Site.new(site_config) +@site.process +puts "Site build complete" def load_site_urls - puts "Running accessibility tests, expected deploy URL: #{site_url}" - # TODO: Handle case where build is not in _site + puts "Running accessibility tests" sitemap_text = File.read('_site/sitemap.xml') sitemap_links = sitemap_text.scan(%r{.+}) sitemap_links.filter_map do |link| - link = link.gsub("#{site_url}", '').gsub('', '') + link = link.gsub("#{site_config['url']}", '').gsub('', '') # Skip non-html pages # (FUTURE?) Are there other pages that should be audited for accessibility? # (e.g. PDFs, documents. They'd need a different checker.) @@ -55,7 +62,6 @@ def load_site_urls link end.sort end - # -------- # This is the root of the repository, e.g. the bjc-r directory From 8e9f165e19229311dcbcb5a42f73ef83c3a455cc Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 03:53:41 -0700 Subject: [PATCH 10/24] Delint --- spec/accessibility_spec.rb | 2 +- spec/spec_helper.rb | 32 ++++++++++++++++---------------- spec/support/spec_summary.rb | 19 +++++++++---------- 3 files changed, 26 insertions(+), 27 deletions(-) diff --git a/spec/accessibility_spec.rb b/spec/accessibility_spec.rb index 118c7b7..1bb3a21 100644 --- a/spec/accessibility_spec.rb +++ b/spec/accessibility_spec.rb @@ -24,7 +24,7 @@ ] ALL_PAGES.each do |path| - describe "page is accessible", :js, type: :feature do + describe 'page is accessible', :js, type: :feature do before do visit(path) end diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb index 7a831c4..8be9bb1 100644 --- a/spec/spec_helper.rb +++ b/spec/spec_helper.rb @@ -39,17 +39,17 @@ def site_config # Consider forcing the desination folder # Override the local URL too? Would it break the sitemap? # Note: Config keys must be strings and thus use => style hashes. - @config ||= ::Jekyll.configuration({ - 'sass' => { 'quiet_deps' => true } - }) + @config ||= Jekyll.configuration({ + 'sass' => { 'quiet_deps' => true } + }) end -@site = ::Jekyll::Site.new(site_config) +@site = Jekyll::Site.new(site_config) @site.process -puts "Site build complete" +puts 'Site build complete' def load_site_urls - puts "Running accessibility tests" + puts 'Running accessibility tests' sitemap_text = File.read('_site/sitemap.xml') sitemap_links = sitemap_text.scan(%r{.+}) sitemap_links.filter_map do |link| @@ -84,15 +84,15 @@ def call(env) path = "_site#{path}" # Use index.html for / paths - if path.end_with?('/') && exists?('index.html') - env['PATH_INFO'] = 'index.html' - elsif path.end_with?('/') && exists?(path + 'index.html') - env['PATH_INFO'] = path + 'index.html' - elsif !exists?(path) && exists?(path + '.html') - env['PATH_INFO'] = "#{path}.html" - else - env['PATH_INFO'] = path - end + env['PATH_INFO'] = if path.end_with?('/') && exists?('index.html') + 'index.html' + elsif path.end_with?('/') && exists?(path + 'index.html') + path + 'index.html' + elsif !exists?(path) && exists?(path + '.html') + "#{path}.html" + else + path + end server.call(env) end @@ -124,7 +124,7 @@ def exists?(path) end Capybara::Screenshot.register_filename_prefix_formatter(:rspec) do |example| - "tmp/capybara/screenshot_#{example.description.gsub('/', '-').gsub(' ', '-').gsub(/^.*\/spec\//,'')}" + "tmp/capybara/screenshot_#{example.description.gsub('/', '-').gsub(' ', '-').gsub(%r{^.*/spec/}, '')}" end Capybara::Screenshot.autosave_on_failure = true diff --git a/spec/support/spec_summary.rb b/spec/support/spec_summary.rb index a0ef001..1aa5819 100644 --- a/spec/support/spec_summary.rb +++ b/spec/support/spec_summary.rb @@ -9,7 +9,6 @@ RESULTS_PATH = File.join(File.dirname(__FILE__), '..', '..', 'tmp/rspec_output.json') AXE_CASE_TITLE = /\n\s*\n\s*\d+\)\s+([-\w]+):/ - def failing_specs(results_data) results_data['examples'].filter do |ex| ex['status'] == 'failed' @@ -28,18 +27,18 @@ def group_results(results) msg.gsub!(/\nInvocation:.*;/, '') cases = msg.split(AXE_CASE_TITLE) cases.delete_at(0) - Hash[*cases].transform_values { |v| { page: ex['full_description'], message: v }} + Hash[*cases].transform_values { |v| { page: ex['full_description'], message: v } } end - results = Hash.new + results = {} results.default = [] all_cases_list.each do |test_hash| - test_hash.each do |axe_name, failure| - if results.has_key?(axe_name) - results[axe_name] << failure - else - results[axe_name] = [ failure ] - end + test_hash.each do |axe_name, failure| + if results.has_key?(axe_name) + results[axe_name] << failure + else + results[axe_name] = [failure] end + end end results end @@ -61,7 +60,7 @@ def print_summary pp(failing_tests_by_type) puts "Total: #{failing_tests_by_type.values.sum} failures." - puts "\n#{'-'*16}" + puts "\n#{'-' * 16}" summary_group = group_results(results_data) nicely_print(test_failures_with_pages(summary_group)) end From b8d6e5e29c48747c6f80fdb421b8c98c6c1afdd7 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 03:55:25 -0700 Subject: [PATCH 11/24] delint --- spec/spec_helper.rb | 12 ++++++------ spec/support/spec_summary.rb | 3 +-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb index 8be9bb1..eda9e90 100644 --- a/spec/spec_helper.rb +++ b/spec/spec_helper.rb @@ -39,9 +39,9 @@ def site_config # Consider forcing the desination folder # Override the local URL too? Would it break the sitemap? # Note: Config keys must be strings and thus use => style hashes. - @config ||= Jekyll.configuration({ - 'sass' => { 'quiet_deps' => true } - }) + @site_config ||= Jekyll.configuration({ + 'sass' => { 'quiet_deps' => true } + }) end @site = Jekyll::Site.new(site_config) @@ -86,9 +86,9 @@ def call(env) # Use index.html for / paths env['PATH_INFO'] = if path.end_with?('/') && exists?('index.html') 'index.html' - elsif path.end_with?('/') && exists?(path + 'index.html') - path + 'index.html' - elsif !exists?(path) && exists?(path + '.html') + elsif path.end_with?('/') && exists?("#{path}index.html") + "#{path}index.html" + elsif !exists?(path) && exists?("#{path}.html") "#{path}.html" else path diff --git a/spec/support/spec_summary.rb b/spec/support/spec_summary.rb index 1aa5819..4bdb5fa 100644 --- a/spec/support/spec_summary.rb +++ b/spec/support/spec_summary.rb @@ -4,7 +4,6 @@ # TODO: This should be an RSpec formatter require 'json' -require 'pp' RESULTS_PATH = File.join(File.dirname(__FILE__), '..', '..', 'tmp/rspec_output.json') AXE_CASE_TITLE = /\n\s*\n\s*\d+\)\s+([-\w]+):/ @@ -33,7 +32,7 @@ def group_results(results) results.default = [] all_cases_list.each do |test_hash| test_hash.each do |axe_name, failure| - if results.has_key?(axe_name) + if results.key?(axe_name) results[axe_name] << failure else results[axe_name] = [failure] From 1134e21823e4038d7f5e523b7de5223b164255f3 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 03:59:58 -0700 Subject: [PATCH 12/24] fully delinted... --- spec/spec_helper.rb | 8 ++------ spec/support/spec_summary.rb | 4 ++++ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb index eda9e90..9d9a4af 100644 --- a/spec/spec_helper.rb +++ b/spec/spec_helper.rb @@ -80,13 +80,9 @@ def initialize(root) def call(env) # Remove the /baseurl prefix, which is present in all URLs, but not in the file system. - path = env['PATH_INFO'].gsub(site_config['baseurl'], '/') - path = "_site#{path}" + path = "_site#{env['PATH_INFO'].gsub(site_config['baseurl'], '/')}" - # Use index.html for / paths - env['PATH_INFO'] = if path.end_with?('/') && exists?('index.html') - 'index.html' - elsif path.end_with?('/') && exists?("#{path}index.html") + env['PATH_INFO'] = if path.end_with?('/') && exists?("#{path}index.html") "#{path}index.html" elsif !exists?(path) && exists?("#{path}.html") "#{path}.html" diff --git a/spec/support/spec_summary.rb b/spec/support/spec_summary.rb index 4bdb5fa..f83085e 100644 --- a/spec/support/spec_summary.rb +++ b/spec/support/spec_summary.rb @@ -20,6 +20,8 @@ def summarize_results(results) end.flatten.tally end +# rubocop:disable Metrics/AbcSize +# rubocop:disable Metrics/MethodLength def group_results(results) all_cases_list = failing_specs(results).map do |ex| msg = ex['exception']['message'] @@ -41,6 +43,8 @@ def group_results(results) end results end +# rubocop:enable Metrics/AbcSize +# rubocop:enable Metrics/MethodLength def test_failures_with_pages(summary_group) summary_group.transform_values { |list| list.map { |h| h[:page] } } From 7a40baeebd4a2f067a624384919c440276ebb0e9 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 16:37:54 -0700 Subject: [PATCH 13/24] Rename themes to work with _ and not - JTD parses the theme name by splitting on "-" --- _config.yml | 32 +++++++++++-------- _plugins/config_validator.rb | 24 ++++++++++++-- _sass/color_schemes/berkeley/berkeley.scss | 5 +++ _sass/color_schemes/berkeley/variables.scss | 6 ++-- ...{berkeley-dark.scss => berkeley_dark.scss} | 7 ++-- ...erkeley-light.scss => berkeley_light.scss} | 8 ++++- _sass/just-the-class/staffer.scss | 5 +-- assets/css/just-the-docs-berkeley-dark.scss | 4 --- assets/css/just-the-docs-berkeley-light.scss | 4 --- assets/css/just-the-docs-berkeley_dark.scss | 4 +++ assets/css/just-the-docs-berkeley_light.scss | 4 +++ home.md | 17 +++++++++- 12 files changed, 88 insertions(+), 32 deletions(-) rename _sass/color_schemes/{berkeley-dark.scss => berkeley_dark.scss} (96%) rename _sass/color_schemes/{berkeley-light.scss => berkeley_light.scss} (61%) delete mode 100644 assets/css/just-the-docs-berkeley-dark.scss delete mode 100644 assets/css/just-the-docs-berkeley-light.scss create mode 100644 assets/css/just-the-docs-berkeley_dark.scss create mode 100644 assets/css/just-the-docs-berkeley_light.scss diff --git a/_config.yml b/_config.yml index 74a02b4..56f3851 100644 --- a/_config.yml +++ b/_config.yml @@ -21,25 +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 -color_scheme: berkeley-dark +# You should use either berkeley_light or berkeley_dark as the theme. +color_scheme: berkeley_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, stat -# 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 @@ -49,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. @@ -130,6 +122,20 @@ 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 diff --git a/_plugins/config_validator.rb b/_plugins/config_validator.rb index 06f832a..92d6f62 100644 --- a/_plugins/config_validator.rb +++ b/_plugins/config_validator.rb @@ -31,11 +31,17 @@ module Jekyll # Jekyll::ConfigValidator class definition (see docs at the top of file) class ConfigValidator SEMESTER_REGEXP = /(wi|sp|su|fa)\d\d$/ - VALID_DEPTS = %w[eecs dsus stat].freeze + VALID_COURSE_DEPARTMENT = %w[eecs dsus stat].freeze + VALID_COLOR_SCHEME = %w[berkeley_light berkeley_dark].freeze + + # To validate a key with an 'allow list': + # Use the function :inclusion_validator + # and definite VALID_KEY_NAME above KEY_VALIDATIONS = { url: :validate_clean_url, baseurl: :validate_semester_format, - course_department: :validate_department + course_department: :inclusion_validator, + color_scheme: :inclusion_validator }.freeze attr_accessor :config, :errors @@ -49,7 +55,11 @@ def validate validate_keys! KEY_VALIDATIONS.each do |key, validator| - send(validator, config[key.to_s]) if @config.key?(key.to_s) + if validator == :inclusion_validator + send(validator, key, config[key.to_s], self.class.const_get("VALID_#{key.upcase}")) + else + send(validator, config[key.to_s]) if @config.key?(key.to_s) + end end raise ConfigValidationError, errors if errors.length.positive? @@ -85,6 +95,14 @@ def validate_semester_format(baseurl) def validate_department(dept) errors << "`course_department` must be one of #{VALID_DEPTS} (not '#{dept}')" unless VALID_DEPTS.include?(dept) end + + def validate_color_theme(color_theme) + errors << "`course_department` must be one of #{VALID_DEPTS} (not '#{dept}')" unless VALID_DEPTS.include?(dept) + end + + def inclusion_validator(key, value, allowed) + errors << "`#{key}` must be one of #{allowed} (not '#{value}')" unless allowed.include?(value) + end end end diff --git a/_sass/color_schemes/berkeley/berkeley.scss b/_sass/color_schemes/berkeley/berkeley.scss index 6bb62a7..a776ef7 100644 --- a/_sass/color_schemes/berkeley/berkeley.scss +++ b/_sass/color_schemes/berkeley/berkeley.scss @@ -37,3 +37,8 @@ h1, h2, h3, h4, h5, h6, .serif { font-family: $serif-font-family; } + +// Override JTD to be darker +.label-green:not(g) { + background-color: $green-300; +} diff --git a/_sass/color_schemes/berkeley/variables.scss b/_sass/color_schemes/berkeley/variables.scss index 1ead840..cce9d05 100644 --- a/_sass/color_schemes/berkeley/variables.scss +++ b/_sass/color_schemes/berkeley/variables.scss @@ -1,5 +1,6 @@ // Common Berkeley Variables. // This file is explicitly included before berkeley.scss in _includes/css/custom +// DO NOT Include any standard CSS definitions here. $content-width: 1200px; @@ -9,11 +10,12 @@ $body-font-family: 'Inter', system-ui, -apple-system, blinkmacsystemfont, "Segoe roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji" !default; $serif-font-family: 'Source Serif 4', 'Georiga', 'Baskerville', serif; -$berkeley-blue: #002676; +$berkeley-blue-old: #003262; +$berkeley-blue: #002676; // rgb(0, 38, 118); // Colors $link-color: $berkeley-blue; -$hover-focus-link-color: darken($link-color, 0.3); +$hover-focus-link-color: lighten($link-color, 20%); // Layout $gutter-spacing: $sp-6; diff --git a/_sass/color_schemes/berkeley-dark.scss b/_sass/color_schemes/berkeley_dark.scss similarity index 96% rename from _sass/color_schemes/berkeley-dark.scss rename to _sass/color_schemes/berkeley_dark.scss index 853966e..f11999d 100644 --- a/_sass/color_schemes/berkeley-dark.scss +++ b/_sass/color_schemes/berkeley_dark.scss @@ -1,5 +1,8 @@ // Default JTD color scheme + @import "./color_schemes/dark"; +$color-scheme: 'berkeley_dark' !default; + // Then load general Berkeley data @import './berkeley/variables'; @@ -26,11 +29,11 @@ $grey-dk-100: #eeebee !default; $grey-dk-200: #ecebed !default; $grey-dk-300: #e6e1e8 !default; -@import './berkeley/berkeley'; - // Just the Class customizations are all loaded in one file. @import '../just-the-class/just-the-class'; +@import './berkeley/berkeley'; + // This is intended to be used for the footer .text-lighter { color: darken($body-text-color, 20%); diff --git a/_sass/color_schemes/berkeley-light.scss b/_sass/color_schemes/berkeley_light.scss similarity index 61% rename from _sass/color_schemes/berkeley-light.scss rename to _sass/color_schemes/berkeley_light.scss index 508c111..d7ac01c 100644 --- a/_sass/color_schemes/berkeley-light.scss +++ b/_sass/color_schemes/berkeley_light.scss @@ -1,5 +1,11 @@ +// Default JTD color scheme +@import "./color_schemes/light"; + +$color-scheme: 'berkeley_light' !default; + @import './berkeley/variables'; -@import './berkeley/berkeley'; // Just the Class customizations are all loaded in one file. @import '../just-the-class/just-the-class'; + +@import './berkeley/berkeley'; diff --git a/_sass/just-the-class/staffer.scss b/_sass/just-the-class/staffer.scss index 52bd3ab..28bc0cb 100644 --- a/_sass/just-the-class/staffer.scss +++ b/_sass/just-the-class/staffer.scss @@ -2,7 +2,7 @@ display: flex; margin: $sp-4 0; - .staffer-iage { + .staffer-image { border-radius: 50%; height: 100px; margin-right: $sp-4; @@ -15,8 +15,9 @@ } .staffer-badge { - @extend .label, .bg-grey-lt-200; + @extend .label, .text-grey-dk-300, .bg-grey-lt-200; + -webkit-user-select: none; user-select: none; } diff --git a/assets/css/just-the-docs-berkeley-dark.scss b/assets/css/just-the-docs-berkeley-dark.scss deleted file mode 100644 index 2ef8bbb..0000000 --- a/assets/css/just-the-docs-berkeley-dark.scss +++ /dev/null @@ -1,4 +0,0 @@ ---- ---- - -{% include css/just-the-docs.scss.liquid color_scheme="berkeley-dark" %} diff --git a/assets/css/just-the-docs-berkeley-light.scss b/assets/css/just-the-docs-berkeley-light.scss deleted file mode 100644 index e0d2a48..0000000 --- a/assets/css/just-the-docs-berkeley-light.scss +++ /dev/null @@ -1,4 +0,0 @@ ---- ---- - -{% include css/just-the-docs.scss.liquid color_scheme="berkeley-light" %} diff --git a/assets/css/just-the-docs-berkeley_dark.scss b/assets/css/just-the-docs-berkeley_dark.scss new file mode 100644 index 0000000..5481538 --- /dev/null +++ b/assets/css/just-the-docs-berkeley_dark.scss @@ -0,0 +1,4 @@ +--- +--- + +{% include css/just-the-docs.scss.liquid color_scheme="berkeley_dark" %} diff --git a/assets/css/just-the-docs-berkeley_light.scss b/assets/css/just-the-docs-berkeley_light.scss new file mode 100644 index 0000000..9bcb0ee --- /dev/null +++ b/assets/css/just-the-docs-berkeley_light.scss @@ -0,0 +1,4 @@ +--- +--- + +{% include css/just-the-docs.scss.liquid color_scheme="berkeley_light" %} diff --git a/home.md b/home.md index b47561c..76d29d2 100644 --- a/home.md +++ b/home.md @@ -8,7 +8,22 @@ seo: name: Just the Class --- -# Just the Class +# UC Berkeley Class Site Template + +

+ +

+ 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: From f5dc31b2b94e89f75c61f962a0a8e344a8cae073 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 17:03:57 -0700 Subject: [PATCH 14/24] More refactoring of CSS * standardize on Berkeley_X color schemes * move loading berkeley variables to setup * move loading berkeley customization to custom --- _sass/color_schemes/berkeley/variables.scss | 4 ++-- _sass/color_schemes/berkeley_dark.scss | 4 ---- _sass/color_schemes/berkeley_light.scss | 8 -------- _sass/custom/custom.scss | 8 ++++---- _sass/custom/setup.scss | 3 +++ ...keley_light.scss => just-the-docs-berkeley-light.scss} | 0 6 files changed, 9 insertions(+), 18 deletions(-) rename assets/css/{just-the-docs-berkeley_light.scss => just-the-docs-berkeley-light.scss} (100%) diff --git a/_sass/color_schemes/berkeley/variables.scss b/_sass/color_schemes/berkeley/variables.scss index cce9d05..366f259 100644 --- a/_sass/color_schemes/berkeley/variables.scss +++ b/_sass/color_schemes/berkeley/variables.scss @@ -1,6 +1,6 @@ // Common Berkeley Variables. -// This file is explicitly included before berkeley.scss in _includes/css/custom -// DO NOT Include any standard CSS definitions here. +// This file is explicitly included before berkeley.scss in setup.scss +// Some colors may be override by berkeley_light or berkeley_dark $content-width: 1200px; diff --git a/_sass/color_schemes/berkeley_dark.scss b/_sass/color_schemes/berkeley_dark.scss index f11999d..a087e1e 100644 --- a/_sass/color_schemes/berkeley_dark.scss +++ b/_sass/color_schemes/berkeley_dark.scss @@ -1,11 +1,7 @@ // Default JTD color scheme - @import "./color_schemes/dark"; $color-scheme: 'berkeley_dark' !default; -// Then load general Berkeley data -@import './berkeley/variables'; - // Override dark-mode variables here $grey-dk-400: #0C0A0E !default; $body-background-color: $grey-dk-400; diff --git a/_sass/color_schemes/berkeley_light.scss b/_sass/color_schemes/berkeley_light.scss index d7ac01c..24a185c 100644 --- a/_sass/color_schemes/berkeley_light.scss +++ b/_sass/color_schemes/berkeley_light.scss @@ -1,11 +1,3 @@ // Default JTD color scheme @import "./color_schemes/light"; - $color-scheme: 'berkeley_light' !default; - -@import './berkeley/variables'; - -// Just the Class customizations are all loaded in one file. -@import '../just-the-class/just-the-class'; - -@import './berkeley/berkeley'; diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index b7cd3f9..5e25a4e 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -3,6 +3,10 @@ // It's recommended that you make a new file as _sass/custom/file.scss // You would then add `@import "file"; to this file. +// Just the Class customizations are all loaded in one file. +@import '../just-the-class/just-the-class'; +@import '../color_schemes/berkeley/berkeley'; + // Overrides code { font-size: 16px; @@ -24,10 +28,6 @@ summary { width: 100%; } -.label-a11y-green:not(g) { - background-color: $green-300; -} - .main-content-wrap { max-width: $content-width; margin: auto; diff --git a/_sass/custom/setup.scss b/_sass/custom/setup.scss index 207ea92..04b0c0e 100644 --- a/_sass/custom/setup.scss +++ b/_sass/custom/setup.scss @@ -1,3 +1,6 @@ // Use this file to customize SASS variables. // You will likely want to review the Jst the Docs CSS // This file is loaded *early* in the SASS compilation process. + +// Then load general Berkeley data +@import '../color_schemes/berkeley/variables'; diff --git a/assets/css/just-the-docs-berkeley_light.scss b/assets/css/just-the-docs-berkeley-light.scss similarity index 100% rename from assets/css/just-the-docs-berkeley_light.scss rename to assets/css/just-the-docs-berkeley-light.scss From 1fb4ab05c764454e3786eed62eebc2aaca21836b Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 17:11:03 -0700 Subject: [PATCH 15/24] Cleaner CSS locations --- .../berkeley/berkeley.scss | 49 ++++++++++++++++ .../berkeley/variables.scss | 0 _sass/custom/course_overrides.scss | 2 + _sass/custom/custom.scss | 58 ++----------------- _sass/custom/setup.scss | 2 +- 5 files changed, 58 insertions(+), 53 deletions(-) rename _sass/{color_schemes => }/berkeley/berkeley.scss (68%) rename _sass/{color_schemes => }/berkeley/variables.scss (100%) create mode 100644 _sass/custom/course_overrides.scss diff --git a/_sass/color_schemes/berkeley/berkeley.scss b/_sass/berkeley/berkeley.scss similarity index 68% rename from _sass/color_schemes/berkeley/berkeley.scss rename to _sass/berkeley/berkeley.scss index a776ef7..98effb6 100644 --- a/_sass/color_schemes/berkeley/berkeley.scss +++ b/_sass/berkeley/berkeley.scss @@ -42,3 +42,52 @@ h1, h2, h3, h4, h5, h6, .label-green:not(g) { background-color: $green-300; } + +code { + font-size: 16px; + padding: 0.2em 0.4em; + border: none; +} + +iframe { + max-width: 100%; +} + +details { + @extend .mb-4; +} + +summary { + @extend .btn, .btn-outline; + + width: 100%; +} + +.main-content-wrap { + max-width: $content-width; + margin: auto; +} + +.main-content { + dl { + display: block; + grid-template-columns: none; + } + + dt { + font-weight: 700; + text-align: start; + + &::after { + content: normal; + } + } + + dd { + font-weight: normal; + + + dt { + margin-top: 1em; + } + } +} diff --git a/_sass/color_schemes/berkeley/variables.scss b/_sass/berkeley/variables.scss similarity index 100% rename from _sass/color_schemes/berkeley/variables.scss rename to _sass/berkeley/variables.scss diff --git a/_sass/custom/course_overrides.scss b/_sass/custom/course_overrides.scss new file mode 100644 index 0000000..ba372e2 --- /dev/null +++ b/_sass/custom/course_overrides.scss @@ -0,0 +1,2 @@ +// Put your custom CSS here! +// You an reference all variables in the Berkeley files diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index 5e25a4e..f2cca91 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -1,58 +1,12 @@ -// Place Custom CSS here. // You may want to add CSS in additional files. -// It's recommended that you make a new file as _sass/custom/file.scss +// It's best to not edit this file too much. +// "course_overrides.scss" is designed for each course's customizations. +// You can make additional files as necessary. // You would then add `@import "file"; to this file. // Just the Class customizations are all loaded in one file. @import '../just-the-class/just-the-class'; -@import '../color_schemes/berkeley/berkeley'; +@import '../berkeley/berkeley'; -// Overrides -code { - font-size: 16px; - padding: 0.2em 0.4em; - border: none; -} - -iframe { - max-width: 100%; -} - -details { - @extend .mb-4; -} - -summary { - @extend .btn, .btn-outline; - - width: 100%; -} - -.main-content-wrap { - max-width: $content-width; - margin: auto; -} - -.main-content { - dl { - display: block; - grid-template-columns: none; - } - - dt { - font-weight: 700; - text-align: start; - - &::after { - content: normal; - } - } - - dd { - font-weight: normal; - - + dt { - margin-top: 1em; - } - } -} +// Place all of your course-specific CSS here. +@import './course_overrides'; diff --git a/_sass/custom/setup.scss b/_sass/custom/setup.scss index 04b0c0e..23ddd5d 100644 --- a/_sass/custom/setup.scss +++ b/_sass/custom/setup.scss @@ -3,4 +3,4 @@ // This file is loaded *early* in the SASS compilation process. // Then load general Berkeley data -@import '../color_schemes/berkeley/variables'; +@import '../berkeley/variables'; From 9878ddb0cd5715f9ed7a4bb3aba52fedcd43c129 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 17:12:57 -0700 Subject: [PATCH 16/24] (re) fix light theme filename --- ...docs-berkeley-light.scss => just-the-docs-berkeley_light.scss} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename assets/css/{just-the-docs-berkeley-light.scss => just-the-docs-berkeley_light.scss} (100%) diff --git a/assets/css/just-the-docs-berkeley-light.scss b/assets/css/just-the-docs-berkeley_light.scss similarity index 100% rename from assets/css/just-the-docs-berkeley-light.scss rename to assets/css/just-the-docs-berkeley_light.scss From e25d4cc885b5a66a222c5c74ab1c5f4db9127ef1 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 17:29:33 -0700 Subject: [PATCH 17/24] OK, now I think the theme overrides work... --- _sass/berkeley/berkeley.scss | 7 ++++++- _sass/color_schemes/berkeley_dark.scss | 11 +---------- _sass/color_schemes/berkeley_light.scss | 3 +++ _sass/custom/setup.scss | 3 ++- assets/css/just-the-docs-dark.scss | 3 +++ assets/css/just-the-docs-light.scss | 4 ++++ 6 files changed, 19 insertions(+), 12 deletions(-) create mode 100644 assets/css/just-the-docs-dark.scss create mode 100644 assets/css/just-the-docs-light.scss diff --git a/_sass/berkeley/berkeley.scss b/_sass/berkeley/berkeley.scss index 98effb6..0f30ec1 100644 --- a/_sass/berkeley/berkeley.scss +++ b/_sass/berkeley/berkeley.scss @@ -1,5 +1,5 @@ // This config applies to all berkeley courses. -// It is loaded before all Just-the-class customizations +// It is loaded *after* all Just-the-class customizations // UC Berkeley fonts 'Inter' (sans serif) 'Source Serif' (serif), and 'Source Code Pro' (monospace) @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap'); @@ -91,3 +91,8 @@ summary { } } } + +// This is intended to be used for the footer +.text-lighter { + color: $body-lighter-color; +} diff --git a/_sass/color_schemes/berkeley_dark.scss b/_sass/color_schemes/berkeley_dark.scss index a087e1e..8e92874 100644 --- a/_sass/color_schemes/berkeley_dark.scss +++ b/_sass/color_schemes/berkeley_dark.scss @@ -8,6 +8,7 @@ $body-background-color: $grey-dk-400; $sidebar-color: $grey-dk-400; $search-background-color: $grey-dk-400; $body-text-color: $white; +$body-lighter-color: darken($body-text-color, 20%); $link-color: #406FFE; $hover-focus-link-color: darken($link-color, 10%); @@ -24,13 +25,3 @@ $grey-dk-000: #f5f6fa !default; $grey-dk-100: #eeebee !default; $grey-dk-200: #ecebed !default; $grey-dk-300: #e6e1e8 !default; - -// Just the Class customizations are all loaded in one file. -@import '../just-the-class/just-the-class'; - -@import './berkeley/berkeley'; - -// This is intended to be used for the footer -.text-lighter { - color: darken($body-text-color, 20%); -} diff --git a/_sass/color_schemes/berkeley_light.scss b/_sass/color_schemes/berkeley_light.scss index 24a185c..7e84dcb 100644 --- a/_sass/color_schemes/berkeley_light.scss +++ b/_sass/color_schemes/berkeley_light.scss @@ -1,3 +1,6 @@ // Default JTD color scheme @import "./color_schemes/light"; $color-scheme: 'berkeley_light' !default; + +// Minimum lightness on white. +$body-lighter-color: $grey-dk-100; diff --git a/_sass/custom/setup.scss b/_sass/custom/setup.scss index 23ddd5d..e39267c 100644 --- a/_sass/custom/setup.scss +++ b/_sass/custom/setup.scss @@ -2,5 +2,6 @@ // You will likely want to review the Jst the Docs CSS // This file is loaded *early* in the SASS compilation process. -// Then load general Berkeley data +// Load berkeley variable customizations +// These are loaded before berkeley_light and berkeley_dark themes @import '../berkeley/variables'; diff --git a/assets/css/just-the-docs-dark.scss b/assets/css/just-the-docs-dark.scss new file mode 100644 index 0000000..7c83b42 --- /dev/null +++ b/assets/css/just-the-docs-dark.scss @@ -0,0 +1,3 @@ +--- +--- +{% include css/just-the-docs.scss.liquid color_scheme="berkeley_dark" %} diff --git a/assets/css/just-the-docs-light.scss b/assets/css/just-the-docs-light.scss new file mode 100644 index 0000000..9bcb0ee --- /dev/null +++ b/assets/css/just-the-docs-light.scss @@ -0,0 +1,4 @@ +--- +--- + +{% include css/just-the-docs.scss.liquid color_scheme="berkeley_light" %} From 710e78a7d806d4902fe665c5afc070868dc78bb2 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 20:01:06 -0700 Subject: [PATCH 18/24] Undo the berkeley_ name themes so I can fix syntax highlighting --- _config.yml | 4 +- _plugins/config_validator.rb | 2 +- _sass/color_schemes/dark.scss | 49 ++++ _sass/color_schemes/light.scss | 26 ++ _sass/snytax_highliters/a11y-dark.css | 99 +++++++ _sass/snytax_highliters/a11y-light.css | 99 +++++++ .../one-dark-jekyll-light.css | 273 ++++++++++++++++++ assets/css/just-the-docs-berkeley_dark.scss | 4 - assets/css/just-the-docs-berkeley_light.scss | 4 - assets/css/just-the-docs-dark.scss | 3 - assets/css/just-the-docs-light.scss | 4 - 11 files changed, 549 insertions(+), 18 deletions(-) create mode 100644 _sass/color_schemes/dark.scss create mode 100644 _sass/color_schemes/light.scss create mode 100644 _sass/snytax_highliters/a11y-dark.css create mode 100644 _sass/snytax_highliters/a11y-light.css create mode 100644 _sass/snytax_highliters/one-dark-jekyll-light.css delete mode 100644 assets/css/just-the-docs-berkeley_dark.scss delete mode 100644 assets/css/just-the-docs-berkeley_light.scss delete mode 100644 assets/css/just-the-docs-dark.scss delete mode 100644 assets/css/just-the-docs-light.scss diff --git a/_config.yml b/_config.yml index 56f3851..eb89c28 100644 --- a/_config.yml +++ b/_config.yml @@ -21,8 +21,8 @@ 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 berkeley_light or berkeley_dark as the theme. -color_scheme: berkeley_light +# 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. diff --git a/_plugins/config_validator.rb b/_plugins/config_validator.rb index 92d6f62..0ad2ff7 100644 --- a/_plugins/config_validator.rb +++ b/_plugins/config_validator.rb @@ -32,7 +32,7 @@ module Jekyll class ConfigValidator SEMESTER_REGEXP = /(wi|sp|su|fa)\d\d$/ VALID_COURSE_DEPARTMENT = %w[eecs dsus stat].freeze - VALID_COLOR_SCHEME = %w[berkeley_light berkeley_dark].freeze + VALID_COLOR_SCHEME = %w[light dark].freeze # To validate a key with an 'allow list': # Use the function :inclusion_validator diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss new file mode 100644 index 0000000..9dcd334 --- /dev/null +++ b/_sass/color_schemes/dark.scss @@ -0,0 +1,49 @@ +// This file is coped from Just The Docs +// Individual courses should not modify it! +// All deviations should be documented. +// https://github.com/just-the-docs/just-the-docs/blob/main/_sass/color_schemes/light.scss + +/////////// Do not modify this section. +$color-scheme: dark; +$body-background-color: $grey-dk-300; +$body-heading-color: $grey-lt-000; +$body-text-color: $grey-lt-300; +$link-color: $blue-000; +$nav-child-link-color: $grey-dk-000; +$sidebar-color: $grey-dk-300; +$base-button-color: $grey-dk-250; +$btn-primary-color: $blue-200; +$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid +$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid +$feedback-color: darken($sidebar-color, 3%); +$table-background-color: $grey-dk-250; +$search-background-color: $grey-dk-250; +$search-result-preview-color: $grey-dk-000; +$border-color: $grey-dk-200; +/////////////////// Add modifications below + +@import '../snytax_highliters/a11y-dark.css'; + +// Override dark-mode variables here +$grey-dk-400: #0C0A0E !default; +$body-background-color: $grey-dk-400; +$sidebar-color: $grey-dk-400; +$search-background-color: $grey-dk-400; +$body-text-color: $white; +$body-lighter-color: darken($body-text-color, 20%); + +$link-color: #406FFE; +$hover-focus-link-color: darken($link-color, 10%); + +// TODO(template): We need to figure out a much better solution! +// This swaps the "dk" and "lt" variants from the original JTD files. +$grey-lt-000: #959396 !default; +$grey-lt-100: #5c5962 !default; +$grey-lt-200: #44434d !default; +$grey-lt-250: #302d36 !default; +$grey-lt-300: #27262b !default; + +$grey-dk-000: #f5f6fa !default; +$grey-dk-100: #eeebee !default; +$grey-dk-200: #ecebed !default; +$grey-dk-300: #e6e1e8 !default; diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss new file mode 100644 index 0000000..5b0a71d --- /dev/null +++ b/_sass/color_schemes/light.scss @@ -0,0 +1,26 @@ +// This file is coped from Just The Docs +// Individual courses should not modify it! +// All deviations should be documented. +// https://github.com/just-the-docs/just-the-docs/blob/main/_sass/color_schemes/light.scss + +/////////// Do not modify this section. +$color-scheme: light !default; +$body-background-color: $white !default; +$body-heading-color: $grey-dk-300 !default; +$body-text-color: $grey-dk-100 !default; +$link-color: $purple-000 !default; +$nav-child-link-color: $grey-dk-100 !default; +$sidebar-color: $grey-lt-000 !default; +$base-button-color: #f7f7f7 !default; +$btn-primary-color: $purple-100 !default; +$code-background-color: $grey-lt-000 !default; +$feedback-color: darken($sidebar-color, 3%) !default; +$table-background-color: $white !default; +$search-background-color: $white !default; +$search-result-preview-color: $grey-dk-000 !default; +/////////////////// Add modifications below + +@import "../snytax_highliters/a11y-light"; + +// Minimum lightness on white. +$body-lighter-color: $grey-dk-100; diff --git a/_sass/snytax_highliters/a11y-dark.css b/_sass/snytax_highliters/a11y-dark.css new file mode 100644 index 0000000..b93b742 --- /dev/null +++ b/_sass/snytax_highliters/a11y-dark.css @@ -0,0 +1,99 @@ +/* a11y-dark theme */ +/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */ +/* @author: ericwbailey */ + +/* Comment */ +.hljs-comment, +.hljs-quote { + color: #d4d0ab; +} + +/* Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #ffa07a; +} + +/* Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #f5ab35; +} + +/* Yellow */ +.hljs-attribute { + color: #ffd700; +} + +/* Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #abe338; +} + +/* Blue */ +.hljs-title, +.hljs-section { + color: #00e0e0; +} + +/* Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #dcc6e0; +} + +.hljs { + display: block; + overflow-x: auto; + background: #2b2b2b; + color: #f8f8f2; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +@media screen and (-ms-high-contrast: active) { + .hljs-addition, + .hljs-attribute, + .hljs-built_in, + .hljs-builtin-name, + .hljs-bullet, + .hljs-comment, + .hljs-link, + .hljs-literal, + .hljs-meta, + .hljs-number, + .hljs-params, + .hljs-string, + .hljs-symbol, + .hljs-type, + .hljs-quote { + color: highlight; + } + + .hljs-keyword, + .hljs-selector-tag { + font-weight: bold; + } +} diff --git a/_sass/snytax_highliters/a11y-light.css b/_sass/snytax_highliters/a11y-light.css new file mode 100644 index 0000000..f1bf8f3 --- /dev/null +++ b/_sass/snytax_highliters/a11y-light.css @@ -0,0 +1,99 @@ +/* a11y-light theme */ +/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */ +/* @author: ericwbailey */ + +/* Comment */ +.hljs-comment, +.hljs-quote { + color: #696969; +} + +/* Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #d91e18; +} + +/* Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #aa5d00; +} + +/* Yellow */ +.hljs-attribute { + color: #aa5d00; +} + +/* Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #008000; +} + +/* Blue */ +.hljs-title, +.hljs-section { + color: #007faa; +} + +/* Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #7928a1; +} + +.hljs { + display: block; + overflow-x: auto; + background: #fefefe; + color: #545454; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +@media screen and (-ms-high-contrast: active) { + .hljs-addition, + .hljs-attribute, + .hljs-built_in, + .hljs-builtin-name, + .hljs-bullet, + .hljs-comment, + .hljs-link, + .hljs-literal, + .hljs-meta, + .hljs-number, + .hljs-params, + .hljs-string, + .hljs-symbol, + .hljs-type, + .hljs-quote { + color: highlight; + } + + .hljs-keyword, + .hljs-selector-tag { + font-weight: bold; + } +} diff --git a/_sass/snytax_highliters/one-dark-jekyll-light.css b/_sass/snytax_highliters/one-dark-jekyll-light.css new file mode 100644 index 0000000..d69a534 --- /dev/null +++ b/_sass/snytax_highliters/one-dark-jekyll-light.css @@ -0,0 +1,273 @@ +// Generated with OneLightJekyll applied to Atom's One Light theme + +.highlight, +pre.highlight { + background: #f9f9f9; + color: #383942; +} + +.highlight pre { + background: #f9f9f9; +} + +.highlight .hll { + background: #f9f9f9; +} + +.highlight .c { + color: #9fa0a6; + font-style: italic; +} + +.highlight .err { + color: #fff; + background-color: #e05151; +} + +.highlight .k { + color: #a625a4; +} + +.highlight .l { + color: #50a04f; +} + +.highlight .n { + color: #383942; +} + +.highlight .o { + color: #383942; +} + +.highlight .p { + color: #383942; +} + +.highlight .cm { + color: #9fa0a6; + font-style: italic; +} + +.highlight .cp { + color: #9fa0a6; + font-style: italic; +} + +.highlight .c1 { + color: #9fa0a6; + font-style: italic; +} + +.highlight .cs { + color: #9fa0a6; + font-style: italic; +} + +.highlight .ge { + font-style: italic; +} + +.highlight .gs { + font-weight: 700; +} + +.highlight .kc { + color: #a625a4; +} + +.highlight .kd { + color: #a625a4; +} + +.highlight .kn { + color: #a625a4; +} + +.highlight .kp { + color: #a625a4; +} + +.highlight .kr { + color: #a625a4; +} + +.highlight .kt { + color: #a625a4; +} + +.highlight .ld { + color: #50a04f; +} + +.highlight .m { + color: #b66a00; +} + +.highlight .s { + color: #50a04f; +} + +.highlight .na { + color: #b66a00; +} + +.highlight .nb { + color: #ca7601; +} + +.highlight .nc { + color: #ca7601; +} + +.highlight .no { + color: #ca7601; +} + +.highlight .nd { + color: #ca7601; +} + +.highlight .ni { + color: #ca7601; +} + +.highlight .ne { + color: #ca7601; +} + +.highlight .nf { + color: #383942; +} + +.highlight .nl { + color: #ca7601; +} + +.highlight .nn { + color: #383942; +} + +.highlight .nx { + color: #383942; +} + +.highlight .py { + color: #ca7601; +} + +.highlight .nt { + color: #e35549; +} + +.highlight .nv { + color: #ca7601; +} + +.highlight .ow { + font-weight: 700; +} + +.highlight .w { + color: #f8f8f2; +} + +.highlight .mf { + color: #b66a00; +} + +.highlight .mh { + color: #b66a00; +} + +.highlight .mi { + color: #b66a00; +} + +.highlight .mo { + color: #b66a00; +} + +.highlight .sb { + color: #50a04f; +} + +.highlight .sc { + color: #50a04f; +} + +.highlight .sd { + color: #50a04f; +} + +.highlight .s2 { + color: #50a04f; +} + +.highlight .se { + color: #50a04f; +} + +.highlight .sh { + color: #50a04f; +} + +.highlight .si { + color: #50a04f; +} + +.highlight .sx { + color: #50a04f; +} + +.highlight .sr { + color: #0083bb; +} + +.highlight .s1 { + color: #50a04f; +} + +.highlight .ss { + color: #0083bb; +} + +.highlight .bp { + color: #ca7601; +} + +.highlight .vc { + color: #ca7601; +} + +.highlight .vg { + color: #ca7601; +} + +.highlight .vi { + color: #e35549; +} + +.highlight .il { + color: #b66a00; +} + +.highlight .gu { + color: #75715e; +} + +.highlight .gd { + color: #e05151; +} + +.highlight .gi { + color: #43d089; +} + +.highlight .language-json .w + .s2 { + color: #e35549; +} + +.highlight .language-json .kc { + color: #0083bb; +} diff --git a/assets/css/just-the-docs-berkeley_dark.scss b/assets/css/just-the-docs-berkeley_dark.scss deleted file mode 100644 index 5481538..0000000 --- a/assets/css/just-the-docs-berkeley_dark.scss +++ /dev/null @@ -1,4 +0,0 @@ ---- ---- - -{% include css/just-the-docs.scss.liquid color_scheme="berkeley_dark" %} diff --git a/assets/css/just-the-docs-berkeley_light.scss b/assets/css/just-the-docs-berkeley_light.scss deleted file mode 100644 index 9bcb0ee..0000000 --- a/assets/css/just-the-docs-berkeley_light.scss +++ /dev/null @@ -1,4 +0,0 @@ ---- ---- - -{% include css/just-the-docs.scss.liquid color_scheme="berkeley_light" %} diff --git a/assets/css/just-the-docs-dark.scss b/assets/css/just-the-docs-dark.scss deleted file mode 100644 index 7c83b42..0000000 --- a/assets/css/just-the-docs-dark.scss +++ /dev/null @@ -1,3 +0,0 @@ ---- ---- -{% include css/just-the-docs.scss.liquid color_scheme="berkeley_dark" %} diff --git a/assets/css/just-the-docs-light.scss b/assets/css/just-the-docs-light.scss deleted file mode 100644 index 9bcb0ee..0000000 --- a/assets/css/just-the-docs-light.scss +++ /dev/null @@ -1,4 +0,0 @@ ---- ---- - -{% include css/just-the-docs.scss.liquid color_scheme="berkeley_light" %} From c73515f750c62e7a50ec31b0f9f5c91d520f94a6 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 21:31:55 -0700 Subject: [PATCH 19/24] Pretty good progress on accessible syntax themes --- _config.yml | 2 +- _sass/color_schemes/dark.scss | 2 +- _sass/snytax_highliters/a11y-dark.css | 187 +++++++----- _sass/snytax_highliters/a11y-light.css | 187 +++++++----- _sass/snytax_highliters/hljs-a11y-dark.css | 99 +++++++ _sass/snytax_highliters/hljs-a11y-light.css | 99 +++++++ .../one-dark-jekyll-light.css | 273 ------------------ 7 files changed, 424 insertions(+), 425 deletions(-) create mode 100644 _sass/snytax_highliters/hljs-a11y-dark.css create mode 100644 _sass/snytax_highliters/hljs-a11y-light.css delete mode 100644 _sass/snytax_highliters/one-dark-jekyll-light.css diff --git a/_config.yml b/_config.yml index eb89c28..71777e9 100644 --- a/_config.yml +++ b/_config.yml @@ -22,7 +22,7 @@ description: A modern, highly customizable, responsive Jekyll template for cours # 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 +color_scheme: dark # 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. diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss index 9dcd334..f5b6df6 100644 --- a/_sass/color_schemes/dark.scss +++ b/_sass/color_schemes/dark.scss @@ -22,7 +22,7 @@ $search-result-preview-color: $grey-dk-000; $border-color: $grey-dk-200; /////////////////// Add modifications below -@import '../snytax_highliters/a11y-dark.css'; +@import '../snytax_highliters/a11y-dark'; // Override dark-mode variables here $grey-dk-400: #0C0A0E !default; diff --git a/_sass/snytax_highliters/a11y-dark.css b/_sass/snytax_highliters/a11y-dark.css index b93b742..20f3214 100644 --- a/_sass/snytax_highliters/a11y-dark.css +++ b/_sass/snytax_highliters/a11y-dark.css @@ -1,99 +1,136 @@ /* a11y-dark theme */ /* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */ /* @author: ericwbailey */ +/* Adapted to pygments/rouge by @cycomachead */ -/* Comment */ -.hljs-comment, -.hljs-quote { - color: #d4d0ab; +:root { + --pygments-a11y-bg-color: #2b2b2b; + --pygments-a11y-dark-on-light: #000; /* Used for errors */ + --pygments-a11y-light-gray: #d4d0ab; /* comments */ + --pygments-a11y-dark-gray: #f8f8f2; + --pygments-a11y-purple: #dcc6e0; + --pygments-a11y-blue: #00e0e0; + --pygments-a11y-green: #abe338; + --pygments-a11y-yellow: #ffd700; /* attributes */ + --pygments-a11y-orange: #f5ab35; + --pygments-a11y-red: #ffa07a; } -/* Red */ -.hljs-variable, -.hljs-template-variable, -.hljs-tag, -.hljs-name, -.hljs-selector-id, -.hljs-selector-class, -.hljs-regexp, -.hljs-deletion { - color: #ffa07a; +.highlight, +pre.highlight { + background: var(--pygments-a11y-bg-color); + color: var(--pygments-a11y-dark-gray); } -/* Orange */ -.hljs-number, -.hljs-built_in, -.hljs-builtin-name, -.hljs-literal, -.hljs-type, -.hljs-params, -.hljs-meta, -.hljs-link { - color: #f5ab35; +.highlight pre, +.highlight .hll, +.highlight .w { + background: var(--pygments-a11y-bg-color); } -/* Yellow */ -.hljs-attribute { - color: #ffd700; +.highlight .c { + color: var(--pygments-a11y-light-gray); + font-style: italic; } -/* Green */ -.hljs-string, -.hljs-symbol, -.hljs-bullet, -.hljs-addition { - color: #abe338; +.highlight .err { + color: var(--pygments-a11y-dark-on-light); + background-color: var(--pygments-a11y-red); } -/* Blue */ -.hljs-title, -.hljs-section { - color: #00e0e0; +.highlight .k, +.highlight .kc, +.highlight .kd, +.highlight .kn, +.highlight .kp, +.highlight .kr, +.highlight .kt { + color: var(--pygments-a11y-purple); } -/* Purple */ -.hljs-keyword, -.hljs-selector-tag { - color: #dcc6e0; +.highlight .n, +.highlight .o, +.highlight .p, +.highlight .nf, +.highlight .nn, +.highlight .nx { + color: var(--pygments-a11y-dark-gray); } -.hljs { - display: block; - overflow-x: auto; - background: #2b2b2b; - color: #f8f8f2; - padding: 0.5em; +.highlight .cm, +.highlight .cp, +.highlight .c1, +.highlight .cs { + color: var(--pygments-a11y-light-gray); + font-style: italic; } -.hljs-emphasis { +.highlight .ge { font-style: italic; } -.hljs-strong { - font-weight: bold; -} - -@media screen and (-ms-high-contrast: active) { - .hljs-addition, - .hljs-attribute, - .hljs-built_in, - .hljs-builtin-name, - .hljs-bullet, - .hljs-comment, - .hljs-link, - .hljs-literal, - .hljs-meta, - .hljs-number, - .hljs-params, - .hljs-string, - .hljs-symbol, - .hljs-type, - .hljs-quote { - color: highlight; - } - - .hljs-keyword, - .hljs-selector-tag { - font-weight: bold; - } +.highlight .gs, +.highlight .ow { + font-weight: 700; +} + +.highlight .l, +.highlight .ld, +.highlight .s, +.highlight .sb, +.highlight .sc, +.highlight .sd, +.highlight .s2, +.highlight .se, +.highlight .sh, +.highlight .si, +.highlight .sx, +.highlight .s1 { + color: var(--pygments-a11y-green); +} + +.highlight .bp, +.highlight .nb, +.highlight .nc, +.highlight .no, +.highlight .nd, +.highlight .ni, +.highlight .ne, +.highlight .nl, +.highlight .nv, +.highlight .py, +.highlight .vc, +.highlight .vg { + color: var(--pygments-a11y-orange); /* #ca7601; */ +} + +.highlight .gd, +.highlight .nt, +.highlight .vi, +.highlight .language-json .w + .s2 { + color: var(--pygments-a11y-red); /* #e35549 */ +} + +.highlight .il, +.highlight .m, +.highlight .mf, +.highlight .mh, +.highlight .mi, +.highlight .mo, +.highlight .na { + color: var(--pygments-a11y-yellow); /* #b66a00 */ +} + +.highlight .sr, +.highlight .ss, +.highlight .language-json .kc { + color: var(--pygments-a11y-blue); /*#0083bb */ +} + +.highlight .gu { + color: var(--pygments-a11y-light-gray); /* was #75715e kind of dark yellow */ +} + +.highlight .gi { + color: var(--pygments-a11y-green); /* was #43d089 seafoam ish */ } diff --git a/_sass/snytax_highliters/a11y-light.css b/_sass/snytax_highliters/a11y-light.css index f1bf8f3..fc95d77 100644 --- a/_sass/snytax_highliters/a11y-light.css +++ b/_sass/snytax_highliters/a11y-light.css @@ -1,99 +1,136 @@ /* a11y-light theme */ /* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */ /* @author: ericwbailey */ +/* Adapted to pygments/rouge by @cycomachead */ -/* Comment */ -.hljs-comment, -.hljs-quote { - color: #696969; +:root { + --pygments-a11y-bg-color: #fefefe; + --pygments-a11y-light-on-dark: #FFF; /* Used for errors */ + --pygments-a11y-light-gray: #696969; /* comments */ + --pygments-a11y-dark-gray: #545454; + --pygments-a11y-purple: #7928a1; + --pygments-a11y-blue: #007faa; + --pygments-a11y-green: #008000; + --pygments-a11y-yellow: #aa5d00; /* attributes */ + --pygments-a11y-orange: #aa5d00; + --pygments-a11y-red: #d91e18; } -/* Red */ -.hljs-variable, -.hljs-template-variable, -.hljs-tag, -.hljs-name, -.hljs-selector-id, -.hljs-selector-class, -.hljs-regexp, -.hljs-deletion { - color: #d91e18; +.highlight, +pre.highlight { + background: var(--pygments-a11y-bg-color); + color: var(--pygments-a11y-dark-gray); } -/* Orange */ -.hljs-number, -.hljs-built_in, -.hljs-builtin-name, -.hljs-literal, -.hljs-type, -.hljs-params, -.hljs-meta, -.hljs-link { - color: #aa5d00; +.highlight pre, +.highlight .hll, +.highlight .w { + background: var(--pygments-a11y-bg-color); } -/* Yellow */ -.hljs-attribute { - color: #aa5d00; +.highlight .c { + color: var(--pygments-a11y-light-gray); + font-style: italic; } -/* Green */ -.hljs-string, -.hljs-symbol, -.hljs-bullet, -.hljs-addition { - color: #008000; +.highlight .err { + color: var(--pygments-a11y-light-on-dark); + background-color: var(--pygments-a11y-red); } -/* Blue */ -.hljs-title, -.hljs-section { - color: #007faa; +.highlight .k, +.highlight .kc, +.highlight .kd, +.highlight .kn, +.highlight .kp, +.highlight .kr, +.highlight .kt { + color: var(--pygments-a11y-purple); } -/* Purple */ -.hljs-keyword, -.hljs-selector-tag { - color: #7928a1; +.highlight .n, +.highlight .o, +.highlight .p, +.highlight .nf, +.highlight .nn, +.highlight .nx { + color: var(--pygments-a11y-dark-gray); } -.hljs { - display: block; - overflow-x: auto; - background: #fefefe; - color: #545454; - padding: 0.5em; +.highlight .cm, +.highlight .cp, +.highlight .c1, +.highlight .cs { + color: var(--pygments-a11y-light-gray); + font-style: italic; } -.hljs-emphasis { +.highlight .ge { font-style: italic; } -.hljs-strong { - font-weight: bold; -} - -@media screen and (-ms-high-contrast: active) { - .hljs-addition, - .hljs-attribute, - .hljs-built_in, - .hljs-builtin-name, - .hljs-bullet, - .hljs-comment, - .hljs-link, - .hljs-literal, - .hljs-meta, - .hljs-number, - .hljs-params, - .hljs-string, - .hljs-symbol, - .hljs-type, - .hljs-quote { - color: highlight; - } - - .hljs-keyword, - .hljs-selector-tag { - font-weight: bold; - } +.highlight .gs, +.highlight .ow { + font-weight: 700; +} + +.highlight .l, +.highlight .ld, +.highlight .s, +.highlight .sb, +.highlight .sc, +.highlight .sd, +.highlight .s2, +.highlight .se, +.highlight .sh, +.highlight .si, +.highlight .sx, +.highlight .s1 { + color: var(--pygments-a11y-green); +} + +.highlight .bp, +.highlight .nb, +.highlight .nc, +.highlight .no, +.highlight .nd, +.highlight .ni, +.highlight .ne, +.highlight .nl, +.highlight .nv, +.highlight .py, +.highlight .vc, +.highlight .vg { + color: var(--pygments-a11y-orange); /* #ca7601; */ +} + +.highlight .gd, +.highlight .nt, +.highlight .vi, +.highlight .language-json .w + .s2 { + color: var(--pygments-a11y-red); /* #e35549 */ +} + +.highlight .il, +.highlight .m, +.highlight .mf, +.highlight .mh, +.highlight .mi, +.highlight .mo, +.highlight .na { + color: var(--pygments-a11y-yellow); /* #b66a00 */ +} + +.highlight .sr, +.highlight .ss, +.highlight .language-json .kc { + color: var(--pygments-a11y-blue); /*#0083bb */ +} + +.highlight .gu { + color: var(--pygments-a11y-light-gray); /* was #75715e kind of dark yellow */ +} + +.highlight .gi { + color: var(--pygments-a11y-green); /* was #43d089 seafoam ish */ } diff --git a/_sass/snytax_highliters/hljs-a11y-dark.css b/_sass/snytax_highliters/hljs-a11y-dark.css new file mode 100644 index 0000000..b93b742 --- /dev/null +++ b/_sass/snytax_highliters/hljs-a11y-dark.css @@ -0,0 +1,99 @@ +/* a11y-dark theme */ +/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */ +/* @author: ericwbailey */ + +/* Comment */ +.hljs-comment, +.hljs-quote { + color: #d4d0ab; +} + +/* Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #ffa07a; +} + +/* Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #f5ab35; +} + +/* Yellow */ +.hljs-attribute { + color: #ffd700; +} + +/* Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #abe338; +} + +/* Blue */ +.hljs-title, +.hljs-section { + color: #00e0e0; +} + +/* Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #dcc6e0; +} + +.hljs { + display: block; + overflow-x: auto; + background: #2b2b2b; + color: #f8f8f2; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +@media screen and (-ms-high-contrast: active) { + .hljs-addition, + .hljs-attribute, + .hljs-built_in, + .hljs-builtin-name, + .hljs-bullet, + .hljs-comment, + .hljs-link, + .hljs-literal, + .hljs-meta, + .hljs-number, + .hljs-params, + .hljs-string, + .hljs-symbol, + .hljs-type, + .hljs-quote { + color: highlight; + } + + .hljs-keyword, + .hljs-selector-tag { + font-weight: bold; + } +} diff --git a/_sass/snytax_highliters/hljs-a11y-light.css b/_sass/snytax_highliters/hljs-a11y-light.css new file mode 100644 index 0000000..d9d5f03 --- /dev/null +++ b/_sass/snytax_highliters/hljs-a11y-light.css @@ -0,0 +1,99 @@ +/* a11y-light theme */ +/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */ +/* @author: ericwbailey */ + +/* Comment */ +.hljs-comment, +.hljs-quote { + color: #696969; +} + +/* Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #d91e18; +} + +/* Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #aa5d00; +} + +/* Yellow */ +.hljs-attribute { + color: #aa5d00; +} + +/* Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #008000; +} + +/* Blue */ +.hljs-title, +.hljs-section { + color: #007faa; +} + +/* Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #7928a1; +} + +/* .hljs { + display: block; + overflow-x: auto; + background: #fefefe; + color: #545454; + padding: 0.5em; +} */ + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +@media screen and (-ms-high-contrast: active) { + .hljs-addition, + .hljs-attribute, + .hljs-built_in, + .hljs-builtin-name, + .hljs-bullet, + .hljs-comment, + .hljs-link, + .hljs-literal, + .hljs-meta, + .hljs-number, + .hljs-params, + .hljs-string, + .hljs-symbol, + .hljs-type, + .hljs-quote { + color: highlight; + } + + .hljs-keyword, + .hljs-selector-tag { + font-weight: bold; + } +} diff --git a/_sass/snytax_highliters/one-dark-jekyll-light.css b/_sass/snytax_highliters/one-dark-jekyll-light.css deleted file mode 100644 index d69a534..0000000 --- a/_sass/snytax_highliters/one-dark-jekyll-light.css +++ /dev/null @@ -1,273 +0,0 @@ -// Generated with OneLightJekyll applied to Atom's One Light theme - -.highlight, -pre.highlight { - background: #f9f9f9; - color: #383942; -} - -.highlight pre { - background: #f9f9f9; -} - -.highlight .hll { - background: #f9f9f9; -} - -.highlight .c { - color: #9fa0a6; - font-style: italic; -} - -.highlight .err { - color: #fff; - background-color: #e05151; -} - -.highlight .k { - color: #a625a4; -} - -.highlight .l { - color: #50a04f; -} - -.highlight .n { - color: #383942; -} - -.highlight .o { - color: #383942; -} - -.highlight .p { - color: #383942; -} - -.highlight .cm { - color: #9fa0a6; - font-style: italic; -} - -.highlight .cp { - color: #9fa0a6; - font-style: italic; -} - -.highlight .c1 { - color: #9fa0a6; - font-style: italic; -} - -.highlight .cs { - color: #9fa0a6; - font-style: italic; -} - -.highlight .ge { - font-style: italic; -} - -.highlight .gs { - font-weight: 700; -} - -.highlight .kc { - color: #a625a4; -} - -.highlight .kd { - color: #a625a4; -} - -.highlight .kn { - color: #a625a4; -} - -.highlight .kp { - color: #a625a4; -} - -.highlight .kr { - color: #a625a4; -} - -.highlight .kt { - color: #a625a4; -} - -.highlight .ld { - color: #50a04f; -} - -.highlight .m { - color: #b66a00; -} - -.highlight .s { - color: #50a04f; -} - -.highlight .na { - color: #b66a00; -} - -.highlight .nb { - color: #ca7601; -} - -.highlight .nc { - color: #ca7601; -} - -.highlight .no { - color: #ca7601; -} - -.highlight .nd { - color: #ca7601; -} - -.highlight .ni { - color: #ca7601; -} - -.highlight .ne { - color: #ca7601; -} - -.highlight .nf { - color: #383942; -} - -.highlight .nl { - color: #ca7601; -} - -.highlight .nn { - color: #383942; -} - -.highlight .nx { - color: #383942; -} - -.highlight .py { - color: #ca7601; -} - -.highlight .nt { - color: #e35549; -} - -.highlight .nv { - color: #ca7601; -} - -.highlight .ow { - font-weight: 700; -} - -.highlight .w { - color: #f8f8f2; -} - -.highlight .mf { - color: #b66a00; -} - -.highlight .mh { - color: #b66a00; -} - -.highlight .mi { - color: #b66a00; -} - -.highlight .mo { - color: #b66a00; -} - -.highlight .sb { - color: #50a04f; -} - -.highlight .sc { - color: #50a04f; -} - -.highlight .sd { - color: #50a04f; -} - -.highlight .s2 { - color: #50a04f; -} - -.highlight .se { - color: #50a04f; -} - -.highlight .sh { - color: #50a04f; -} - -.highlight .si { - color: #50a04f; -} - -.highlight .sx { - color: #50a04f; -} - -.highlight .sr { - color: #0083bb; -} - -.highlight .s1 { - color: #50a04f; -} - -.highlight .ss { - color: #0083bb; -} - -.highlight .bp { - color: #ca7601; -} - -.highlight .vc { - color: #ca7601; -} - -.highlight .vg { - color: #ca7601; -} - -.highlight .vi { - color: #e35549; -} - -.highlight .il { - color: #b66a00; -} - -.highlight .gu { - color: #75715e; -} - -.highlight .gd { - color: #e05151; -} - -.highlight .gi { - color: #43d089; -} - -.highlight .language-json .w + .s2 { - color: #e35549; -} - -.highlight .language-json .kc { - color: #0083bb; -} From 726893b49ac8b8088214f0035fc212a1331b7787 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 23:41:43 -0700 Subject: [PATCH 20/24] upload artifacts --- .github/workflows/rspec.yml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.github/workflows/rspec.yml b/.github/workflows/rspec.yml index 13af5bf..3c663e1 100644 --- a/.github/workflows/rspec.yml +++ b/.github/workflows/rspec.yml @@ -24,3 +24,9 @@ jobs: - name: summary if: always() run: ruby spec/support/spec_summary.rb + - name: 'Upload Test Screenshots' + uses: actions/upload-artifact@v4 + with: + name: my-artifact + path: tmp/capybara/* + retention-days: 7 From a490026d4d84709485be1f0a9e3f073440ad344d Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Tue, 13 Aug 2024 23:48:40 -0700 Subject: [PATCH 21/24] better artifact upload code... --- .github/workflows/rspec.yml | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/.github/workflows/rspec.yml b/.github/workflows/rspec.yml index 3c663e1..71b7867 100644 --- a/.github/workflows/rspec.yml +++ b/.github/workflows/rspec.yml @@ -24,9 +24,11 @@ jobs: - name: summary if: always() run: ruby spec/support/spec_summary.rb - - name: 'Upload Test Screenshots' + - name: Keep screenshots from failed tests uses: actions/upload-artifact@v4 + if: failure() with: - name: my-artifact - path: tmp/capybara/* + name: screenshots + path: ${{ github.workspace }}/tmp/capybara + if-no-files-found: ignore retention-days: 7 From d5f1067d5bf0fc2edd6978b229ab74777126545e Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 14 Aug 2024 03:00:48 -0700 Subject: [PATCH 22/24] Light mode passes a11y specs --- .rspec | 2 +- _config.yml | 2 +- _includes/head_custom.html | 19 +++++++++++++++++ _sass/berkeley/berkeley.scss | 7 +++++-- _sass/color_schemes/berkeley_dark.scss | 27 ------------------------- _sass/color_schemes/berkeley_light.scss | 6 ------ _sass/just-the-class/schedule.scss | 9 +++++---- _sass/just-the-class/staffer.scss | 8 +++++++- home.md | 14 ++----------- 9 files changed, 40 insertions(+), 54 deletions(-) delete mode 100644 _sass/color_schemes/berkeley_dark.scss delete mode 100644 _sass/color_schemes/berkeley_light.scss diff --git a/.rspec b/.rspec index 08cae59..1841350 100644 --- a/.rspec +++ b/.rspec @@ -1 +1 @@ --f progress -f documentation --out tmp/rspec_output.txt -f json --out tmp/rspec_output.json -f html --out tmp/rspec_output.html +-f documentation -f documentation --out tmp/rspec_output.txt -f json --out tmp/rspec_output.json -f html --out tmp/rspec_output.html diff --git a/_config.yml b/_config.yml index 71777e9..eb89c28 100644 --- a/_config.yml +++ b/_config.yml @@ -22,7 +22,7 @@ description: A modern, highly customizable, responsive Jekyll template for cours # 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: dark +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. diff --git a/_includes/head_custom.html b/_includes/head_custom.html index 91e8cc6..2e7aafa 100644 --- a/_includes/head_custom.html +++ b/_includes/head_custom.html @@ -4,3 +4,22 @@ + + diff --git a/_sass/berkeley/berkeley.scss b/_sass/berkeley/berkeley.scss index 0f30ec1..5284780 100644 --- a/_sass/berkeley/berkeley.scss +++ b/_sass/berkeley/berkeley.scss @@ -6,7 +6,7 @@ // Override default JTD CSS for larger/more accessibile fonts. html { - @include fs-3; + font-size: 16px; } body { @@ -43,8 +43,11 @@ h1, h2, h3, h4, h5, h6, background-color: $green-300; } +.label-red:not(g) { + background-color: $red-300; +} + code { - font-size: 16px; padding: 0.2em 0.4em; border: none; } diff --git a/_sass/color_schemes/berkeley_dark.scss b/_sass/color_schemes/berkeley_dark.scss deleted file mode 100644 index 8e92874..0000000 --- a/_sass/color_schemes/berkeley_dark.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Default JTD color scheme -@import "./color_schemes/dark"; -$color-scheme: 'berkeley_dark' !default; - -// Override dark-mode variables here -$grey-dk-400: #0C0A0E !default; -$body-background-color: $grey-dk-400; -$sidebar-color: $grey-dk-400; -$search-background-color: $grey-dk-400; -$body-text-color: $white; -$body-lighter-color: darken($body-text-color, 20%); - -$link-color: #406FFE; -$hover-focus-link-color: darken($link-color, 10%); - -// TODO(template): We need to figure out a much better solution! -// This swaps the "dk" and "lt" variants from the original JTD files. -$grey-lt-000: #959396 !default; -$grey-lt-100: #5c5962 !default; -$grey-lt-200: #44434d !default; -$grey-lt-250: #302d36 !default; -$grey-lt-300: #27262b !default; - -$grey-dk-000: #f5f6fa !default; -$grey-dk-100: #eeebee !default; -$grey-dk-200: #ecebed !default; -$grey-dk-300: #e6e1e8 !default; diff --git a/_sass/color_schemes/berkeley_light.scss b/_sass/color_schemes/berkeley_light.scss deleted file mode 100644 index 7e84dcb..0000000 --- a/_sass/color_schemes/berkeley_light.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Default JTD color scheme -@import "./color_schemes/light"; -$color-scheme: 'berkeley_light' !default; - -// Minimum lightness on white. -$body-lighter-color: $grey-dk-100; diff --git a/_sass/just-the-class/schedule.scss b/_sass/just-the-class/schedule.scss index f059310..da5ce21 100644 --- a/_sass/just-the-class/schedule.scss +++ b/_sass/just-the-class/schedule.scss @@ -22,7 +22,7 @@ .schedule-time { @extend .fs-2; - color: $grey-dk-000; + color: $grey-dk-200; height: 40px; margin: 0; padding: $sp-2; @@ -93,15 +93,16 @@ } &.lecture { - background-color: $grey-dk-000; + background-color: $grey-lt-300; + color: $grey-dk-300; } &.section { - background-color: $purple-000; + background-color: darken($purple-000, 15%); } &.office-hours { - background-color: $blue-000; + background-color: darken($green-200, 10%); } } } diff --git a/_sass/just-the-class/staffer.scss b/_sass/just-the-class/staffer.scss index 28bc0cb..0e8f959 100644 --- a/_sass/just-the-class/staffer.scss +++ b/_sass/just-the-class/staffer.scss @@ -12,6 +12,12 @@ p, .staffer-name { margin: $sp-1 !important; + + .anchor-heading { + width: 1.8rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + } } .staffer-badge { @@ -22,6 +28,6 @@ } .staffer-meta { - @extend .text-grey-dk-000; + @extend .text-grey-dk-300; } } diff --git a/home.md b/home.md index 76d29d2..84ab9a7 100644 --- a/home.md +++ b/home.md @@ -11,19 +11,9 @@ seo: # UC Berkeley Class Site Template

- +

- + 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: From 687e96e08d6f4f475e3890bd03e0cc95c8908c12 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 14 Aug 2024 03:03:38 -0700 Subject: [PATCH 23/24] Delint, cleanup code --- _plugins/config_validator.rb | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/_plugins/config_validator.rb b/_plugins/config_validator.rb index 0ad2ff7..73b3723 100644 --- a/_plugins/config_validator.rb +++ b/_plugins/config_validator.rb @@ -56,9 +56,9 @@ def validate KEY_VALIDATIONS.each do |key, validator| if validator == :inclusion_validator - send(validator, key, config[key.to_s], self.class.const_get("VALID_#{key.upcase}")) - else - send(validator, config[key.to_s]) if @config.key?(key.to_s) + send(validator, key, config[key.to_s], ConfigValidator.const_get("VALID_#{key.upcase}")) + elsif @config.key?(key.to_s) + send(validator, config[key.to_s]) end end @@ -92,14 +92,6 @@ def validate_semester_format(baseurl) errors << "`baseurl` must be a valid semester (faXX, spXX, suXX or wiXX), not #{baseurl}" end - def validate_department(dept) - errors << "`course_department` must be one of #{VALID_DEPTS} (not '#{dept}')" unless VALID_DEPTS.include?(dept) - end - - def validate_color_theme(color_theme) - errors << "`course_department` must be one of #{VALID_DEPTS} (not '#{dept}')" unless VALID_DEPTS.include?(dept) - end - def inclusion_validator(key, value, allowed) errors << "`#{key}` must be one of #{allowed} (not '#{value}')" unless allowed.include?(value) end From 2b10b6b0ee5db83b3b9fad65c92707898778f3a7 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 14 Aug 2024 03:10:07 -0700 Subject: [PATCH 24/24] small validator refactoring --- _plugins/config_validator.rb | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/_plugins/config_validator.rb b/_plugins/config_validator.rb index 73b3723..d49aa59 100644 --- a/_plugins/config_validator.rb +++ b/_plugins/config_validator.rb @@ -5,14 +5,17 @@ # 1) Ensures required attributes are present in the config file. # 2) Ensures the baseurl is a consistent format based on the semester # 3) Uses a `course_department` config to implement some shared styling/language. -# Future config validations might make sense, like footer/a11y/etc. +# 4) Ensures the `color_scheme` is valid. +# Future config validations might make sense, like footer/a11y/etc. configuration, # Implement additional validations by registering an entry in `KEY_VALIDATIONS` # This is a key_name => function_name map. # function_name should be defined in the ConfigValidator class, and is called with -# the *value* of the config. +# the key, value pair in the config. # Note that Jekyll parses the YAML file such that the config keys are *strings* not symbols. +# See the inclusion_validator to add simple allow-list style validations + # A simple class for nicer error message formatting. class ConfigValidationError < StandardError attr_reader :errors @@ -55,11 +58,7 @@ def validate validate_keys! KEY_VALIDATIONS.each do |key, validator| - if validator == :inclusion_validator - send(validator, key, config[key.to_s], ConfigValidator.const_get("VALID_#{key.upcase}")) - elsif @config.key?(key.to_s) - send(validator, config[key.to_s]) - end + send(validator, key, config[key.to_s]) if @config.key?(key.to_s) end raise ConfigValidationError, errors if errors.length.positive? @@ -76,12 +75,12 @@ def validate_keys! private - def validate_clean_url(url) + def validate_clean_url(_key, url) errors << '`url` should not end with a `/`' if url.end_with?('/') errors << '`url` should contain a protocol' unless url.match?(%r{https?://}) end - def validate_semester_format(baseurl) + def validate_semester_format(_key, baseurl) # This is just for consistency of URL presentation. errors << '`baseurl` must start with a `/`.' unless baseurl.match?(%r{^/}) # skip, just for the template. @@ -92,7 +91,8 @@ def validate_semester_format(baseurl) errors << "`baseurl` must be a valid semester (faXX, spXX, suXX or wiXX), not #{baseurl}" end - def inclusion_validator(key, value, allowed) + def inclusion_validator(key, value) + allowed = self.class.const_get("VALID_#{key.upcase}") errors << "`#{key}` must be one of #{allowed} (not '#{value}')" unless allowed.include?(value) end end