Install cssbundling-rails

.gitignore

@@ -33,3 +33,6 @@ config/environments/*.local.yml
 
 /node_modules
 /public/assets
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -11,8 +11,6 @@ gem 'rails', '~> 7.2'
 # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
 gem 'sprockets-rails'
 
-# Use SCSS for stylesheets
-gem 'sassc-rails'
 # Use Puma as the app server
 gem 'puma', '~> 6.0'
 # See https://github.com/sstephenson/execjs#readme for more supported runtimes
@@ -136,3 +134,5 @@ gem 'redis', '~> 5.0'
 gem 'recaptcha', '~> 5.17.1'
 
 gem 'rack-attack'
+
+gem 'cssbundling-rails', '~> 1.4'

Gemfile.lock

@@ -239,6 +239,8 @@ GEM
       rexml
     csl-styles (2.0.1)
       csl (~> 2.0)
+    cssbundling-rails (1.4.1)
+      railties (>= 6.0.0)
     csv (3.3.0)
     database_cleaner (2.1.0)
       database_cleaner-active_record (>= 2, < 3)
@@ -739,14 +741,6 @@ GEM
       ffi (~> 1.12)
       logger
     rubyzip (2.3.2)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     scrub_rb (1.0.1)
     securerandom (0.4.0)
     selenium-webdriver (4.27.0)
@@ -826,7 +820,6 @@ GEM
       diffy (~> 3.0)
       nokogiri (>= 1.3.2)
     thor (1.3.2)
-    tilt (2.4.0)
     timeout (0.4.2)
     tophat (2.3.1)
       actionpack (>= 3.0.0)
@@ -921,6 +914,7 @@ DEPENDENCIES
   citeproc-ruby
   config
   csl-styles
+  cssbundling-rails (~> 1.4)
   database_cleaner
   debug
   devise
@@ -964,7 +958,6 @@ DEPENDENCIES
   rubocop-rspec
   rubocop-rspec_rails
   ruby-oembed
-  sassc-rails
   selenium-webdriver (!= 3.13.0)
   sidekiq (~> 7.0)
   sidekiq-pro (~> 7.0)!

Procfile.dev

@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+css: yarn watch:css

README.md

@@ -37,8 +37,9 @@ $ bin/rake db:setup
 
 You can spin up the Rails server, solr_wrapper, and populate the Solr index using this command:
 ```console
-$ REMOTE_USER="[email protected]" bin/rails server
+$ REMOTE_USER="[email protected]" bin/dev
 ```
+
 When prompted to create an admin user, the email should match the email provided in  `REMOTE_USER`. This will allow you to bypass authentication.
 
 ## Testing

app/assets/config/manifest.js

@@ -1,6 +1,6 @@
 //= link_tree ../images
 //= link application.js
-//= link application.css
 //= link openseadragon-assets.js
 //= link spotlight/manifest.js
 //= link component_library_overrides.css
+//= link_tree ../builds

app/assets/stylesheets/application.bootstrap.scss

@@ -0,0 +1,3 @@
+@import "bootstrap/scss/bootstrap";
+@import "bootstrap-icons/font/bootstrap-icons";
+@import "base";

app/assets/stylesheets/base.scss

@@ -1,13 +1,16 @@
 @import "bootstrap-slider/dist/css/bootstrap-slider";
-@import "bootstrap-tagsinput";
 @import "variables"; // bootstrap variable overrides
-@import "blacklight_heatmaps/default";
+@import "modules/blacklight_heatmaps";
 @import "bootstrap/scss/bootstrap";
-@import "sir-trevor/main";
-@import "openseadragon";
-@import "blacklight";
-@import "blacklight_gallery";
-@import "spotlight";
+@import "modules/openseadragon";
+@import "blacklight-frontend/app/assets/stylesheets/blacklight/blacklight";
+@import "blacklight-gallery/app/assets/stylesheets/blacklight_gallery/gallery";
+@import "blacklight-gallery/app/assets/stylesheets/blacklight_gallery/masonry";
+@import "blacklight-gallery/app/assets/stylesheets/blacklight_gallery/slideshow";
+@import "blacklight-gallery/app/assets/stylesheets/blacklight_gallery/osd_viewer";
+@import "spotlight-frontend/app/assets/stylesheets/spotlight/spotlight";
+@import "spotlight-frontend/vendor/assets/stylesheets/bootstrap-tagsinput";
+@import "spotlight-frontend/vendor/assets/stylesheets/sir-trevor/main";
 @import "sul_theme";
 @import "viewers";
 @import "modules/accessibility";

app/assets/stylesheets/modules/blacklight_heatmaps_overrides.scss → app/assets/stylesheets/modules/blacklight_heatmaps.scss

@@ -1,6 +1,20 @@
+@import "leaflet/dist/leaflet";
+@import "leaflet-sidebar/src/L.Control.Sidebar";
+
+.blacklight-heatmaps-index-map {
+  height: 500px;
+}
+
+.view-icon-heatmaps {
+  &:before {
+    content: "\e135";
+  }
+}
+
 .blacklight-heatmaps-show-map {
   margin-bottom: $spacer;
   width: 100%;
+  height: 500px;
 
   @media (min-width: breakpoint-min("sm")) {
     height: 250px;

app/assets/stylesheets/modules/full_text_highlight.scss

@@ -1,6 +1,6 @@
 dt.blacklight-full_text_tesimv,
 dt.prepared-search-container {
-  color: $gray-dark;
+  color: var(--bs-gray-800);
   cursor: pointer;
   display: inline-block;
   text-align: initial;

app/assets/stylesheets/modules/openseadragon.scss

@@ -0,0 +1,4 @@
+.openseadragon-viewer {
+  display: block;
+  min-height: 500px;
+}

app/assets/stylesheets/sul_theme.scss

@@ -5,4 +5,3 @@
 @import "modules/bootstrap_overrides";
 @import "modules/blacklight_overrides";
 @import "modules/spotlight_overrides";
-@import "modules/blacklight_heatmaps_overrides";

bin/dev

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev --env /dev/null "$@"

config/initializers/assets.rb

@@ -5,8 +5,10 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
+Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
 # Add Yarn node_modules folder to the asset load path.
 Rails.application.config.assets.paths << Rails.root.join('node_modules')
+Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets

package.json

@@ -1,6 +1,27 @@
 {
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "autoprefixer": "^10.4.20",
+    "blacklight-frontend": "^8.7.0",
+    "blacklight-gallery": "^4.6.3",
     "bootstrap": "^5.3.3",
-    "bootstrap-slider": "^11.0.2"
-  }
+    "bootstrap-icons": "^1.11.3",
+    "bootstrap-slider": "^11.0.2",
+    "leaflet": "^1.9.4",
+    "leaflet-sidebar": "^0.2.4",
+    "nodemon": "^3.1.7",
+    "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
+    "sass": "^1.82.0",
+    "spotlight-frontend": "^4.5.0"
+  },
+  "scripts": {
+    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
+    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
+    "build:css": "yarn build:css:compile && yarn build:css:prefix",
+    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }