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

docs/website_documentation.md

@@ -29,8 +29,11 @@ show up in static page content that is generated from [Page Templates](#page-tem
 Logo, background and favicon images can be uploaded and will be stored in s3 and
 resized as needed using Rails' builtin
 [ActiveStorage](https://edgeguides.rubyonrails.org/active_storage_overview.html)).
-The background image can be used by setting a url for a `background-image` style
-in appropriate html tags in static page content. Other general content fields
+The logo and background images are used in the header and footer and some page
+templates but can also be applied dynamically in any page using the [logo and
+background custom tags](#logo-and-background).
+
+Other general content fields
 include:
 
 - City: the city for the event (can include the state if desired).
@@ -182,7 +185,7 @@ website including title, description, open graph and twitter tags. Fields includ
 - image: a file field for uploading an image that will populate the url for
   `og:image` and `twitter:image`
 
-### Domains/Caching
+### Domains and Caching
 
 #### Domain Configuration
 
@@ -316,15 +319,28 @@ the link below the editor block. Note that this editor has its own opionionated
 way of adding and editing the html and it is likely that someone more familiar
 with html will need to refine the content that has been added.
 
-### Custom Sponsor Tags
+### Custom Tags
 
+#### Sponsors
 Sponsor information can be embedded into any static page by adding some custom
 sponsor tags. Adding a `<sponsors-banner-ads></sponsors-banner-ads>` will add a
 rotating banner of the uploaded sponsors ads. Adding
 `<sponsors-footer></sponsors-footer>` will provide a complete list of the
 sponsors with their logos and description grouped by tiers typically added to
 the bottom of a page.
 
+#### Logo and Background
+You can also embed the current logo image into the page by adding the
+`<logo-image width="150"></logo-image>` tag into the page with whatever width
+you want for the logo in pixels.
+
+If you want to add the website background image as a background image style then
+add the `background-image-style-url` as an attribute to your tag like `<div
+background-image-style-url></div>`. If you need to further customize that tag
+you will not be able to add inline styles so we recommend using tailwind
+classes. For example to make the background image repeating this should work:
+`<div class="bg-repeat" background-image-style-url></div>`.
+
 ### Saving
 
 Content is **not auto-saved** so be sure to save any wanted changes. As a bit of
@@ -361,8 +377,6 @@ url for the website. Clicking on the `Promote` button on the Pages index page
 will promote the selected page. You can see which page is currently promoted in
 the `Landing Page` column of the Page index page.
 
-### Hiding the Header or Footer
-
 ### Other Buttons
 
 It is probably obvious that you can edit a page by clicking the `Edit` button

spec/features/website/configuration_spec.rb

@@ -44,7 +44,7 @@
 
     click_on(home_page.name, match: :first)
 
-    expect(current_path).to eq('/home')
+    expect(current_path).to eq("/#{home_page.slug}")
   end
 
   scenario "Organizer fails to add font file correctly", :js do

spec/features/website/page_management_spec.rb

@@ -108,14 +108,14 @@
 
   scenario "Organizer hides navigation to a page and hides a page entirely", :js do
     home_page = create(:page, published_body: 'Home Content')
-    website.update(navigation_links: [home_page.slug])
+    website.update(navigation_links: [home_page.slug, "schedule"])
     visit page_path(slug: event.slug, page: home_page.slug)
-    expect(page).to have_content('Home Content')
-    within('#main-nav') { expect(page).to have_link(home_page.name) }
+    within('#main-nav') { expect(page).to have_content(home_page.name) }
 
     login_as(organizer)
     visit edit_event_staff_website_path(event)
-    find_field('Navigation links').send_keys(:backspace)
+    expect(page).to have_content("Navigation links\nHomeSchedule")
+    find_field('Navigation links').send_keys(:backspace).send_keys(:backspace)
     fill_in('Navigation links', with: "Schedule\n")
     click_on("Save")