Proper proxy for Remix app, proper @plone/registry config. Basic teaser.

apps/remix/.gitignore

@@ -4,3 +4,4 @@ node_modules
 /build
 /public/build
 .env
+.registry.loader.js

apps/remix/app/config.ts

@@ -1,12 +1,8 @@
 import config from '@plone/registry';
-import installBlocks from '@plone/blocks';
-import installSlots from '@plone/slots';
+import applyAddonConfiguration from 'load-plone-registry-addons';
 
-config.set('slots', {});
-config.set('utilities', {});
-installBlocks(config);
-installSlots(config);
+applyAddonConfiguration(config);
 
-config.settings.apiPath = 'http://localhost:8080/Plone';
+config.settings.apiPath = 'http://localhost:3000';
 
 export default config;

apps/remix/registry.config.ts

@@ -0,0 +1,4 @@
+const addons = ['@plone/blocks', '@plone/slots'];
+const theme = '';
+
+export { addons, theme };

apps/remix/vite.config.ts

@@ -4,6 +4,19 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 import { PloneRegistryVitePlugin } from '@plone/registry/vite-plugin';
 
 export default defineConfig({
+  server: {
+    port: 3000,
+    proxy: {
+      '^/\\+\\+api\\+\\+($$|/.*)': {
+        target:
+          'http://localhost:8080/VirtualHostBase/http/localhost:3000/Plone/++api++/VirtualHostRoot',
+        rewrite: (path) => {
+          console.log(path);
+          return path.replace('/++api++', '');
+        },
+      },
+    },
+  },
   plugins: [
     remix({
       future: {
@@ -15,7 +28,4 @@ export default defineConfig({
     tsconfigPaths(),
     PloneRegistryVitePlugin(),
   ],
-  server: {
-    port: 3000,
-  },
 });

packages/blocks/Teaser/index.tsx

@@ -0,0 +1,31 @@
+import { BlockViewProps } from '@plone/types';
+import { Link } from '@plone/components';
+
+const TeaserBlockView = (props: BlockViewProps) => {
+  const { data } = props;
+  const href = Array.isArray(data.href) ? data.href[0]['@id'] : data.href;
+  const image = data.preview_image?.[0];
+  // TODO: Improve the images download path including the ++api++ to avoid having to setup a redirect
+  // for @@images and @@download
+  const url =
+    data.preview_image?.[0]?.['@id'] ||
+    `/++api++${data.href[0]?.image_scales[data.href[0].image_field][0].base_path}/${data.href[0]?.image_scales[data.href[0].image_field][0].download}`;
+
+  return (
+    <div>
+      <Link href={href}>
+        <div className="teaser-item">
+          <div className="teaser-image-wrapper">
+            <img src={url} alt="" />
+          </div>
+          <div className="teaser-content">
+            <h2>{data.title}</h2>
+            <p>{data?.description}</p>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default TeaserBlockView;

packages/blocks/config/index.ts

@@ -1,6 +1,7 @@
 import TitleBlockView from '../Title/View';
 import TextBlockView from '../Text/View';
 import ImageBlockView from '../Image';
+import TeaserBlockView from '../Teaser';
 
 export * from './slate';
 
@@ -22,4 +23,10 @@ export const blocksConfig = {
     title: 'Image',
     view: ImageBlockView,
   },
+
+  teaser: {
+    id: 'teaser',
+    title: 'Teaser',
+    view: TeaserBlockView,
+  },
 };

packages/blocks/package.json

@@ -50,9 +50,11 @@
       "optional": true
     }
   },
-  "dependencies": {},
+  "dependencies": {
+    "@plone/components": "workspace:*",
+    "@plone/registry": "workspace:*"
+  },
   "devDependencies": {
-    "@plone/registry": "workspace:*",
     "@plone/types": "workspace:*",
     "@types/react": "^18",
     "@types/react-dom": "^18",