feat(cms): add live preview for pages and posts

.github/workflows/ci.yml

@@ -82,8 +82,8 @@ jobs:
           INFISICAL_TEST_SERVICE_TOKEN: ${{ secrets.INFISICAL_TEST_SERVICE_TOKEN }}
           INFISICAL_TEST_SITE: ${{ vars.INFISICAL_SITE }}
 
-      - name: Linux e2e smoke (pnpm)
-        run: pnpm nx affected -t e2e nx-payload-e2e -c skip-docker
+      - name: Linux nx-payload e2e smoke (pnpm)
+        run: pnpm nx affected -t e2e --exclude '*,!tag:scope:nx-payload-e2e' -c quick
         env:
           CDWR_E2E_PACKAGE_MANAGER: pnpm
           CDWR_E2E_VERDACCIO_HOST: localhost

apps/cms/src/app/(site)/[...slug]/page-preview.client.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { RenderPage } from '@codeware/shared/ui/cms-renderer';
+import type { Page } from '@codeware/shared/util/payload-types';
+import type { BlocksData } from '@codeware/shared/util/payload-utils';
+
+import { LivePreview } from '../../../components/LivePreview.client';
+
+type Props = {
+  page: Page;
+  blocksData?: BlocksData;
+};
+
+export function PagePreview({ page, blocksData }: Props) {
+  return (
+    <LivePreview initialData={page}>
+      {(data) => <RenderPage page={data} blocksData={blocksData} />}
+    </LivePreview>
+  );
+}

apps/cms/src/app/(site)/[...slug]/page.tsx

@@ -1,10 +1,11 @@
 import { notFound } from 'next/navigation';
 
 import { getPageData } from '@codeware/app-cms/data-access';
-import { RenderPage } from '@codeware/shared/ui/cms-renderer';
 
 import { payloadRuntime } from '../../../security/payload-runtime';
 
+import { PagePreview } from './page-preview.client';
+
 interface Props {
   params: Promise<{
     slug: string[];
@@ -22,5 +23,5 @@ export default async function Page({ params }: Props) {
     notFound();
   }
 
-  return <RenderPage page={data.page} blocksData={data.blocksData} />;
+  return <PagePreview page={data.page} blocksData={data.blocksData} />;
 }

apps/cms/src/app/(site)/landing-page-preview.client.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { RenderLandingPage } from '@codeware/shared/ui/cms-renderer';
+import type { Page } from '@codeware/shared/util/payload-types';
+
+import { LivePreview } from '../../components/LivePreview.client';
+
+type Props = {
+  landingPage: Page;
+};
+
+export function LandingPagePreview({ landingPage }: Props) {
+  return (
+    <LivePreview initialData={landingPage}>
+      {(data) => <RenderLandingPage landingPage={data} />}
+    </LivePreview>
+  );
+}

apps/cms/src/app/(site)/page.tsx

@@ -1,10 +1,11 @@
 import { notFound } from 'next/navigation';
 
 import { getPage } from '@codeware/app-cms/data-access';
-import { RenderLandingPage } from '@codeware/shared/ui/cms-renderer';
 
 import { payloadRuntime } from '../../security/payload-runtime';
 
+import { LandingPagePreview } from './landing-page-preview.client';
+
 // TODO: metadata
 
 export default async function SiteIndexPage() {
@@ -19,5 +20,5 @@ export default async function SiteIndexPage() {
     notFound();
   }
 
-  return <RenderLandingPage landingPage={page} />;
+  return <LandingPagePreview landingPage={page} />;
 }

apps/cms/src/app/(site)/posts/[...slug]/page.tsx

@@ -1,10 +1,11 @@
 import { notFound } from 'next/navigation';
 
 import { getPost } from '@codeware/app-cms/data-access';
-import { RenderPost } from '@codeware/shared/ui/cms-renderer';
 
 import { payloadRuntime } from '../../../../security/payload-runtime';
 
+import { PostPreview } from './post-preview.client';
+
 interface Props {
   params: Promise<{
     slug: string[];
@@ -16,12 +17,11 @@ export default async function Post({ params }: Props) {
   const slugString = slug.join('/');
 
   const runtime = await payloadRuntime();
-
   const post = await getPost(runtime, slugString);
 
   if (!post) {
     notFound();
   }
 
-  return <RenderPost post={post} />;
+  return <PostPreview post={post} />;
 }

apps/cms/src/app/(site)/posts/[...slug]/post-preview.client.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { RenderPost } from '@codeware/shared/ui/cms-renderer';
+import type { Post } from '@codeware/shared/util/payload-types';
+
+import { LivePreview } from '../../../../components/LivePreview.client';
+
+type Props = {
+  post: Post;
+};
+
+export function PostPreview({ post }: Props) {
+  return (
+    <LivePreview initialData={post} depth={1}>
+      {(data) => <RenderPost post={data} />}
+    </LivePreview>
+  );
+}

apps/cms/src/components/LivePreview.client.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useLivePreview } from '@payloadcms/live-preview-react';
+
+import { usePayload } from '@codeware/shared/ui/cms-renderer';
+
+interface LivePreviewProps<T extends Record<string, any>> {
+  initialData: T;
+  depth?: number;
+  children: (data: T) => React.ReactNode;
+}
+
+/**
+ * Generic client component for Payload live preview.
+ *
+ * Subscribes to live preview updates from the CMS admin panel and passes
+ * the current data (updated as-you-type) to the render function.
+ * Falls back to `initialData` when not in preview mode.
+ *
+ * @example
+ * ```tsx
+ * <LivePreview initialData={page}>
+ *   {(data) => <RenderPage page={data} blocksData={blocksData} />}
+ * </LivePreview>
+ * ```
+ */
+export function LivePreview<T extends Record<string, any>>({
+  initialData,
+  depth = 2,
+  children
+}: LivePreviewProps<T>) {
+  const { payloadUrl } = usePayload();
+  const { data } = useLivePreview<T>({
+    initialData,
+    serverURL: payloadUrl,
+    depth
+  });
+
+  return <>{children(data)}</>;
+}

apps/cms/src/components/RefreshRouteOnSave.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+import { usePayload } from '@codeware/shared/ui/cms-renderer';
+
+/**
+ * Client component for server-side live preview.
+ * Listens for save events from Payload CMS and triggers a route refresh.
+ *
+ * Add this component to your layout or page to enable live preview updates when content is saved in the CMS.
+ */
+export const RefreshRouteOnSave: React.FC = () => {
+  const { payloadUrl } = usePayload();
+  const router = useRouter();
+
+  return (
+    <PayloadLivePreview
+      refresh={() => router.refresh()}
+      serverURL={payloadUrl}
+    />
+  );
+};