@plone/volto 19.0.0-alpha.7 → 19.0.0-alpha.9

package/src/helpers/Api/APIResourceWithAuth.js

@@ -6,6 +6,7 @@
 import superagent from 'superagent';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
+import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 
 /**
  * Get a resource image/file with authenticated (if token exist) API headers
@@ -16,9 +17,9 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 export const getAPIResourceWithAuth = (req) =>
   new Promise((resolve, reject) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
-
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     let apiPath = '';
+
     if (settings.internalApiPath && __SERVER__) {
       apiPath = settings.internalApiPath;
     } else if (__DEVELOPMENT__ && settings.devProxyToApiPath) {
@@ -26,8 +27,12 @@ export const getAPIResourceWithAuth = (req) =>
     } else {
       apiPath = settings.apiPath;
     }
+
+    //strip subpath if any
+    const contentPath = stripSubpathPrefix(req.path);
+
     const request = superagent
-      .get(`${apiPath}${__DEVELOPMENT__ ? '' : APISUFIX}${req.path}`)
+      .get(`${apiPath}${__DEVELOPMENT__ ? '' : apiSuffix}${contentPath}`)
       .maxResponseSize(settings.maxResponseSize)
       .responseType('blob');
     const authToken = req.universalCookies.get('auth_token');

package/src/helpers/Api/Api.js

@@ -7,7 +7,10 @@ import superagent from 'superagent';
 import Cookies from 'universal-cookie';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
-import { stripQuerystring } from '@plone/volto/helpers/Url/Url';
+import {
+  stripQuerystring,
+  stripSubpathPrefix,
+} from '@plone/volto/helpers/Url/Url';
 
 const methods = ['get', 'post', 'put', 'patch', 'del'];
 
@@ -19,11 +22,10 @@ const methods = ['get', 'post', 'put', 'patch', 'del'];
  */
 export function formatUrl(path) {
   const { settings } = config;
-  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
 
   if (path.startsWith('http://') || path.startsWith('https://')) return path;
 
-  const adjustedPath = path[0] !== '/' ? `/${path}` : path;
   let apiPath = '';
   if (settings.internalApiPath && __SERVER__) {
     apiPath = settings.internalApiPath;
@@ -31,7 +33,8 @@ export function formatUrl(path) {
     apiPath = settings.apiPath;
   }
 
-  return `${apiPath}${APISUFIX}${adjustedPath}`;
+  const contentPath = stripSubpathPrefix(path[0] !== '/' ? `/${path}` : path);
+  return `${apiPath}${apiSuffix}${contentPath}`;
 }
 
 /**

package/src/helpers/AsyncConnect/ssr.js

@@ -1,6 +1,7 @@
 import { matchRoutes } from 'react-router-config';
 import { mapSeries, isPromise } from './utils';
 import { endGlobalLoad } from '@plone/volto/actions/asyncConnect/asyncConnect';
+import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 
 export function filterComponents(branch) {
   return branch.reduce((result, { route, match }) => {
@@ -18,7 +19,9 @@ export function loadAsyncConnect({
   filter = () => true,
   ...rest
 }) {
-  const layered = filterComponents(matchRoutes(routes, location.pathname));
+  const layered = filterComponents(
+    matchRoutes(routes, stripSubpathPrefix(location.pathname)),
+  );
 
   if (layered.length === 0) {
     return Promise.resolve();

package/src/helpers/Html/Html.jsx

@@ -9,6 +9,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import serialize from 'serialize-javascript';
 import join from 'lodash/join';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import { addSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import config from '@plone/volto/registry';
 
@@ -126,14 +127,22 @@ class Html extends Component {
             }}
           />
 
-          <link rel="icon" href="/favicon.ico" sizes="any" />
-          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+          <link
+            rel="icon"
+            href={addSubpathPrefix('/favicon.ico')}
+            sizes="any"
+          />
+          <link
+            rel="icon"
+            href={addSubpathPrefix('/icon.svg')}
+            type="image/svg+xml"
+          />
           <link
             rel="apple-touch-icon"
             sizes="180x180"
-            href="/apple-touch-icon.png"
+            href={addSubpathPrefix('/apple-touch-icon.png')}
           />
-          <link rel="manifest" href="/site.webmanifest" />
+          <link rel="manifest" href={addSubpathPrefix('/site.webmanifest')} />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="mobile-web-app-capable" content="yes" />

package/src/helpers/Sitemap/Sitemap.js

@@ -22,10 +22,10 @@ export const SITEMAP_BATCH_SIZE = 5000;
 export const generateSitemap = (_req, start = 0, size = undefined) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_start=${start}&b_size=${
+      `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_start=${start}&b_size=${
         size !== undefined ? size : 100000000
       }&use_site_search_settings=1`,
     );
@@ -64,10 +64,10 @@ export const generateSitemap = (_req, start = 0, size = undefined) =>
 export const generateSitemapIndex = (_req, gzip = false) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
+      `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
     );
     request.set('Accept', 'application/json');
     const authToken = _req.universalCookies.get('auth_token');

package/src/helpers/Url/Url.js

@@ -193,7 +193,7 @@ export function addAppURL(url) {
  */
 export function expandToBackendURL(path) {
   const { settings } = config;
-  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
   let adjustedPath;
   if (path.startsWith('http://') || path.startsWith('https://')) {
     // flattenToAppURL first if we get a full URL
@@ -210,7 +210,7 @@ export function expandToBackendURL(path) {
     apiPath = settings.apiPath;
   }
 
-  return `${apiPath}${APISUFIX}${adjustedPath}`;
+  return `${apiPath}${apiSuffix}${adjustedPath}`;
 }
 
 /**
@@ -258,6 +258,36 @@ export function isUrl(url) {
   return urlRegex().test(url);
 }
 
+/**
+ * Add subpath path if set in settings
+ * @method addSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} prefixed subpath pathname
+ */
+export function addSubpathPrefix(src) {
+  let url = src;
+  const { subpathPrefix } = config.settings;
+  if (isInternalURL(src) && subpathPrefix && !src.startsWith(subpathPrefix)) {
+    url = subpathPrefix + src; //add subpathPrefix to src if it's an internal url and not a static resource.
+  }
+  return url;
+}
+
+/**
+ * strip subpath path particulary from api calls
+ * @method stripSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} pathname
+ */
+export function stripSubpathPrefix(src) {
+  let url = src;
+  const { subpathPrefix } = config.settings;
+  if (subpathPrefix && src.match(new RegExp(`^${subpathPrefix}(/|$)`))) {
+    url = src.slice(subpathPrefix.length);
+  }
+  return url;
+}
+
 /**
  * Get field url
  * @method getFieldURL

package/src/helpers/Url/Url.test.js

@@ -19,6 +19,8 @@ import {
   normaliseMail,
   normalizeTelephone,
   flattenScales,
+  addSubpathPrefix,
+  stripSubpathPrefix,
 } from './Url';
 
 beforeEach(() => {
@@ -533,4 +535,64 @@ describe('Url', () => {
       });
     });
   });
+
+  describe('Subpath tests', () => {
+    beforeEach(() => {
+      settings.subpathPrefix = '/site';
+    });
+    describe('addSubpathPrefix', () => {
+      it('adds subpath prefix to internal URLs', () => {
+        expect(addSubpathPrefix('/some-page')).toBe('/site/some-page');
+        expect(addSubpathPrefix('/news/article')).toBe('/site/news/article');
+      });
+
+      it('does not add subpath prefix to URLs that already have it', () => {
+        expect(addSubpathPrefix('/site/some-page')).toBe('/site/some-page');
+      });
+
+      it('does not add subpath prefix to external URLs', () => {
+        expect(addSubpathPrefix('https://example.com/page')).toBe(
+          'https://example.com/page',
+        );
+      });
+
+      it('handles empty subpath prefix', () => {
+        settings.subpathPrefix = '';
+        expect(addSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+
+      it('handles undefined subpath prefix', () => {
+        settings.subpathPrefix = undefined;
+        expect(addSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+    });
+
+    describe('stripSubpathPrefix', () => {
+      beforeEach(() => {
+        settings.subpathPrefix = '/site';
+      });
+      it('removes subpath prefix from URLs that have it', () => {
+        expect(stripSubpathPrefix('/site/some-page')).toBe('/some-page');
+        expect(stripSubpathPrefix('/site/news/article')).toBe('/news/article');
+      });
+
+      it('leaves URLs unchanged if they do not have the prefix', () => {
+        expect(stripSubpathPrefix('/other/some-page')).toBe('/other/some-page');
+      });
+
+      it('handles the case where URL is exactly the subpath prefix', () => {
+        expect(stripSubpathPrefix('/site')).toBe('');
+      });
+
+      it('handles empty subpath prefix', () => {
+        settings.subpathPrefix = '';
+        expect(stripSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+
+      it('handles undefined subpath prefix', () => {
+        settings.subpathPrefix = undefined;
+        expect(stripSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+    });
+  });
 });

package/src/server.jsx

@@ -18,8 +18,9 @@ import { CookiesProvider } from 'react-cookie';
 import cookiesMiddleware from 'universal-cookie-express';
 import debug from 'debug';
 
-import routes from '@root/routes';
+import routes from '@plone/volto/routes';
 import config from '@plone/volto/registry';
+import okMiddleware from '@plone/volto/express-middleware/ok';
 
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import Html from '@plone/volto/helpers/Html/Html';
@@ -39,7 +40,10 @@ import ErrorPage from '@plone/volto/error';
 import languages from '@plone/volto/constants/Languages.cjs';
 
 import configureStore from '@plone/volto/store';
-import { ReduxAsyncConnect, loadOnServer } from './helpers/AsyncConnect';
+import {
+  ReduxAsyncConnect,
+  loadOnServer,
+} from '@plone/volto/helpers/AsyncConnect';
 
 let locales = {};
 
@@ -69,10 +73,30 @@ const server = express()
   })
   .use(cookiesMiddleware());
 
+// If Volto is being served under a subpath,
+// make sure the static files are available there too.
+// (The static middleware loads too early to access the config.)
+if (config.settings.subpathPrefix) {
+  server.use(
+    config.settings.subpathPrefix,
+    express.static(
+      process.env.BUILD_DIR
+        ? path.join(process.env.BUILD_DIR, 'public')
+        : process.env.RAZZLE_PUBLIC_DIR,
+      {
+        redirect: false, // Avoid /my-prefix from being redirected to /my-prefix/
+      },
+    ),
+  );
+}
+
 const middleware = (config.settings.expressMiddleware || []).filter((m) => m);
 
 server.all('*', setupServer);
-if (middleware.length) server.use('/', middleware);
+if (middleware.length) {
+  server.use(config.settings.subpathPrefix || '/', middleware);
+}
+server.use('/', okMiddleware());
 
 server.use(function (err, req, res, next) {
   if (err) {
@@ -160,8 +184,10 @@ function setupServer(req, res, next) {
     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;
+    config.settings.apiPath =
+      res.locals.detectedHost + config.settings.subpathPrefix;
+    config.settings.publicURL =
+      res.locals.detectedHost + config.settings.subpathPrefix;
   }
 
   res.locals = {
@@ -253,7 +279,11 @@ server.get('/*', (req, res) => {
         <ChunkExtractorManager extractor={extractor}>
           <CookiesProvider cookies={req.universalCookies}>
             <Provider store={store} onError={reactIntlErrorHandler}>
-              <StaticRouter context={context} location={req.url}>
+              <StaticRouter
+                context={context}
+                location={req.url}
+                basename={config.settings.subpathPrefix}
+              >
                 <ReduxAsyncConnect routes={routes} helpers={api} />
               </StaticRouter>
             </Provider>
@@ -290,8 +320,8 @@ server.get('/*', (req, res) => {
             markup={markup}
             store={store}
             criticalCss={readCriticalCss(req)}
-            apiPath={res.locals.detectedHost || config.settings.apiPath}
-            publicURL={res.locals.detectedHost || config.settings.publicURL}
+            apiPath={config.settings.apiPath}
+            publicURL={config.settings.publicURL}
           />,
         )}
       `,
@@ -334,6 +364,8 @@ export const defaultReadCriticalCss = () => {
 
 // Exposed for the console bootstrap info messages
 server.apiPath = config.settings.apiPath;
+server.internalApiPath = config.settings.internalApiPath;
+server.subpathPrefix = config.settings.subpathPrefix;
 server.devProxyToApiPath = config.settings.devProxyToApiPath;
 server.proxyRewriteTarget = config.settings.proxyRewriteTarget;
 server.publicURL = config.settings.publicURL;

package/src/start-client.jsx

@@ -18,8 +18,6 @@ import Api from '@plone/volto/helpers/Api/Api';
 import { persistAuthToken } from '@plone/volto/helpers/AuthToken/AuthToken';
 import ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 
-export const history = createBrowserHistory();
-
 function reactIntlErrorHandler(error) {
   debug('i18n')(error);
 }
@@ -27,6 +25,15 @@ function reactIntlErrorHandler(error) {
 export default function client() {
   const api = new Api();
 
+  if (window.env.RAZZLE_SUBPATH_PREFIX) {
+    config.settings.subpathPrefix = window.env.RAZZLE_SUBPATH_PREFIX;
+  }
+  const history = createBrowserHistory({
+    basename: config.settings.subpathPrefix
+      ? config.settings.subpathPrefix
+      : '/',
+  });
+
   const store = configureStore(window.__data, history, api);
   persistAuthToken(store);
 

package/src/start-server.js

@@ -18,14 +18,20 @@ export default function server() {
 
   server
     .listen(port, bind_address, () => {
-      console.log(`API server (API_PATH) is set to: ${app.apiPath}`);
-
-      if (app.devProxyToApiPath)
+      console.log(
+        `The Volto server will make API requests to: ${app.internalApiPath || app.apiPath}/++api++`,
+      );
+      console.log(
+        `The Volto client will make API requests to: ${app.apiPath}/++api++`,
+      );
+
+      if (app.devProxyToApiPath) {
         console.log(
           `Proxying API requests from ${app.publicURL}/++api++ to ${
             app.devProxyToApiPath
           }${app.proxyRewriteTarget || ''}`,
         );
+      }
       console.log(`🎭 Volto started at ${bind_address}:${port} 🚀`);
 
       if (!process.env.RAZZLE_PUBLIC_URL)

package/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "target": "es2022",
+    "lib": ["es2022", "dom", "dom.iterable"],
     "types": ["vitest/globals", "jest"],
-    "module": "commonjs",
+    "module": "preserve",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -11,7 +11,6 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "strictPropertyInitialization": false,
-    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

package/types/components/theme/LanguageSelector/LanguageSelector.d.ts

@@ -1,11 +1,4 @@
+declare const LanguageSelector: ({ onClickAction, }: {
+    onClickAction?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LanguageSelector;
-declare function LanguageSelector(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace LanguageSelector {
-    namespace propTypes {
-        let onClickAction: any;
-    }
-    namespace defaultProps {
-        export function onClickAction_1(): void;
-        export { onClickAction_1 as onClickAction };
-    }
-}

package/types/helpers/Url/Url.d.ts

@@ -78,6 +78,20 @@ export function isInternalURL(url: string): boolean;
  * @returns {boolean} True if is a valid url
  */
 export function isUrl(url: string): boolean;
+/**
+ * Add subpath path if set in settings
+ * @method addSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} prefixed subpath pathname
+ */
+export function addSubpathPrefix(src: string): string;
+/**
+ * strip subpath path particulary from api calls
+ * @method stripSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} pathname
+ */
+export function stripSubpathPrefix(src: string): string;
 /**
  * Normalize URL, adds protocol (if required eg. user has not entered the protocol)
  * @method normalizeUrl

package/types/reducers/index.d.ts

@@ -50,6 +50,7 @@ declare namespace reducers {
     export { site };
     export { navroot };
 }
+import { intlReducer } from 'react-intl-redux';
 import reduxAsyncConnect from './asyncConnect/asyncConnect';
 import actions from '@plone/volto/reducers/actions/actions';
 import addons from '@plone/volto/reducers/addons/addons';

package/types/start-client.d.ts

@@ -1,2 +1 @@
 export default function client(): void;
-export const history: import("history").History<unknown>;

package/package-why.json

@@ -1,34 +0,0 @@
-{
-  "scripts": {
-    "postinstall": "Description for `npm run postinstall` command",
-    "analyze": "Description for `npm run analyze` command",
-    "start": "Description for `npm run start` command",
-    "build": "Description for `npm run build` command",
-    "build:clean": "Description for `npm run build:clean` command",
-    "dist:clean": "Description for `npm run dist:clean` command",
-    "build:dist": "Description for `npm run build:dist` command",
-    "test": "Description for `npm run test` command",
-    "test:ci": "Description for `npm run test:ci` command",
-    "test:husky": "Description for `npm run test:husky` command",
-    "test:debug": "Description for `npm run test:debug` command",
-    "start:prod": "Description for `npm run start:prod` command",
-    "start:dist": "Description for `npm run start:dist` command",
-    "prettier": "Description for `npm run prettier` command",
-    "prettier:fix": "Description for `npm run prettier:fix` command",
-    "stylelint": "Description for `npm run stylelint` command",
-    "stylelint:overrides": "Description for `npm run stylelint:overrides` command",
-    "stylelint:fix": "Description for `npm run stylelint:fix` command",
-    "lint": "Description for `npm run lint` command",
-    "lint:fix": "Description for `npm run lint:fix` command",
-    "i18n": "Description for `npm run i18n` command",
-    "i18n:ci": "Description for `npm run i18n:ci` command",
-    "stylelint:patches": "Description for `npm run stylelint:patches` command",
-    "patches": "Description for `npm run patches` command",
-    "dry-release": "Description for `npm run dry-release` command",
-    "release": "Description for `npm run release` command",
-    "release-major-alpha": "Description for `npm run release-major-alpha` command",
-    "release-alpha": "Description for `npm run release-alpha` command",
-    "storybook": "Description for `npm run storybook` command",
-    "build-storybook": "Description for `npm run build-storybook` command"
-  }
-}

package/src/components/theme/LanguageSelector/LanguageSelector.jsx

@@ -1,79 +0,0 @@
-/**
- * Language selector component.
- * @module components/LanguageSelector/LanguageSelector
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-
-import { useSelector } from 'react-redux';
-import cx from 'classnames';
-import find from 'lodash/find';
-import map from 'lodash/map';
-
-import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
-import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
-
-import { defineMessages, useIntl } from 'react-intl';
-
-const messages = defineMessages({
-  switchLanguageTo: {
-    id: 'Switch to',
-    defaultMessage: 'Switch to',
-  },
-});
-
-const LanguageSelector = (props) => {
-  const intl = useIntl();
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-  const isMultilingual = useSelector(
-    (state) => state.site.data.features?.multilingual,
-  );
-  const availableLanguages = useSelector(
-    (state) => state.site.data?.['plone.available_languages'],
-  );
-
-  return isMultilingual ? (
-    <div className="language-selector">
-      {map(availableLanguages, (lang) => {
-        const translation = find(translations, { language: lang });
-        return (
-          <Link
-            aria-label={`${intl.formatMessage(
-              messages.switchLanguageTo,
-            )} ${langmap[lang].nativeName.toLowerCase()}`}
-            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
-            to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
-            title={langmap[lang].nativeName}
-            onClick={() => {
-              props.onClickAction();
-            }}
-            key={`language-selector-${lang}`}
-          >
-            {langmap[lang].nativeName}
-          </Link>
-        );
-      })}
-    </div>
-  ) : (
-    <Helmet>
-      <html lang={toReactIntlLang(currentLang)} />
-    </Helmet>
-  );
-};
-
-LanguageSelector.propTypes = {
-  onClickAction: PropTypes.func,
-};
-
-LanguageSelector.defaultProps = {
-  onClickAction: () => {},
-};
-
-export default LanguageSelector;