Merge branch 'fixA11yLogoIssue' of github.com:plone/volto into fixA11…

…yLogoIssue

.prettierignore

@@ -6,3 +6,4 @@ styles/rules/*
 node_modules
 packages/volto/types/*
 storybook-static
+app/vite-ssr/src/routeTree.gen.ts

Makefile

@@ -190,7 +190,7 @@ start-backend-docker:
 	docker run -it --rm --name=backend -p 8080:8080 -e SITE=Plone -e ADDONS='$(KGS)' $(DOCKER_IMAGE)
 
 .PHONY: start-backend-docker-no-cors
-start-backend-docker-nocors:
+start-backend-docker-no-cors:
 	docker run -it --rm --name=backend -p 8080:8080 -e SITE=Plone -e ADDONS='$(KGS)' -e CORS_=true $(DOCKER_IMAGE)
 
 .PHONY: start-frontend-docker

README.md

@@ -130,7 +130,6 @@ To ensure your website gets the greatest exposure, add it both to [Awesome Volto
 - [Lanku](https://www.lanku.eus) (Website for Lanku Kultur Zerbitzuak, a company offering cultural services and improvised Basque verse singing sessions across the Basque Country, developed by [CodeSyntax](https://www.codesyntax.com/en), 2023)
 - [Leibniz Institute for Science and Mathematics Education (IPN)](https://www.leibniz-ipn.de/de) (Website of the IPN, a research institute dedicated to issues related to learning and teaching of science, mathematics and computer science in and outside of schools, developed by [Starzel](https://www.starzel.de), 2023)
 - [MEDICE Webseite](https://medice.com/de-de) (Website for MEDICE Arzneimittel Pütter GmbH & Co. KG), developed by [Werkbank GmbH](https://werkbank.de/), 2020)
-- [Memori](https://memori.ai/en) (Corporate website for Memori, startup specializing in technologies applied to the experience of memory through the development of Artificial Intelligences. Developed by [Nicola Zambello](https://nzambello.dev), 2021)
 - [Nuova Voce Ecologista](https://nuovavoceecologista.it) (Website of Nuova Voce Ecologista, an Italian green Party, 2020)
 - [Osaka University](https://www.osaka-u.ac.jp/en) (Osaka University is considered one of the most prestigious universities in Japan. Developed by [CMScom](https://www.cmscom.jp), 2021)
 - [ResOU](https://resou.osaka-u.ac.jp/ja) (ResOU is introducing official researched releases by the University of Osaka, Japan. Developed by [CMScom](https://www.cmscom.jp), 2020)

apps/vite-ssr/package.json

@@ -13,6 +13,9 @@
   },
   "dependencies": {
     "@plone/client": "workspace:*",
+    "@plone/components": "workspace:*",
+    "@plone/registry": "workspace:*",
+    "@plone/blocks": "workspace:*",
     "@tanstack/react-query": "5.0.5",
     "@tanstack/react-router": "^1.16.0",
     "@tanstack/react-router-server": "^1.16.0",
@@ -21,12 +24,14 @@
     "axios": "^1.6.5",
     "get-port": "^7.0.0",
     "react": "^18.2.0",
+    "react-aria-components": "^1.1.1",
     "react-dom": "^18.2.0",
     "sirv": "^2.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@babel/generator": "^7.23.6",
+    "@plone/types": "workspace:*",
     "@rollup/plugin-babel": "^6.0.4",
     "@tanstack/react-query-devtools": "^5.20.1",
     "@types/express": "^4.17.21",
@@ -39,7 +44,7 @@
     "node-fetch": "^3.3.2",
     "serve-static": "^1.15.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
+    "vite": "^5.1.4",
     "vite-plugin-babel": "^1.2.0"
   }
 }

apps/vite-ssr/src/config.ts

@@ -1,9 +1,14 @@
+import config from '@plone/registry';
+import { slate } from '@plone/blocks';
+import { blocksConfig } from '@plone/blocks';
+
 const settings = {
   apiPath: 'http://localhost:8080/Plone',
+  slate,
 };
 
-const config = {
-  settings,
-};
+config.set('settings', settings);
+
+config.set('blocks', { blocksConfig });
 
 export default config;

apps/vite-ssr/src/entry-client.tsx

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
 import { StartClient } from '@tanstack/react-router-server/client';
 import { createRouter } from './router';
 
+import './config';
+
 const router = createRouter();
 
 ReactDOM.hydrateRoot(document, <StartClient router={router} />);

apps/vite-ssr/src/entry-server.tsx

@@ -5,6 +5,7 @@ import { ServerResponse } from 'http';
 import express from 'express';
 import { StartServer } from '@tanstack/react-router-server/server';
 import { createRouter } from './router';
+import './config';
 
 // index.js
 import './fetch-polyfill';

apps/vite-ssr/src/routeTree.gen.ts

@@ -11,42 +11,24 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root';
-import { Route as PostsImport } from './routes/posts';
 import { Route as ErrorImport } from './routes/error';
+import { Route as SplatImport } from './routes/$';
 import { Route as IndexImport } from './routes/index';
-import { Route as PostsIndexImport } from './routes/posts/index';
-import { Route as PostsPostIdImport } from './routes/posts/$postId';
-import { Route as SplatEditImport } from './routes/$.edit';
 
 // Create/Update Routes
 
-const PostsRoute = PostsImport.update({
-  path: '/posts',
-  getParentRoute: () => rootRoute,
-} as any);
-
 const ErrorRoute = ErrorImport.update({
   path: '/error',
   getParentRoute: () => rootRoute,
 } as any);
 
-const IndexRoute = IndexImport.update({
-  path: '/',
+const SplatRoute = SplatImport.update({
+  path: '/$',
   getParentRoute: () => rootRoute,
 } as any);
 
-const PostsIndexRoute = PostsIndexImport.update({
+const IndexRoute = IndexImport.update({
   path: '/',
-  getParentRoute: () => PostsRoute,
-} as any);
-
-const PostsPostIdRoute = PostsPostIdImport.update({
-  path: '/$postId',
-  getParentRoute: () => PostsRoute,
-} as any);
-
-const SplatEditRoute = SplatEditImport.update({
-  path: '/$/edit',
   getParentRoute: () => rootRoute,
 } as any);
 
@@ -58,36 +40,23 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport;
       parentRoute: typeof rootRoute;
     };
-    '/error': {
-      preLoaderRoute: typeof ErrorImport;
-      parentRoute: typeof rootRoute;
-    };
-    '/posts': {
-      preLoaderRoute: typeof PostsImport;
+    '/$': {
+      preLoaderRoute: typeof SplatImport;
       parentRoute: typeof rootRoute;
     };
-    '/$/edit': {
-      preLoaderRoute: typeof SplatEditImport;
+    '/error': {
+      preLoaderRoute: typeof ErrorImport;
       parentRoute: typeof rootRoute;
     };
-    '/posts/$postId': {
-      preLoaderRoute: typeof PostsPostIdImport;
-      parentRoute: typeof PostsImport;
-    };
-    '/posts/': {
-      preLoaderRoute: typeof PostsIndexImport;
-      parentRoute: typeof PostsImport;
-    };
   }
 }
 
 // Create and export the route tree
 
 export const routeTree = rootRoute.addChildren([
   IndexRoute,
+  SplatRoute,
   ErrorRoute,
-  PostsRoute.addChildren([PostsPostIdRoute, PostsIndexRoute]),
-  SplatEditRoute,
 ]);
 
 /* prettier-ignore-end */

apps/vite-ssr/src/router.tsx

@@ -9,6 +9,8 @@ import { createRouter as createReactRouter } from '@tanstack/react-router';
 
 import { routeTree } from './routeTree.gen';
 import { PloneClientProvider } from '@plone/client/provider';
+import { FlattenToAppURLProvider } from '@plone/components';
+import { flattenToAppURL } from './utils';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -45,7 +47,9 @@ export function createRouter() {
       return (
         <PloneClientProvider client={ploneClient}>
           <QueryClientProvider client={queryClient}>
-            {children}
+            <FlattenToAppURLProvider flattenToAppURL={flattenToAppURL}>
+              {children}
+            </FlattenToAppURLProvider>
           </QueryClientProvider>
         </PloneClientProvider>
       );

apps/vite-ssr/src/routes/$.tsx

@@ -0,0 +1,37 @@
+import { createFileRoute } from '@tanstack/react-router';
+import * as React from 'react';
+import { flattenToAppURL } from '../utils';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { usePloneClient } from '@plone/client/provider';
+import { Breadcrumbs } from '@plone/components';
+
+const expand = ['breadcrumbs', 'navigation'];
+
+export const Route = createFileRoute('/$')({
+  loader: ({ context: { queryClient, ploneClient }, location }) => {
+    const { getContentQuery } = ploneClient;
+    return queryClient.ensureQueryData(
+      getContentQuery({ path: flattenToAppURL(location.pathname), expand }),
+    );
+  },
+  component: SplatRouteComponent,
+});
+
+function SplatRouteComponent() {
+  const { _splat: path } = Route.useParams();
+  const { getContentQuery } = usePloneClient();
+  const { data } = useSuspenseQuery(
+    getContentQuery({ path: flattenToAppURL(`/${path}`), expand }),
+  );
+  return (
+    <div className="p-2">
+      <Breadcrumbs
+        items={data['@components'].breadcrumbs.items || []}
+        root={data['@components'].breadcrumbs.root}
+        includeRoot
+      />
+
+      <h1> {data.title}</h1>
+    </div>
+  );
+}

apps/vite-ssr/src/routes/__root.tsx

@@ -1,14 +1,16 @@
-import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 import * as React from 'react';
+import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 import {
-  Link,
   Outlet,
   createRootRouteWithContext,
   useRouter,
 } from '@tanstack/react-router';
 import { DehydrateRouter } from '@tanstack/react-router-server/client';
 import { RouterContext } from '../routerContext';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { RouterProvider } from 'react-aria-components';
+
+import '@plone/components/dist/basic.css';
 
 export const Route = createRootRouteWithContext<RouterContext>()({
   component: RootComponent,
@@ -32,8 +34,7 @@ function RootComponent() {
             name="viewport"
             content="width=device-width, initial-scale=1.0"
           />
-          <title>Vite App</title>
-          <script src="https://cdn.tailwindcss.com" />
+          <title>Plone on Vite SSR build</title>
           <script
             type="module"
             suppressHydrationWarning
@@ -52,35 +53,11 @@ function RootComponent() {
         </head>
       )}
       <body>
-        <div className="p-2 flex gap-2 text-lg">
-          <Link
-            to="/"
-            activeProps={{
-              className: 'font-bold',
-            }}
-            activeOptions={{ exact: true }}
-          >
-            Home
-          </Link>{' '}
-          <Link
-            to="/posts"
-            activeProps={{
-              className: 'font-bold',
-            }}
-          >
-            Posts
-          </Link>{' '}
-          <Link
-            to="/error"
-            activeProps={{
-              className: 'font-bold',
-            }}
-          >
-            Error
-          </Link>
-        </div>
-        <hr />
-        <Outlet /> {/* Start rendering router matches */}
+        <RouterProvider
+          navigate={(path: string) => router.navigate({ to: path })}
+        >
+          <Outlet /> {/* Start rendering router matches */}
+        </RouterProvider>
         <ReactQueryDevtools buttonPosition="top-right" />
         <TanStackRouterDevtools position="bottom-right" />
         <DehydrateRouter />

apps/vite-ssr/src/routes/index.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { flattenToAppURL } from '../utils';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { usePloneClient } from '@plone/client/provider';
+import { Breadcrumbs, RenderBlocks } from '@plone/components';
+import config from '@plone/registry';
 
 const expand = ['breadcrumbs', 'navigation'];
 
@@ -18,13 +20,22 @@ export const Route = createFileRoute('/')({
 
 function IndexComponent() {
   const { getContentQuery } = usePloneClient();
-  const postsQuery = useSuspenseQuery(
+  const { data } = useSuspenseQuery(
     getContentQuery({ path: flattenToAppURL('/'), expand }),
   );
   return (
     <div className="p-2">
-      <h3>Welcome Home!</h3>
-      {postsQuery.data.title}
+      <Breadcrumbs
+        items={data['@components'].breadcrumbs.items || []}
+        root={data['@components'].breadcrumbs.root}
+        includeRoot
+      />
+
+      <RenderBlocks
+        content={data}
+        blocksConfig={config.blocks.blocksConfig}
+        pathname="/"
+      />
     </div>
   );
 }