Merge pull request #56 from eea/develop

Release: fix-datacatalogue
eea · Feb 16, 2022 · 02307f4 · 02307f4
2 parents afcec09 + 9db028c
commit 02307f4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 109 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.2.2](https://github.com/eea/volto-forests-theme/compare/0.2.1...0.2.2)
+
+- Fix datacatalogue [`#55`](https://github.com/eea/volto-forests-theme/pull/55)
+- bring back Html.jsx ssr data for datacatalogue [`7f5d8c6`](https://github.com/eea/volto-forests-theme/commit/7f5d8c63fc4c97d86c9f49c5c74ad7eb220075e2)
+- WIP [`1e9901b`](https://github.com/eea/volto-forests-theme/commit/1e9901b3b9412ee5549395ccfef7d03f707a5a25)
+- WIP [`2c168f1`](https://github.com/eea/volto-forests-theme/commit/2c168f1a611858ced2d8f09d2b9b88c851d01b9e)
+
 #### [0.2.1](https://github.com/eea/volto-forests-theme/compare/0.2.0...0.2.1)
 
-- Discodata connector support animations [`4082ff8`](https://github.com/eea/volto-forests-theme/commit/4082ff8383c189e78113ed595fc4a6f7b3671793)
+> 16 February 2022
+
+- Discodata connector support animations [`#54`](https://github.com/eea/volto-forests-theme/pull/54)
 
 #### [0.2.0](https://github.com/eea/volto-forests-theme/compare/0.2.0-beta.0...0.2.0)
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git 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,111 +57,57 @@ 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 (
       <html lang="en">
         <head>
           <meta charSet="utf-8" />
           {head.base.toComponent()}
           {head.title.toComponent()}
           {head.meta.toComponent()}
-          {head.link.toComponent()}
-          {head.script.toComponent()}
+          {!renderScripts && head.link.toComponent()}
+          {!renderScripts && head.script.toComponent()}
 
           <script
             dangerouslySetInnerHTML={{
-              __html: `window.env = ${serialize({
-                ...runtimeConfig,
-                // Seamless mode requirement, the client need to know where the API is located
-                // if not set in the API_PATH
-                ...(apiPath && {
-                  apiPath,
-                }),
-                ...(publicURL && {
-                  publicURL,
-                }),
-              })};`,
+              __html: `window.env = ${serialize(runtimeConfig)};`,
             }}
           />
 
-          <link rel="icon" href="/favicon.ico" sizes="any" />
-          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
-          <link
-            rel="apple-touch-icon"
-            sizes="180x180"
-            href="/apple-touch-icon.png"
-          />
-          <link rel="manifest" href="/site.webmanifest" />
-          <meta name="generator" content="Plone 6 - https://plone.org" />
+          <link rel="shortcut icon" href="/favicon.ico" />
+          <meta name="generator" content="Volto - http://plone.org" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="apple-mobile-web-app-capable" content="yes" />
-          {process.env.NODE_ENV === 'production' && criticalCss && (
-            <style
-              dangerouslySetInnerHTML={{ __html: this.props.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 ? (
-              <>
-                <script
-                  dangerouslySetInnerHTML={{
-                    __html: CRITICAL_CSS_TEMPLATE,
-                  }}
-                ></script>
-                {extractor.getStyleElements().map((elem) => (
-                  <noscript>
-                    {React.cloneElement(elem, {
-                      rel: 'stylesheet',
-                      crossOrigin:
-                        process.env.NODE_ENV === 'production'
-                          ? undefined
-                          : 'true',
-                    })}
-                  </noscript>
-                ))}
-              </>
-            ) : (
-              extractor.getStyleElements()
-            )
-          ) : undefined}
+          {!renderScripts && process.env.NODE_ENV === 'production' && (
+            <>{extractor.getStyleElements()}</>
+          )}
         </head>
         <body className={bodyClass}>
           <div role="navigation" aria-label="Toolbar" id="toolbar" />
           <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
           <div id="sidebar" />
           <script
             dangerouslySetInnerHTML={{
-              __html: `window.__data=${serialize(
-                loadReducers(store.getState()),
-              )};`,
+              __html: `window.__data=${serialize(store.getState())};`,
             }}
             charSet="UTF-8"
           />
           {/* 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;