Remove webpacker and cleanup unusued CSS/JS.

Setup application with latest asset pipeline if we decide to use asset pipeline again

.github/workflows/ci.yml

@@ -48,7 +48,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Get yarn cache
         id: yarn-cache

.gitignore

@@ -40,9 +40,7 @@
 # Ignore for Build
 /vendor/bundle
 
-# Webpacker stuff
-/public/packs
-/public/packs-test
+# Javascript/CSS stuff
 /node_modules
 /yarn-error.log
 yarn-debug.log*

.tool-versions

@@ -1,3 +1,3 @@
 ruby 3.1.4
-nodejs 16.15.1
+nodejs 18.15.0
 yarn 1.22.19

Gemfile

@@ -14,10 +14,14 @@ gem "puma", "~> 6.4"
 # Use Uglifier as compressor for JavaScript assets
 gem "uglifier", ">= 1.3.0"
 
-gem "rollbar"
+# Assets
+gem "cssbundling-rails"
+gem "jsbundling-rails"
+gem "sprockets-rails"
+gem "turbo-rails"
+gem "stimulus-rails"
 
-# See https://github.com/rails/execjs#readme for more supported runtimes
-gem "execjs"
+gem "rollbar"
 
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem "jbuilder", "~> 2.12"
@@ -31,8 +35,6 @@ gem "htmlentities"
 # Reduces boot times through caching; required in config/boot.rb
 gem "bootsnap", ">= 1.4.2", require: false
 
-gem "webpacker", "~> 5.4"
-
 gem "rdoc", ">= 6.6.3.1"
 
 group :development, :test do

Gemfile.lock

@@ -120,6 +120,8 @@ GEM
     concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
     crass (1.0.6)
+    cssbundling-rails (1.4.0)
+      railties (>= 6.0.0)
     date (3.3.4)
     drb (2.2.1)
     erubi (1.12.0)
@@ -158,6 +160,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jsbundling-rails (1.3.0)
+      railties (>= 6.0.0)
     json (2.7.2)
     kramdown (2.4.0)
       rexml
@@ -219,8 +223,6 @@ GEM
       nio4r (~> 2.0)
     racc (1.8.0)
     rack (3.1.5)
-    rack-proxy (0.7.6)
-      rack
     rack-session (2.0.0)
       rack (>= 3.0.0)
     rack-test (2.1.0)
@@ -318,7 +320,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     spring (4.2.1)
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
@@ -339,12 +340,18 @@ GEM
     standard-performance (1.4.0)
       lint_roller (~> 1.1)
       rubocop-performance (~> 1.21.0)
+    stimulus-rails (1.3.3)
+      railties (>= 6.0.0)
     stringio (3.1.0)
     strscan (3.1.0)
     temple (0.10.3)
     thor (1.3.1)
     tilt (2.3.0)
     timeout (0.4.1)
+    turbo-rails (2.0.6)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     uglifier (4.2.0)
@@ -355,11 +362,6 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket (1.2.11)
     websocket-driver (0.7.6)
@@ -382,10 +384,11 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   comfortable_mexican_sofa!
-  execjs
+  cssbundling-rails
   htmlentities
   image_processing (~> 1.13)
   jbuilder (~> 2.12)
+  jsbundling-rails
   listen (>= 3.0.5, < 3.10)
   mysql2 (~> 0.5.6)
   puma (~> 6.4)
@@ -399,11 +402,13 @@ DEPENDENCIES
   rubocop-rails
   selenium-webdriver
   spring (>= 3.0)
+  sprockets-rails
   standard (>= 1.35.1)
+  stimulus-rails
+  turbo-rails
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
-  webpacker (~> 5.4)
 
 RUBY VERSION
    ruby 3.1.4p223

Procfile.dev

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

README.md

@@ -12,7 +12,8 @@ This is the CMS for the University of Alberta Libraries website. It uses Comfy M
 + Rails 7.0.x
 + MariaDB 5.5
 + Docker and docker-compose
-+ yarn and nodejs 16+
++ yarn 
++ nodejs v18+
 
 ## Requirements
 
@@ -24,10 +25,8 @@ Pagination is handled by either Kaminari or WillPaginate. Make sure you have one
 
 1. `git clone [email protected]:ualbertalib/library-cms.git`
 2. `cd library-cms`
-3. `bundle install && yarn install`
-4. `docker-compose up -d`
-5. `bundle exec rails db:setup`
-6. `bundle exec rails server`
+3. `bin/setup`
+6. `bin/dev`
 7. visit [http://localhost:3000](http://localhost:3000) and you will see the library homepage.
 8. If you need to visit the admin section ([http://localhost:3000/admin](http://localhost:3000/admin)) - You'll be prompted to enter username and password (use the ones in your `config/secrets.yml`, which by default are 'admin' and 'mysecretpassword')
 

app/assets/config/manifest.js

@@ -0,0 +1,2 @@
+//= link_tree ../images
+//= link_tree ../builds

app/assets/stylesheets/application.bootstrap.scss

@@ -0,0 +1,3 @@
+// NOTE: Currently all of our CSS comes from Ualberta's main website or external CDN's and this is not actually being used.
+@import 'bootstrap/scss/bootstrap';
+@import 'bootstrap-icons/font/bootstrap-icons';

app/javascript/application.js

@@ -0,0 +1,4 @@
+// NOTE: Currently all of our Javascript comes from Ualberta's main website or external CDN's and this is not actually being used.
+import "@hotwired/turbo-rails"
+import "./controllers"
+import * as bootstrap from "bootstrap"

app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello World!"
+  }
+}

app/javascript/controllers/index.js

@@ -0,0 +1,8 @@
+// This file is auto-generated by ./bin/rails stimulus:manifest:update
+// Run that command whenever you add a new controller or create them with
+// ./bin/rails generate stimulus controllerName
+
+import { application } from "./application"
+
+import HelloController from "./hello_controller"
+application.register("hello", HelloController)

app/views/layouts/application.html.erb

@@ -3,7 +3,7 @@
     <meta charset="utf-8">
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta content="width=device-width, initial-scale=1" name="viewport">
-    <title> 
+    <title>
       <% if content_for(:title) %>
         <%= yield(:title) %>
       <% elsif @cms_page %>
@@ -30,6 +30,10 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     <!-- End Google Tag Manager -->
     <%= stylesheet_link_tag comfy_cms_render_css_path(@cms_site.id, @cms_layout.identifier) %>
     <%= javascript_include_tag comfy_cms_render_js_path(@cms_site.id, @cms_layout.identifier) %>
+
+    <%# Currently CSS/JS is coming from Ualberta's main website or external CDN's. To use the asset pipeline, uncomment the next two lines of code %>
+    <%#= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%#= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
   </head>
   <body>
    <!-- Google Tag Manager (noscript) -->
@@ -47,10 +51,10 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        		<a aria-label="University of Alberta" class="navbar-brand en-logo" href="https://www.ualberta.ca/index.html"></a>
         		<div class="site-title">
             	<a href="/">Library</a>
-           	</div>  
+           	</div>
             <div class="nav-right-buttons language-width">
                <div class="language-selector notranslate">
-               <a id="dark-mode-toggle" data-toggle-second="tooltip" data-bs-placement="left" title="dark mode" tabindex="0" aria-label="dark mode" data-original-title="Dark/Light Mode" type="button"><span aria-hidden="true" class="fa-solid fa-moon" id="mode"></span></a> 
+               <a id="dark-mode-toggle" data-toggle-second="tooltip" data-bs-placement="left" title="dark mode" tabindex="0" aria-label="dark mode" data-original-title="Dark/Light Mode" type="button"><span aria-hidden="true" class="fa-solid fa-moon" id="mode"></span></a>
     <span class="d-block d-lg-none"><a aria-label="Language Selector" class="btn nav-language-btn  language-toggle notranslate" data-language="fr-CA" href="{{ cms:text translated-url }}" type="button">FR</a></span>
 <span class="d-none d-lg-block"><a aria-label="Language Selector" class="btn nav-language-btn d-none d-lg-block language-toggle notranslate" data-language="fr-CA" href="{{ cms:text translated-url }}" type="button">Français</a></span>
 
@@ -72,7 +76,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                                                   <li class="nav-item">
                                                              <a class="nav-link standard-nav toggle-link d-none d-lg-block nav-button" href="/services" role="button">Library Services</a>
                                                         <a class="nav-link d-block d-lg-none" href="/services">Library Services</a>
-                                               
+
                                                     </li>
                                                     <li class="nav-item">
                                                         <a class="nav-link d-block d-lg-none" href="/subject-guides">Subject Guides</a>
@@ -104,7 +108,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
         </header>
         <main class="main-content container-fluid">
             <a name="main"></a>
-         
+
 	  <%= yield %>
       </main>
  <div id="libchat_baadd67c0b9382719dabca82069083e2e6b6d873103a32cc235ec09ad41f22a5"></div>
@@ -138,7 +142,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                             <a href="/about/employment">Careers + Employment</a>
                         </li>
                       <li>  <a href="/harmful-language-statement">Harmful Language in Records + Descriptions</a></li>
-                 
+
                     </ul>
                 </div>
                 <div class="link-group">
@@ -162,15 +166,15 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                         <li>
                             <a href="/ask-us"> Ask Us</a>
                         </li>
-                      
+
                     </ul>
                 </div>
                 <div class="link-group">
                     <div class="link-group-header">Tools + Apps</div>
                     <ul>
                          <li>
                             <a href="/my-account">My Account</a>
-                        </li>  
+                        </li>
                       <li>
                             <a href="https://www.beartracks.ualberta.ca/">Bear Tracks</a>
                         </li>
@@ -186,7 +190,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                        <li>
                             <a href="https://www.library.ualberta.ca/staff">Library Staff Directory</a>
                         </li>
-                     
+
                        <li>
                             <a href="https://www.ualberta.ca/onecard/index.html">ONEcard</a>
                         </li>
@@ -213,16 +217,16 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                        <li>
                             <a href="https://www.ualberta.ca/faculty-and-staff/copyright/index.html">Copyright Office</a>
                         </li>
-                     
-                   
+
+
                     </ul>
                 </div>
-             
+
             </div>
-                   
+
             <div class="final">
                 <div class="social-links">
-            
+
                     <a href="https://twitter.com/uofalibrary" title="UAlberta Twitter">
                         <i aria-hidden="true" class="fab fa-x-twitter"></i>
                     </a>
@@ -232,7 +236,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                     <a href="https://www.youtube.com/channel/UCtrypim7fRY5dOOa1G9FW5Q" title="UAlberta YouTube">
                         <i aria-hidden="true" class="fab fa-youtube"></i>
                     </a>
-                 
+
                 </div>
                 <div class="logo en-logo">
                     <a aria-label="University of Alberta" href="https://www.ualberta.ca/index.html"></a>

app/views/shared/_footer.html.erb

@@ -13,10 +13,10 @@
           <li><a href="/about-us/people" data-no-turbolink="true">Our People</a></li>
           <li><a href="/about-us/collections" data-no-turbolink="true">Our Collection</a></li>
           <li><a href="/support" data-no-turbolink="true">Support the Library</a></li>
-          <li><a href="http://www.copyright.ualberta.ca" data-no-turbolink="true">Copyright</a></li> 
+          <li><a href="http://www.copyright.ualberta.ca" data-no-turbolink="true">Copyright</a></li>
         </ul>
-          
-         <p class="copyright hidden-xs"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><%= image_pack_tag "cc.png", :class => "cc", :alt => "Copyright Statement" %></a>
+
+         <p class="copyright hidden-xs"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><%= image_tag "cc.png", :class => "cc", :alt => "Copyright Statement" %></a>
         This work is subject to a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license</a> -- For exceptions, see the <a href="/about-us/policies/re-use" data-no-turbolink="true">Library Re-use and Attribution Statement.</a>  <a href="/about-us/policies/privacy-policy" data-no-turbolink="true">Web Site Privacy Policy</a></p>
       <p>
           <a href="/" data-no-turbolink="true">University of Alberta Library</a> - <a href="http://www.ualberta.ca">University of Alberta</a>, Edmonton, AB, Canada T6G 2R3 - We are located on Treaty 6 / Métis Territory.<br/></p>

app/views/shared/_footer_french.html.erb

@@ -13,10 +13,10 @@
           <li><a href="/about-us/people" data-no-turbolink="true">Personnel</a></li>
           <li><a href="/about-us/collections"  data-no-turbolink="true">Nos collections</a></li>
           <li><a href="/support" data-no-turbolink="true">Soutenir la bibliothèque</a></li>
-          <li><a href="http://www.copyright.ualberta.ca" data-no-turbolink="true">Droit d'auteur</a></li> 
+          <li><a href="http://www.copyright.ualberta.ca" data-no-turbolink="true">Droit d'auteur</a></li>
         </ul>
-          
-         <p class="copyright"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><%= image_pack_tag "cc.png", :class => "cc", :alt => "Copyright Statement" %></a>
+
+         <p class="copyright"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><%= image_tag "cc.png", :class => "cc", :alt => "Copyright Statement" %></a>
         This work is subject to a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license</a> -- For exceptions, see the <a href="/about-us/policies/re-use">Library Re-use and Attribution Statement.</a> <a href="/about-us/policies/privacy-policy" data-no-turbolink="true">Web Site Privacy Policy</a></p>
       <p>
           <a href="/" data-no-turbolink="true">University of Alberta Library</a> - <a href="http://www.ualberta.ca">University of Alberta</a>, Edmonton, AB, Canada T6G 2R3 - Nous sommes situés sur le Traité 6 / Territoire métis. </p>

app/views/shared/_header_navbar.html.erb

@@ -14,16 +14,16 @@
             <li><a href="https://apps.ualberta.ca">Email &amp; Apps</a></li>
             <li class="last"><a href="https://eclass.srv.ualberta.ca/portal">eClass</a></li>
           </ul>
-        </div> 
+        </div>
       </div>
     </div><!-- End UofA Blade -->
     <div class="container-fluid banner-container"><!-- Logo, banner, ask-us and mobile navigation -->
       <div class="container banner">
         <div class="row">
           <div class="col-sm-6 col-xs-7">
-         
-             <a href="/"  data-no-turbolink="true"><%= image_pack_tag "ualib-logo-sm.png", :class => "ualogo", :alt => "University of Alberta Libraries" %></a>
-            
+
+             <a href="/"  data-no-turbolink="true"><%= image_tag "ualib-logo-sm.png", :class => "ualogo", :alt => "University of Alberta Libraries" %></a>
+
           </div>
           <div class="col-sm-6 col-xs-3 ask-sm">
             <a href="/ask-us" class="ask-main" data-no-turbolink="true" target="_blank">Ask Us</a>
@@ -38,7 +38,7 @@
             </button><!-- End mobile menu button -->
           </div>
         </div>
-      </div>        
+      </div>
       <div id="navbar" class="col-xs-10 collapse" style="height: 0px;"><!-- Mobile menu -->
         <ul>
           <li class="active"><a href="/" data-no-turbolink="true">Search &amp; Home</a></li>