feat: change how logo paths were controlled inside rails application

.env.production.sample

@@ -162,3 +162,10 @@ AZURE_OAUTH2_KEY=your_key
 AZURE_OAUTH2_SECRET=your_secret
 # optional tenant id if using a multi-tenant azure account: http://msdn.microsoft.com/en-us/library/azure/dn645542.aspx
 AZURE_OAUTH2_TENANT_ID=your_tenant_id
+
+# Logo pack
+# Use custom logo pack, see details in `./design/`
+# See detailed guidance (Chinese): https://littlefo.rest/@mashiro/108718664789141341
+# Note this will only change the path of assets generated on Rails side, for the assets controlled inside webpack, use Nginx
+# redirection instead.
+LOGO_PACK=_forest

app/helpers/branding_helper.rb

@@ -7,31 +7,43 @@ def logo_as_symbol(version = :icon)
       _logo_as_symbol_icon
     when :wordmark
       _logo_as_symbol_wordmark
+    when :wordmark_with_sub
+      suffix != '' ? _logo_as_symbol_wordmark_with_sub : _logo_as_symbol_wordmark
     end
   end
 
   def _logo_as_symbol_wordmark
     content_tag(:svg, tag(:use, href: '#logo-symbol-wordmark'), viewBox: '0 0 261 66', class: 'logo logo--wordmark')
   end
 
+  def _logo_as_symbol_wordmark_with_sub
+    content_tag(:svg, tag(:use, href: '#logo-symbol-wordmark-with-sub'), viewBox: '0 0 261 66', class: 'logo logo--wordmark')
+  end
+
   def _logo_as_symbol_icon
     content_tag(:svg, tag(:use, href: '#logo-symbol-icon'), viewBox: '0 0 79 79', class: 'logo logo--icon')
   end
 
   def render_logo
-    image_pack_tag('logo.svg', alt: 'Mastodon', class: 'logo logo--icon')
+    image_pack_tag("logo#{suffix}.svg", alt: 'Mastodon', class: 'logo logo--icon')
   end
 
   def render_symbol(version = :icon)
     path = begin
       case version
       when :icon
-        'logo-symbol-icon.svg'
+        "logo-symbol-icon#{suffix}.svg"
       when :wordmark
-        'logo-symbol-wordmark.svg'
+        "logo-symbol-wordmark#{suffix}.svg"
+      when :wordmark_with_sub
+        "logo-symbol-wordmark#{suffix != '' ? '-with-sub' : ''}#{suffix}.svg"
       end
     end
 
     render(file: Rails.root.join('app', 'javascript', 'images', path)).html_safe # rubocop:disable Rails/OutputSafety
   end
+
+  def suffix
+    ENV['LOGO_PACK'] || ''
+  end
 end

app/serializers/manifest_serializer.rb

@@ -32,7 +32,7 @@ def short_name
   def icons
     ICON_SIZES.map do |size|
       {
-        src: full_pack_url("media/icons/android-chrome-#{size}x#{size}.png"),
+        src: full_pack_url("media/icons/android-chrome-#{size}x#{size}#{ENV['LOGO_PACK'] || ''}.png"),
         sizes: "#{size}x#{size}",
         type: 'image/png',
       }

app/views/about/show.html.haml

@@ -8,7 +8,7 @@
 .landing
   .landing__brand
     = link_to root_url, class: 'brand' do
-      = logo_as_symbol(:wordmark)
+      = logo_as_symbol(:wordmark_with_sub)
       %span.brand__tagline=t 'about.tagline'
 
   .landing__grid

app/views/layouts/application.html.haml

@@ -16,15 +16,15 @@
         %link{ rel: 'preconnect', href: 'https://fonts.googleapis.com' }/
         %link{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true }/
 
-    %link{ rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' }/
+    %link{ rel: 'icon', href: "/favicon#{ENV['LOGO_PACK'] || ''}.ico", type: 'image/x-icon' }/
 
     - %w(16 32 48).each do |size|
-      %link{ rel: 'icon', sizes: "#{size}x#{size}", href: asset_pack_path("media/icons/favicon-#{size}x#{size}.png"), type: 'image/png' }/
+      %link{ rel: 'icon', sizes: "#{size}x#{size}", href: asset_pack_path("media/icons/favicon-#{size}x#{size}#{ENV['LOGO_PACK'] || ''}.png"), type: 'image/png' }/
 
     - %w(57 60 72 76 114 120 144 152 167 180 1024).each do |size|
-      %link{ rel: 'apple-touch-icon', sizes: "#{size}x#{size}", href: asset_pack_path("media/icons/apple-touch-icon-#{size}x#{size}.png") }/
+      %link{ rel: 'apple-touch-icon', sizes: "#{size}x#{size}", href: asset_pack_path("media/icons/apple-touch-icon-#{size}x#{size}#{ENV['LOGO_PACK'] || ''}.png") }/
 
-    %link{ rel: 'mask-icon', href: asset_pack_path('media/images/logo-symbol-icon.svg'), color: '#6364FF' }/
+    %link{ rel: 'mask-icon', href: asset_pack_path("media/images/logo-symbol-icon#{ENV['LOGO_PACK'] || ''}.svg"), color: '#6364FF' }/
     %link{ rel: 'manifest', href: manifest_path(format: :json) }/
     %meta{ name: 'theme-color', content: '#282c37' }/
     %meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/
@@ -78,3 +78,4 @@
     .logo-resources{ 'tabindex' => '-1', 'inert' => true, 'aria-hidden' => true }
       = render_symbol :icon
       = render_symbol :wordmark
+      = render_symbol :wordmark_with_sub

app/views/layouts/auth.html.haml

@@ -6,7 +6,7 @@
     .logo-container
       %h1
         = link_to root_path do
-          = logo_as_symbol(:wordmark)
+          = logo_as_symbol(:wordmark_with_sub)
 
     .form-container
       = render 'flashes'

app/views/layouts/mailer.html.haml

@@ -24,7 +24,7 @@
                               %tr
                                 %td.column-cell
                                   = link_to root_url do
-                                    = image_tag full_pack_url('media/images/mailer/wordmark.png'), alt: 'Mastodon', height: 34, class: 'logo'
+                                    = image_tag full_pack_url("media/images/mailer/wordmark#{ENV['LOGO_PACK'] || ''}.png"), alt: 'Mastodon', height: 34, class: 'logo'
 
     = yield
 
@@ -49,4 +49,4 @@
                                 %p= link_to t('application_mailer.notification_preferences'), settings_preferences_notifications_url
                               %td.column-cell.text-right
                                 = link_to root_url do
-                                  = image_tag full_pack_url('media/images/mailer/logo.png'), alt: 'Mastodon', height: 24
+                                  = image_tag full_pack_url("media/images/mailer/logo#{ENV['LOGO_PACK'] || ''}.png"), alt: 'Mastodon', height: 24

lib/tasks/branding_forest.rake

@@ -19,7 +19,7 @@ namespace :branding_forest do
     # end
 
     # Displayed size is 34px, at 3x it's 102px
-    rsvg_convert.run(input: Rails.root.join('design', 'forest', 'logo-symbol-wordmark.svg'), size: 102, output: output_dest.join('wordmark_forest.png'))
+    rsvg_convert.run(input: Rails.root.join('design', 'forest', 'logo-symbol-wordmark-with-sub.svg'), size: 102, output: output_dest.join('wordmark_forest.png'))
 
     # Displayed size is 24px, at 3x it's 72px
     rsvg_convert.run(input: Rails.root.join('design', 'forest', 'logo-symbol-icon.svg'), size: 72, output: output_dest.join('logo_forest.png'))
@@ -32,6 +32,9 @@ namespace :branding_forest do
 
     rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.dark.css'), input: Rails.root.join('design', 'forest', 'logo-symbol-wordmark.svg'), size: 102, output: output_dest.join('wordmark_forest.dark.png'))
     rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.light.css'), input: Rails.root.join('design', 'forest', 'logo-symbol-wordmark.svg'), size: 102, output: output_dest.join('wordmark_forest.light.png'))
+
+    rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.dark.css'), input: Rails.root.join('design', 'forest', 'logo-symbol-wordmark-with-sub.svg'), size: 102, output: output_dest.join('wordmark-with-sub_forest.dark.png'))
+    rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.light.css'), input: Rails.root.join('design', 'forest', 'logo-symbol-wordmark-with-sub.svg'), size: 102, output: output_dest.join('wordmark-with-sub_forest.light.png'))
   end
 
   desc 'Generate favicons and app icons from SVG source files (for the Little Forest)'
@@ -93,5 +96,9 @@ namespace :branding_forest do
     logo_symbol_wordmark_source = Rails.root.join('design', 'forest', 'logo-symbol-wordmark.svg')
     logo_symbol_wordmark_dest   = Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark_forest.svg')
     FileUtils.cp(logo_symbol_wordmark_source, logo_symbol_wordmark_dest)
+
+    logo_symbol_wordmark_with_sub_source = Rails.root.join('design', 'forest', 'logo-symbol-wordmark-with-sub.svg')
+    logo_symbol_wordmark_with_sub_dest   = Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark-with-sub_forest.svg')
+    FileUtils.cp(logo_symbol_wordmark_with_sub_source, logo_symbol_wordmark_with_sub_dest)
   end
 end