@eeacms/volto-eea-website-theme 3.7.0 → 3.8.0

package/CHANGELOG.md

@@ -4,11 +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).
 
-### [3.7.0](https://github.com/eea/volto-eea-website-theme/compare/3.6.3...3.7.0) - 6 June 2025
+### [3.8.0](https://github.com/eea/volto-eea-website-theme/compare/3.7.0...3.8.0) - 3 July 2025
+
+#### :rocket: New Features
+
+- feat(side-nav): allow content to be inserted before instead of the default append [David Ichim - [`6e184d2`](https://github.com/eea/volto-eea-website-theme/commit/6e184d2dfff0ee693b2d27527fa538dce8bdede7)]
 
 #### :hammer_and_wrench: Others
 
-- Release 3.7.0 [Alin Voinea - [`b4c7cc5`](https://github.com/eea/volto-eea-website-theme/commit/b4c7cc5218a5ed04d2a53c75d2dfdac7c7959bd5)]
+- Update package.json [David Ichim - [`af355dd`](https://github.com/eea/volto-eea-website-theme/commit/af355dda36692e048779abc80d968096a0cc3c49)]
+- add dependency on volto-anchors since we have a require which we catch [David Ichim - [`135db9f`](https://github.com/eea/volto-eea-website-theme/commit/135db9fc4d50ef535ef80a499ddd3c9d87dabac6)]
+### [3.7.0](https://github.com/eea/volto-eea-website-theme/compare/3.6.3...3.7.0) - 6 June 2025
+
 ### [3.6.3](https://github.com/eea/volto-eea-website-theme/compare/3.6.2...3.6.3) - 2 June 2025
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -14,6 +14,7 @@
     "react"
   ],
   "addons": [
+    "@eeacms/volto-anchors",
     "@eeacms/volto-block-toc",
     "@eeacms/volto-group-block",
     "@eeacms/volto-eea-design-system",
@@ -24,6 +25,7 @@
     "url": "git@github.com:eea/volto-eea-website-theme.git"
   },
   "dependencies": {
+    "@eeacms/volto-anchors": "*",
     "@eeacms/volto-block-style": "*",
     "@eeacms/volto-block-toc": "*",
     "@eeacms/volto-eea-design-system": "*",

package/src/actions/print.js

@@ -3,7 +3,10 @@
  * @module actions/print
  */
 
-import { SET_ISPRINT } from '@eeacms/volto-eea-website-theme/constants/ActionTypes';
+import {
+  SET_ISPRINT,
+  SET_PRINT_LOADING,
+} from '@eeacms/volto-eea-website-theme/constants/ActionTypes';
 
 export const setIsPrint = (data) => {
   return {
@@ -11,3 +14,8 @@ export const setIsPrint = (data) => {
     payload: data,
   };
 };
+
+export const setPrintLoading = (isLoading) => ({
+  type: SET_PRINT_LOADING,
+  payload: isLoading,
+});

package/src/components/manage/Blocks/ContextNavigation/variations/Accordion.jsx

@@ -24,10 +24,12 @@ const AccordionNavigation = ({
   navigation = {},
   device,
   isMenuOpenOnOutsideClick,
+  insertBefore,
 }) => {
   const { items = [], title, has_custom_name } = navigation;
   const intl = useIntl();
-  const navOpen = ['mobile', 'tablet'].includes(device) ? false : true;
+  const navOpen =
+    ['mobile', 'tablet'].includes(device) || insertBefore ? false : true;
   const [isNavOpen, setIsNavOpen] = React.useState(navOpen);
   const [activeItems, setActiveItems] = React.useState({});
   const contextNavigationListRef = React.useRef(null);
@@ -220,6 +222,7 @@ export default compose(
       targetParent: '.eea.header ',
       fixedVisibilitySwitchTarget: '.main.bar',
       insertBeforeOnMobile: '.banner',
+      insertBefore: props.insertBefore,
       shouldRender: props.navigation?.items?.length > 0,
     }),
 )(AccordionNavigation);

package/src/components/theme/Banner/View.jsx

@@ -5,7 +5,7 @@ import { connect, useDispatch } from 'react-redux';
 import { withRouter } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
 import startCase from 'lodash/startCase';
-import { Icon, Loader } from 'semantic-ui-react';
+import { Icon } from 'semantic-ui-react';
 import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
 import config from '@plone/volto/registry';
 import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
@@ -14,8 +14,8 @@ import {
   sharePage,
 } from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
 import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
-import { setIsPrint } from '@eeacms/volto-eea-website-theme/actions/print';
-import cx from 'classnames';
+import { setupPrintView } from '@eeacms/volto-eea-website-theme/helpers/setupPrintView';
+
 import './styles.less';
 
 const messages = defineMessages({
@@ -173,95 +173,14 @@ const View = (props) => {
               </>
             )}
             {!hideDownloadButton && (
-              <>
-                <Banner.Action
-                  icon="ri-download-2-fill"
-                  title={intl.formatMessage(messages.download)}
-                  className="download"
-                  onClick={() => {
-                    // set tabs to be visible
-                    const tabs = document.getElementsByClassName('ui tab');
-                    Array.from(tabs).forEach((tab) => {
-                      tab.style.display = 'block';
-                    });
-
-                    dispatch(setIsPrint(true));
-                    // display loader
-                    const printLoader = document.getElementById(
-                      'download-print-loader',
-                    );
-                    printLoader.style.display = 'flex';
-
-                    let timeoutValue = 1000;
-                    // if we have plotlycharts increase timeout
-                    setTimeout(() => {
-                      const plotlyCharts = document.getElementsByClassName(
-                        'visualization-wrapper',
-                      );
-                      if (plotlyCharts.length > 0) {
-                        timeoutValue = timeoutValue + 1000;
-                      }
-                    }, timeoutValue);
-
-                    // scroll to iframes to make them be in the viewport
-                    // use timeout to wait for load
-                    setTimeout(() => {
-                      const iframes = document.getElementsByTagName('iframe');
-                      if (iframes.length > 0) {
-                        timeoutValue = timeoutValue + 2000;
-                        Array.from(iframes).forEach((element, index) => {
-                          setTimeout(() => {
-                            element.scrollIntoView({
-                              behavior: 'instant',
-                              block: 'nearest',
-                              inline: 'center',
-                            });
-                          }, timeoutValue);
-                          timeoutValue = timeoutValue + 3000;
-                        });
-                        timeoutValue = timeoutValue + 1000;
-                      }
-
-                      setTimeout(() => {
-                        window.scrollTo({
-                          top: 0,
-                        });
-                        Array.from(tabs).forEach((tab) => {
-                          tab.style.display = '';
-                        });
-                        printLoader.style.display = 'none';
-                        dispatch(setIsPrint(false));
-                        window.print();
-                      }, timeoutValue);
-                    }, timeoutValue);
-                  }}
-                />
-                <div
-                  id="download-print-loader"
-                  className={cx('ui warning message')}
-                  style={{
-                    position: 'fixed',
-                    left: '40%',
-                    right: '40%',
-                    backgroundColor: '#fff',
-                    padding: '1em',
-                    display: 'none',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    top: '40%',
-                    zIndex: '9999',
-                  }}
-                >
-                  <Loader
-                    disabled={false}
-                    indeterminate
-                    active
-                    inline
-                    size="medium"
-                  ></Loader>
-                  <div>Preparing download</div>
-                </div>
-              </>
+              <Banner.Action
+                icon="ri-download-2-fill"
+                title={intl.formatMessage(messages.download)}
+                className="download"
+                onClick={() => {
+                  setupPrintView(dispatch);
+                }}
+              />
             )}
             {rssLinks?.map((rssLink, index) => (
               <>

package/src/components/theme/PrintLoader/PrintLoader.jsx

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { Loader } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { loadLazyImages } from '@eeacms/volto-eea-website-theme/helpers/loadLazyImages';
+import { setupPrintView } from '@eeacms/volto-eea-website-theme/helpers/setupPrintView';
+
+import './style.less';
+
+const messages = defineMessages({
+  preparingDownload: {
+    id: 'Preparing download',
+    defaultMessage: 'Preparing download',
+  },
+});
+
+const PrintLoader = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const showLoader = useSelector((state) => state.print.isPrintLoading);
+
+  useEffect(() => {
+    const handleBeforePrint = () => {
+      loadLazyImages();
+    };
+
+    const handleKeyDown = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+        event.preventDefault();
+        setupPrintView(dispatch);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('beforeprint', handleBeforePrint);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('beforeprint', handleBeforePrint);
+    };
+  }, [dispatch]);
+
+  return showLoader ? (
+    <div
+      id="download-print-loader"
+      className="ui warning message"
+      role="status"
+      aria-live="polite"
+    >
+      <Loader active inline size="medium" />
+      <div>{intl.formatMessage(messages.preparingDownload)}</div>
+    </div>
+  ) : null;
+};
+
+export default PrintLoader;

package/src/components/theme/PrintLoader/PrintLoader.test.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import PrintLoader from './PrintLoader';
+import { IntlProvider } from 'react-intl';
+
+jest.mock('@eeacms/volto-eea-website-theme/helpers/setupPrintView', () => ({
+  setupPrintView: jest.fn(),
+}));
+
+jest.mock('@eeacms/volto-eea-website-theme/helpers/loadLazyImages', () => ({
+  loadLazyImages: jest.fn(),
+}));
+
+const mockStore = configureStore();
+
+describe('PrintLoader', () => {
+  it('should render loader when showLoader is true', () => {
+    const store = mockStore({
+      print: { isPrintLoading: true },
+    });
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <IntlProvider locale="en" messages={{}}>
+          <PrintLoader />
+        </IntlProvider>
+      </Provider>,
+    );
+
+    expect(getByText('Preparing download')).toBeInTheDocument();
+  });
+
+  it('should not render anything when showLoader is false', () => {
+    const store = mockStore({
+      print: { isPrintLoading: false },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <IntlProvider locale="en" messages={{}}>
+          <PrintLoader />
+        </IntlProvider>
+      </Provider>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should call setupPrintView when Ctrl+P is pressed', () => {
+    const store = mockStore({
+      print: { isPrintLoading: false },
+    });
+
+    render(
+      <Provider store={store}>
+        <IntlProvider locale="en" messages={{}}>
+          <PrintLoader />
+        </IntlProvider>
+      </Provider>,
+    );
+
+    fireEvent.keyDown(window, { key: 'p', ctrlKey: true });
+    expect(
+      require('@eeacms/volto-eea-website-theme/helpers/setupPrintView')
+        .setupPrintView,
+    ).toHaveBeenCalled();
+  });
+
+  it('should call loadLazyImages before printing', () => {
+    const store = mockStore({
+      print: { isPrintLoading: false },
+    });
+
+    render(
+      <Provider store={store}>
+        <IntlProvider locale="en" messages={{}}>
+          <PrintLoader />
+        </IntlProvider>
+      </Provider>,
+    );
+
+    window.dispatchEvent(new Event('beforeprint'));
+    expect(
+      require('@eeacms/volto-eea-website-theme/helpers/loadLazyImages')
+        .loadLazyImages,
+    ).toHaveBeenCalled();
+  });
+});

package/src/components/theme/PrintLoader/style.less

@@ -0,0 +1,12 @@
+#download-print-loader {
+  position: fixed;
+  z-index: 9999;
+  top: 40%;
+  right: 40%;
+  left: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1em;
+  background-color: #fff;
+}

package/src/components/theme/Widgets/ImageViewWidget.test.jsx

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ImageViewWidget from './ImageViewWidget';
+
+describe('ImageViewWidget', () => {
+  it('renders img with correct src and alt', () => {
+    const mockValue = {
+      download: 'https://example.com/image.jpg',
+      filename: 'example.jpg',
+    };
+
+    render(<ImageViewWidget value={mockValue} />);
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', mockValue.download);
+    expect(img).toHaveAttribute('alt', mockValue.filename);
+  });
+
+  it('does not render src or alt when value is null', () => {
+    render(<ImageViewWidget value={null} />);
+
+    const img = screen.getByRole('img');
+    expect(img).not.toHaveAttribute('src');
+    expect(img).not.toHaveAttribute('alt');
+  });
+});

package/src/constants/ActionTypes.js

@@ -4,3 +4,4 @@
  */
 
 export const SET_ISPRINT = 'SET_ISPRINT';
+export const SET_PRINT_LOADING = 'SET_PRINT_LOADING';

package/src/customizations/volto/components/theme/View/DefaultView.jsx

@@ -112,6 +112,7 @@ const DefaultView = (props) => {
         </Container>
         {hasLightLayout && matchingNavigationPath && (
           <AccordionContextNavigation
+            insertBefore={matchingNavigationPath.insertBefore}
             params={{
               name: matchingNavigationPath.title,
               no_thumbs: matchingNavigationPath.no_thumbs || true,

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -0,0 +1,212 @@
+/**
+ * Html helper.
+ * @module helpers/Html
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import serialize from 'serialize-javascript';
+import { join } from 'lodash';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+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.
+ * Wrapper component containing HTML metadata and boilerplate tags.
+ * Used in server-side code only to wrap the string output of the
+ * rendered route component.
+ *
+ * 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.
+ * @param {Object} props.component Content to be rendered as child node.
+ * @param {Object} props.store Store object.
+ * @returns {string} Markup of the not found page.
+ */
+
+/**
+ * Html class.
+ * @class Html
+ * @extends Component
+ */
+class Html extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    extractor: PropTypes.shape({
+      getLinkElements: PropTypes.func.isRequired,
+      getScriptElements: PropTypes.func.isRequired,
+      getStyleElements: PropTypes.func.isRequired,
+    }).isRequired,
+    markup: PropTypes.string.isRequired,
+    store: PropTypes.shape({
+      getState: PropTypes.func,
+    }).isRequired,
+    nonce: PropTypes.string,
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { extractor, markup, store, criticalCss, apiPath, publicURL, nonce } =
+      this.props;
+    const head = Helmet.rewind();
+    const bodyClass = join(BodyClass.rewind(), ' ');
+    const htmlAttributes = head.htmlAttributes.toComponent();
+
+    return (
+      <html lang={htmlAttributes.lang}>
+        <head>
+          <meta charSet="utf-8" />
+          {head.base.toComponent()}
+          {head.title.toComponent()}
+          {head.meta.toComponent()}
+          {head.link.toComponent()}
+          {head.script.toComponent()}
+
+          {React.createElement('script', {
+            nonce: nonce,
+            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,
+                  }),
+                },
+                { space: 2 },
+              )};`,
+            },
+          })}
+
+          <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" />
+          <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,
+            }),
+          )}
+          {/* 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}
+        </head>
+        <body className={bodyClass}>
+          <div role="navigation" aria-label="Toolbar" id="toolbar" />
+          <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
+          <div role="complementary" aria-label="Sidebar" id="sidebar" />
+          {React.createElement('script', {
+            nonce: nonce,
+            dangerouslySetInnerHTML: {
+              __html: `window.__data=${serialize(
+                loadReducers(store.getState()),
+                { space: 2 },
+              )};`,
+            },
+            charSet: 'UTF-8',
+          })}
+          {/* Add the crossorigin while in development */}
+          {this.props.extractScripts !== false
+            ? extractor.getScriptElements().map((elem) =>
+                React.cloneElement(elem, {
+                  nonce: nonce,
+                  crossOrigin:
+                    process.env.NODE_ENV === 'production' ? undefined : 'true',
+                }),
+              )
+            : ''}
+        </body>
+      </html>
+    );
+  }
+}
+
+export default Html;

package/src/customizations/volto/helpers/Html/Readme.md

@@ -0,0 +1 @@
+Customized for CSP support. Copy of https://github.com/plone/volto/blob/8b0f2af98ce0362f6975ce9c50137f6bd7cc3bb8/src/helpers/Html/Html.jsx Volto 17.x.x branch

package/src/customizations/volto/server.jsx

@@ -0,0 +1,375 @@
+/* eslint no-console: 0 */
+import '@plone/volto/config'; // This is the bootstrap for the global config - server side
+import { existsSync, lstatSync, readFileSync } from 'fs';
+import React from 'react';
+import { StaticRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import express from 'express';
+import { renderToString } from 'react-dom/server';
+import { createMemoryHistory } from 'history';
+import { parse as parseUrl } from 'url';
+import { keys } from 'lodash';
+import locale from 'locale';
+import { detect } from 'detect-browser';
+import path from 'path';
+import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
+import { resetServerContext } from 'react-beautiful-dnd';
+import { CookiesProvider } from 'react-cookie';
+import cookiesMiddleware from 'universal-cookie-express';
+import debug from 'debug';
+import crypto from 'crypto';
+
+import routes from '@plone/volto/routes';
+import config from '@plone/volto/registry';
+
+import {
+  flattenToAppURL,
+  Html,
+  Api,
+  persistAuthToken,
+  toBackendLang,
+  toGettextLang,
+  toReactIntlLang,
+} from '@plone/volto/helpers';
+import { changeLanguage } from '@plone/volto/actions';
+
+import userSession from '@plone/volto/reducers/userSession/userSession';
+
+import ErrorPage from '@plone/volto/error';
+
+import languages from '@plone/volto/constants/Languages';
+
+import configureStore from '@plone/volto/store';
+import {
+  ReduxAsyncConnect,
+  loadOnServer,
+} from '@plone/volto/helpers/AsyncConnect';
+
+let locales = {};
+const isCSP = process.env.CSP_HEADER || config.settings.serverConfig.csp;
+
+if (config.settings) {
+  config.settings.supportedLanguages.forEach((lang) => {
+    const langFileName = toGettextLang(lang);
+    import('@root/../locales/' + langFileName + '.json').then((locale) => {
+      locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
+    });
+  });
+}
+
+function reactIntlErrorHandler(error) {
+  debug('i18n')(error);
+}
+
+const supported = new locale.Locales(keys(languages), 'en');
+
+const server = express()
+  .disable('x-powered-by')
+  .set('etag', false)
+  .head('/*', function (req, res) {
+    // Support for HEAD requests. Required by start-test utility in CI.
+    res.send('');
+  })
+  .use(cookiesMiddleware());
+
+const middleware = (config.settings.expressMiddleware || []).filter((m) => m);
+
+server.all('*', setupServer);
+if (middleware.length) server.use('/', middleware);
+
+server.use(function (err, req, res, next) {
+  if (err) {
+    const { store } = res.locals;
+    const errorPage = (
+      <Provider store={store} onError={reactIntlErrorHandler}>
+        <StaticRouter context={{}} location={req.url}>
+          <ErrorPage message={err.message} />
+        </StaticRouter>
+      </Provider>
+    );
+
+    res.set({
+      'Cache-Control': 'public, max-age=60, no-transform',
+    });
+
+    /* Displays error in console
+     * TODO:
+     * - get ignored codes from Plone error_log
+     */
+    const ignoredErrors = [301, 302, 401, 404];
+    if (!ignoredErrors.includes(err.status)) console.error(err);
+
+    res
+      .status(err.status || 500) // If error happens in Volto code itself error status is undefined
+      .send(`<!doctype html> ${renderToString(errorPage)}`);
+  }
+});
+
+function buildCSPHeader(opts, nonce) {
+  if (typeof opts === 'string') {
+    //CSP_HEADER
+    return opts.replaceAll('{nonce}', `'nonce-${nonce}'`);
+  }
+  return Object.keys(opts)
+    .sort()
+    .reduce((acc, key) => {
+      return [
+        ...acc,
+        `${key} ${opts[key].replaceAll('{nonce}', `'nonce-${nonce}'`)}`,
+      ];
+    }, [])
+    .join('; ');
+}
+
+function setupServer(req, res, next) {
+  if (isCSP) {
+    const nonce = crypto.randomBytes(16).toString('base64');
+    res.locals.nonce = nonce;
+  }
+
+  const api = new Api(req);
+
+  const lang = toReactIntlLang(
+    new locale.Locales(
+      req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'],
+    )
+      .best(supported)
+      .toString(),
+  );
+
+  // Minimum initial state for the fake Redux store instance
+  const initialState = {
+    intl: {
+      defaultLocale: 'en',
+      locale: lang,
+      messages: locales[lang],
+    },
+  };
+
+  const history = createMemoryHistory({
+    initialEntries: [req.url],
+  });
+
+  // Create a fake Redux store instance for the `errorHandler` to render
+  // and for being used by the rest of the middlewares, if required
+  const store = configureStore(initialState, history, api);
+
+  function errorHandler(error) {
+    const errorPage = (
+      <Provider store={store} onError={reactIntlErrorHandler}>
+        <StaticRouter context={{}} location={req.url}>
+          <ErrorPage message={error.message} />
+        </StaticRouter>
+      </Provider>
+    );
+
+    res.set({
+      'Cache-Control': 'public, max-age=60, no-transform',
+    });
+
+    /* Displays error in console
+     * TODO:
+     * - get ignored codes from Plone error_log
+     */
+    const ignoredErrors = [301, 302, 401, 404];
+    if (!ignoredErrors.includes(error.status)) console.error(error);
+
+    res
+      .status(error.status || 500) // If error happens in Volto code itself error status is undefined
+      .send(`<!doctype html> ${renderToString(errorPage)}`);
+  }
+
+  if (!process.env.RAZZLE_API_PATH && req.headers.host) {
+    res.locals.detectedHost = `${
+      req.headers['x-forwarded-proto'] || req.protocol
+    }://${req.headers.host}`;
+    config.settings.apiPath = res.locals.detectedHost;
+    config.settings.publicURL = res.locals.detectedHost;
+  }
+
+  res.locals = {
+    ...res.locals,
+    store,
+    api,
+    errorHandler,
+  };
+
+  next();
+}
+
+server.get('/*', (req, res) => {
+  const { errorHandler, nonce } = res.locals;
+
+  if (isCSP) {
+    res.setHeader('Content-Security-Policy', buildCSPHeader(isCSP, nonce));
+  }
+
+  const api = new Api(req);
+
+  const browserdetect = detect(req.headers['user-agent']);
+
+  const lang = toReactIntlLang(
+    new locale.Locales(
+      req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'],
+    )
+      .best(supported)
+      .toString(),
+  );
+
+  const authToken = req.universalCookies.get('auth_token');
+  const initialState = {
+    userSession: { ...userSession(), token: authToken },
+    form: req.body,
+    intl: {
+      defaultLocale: 'en',
+      locale: lang,
+      messages: locales[lang],
+    },
+    browserdetect,
+  };
+
+  const history = createMemoryHistory({
+    initialEntries: [req.url],
+  });
+
+  // Create a new Redux store instance
+  const store = configureStore(initialState, history, api);
+
+  persistAuthToken(store, req);
+
+  // @loadable/server extractor
+  const buildDir = process.env.BUILD_DIR || 'build';
+  const extractor = new ChunkExtractor({
+    statsFile: path.resolve(path.join(buildDir, 'loadable-stats.json')),
+    entrypoints: ['client'],
+  });
+
+  const url = req.originalUrl || req.url;
+  const location = parseUrl(url);
+
+  loadOnServer({ store, location, routes, api })
+    .then(() => {
+      const initialLang =
+        req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'];
+
+      // The content info is in the store at this point thanks to the asynconnect
+      // features, then we can force the current language info into the store when
+      // coming from an SSR request
+
+      // TODO: there is a bug here with content that, for any reason, doesn't
+      // present the language token field, for some reason. In this case, we
+      // should follow the cookie rather then switching the language
+      const contentLang = store.getState().content.get?.error
+        ? initialLang
+        : store.getState().content.data?.language?.token ||
+          config.settings.defaultLanguage;
+
+      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
+        const newLang = toReactIntlLang(
+          new locale.Locales(contentLang).best(supported).toString(),
+        );
+        store.dispatch(changeLanguage(newLang, locales[newLang], req));
+      }
+
+      const context = {};
+      resetServerContext();
+      const markup = renderToString(
+        <ChunkExtractorManager extractor={extractor}>
+          <CookiesProvider cookies={req.universalCookies}>
+            <Provider store={store} onError={reactIntlErrorHandler}>
+              <StaticRouter context={context} location={req.url}>
+                <ReduxAsyncConnect routes={routes} helpers={api} />
+              </StaticRouter>
+            </Provider>
+          </CookiesProvider>
+        </ChunkExtractorManager>,
+      );
+
+      const readCriticalCss =
+        config.settings.serverConfig.readCriticalCss || defaultReadCriticalCss;
+
+      // If we are showing an "old browser" warning,
+      // make sure it doesn't get cached in a shared cache
+      const browserdetect = store.getState().browserdetect;
+      if (config.settings.notSupportedBrowsers.includes(browserdetect?.name)) {
+        res.set({
+          'Cache-Control': 'private',
+        });
+      }
+
+      if (context.url) {
+        res.redirect(flattenToAppURL(context.url));
+      } else if (context.error_code) {
+        res.set({
+          'Cache-Control': 'no-cache',
+        });
+
+        res.status(context.error_code).send(
+          `<!doctype html>
+              ${renderToString(
+                <Html
+                  extractor={extractor}
+                  nonce={nonce}
+                  markup={markup}
+                  store={store}
+                  extractScripts={
+                    config.settings.serverConfig.extractScripts?.errorPages ||
+                    process.env.NODE_ENV !== 'production'
+                  }
+                  criticalCss={readCriticalCss(req)}
+                  apiPath={res.locals.detectedHost || config.settings.apiPath}
+                  publicURL={
+                    res.locals.detectedHost || config.settings.publicURL
+                  }
+                />,
+              )}
+            `,
+        );
+      } else {
+        res.status(200).send(
+          `<!doctype html>
+              ${renderToString(
+                <Html
+                  extractor={extractor}
+                  nonce={nonce}
+                  markup={markup}
+                  store={store}
+                  criticalCss={readCriticalCss(req)}
+                  apiPath={res.locals.detectedHost || config.settings.apiPath}
+                  publicURL={
+                    res.locals.detectedHost || config.settings.publicURL
+                  }
+                />,
+              )}
+            `,
+        );
+      }
+    }, errorHandler)
+    .catch(errorHandler);
+});
+
+export const defaultReadCriticalCss = () => {
+  const { criticalCssPath } = config.settings.serverConfig;
+
+  const e = existsSync(criticalCssPath);
+  if (!e) return;
+
+  const f = lstatSync(criticalCssPath);
+  if (!f.isFile()) return;
+
+  return readFileSync(criticalCssPath, { encoding: 'utf-8' });
+};
+
+// Exposed for the console bootstrap info messages
+server.apiPath = config.settings.apiPath;
+server.devProxyToApiPath = config.settings.devProxyToApiPath;
+server.proxyRewriteTarget = config.settings.proxyRewriteTarget;
+server.publicURL = config.settings.publicURL;
+
+export default server;

package/src/helpers/loadLazyImages.js

@@ -0,0 +1,11 @@
+/**
+ * Forces all lazy-loaded images to load immediately by setting the loading attribute to 'eager'.
+ */
+export const loadLazyImages = () => {
+  const lazyImages = document.querySelectorAll('img[loading="lazy"]');
+  lazyImages.forEach((img) => {
+    if (img.src) {
+      img.setAttribute('loading', 'eager');
+    }
+  });
+};

package/src/helpers/loadLazyImages.test.js

@@ -0,0 +1,22 @@
+import { loadLazyImages } from './loadLazyImages';
+
+describe('loadLazyImages', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <img loading="lazy" src="image1.jpg" />
+      <img loading="lazy" src="image2.jpg" />
+      <img loading="lazy" />
+      <img loading="eager" src="image3.jpg" />
+    `;
+  });
+
+  it('sets loading="eager" only on lazy-loaded images with a src', () => {
+    loadLazyImages();
+
+    const images = document.querySelectorAll('img');
+    expect(images[0].getAttribute('loading')).toBe('eager'); // had src
+    expect(images[1].getAttribute('loading')).toBe('eager'); // had src
+    expect(images[2].getAttribute('loading')).toBe('lazy'); // no src
+    expect(images[3].getAttribute('loading')).toBe('eager'); // already eager
+  });
+});

package/src/helpers/setupPrintView.js

@@ -0,0 +1,134 @@
+/**
+ * Sets up the document for printing by handling iframes
+ * and lazy-loaded images, and triggering the print dialog.
+ * Uses proper event listeners to ensure all content is loaded before printing.
+ */
+
+import {
+  setIsPrint,
+  setPrintLoading,
+} from '@eeacms/volto-eea-website-theme/actions/print';
+import { loadLazyImages } from '@eeacms/volto-eea-website-theme/helpers/loadLazyImages';
+
+export const setupPrintView = (dispatch) => {
+  // Set tabs to be visible
+  const tabs = document.getElementsByClassName('ui tab');
+  Array.from(tabs).forEach((tab) => {
+    tab.style.display = 'block';
+  });
+
+  dispatch(setIsPrint(true));
+  dispatch(setPrintLoading(true));
+
+  // Load all lazy images
+  loadLazyImages();
+
+  // Create a promise that resolves when all iframes are loaded
+  const waitForIframes = () => {
+    const iframes = document.getElementsByTagName('iframe');
+    if (iframes.length === 0) {
+      return Promise.resolve();
+    }
+
+    const iframePromises = Array.from(iframes).map((iframe) => {
+      return new Promise((resolve) => {
+        // If iframe is already loaded, resolve immediately
+        if (iframe.contentDocument?.readyState === 'complete') {
+          resolve();
+          return;
+        }
+
+        // Otherwise wait for load event
+        iframe.addEventListener(
+          'load',
+          () => {
+            // Scroll iframe into view to ensure content loads
+            iframe.scrollIntoView({
+              behavior: 'instant',
+              block: 'nearest',
+              inline: 'center',
+            });
+            resolve();
+          },
+          { once: true },
+        );
+
+        // Set a timeout as a fallback in case the load event doesn't fire
+        setTimeout(resolve, 5000);
+      });
+    });
+
+    return Promise.all(iframePromises);
+  };
+
+  // Create a promise that resolves when all images are loaded
+  const waitForImages = () => {
+    const images = document.getElementsByTagName('img');
+    if (images.length === 0) {
+      return Promise.resolve();
+    }
+
+    const imagePromises = Array.from(images).map((img) => {
+      return new Promise((resolve) => {
+        // If image is already loaded, resolve immediately
+        if (img.complete) {
+          resolve();
+          return;
+        }
+
+        // Otherwise wait for load event
+        img.addEventListener('load', resolve, { once: true });
+        img.addEventListener('error', resolve, { once: true }); // Also handle error case
+
+        // Set a timeout as a fallback
+        setTimeout(resolve, 3000);
+      });
+    });
+
+    return Promise.all(imagePromises);
+  };
+
+  // Wait for plotly charts if they exist
+  const waitForPlotlyCharts = () => {
+    const plotlyCharts = document.getElementsByClassName(
+      'visualization-wrapper',
+    );
+    if (plotlyCharts.length === 0) {
+      return Promise.resolve();
+    }
+
+    // Give plotly charts some time to render
+    return new Promise((resolve) => setTimeout(resolve, 2000));
+  };
+
+  // Wait for all content to load before printing
+  const waitForAllContentToLoad = async () => {
+    // Wait for iframes, images, and Plotly charts to load
+    Promise.all([waitForIframes(), waitForImages(), waitForPlotlyCharts()])
+      .then(() => {
+        // Scroll back to top
+        window.scrollTo({ top: 0 });
+
+        // Reset tab display
+        Array.from(tabs).forEach((tab) => {
+          tab.style.display = '';
+        });
+
+        // Update state and trigger print
+        dispatch(setPrintLoading(false));
+        dispatch(setIsPrint(false));
+        window.print();
+      })
+      .catch(() => {
+        // Still try to print even if there was an error
+        dispatch(setPrintLoading(false));
+        dispatch(setIsPrint(false));
+        window.print();
+      });
+  };
+
+  // Delay the initial call to ensure everything is rendered
+  setTimeout(() => {
+    waitForAllContentToLoad();
+  }, 1000);
+};

package/src/helpers/setupPrintView.test.js

@@ -0,0 +1,49 @@
+import { setupPrintView } from './setupPrintView';
+import { loadLazyImages } from '@eeacms/volto-eea-website-theme/helpers/loadLazyImages';
+import { act } from '@testing-library/react';
+
+jest.mock('@eeacms/volto-eea-website-theme/actions/print', () => ({
+  setIsPrint: jest.fn(() => ({ type: 'SET_IS_PRINT' })),
+  setPrintLoading: jest.fn(() => ({ type: 'SET_PRINT_LOADING' })),
+}));
+
+jest.mock('@eeacms/volto-eea-website-theme/helpers/loadLazyImages', () => ({
+  loadLazyImages: jest.fn(),
+}));
+
+describe('setupPrintView', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div class="ui tab"></div>
+      <img />
+      <iframe></iframe>
+      <div class="visualization-wrapper"></div>
+    `;
+
+    jest.useFakeTimers();
+    window.scrollTo = jest.fn();
+    window.print = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+  });
+
+  it('dispatches actions and triggers print', async () => {
+    const dispatch = jest.fn();
+
+    await act(async () => {
+      setupPrintView(dispatch);
+      jest.runAllTimers();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_IS_PRINT' });
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_PRINT_LOADING' });
+    expect(loadLazyImages).toHaveBeenCalled();
+    expect(window.scrollTo).toHaveBeenCalledWith({ top: 0 });
+    expect(window.print).toHaveBeenCalled();
+  });
+});

package/src/index.js

@@ -14,6 +14,7 @@ import HomePageInverseView from '@eeacms/volto-eea-website-theme/components/them
 import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
 import WebReportSectionView from '@eeacms/volto-eea-website-theme/components/theme/WebReport/WebReportSectionView';
 import NotFound from '@eeacms/volto-eea-website-theme/components/theme/NotFound/NotFound';
+import PrintLoader from '@eeacms/volto-eea-website-theme/components/theme/PrintLoader/PrintLoader';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
 import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget';
 import { DateWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/DateWidget';
@@ -420,6 +421,10 @@ const applyConfig = (config) => {
       match: '',
       component: BaseTag,
     },
+    {
+      match: '',
+      component: PrintLoader,
+    },
   ];
 
   // Install slate

package/src/index.test.js

@@ -33,6 +33,10 @@ jest.mock(
     TopicsWidget: 'MockedThemesWidget',
   }),
 );
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/PrintLoader/PrintLoader',
+  () => 'MockedPrintLoader',
+);
 jest.mock('./components/theme/SubsiteClass', () => 'MockedSubsiteClass');
 jest.mock(
   '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView',
@@ -149,6 +153,7 @@ describe('applyConfig', () => {
       { match: '', component: 'MockedDraftBackground' },
       { match: '', component: 'MockedSubsiteClass' },
       { match: '', component: BaseTag },
+      { match: '', component: 'MockedPrintLoader' },
     ]);
     expect(config.settings.available_colors).toEqual(eea.colors);
     expect(config.settings.hasLanguageDropdown).toBe(false);
@@ -315,6 +320,7 @@ describe('applyConfig', () => {
       { match: '', component: 'MockedDraftBackground' },
       { match: '', component: 'MockedSubsiteClass' },
       { match: '', component: BaseTag },
+      { match: '', component: 'MockedPrintLoader' },
     ]);
     expect(config.settings.available_colors).toEqual(eea.colors);
     expect(config.settings.hasLanguageDropdown).toBe(false);

package/src/reducers/print.js

@@ -3,19 +3,29 @@
  * @module reducers/print
  */
 
-import { SET_ISPRINT } from '@eeacms/volto-eea-website-theme/constants/ActionTypes';
+import {
+  SET_ISPRINT,
+  SET_PRINT_LOADING,
+} from '@eeacms/volto-eea-website-theme/constants/ActionTypes';
 
 const initialState = {
   isPrint: false,
+  isPrintLoading: false,
 };
 
 export default function print(state = initialState, action) {
-  if (action.type === SET_ISPRINT) {
-    return {
-      ...state,
-      isPrint: action.payload,
-    };
-  } else {
-    return state;
+  switch (action.type) {
+    case SET_ISPRINT:
+      return {
+        ...state,
+        isPrint: action.payload,
+      };
+    case SET_PRINT_LOADING:
+      return {
+        ...state,
+        isPrintLoading: action.payload,
+      };
+    default:
+      return state;
   }
 }