From 177445521cc2761dd69470eb226941fa4447023c Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 13 Apr 2023 16:02:25 +1000 Subject: [PATCH] Move most images to asset pipeline Webpacker still needs to know about them in order to build links. --- app/views/admin/producer_properties/_form.html.haml | 2 +- app/views/components/_spinner.html.haml | 2 +- app/views/home/_tagline.html.haml | 2 +- app/views/layouts/registration.html.haml | 2 +- app/views/producers/_fat.html.haml | 2 +- app/views/registration/steps/_limit_reached.html.haml | 2 +- app/views/shared/_footer.html.haml | 2 +- app/views/shared/menu/_cart.html.haml | 2 +- app/views/shared/menu/_mobile_menu.html.haml | 4 ++-- app/views/shared/menu/_signed_in.html.haml | 2 +- app/views/shared/menu/_signed_out.html.haml | 2 +- app/views/shop/products/_searchbar.haml | 2 +- app/views/shopping_shared/tabs/_contact.html.haml | 2 +- .../admin/payments/source_forms/_gateway.html.haml | 2 +- app/webpacker/css/admin/welcome.scss | 2 +- .../css/admin_v3/shared/question-mark-icon.scss | 2 +- app/webpacker/css/darkswarm/_shop-navigation.scss | 4 ++-- app/webpacker/css/darkswarm/footer.scss | 2 +- app/webpacker/css/darkswarm/home_panes.scss | 10 +++++----- app/webpacker/css/darkswarm/mixins.scss | 8 ++++---- app/webpacker/css/darkswarm/page_alert.scss | 2 +- app/webpacker/css/darkswarm/shop_search.scss | 2 +- app/webpacker/css/darkswarm/split-checkout.scss | 2 +- app/webpacker/css/shared/question-mark-icon.scss | 2 +- config/application.rb | 2 ++ config/initializers/webpack.rb | 10 ---------- config/webpacker.yml | 4 ++-- spec/support/file_helper.rb | 4 ++-- 28 files changed, 39 insertions(+), 47 deletions(-) delete mode 100644 config/initializers/webpack.rb diff --git a/app/views/admin/producer_properties/_form.html.haml b/app/views/admin/producer_properties/_form.html.haml index 05ad2d874d..d58475155f 100644 --- a/app/views/admin/producer_properties/_form.html.haml +++ b/app/views/admin/producer_properties/_form.html.haml @@ -1,6 +1,6 @@ %fieldset.no-border-top .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-sortable-link" => main_app.update_positions_admin_enterprise_producer_properties_url(@enterprise)} %thead %tr diff --git a/app/views/components/_spinner.html.haml b/app/views/components/_spinner.html.haml index b4492c4b14..3c1fe5ce10 100644 --- a/app/views/components/_spinner.html.haml +++ b/app/views/components/_spinner.html.haml @@ -1,2 +1,2 @@ = cache do - %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%" } diff --git a/app/views/home/_tagline.html.haml b/app/views/home/_tagline.html.haml index 56dc937f25..f91ca62f0a 100644 --- a/app/views/home/_tagline.html.haml +++ b/app/views/home/_tagline.html.haml @@ -3,7 +3,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 diff --git a/app/views/layouts/registration.html.haml b/app/views/layouts/registration.html.haml index c69a36164a..ad3dd16642 100644 --- a/app/views/layouts/registration.html.haml +++ b/app/views/layouts/registration.html.haml @@ -20,7 +20,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 diff --git a/app/views/producers/_fat.html.haml b/app/views/producers/_fat.html.haml index 202f761266..0da57dbc71 100644 --- a/app/views/producers/_fat.html.haml +++ b/app/views/producers/_fat.html.haml @@ -41,7 +41,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"} diff --git a/app/views/registration/steps/_limit_reached.html.haml b/app/views/registration/steps/_limit_reached.html.haml index 6f07dd80b9..ca5f7191c9 100644 --- a/app/views/registration/steps/_limit_reached.html.haml +++ b/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") diff --git a/app/views/shared/_footer.html.haml b/app/views/shared/_footer.html.haml index 5d121a4ea2..186594b6fa 100644 --- a/app/views/shared/_footer.html.haml +++ b/app/views/shared/_footer.html.haml @@ -4,7 +4,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 diff --git a/app/views/shared/menu/_cart.html.haml b/app/views/shared/menu/_cart.html.haml index eb5fe0a563..52378d18ac 100644 --- a/app/views/shared/menu/_cart.html.haml +++ b/app/views/shared/menu/_cart.html.haml @@ -4,6 +4,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() }} diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml index 544cb65631..d9b4a175e3 100644 --- a/app/views/shared/menu/_mobile_menu.html.haml +++ b/app/views/shared/menu/_mobile_menu.html.haml @@ -2,7 +2,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 @@ -18,7 +18,7 @@ %span = t '.cart' %span.count - = image_pack_tag "menu/icn-cart.svg" + = image_tag "menu/icn-cart.svg" %span {{ Cart.total_item_count() }} diff --git a/app/views/shared/menu/_signed_in.html.haml b/app/views/shared/menu/_signed_in.html.haml index 059580c1a2..092d369b2e 100644 --- a/app/views/shared/menu/_signed_in.html.haml +++ b/app/views/shared/menu/_signed_in.html.haml @@ -1,7 +1,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' diff --git a/app/views/shared/menu/_signed_out.html.haml b/app/views/shared/menu/_signed_out.html.haml index d6913ec554..3efb7bde47 100644 --- a/app/views/shared/menu/_signed_out.html.haml +++ b/app/views/shared/menu/_signed_out.html.haml @@ -1,6 +1,6 @@ = cache_with_locale do %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' diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml index d1f2b65879..b834ed7eb7 100644 --- a/app/views/shop/products/_searchbar.haml +++ b/app/views/shop/products/_searchbar.haml @@ -9,7 +9,7 @@ "ng-debounce" => "200", "disable-enter-with-blur" => true} %a.clear{ type: 'button', "focus-search": true, "ng-show": 'query', "ng-click": 'clearQuery()' } - = image_pack_tag "icn-close.png" + = image_tag "icn-close.png" .hide-for-large-up %button{ type: 'button', "ng-click": 'toggleFilterSidebar()' } diff --git a/app/views/shopping_shared/tabs/_contact.html.haml b/app/views/shopping_shared/tabs/_contact.html.haml index f2f5b7a70c..24ba01d234 100644 --- a/app/views/shopping_shared/tabs/_contact.html.haml +++ b/app/views/shopping_shared/tabs/_contact.html.haml @@ -27,7 +27,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? diff --git a/app/views/spree/admin/payments/source_forms/_gateway.html.haml b/app/views/spree/admin/payments/source_forms/_gateway.html.haml index ac20d73609..ac88ecd047 100644 --- a/app/views/spree/admin/payments/source_forms/_gateway.html.haml +++ b/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 diff --git a/app/webpacker/css/admin/welcome.scss b/app/webpacker/css/admin/welcome.scss index 74b8dfe290..f4140cf4ca 100644 --- a/app/webpacker/css/admin/welcome.scss +++ b/app/webpacker/css/admin/welcome.scss @@ -4,7 +4,7 @@ padding: 4em 2em; background-color: black; - background-image: url("../images/home/tagline-bg.jpg"); + background-image: url("../../assets/images/home/tagline-bg.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; diff --git a/app/webpacker/css/admin_v3/shared/question-mark-icon.scss b/app/webpacker/css/admin_v3/shared/question-mark-icon.scss index 9e9d40c893..a71d26d949 100644 --- a/app/webpacker/css/admin_v3/shared/question-mark-icon.scss +++ b/app/webpacker/css/admin_v3/shared/question-mark-icon.scss @@ -4,7 +4,7 @@ } .question-mark-icon { - background-image: url("../images/question-mark-icon.svg"); + background-image: url("../../assets/images/question-mark-icon.svg"); background-size: cover; background-repeat: no-repeat; border-radius: 50%; diff --git a/app/webpacker/css/darkswarm/_shop-navigation.scss b/app/webpacker/css/darkswarm/_shop-navigation.scss index d01897d942..a0322c604f 100644 --- a/app/webpacker/css/darkswarm/_shop-navigation.scss +++ b/app/webpacker/css/darkswarm/_shop-navigation.scss @@ -60,7 +60,7 @@ ordercycle { } select { - background-image: url('../images/white-caret.svg'); + background-image: url('../../assets/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('../../assets/images/black-caret.svg'); color: $grey-500; font-style: italic; } diff --git a/app/webpacker/css/darkswarm/footer.scss b/app/webpacker/css/darkswarm/footer.scss index 246c904328..d4812a2421 100644 --- a/app/webpacker/css/darkswarm/footer.scss +++ b/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("../../assets/images/tile-wide.png"); background-position: center center; background-color: #bbb; padding: 12px 0 8px 0; diff --git a/app/webpacker/css/darkswarm/home_panes.scss b/app/webpacker/css/darkswarm/home_panes.scss index d96e931466..905b93a2ef 100644 --- a/app/webpacker/css/darkswarm/home_panes.scss +++ b/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("../../assets/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("../../assets/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("../../assets/images/icon-mask-magnifier.png"); } &.shop { - background-image: url("../images/icon-mask-apple.png"); + background-image: url("../../assets/images/icon-mask-apple.png"); } &.pick-up-delivery { - background-image: url("../images/icon-mask-truck.png"); + background-image: url("../../assets/images/icon-mask-truck.png"); } } } diff --git a/app/webpacker/css/darkswarm/mixins.scss b/app/webpacker/css/darkswarm/mixins.scss index e7385bd80f..ca0851f7d0 100644 --- a/app/webpacker/css/darkswarm/mixins.scss +++ b/app/webpacker/css/darkswarm/mixins.scss @@ -3,7 +3,7 @@ // Generic \\ @mixin tiledPane { - background-image: url("../images/tile-wide.png"); + background-image: url("../../assets/images/tile-wide.png"); background-color: $brand-colour; background-position: center center; @@ -177,7 +177,7 @@ @mixin producersbg { background-color: lighten($clr-turquoise, 68%); - background-image: url("../images/producers.svg"); + background-image: url("../../assets/images/producers.svg"); background-position: center 50px; background-repeat: no-repeat; background-size: 922px 763px; @@ -185,13 +185,13 @@ @mixin hubsbg { background-color: $brand-colour; - background-image: url("../images/hubs-bg.jpg"); + background-image: url("../../assets/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("../../assets/images/groups.svg"); background-position: center 50px; background-repeat: no-repeat; background-size: 922px 922px; diff --git a/app/webpacker/css/darkswarm/page_alert.scss b/app/webpacker/css/darkswarm/page_alert.scss index b905926dd6..e737679677 100644 --- a/app/webpacker/css/darkswarm/page_alert.scss +++ b/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("../../assets/images/tile-wide.png"); background-position: center center; padding: 12px 0 8px 0; margin: 0; diff --git a/app/webpacker/css/darkswarm/shop_search.scss b/app/webpacker/css/darkswarm/shop_search.scss index 115e0c48ca..560bd5ee59 100644 --- a/app/webpacker/css/darkswarm/shop_search.scss +++ b/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("../../assets/images/icn-search-grey.png") 1em center no-repeat; font-size: 1rem; // avoid zoom on iphone, see issue #4535 &::placeholder { diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index 2088f97286..5a96407525 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -298,7 +298,7 @@ } &:after { - background-image: url("../images/edit-with-pen.svg"); + background-image: url("../../assets/images/edit-with-pen.svg"); content: " "; display: inline-block; width: 1em; diff --git a/app/webpacker/css/shared/question-mark-icon.scss b/app/webpacker/css/shared/question-mark-icon.scss index 932c897844..bd00a1254f 100644 --- a/app/webpacker/css/shared/question-mark-icon.scss +++ b/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("../../assets/images/question-mark-icon.svg"); background-size: cover; background-repeat: no-repeat; border-radius: 50%; diff --git a/config/application.rb b/config/application.rb index a6e2dc3398..11227f7098 100644 --- a/config/application.rb +++ b/config/application.rb @@ -202,6 +202,8 @@ module Openfoodnetwork config.assets.precompile += ['mail.scss'] config.assets.precompile += ['*.jpg', '*.jpeg', '*.png', '*.gif' '*.svg'] + config.assets.paths += ['app/assets/images'] + # Highlight code that triggered database queries in logs. config.active_record.verbose_query_logs = ENV.fetch("VERBOSE_QUERY_LOGS", false) diff --git a/config/initializers/webpack.rb b/config/initializers/webpack.rb deleted file mode 100644 index 4ccf08144e..0000000000 --- a/config/initializers/webpack.rb +++ /dev/null @@ -1,10 +0,0 @@ - -module WebpackImageExtension - def image_pack_path(image) - # The Webpacker::Helper#resolve_path_to_image method is incredibly useful - # for nicely fetching Webpacker image paths, but it's private. - resolve_path_to_image(image) - end -end - -Webpacker::Helper.include WebpackImageExtension diff --git a/config/webpacker.yml b/config/webpacker.yml index 64a7e11855..37c3616045 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -9,12 +9,12 @@ default: &default webpack_compile_output: true # Additional paths webpack should lookup modules - # ['app/assets', 'engine/foo/app/assets'] additional_paths: [ 'vendor', 'app/webpacker/css', 'app/webpacker/fonts', 'app/webpacker/images', + 'app/assets/images', # images should be outside of webpacker where possible 'engines/web/app/assets/stylesheets', 'app/components' ] @@ -94,6 +94,6 @@ production: &production test: <<: *default - + # Compile test packs to a separate directory public_output_path: packs-test diff --git a/spec/support/file_helper.rb b/spec/support/file_helper.rb index 3e2feb2233..7221602e6a 100644 --- a/spec/support/file_helper.rb +++ b/spec/support/file_helper.rb @@ -10,11 +10,11 @@ module FileHelper end def black_logo_path - Rails.root.join('app/webpacker/images/logo-black.png') + Rails.root.join('app/assets/images/logo-black.png') end def white_logo_path - Rails.root.join('app/webpacker/images/logo-white.png') + Rails.root.join('app/assets/images/logo-white.png') end def terms_pdf_file