diff --git a/.travis.yml b/.travis.yml index c205589e3c..9f4b91df14 100644 --- a/.travis.yml +++ b/.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" ]] && diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb index 02455288e5..1428a08058 100644 --- a/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb +++ b/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| diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb new file mode 100644 index 0000000000..49848ef2df --- /dev/null +++ b/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 diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder index 8705d59710..f30c67adac 100644 --- a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +++ b/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] diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder new file mode 100644 index 0000000000..07a933a233 --- /dev/null +++ b/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 diff --git a/entry_types/scrolled/doc/creating_themes.md b/entry_types/scrolled/doc/creating_themes.md new file mode 100644 index 0000000000..480e7d30aa --- /dev/null +++ b/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. diff --git a/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb index a4157904d6..dede0d1b7a 100644 --- a/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb +++ b/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 diff --git a/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDesktop.svg b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDesktop.svg new file mode 100644 index 0000000000..39b6e1c759 --- /dev/null +++ b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDesktop.svg @@ -0,0 +1,56 @@ + + + + +Element 1 + + + + + + + + + + + + + + + + + + + + diff --git a/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoMobile.svg b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoMobile.svg new file mode 100644 index 0000000000..2e74fed277 --- /dev/null +++ b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoMobile.svg @@ -0,0 +1,22 @@ + + + + +Pageflow + + + + + + + + diff --git a/entry_types/scrolled/package/spec/entryState/theme-spec.js b/entry_types/scrolled/package/spec/entryState/theme-spec.js new file mode 100644 index 0000000000..bf38719e40 --- /dev/null +++ b/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'} + }); + }); +}); diff --git a/entry_types/scrolled/package/spec/support/normalizeSeed.js b/entry_types/scrolled/package/spec/support/normalizeSeed.js index 5ca16e92a9..4b2512b869 100644 --- a/entry_types/scrolled/package/spec/support/normalizeSeed.js +++ b/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, diff --git a/entry_types/scrolled/package/src/entryState/index.js b/entry_types/scrolled/package/src/entryState/index.js index d73770adf8..5c73d82dfa 100644 --- a/entry_types/scrolled/package/src/entryState/index.js +++ b/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'; diff --git a/entry_types/scrolled/package/src/entryState/theme.js b/entry_types/scrolled/package/src/entryState/theme.js new file mode 100644 index 0000000000..dbe67e3034 --- /dev/null +++ b/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; +} diff --git a/entry_types/scrolled/package/src/frontend/assets/images/navigation/wdr_logo_header.svg b/entry_types/scrolled/package/src/frontend/assets/images/navigation/wdr_logo_header.svg deleted file mode 100644 index d831093539..0000000000 --- a/entry_types/scrolled/package/src/frontend/assets/images/navigation/wdr_logo_header.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - diff --git a/entry_types/scrolled/package/src/frontend/navigation/AppHeader.js b/entry_types/scrolled/package/src/frontend/navigation/AppHeader.js index 545e63e912..2256b6c3a9 100644 --- a/entry_types/scrolled/package/src/frontend/navigation/AppHeader.js +++ b/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) { - +