Change form yarn to importmap

Gemfile

@@ -17,8 +17,8 @@ gem 'pg', '~> 1.1'
 # Use the Puma web server [https://github.com/puma/puma]
 gem 'puma', '~> 6.0'
 
-# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
-gem 'jsbundling-rails'
+# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
+gem 'importmap-rails'
 
 # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
 gem 'turbo-rails'
@@ -59,7 +59,11 @@ gem 'slim-rails'
 gem 'devise'
 # Use Kaminari
 gem 'kaminari'
+# Use Bootstrap
+gem 'bootstrap', '~> 5.3.0'
+gem 'jquery-rails'
 gem 'bootstrap5-kaminari-views'
+# Use FontAwesome
 gem 'font-awesome-sass', '~> 6.5.2'
 # Use Sidekiq
 gem 'sidekiq'

Gemfile.lock

@@ -74,12 +74,17 @@ GEM
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.2)
+    autoprefixer-rails (10.4.19.0)
+      execjs (~> 2)
     base64 (0.2.0)
     bcrypt (3.1.20)
     bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
+    bootstrap (5.3.3)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 2.11.8, < 3)
     bootstrap5-kaminari-views (0.0.1)
       kaminari (>= 0.13)
       rails (>= 3.1)
@@ -125,6 +130,7 @@ GEM
     erubi (1.13.0)
     et-orbi (1.2.11)
       tzinfo
+    execjs (2.9.1)
     factory_bot (6.4.6)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.4.3)
@@ -170,15 +176,21 @@ GEM
       hpricot
     i18n (1.14.5)
       concurrent-ruby (~> 1.0)
+    importmap-rails (2.0.1)
+      actionpack (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      railties (>= 6.0.0)
     io-console (0.7.2)
     irb (1.14.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jbuilder (2.12.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
-    jsbundling-rails (1.3.1)
-      railties (>= 6.0.0)
+    jquery-rails (4.6.0)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
     json (2.7.2)
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
@@ -230,6 +242,7 @@ GEM
       ast (~> 2.4.1)
       racc
     pg (1.5.7)
+    popper_js (2.11.8)
     progress_bar (1.3.4)
       highline (>= 1.6)
       options (~> 2.3.0)
@@ -420,6 +433,7 @@ PLATFORMS
 
 DEPENDENCIES
   bootsnap
+  bootstrap (~> 5.3.0)
   bootstrap5-kaminari-views
   bullet
   capybara
@@ -430,8 +444,9 @@ DEPENDENCIES
   factory_bot_rails
   font-awesome-sass (~> 6.5.2)
   html2slim
+  importmap-rails
   jbuilder
-  jsbundling-rails
+  jquery-rails
   kaminari
   pg (~> 1.1)
   progress_bar

app/assets/config/manifest.js

@@ -1,3 +1,5 @@
 //= link_tree ../images
-//= link_tree ../builds
+//= link_directory ../stylesheets .css
 //= link_tree ../audios
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js

app/assets/stylesheets/application.css.scss

@@ -1 +1,43 @@
-@import "font-awesome";
+@import "font-awesome";
+
+.lyrics-site-content {
+    min-height: 700px;
+  }
+
+  .lyrics-site-sidenav-item {
+
+    a,
+    button {
+      color: #fff;
+    }
+  }
+
+  .layoutAuthentication {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+
+    .layoutAuthentication_content {
+      min-width: 0;
+      flex-grow: 1;
+    }
+  }
+
+  .img-error {
+    max-width: 20rem;
+  }
+
+  #layoutError {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  #layoutError #layoutError_content {
+    min-width: 0;
+    flex-grow: 1;
+  }
+
+  #layoutError #layoutError_footer {
+    min-width: 0;
+  }

app/javascript/application.js

@@ -1,6 +1,8 @@
-// Entry point for the build script in your package.json
-//= require app_assets
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+//= require jquery3
+//= require popper
+//= require bootstrap
 import "@hotwired/turbo-rails"
-import "./controllers"
+import "controllers"
 import "./components"
 import * as bootstrap from "bootstrap"

app/javascript/controllers/index.js

@@ -2,7 +2,7 @@
 // Run that command whenever you add a new controller or create them with
 // ./bin/rails generate stimulus controllerName
 
-import { application } from './application'
+import { application } from 'controllers/application'
 
 import ArtistsSongsController from './artists_songs_controller'
 application.register('artists-songs', ArtistsSongsController)

app/views/layouts/application.html.slim

@@ -8,6 +8,6 @@ html
     = csp_meta_tag
     = favicon_link_tag('favicon.ico')
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
-    = javascript_include_tag "application", "data-turbo-track": "reload", defer: true
+    = javascript_importmap_tags
   body class="#{yield (:body_class)}"
     = yield

bin/importmap

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"

config/importmap.rb

@@ -0,0 +1,21 @@
+# Pin npm packages by running ./bin/importmap
+
+pin 'application'
+pin '@hotwired/stimulus', to: 'stimulus.min.js'
+pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
+pin "bootstrap", to: "bootstrap.min.js", preload: true
+pin "@popperjs/core", to: "popper.js", preload: true
+pin_all_from 'app/javascript/controllers', under: 'controllers'
+
+# pin 'autoprefixer'
+# pin 'bootstrap-icons'
+# pin 'nodemon'
+# pin 'sass'
+
+# "autoprefixer": "^10.4.14",
+# "bootstrap-icons": "^1.10.5",
+# "esbuild": "^0.18.8",
+# "nodemon": "^2.0.22",
+# "postcss": "^8.4.24",
+# "postcss-cli": "^10.1.0",
+# "sass": "^1.63.6"

config/initializers/assets.rb

@@ -7,9 +7,9 @@
 
 # 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')
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
-# Rails.application.config.assets.precompile += %w( admin.js admin.css )
+# Rails.application.config.assets.precompile += %w( admin.js admin.css )# config/initializers/assets.rb
+Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)