allow for using SVG logos in the navbar

this uses our ✨new and improved✨ logo by default, but can be easily
changed by modifying `/public/logo.svg`.  the svg is loaded only once
when the application starts, so any modifications to it after a
deployment are visible immediately.

thanks to the power of CSS and SVG being able to make use of it, custom
colour schemes still work too.

app/javascript/styles/overrides/_navbar.scss

@@ -6,6 +6,14 @@
     &:focus {
       color: RGB(var(--primary-text));
     }
+
+    /* svg-logo! \o/ */
+    svg {
+      height: $navbar-brand-font-size;
+      path {
+        fill: RGB(var(--primary-text));
+      }
+    }
   }
 
   .navbar-nav {
@@ -47,4 +55,4 @@
       color: RGB(var(--primary-text));
     }
   }
-}
+}

app/views/navigation/_desktop.haml

@@ -1,7 +1,10 @@
 %nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top.d-lg-block.d-none.d-print-none{ role: :navigation }
   .container{ class: ios_web_app? ? 'ios-web-app' : '' }
-    %a.navbar-brand{ href: '/' }
+    %a.navbar-brand{ href: '/', title: APP_CONFIG["site_name"] }
-      = APP_CONFIG['site_name']
+      - if APP_CONFIG["use_svg_logo"]
+        = render inline: Rails.application.config.justask_svg_logo
+      - else
+        = APP_CONFIG["site_name"]
     %ul.nav.navbar-nav.mr-auto
       = nav_entry t("navigation.timeline"), root_path, icon: 'home'
       = nav_entry t("navigation.inbox"), '/inbox', icon: 'inbox', badge: inbox_count

app/views/navigation/_guest.haml

@@ -1,6 +1,10 @@
 %nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top{ role: :navigation }
   .container{ class: ios_web_app? ? 'ios-web-app' : '' }
-    %a.navbar-brand{ href: '/' }= APP_CONFIG['site_name']
+    %a.navbar-brand{ href: '/', title: APP_CONFIG["site_name"] }
+      - if APP_CONFIG["use_svg_logo"]
+        = render inline: Rails.application.config.justask_svg_logo
+      - else
+        = APP_CONFIG["site_name"]
     %button.navbar-toggler{ data: { target: '#j2-main-navbar-collapse', toggle: :collapse }, type: :button }
       %span.sr-only= t("navigation.toggle")
       %span.navbar-toggler-icon

config/initializers/svg_logo.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+return unless APP_CONFIG[:use_svg_logo]
+
+begin
+  logo_path = Rails.public_path.join("logo.svg")
+  # we are only interested in the first element which should be the <svg> node --> extract it and transform some attributes
+  logo_svg = File.read(logo_path)
+  svg_doc = Nokogiri::XML(logo_svg)
+  svg_node = svg_doc.first_element_child
+  # remove some attributes that might interfere with the rest of the layout
+  %w[id name class width height].each do |attr|
+    svg_node.remove_attribute attr
+  end
+
+  Rails.application.config.justask_svg_logo = svg_node.to_xml
+rescue => e
+  warn "use_svg_logo is enabled, but the SVG could not be read due to: #{e.message} (#{e.class.name}).  Disabling SVG logo."
+  APP_CONFIG[:use_svg_logo] = false
+end

config/justask.yml.example

@@ -1,6 +1,9 @@
 # The site name, shown everywhere.
 site_name: "justask"
 
+# Use the SVG logo from `/public/logo.svg`
+use_svg_logo: false
+
 hostname: "justask.rrerr.net"
 https: true
 

public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 958.75 170.24"><defs><style>.cls-1{fill:#5e35b1;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="main_stuff" data-name="main stuff"><path class="cls-1" d="M210.08,93.09H137.94c3.53,13.17,15,20,29.49,20,9.45,0,17.8-2.6,24.85-8.72l11.31,12.06c-8,10-21.88,17.06-38.94,17.06-26.52,0-50.26-18-50.26-50.07,0-32.45,24.11-50.07,48.77-50.07C187.64,33.38,215.46,50.63,210.08,93.09ZM137.57,74.92H188c-1.48-13.72-13-20.59-24.66-20.59C151.85,54.33,140.72,61,137.57,74.92Z"/><path class="cls-1" d="M271.65,109.22v19.11c-3.71,3.33-10.75,4.45-16.87,4.45-16.32,0-28.19-8-28.19-27.82V55.08H212.87V35.23h13.72V10.57h25V35.23h19.84V55.08H251.63v45.8c0,5,2.78,9.83,10.94,9.83A31.27,31.27,0,0,0,271.65,109.22Z"/><path class="cls-1" d="M343.61,34.12V57.86a36.36,36.36,0,0,0-6.31-.56c-18.73,0-30.41,13-30.41,32.27v42.09H282V35.23h24.85v25c3.34-14.84,12.79-26.89,30.23-26.89A25.72,25.72,0,0,1,343.61,34.12Z"/><path class="cls-1" d="M345.65,83.45c0-32.64,25.59-50.07,50.81-50.07,25,0,50.81,17.43,50.81,50.07s-25.78,50.07-50.81,50.07C371.24,133.52,345.65,116.09,345.65,83.45Zm77,0c0-17.25-12.24-27.63-26.15-27.63S370.13,66.2,370.13,83.45s12.42,27.63,26.33,27.63S422.61,100.69,422.61,83.45Z"/><path class="cls-1" d="M451,106.44l19.84-5.37c1.85,6.3,6.49,12.79,15.95,12.79,6.3,0,12.42-3.15,12.42-10,0-4.64-3-8-10.57-10.76l-11.87-4.45c-15.95-5.75-22.62-16-22.62-27.63,0-17.25,15.2-27.63,33.38-27.63,17.43,0,30.23,9.83,33.38,24.66l-19.47,5c-2.6-7.79-7.61-10.2-12.8-10.2-6.49,0-10.38,3.71-10.38,8.35,0,4.08,2.41,7.6,10,10.19L499,75.47c11.86,4.27,24.84,11.32,24.84,28.38,0,19.28-16.5,29.67-36.71,29.67C468.05,133.52,454,124.25,451,106.44Z"/><path class="cls-1" d="M635.87,83.45c0,33.38-23.92,50.07-46.36,50.07-17.24,0-28.37-9.46-30.78-14.84h-.56V166.9H533.33V35.23h24.84v13h.56c2.41-5.37,13.54-14.83,30.78-14.83C612,33.38,635.87,50.07,635.87,83.45Zm-24.66,0c0-18-13-27.82-26.7-27.82-14.1,0-26.89,9.65-26.89,27.82s12.79,27.81,26.89,27.81C598.23,111.26,611.21,101.44,611.21,83.45Z"/><path class="cls-1" d="M707.09,34.12V57.86a36.25,36.25,0,0,0-6.3-.56c-18.73,0-30.42,13-30.42,32.27v42.09H645.52V35.23h24.85v25c3.34-14.84,12.8-26.89,30.23-26.89A25.61,25.61,0,0,1,707.09,34.12Z"/><path class="cls-1" d="M716.55,0H741.4V21.88H716.55Zm0,35.23H741.4v96.43H716.55Z"/><path class="cls-1" d="M846.55,74.92v56.74H821.7V79c0-14.1-7.6-23.37-20.59-23.37-12.79,0-20.58,9.27-20.58,23.37v52.66H755.68V35.23h24.85V48.4c5.38-8.53,15-15,29.49-15C829.86,33.38,846.55,45.62,846.55,74.92Z"/><path class="cls-1" d="M958.75,35.23v89.2c0,36.9-28.93,45.81-50.82,45.81-11.12,0-22.25-2.23-28-5.94V144.09c4.45,3,14.1,5.38,23.55,5.38,18.55,0,30.42-8.72,30.42-23.37v-7.42h-1.12c-2.41,5.38-13.16,14.84-30.22,14.84-22.26,0-46.36-16.69-46.36-50.07s24.1-50.07,46.36-50.07c17.06,0,27.81,9.46,30.22,14.83h1.12v-13Zm-24.3,48.22c0-18.17-12.79-27.82-26.89-27.82-13.9,0-26.89,9.83-26.89,27.82s13,27.81,26.89,27.81C921.66,111.26,934.45,101.62,934.45,83.45Z"/><path class="cls-1" d="M24.74,102.21a39.48,39.48,0,0,0,5.17,1.08c14.53,2,31.15-.92,45.28-7.56a73.4,73.4,0,0,1,8.48,34.89h22.65A93.26,93.26,0,0,0,93.59,83.5C103.67,74,108.76,62.39,108,50.35A39.88,39.88,0,0,0,84.36,16.86C68.54,9.65,50.13,9.84,36.68,10c-5.27.06-18.07.24-24.9.34H0V130.62H24.74Zm8.65-19.07c-4.22-.59-8.15-3.12-8.57-5.53a3.34,3.34,0,0,1,1.05-3.3c2.3-2.32,7.52-4,12.13-4h.66a38.36,38.36,0,0,1,23,8.67C52.48,82.67,42.07,84.35,33.39,83.14ZM24.74,30.52l12.2-.16c11.72-.12,26.31-.26,37.19,4.69A19.67,19.67,0,0,1,85.37,51.54c.39,6-2.15,11.06-5.37,14.92A61.43,61.43,0,0,0,39.59,49.9a46.85,46.85,0,0,0-14.85,1.91Z"/></g></g></svg>