Move some assets out of webpacker

app/components/products_table_component/products_table_component.scss

@@ -41,7 +41,7 @@
       background-position: center;
       background-repeat: no-repeat;
       background-size: 50px 50px;
-      background-image: url("../images/spinning-circles.svg");
+      background-image: url("/images/spinning-circles.svg");
     }
   }
 }

app/models/spree/app_configuration.rb

@@ -27,7 +27,7 @@ module Spree
   class AppConfiguration < Preferences::Configuration
     # Should state/state_name be required
     preference :address_requires_state, :boolean, default: true
-    preference :admin_interface_logo, :string, default: '/default_images/ofn-logo.png'
+    preference :admin_interface_logo, :string, default: 'ofn-logo.png'
     preference :admin_products_per_page, :integer, default: 10
     # Should only be true if you don't need to track inventory
     preference :allow_backorder_shipping, :boolean, default: false
@@ -46,7 +46,7 @@ class AppConfiguration < Preferences::Configuration
     preference :default_seo_title, :string, default: ''
     preference :hide_cents, :boolean, default: false
     preference :layout, :string, default: 'darkswarm'
-    preference :logo, :string, default: '/default_images/ofn-logo.png'
+    preference :logo, :string, default: 'ofn-logo.png'
 
     # Maximum nesting level in taxons menu
     preference :max_level_in_taxons_menu, :integer, default: 1

app/views/admin/producer_properties/_form.html.haml

@@ -1,6 +1,6 @@
 %fieldset.no-border-top
   .add_producer_properties{"data-hook" => "add_producer_properties"}
-  = image_pack_tag 'spinner.gif', :plugin => 'spree', :style => 'display:none;', :id => 'busy_indicator'
+  = image_tag 'spinner.gif', :plugin => 'spree', :style => 'display:none;', :id => 'busy_indicator'
   %table.index.sortable{"data-hook" => "", "data-sortable-link" => main_app.update_positions_admin_enterprise_producer_properties_url(@enterprise)}
     %thead
       %tr{"data-hook" => "producer_properties_header"}

app/views/components/_spinner.html.haml

@@ -1 +1 @@
-%img.spinner{ src: image_pack_path("spinning-circles.svg"), style: "max-width: 100%" }
+%img.spinner{ src: image_path("spinning-circles.svg"), style: "max-width: 100%" }

app/views/home/_tagline.html.haml

@@ -2,7 +2,7 @@
   .row
     .small-12.text-center.columns
       %h1
-        %img{src: image_pack_path("logo-white-notext.png"), title: Spree::Config.site_name}
+        %img{src: image_path("logo-white-notext.png"), title: Spree::Config.site_name}
         %br/
         %a.button.transparent{href: "/shops"}
           = t :home_shop

app/views/layouts/darkswarm.html.haml

@@ -13,7 +13,7 @@
     - else
       = favicon_link_tag "/favicon-staging.ico"
     %link{href: "https://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"}
-    %link{href: asset_pack_path("media/fonts/OFN-v2.woff"), rel: "preload", as: "font", crossorigin: "anonymous"}
+    %link{href: font_path("OFN-v2.woff"), rel: "preload", as: "font", crossorigin: "anonymous"}
     = render "layouts/matomo_tag"
     = language_meta_tags
 

app/views/layouts/registration.html.haml

@@ -18,7 +18,7 @@
 
     = csrf_meta_tags
 
-  %body.off-canvas{ style: "background-image: url(#{image_pack_path('tile-wide.png')})", "data-turbo": "false" }
+  %body.off-canvas{ style: "background-image: url(#{image_path('tile-wide.png')})", "data-turbo": "false" }
     .off-canvas-wrap{offcanvas: true}
       .inner-wrap
 

app/views/producers/_fat.html.haml

@@ -40,7 +40,7 @@
 
       %p.word-wrap{"ng-if" => "::producer.whatsapp_phone"}
         %a{"ng-href" => "{{::producer.whatsapp_url}}", target: "_blank"}
-          %img{ src: image_pack_path("social-logos/whatsapp.svg") }
+          %img{ src: image_path("social-logos/whatsapp.svg") }
           %span{"ng-bind" => "::producer.whatsapp_phone"}
 
       %p.word-wrap{"ng-if" => "::producer.email_address"}

app/views/registration/steps/_limit_reached.html.haml

@@ -6,7 +6,7 @@
         %h4= t(".message")
   .row
     .small-12.medium-3.large-2.columns.text-right.hide-for-small-only
-      %img{:src => image_pack_path("potatoes.png") }
+      %img{:src => image_path("potatoes.png") }
     .small-12.medium-9.large-10.columns
       %p
         = t(".text")

app/views/shared/_footer.html.haml

@@ -3,7 +3,7 @@
     .row
       .small-12.columns.text-center
         .logo
-          %img{src: image_pack_path("logo-white-notext.png") }
+          %img{src: image_path("logo-white-notext.png") }
     .row
       .small-12.medium-8.medium-offset-2.columns.text-center
         .alert-box

app/views/shared/menu/_cart.html.haml

@@ -3,6 +3,6 @@
     %span
       = t '.cart'
     %span.count
-      %img{ src: image_pack_path("menu/icn-cart.svg") }
+      %img{ src: image_path("menu/icn-cart.svg") }
       %span
         {{ Cart.total_item_count() }}

app/views/shared/menu/_mobile_menu.html.haml

@@ -1,7 +1,7 @@
 %nav.tab-bar.show-for-medium-down
   %section.left
     %a.left-off-canvas-toggle.menu-icon
-      = image_pack_tag "menu/btn-menu-mobile.png"
+      = image_tag "menu/btn-menu-mobile.png"
 
   %section.left
     .ofn-logo
@@ -14,7 +14,7 @@
         %span
           = t '.cart'
         %span.count
-          = image_pack_tag "menu/icn-cart.svg"
+          = image_tag "menu/icn-cart.svg"
           %span
             {{ Cart.total_item_count() }}
 

app/views/shared/menu/_signed_in.html.haml

@@ -7,7 +7,7 @@
 %li.user-menu.has-dropdown.not-click
 
   %a{href: "#", class: "top-bar--menu-item-with-icon"}
-    %img{ src: image_pack_path("menu/icn-profile.svg") }
+    %img{ src: image_path("menu/icn-profile.svg") }
     %span
       = t '.profile'
 

app/views/shared/menu/_signed_out.html.haml

@@ -1,5 +1,5 @@
 %li#login-link{ "data-controller": "login-modal" }
   %a{"auth": "login", "data-action": "click->login-modal#call" }
-    %img{ src: image_pack_path("menu/icn-login.svg") }
+    %img{ src: image_path("menu/icn-login.svg") }
     %span
       = t 'label_login'

app/views/shop/products/_searchbar.haml

@@ -8,7 +8,7 @@
               "ng-debounce" => "200",
               "disable-enter-with-blur" => true}
         %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}, 'focus-search' => true}
-          = image_pack_tag "icn-close.png"
+          = image_tag "icn-close.png"
 
       .hide-for-large-up
         %button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}

app/views/shopping_shared/tabs/_contact.html.haml

@@ -28,7 +28,7 @@
                 %br
               - if current_distributor.whatsapp_phone.present?
                 %a{href: current_distributor.whatsapp_url, target: "_blank" }
-                  %img{ src: image_pack_path("social-logos/whatsapp.svg") }
+                  %img{ src: image_path("social-logos/whatsapp.svg") }
                   = current_distributor.whatsapp_phone
                   %br
               - if current_distributor.website.present?

app/views/spree/admin/payments/source_forms/_gateway.html.haml

@@ -41,5 +41,5 @@
         %a.info.cvvLink{href: "/content/cvv", target: "_blank"}
           (#{t(:what_is_this)})
     .nine.columns
-      = image_pack_tag 'credit_cards/credit_card.gif', class: 'credit-card-image'
+      = image_tag 'credit_cards/credit_card.gif', class: 'credit-card-image'
     .clear

app/views/spree/admin/product_properties/index.html.haml

@@ -12,7 +12,7 @@
 = form_for @product, url: admin_product_url(@product, @url_filters), method: :put do |f|
   %fieldset.no-border-top
     .add_product_properties
-    = image_pack_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
+    = image_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
 
     %table.index.sortable{"data-sortable-link" => update_positions_admin_product_product_properties_url}
       %thead

app/views/spree/admin/states/index.html.haml

@@ -11,6 +11,6 @@
   - databaseurl = "#{admin_states_path(format: :js)}?country_id="
   %select#country.observe_field.select2.fullwidth{"data-base-url" => databaseurl, "data-update" => "#state-list"}
     = options_from_collection_for_select(@countries, :id, :name, @country.id)
-= image_pack_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
+= image_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
 #state-list
   = render partial: 'state_list'

app/webpacker/css/admin/plugins/font-awesome.scss

@@ -27,11 +27,11 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('../fonts/fontawesome-webfont.eot?v=3.2.1');
-  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
-      url('../fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'),
-      url('../fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),
-      url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
+  src: url('/fonts/fontawesome-webfont.eot?v=3.2.1');
+  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
+      url('/fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'),
+      url('/fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),
+      url('/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
   font-weight: normal;
   font-style: normal;
 }

app/webpacker/css/admin/welcome.scss

@@ -7,7 +7,7 @@
 
     @include fullbg;
     background-color: black;
-    background-image: url("../images/home/tagline-bg.jpg");
+    background-image: url("/images/home/tagline-bg.jpg");
     background-repeat: no-repeat;
     background-position: center center;
     margin-bottom: 2em;

app/webpacker/css/darkswarm/_shop-navigation.scss

@@ -60,7 +60,7 @@ ordercycle {
     }
 
     select {
-      background-image: url('../images/white-caret.svg');
+      background-image: url('/images/white-caret.svg');
       background-size: 30px auto;
       background-position-x: 102%;
       height: 2.35em;
@@ -145,7 +145,7 @@ shop ordercycle {
 
       select {
         background-color: $white;
-        background-image: url('../images/black-caret.svg');
+        background-image: url('/black-caret.svg');
         color: $grey-500;
         font-style: italic;
       }

app/webpacker/css/darkswarm/footer.scss

@@ -46,7 +46,7 @@ footer {
 
         width: 100%;
         border: 1px solid rgba($dark-grey, 0.35);
-        background-image: url("../images/tile-wide.png");
+        background-image: url("/images/tile-wide.png");
         background-position: center center;
         background-color: #bbb;
         padding: 12px 0 8px 0;

app/webpacker/css/darkswarm/home_panes.scss

@@ -36,7 +36,7 @@
 }
 
 #stats.pane {
-  background-image: url("../images/home/background-blurred-oranges.jpg");
+  background-image: url("/images/home/background-blurred-oranges.jpg");
   background-position: center center;
   background-color: $ofn-grey;
 
@@ -88,7 +88,7 @@
   }
 
   .home-icon-box {
-    background-image: url("../images/ofn-o.png");
+    background-image: url("/images/ofn-o.png");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: auto 100%;
@@ -115,15 +115,15 @@
       background-size: auto 100%;
 
       &.search {
-        background-image: url("../images/icon-mask-magnifier.png");
+        background-image: url("/images/icon-mask-magnifier.png");
       }
 
       &.shop {
-        background-image: url("../images/icon-mask-apple.png");
+        background-image: url("/images/icon-mask-apple.png");
       }
 
       &.pick-up-delivery {
-        background-image: url("../images/icon-mask-truck.png");
+        background-image: url("/images/icon-mask-truck.png");
       }
     }
   }

app/webpacker/css/darkswarm/home_tagline.scss

@@ -9,7 +9,7 @@
     @include fullbg;
 
     background-color: $ofn-grey;
-    //background-image: url("../../images/home/home.jpg");
+    //background-image: url("/../images/home/home.jpg");
     position: fixed;
     left: 0;
     right: 0;

app/webpacker/css/darkswarm/mixins.scss

@@ -3,7 +3,7 @@
 // Generic \\
 
 @mixin tiledPane {
-  background-image: url("../images/tile-wide.png");
+  background-image: url("/images/tile-wide.png");
   background-color: $brand-colour;
   background-position: center center;
 
@@ -177,21 +177,21 @@
 
 @mixin producersbg {
   background-color: lighten($clr-turquoise, 68%);
-  background-image: url("../images/producers.svg");
+  background-image: url("/images/producers.svg");
   background-position: center 50px;
   background-repeat: no-repeat;
   background-size: 922px 763px;
 }
 
 @mixin hubsbg {
   background-color: $brand-colour;
-  background-image: url("../images/hubs-bg.jpg");
+  background-image: url("/images/hubs-bg.jpg");
   background-position: center center;
 }
 
 @mixin groupsbg {
   background-color: lighten($clr-brick, 56%);
-  background-image: url("../images/groups.svg");
+  background-image: url("/images/groups.svg");
   background-position: center 50px;
   background-repeat: no-repeat;
   background-size: 922px 922px;

app/webpacker/css/darkswarm/page_alert.scss

@@ -9,7 +9,7 @@ $page-alert-height: 55px;
     border-left: none;
     border-right: none;
     background-color: #bbb;
-    background-image: url("../images/tile-wide.png");
+    background-image: url("/images/tile-wide.png");
     background-position: center center;
     padding: 12px 0 8px 0;
     margin: 0;

app/webpacker/css/darkswarm/shop_search.scss

@@ -27,7 +27,7 @@
     padding: 0 2.25em 0 2.75em;
     width: 100%;
     min-width: 0;
-    background: $white url("../images/icn-search-grey.png") 1em center no-repeat;
+    background: $white url("/images/icn-search-grey.png") 1em center no-repeat;
     font-size: 1rem; // avoid zoom on iphone, see issue #4535
 
     &::placeholder {

app/webpacker/css/darkswarm/split-checkout.scss

@@ -298,7 +298,7 @@
     }
 
     &:after {
-      background-image: url("../images/edit-with-pen.svg");
+      background-image: url("/images/edit-with-pen.svg");
       content: " ";
       display: inline-block;
       width: 1em;

app/webpacker/css/darkswarm/style.scss

@@ -1,10 +1,10 @@
 @font-face {
 	font-family: 'OFN';
-	src: url('../fonts/OFN-v2.eot');
-	src: url('../fonts/OFN-v2.eot') format('embedded-opentype'),
-		url('../fonts/OFN-v2.woff') format('woff'),
-		url('../fonts/OFN-v2.ttf') format('truetype'),
-		url('../fonts/OFN-v2.svg') format('svg');
+	src: url('/fonts/OFN-v2.eot');
+	src: url('/fonts/OFN-v2.eot') format('embedded-opentype'),
+		url('/fonts/OFN-v2.woff') format('woff'),
+		url('/fonts/OFN-v2.ttf') format('truetype'),
+		url('/fonts/OFN-v2.svg') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }

app/webpacker/css/shared/question-mark-icon.scss

@@ -6,7 +6,7 @@
 }
 
 .question-mark-icon {
-  background-image: url("../images/question-mark-icon.svg");
+  background-image: url("/images/question-mark-icon.svg");
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 50%;

app/webpacker/css/shared/variables/variables.scss

@@ -9,11 +9,11 @@ $modal-zIndex: 1005;
 
 @font-face {
 	font-family: 'OFN';
-	src: url('../fonts/OFN-v2.eot');
-	src: url('../fonts/OFN-v2.eot') format('embedded-opentype'),
-		url('../fonts/OFN-v2.woff') format('woff'),
-		url('../fonts/OFN-v2.ttf') format('truetype'),
-		url('../fonts/OFN-v2.svg') format('svg');
+	src: url('/fonts/OFN-v2.eot');
+	src: url('/fonts/OFN-v2.eot') format('embedded-opentype'),
+		url('/fonts/OFN-v2.woff') format('woff'),
+		url('/fonts/OFN-v2.ttf') format('truetype'),
+		url('/fonts/OFN-v2.svg') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }

app/webpacker/packs/application.js

@@ -12,8 +12,8 @@ mrujs.start({
   ],
 });
 
-require.context("../fonts", true);
-const images = require.context("../images", true);
-const imagePath = (name) => images(name, true);
+// require.context("../fonts", true);
+// const images = require.context("../images", true);
+// const imagePath = (name) => images(name, true);
 
 import "controllers";