Ditch shakapacker

.gitignore

@@ -32,6 +32,7 @@ public/sitemap*
 
 /public/packs
 /public/packs-test
+/public/node_modules
 /node_modules
 /yarn-error.log
 yarn-debug.log*
@@ -45,3 +46,6 @@ storage
 
 /config/master.key
 config/credentials.yml.enc
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -29,8 +29,9 @@ gem 'sendgrid-ruby' # Sending emails
 gem 'sitemap_generator' # generate sitemaps for submitting to search engines
 gem 'slim' # view templating
 gem 'uglifier'
-gem 'shakapacker', '~> 8'
 gem 'webrick' # web server for capybara and local dev
+gem 'jsbundling-rails'
+gem 'cssbundling-rails'
 
 group :development do
   gem 'better_errors' # improved error pages

Gemfile.lock

@@ -141,6 +141,8 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
+    cssbundling-rails (1.4.0)
+      railties (>= 6.0.0)
     date (3.3.4)
     debug_inspector (1.2.0)
     devise (4.9.3)
@@ -242,6 +244,8 @@ GEM
       character_set (~> 1.4)
       regexp_parser (>= 2.6.2, < 3.0.0)
       regexp_property_values (~> 1.0)
+    jsbundling-rails (1.3.0)
+      railties (>= 6.0.0)
     json (2.7.1)
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
@@ -307,7 +311,6 @@ GEM
       nenv (~> 0.1)
       shellany (~> 0.0)
     orm_adapter (0.5.0)
-    package_json (0.1.0)
     parallel (1.24.0)
     parser (3.3.0.5)
       ast (~> 2.4.1)
@@ -329,8 +332,6 @@ GEM
     pygments.rb (2.4.1)
     racc (1.8.0)
     rack (3.0.11)
-    rack-proxy (0.7.7)
-      rack
     rack-session (2.0.0)
       rack (>= 3.0.0)
     rack-test (2.1.0)
@@ -459,15 +460,8 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     sendgrid-ruby (6.7.0)
       ruby_http_client (~> 3.4)
-    shakapacker (8.0.0)
-      activesupport (>= 5.2)
-      package_json
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     shellany (0.0.1)
     sitemap_generator (6.3.0)
       builder (~> 3.0)
@@ -524,6 +518,7 @@ DEPENDENCIES
   capybara
   client_side_validations
   concurrent-ruby
+  cssbundling-rails
   devise (>= 4.4.0)
   dotenv-rails
   factory_bot_rails
@@ -539,6 +534,7 @@ DEPENDENCIES
   humanize
   image_processing
   jbuilder
+  jsbundling-rails
   kaminari
   launchy
   mail_form
@@ -563,7 +559,6 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   sendgrid-ruby
-  shakapacker (~> 8)
   sitemap_generator
   slim
   spring

Procfile.dev

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

app/assets/stylesheets/application.sass.scss

@@ -0,0 +1 @@
+// Entry point for your Sass build

app/javascript/application.js

@@ -0,0 +1 @@
+// Entry point for the build script in your package.json

app/javascript/packs/application.js

@@ -9,7 +9,7 @@
 
 
 // Uncomment to copy all static images under ../images to the output folder and reference
-// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// them with the image_tag helper in views (e.g <%= image_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
 //
 const images = require.context('../images', true);
@@ -21,9 +21,10 @@ const videoPath = (name) => videos(name, true);
 
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
-import "application.css";
-import "_pygment_monokai.sass";
+import "./application.css";
+import "./_pygment_monokai.sass";
 import * as Turbo from "@hotwired/turbo";
+import $ from 'jquery';
 
 // temporarily disable turbo until we can resolve page scrolling bug on iPadOS
 Turbo.session.drive = false;
@@ -41,3 +42,6 @@ require('@client-side-validations/client-side-validations');
 
 // custom javascripts used throughout the frontend of the site
 import './custom';
+import './photography';
+import './contact-me';
+import './blog';

app/javascript/packs/photography.js

@@ -39,7 +39,6 @@ const createInfiniteScroll = (elem, masonry) => {
 
 // build the Photoswipe gallery from the provided CSS selector
 const initPhotoSwipeFromDOM = function(gallerySelector) {
-
     // parse slide data (url, title, size ...) from DOM elements
     // (children of gallerySelector)
     var parseThumbnailElements = function(el) {

app/views/home/_contact.html.erb

@@ -13,4 +13,4 @@
     </div>
 </div>
 <div class="bg-center bg-cover bg-no-repeat h-72 sm:h-64 md:h-72 lg:h-96"
-        style="background-image: url(<%= image_pack_path("images/home/map.jpg") %>);"></div>
+        style="background-image: url(<%= asset_path("packs/images/home/map.jpg") %>);"></div>

app/views/home/_expertise.html.erb

@@ -10,10 +10,10 @@
             <div class="shadow px-8 py-12 hover:bg-primary dark:bg-primary-70 dark:hover:bg-primary-90 group rounded">
                 <div class="text-center w-24 xl:w-28 h-24 xl:h-28 mx-auto">
                     <div class="hidden group-hover:block">
-                        <%= image_pack_tag "images/home/icon-software-development.svg", alt: "development icon", class: "invert dark:opacity-70" %>
+                        <%= image_tag asset_path("packs/images/home/icon-software-development.svg"), alt: "development icon", class: "invert dark:opacity-70" %>
                     </div>
                     <div class="block group-hover:hidden">
-                        <%= image_pack_tag "images/home/icon-software-development.svg", alt: "development icon", class: "invert-0 dark:invert" %>
+                        <%= image_tag asset_path("packs/images/home/icon-software-development.svg"), alt: "development icon", class: "invert-0 dark:invert" %>
                     </div>
                 </div>
                 <div class="text-center">
@@ -29,10 +29,10 @@
             <div class="shadow px-8 py-12 hover:bg-primary dark:bg-primary-70 dark:hover:bg-primary-90 group rounded">
                 <div class="text-center w-24 xl:w-28 h-24 xl:h-28 mx-auto">
                     <div class="hidden group-hover:block">
-                        <%= image_pack_tag "images/home/icon-app-development.svg", alt: "Mobile Application icon", class: "invert dark:opacity-70" %>
+                        <%= image_tag asset_path("packs/images/home/icon-app-development.svg"), alt: "Mobile Application icon", class: "invert dark:opacity-70" %>
                     </div>
                     <div class="block group-hover:hidden">
-                        <%= image_pack_tag "images/home/icon-app-development.svg", alt: "Mobile Application icon", class: "invert-0 dark:invert" %>
+                        <%= image_tag asset_path("packs/images/home/icon-app-development.svg"), alt: "Mobile Application icon", class: "invert-0 dark:invert" %>
                     </div>
                 </div>
                 <div class="text-center">
@@ -48,10 +48,10 @@
             <div class="shadow px-8 py-12 hover:bg-primary dark:bg-primary-70 dark:hover:bg-primary-90 group rounded">
                 <div class="text-center w-24 xl:w-28 h-24 xl:h-28 mx-auto">
                     <div class="hidden group-hover:block">
-                        <%= image_pack_tag "images/home/icon-filmmaking.svg", alt: "film and photography icon", class: "invert dark:opacity-70" %>
+                        <%= image_tag asset_path("packs/images/home/icon-filmmaking.svg"), alt: "film and photography icon", class: "invert dark:opacity-70" %>
                     </div>
                     <div class="block group-hover:hidden">
-                        <%= image_pack_tag "images/home/icon-filmmaking.svg", alt: "film and photography icon", class: "invert-0 dark:invert" %>
+                        <%= image_tag asset_path("packs/images/home/icon-filmmaking.svg"), alt: "film and photography icon", class: "invert-0 dark:invert" %>
                     </div>
                 </div>
                 <div class="text-center">

app/views/home/_games.html.erb

@@ -8,7 +8,7 @@
 
             <div class="w-full md:w-4/5 lg:w-3/5 shadow dark:shadow-primary-40 dark:bg-primary p-2 my-6 group rounded">
                 <video autoplay loop muted playsinline>
-                    <source src="<%= image_pack_path("videos/home/squarecrusher-hq.mp4") %>" type="video/mp4">
+                    <source src="<%= asset_path("packs/videos/home/squarecrusher-hq.mp4") %>" type="video/mp4">
                     Sorry, your browser doesn't support embedded videos.
                 </video>
             </div>

app/views/home/_hero.html.erb

@@ -1,5 +1,5 @@
 <div class="bg-center bg-cover bg-no-repeat relative py-8"
-    style="background-image: url(<%= image_pack_path("images/home/bg-hero.jpg") %>);">
+    style="background-image: url(<%= asset_path("packs/images/home/bg-hero.jpg") %>);">
 
     <div
         class="bg-center bg-cover bg-no-repeat absolute inset-0 z-20 bg-gradient-to-r from-hero-gradient-from dark:from-hero-gradient-dark-from to-hero-gradient-to dark:to-hero-gradient-dark-to">
@@ -8,7 +8,7 @@
     <div class="container z-30 relative pt-20 sm:pt-56 lg:pt-64 pb-12 sm:pb-48 lg:pb-48">
         <div class="flex flex-col lg:flex-row justify-center items-center">
             <div class="rounded-full border-8 border-white shadow-xl">
-                <%= image_pack_tag "images/home/blog-author-#{rand(1..5)}.jpg", class: "h-48 sm:h-56 rounded-full", alt: "author" %>
+                <%= image_tag asset_path("packs/images/home/blog-author-#{rand(1..5)}.jpg"), class: "h-48 sm:h-56 rounded-full", alt: "author" %>
             </div>
             <div class="lg:pl-8 pt-8 sm:pt-10 lg:pt-0">
                 <h1

app/views/home/_newsletter.html.erb

@@ -1,5 +1,5 @@
 <div class="bg-center bg-cover bg-no-repeat relative py-16 lg:py-24 bg-primary"
-    style="background-image: url(<%= image_pack_path("images/home/bg-cta.jpg") %>);">
+    style="background-image: url(<%= asset_path("packs/images/home/bg-cta.jpg") %>);">
     <div
         class="bg-center bg-cover bg-no-repeat absolute inset-0 z-20 bg-gradient-to-r from-hero-gradient-from dark:from-hero-gradient-dark-from to-cta-gradient-to">
     </div>

app/views/home/_work.html.erb

@@ -13,7 +13,7 @@
                 <div class="md:w-2/5">
                     <div class="flex justify-center md:justify-start">
                         <span class="flex-shrink-0">
-                            <%= image_pack_tag "images/home/logo-cruise.svg", class: "w-48 h-16 relative -top-6", alt: "company logo" %>
+                            <%= image_tag asset_path("packs/images/home/logo-cruise.svg"), class: "w-48 h-16 relative -top-6", alt: "company logo" %>
                         </span>
                         <div class="relative w-full ml-6 hidden md:block">
                             <span class="h-0.5 bg-grey-70 absolute inset-x-0 top-3 transform -translate-y-1/2"></span>
@@ -48,7 +48,7 @@
                 <div class="md:w-2/5">
                     <div class="flex justify-center md:justify-start">
                         <span class="flex-shrink-0">
-                            <%= image_pack_tag "images/home/logo-lyft.svg", class: "w-48 h-16 relative -top-5", alt: "company logo" %>
+                            <%= image_tag asset_path("packs/images/home/logo-lyft.svg"), class: "w-48 h-16 relative -top-5", alt: "company logo" %>
                         </span>
                         <div class="relative w-full ml-6 hidden md:block">
                             <span class="h-0.5 bg-grey-70 absolute inset-x-0 top-3 transform -translate-y-1/2"></span>
@@ -84,7 +84,7 @@
                 <div class="md:w-2/5">
                     <div class="flex justify-center md:justify-start">
                         <span class="flex-shrink-0">
-                            <%= image_pack_tag "images/home/logo-teespring.svg", class: "w-48 h-auto dark:brightness-200", alt: "company logo" %>
+                            <%= image_tag asset_path("packs/images/home/logo-teespring.svg"), class: "w-48 h-auto dark:brightness-200", alt: "company logo" %>
                         </span>
                         <div class="relative w-full ml-6 hidden md:block">
                             <span class="h-0.5 bg-grey-70 absolute inset-x-0 top-1/2 transform -translate-y-1/2"></span>
@@ -123,7 +123,7 @@
                 <div class="md:w-2/5">
                     <div class="flex justify-center md:justify-start">
                         <span class="flex-shrink-0">
-                            <%= image_pack_tag "images/home/logo-onelogin.svg", class: "w-48 h-auto relative -top-2 dark:invert", alt: "company logo" %>
+                            <%= image_tag asset_path("packs/images/home/logo-onelogin.svg"), class: "w-48 h-auto relative -top-2 dark:invert", alt: "company logo" %>
                         </span>
                         <div class="relative w-full ml-6 hidden md:block">
                             <span class="h-0.5 bg-grey-70 absolute inset-x-0 top-3 transform -translate-y-1/2"></span>

app/views/layouts/application.html.slim

@@ -16,11 +16,11 @@ html[lang="en"]
     meta[itemprop="name" content="Radler Designs - benradler.com"]
     meta[itemprop="url" content="#{root_url}"]
     meta[itemprop="description" content="Radler Designs - Ben has ten years of professional experience as a Software Engineer at industry-leading companies in the San Francisco Bay Area."]
-    meta[itemprop="thumbnailUrl" content="#{image_pack_url("images/layout/social.jpg")}"]
-    meta[itemprop="image" content="#{image_pack_url("images/layout/social.jpg")}"]
-    link[rel="image_src" href="#{image_pack_url("images/layout/social.jpg")}"]
+    meta[itemprop="thumbnailUrl" content="#{asset_url("packs/images/layout/social.jpg")}"]
+    meta[itemprop="image" content="#{asset_url("packs/images/layout/social.jpg")}"]
+    link[rel="image_src" href="#{asset_url("packs/images/layout/social.jpg")}"]
     link[rel="canonical" href="#{root_url}"]
-    link[rel="icon" type="image/png" href="#{image_pack_url("images/layout/favicon.png")}"]
+    link[rel="icon" type="image/png" href="#{asset_url("packs/images/layout/favicon.png")}"]
 
     - # for browsers/devices which customize UI based on theme
     meta[name="theme-color" content="#5540af" media="(prefers-color-scheme: light)"]
@@ -39,24 +39,28 @@ html[lang="en"]
     meta[property="og:url" content="#{root_url}"]
     meta[property="og:type" content="website"]
     meta[property="og:description" content="Radler Designs - Ben has ten years of professional experience as a Software Engineer at industry-leading companies in the San Francisco Bay Area."]
-    meta[property="og:image" content="#{image_pack_url("images/layout/social.jpg")}"]
+    meta[property="og:image" content="#{image_url("images/layout/social.jpg")}"]
     meta[property="og:image:type" content="image/jpeg"]
     meta[property="og:image:width" content="1200"]
     meta[property="og:image:height" content="627"]
 
     - # twitter
     meta[name="twitter:site" content="@benradler"]
     meta[name="twitter:title" content="Ben Radler"]
-    meta[name="twitter:image" content="#{image_pack_url("images/layout/social.jpg")}"]
+    meta[name="twitter:image" content="#{image_url("images/layout/social.jpg")}"]
     meta[name="twitter:url" content="#{root_url}"]
     meta[name="twitter:description" content="qwerty"]
     meta[name="twitter:card" content="summary_large_image"]
 
     - # staging/production require this
-    = stylesheet_pack_tag 'application', 'photography', 'contact-me', 'data-turbo-track': 'reload'
+    = stylesheet_link_tag asset_path('packs/main.css'), 'data-turbo-track': 'reload'
+    / = stylesheet_link_tag 'packs/main.css', 'photography', 'contact-me', 'data-turbo-track': 'reload'
 
     - # this is the webpack insertion point, including ALL tailwind CSS imported by application.js...so confusing
-    = javascript_pack_tag 'application', 'photography', 'contact-me', 'blog', 'data-turbo-track': 'reload'
+    / = javascript_include_tag 'packs/application', 'photography', 'contact-me', 'blog', 'data-turbo-track': 'reload'
+    = javascript_include_tag asset_path('packs/photoswipe.js'), 'data-turbo-track': 'reload'
+    = javascript_include_tag asset_path('packs/vendors.js'), 'data-turbo-track': 'reload'
+    = javascript_include_tag asset_path('packs/main.js'), 'data-turbo-track': 'reload'
 
     = yield :head
     = csrf_meta_tags

app/views/shared/_header.html.erb

@@ -44,7 +44,7 @@
 
             <% # close mobile nav %>
             <button class="absolute top-0 right-0 mt-4 mr-4" @click="$parent.mobileMenu = false">
-                <%= image_pack_tag "images/icon-close.svg", class: "h-10 w-auto", alt: "close" %>
+                <%= image_tag asset_path("packs/images/icon-close.svg"), class: "h-10 w-auto", alt: "close" %>
             </button>
 
             <ul class="flex flex-col mt-8">

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 "$@"

config/assets.rb

@@ -0,0 +1 @@
+# Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'builds')

config/environments/production.rb

@@ -91,4 +91,6 @@
 
   # Update the activestorage default route from "/rails/active_storage" to something without the framework in it
   config.active_storage.routes_prefix = "/files"
+
+  config.assets.compile = false
 end

config/newrelic.yml

@@ -191,15 +191,15 @@ common: &default_settings
 development:
   <<: *default_settings
   # Turn on communication to New Relic service in development mode
-  monitor_mode: true
+  monitor_mode: false
   app_name: My Application (Development)
 
   # Rails Only - when running in Developer Mode, the New Relic Agent will
   # present performance information on the last 100 transactions you have
   # executed since starting the mongrel.
   # NOTE: There is substantial overhead when running in developer mode.
   # Do not use for production or load testing.
-  developer_mode: true
+  developer_mode: false
 
 test:
   <<: *default_settings