WIP

Gemfile

@@ -31,6 +31,7 @@ gem 'slim' # view templating
 gem 'uglifier'
 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)
@@ -516,6 +518,7 @@ DEPENDENCIES
   capybara
   client_side_validations
   concurrent-ruby
+  cssbundling-rails
   devise (>= 4.4.0)
   dotenv-rails
   factory_bot_rails

Procfile.dev

@@ -1,2 +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/packs/application.js

@@ -24,6 +24,7 @@ import 'regenerator-runtime/runtime';
 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,5 @@ require('@client-side-validations/client-side-validations');
 
 // custom javascripts used throughout the frontend of the site
 import './custom';
+import './photography';
+import './contact-me';

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(<%= asset_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_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_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_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_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_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_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="<%= asset_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(<%= asset_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_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(<%= asset_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_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_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_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_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_url("images/layout/social.jpg")}"]
-    meta[itemprop="image" content="#{image_url("images/layout/social.jpg")}"]
-    link[rel="image_src" href="#{image_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_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)"]
@@ -53,10 +53,13 @@ html[lang="en"]
     meta[name="twitter:card" content="summary_large_image"]
 
     - # staging/production require this
-    = stylesheet_link_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_include_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/main.js'), 'data-turbo-track': 'reload'
+    = javascript_include_tag asset_path('packs/vendors.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_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">

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

config/routes.rb

@@ -26,22 +26,22 @@
   # GET /2015/01/31/post-title
   # # => 301 redirect to /blog/2015/01/31/post-title
   #
-  # get '/:year/:month/:day/:id', to: redirect('/blog/%{year}/%{month}/%{day}/%{id}')
-  # namespace :blog do
-  #   #
-  #   # GET /blog
-  #   # GET /blog/:name-of-the-article
-  #   #
-  #   resources :posts, path: '', only: [:index, :show]
-
-  #   #
-  #   # GET /blog/2015/01/31/post-title
-  #   # @note
-  #   #   this route introduces an issue where you can access a Blog::Post with any year/month/day
-  #   #   params as long as you have the correct :id
-  #   #
-  #   get '/:year/:month/:day/:id' => 'posts#show', as: 'permalink'
-  # end
+  get '/:year/:month/:day/:id', to: redirect('/blog/%{year}/%{month}/%{day}/%{id}')
+  namespace :blog do
+    #
+    # GET /blog
+    # GET /blog/:name-of-the-article
+    #
+    resources :posts, path: '', only: [:index, :show]
+
+    #
+    # GET /blog/2015/01/31/post-title
+    # @note
+    #   this route introduces an issue where you can access a Blog::Post with any year/month/day
+    #   params as long as you have the correct :id
+    #
+    get '/:year/:month/:day/:id' => 'posts#show', as: 'permalink'
+  end
 
   #
   # custom controller for HighVoltage static pages

package.json

@@ -28,15 +28,15 @@
     "core-js": "3.20.1",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "expose-loader": "^4.1.0",
+    "expose-loader": "^5.0.0",
     "file-loader": "^6.2.0",
     "fitvids": "1.0.2",
     "imagesloaded": "4.1.4",
     "infinite-scroll": "4.0.0",
-    "jquery": "^3.7.0",
+    "jquery": "^3.7.1",
     "marked": "4.0.10",
     "masonry-layout": "4.2.2",
-    "mini-css-extract-plugin": "^2.7.6",
+    "mini-css-extract-plugin": "^2.9.0",
     "photoswipe": "4.1.3",
     "postcss": "^8.4.31",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -47,7 +47,7 @@
     "sass-loader": "^14.2.1",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.3",
-    "terser-webpack-plugin": "^5.3.9",
+    "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.91.0",
     "webpack-assets-manifest": "^5.1.0",
     "webpack-cli": "^5.1.4",
@@ -68,6 +68,7 @@
     "webpack-dev-server": "^4.15.1"
   },
   "scripts": {
-    "build": "webpack --config webpack.config.js"
+    "build": "webpack --config webpack.config.js",
+    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   }
 }

tailwind.config.js

@@ -20,8 +20,10 @@ module.exports = {
         },
         extend: {
             backgroundImage: {
-                'work-bg-light': "url('~../images/home/experience-figure.svg')",
-                'work-bg-dark': "url('~../images/home/experience-figure-dark.svg')",
+                // 'work-bg-light': "url('~../images/home/experience-figure.svg')",
+                // 'work-bg-dark': "url('~../images/home/experience-figure-dark.svg')",
+                'work-bg-light': "url('/app/javascript/images/home/experience-figure.svg')",
+                'work-bg-dark': "url('/app/javascript/images/home/experience-figure-dark.svg')",
             },
             fontFamily: {
                 header: ['Raleway', "sans-serif"],