upgrade uswds and jekyll

Gemfile

@@ -1,7 +1,7 @@
 source "https://rubygems.org"
 ruby '~> 3.1.3'
 
-gem "jekyll", "4.2.2"
+gem "jekyll", "4.3.3"
 gem "execjs", "2.7.0" # https://github.com/rails/execjs/issues/99
 gem "autoprefixer-rails"
 gem 'eventmachine', '1.2.7', git: 'https://github.com/eventmachine/eventmachine.git', tag: 'v1.2.7'
@@ -24,3 +24,5 @@ gem "wdm", "~> 0.1.0" if Gem.win_platform?
 gem "html-proofer", "~> 5"
 
 gem "webrick", "~> 1.8"
+
+gem 'jekyll-sass-converter', '~> 3.0'

Gemfile.lock

@@ -9,7 +9,7 @@ GEM
   remote: https://rubygems.org/
   specs:
     Ascii85 (1.1.0)
-    addressable (2.8.5)
+    addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     afm (0.2.2)
     async (2.6.5)
@@ -20,7 +20,7 @@ GEM
     autoprefixer-rails (10.4.15.0)
       execjs (~> 2)
     colorator (1.1.0)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     console (1.23.2)
       fiber-annotation
       fiber-local
@@ -35,6 +35,12 @@ GEM
     fiber-annotation (0.2.0)
     fiber-local (1.0.0)
     forwardable-extended (2.6.0)
+    google-protobuf (4.26.1-x64-mingw-ucrt)
+      rake (>= 13)
+    google-protobuf (4.26.1-x86_64-darwin)
+      rake (>= 13)
+    google-protobuf (4.26.1-x86_64-linux)
+      rake (>= 13)
     hashery (2.1.2)
     html-proofer (5.0.8)
       addressable (~> 2.3)
@@ -46,32 +52,33 @@ GEM
       yell (~> 2.0)
       zeitwerk (~> 2.5)
     http_parser.rb (0.8.0)
-    i18n (1.14.1)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     io-event (1.3.3)
-    jekyll (4.2.2)
+    jekyll (4.3.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
       i18n (~> 1.0)
-      jekyll-sass-converter (~> 2.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 2.3)
+      kramdown (~> 2.3, >= 2.3.1)
       kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.4.0)
+      mercenary (>= 0.3.6, < 0.5)
       pathutil (~> 0.9)
-      rouge (~> 3.0)
+      rouge (>= 3.0, < 5.0)
       safe_yaml (~> 1.0)
-      terminal-table (~> 2.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
     jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-paginate-v2 (3.0.0)
       jekyll (>= 3.0, < 5.0)
     jekyll-redirect-from (0.16.0)
       jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (2.2.0)
-      sassc (> 2.0.1, < 3.0)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
     jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
     jekyll-sitemap (1.4.0)
@@ -83,12 +90,14 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.4)
-    listen (3.8.0)
+    listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
     nokogiri (1.15.4-x64-mingw-ucrt)
       racc (~> 1.4)
+    nokogiri (1.15.4-x86_64-darwin)
+      racc (~> 1.4)
     nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
     pathutil (0.16.2)
@@ -99,20 +108,25 @@ GEM
       hashery (~> 2.0)
       ruby-rc4
       ttfunk
-    public_suffix (5.0.3)
+    public_suffix (5.0.5)
     racc (1.7.2)
     rainbow (3.1.1)
+    rake (13.2.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.6)
-    rouge (3.30.0)
+    rouge (4.2.1)
     ruby-rc4 (0.1.5)
     safe_yaml (1.0.5)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    terminal-table (2.0.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
+    sass-embedded (1.75.0-x64-mingw-ucrt)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.75.0-x86_64-darwin)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.75.0-x86_64-linux-gnu)
+      google-protobuf (>= 3.25, < 5.0)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
     timers (4.3.5)
     ttfunk (1.7.0)
     typhoeus (1.4.0)
@@ -121,29 +135,29 @@ GEM
       concurrent-ruby (~> 1.0)
     tzinfo-data (1.2023.3)
       tzinfo (>= 1.0.0)
-    unicode-display_width (1.8.0)
-    wdm (0.1.1)
+    unicode-display_width (2.5.0)
     webrick (1.8.1)
     yell (2.2.2)
     zeitwerk (2.6.12)
 
 PLATFORMS
   x64-mingw-ucrt
+  x86_64-darwin-20
   x86_64-linux
 
 DEPENDENCIES
   autoprefixer-rails
   eventmachine (= 1.2.7)!
   execjs (= 2.7.0)
   html-proofer (~> 5)
-  jekyll (= 4.2.2)
+  jekyll (= 4.3.3)
   jekyll-feed (~> 0.15)
   jekyll-paginate-v2 (= 3.0.0)
   jekyll-redirect-from
+  jekyll-sass-converter (~> 3.0)
   jekyll-seo-tag
   jekyll-sitemap
   tzinfo-data
-  wdm (~> 0.1.0)
   webrick (~> 1.8)
 
 RUBY VERSION

_config.yml

@@ -283,7 +283,7 @@ autoprefixer:
 sass:
   source_dir: _sass
   load_paths:
-    - node_modules/uswds/dist
+    - node_modules/@uswds/uswds/packages
   sourcemap: development
   quiet_deps: true
   style: compressed

_plugins/asset-helper.rb

@@ -3,9 +3,9 @@
 module AssetHelper
     def self.process(site, payload)
         return if @processed
-        FileUtils.cp_r('node_modules/uswds/dist/js/', 'assets/', verbose: true)
-        FileUtils.cp_r('node_modules/uswds/dist/img/', 'assets/', verbose: true)
-        FileUtils.cp_r('node_modules/uswds/dist/fonts/', 'assets/', verbose: true)
+        FileUtils.cp_r('node_modules/@uswds/uswds/dist/js/', 'assets/', verbose: true)
+        FileUtils.cp_r('node_modules/@uswds/uswds/dist/img/', 'assets/', verbose: true)
+        FileUtils.cp_r('node_modules/@uswds/uswds/dist/fonts/', 'assets/', verbose: true)
         @processed = true
     end
 end

_plugins/jekyll_copy_uswds.rb

@@ -1,7 +1,7 @@
 module Jekyll
   class JekyllCopyUswds < Generator
     def generate(site)
-      source = "node_modules/uswds/dist"
+      source = "node_modules/@uswds/uswds/dist"
       Dir.glob(File.join(source, "{fonts,img}", "**", "*")) do |filename|
         next if File.directory?(filename)
         dir, name = File.split(filename.delete_prefix(source))

_sass/_hero.scss

@@ -1,5 +1,5 @@
 // Override USWDS mixin to use jekyll-assets asset_url()
 
-.usa-hero {
-  background-image: $theme-hero-image !important;
-}
+// .usa-hero {
+//   background-image: $theme-hero-image !important;
+// }

_sass/theme/_uswds-theme.scss

@@ -0,0 +1,14 @@
+//custom settings
+$theme-hero-image: asset_url("img/hero.png");
+$theme-font-path: "../fonts";
+$theme-image-path: "../uswds/img";
+$theme-font-role-heading: "sans";
+$height-settings: (
+ output: true,
+ responsive: true,
+ active: false,
+ focus: false,
+ hover: false,
+ visited: false,
+);
+$theme-show-notifications: false;

assets/css/styles.scss

@@ -10,29 +10,36 @@
 ========================================
 */
 // -------------------------------------
-// Import individual theme settings
-@import "theme/uswds-theme-general";
-@import "theme/uswds-theme-typography";
-@import "theme/uswds-theme-spacing";
-@import "theme/uswds-theme-color";
-@import "theme/uswds-theme-utilities";
-@import "theme/uswds-theme-components";
 
-// Set correct paths for use with asset pipeline
-$theme-font-path: "../fonts";
-$theme-image-path: "../uswds/img";
-$theme-show-notifications: false;
+@use "uswds" with (
+  $theme-font-path: "../fonts",
+  $theme-image-path: "../uswds/img",
+  $theme-font-role-heading: "sans",
+  $height-settings: (
+    output: true,
+    responsive: true,
+    active: false,
+    focus: false,
+    hover: false,
+    visited: false,
+  ),
+  $theme-show-notifications: false,
+);
+
+@forward "../_sass/menu-collapsible.scss";
+@forward "../_sass/add-background-svg.scss";
+@forward "../_sass/font-face.scss";
+@forward "../_sass/hero.scss";
+@forward "../_sass/carousel.scss";
+@forward "../_sass/resources.scss";
+
+@forward "theme/uswds-theme-general";
+@forward "theme/uswds-theme-typography";
+@forward "theme/uswds-theme-spacing";
+@forward "theme/uswds-theme-color";
+@forward "theme/uswds-theme-utilities";
+@forward "theme/uswds-theme-components";
 
-
-// -------------------------------------
-// Import individual USWDS packages...
-@import "scss/packages/required";
-@import "scss/packages/global";
-
-@import "scss/packages/uswds-components";
-@import "scss/packages/uswds-utilities";
-
-@import "../_sass/resources.scss";
 /*
 ----------------------------------------
 USWDS THEME CUSTOM STYLES
@@ -48,12 +55,6 @@ i.e.
 ----------------------------------------
 */
 
-@import "../_sass/menu-collapsible.scss";
-@import "../_sass/carousel.scss";
-@import "../_sass/add-background-svg.scss";
-@import "../_sass/all.scss";
-@import "../_sass/font-face.scss";
-@import "../_sass/hero.scss";
 
 h2, h3, h4 {
   font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif !important;