From 87ec3093a9e9847dddda0726c8976ddffd42b404 Mon Sep 17 00:00:00 2001 From: Georg Gadinger Date: Mon, 24 Oct 2022 22:55:48 +0200 Subject: [PATCH] allow for using SVG logos in the navbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 10 +++++++++- app/views/navigation/_desktop.haml | 7 +++++-- app/views/navigation/_guest.haml | 6 +++++- config/initializers/svg_logo.rb | 20 ++++++++++++++++++++ config/justask.yml.example | 3 +++ public/logo.svg | 1 + 6 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 config/initializers/svg_logo.rb create mode 100644 public/logo.svg diff --git a/app/javascript/styles/overrides/_navbar.scss b/app/javascript/styles/overrides/_navbar.scss index f5959ff0..e00e0e81 100644 --- a/app/javascript/styles/overrides/_navbar.scss +++ b/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)); } } -} \ No newline at end of file +} diff --git a/app/views/navigation/_desktop.haml b/app/views/navigation/_desktop.haml index 9fdb0a0e..4678d684 100644 --- a/app/views/navigation/_desktop.haml +++ b/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: '/' } - = 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"] %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 diff --git a/app/views/navigation/_guest.haml b/app/views/navigation/_guest.haml index d34f9455..282fbcab 100644 --- a/app/views/navigation/_guest.haml +++ b/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 diff --git a/config/initializers/svg_logo.rb b/config/initializers/svg_logo.rb new file mode 100644 index 00000000..166695e5 --- /dev/null +++ b/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 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 diff --git a/config/justask.yml.example b/config/justask.yml.example index b5e33f98..f4803e0c 100644 --- a/config/justask.yml.example +++ b/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 diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 00000000..b313d988 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file