Dynamic Logo/Background Image

* Navigation link ordering does not persist (#291)

- orders link options by the navigation link order to ensure that order
  of selected options are preserved across saves
- fixes flaky feature website/configuration_spec.rb to be more explicit
  about slug path

[Navigation link ordering does not persist](https://miro.com/app/board/uXjVO6C1LxA=/?moveToWidget=3458764525170508650&cot=14)

* Dynamic Logo/Background Image

- Adds ability to embed the logo image or background image to a page
- Updates templates to use custom dynamic tags
- Updates website documentation about custom logo and background tags

* Adds links with anchors to documentation

Author: jonsgreen

app/decorators/website_decorator.rb

@@ -61,6 +61,10 @@ def background_style
     { style: "background-image: url('#{h.url_for(background)}');" }
   end
 
+  def background_style_html
+    background_style.map {|key, value| "#{key} = \"#{value}\""}.join(' ').html_safe
+  end
+
   def session_format_configs
     event.session_formats.map.with_index do |session_format, index|
       SessionFormatConfig.find_or_initialize_by(session_format: session_format) do |config|
@@ -82,7 +86,7 @@ def link_options
     @link_options ||= pages.published.pluck(:name, :slug)
       .each_with_object(DEFAULT_LINKS.dup) do |(name, slug), memo|
       memo[name] = slug
-    end
+    end.sort_by { |_key, value| navigation_links.index(value) || 0 }.to_h
   end
 
   def tracks

app/helpers/image_helper.rb

@@ -1,5 +1,6 @@
 module ImageHelper
   def resize_image_tag(image, width:, height: width)
+    width ||= 100
     return unless image.attached?
     if image.content_type.match('svg')
       image_tag(image, width: width)

app/helpers/page_helper.rb

@@ -2,14 +2,38 @@ module PageHelper
   TAGS = {
     "<sponsors-banner-adds></sponsors-banner-adds>" => "sponsors/banner_ads", #DEPRECATED spelling mistake
     "<sponsors-banner-ads></sponsors-banner-ads>" => "sponsors/banner_ads",
-    "<sponsors-footer></sponsors-footer>" => "sponsors/sponsors_footer"
+    "<sponsors-footer></sponsors-footer>" => "sponsors/sponsors_footer",
+    /(<logo-image.*><\/logo-image>)/ => :logo_image,
+    "background-image-style-url" => :background_style,
   }
 
   def embed(body)
     body.tap do |body|
       TAGS.each do |tag, template|
-        body.gsub!(tag, render(template: template, layout: false))
+        body.gsub!(tag) do
+          args = tag.is_a?(Regexp) ? extract($1) : {}
+          case template
+          when String
+            render(**args.merge(template: template, layout: false))
+          when Symbol
+            send(template, **args)
+          end
+        end
       end
     end.html_safe
   end
+
+  def extract(tag)
+    fragment = Nokogiri::HTML.fragment(tag)
+    tag_name = fragment.children.first.name
+    fragment.at(tag_name).to_h.symbolize_keys
+  end
+
+  def background_style
+    current_website.background_style_html
+  end
+
+  def logo_image(args)
+    resize_image_tag(current_website.logo, **args)
+  end
 end

app/helpers/website_helper.rb

@@ -1,4 +1,5 @@
 module WebsiteHelper
+  DOCS_PAGE = "https://github.com/rubycentral/cfp-app/blob/main/docs/website_documentation.md".freeze
   def website_event_slug
     params[:slug] || (@older_domain_website && @older_domain_website.event.slug)
   end
@@ -8,4 +9,17 @@ def font_file_label(font)
       label.concat(" (Current File: #{font.file.filename.to_s})") if font.file.attached?
     end
   end
+
+  def legend_with_docs(title)
+    content_tag("legend", class: "fieldset-legend") do
+      concat(title)
+      concat(link_to_docs(title.parameterize))
+    end
+  end
+
+  def link_to_docs(anchor)
+    link_to(DOCS_PAGE + "##{anchor}", target: "_blank") do
+      content_tag("i", nil, class: "fa fa-fw fa-question-circle")
+    end
+  end
 end

app/views/staff/pages/_form.html.haml

@@ -19,6 +19,7 @@
         %div{ data: { "editor-target": :html } }
           = f.input :unpublished_body,
             as: :text,
+            label: "Unpublished Body #{link_to_docs("codemirror")}".html_safe,
             input_html: { data: { "editor-target": :htmlContent } }
           = link_to("WYSIWYG", '#', { data: { action: "click->editor#wysiwyg" } })
     .resize

app/views/staff/pages/index.html.haml

@@ -15,7 +15,9 @@
           %th Slug
           %th Published
           %th Landing Page
-          %th Actions
+          %th
+            Actions
+            = link_to_docs("previewing")
       %tbody
         = render @pages
 %hr

app/views/staff/pages/new.html.haml

@@ -1,10 +1,12 @@
 .row
   .col-md-12
     .page-header.clearfix
-      %h1 New Website Page
+      %h1
+        New Website Page
+        = link_to_docs("page-content-management")
       = simple_form_for(:page, url: new_event_staff_page_path, method: :get) do |f|
         = f.input(:template,
-          label: "Start from scratch or choose a template below",
+          label: "Start from scratch or choose a template below #{link_to_docs("page-templates")}".html_safe,
           required: false,
           collection: Page::TEMPLATES.keys,
           include_blank: true,

app/views/staff/pages/themes/default/home.html.erb

@@ -1,4 +1,4 @@
-<div class="pb-6 w-screen z-0 relative" style="background-image: url('<%= url_for(current_website.background) %>');" >
+<div class="pb-6 w-screen z-0 relative" background-image-style-url>
   <div class="pt-8 w-full flex flex-col items-center lg:items-start lg:flex-row lg:justify-between h-full max-w-5xl mx-auto">
     <div class="lg:w-1/2 pl-12 mb-6 lg:mb-0 lg:pt-8 z-10">
         <h2 class="text-3xl font-semibold mb-3">Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue.</h2>

app/views/staff/pages/themes/default/splash.html.erb

@@ -1,6 +1,4 @@
-<%= content_tag(:div,
-                **current_website.background_style,
-                class: "flex relative h-screen") do %>
+<div class="flex relative h-screen" background-image-style-url>
   <div class="flex flex-col justify-between z-10 bg-black bg-opacity-80 text-white p-8 w-full h-full">
     <div class="flex justify-between flex-col sm:flex-row">
       <div class="flex flex-col mb-2">
@@ -27,7 +25,7 @@
       </div>
     </div>
     <div class="flex flex-col items-start w-full my-4 sm:items-center">
-      <%= resize_image_tag(current_website.logo, width: 175) %>
+      <logo-image width=175></logo-image>
       <div class="text-2xl font-semibold mt-4"><%= current_website.name %></div>
       <div class="text-xl font-semibold"><%= current_website.city %></div>
       <div class="text-2xl font-semibold mt-4 mb-2"><%= current_website.date_range %></div>
@@ -49,4 +47,4 @@
       ) %>
     </div>
   </div>
-<% end %>
+</div>

app/views/staff/websites/_form.html.haml

@@ -2,7 +2,7 @@
   .row
     .col-md-6
       %fieldset
-        %legend.fieldset-legend General Content
+        = legend_with_docs("General Content")
         = image_input(f, :logo)
         = image_input(f, :background)
         = image_input(f, :favicon)
@@ -11,7 +11,7 @@
         = f.input :directions
         = f.input :prospectus_link
       %fieldset
-        %legend.fieldset-legend Navigation and Footer
+        = legend_with_docs("Navigation and Footer")
         = f.label :navigation_links
         = f.select :navigation_links,
           website.link_options,
@@ -29,7 +29,7 @@
         = f.input :instagram_url
     .col-md-6
       %fieldset
-      %legend.fieldset-legend Configure Website Session Formats
+      = legend_with_docs("Configure Website Session Formats")
       = f.simple_fields_for :session_format_configs do |ff|
         .session-format-name
           = "Configure #{ff.object.session_format.name}"
@@ -40,7 +40,7 @@
           = ff.hidden_field :session_format_id
 
       %div{"data-controller": "nested-form", class: "nested-fonts"}
-        %h4 Fonts
+        =legend_with_docs("Fonts")
         %template{"data-nested-form-target": "template"}
           = f.simple_fields_for :fonts,
             Website::Font.new,
@@ -53,7 +53,7 @@
             data: { action: "click->nested-form#add_association" }
 
       %div{"data-controller": "nested-form"}
-        %legend.fieldset-legend Head and Footer Content
+        = legend_with_docs("Head and Footer Content")
         %template{"data-nested-form-target": "template"}
           = f.simple_fields_for :contents,
             Website::Content.new,
@@ -65,14 +65,14 @@
           = link_to "Add Content", "#", class: 'btn btn-success',
             data: { action: "click->nested-form#add_association" }
 
-      %legend.fieldset-legend Meta Data
+      = legend_with_docs("Meta Data")
       = f.simple_fields_for :meta_data, website.meta_data do |ff|
         = ff.input :title
         = ff.input :author
         = ff.input :description
         = image_input(ff, :image)
 
-      %legend.fieldset-legend Domains/Caching
+      = legend_with_docs("Domains and Caching")
       = f.input :domains
       = f.input :caching, collection: Website.cachings, include_blank: false
   .row