Improve deployment settings, add apiPath/internalApiPath detection

apps/remix/app/client.ts

@@ -2,7 +2,7 @@ import ploneClient from '@plone/client';
 import config from '@plone/registry';
 
 const cli = ploneClient.initialize({
-  apiPath: config.settings.apiPath,
+  apiPath: config.settings.internalApiPath || config.settings.apiPath,
 });
 
 export { cli as ploneClient };

apps/remix/app/config.ts

@@ -1,8 +1,15 @@
 import config from '@plone/registry';
 import applyAddonConfiguration from '@plone/registry/addons-loader';
 
-applyAddonConfiguration(config);
-
-config.settings.apiPath = 'http://localhost:3000';
-
-export default config;
+export default function install() {
+  applyAddonConfiguration(config);
+  config.settings.apiPath =
+    process.env.PLONE_API_PATH || 'http://localhost:3000';
+  config.settings.internalApiPath = process.env.PLONE_INTERNAL_API_PATH || '';
+  console.log('API_PATH is:', config.settings.apiPath);
+  console.log(
+    'INTERNAL_API_PATH is:',
+    config.settings.internalApiPath || 'not set',
+  );
+  return config;
+}

apps/remix/app/routes/_index.tsx → apps/remix/app/content.tsx

@@ -10,12 +10,12 @@ import {
   useQueryClient,
   useQuery,
 } from '@tanstack/react-query';
-import { flattenToAppURL } from '../utils';
+import { flattenToAppURL } from './utils';
 import { useLoaderData, useLocation } from '@remix-run/react';
 import { usePloneClient } from '@plone/providers';
 // import { Breadcrumbs, RenderBlocks } from '@plone/components';
 // import config from '@plone/registry';
-import { ploneClient } from '../client';
+import { ploneClient } from './client';
 import App from '@plone/slots/components/App';
 
 export const meta: MetaFunction = () => {
@@ -25,7 +25,7 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-const expand = ['breadcrumbs', 'navigation'];
+const expand = ['navroot', 'breadcrumbs', 'navigation'];
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
@@ -42,16 +42,16 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   const { getContentQuery } = ploneClient;
 
   await queryClient.prefetchQuery(
-    getContentQuery({ path: flattenToAppURL(request.url), expand }),
+    getContentQuery({ path: flattenToAppURL(request.url || '/'), expand }),
   );
 
   return json({ dehydratedState: dehydrate(queryClient) });
 };
 
 function Page() {
   const { getContentQuery } = usePloneClient();
-  const pathname = useLocation().pathname;
-  const { data } = useQuery(getContentQuery({ path: pathname, expand }));
+  const { pathname } = useLocation();
+  const { data } = useQuery(getContentQuery({ path: pathname || '/', expand }));
 
   if (!data) return null;
   return (

apps/remix/app/entry.client.tsx

@@ -3,11 +3,12 @@
  * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
  * For more information, see https://remix.run/file-conventions/entry.client
  */
-
+import install from './config';
 import { RemixBrowser } from '@remix-run/react';
 import { startTransition, StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
-import './config';
+
+install();
 
 startTransition(() => {
   hydrateRoot(

apps/remix/app/entry.server.tsx

@@ -11,10 +11,12 @@ import { createReadableStreamFromReadable } from '@remix-run/node';
 import { RemixServer } from '@remix-run/react';
 import { isbot } from 'isbot';
 import { renderToPipeableStream } from 'react-dom/server';
-import './config';
+import install from './config';
 
 const ABORT_DELAY = 5_000;
 
+install();
+
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,

apps/remix/app/root.tsx

@@ -20,16 +20,13 @@ import '@plone/components/dist/basic.css';
 import '@plone/slots/main.css';
 import { flattenToAppURL } from './utils';
 import { PloneProvider } from '@plone/providers';
+
 import config from '@plone/registry';
 
 export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
 ];
 
-function useHrefLocal(to: string) {
-  return useHref(flattenToAppURL(to));
-}
-
 export default function App() {
   const [queryClient] = useState(
     () =>
@@ -56,6 +53,10 @@ export default function App() {
     return RRNavigate(flattenToAppURL(to));
   };
 
+  function useHrefLocal(to: string) {
+    return useHref(flattenToAppURL(to));
+  }
+
   return (
     <html lang="en">
       <head>
@@ -72,6 +73,7 @@ export default function App() {
           useParams={useParams}
           useHref={useHrefLocal}
           navigate={navigate}
+          flattenToAppURL={flattenToAppURL}
         >
           <Outlet />
           <ScrollRestoration />

apps/remix/app/utils.ts

@@ -9,9 +9,11 @@ import config from '@plone/registry';
  */
 export function flattenToAppURL(url: string) {
   const { settings } = config;
-
-  return (
+  const result =
     url &&
-    url.replace(settings.apiPath, '').replace('http://localhost:3000', '')
-  );
+    url
+      .replace(settings.apiPath, '')
+      .replace(settings.internalApiPath || '', '')
+      .replace('http://localhost:3000', '');
+  return result;
 }

apps/remix/vite.config.ts

@@ -19,6 +19,26 @@ export default defineConfig({
   },
   plugins: [
     remix({
+      routes: async (defineRoutes) => {
+        // If you need to do async work, do it before calling `defineRoutes`, we use
+        // the call stack of `route` inside to set nesting.
+
+        return defineRoutes((route) => {
+          route('/', 'content.tsx', { id: 'index' });
+          route('*', 'content.tsx', { id: 'splat' });
+          // A common use for this is catchall routes.
+          // - The first argument is the React Router path to match against
+          // - The second is the relative filename of the route handler
+          // route("/some/path/*", "catchall.tsx");
+
+          // if you want to nest routes, use the optional callback argument
+          // route("some/:path", "some/route/file.js", () => {
+          //   // - path is relative to parent path
+          //   // - filenames are still relative to the app directory
+          //   route("relative/path", "some/other/file");
+          // });
+        });
+      },
       future: {
         v3_fetcherPersist: true,
         v3_relativeSplatPath: true,

apps/rr7/app/client.ts

@@ -2,7 +2,7 @@ import ploneClient from '@plone/client';
 import config from '@plone/registry';
 
 const cli = ploneClient.initialize({
-  apiPath: config.settings.apiPath,
+  apiPath: config.settings.internalApiPath || config.settings.apiPath,
 });
 
 export { cli as ploneClient };

apps/rr7/app/config.ts

@@ -1,8 +1,15 @@
 import config from '@plone/registry';
 import applyAddonConfiguration from '@plone/registry/addons-loader';
 
-applyAddonConfiguration(config);
-
-config.settings.apiPath = 'http://localhost:3000';
-
-export default config;
+export default function install() {
+  applyAddonConfiguration(config);
+  config.settings.apiPath =
+    process.env.PLONE_API_PATH || 'http://localhost:3000';
+  config.settings.internalApiPath = process.env.PLONE_INTERNAL_API_PATH || '';
+  console.log('API_PATH is:', config.settings.apiPath);
+  console.log(
+    'INTERNAL_API_PATH is:',
+    config.settings.internalApiPath || 'not set',
+  );
+  return config;
+}

apps/rr7/app/routes/home.tsx → apps/rr7/app/content.tsx

@@ -1,15 +1,15 @@
-import type { LoaderArgs } from '../routes/+types.home';
+import type { LoaderArgs } from './routes/+types.home';
 import {
   dehydrate,
   QueryClient,
   HydrationBoundary,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { flattenToAppURL } from '../utils';
+import { flattenToAppURL } from './utils';
 import { useLoaderData, useLocation } from 'react-router';
 import { usePloneClient } from '@plone/providers';
-import { ploneClient } from '../client';
+import { ploneClient } from './client';
 import App from '@plone/slots/components/App';
 import type { MetaFunction } from 'react-router';
 
@@ -20,7 +20,7 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-const expand = ['breadcrumbs', 'navigation'];
+const expand = ['navroot', 'breadcrumbs', 'navigation'];
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export async function loader({ params, request }: LoaderArgs) {

apps/rr7/app/root.tsx

@@ -18,14 +18,12 @@ import PloneClient from '@plone/client';
 import { PloneProvider } from '@plone/providers';
 import { flattenToAppURL } from './utils';
 import config from '@plone/registry';
-import './config';
+import install from './config';
 
 import '@plone/theming/styles/main.css';
 import '@plone/slots/main.css';
 
-function useHrefLocal(to: string) {
-  return useHref(flattenToAppURL(to));
-}
+install();
 
 export const links: LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
@@ -83,6 +81,10 @@ export default function App() {
     return RRNavigate(flattenToAppURL(to));
   };
 
+  function useHrefLocal(to: string) {
+    return useHref(flattenToAppURL(to));
+  }
+
   return (
     <PloneProvider
       ploneClient={ploneClient}
@@ -91,6 +93,7 @@ export default function App() {
       useParams={useParams}
       useHref={useHrefLocal}
       navigate={navigate}
+      flattenToAppURL={flattenToAppURL}
     >
       <Outlet />
       <ReactQueryDevtools initialIsOpen={false} />

apps/rr7/app/routes.ts

@@ -2,6 +2,6 @@ import type { RouteConfig } from '@react-router/dev/routes';
 import { index, route } from '@react-router/dev/routes';
 
 export const routes: RouteConfig = [
-  index('routes/home.tsx'),
-  route('*', 'routes/$.tsx'),
+  index('content.tsx', { id: 'index' }),
+  route('*', 'content.tsx', { id: 'splat' }),
 ];

apps/rr7/app/utils.ts

@@ -1,4 +1,4 @@
-import config from './config';
+import config from '@plone/registry';
 
 /**
  * Flatten to app server URL - Given a URL if it starts with the API server URL
@@ -9,9 +9,11 @@ import config from './config';
  */
 export function flattenToAppURL(url: string) {
   const { settings } = config;
-
-  return (
+  const result =
     url &&
-    url.replace(settings.apiPath, '').replace('http://localhost:3000', '')
-  );
+    url
+      .replace(settings.apiPath, '')
+      .replace(settings.internalApiPath || '', '')
+      .replace('http://localhost:3000', '');
+  return result;
 }

packages/blocks/Image/index.tsx

@@ -2,9 +2,10 @@ import { BlockViewProps } from '@plone/types';
 import { usePloneProvider } from '@plone/providers';
 
 const ImageBlockView = (props: BlockViewProps) => {
-  console.log(props);
+  // console.log(props);
   const flattenToAppURL = usePloneProvider().flattenToAppURL;
   const { data } = props;
+  if (!data.url) return null;
   const url = data.image_scales
     ? `/++api++${flattenToAppURL(data.url)}/${data.image_scales[data.image_field][0].download}`
     : data.url;