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

app/assets/config/manifest.js

@@ -1,6 +1,5 @@
 //= link_tree ../images
 //= link application.js
-//= link application.css
-//= link application_parker.css
 //= link openseadragon-assets.js
 //= link spotlight/manifest.js
+//= 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,15 +1,18 @@
-@import "blacklight_range_limit/blacklight_range_limit";
+@import "modules/blacklight-range-limit";
 @import "bootstrap-slider/dist/css/bootstrap-slider";
-@import "bootstrap-tagsinput";
 @import "variables"; // bootstrap variable overrides
 @import "local_variables"; // custom local variables that use bootstrap variables
-@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-range-limit.scss

@@ -0,0 +1,61 @@
+form.range_limit {
+  /* leave room for buttons not to collide on line wrap */
+  line-height: 3;
+}
+
+.range_limit .range-limit-input-group {
+  max-width: 350px;
+  width: 100% !important;
+}
+
+.range_limit input.range_begin,
+.range_limit input.range_end {
+  display: inline-block;
+  width: 4.5em;
+}
+
+.limit_content .subsection {
+  margin-top: 0.5em;
+}
+
+.hover_legend {
+  padding: 0.25em;
+}
+
+.slider_js .slider-selection {
+  /* color from flot selection */
+  background: #e8cfac;
+}
+
+.slider_js .slider-horizontal {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.chart_js .flot-x-axis {
+  font-size: 14px;
+}
+
+.modal-body .view_larger {
+  display: none;
+}
+
+/* Prevent an unstyled flash of content for values we'll replace with a chart */
+.js .distribution .facet-values {
+  display: none;
+}
+
+.modal-body .range_limit {
+  justify-content: center;
+}
+
+.view_larger {
+  display: block;
+  text-align: center;
+}
+
+.range_limit .chart_js {
+  min-height: 80px;
+  margin-left: -12px;
+  margin-right: -14px;
+}

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

@@ -6,4 +6,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"
+  ]
 }