diff --git a/src/components/theme/CatalogueViews/AppHeader.jsx b/src/components/theme/CatalogueViews/AppHeader.jsx
index 87aef11..3875a98 100644
--- a/src/components/theme/CatalogueViews/AppHeader.jsx
+++ b/src/components/theme/CatalogueViews/AppHeader.jsx
@@ -3,235 +3,228 @@
* @module components/theme/App/App
*/
-import React from 'react';
-
-const App = () => {
- return
Header
;
-};
-
-export default App;
-
-// import PropTypes from 'prop-types';
-// import { connect } from 'react-redux';
-// import { compose } from 'redux';
-// import { asyncConnect } from 'redux-connect';
-
-// import { Header } from '@plone/volto/components';
-// import { BodyClass, getBaseUrl, getView } from '@plone/volto/helpers';
-// import {
-// getContent,
-// getNavigation,
-// getTypes,
-// getWorkflow,
-// purgeMessages,
-// } from '@plone/volto/actions';
-// import {
-// getFrontpageSlides,
-// getDefaultHeaderImage,
-// } from '@eeacms/volto-forests-theme/actions';
-// import { getPortlets } from '@eeacms/volto-addons-forest/actions';
-// import config from '@plone/volto/registry';
-// import * as Sentry from '@sentry/browser';
-
-// class App extends Component {
-// static propTypes = {
-// pathname: PropTypes.string.isRequired,
-// purgeMessages: PropTypes.func.isRequired,
-// folderHeader: PropTypes.any,
-// // getDefaultHeaderImage: PropTypes.func.isRequired,
-// // defaultHeaderImage: PropTypes.object.isRequired,
-// };
-
-// state = {
-// hasError: false,
-// error: null,
-// errorInfo: null,
-// };
-
-// // shouldComponentUpdate(nextProps, nextState) {
-// // if (nextProps.loadingContent.loading || nextProps.search.loading) {
-// // console.log('dont load');
-// // return false;
-// // }
-// // console.log('load:', nextProps.loadingContent);
-// // return true;
-// // }
-// //
-// /**
-// * @method componentWillReceiveProps
-// * @param {Object} nextProps Next properties
-// * @returns {undefined}
-// */
-// componentWillReceiveProps(nextProps) {
-// if (nextProps.pathname !== this.props.pathname) {
-// this.props.purgeMessages();
-
-// if (this.state.hasError) {
-// this.setState({ hasError: false });
-// }
-// }
-// }
-
-// /**
-// * ComponentDidCatch
-// * @method ComponentDidCatch
-// * @param {string} error The error
-// * @param {string} info The info
-// * @returns {undefined}
-// */
-// componentDidCatch(error, info) {
-// this.setState({ hasError: true, error, errorInfo: info });
-// if (__CLIENT__) {
-// if (window?.env?.RAZZLE_SENTRY_DSN || __SENTRY__?.SENTRY_DSN) {
-// Sentry.captureException(error);
-// }
-// }
-// }
-
-// /**
-// * Render method.
-// * @method render
-// * @returns {string} Markup for the component.
-// */
-// render() {
-// const path = getBaseUrl(this.props.pathname);
-// const action = getView(this.props.pathname);
-// const leadImageCaption =
-// this.props.content?.lead_image_caption &&
-// this.props.content.lead_image_caption !== null
-// ? this.props.content.lead_image_caption
-// : '';
-
-// const bigLeading =
-// this.props.content?.big_leading_image &&
-// this.props.content.big_leading_image !== null
-// ? this.props.content.big_leading_image
-// : false;
-
-// const inheritLeadingData =
-// this.props.content?.inherit_leading_data &&
-// this.props.content.inherit_leading_data !== null
-// ? this.props.content.inherit_leading_data
-// : false;
-
-// const leadNavigation =
-// this.props.content?.lead_navigation &&
-// this.props.content.lead_navigation !== null
-// ? this.props.content.lead_navigation
-// : false;
-
-// const headerImage =
-// this.props.content?.image?.download || this.props.defaultHeaderImage;
-
-// const extraHeaderData = {
-// bigLeading,
-// inheritLeadingData,
-// parentData: this.props.content?.parent,
-// leadNavigation,
-// leadImageCaption,
-// };
-
-// return (
-//
-//
-//
-//
-// );
-// }
-// }
-
-// export const __test__ = connect(
-// (state, props) => ({ pathname: props.location.pathname }),
-// { purgeMessages },
-// )(App);
-
-// export default compose(
-// asyncConnect([
-// {
-// key: 'content',
-// promise: ({ location, store: { dispatch } }) =>
-// dispatch(getContent(getBaseUrl(location.pathname))),
-// },
-// {
-// key: 'frontpage_slides',
-// promise: ({ store: { dispatch } }) =>
-// __SERVER__ && dispatch(getFrontpageSlides()),
-// },
-// {
-// key: 'defaultHeaderImage',
-// promise: ({ store: { dispatch } }) =>
-// __SERVER__ && dispatch(getDefaultHeaderImage()),
-// },
-// {
-// key: 'navigation',
-// promise: ({ location, store: { dispatch } }) =>
-// __SERVER__ &&
-// dispatch(
-// getNavigation(
-// getBaseUrl(location.pathname),
-// config.settings.navDepth,
-// ),
-// ),
-// },
-// {
-// key: 'types',
-// promise: ({ location, store: { dispatch } }) =>
-// __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))),
-// },
-// {
-// key: 'workflow',
-// promise: ({ location, store: { dispatch } }) =>
-// __SERVER__ && dispatch(getWorkflow(getBaseUrl(location.pathname))),
-// },
-// {
-// key: 'portlets',
-// promise: ({ location, store: { dispatch } }) =>
-// __SERVER__ && dispatch(getPortlets(getBaseUrl(location.pathname))),
-// },
-// {
-// key: 'portlets_left',
-// promise: ({ location, store: { dispatch } }) =>
-// __SERVER__ &&
-// dispatch(
-// getPortlets(getBaseUrl(location.pathname), 'plone.leftcolumn'),
-// ),
-// },
-// {
-// key: 'portlets_right',
-// promise: ({ location, store: { dispatch } }) =>
-// __SERVER__ &&
-// dispatch(
-// getPortlets(getBaseUrl(location.pathname), 'plone.rightcolumn'),
-// ),
-// },
-// {
-// key: 'portlets_footer',
-// promise: ({ location, store: { dispatch } }) =>
-// __SERVER__ &&
-// dispatch(
-// getPortlets(getBaseUrl(location.pathname), 'plone.footerportlets'),
-// ),
-// },
-// ]),
-// connect(
-// (state, props) => ({
-// defaultHeaderImage: state.default_header_image.items?.[0],
-// // content: state.content.data,
-// content: state.content.data,
-// frontpage_slides: state.frontpage_slides.items,
-// navigation: state.navigation.items,
-// pathname: state.router.location.pathname, //props.location.pathname,
-
-// // loadingContent: state.content?.get,
-// // search: state.search,
-// }),
-// { purgeMessages },
-// ),
-// )(App);
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { asyncConnect } from 'redux-connect';
+
+import { Header } from '@plone/volto/components';
+import { BodyClass, getBaseUrl, getView } from '@plone/volto/helpers';
+import {
+ getContent,
+ getNavigation,
+ getTypes,
+ getWorkflow,
+ purgeMessages,
+} from '@plone/volto/actions';
+import {
+ getFrontpageSlides,
+ getDefaultHeaderImage,
+} from '@eeacms/volto-forests-theme/actions';
+import { getPortlets } from '@eeacms/volto-addons-forest/actions';
+import config from '@plone/volto/registry';
+import * as Sentry from '@sentry/browser';
+
+class App extends Component {
+ static propTypes = {
+ pathname: PropTypes.string.isRequired,
+ purgeMessages: PropTypes.func.isRequired,
+ folderHeader: PropTypes.any,
+ // getDefaultHeaderImage: PropTypes.func.isRequired,
+ // defaultHeaderImage: PropTypes.object.isRequired,
+ };
+
+ state = {
+ hasError: false,
+ error: null,
+ errorInfo: null,
+ };
+
+ // shouldComponentUpdate(nextProps, nextState) {
+ // if (nextProps.loadingContent.loading || nextProps.search.loading) {
+ // console.log('dont load');
+ // return false;
+ // }
+ // console.log('load:', nextProps.loadingContent);
+ // return true;
+ // }
+ //
+ /**
+ * @method componentWillReceiveProps
+ * @param {Object} nextProps Next properties
+ * @returns {undefined}
+ */
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.pathname !== this.props.pathname) {
+ this.props.purgeMessages();
+
+ if (this.state.hasError) {
+ this.setState({ hasError: false });
+ }
+ }
+ }
+
+ /**
+ * ComponentDidCatch
+ * @method ComponentDidCatch
+ * @param {string} error The error
+ * @param {string} info The info
+ * @returns {undefined}
+ */
+ componentDidCatch(error, info) {
+ this.setState({ hasError: true, error, errorInfo: info });
+ if (__CLIENT__) {
+ if (window?.env?.RAZZLE_SENTRY_DSN || __SENTRY__?.SENTRY_DSN) {
+ Sentry.captureException(error);
+ }
+ }
+ }
+
+ /**
+ * Render method.
+ * @method render
+ * @returns {string} Markup for the component.
+ */
+ render() {
+ const path = getBaseUrl(this.props.pathname);
+ const action = getView(this.props.pathname);
+ const leadImageCaption =
+ this.props.content?.lead_image_caption &&
+ this.props.content.lead_image_caption !== null
+ ? this.props.content.lead_image_caption
+ : '';
+
+ const bigLeading =
+ this.props.content?.big_leading_image &&
+ this.props.content.big_leading_image !== null
+ ? this.props.content.big_leading_image
+ : false;
+
+ const inheritLeadingData =
+ this.props.content?.inherit_leading_data &&
+ this.props.content.inherit_leading_data !== null
+ ? this.props.content.inherit_leading_data
+ : false;
+
+ const leadNavigation =
+ this.props.content?.lead_navigation &&
+ this.props.content.lead_navigation !== null
+ ? this.props.content.lead_navigation
+ : false;
+
+ const headerImage =
+ this.props.content?.image?.download || this.props.defaultHeaderImage;
+
+ const extraHeaderData = {
+ bigLeading,
+ inheritLeadingData,
+ parentData: this.props.content?.parent,
+ leadNavigation,
+ leadImageCaption,
+ };
+
+ return (
+
+
+
+
+ );
+ }
+}
+
+export const __test__ = connect(
+ (state, props) => ({ pathname: props.location.pathname }),
+ { purgeMessages },
+)(App);
+
+export default compose(
+ asyncConnect([
+ {
+ key: 'content',
+ promise: ({ location, store: { dispatch } }) =>
+ dispatch(getContent(getBaseUrl(location.pathname))),
+ },
+ {
+ key: 'frontpage_slides',
+ promise: ({ store: { dispatch } }) =>
+ __SERVER__ && dispatch(getFrontpageSlides()),
+ },
+ {
+ key: 'defaultHeaderImage',
+ promise: ({ store: { dispatch } }) =>
+ __SERVER__ && dispatch(getDefaultHeaderImage()),
+ },
+ {
+ key: 'navigation',
+ promise: ({ location, store: { dispatch } }) =>
+ __SERVER__ &&
+ dispatch(
+ getNavigation(
+ getBaseUrl(location.pathname),
+ config.settings.navDepth,
+ ),
+ ),
+ },
+ {
+ key: 'types',
+ promise: ({ location, store: { dispatch } }) =>
+ __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))),
+ },
+ {
+ key: 'workflow',
+ promise: ({ location, store: { dispatch } }) =>
+ __SERVER__ && dispatch(getWorkflow(getBaseUrl(location.pathname))),
+ },
+ {
+ key: 'portlets',
+ promise: ({ location, store: { dispatch } }) =>
+ __SERVER__ && dispatch(getPortlets(getBaseUrl(location.pathname))),
+ },
+ {
+ key: 'portlets_left',
+ promise: ({ location, store: { dispatch } }) =>
+ __SERVER__ &&
+ dispatch(
+ getPortlets(getBaseUrl(location.pathname), 'plone.leftcolumn'),
+ ),
+ },
+ {
+ key: 'portlets_right',
+ promise: ({ location, store: { dispatch } }) =>
+ __SERVER__ &&
+ dispatch(
+ getPortlets(getBaseUrl(location.pathname), 'plone.rightcolumn'),
+ ),
+ },
+ {
+ key: 'portlets_footer',
+ promise: ({ location, store: { dispatch } }) =>
+ __SERVER__ &&
+ dispatch(
+ getPortlets(getBaseUrl(location.pathname), 'plone.footerportlets'),
+ ),
+ },
+ ]),
+ connect(
+ (state, props) => ({
+ defaultHeaderImage: state.default_header_image.items?.[0],
+ // content: state.content.data,
+ content: state.content.data,
+ frontpage_slides: state.frontpage_slides.items,
+ navigation: state.navigation.items,
+ pathname: state.router.location.pathname, //props.location.pathname,
+
+ // loadingContent: state.content?.get,
+ // search: state.search,
+ }),
+ { purgeMessages },
+ ),
+)(App);
diff --git a/src/customizations/volto/helpers/Html/Html.jsx b/src/customizations/volto/helpers/Html/Html.jsx
index f448654..621d5c1 100644
--- a/src/customizations/volto/helpers/Html/Html.jsx
+++ b/src/customizations/volto/helpers/Html/Html.jsx
@@ -5,33 +5,11 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { Helmet } from '@plone/volto/helpers';
import serialize from 'serialize-javascript';
import { join } from 'lodash';
-import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import { BodyClass } from '@plone/volto/helpers';
import { runtimeConfig } from '@plone/volto/runtime_config';
-import config from '@plone/volto/registry';
-
-const CRITICAL_CSS_TEMPLATE = `function alter() {
- document.querySelectorAll("head link[rel='prefetch']").forEach(function(el) { el.rel = 'stylesheet'});
- }
- if (window.addEventListener) {
- window.addEventListener('DOMContentLoaded', alter, false)
- } else {
- window.onload=alter
- }`;
-
-export const loadReducers = (state = {}) => {
- const { settings } = config;
- return Object.assign(
- {},
- ...Object.keys(state).map((name) =>
- settings.initialReducersBlacklist.includes(name)
- ? {}
- : { [name]: state[name] },
- ),
- );
-};
/**
* Html class.
@@ -42,14 +20,6 @@ export const loadReducers = (state = {}) => {
* The only thing this component doesn't (and can't) include is the
* HTML doctype declaration, which is added to the rendered output
* by the server.js file.
- *
- * Critical.css behaviour: when a file `public/critical.css` is present, the
- * loading of stylesheets is changed. The styles in critical.css are inlined in
- * the generated HTML, and the whole story needs to change completely: instead
- * of treating stylesheets as priority for rendering, we want to defer their
- * loading as much as possible. So we change the stylesheets to be prefetched
- * and we switch their rel back to stylesheets at document ready event.
- *
* @function Html
* @param {Object} props Component properties.
* @param {Object} props.assets Assets to be rendered.
@@ -87,16 +57,11 @@ class Html extends Component {
* @returns {string} Markup for the component.
*/
render() {
- const {
- extractor,
- markup,
- store,
- criticalCss,
- apiPath,
- publicURL,
- } = this.props;
+ const { extractor, markup, store } = this.props;
const head = Helmet.rewind();
const bodyClass = join(BodyClass.rewind(), ' ');
+ const pathName = store.getState()?.router.location.pathname;
+ const renderScripts = ['/header', '/head', '/footer'].includes(pathName);
return (
@@ -104,79 +69,32 @@ class Html extends Component {
{head.base.toComponent()}
{head.title.toComponent()}
{head.meta.toComponent()}
- {head.link.toComponent()}
- {head.script.toComponent()}
+ {!renderScripts && head.link.toComponent()}
+ {!renderScripts && head.script.toComponent()}
-
-
-
-
-
+
+
- {process.env.NODE_ENV === 'production' && criticalCss && (
-
- )}
{/* Add the crossorigin while in development */}
- {extractor.getLinkElements().map((elem) =>
- React.cloneElement(elem, {
- crossOrigin:
- process.env.NODE_ENV === 'production' ? undefined : 'true',
- rel: !criticalCss
- ? elem.props.rel
- : elem.props.as === 'style'
- ? 'prefetch'
- : elem.props.rel,
- }),
- )}
+ {!renderScripts &&
+ extractor.getLinkElements().map((elem) =>
+ React.cloneElement(elem, {
+ crossOrigin:
+ process.env.NODE_ENV === 'production' ? undefined : 'true',
+ }),
+ )}
{/* Styles in development are loaded with Webpack's style-loader, in production,
they need to be static*/}
- {process.env.NODE_ENV === 'production' ? (
- criticalCss ? (
- <>
-
- {extractor.getStyleElements().map((elem) => (
-
- ))}
- >
- ) : (
- extractor.getStyleElements()
- )
- ) : undefined}
+ {!renderScripts && process.env.NODE_ENV === 'production' && (
+ <>{extractor.getStyleElements()}>
+ )}
@@ -184,14 +102,12 @@ class Html extends Component {
{/* Add the crossorigin while in development */}
- {this.props.extractScripts !== false
+ {!renderScripts && this.props.extractScripts !== false
? extractor.getScriptElements().map((elem) =>
React.cloneElement(elem, {
crossOrigin:
@@ -204,5 +120,4 @@ class Html extends Component {
);
}
}
-
export default Html;