Theme specific navigation logo for scrolled entries

.travis.yml

@@ -113,7 +113,7 @@ jobs:
             }
           fi
         - yarn install
-        - (cd entry_types/scrolled; bundle exec rake pageflow_scrolled:dummy)
+        - (cd entry_types/scrolled; PAGEFLOW_PLUGIN_ENGINE=pageflow_scrolled bundle exec rake pageflow_scrolled:dummy)
       script:
         - |
           export PAGEFLOW_PAPERCLIP_S3_ROOT=$([[ $ON_UPSTREAM == "true" ]] &&

entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb

@@ -7,9 +7,10 @@ module EntryJsonSeedHelper
     include Pageflow::RenderJsonHelper
     include Pageflow::FilesHelper
     include Pageflow::EntriesHelper
+    include Pageflow::MetaTagsHelper
     include Pageflow::SocialShareLinksHelper
     include PageflowScrolled::I18nHelper
-    include Pageflow::MetaTagsHelper
+    include PageflowScrolled::ThemesHelper
 
     def scrolled_entry_json_seed_script_tag(scrolled_entry, options = {})
       seed_json = render_json do |json|

entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb

@@ -0,0 +1,8 @@
+module PageflowScrolled
+  # @api private
+  module ThemesHelper
+    def scrolled_theme_asset_path(theme, path)
+      asset_pack_path("media/pageflow-scrolled/themes/#{theme.name}/#{path}")
+    end
+  end
+end

entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder

@@ -28,6 +28,8 @@ json.config do
       json.url entry_privacy_link_url(entry)
     end
   end
+
+  json.partial! 'pageflow_scrolled/entry_json_seed/theme', theme: entry.theme
 end
 
 unless options[:skip_i18n]

entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder

@@ -0,0 +1,7 @@
+json.theme do
+  json.assets do
+    json.logo_desktop scrolled_theme_asset_path(theme, 'logoDesktop.svg')
+    json.logo_mobile scrolled_theme_asset_path(theme, 'logoMobile.svg')
+  end
+  json.options(theme.options.deep_transform_keys { |key| key.to_s.camelize(:lower) })
+end

entry_types/scrolled/doc/creating_themes.md

@@ -0,0 +1,21 @@
+# Creating Themes
+
+Copy the default theme directory
+`app/javascript/pageflow-scrolled/themes/default` to a new directory
+with the name of your theme
+(e.g. `app/javascript/pageflow-scrolled/themes/my_custom_theme`) and
+replace images as needed.
+
+Register the theme in the Pageflow initializer:
+
+    # config/initializers/pageflow.rb
+    Pageflow.configure do |config|
+      config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
+        # ...
+
+        entry_type_config.themes.register(:my_custom_theme,
+                                          logo_alt_text: '...')
+      end
+    end
+
+Copy all options from the default theme and make the desired changes.

entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb

@@ -4,6 +4,8 @@ module Generators
     class InstallGenerator < Rails::Generators::Base
       desc 'Installs Pageflow Scrolled entry type.'
 
+      source_root File.expand_path('templates', __dir__)
+
       def install_webpacker
         require 'webpacker'
         gemfile = File.expand_path('../../../../../../Gemfile', __dir__)
@@ -36,6 +38,8 @@ def frontend_pack
         create_file 'app/javascript/packs/pageflow-scrolled-frontend.js', <<-JS
           import 'pageflow-scrolled/frontend';
           import 'pageflow-scrolled/contentElements-frontend';
+
+          require.context('../pageflow-scrolled/themes', true);
         JS
       end
 
@@ -52,6 +56,10 @@ def theme_pack
           @import "pageflow-scrolled/contentElements-frontend.css";
         JS
       end
+
+      def default_theme
+        directory 'theme', 'app/javascript/pageflow-scrolled/themes/default'
+      end
     end
   end
 end

entry_types/scrolled/package/spec/entryState/theme-spec.js

@@ -0,0 +1,23 @@
+import {useTheme} from 'entryState';
+
+import {renderHookInEntry} from 'support';
+
+describe('useTheme', () => {
+  it('reads data from seed', () => {
+    const {result} = renderHookInEntry(
+      () => useTheme(), {
+        seed: {
+          themeOptions: {
+            some: 'option'
+          }
+        }
+      }
+    );
+
+    const theme = result.current;
+    expect(theme).toMatchObject({
+      assets: {},
+      options: {some: 'option'}
+    });
+  });
+});

entry_types/scrolled/package/spec/support/normalizeSeed.js

@@ -8,6 +8,7 @@
  * @param {Object} [options.shareUrlTemplates] - Mapping of share provider names to sharing urls.
  * @param {String} [options.defaultFileRights] - Default file rights of entry's account.
  * @param {Object} [options.legalInfo] - imprint, copyright and privacy information of entry.
+ * @param {Object} [options.themeOptions] - Options set via theme registration.
  * @param {Object} [options.entry] - attributes of entry.
  * @param {Array} [options.imageFiles] - Array of objects with image file attributes of entry.
  * @param {Array} [options.videoFiles] - Array of objects with video file attributes of entry.
@@ -26,6 +27,7 @@ export function normalizeSeed({
   shareUrlTemplates,
   defaultFileRights,
   legalInfo,
+  themeOptions,
   entry,
   imageFiles,
   videoFiles,
@@ -67,7 +69,8 @@ export function normalizeSeed({
       prettyUrl: prettyUrl,
       shareUrlTemplates: normalizeShareUrlTemplates(shareUrlTemplates),
       defaultFileRights: defaultFileRights,
-      legalInfo: normalizeLegalInfo(legalInfo)
+      legalInfo: normalizeLegalInfo(legalInfo),
+      theme: normalizeTheme(themeOptions)
     },
     collections: {
       entries: normalizedEntries,
@@ -163,6 +166,13 @@ function normalizeLegalInfo(legalInfo) {
   }
 }
 
+function normalizeTheme(options = {}) {
+  return {
+    assets: {},
+    options
+  }
+}
+
 function normalizeCollection(collection = [], defaults = {}) {
   return collection.map((item, index) => ({
     id: index + 1,

entry_types/scrolled/package/src/entryState/index.js

@@ -5,6 +5,7 @@ export {useFile} from './useFile';
 export {useNestedFiles} from './useNestedFiles';
 export {useFileRights, useLegalInfo, useCredits} from './legalInfo';
 export {useAvailableQualities} from './useAvailableQualities';
+export {useTheme} from './theme';
 
 export {EntryStateProvider, useEntryStateDispatch} from './EntryStateProvider';
 

entry_types/scrolled/package/src/entryState/theme.js

@@ -0,0 +1,25 @@
+import {useEntryState} from "./EntryStateProvider";
+
+/**
+ * Returns an object containing theme asset paths.
+ *
+ * @example
+ *
+ * const theme = useTheme();
+ * theme // =>
+ *   {
+ *     assets: {
+ *       logoDesktop: 'path/to/logoDesktop.svg',
+ *       logoMobile: 'path/to/logoMobile.svg'
+ *     },
+ *     options: {
+ *       // options passed to `themes.register` in `pageflow.rb` initializer
+ *       // with camleized keys.
+ *     }
+ *   }
+ */
+export function useTheme() {
+  const entryState = useEntryState();
+
+  return entryState.config.theme;
+}

entry_types/scrolled/package/src/frontend/navigation/AppHeader.js

@@ -8,9 +8,9 @@ import {HamburgerIcon} from './HamburgerIcon'
 import {ChapterLink} from "./ChapterLink";
 import {LegalInfoMenu} from "./LegalInfoMenu";
 import {SharingMenu} from "./SharingMenu";
+import {Logo} from './Logo';
 
 import styles from './AppHeader.module.css';
-import WDRlogo from '../assets/images/navigation/wdr_logo_header.svg';
 
 export function AppHeader(props) {
   const [navExpanded, setNavExpanded] = useState(true);
@@ -89,7 +89,7 @@ export function AppHeader(props) {
         <HamburgerIcon onClick={handleBurgerMenuClick}
                        mobileNavHidden={mobileNavHidden}/>
 
-        <WDRlogo className={classNames(styles.menuIcon, styles.wdrLogo)}/>
+        <Logo />
 
         <nav className={classNames(styles.navigationChapters, {[styles.navigationChaptersHidden]: mobileNavHidden})}
              role="navigation"

entry_types/scrolled/package/src/frontend/navigation/AppHeader.module.css

@@ -49,10 +49,10 @@
   height: 50px;
 }
 
-.wdrLogo {
-  top: 12px;
+.logo {
+  top: 0;
   left: 15px;
-  width: 80px;
+  height: 100%;
 }
 
 .chapterList {
@@ -94,7 +94,7 @@
 
 /* mobile view */
 @media (max-width: 780px) {
-  .wdrLogo {
+  .logo {
     position: inherit;
   }
 

entry_types/scrolled/package/src/frontend/navigation/Logo.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import {useTheme} from '../../entryState';
+
+import styles from './AppHeader.module.css';
+
+export function Logo() {
+  const theme = useTheme();
+
+  return (
+    <picture>
+      <source media="(max-width: 780px)" srcSet={theme.assets.logoMobile} />
+      <source media="(min-width: 781px)" srcSet={theme.assets.logoDesktop} />
+      <img src={theme.assets.logoDesktop}
+           alt={theme.options.logoAltText}
+           className={classNames(styles.menuIcon, styles.logo)}/>
+    </picture>
+  );
+}

entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb

@@ -324,6 +324,37 @@ def render(helper, entry, options = {})
                                        })
       end
 
+      it 'renders theme assets' do
+        entry = create(:published_entry)
+
+        result = render(helper, entry)
+
+        expect(result).to include_json(config: {
+                                         theme: {
+                                           assets: {
+                                             logoDesktop: %r{themes/default/logoDesktop.*svg$}
+                                           }
+                                         }
+                                       })
+      end
+
+      it 'renders theme camelized options' do
+        pageflow_configure do |config|
+          config.themes.register(:default, some_option: 'value')
+        end
+        entry = create(:published_entry)
+
+        result = render(helper, entry)
+
+        expect(result).to include_json(config: {
+                                         theme: {
+                                           options: {
+                                             someOption: 'value'
+                                           }
+                                         }
+                                       })
+      end
+
       context 'i18n' do
         include_context 'fake translations'